@nettyapps/ntyui 21.1.11 → 21.1.13

package/fesm2022/nettyapps-ntyui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, NgModule, input, booleanAttribute, model, viewChild, effect, signal, inject, computed, output, HostListener, numberAttribute, ChangeDetectionStrategy, Injectable } from '@angular/core';
+import { Component, NgModule, input, booleanAttribute, inject, model, viewChild, effect, signal, computed, output, HostListener, numberAttribute, ChangeDetectionStrategy, Injectable } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { Validators, FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i2 from '@angular/material/form-field';
@@ -8,9 +8,10 @@ import * as i3 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 import * as i4 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
+import { AlertService } from '@nettyapps/ntybase';
 import * as i4$1 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import { DateAdapter, MatNativeDateModule, provideNativeDateAdapter } from '@angular/material/core';
+import { NativeDateAdapter, DateAdapter, MatNativeDateModule, provideNativeDateAdapter } from '@angular/material/core';
 import * as i6 from '@angular/material/timepicker';
 import { MatTimepickerModule } from '@angular/material/timepicker';
 import * as i1$1 from '@angular/common';
@@ -78,6 +79,8 @@ class UiBase {
     validateRegex = input(null, ...(ngDevMode ? [{ debugName: "validateRegex" }] : []));
     validateRegexErrorMessage = input('@invalidFormat', ...(ngDevMode ? [{ debugName: "validateRegexErrorMessage" }] : []));
     forFilter = input(false, { ...(ngDevMode ? { debugName: "forFilter" } : {}), transform: booleanAttribute });
+    // Services
+    alertService = inject(AlertService);
     // Debounce properties
     debounce = input(200, ...(ngDevMode ? [{ debugName: "debounce" }] : []));
     debounceTimer;
@@ -269,13 +272,62 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
                     ], host: { 'ntyui-id': 'NettyUIEmailInput' }, template: "<mat-form-field\n  class=\"example-full-width\"\n  [appearance]=\"appearance()\"\n  [class.required-field]=\"required()\"\n  [class.required-with-value]=\"required() && value()\"\n>\n  @if (label()) {\n  <mat-label>{{ label() }}</mat-label>\n  }\n\n  <input\n    #inputModel=\"ngModel\"\n    type=\"email\"\n    matInput\n    [placeholder]=\"placeholder()\"\n    [(ngModel)]=\"value\"\n    (input)=\"onInputChange($event)\"\n  />\n  @if (value() && !disabled()) {\n  <button\n    mat-icon-button\n    matSuffix\n    (click)=\"clearInput()\"\n    aria-label=\"Clear\"\n    class=\"clear-btn number-clear-btn\"\n  >\n    <mat-icon>cancel</mat-icon>\n  </button>\n  } @if (inputModel?.invalid && (inputModel?.dirty || inputModel?.touched)) {\n  <mat-error> {{ getErrorMessage() }} </mat-error>\n  }\n</mat-form-field>\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}\n"] }]
         }] });
 
+class PartialDateAdapter extends NativeDateAdapter {
+    parse(value) {
+        if (typeof value === 'string') {
+            const trimmed = value.trim();
+            if (!trimmed)
+                return null;
+            // Ayraçları normalize et
+            const normalized = trimmed.replace(/[.\-]/g, '/');
+            const parts = normalized.split('/');
+            // Sadece Gün (10) veya Gün/Ay (10/3) girilmişse
+            if (parts.length === 1 || parts.length === 2) {
+                const today = new Date();
+                let day = today.getDate();
+                let month = today.getMonth();
+                const year = today.getFullYear(); // Yıl her zaman içinde bulunduğumuz yıl
+                if (parts.length === 1) {
+                    const d = parseInt(parts[0], 10);
+                    if (!isNaN(d) && d >= 1 && d <= 31) {
+                        day = d;
+                    }
+                    else {
+                        return super.parse(value);
+                    }
+                }
+                else if (parts.length === 2) {
+                    const d = parseInt(parts[0], 10);
+                    const m = parseInt(parts[1], 10);
+                    if (!isNaN(d) && !isNaN(m) && d >= 1 && d <= 31 && m >= 1 && m <= 12) {
+                        day = d;
+                        month = m - 1;
+                    }
+                    else {
+                        return super.parse(value);
+                    }
+                }
+                // Geçersiz tarihleri (örn. 30 Şubat) engellemek için kontrol
+                const parsedDate = new Date(year, month, day);
+                if (!isNaN(parsedDate.getTime()) &&
+                    parsedDate.getDate() === day &&
+                    parsedDate.getMonth() === month) {
+                    return parsedDate; // MatDatepicker'a doğru tarihi ver
+                }
+            }
+        }
+        // Tam tarih formatıysa varsayılan parser işini yapsın
+        return super.parse(value);
+    }
+}
+
 class NettyUIDateTime extends UiBase {
-    // Combined value output
-    dateTimeValue = model(null, ...(ngDevMode ? [{ debugName: "dateTimeValue" }] : []));
-    // Input properties
+    // State Management
     timeLabel = input('', ...(ngDevMode ? [{ debugName: "timeLabel" }] : []));
     dateRestriction = input('any', ...(ngDevMode ? [{ debugName: "dateRestriction" }] : []));
     timeFormat = input('tr-TR', ...(ngDevMode ? [{ debugName: "timeFormat" }] : []));
+    // Combined value output
+    dateTimeValue = model(null, ...(ngDevMode ? [{ debugName: "dateTimeValue" }] : []));
     // Date properties
     dateValue = signal(null, ...(ngDevMode ? [{ debugName: "dateValue" }] : []));
     // Time properties
@@ -284,7 +336,7 @@ class NettyUIDateTime extends UiBase {
     dateModel = viewChild('dateModel', ...(ngDevMode ? [{ debugName: "dateModel" }] : []));
     timeModel = viewChild('timeModel', ...(ngDevMode ? [{ debugName: "timeModel" }] : []));
     inputModel = viewChild('dateInputModel', ...(ngDevMode ? [{ debugName: "inputModel" }] : []));
-    dateAdapter = inject(DateAdapter);
+    _dateAdapter = inject(DateAdapter);
     displayValue = computed(() => {
         const date = this.dateValue();
         if (!date)
@@ -336,7 +388,8 @@ class NettyUIDateTime extends UiBase {
         });
         // Locale changes
         effect(() => {
-            this.dateAdapter.setLocale(this.timeFormat());
+            const locale = this.timeFormat();
+            this._dateAdapter.setLocale(locale);
         });
     }
     updateCombinedValue() {
@@ -405,39 +458,54 @@ class NettyUIDateTime extends UiBase {
         this.dateTimeValue.set(shouldBeNull ? null : new Date('1900-01-01T00:00:00'));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NettyUIDateTime, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: NettyUIDateTime, isStandalone: true, selector: "ntyui-date-time", inputs: { dateTimeValue: { classPropertyName: "dateTimeValue", publicName: "dateTimeValue", isSignal: true, isRequired: false, transformFunction: null }, timeLabel: { classPropertyName: "timeLabel", publicName: "timeLabel", isSignal: true, isRequired: false, transformFunction: null }, dateRestriction: { classPropertyName: "dateRestriction", publicName: "dateRestriction", isSignal: true, isRequired: false, transformFunction: null }, timeFormat: { classPropertyName: "timeFormat", publicName: "timeFormat", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateTimeValue: "dateTimeValueChange" }, host: { attributes: { "ntyui-id": "NettyUIDateTime" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: NettyUIDateTime, isStandalone: true, selector: "ntyui-date-time", inputs: { timeLabel: { classPropertyName: "timeLabel", publicName: "timeLabel", isSignal: true, isRequired: false, transformFunction: null }, dateRestriction: { classPropertyName: "dateRestriction", publicName: "dateRestriction", isSignal: true, isRequired: false, transformFunction: null }, timeFormat: { classPropertyName: "timeFormat", publicName: "timeFormat", isSignal: true, isRequired: false, transformFunction: null }, dateTimeValue: { classPropertyName: "dateTimeValue", publicName: "dateTimeValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateTimeValue: "dateTimeValueChange" }, host: { attributes: { "ntyui-id": "NettyUIDateTime" } }, providers: [
+            provideNativeDateAdapter(),
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: NettyUIDateTime,
                 multi: true,
             },
+            {
+                provide: DateAdapter,
+                useClass: PartialDateAdapter
+            }
         ], viewQueries: [{ propertyName: "dateModel", first: true, predicate: ["dateModel"], descendants: true, isSignal: true }, { propertyName: "timeModel", first: true, predicate: ["timeModel"], descendants: true, isSignal: true }, { propertyName: "inputModel", first: true, predicate: ["dateInputModel"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"datetime-container\">\n  <!-- Datetime -->\n  <mat-form-field\n    [appearance]=\"appearance()\"\n    class=\"datepicker\"\n    [class.required-field]=\"required()\"\n    [class.required-with-value]=\"required() && dateValue()\"\n  >\n    @if (label()) {\n    <mat-label>{{ label() }}</mat-label>\n    }\n\n    <input\n      #dateInputModel=\"ngModel\"\n      matInput\n      [matDatepicker]=\"picker\"\n      [placeholder]=\"placeholder()\"\n      [ngModel]=\"dateValue()\"\n      (dateChange)=\"onDateChange($event)\"\n      [min]=\"minDate() ?? undefined\"\n      [max]=\"maxDate() ?? undefined\"\n    />\n\n    @if (dateValue() && !disabled()) {\n    <button\n      mat-icon-button\n      matSuffix\n      (click)=\"clearInput()\"\n      aria-label=\"Clear\"\n      class=\"clear-btn date-clear\"\n    >\n      <mat-icon>cancel</mat-icon>\n    </button>\n    } @if (dateInputModel.invalid && (dateInputModel.dirty ||\n    dateInputModel.touched)) {\n    <mat-error> {{ getErrorMessage() }} </mat-error>\n    }\n\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    <mat-datepicker #picker></mat-datepicker>\n  </mat-form-field>\n\n  <!-- Timepicker -->\n  <mat-form-field\n    class=\"time-field\"\n    [appearance]=\"appearance()\"\n    [class.required-field]=\"required()\"\n    [class.required-with-value]=\"required() && timeValue()\"\n  >\n    @if (timeLabel()) {\n    <mat-label>{{ timeLabel() }}</mat-label>\n    }\n    <input\n      #timeInputModel=\"ngModel\"\n      matInput\n      [matTimepicker]=\"timepicker\"\n      [ngModel]=\"timeValue()\"\n      (ngModelChange)=\"onTimeChange($event)\"\n      [ngModelOptions]=\"{updateOn: 'blur'}\"\n      [disabled]=\"disabled()\"\n    />\n\n    @if ( timeInputModel.invalid && ( timeInputModel.dirty ||\n    timeInputModel.touched)) {\n    <mat-error> {{ getErrorMessage() }} </mat-error>\n    }\n\n    <mat-timepicker #timepicker />\n    <mat-timepicker-toggle [for]=\"timepicker\" matSuffix />\n  </mat-form-field>\n</div>\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}.datetime-container{display:flex;align-items:flex-start}@media(max-width:600px){.datetime-container{flex-wrap:nowrap;overflow-x:auto;align-items:flex-start}}.datepicker,.time-field{width:50%}::ng-deep .mat-mdc-form-field-icon-prefix,::ng-deep .mat-mdc-form-field-icon-suffix{display:flex!important;flex-direction:row!important;align-items:center!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i4$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTimepickerModule }, { kind: "component", type: i6.MatTimepicker, selector: "mat-timepicker", inputs: ["interval", "options", "disableRipple", "aria-label", "aria-labelledby", "panelClass"], outputs: ["selected", "opened", "closed"], exportAs: ["matTimepicker"] }, { kind: "directive", type: i6.MatTimepickerInput, selector: "input[matTimepicker]", inputs: ["value", "matTimepicker", "matTimepickerMin", "matTimepickerMax", "matTimepickerOpenOnClick", "disabled"], outputs: ["valueChange"], exportAs: ["matTimepickerInput"] }, { kind: "component", type: i6.MatTimepickerToggle, selector: "mat-timepicker-toggle", inputs: ["for", "aria-label", "aria-labelledby", "disabled", "tabIndex", "disableRipple"], exportAs: ["matTimepickerToggle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NettyUIDateTime, decorators: [{
             type: Component,
             args: [{ selector: 'ntyui-date-time', imports: [FormsModule, MatFormFieldModule, MatInputModule, ReactiveFormsModule, MatDatepickerModule, MatNativeDateModule, MatIconModule, MatTimepickerModule], providers: [
+                        provideNativeDateAdapter(),
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: NettyUIDateTime,
                             multi: true,
                         },
+                        {
+                            provide: DateAdapter,
+                            useClass: PartialDateAdapter
+                        }
                     ], host: { 'ntyui-id': 'NettyUIDateTime' }, template: "<div class=\"datetime-container\">\n  <!-- Datetime -->\n  <mat-form-field\n    [appearance]=\"appearance()\"\n    class=\"datepicker\"\n    [class.required-field]=\"required()\"\n    [class.required-with-value]=\"required() && dateValue()\"\n  >\n    @if (label()) {\n    <mat-label>{{ label() }}</mat-label>\n    }\n\n    <input\n      #dateInputModel=\"ngModel\"\n      matInput\n      [matDatepicker]=\"picker\"\n      [placeholder]=\"placeholder()\"\n      [ngModel]=\"dateValue()\"\n      (dateChange)=\"onDateChange($event)\"\n      [min]=\"minDate() ?? undefined\"\n      [max]=\"maxDate() ?? undefined\"\n    />\n\n    @if (dateValue() && !disabled()) {\n    <button\n      mat-icon-button\n      matSuffix\n      (click)=\"clearInput()\"\n      aria-label=\"Clear\"\n      class=\"clear-btn date-clear\"\n    >\n      <mat-icon>cancel</mat-icon>\n    </button>\n    } @if (dateInputModel.invalid && (dateInputModel.dirty ||\n    dateInputModel.touched)) {\n    <mat-error> {{ getErrorMessage() }} </mat-error>\n    }\n\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    <mat-datepicker #picker></mat-datepicker>\n  </mat-form-field>\n\n  <!-- Timepicker -->\n  <mat-form-field\n    class=\"time-field\"\n    [appearance]=\"appearance()\"\n    [class.required-field]=\"required()\"\n    [class.required-with-value]=\"required() && timeValue()\"\n  >\n    @if (timeLabel()) {\n    <mat-label>{{ timeLabel() }}</mat-label>\n    }\n    <input\n      #timeInputModel=\"ngModel\"\n      matInput\n      [matTimepicker]=\"timepicker\"\n      [ngModel]=\"timeValue()\"\n      (ngModelChange)=\"onTimeChange($event)\"\n      [ngModelOptions]=\"{updateOn: 'blur'}\"\n      [disabled]=\"disabled()\"\n    />\n\n    @if ( timeInputModel.invalid && ( timeInputModel.dirty ||\n    timeInputModel.touched)) {\n    <mat-error> {{ getErrorMessage() }} </mat-error>\n    }\n\n    <mat-timepicker #timepicker />\n    <mat-timepicker-toggle [for]=\"timepicker\" matSuffix />\n  </mat-form-field>\n</div>\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}.datetime-container{display:flex;align-items:flex-start}@media(max-width:600px){.datetime-container{flex-wrap:nowrap;overflow-x:auto;align-items:flex-start}}.datepicker,.time-field{width:50%}::ng-deep .mat-mdc-form-field-icon-prefix,::ng-deep .mat-mdc-form-field-icon-suffix{display:flex!important;flex-direction:row!important;align-items:center!important}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { dateTimeValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateTimeValue", required: false }] }, { type: i0.Output, args: ["dateTimeValueChange"] }], timeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeLabel", required: false }] }], dateRestriction: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateRestriction", required: false }] }], timeFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeFormat", required: false }] }], dateModel: [{ type: i0.ViewChild, args: ['dateModel', { isSignal: true }] }], timeModel: [{ type: i0.ViewChild, args: ['timeModel', { isSignal: true }] }], inputModel: [{ type: i0.ViewChild, args: ['dateInputModel', { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { timeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeLabel", required: false }] }], dateRestriction: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateRestriction", required: false }] }], timeFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeFormat", required: false }] }], dateTimeValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateTimeValue", required: false }] }, { type: i0.Output, args: ["dateTimeValueChange"] }], dateModel: [{ type: i0.ViewChild, args: ['dateModel', { isSignal: true }] }], timeModel: [{ type: i0.ViewChild, args: ['timeModel', { isSignal: true }] }], inputModel: [{ type: i0.ViewChild, args: ['dateInputModel', { isSignal: true }] }] } });
 
 class NettyUIDatePicker extends UiBase {
     // Constants
     NULL_DATE = '1900-01-01T00:00:00.000Z'; // Null date in UTC format
-    // Inputs
+    // Services
+    _dateAdapter = inject(DateAdapter);
+    // State Management
     dateRestriction = input('any', ...(ngDevMode ? [{ debugName: "dateRestriction" }] : []));
-    // Model and Signals
     dateValue = model(null, ...(ngDevMode ? [{ debugName: "dateValue" }] : []));
     selectedDate = model(null, ...(ngDevMode ? [{ debugName: "selectedDate" }] : []));
     displayValue = signal(null, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
-    // Date limits
+    timeFormat = input('tr-TR', ...(ngDevMode ? [{ debugName: "timeFormat" }] : []));
     minDate = signal(null, ...(ngDevMode ? [{ debugName: "minDate" }] : []));
     maxDate = signal(null, ...(ngDevMode ? [{ debugName: "maxDate" }] : []));
     constructor() {
         super();
+        effect(() => {
+            const locale = this.timeFormat();
+            this._dateAdapter.setLocale(locale);
+        });
         // Update displayValue and dateValue when selected date changes
         effect(() => {
             const date = this.selectedDate();
@@ -519,80 +587,37 @@ class NettyUIDatePicker extends UiBase {
      * @param event The blur event from the input element.
      */
     onInputBlur(event) {
-        const input = event.target;
-        const value = input.value;
-        if (!value || value.trim() === '') {
-            return;
-        }
-        // If it's just a number or D/M format, try to complete it
-        const parsedDate = this.parsePartialDate(value);
-        if (parsedDate) {
-            this.selectedDate.set(parsedDate);
-            this.onChange(parsedDate.toISOString());
-            this.onTouched();
-        }
-    }
-    parsePartialDate(value) {
-        // Normalize separators
-        const normalized = value.replace(/[.\-]/g, '/');
-        const parts = normalized.split('/');
-        if (parts.length > 2) {
-            return null; // Let the default parser handle full dates
-        }
-        const today = new Date();
-        let day = today.getDate();
-        let month = today.getMonth();
-        let year = today.getFullYear();
-        if (parts.length === 1) {
-            // Only "D" provided
-            const d = parseInt(parts[0], 10);
-            if (isNaN(d) || d < 1 || d > 31)
-                return null;
-            day = d;
-        }
-        else if (parts.length === 2) {
-            // "D/M" provided
-            const d = parseInt(parts[0], 10);
-            const m = parseInt(parts[1], 10);
-            if (isNaN(d) || isNaN(m) || d < 1 || d > 31 || m < 1 || m > 12)
-                return null;
-            day = d;
-            month = m - 1;
-        }
-        // Create local date to validate day of month (e.g. Feb 30)
-        const date = new Date(year, month, day);
-        if (isNaN(date.getTime()) ||
-            date.getDate() !== day ||
-            date.getMonth() !== month) {
-            return null;
-        }
-        // Convert to UTC as the component expects
-        const utcDate = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
-        // Check restrictions
-        if (!this.isDateValid(utcDate)) {
-            return null;
-        }
-        return utcDate;
+        this.onTouched();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NettyUIDatePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: NettyUIDatePicker, isStandalone: true, selector: "ntyui-date-picker", inputs: { dateRestriction: { classPropertyName: "dateRestriction", publicName: "dateRestriction", isSignal: true, isRequired: false, transformFunction: null }, dateValue: { classPropertyName: "dateValue", publicName: "dateValue", isSignal: true, isRequired: false, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateValue: "dateValueChange", selectedDate: "selectedDateChange" }, host: { attributes: { "ntyui-id": "NettyUIDatePicker" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: NettyUIDatePicker, isStandalone: true, selector: "ntyui-date-picker", inputs: { dateRestriction: { classPropertyName: "dateRestriction", publicName: "dateRestriction", isSignal: true, isRequired: false, transformFunction: null }, dateValue: { classPropertyName: "dateValue", publicName: "dateValue", isSignal: true, isRequired: false, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: false, transformFunction: null }, timeFormat: { classPropertyName: "timeFormat", publicName: "timeFormat", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateValue: "dateValueChange", selectedDate: "selectedDateChange" }, host: { attributes: { "ntyui-id": "NettyUIDatePicker" } }, providers: [
+            provideNativeDateAdapter(),
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: NettyUIDatePicker,
                 multi: true,
             },
+            {
+                provide: DateAdapter,
+                useClass: PartialDateAdapter
+            }
         ], usesInheritance: true, ngImport: i0, template: "<mat-form-field\n  [appearance]=\"appearance()\"\n  class=\"example-full-width\"\n  [class.required-field]=\"required()\"\n  [class.required-with-value]=\"required() && selectedDate()\"\n>\n  @if (label()) {\n  <mat-label>{{ label() }}</mat-label>\n  }\n\n  <input\n    #inputModel=\"ngModel\"\n    matInput\n    [matDatepicker]=\"picker\"\n    [placeholder]=\"placeholder()\"\n    [(ngModel)]=\"selectedDate\"\n    (dateChange)=\"onDateChange($event)\"\n    (blur)=\"onInputBlur($event)\"\n    [min]=\"minDate() ?? undefined\"\n    [max]=\"maxDate() ?? undefined\"\n  />\n\n  <button\n    mat-icon-button\n    matSuffix\n    [class.invisible]=\"!selectedDate() || disabled()\"\n    (click)=\"clearInput()\"\n    aria-label=\"Clear\"\n    class=\"clear-btn date-clear\"\n  >\n    <mat-icon>cancel</mat-icon>\n  </button>\n\n  @if (inputModel.invalid && (inputModel.dirty || inputModel.touched)) {\n  <mat-error> {{ getErrorMessage() }} </mat-error>\n  }\n\n  <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n  <mat-datepicker #picker></mat-datepicker>\n</mat-form-field>\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}.mat-datepicker-toggle{margin-right:5px}.clear-btn{opacity:1;transition:opacity .2s}.clear-btn.invisible{opacity:0;pointer-events:none}.mat-form-field-suffix{display:flex;align-items:center;gap:4px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i4$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NettyUIDatePicker, decorators: [{
             type: Component,
             args: [{ selector: 'ntyui-date-picker', imports: [FormsModule, MatFormFieldModule, MatInputModule, ReactiveFormsModule, MatDatepickerModule, MatNativeDateModule, MatIconModule], providers: [
+                        provideNativeDateAdapter(),
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: NettyUIDatePicker,
                             multi: true,
                         },
+                        {
+                            provide: DateAdapter,
+                            useClass: PartialDateAdapter
+                        }
                     ], host: { 'ntyui-id': 'NettyUIDatePicker' }, template: "<mat-form-field\n  [appearance]=\"appearance()\"\n  class=\"example-full-width\"\n  [class.required-field]=\"required()\"\n  [class.required-with-value]=\"required() && selectedDate()\"\n>\n  @if (label()) {\n  <mat-label>{{ label() }}</mat-label>\n  }\n\n  <input\n    #inputModel=\"ngModel\"\n    matInput\n    [matDatepicker]=\"picker\"\n    [placeholder]=\"placeholder()\"\n    [(ngModel)]=\"selectedDate\"\n    (dateChange)=\"onDateChange($event)\"\n    (blur)=\"onInputBlur($event)\"\n    [min]=\"minDate() ?? undefined\"\n    [max]=\"maxDate() ?? undefined\"\n  />\n\n  <button\n    mat-icon-button\n    matSuffix\n    [class.invisible]=\"!selectedDate() || disabled()\"\n    (click)=\"clearInput()\"\n    aria-label=\"Clear\"\n    class=\"clear-btn date-clear\"\n  >\n    <mat-icon>cancel</mat-icon>\n  </button>\n\n  @if (inputModel.invalid && (inputModel.dirty || inputModel.touched)) {\n  <mat-error> {{ getErrorMessage() }} </mat-error>\n  }\n\n  <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n  <mat-datepicker #picker></mat-datepicker>\n</mat-form-field>\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}.mat-datepicker-toggle{margin-right:5px}.clear-btn{opacity:1;transition:opacity .2s}.clear-btn.invisible{opacity:0;pointer-events:none}.mat-form-field-suffix{display:flex;align-items:center;gap:4px}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { dateRestriction: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateRestriction", required: false }] }], dateValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateValue", required: false }] }, { type: i0.Output, args: ["dateValueChange"] }], selectedDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedDate", required: false }] }, { type: i0.Output, args: ["selectedDateChange"] }] } });
+        }], ctorParameters: () => [], propDecorators: { dateRestriction: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateRestriction", required: false }] }], dateValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateValue", required: false }] }, { type: i0.Output, args: ["dateValueChange"] }], selectedDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedDate", required: false }] }, { type: i0.Output, args: ["selectedDateChange"] }], timeFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeFormat", required: false }] }] } });
 
 class NettyUIMaskedInput extends UiBase {
     // Input properties
@@ -1024,8 +1049,8 @@ class NettyUINumberInput extends UiBase {
             this.value.set(result.toString());
         }
         catch (e) {
-            console.error('Hesaplama hatası:', e);
-            this.value.set('Geçersiz ifade girdiniz.');
+            this.alertService.showError('Hesaplama hatası:', e);
+            this.value.set('Geçersiz ifade girdiniz');
             setTimeout(() => {
                 this.value.set('');
             }, 2000);
@@ -1178,7 +1203,7 @@ class NettyUISelect extends UiBase {
                 useExisting: NettyUISelect,
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "selectModel", first: true, predicate: ["selectModel"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<mat-form-field\n  class=\"example-full-width\"\n  [appearance]=\"appearance()\"\n  [class.required-field]=\"required()\"\n  [class.required-with-value]=\"required() && value()\"\n>\n  @if (label()) {\n  <mat-label>{{ label() }}</mat-label>\n  }\n\n  <mat-select\n    #inputModel=\"ngModel\"\n    [(ngModel)]=\"selectedValue\"\n    [placeholder]=\"placeholder()\"\n    [required]=\"required() && !nullAllowed()\"\n    [multiple]=\"multiple()\"\n  >\n    <!-- Custom trigger -->\n    @if (showCustomTrigger()) {\n    <mat-select-trigger>\n      @if (multiple()) { {{ getSelectedText(selectedValue()?.[0]) || '' }} @if\n      ((selectedValue()?.length || 0) > 1) {\n      <span class=\"additional-selection\">\n        (+{{ getSelectedCount() - 1 }} {{ getSelectedCount() === 2 ? 'other' :\n        'others' }})\n      </span>\n      } } @else { {{ getSelectedText(selectedValue()) || '' }} }\n    </mat-select-trigger>\n    }\n    <!-- None option -->\n    @if (hasNoneOption()) {\n    <mat-option [value]=\"null\"> {{ placeholder() || 'Hepsi' }} </mat-option>\n    }\n    <!-- Dynamic options -->\n    @for (option of enumList(); track option.value) {\n    <mat-option [value]=\"option.value\"> {{ option.text }} </mat-option>\n    }\n  </mat-select>\n\n  @if (inputModel?.hasError('required')) {\n  <mat-error>{{ getErrorMessage() }}</mat-error>\n  }\n</mat-form-field>\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}.example-full-width{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2$3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i2$3.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2$3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatInputModule }] });
+        ], viewQueries: [{ propertyName: "selectModel", first: true, predicate: ["selectModel"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<mat-form-field\n  class=\"example-full-width\"\n  [appearance]=\"appearance()\"\n  [class.required-field]=\"required()\"\n  [class.required-with-value]=\"required() && (multiple() ? selectedValue()?.length > 0 : selectedValue() !== null)\"\n>\n  @if (label()) {\n  <mat-label>{{ label() }}</mat-label>\n  }\n\n  <mat-select\n    #inputModel=\"ngModel\"\n    [(ngModel)]=\"selectedValue\"\n    [placeholder]=\"placeholder()\"\n    [required]=\"required() && !nullAllowed()\"\n    [multiple]=\"multiple()\"\n  >\n    <!-- Custom trigger -->\n    @if (showCustomTrigger()) {\n    <mat-select-trigger>\n      @if (multiple()) { {{ getSelectedText(selectedValue()?.[0]) || '' }} @if\n      ((selectedValue()?.length || 0) > 1) {\n      <span class=\"additional-selection\">\n        (+{{ getSelectedCount() - 1 }} {{ getSelectedCount() === 2 ? 'other' :\n        'others' }})\n      </span>\n      } } @else { {{ getSelectedText(selectedValue()) || '' }} }\n    </mat-select-trigger>\n    }\n    <!-- None option -->\n    @if (hasNoneOption()) {\n    <mat-option [value]=\"null\"> {{ placeholder() || 'Hepsi' }} </mat-option>\n    }\n    <!-- Dynamic options -->\n    @for (option of enumList(); track option.value) {\n    <mat-option [value]=\"option.value\"> {{ option.text }} </mat-option>\n    }\n  </mat-select>\n\n  @if (inputModel?.hasError('required')) {\n  <mat-error>{{ getErrorMessage() }}</mat-error>\n  }\n</mat-form-field>\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2$3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i2$3.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2$3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatInputModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NettyUISelect, decorators: [{
             type: Component,
@@ -1188,7 +1213,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
                             useExisting: NettyUISelect,
                             multi: true,
                         },
-                    ], host: { 'ntyui-id': 'NettyUISelect' }, template: "<mat-form-field\n  class=\"example-full-width\"\n  [appearance]=\"appearance()\"\n  [class.required-field]=\"required()\"\n  [class.required-with-value]=\"required() && value()\"\n>\n  @if (label()) {\n  <mat-label>{{ label() }}</mat-label>\n  }\n\n  <mat-select\n    #inputModel=\"ngModel\"\n    [(ngModel)]=\"selectedValue\"\n    [placeholder]=\"placeholder()\"\n    [required]=\"required() && !nullAllowed()\"\n    [multiple]=\"multiple()\"\n  >\n    <!-- Custom trigger -->\n    @if (showCustomTrigger()) {\n    <mat-select-trigger>\n      @if (multiple()) { {{ getSelectedText(selectedValue()?.[0]) || '' }} @if\n      ((selectedValue()?.length || 0) > 1) {\n      <span class=\"additional-selection\">\n        (+{{ getSelectedCount() - 1 }} {{ getSelectedCount() === 2 ? 'other' :\n        'others' }})\n      </span>\n      } } @else { {{ getSelectedText(selectedValue()) || '' }} }\n    </mat-select-trigger>\n    }\n    <!-- None option -->\n    @if (hasNoneOption()) {\n    <mat-option [value]=\"null\"> {{ placeholder() || 'Hepsi' }} </mat-option>\n    }\n    <!-- Dynamic options -->\n    @for (option of enumList(); track option.value) {\n    <mat-option [value]=\"option.value\"> {{ option.text }} </mat-option>\n    }\n  </mat-select>\n\n  @if (inputModel?.hasError('required')) {\n  <mat-error>{{ getErrorMessage() }}</mat-error>\n  }\n</mat-form-field>\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}.example-full-width{width:100%}\n"] }]
+                    ], host: { 'ntyui-id': 'NettyUISelect' }, template: "<mat-form-field\n  class=\"example-full-width\"\n  [appearance]=\"appearance()\"\n  [class.required-field]=\"required()\"\n  [class.required-with-value]=\"required() && (multiple() ? selectedValue()?.length > 0 : selectedValue() !== null)\"\n>\n  @if (label()) {\n  <mat-label>{{ label() }}</mat-label>\n  }\n\n  <mat-select\n    #inputModel=\"ngModel\"\n    [(ngModel)]=\"selectedValue\"\n    [placeholder]=\"placeholder()\"\n    [required]=\"required() && !nullAllowed()\"\n    [multiple]=\"multiple()\"\n  >\n    <!-- Custom trigger -->\n    @if (showCustomTrigger()) {\n    <mat-select-trigger>\n      @if (multiple()) { {{ getSelectedText(selectedValue()?.[0]) || '' }} @if\n      ((selectedValue()?.length || 0) > 1) {\n      <span class=\"additional-selection\">\n        (+{{ getSelectedCount() - 1 }} {{ getSelectedCount() === 2 ? 'other' :\n        'others' }})\n      </span>\n      } } @else { {{ getSelectedText(selectedValue()) || '' }} }\n    </mat-select-trigger>\n    }\n    <!-- None option -->\n    @if (hasNoneOption()) {\n    <mat-option [value]=\"null\"> {{ placeholder() || 'Hepsi' }} </mat-option>\n    }\n    <!-- Dynamic options -->\n    @for (option of enumList(); track option.value) {\n    <mat-option [value]=\"option.value\"> {{ option.text }} </mat-option>\n    }\n  </mat-select>\n\n  @if (inputModel?.hasError('required')) {\n  <mat-error>{{ getErrorMessage() }}</mat-error>\n  }\n</mat-form-field>\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { showNoneOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "showNoneOption", required: false }] }], nullAllowed: [{ type: i0.Input, args: [{ isSignal: true, alias: "nullAllowed", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], showCustomTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCustomTrigger", required: false }] }], enumList: [{ type: i0.Input, args: [{ isSignal: true, alias: "enumList", required: false }] }, { type: i0.Output, args: ["enumListChange"] }], selectedValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedValue", required: false }] }, { type: i0.Output, args: ["selectedValueChange"] }], selectModel: [{ type: i0.ViewChild, args: ['selectModel', { isSignal: true }] }] } });
 
 class NettyUIVisibleSwitchButton extends UiBase {
@@ -1598,21 +1623,31 @@ class NettyuUIDateTimeRange extends UiBase {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NettyuUIDateTimeRange, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.2", type: NettyuUIDateTimeRange, isStandalone: true, selector: "ntyui-date-time-range", inputs: { endValue: { classPropertyName: "endValue", publicName: "endValue", isSignal: true, isRequired: false, transformFunction: null }, endLabel: { classPropertyName: "endLabel", publicName: "endLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { endValue: "endValueChange" }, providers: [
+            provideNativeDateAdapter(),
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: NettyuUIDateTimeRange,
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"datetime-range-wrapper\">\n  <div class=\"range-field\">\n    <ntyui-date-time\n      [label]=\"label()\"\n      [appearance]=\"appearance()\"\n      [required]=\"required()\"\n      [forFilter]=\"forFilter()\"\n      [disabled]=\"disabled()\"\n      [(ngModel)]=\"value\"\n    ></ntyui-date-time>\n  </div>\n\n  <div class=\"range-separator\">\n    <span class=\"dash\">\u2014</span>\n  </div>\n\n  <div class=\"range-field\">\n    <ntyui-date-time\n      [label]=\"endLabel() || label()\"\n      [appearance]=\"appearance()\"\n      [required]=\"required()\"\n      [forFilter]=\"forFilter()\"\n      [disabled]=\"disabled()\"\n      [(ngModel)]=\"endValue\"\n    ></ntyui-date-time>\n  </div>\n</div>", styles: [".datetime-range-wrapper{display:flex;flex-direction:row;align-items:flex-start;gap:12px;width:100%}.datetime-range-wrapper .range-field{flex:1;min-width:0}.datetime-range-wrapper .range-separator{display:flex;align-items:center;height:56px;color:#00000061;font-weight:700}@media(max-width:768px){.datetime-range-wrapper{flex-direction:column;gap:0}.datetime-range-wrapper .range-separator{display:none}}\n"], dependencies: [{ kind: "component", type: NettyUIDateTime, selector: "ntyui-date-time", inputs: ["dateTimeValue", "timeLabel", "dateRestriction", "timeFormat"], outputs: ["dateTimeValueChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+            {
+                provide: DateAdapter,
+                useClass: PartialDateAdapter
+            }
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"datetime-range-wrapper\">\n  <div class=\"range-field\">\n    <ntyui-date-time\n      [label]=\"label()\"\n      [appearance]=\"appearance()\"\n      [required]=\"required()\"\n      [forFilter]=\"forFilter()\"\n      [disabled]=\"disabled()\"\n      [(ngModel)]=\"value\"\n    ></ntyui-date-time>\n  </div>\n\n  <div class=\"range-separator\">\n    <span class=\"dash\">\u2014</span>\n  </div>\n\n  <div class=\"range-field\">\n    <ntyui-date-time\n      [label]=\"endLabel() || label()\"\n      [appearance]=\"appearance()\"\n      [required]=\"required()\"\n      [forFilter]=\"forFilter()\"\n      [disabled]=\"disabled()\"\n      [(ngModel)]=\"endValue\"\n    ></ntyui-date-time>\n  </div>\n</div>", styles: [".datetime-range-wrapper{display:flex;flex-direction:row;align-items:flex-start;gap:12px;width:100%}.datetime-range-wrapper .range-field{flex:1;min-width:0}.datetime-range-wrapper .range-separator{display:flex;align-items:center;height:56px;color:#00000061;font-weight:700}@media(max-width:768px){.datetime-range-wrapper{flex-direction:column;gap:0}.datetime-range-wrapper .range-separator{display:none}}\n"], dependencies: [{ kind: "component", type: NettyUIDateTime, selector: "ntyui-date-time", inputs: ["timeLabel", "dateRestriction", "timeFormat", "dateTimeValue"], outputs: ["dateTimeValueChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NettyuUIDateTimeRange, decorators: [{
             type: Component,
             args: [{ selector: 'ntyui-date-time-range', imports: [NettyUIDateTime, FormsModule], providers: [
+                        provideNativeDateAdapter(),
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: NettyuUIDateTimeRange,
                             multi: true,
                         },
+                        {
+                            provide: DateAdapter,
+                            useClass: PartialDateAdapter
+                        }
                     ], template: "<div class=\"datetime-range-wrapper\">\n  <div class=\"range-field\">\n    <ntyui-date-time\n      [label]=\"label()\"\n      [appearance]=\"appearance()\"\n      [required]=\"required()\"\n      [forFilter]=\"forFilter()\"\n      [disabled]=\"disabled()\"\n      [(ngModel)]=\"value\"\n    ></ntyui-date-time>\n  </div>\n\n  <div class=\"range-separator\">\n    <span class=\"dash\">\u2014</span>\n  </div>\n\n  <div class=\"range-field\">\n    <ntyui-date-time\n      [label]=\"endLabel() || label()\"\n      [appearance]=\"appearance()\"\n      [required]=\"required()\"\n      [forFilter]=\"forFilter()\"\n      [disabled]=\"disabled()\"\n      [(ngModel)]=\"endValue\"\n    ></ntyui-date-time>\n  </div>\n</div>", styles: [".datetime-range-wrapper{display:flex;flex-direction:row;align-items:flex-start;gap:12px;width:100%}.datetime-range-wrapper .range-field{flex:1;min-width:0}.datetime-range-wrapper .range-separator{display:flex;align-items:center;height:56px;color:#00000061;font-weight:700}@media(max-width:768px){.datetime-range-wrapper{flex-direction:column;gap:0}.datetime-range-wrapper .range-separator{display:none}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { endValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "endValue", required: false }] }, { type: i0.Output, args: ["endValueChange"] }], endLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "endLabel", required: false }] }] } });