@nettyapps/ntybase 21.0.31 → 21.0.32

package/fesm2022/nettyapps-ntybase.mjs

@@ -1117,11 +1117,11 @@ class ButtonRenderer {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ButtonRenderer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ButtonRenderer, isStandalone: true, selector: "ntybase-button-renderer", ngImport: i0, template: "@if (editValid || popupEditValid) {\n<mat-icon\n  class=\"cursor center edit\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"4000\"\n  >edit</mat-icon\n>\n} @if (historyValid) {\n<mat-icon\n  class=\"cursor center-log\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >log</mat-icon\n>\n} @if (historyValid) {\n<mat-icon\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >history</mat-icon\n>\n} @if (lineValid) {\n<mat-icon\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >menu_open</mat-icon\n>\n} @if (popupSelectValid) {\n<mat-icon\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >content_copy</mat-icon\n>\n} @if (toggleValid) {\n<mat-icon\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >{{toggleValue ? 'check_box' : 'check_box_outline_blank'}}</mat-icon\n>\n} @if (none) {\n<mat-icon\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  [matTooltipShowDelay]=\"3000\"\n  >menu_open</mat-icon\n>\n} @if (addValid) {\n<mat-icon\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >playlist_add</mat-icon\n>\n} @if (deleteValid) {\n<mat-icon\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >delete_outline</mat-icon\n>\n}\n", styles: [".cursor{cursor:pointer}.center{display:flex;justify-content:center;align-items:center;width:100%}.center-log{display:flex;justify-content:center;align-items:center;margin-bottom:-12px}.edit{margin-top:8px}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatMenuModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ButtonRenderer, isStandalone: true, selector: "ntybase-button-renderer", host: { attributes: { "ntybase-id": "ButtonRenderer" } }, ngImport: i0, template: "@if (editValid || popupEditValid) {\n<mat-icon\n  class=\"cursor center edit\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"4000\"\n  >edit</mat-icon\n>\n} @if (historyValid) {\n<mat-icon\n  class=\"cursor center-log\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >log</mat-icon\n>\n} @if (historyValid) {\n<mat-icon\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >history</mat-icon\n>\n} @if (lineValid) {\n<mat-icon\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >menu_open</mat-icon\n>\n} @if (popupSelectValid) {\n<mat-icon\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >content_copy</mat-icon\n>\n} @if (toggleValid) {\n<mat-icon\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >{{toggleValue ? 'check_box' : 'check_box_outline_blank'}}</mat-icon\n>\n} @if (none) {\n<mat-icon\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  [matTooltipShowDelay]=\"3000\"\n  >menu_open</mat-icon\n>\n} @if (addValid) {\n<mat-icon\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >playlist_add</mat-icon\n>\n} @if (deleteValid) {\n<mat-icon\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >delete_outline</mat-icon\n>\n}\n", styles: [".cursor{cursor:pointer}.center{display:flex;justify-content:center;align-items:center;width:100%}.center-log{display:flex;justify-content:center;align-items:center;margin-bottom:-12px}.edit{margin-top:8px}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatMenuModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ButtonRenderer, decorators: [{
             type: Component,
-            args: [{ selector: 'ntybase-button-renderer', imports: [MatIconModule, MatTooltipModule, MatMenuModule], template: "@if (editValid || popupEditValid) {\n<mat-icon\n  class=\"cursor center edit\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"4000\"\n  >edit</mat-icon\n>\n} @if (historyValid) {\n<mat-icon\n  class=\"cursor center-log\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >log</mat-icon\n>\n} @if (historyValid) {\n<mat-icon\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >history</mat-icon\n>\n} @if (lineValid) {\n<mat-icon\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >menu_open</mat-icon\n>\n} @if (popupSelectValid) {\n<mat-icon\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >content_copy</mat-icon\n>\n} @if (toggleValid) {\n<mat-icon\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >{{toggleValue ? 'check_box' : 'check_box_outline_blank'}}</mat-icon\n>\n} @if (none) {\n<mat-icon\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  [matTooltipShowDelay]=\"3000\"\n  >menu_open</mat-icon\n>\n} @if (addValid) {\n<mat-icon\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >playlist_add</mat-icon\n>\n} @if (deleteValid) {\n<mat-icon\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >delete_outline</mat-icon\n>\n}\n", styles: [".cursor{cursor:pointer}.center{display:flex;justify-content:center;align-items:center;width:100%}.center-log{display:flex;justify-content:center;align-items:center;margin-bottom:-12px}.edit{margin-top:8px}\n"] }]
+            args: [{ selector: 'ntybase-button-renderer', imports: [MatIconModule, MatTooltipModule, MatMenuModule], host: { 'ntybase-id': 'ButtonRenderer' }, template: "@if (editValid || popupEditValid) {\n<mat-icon\n  class=\"cursor center edit\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"4000\"\n  >edit</mat-icon\n>\n} @if (historyValid) {\n<mat-icon\n  class=\"cursor center-log\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >log</mat-icon\n>\n} @if (historyValid) {\n<mat-icon\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >history</mat-icon\n>\n} @if (lineValid) {\n<mat-icon\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >menu_open</mat-icon\n>\n} @if (popupSelectValid) {\n<mat-icon\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >content_copy</mat-icon\n>\n} @if (toggleValid) {\n<mat-icon\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >{{toggleValue ? 'check_box' : 'check_box_outline_blank'}}</mat-icon\n>\n} @if (none) {\n<mat-icon\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  [matTooltipShowDelay]=\"3000\"\n  >menu_open</mat-icon\n>\n} @if (addValid) {\n<mat-icon\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >playlist_add</mat-icon\n>\n} @if (deleteValid) {\n<mat-icon\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >delete_outline</mat-icon\n>\n}\n", styles: [".cursor{cursor:pointer}.center{display:flex;justify-content:center;align-items:center;width:100%}.center-log{display:flex;justify-content:center;align-items:center;margin-bottom:-12px}.edit{margin-top:8px}\n"] }]
         }] });
 
 class CheckboxRenderer {
@@ -1165,11 +1165,11 @@ class CheckboxRenderer {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CheckboxRenderer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CheckboxRenderer, isStandalone: true, selector: "ntybase-checkbox-renderer", ngImport: i0, template: "@if (supportClick) {\n<input\n  id=\"checkbox\"\n  type=\"checkbox\"\n  [checked]=\"checked\"\n  (click)=\"onClick($event)\"\n/>\n} @if (!supportClick) {\n<input id=\"checkbox\" type=\"checkbox\" [checked]=\"params.value\" disabled />\n}\n\n<label for=\"checkbox\">{{label}}</label>\n", styles: [""] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CheckboxRenderer, isStandalone: true, selector: "ntybase-checkbox-renderer", host: { attributes: { "ntybase-id": "CheckboxRenderer" } }, ngImport: i0, template: "@if (supportClick) {\n<input\n  id=\"checkbox\"\n  type=\"checkbox\"\n  [checked]=\"checked\"\n  (click)=\"onClick($event)\"\n/>\n} @if (!supportClick) {\n<input id=\"checkbox\" type=\"checkbox\" [checked]=\"params.value\" disabled />\n}\n\n<label for=\"checkbox\">{{label}}</label>\n", styles: [""] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CheckboxRenderer, decorators: [{
             type: Component,
-            args: [{ selector: 'ntybase-checkbox-renderer', imports: [], template: "@if (supportClick) {\n<input\n  id=\"checkbox\"\n  type=\"checkbox\"\n  [checked]=\"checked\"\n  (click)=\"onClick($event)\"\n/>\n} @if (!supportClick) {\n<input id=\"checkbox\" type=\"checkbox\" [checked]=\"params.value\" disabled />\n}\n\n<label for=\"checkbox\">{{label}}</label>\n" }]
+            args: [{ selector: 'ntybase-checkbox-renderer', imports: [], host: { 'ntybase-id': 'CheckboxRenderer' }, template: "@if (supportClick) {\n<input\n  id=\"checkbox\"\n  type=\"checkbox\"\n  [checked]=\"checked\"\n  (click)=\"onClick($event)\"\n/>\n} @if (!supportClick) {\n<input id=\"checkbox\" type=\"checkbox\" [checked]=\"params.value\" disabled />\n}\n\n<label for=\"checkbox\">{{label}}</label>\n" }]
         }] });
 
 class NettyAppsBase {
@@ -2011,11 +2011,11 @@ class NettyAgGridBase extends NettyAppsBase {
         this.gridApi?.setColumnsVisible(fields, !this.isEmbedded());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NettyAgGridBase, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: NettyAgGridBase, isStandalone: true, selector: "ntybase-ag-grid-base", inputs: { readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, popupFilterValid: { classPropertyName: "popupFilterValid", publicName: "popupFilterValid", isSignal: true, isRequired: false, transformFunction: null }, popupValid: { classPropertyName: "popupValid", publicName: "popupValid", isSignal: true, isRequired: false, transformFunction: null }, isEmbedded: { classPropertyName: "isEmbedded", publicName: "isEmbedded", isSignal: true, isRequired: false, transformFunction: null }, componantParameterGUID: { classPropertyName: "componantParameterGUID", publicName: "componantParameterGUID", isSignal: true, isRequired: false, transformFunction: null }, componantParameterType: { classPropertyName: "componantParameterType", publicName: "componantParameterType", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onElementSelect: "onElementSelect", selectedElement: "selectedElement" }, usesInheritance: true, ngImport: i0, template: "<p>ag-grid-base works!</p>\n", styles: [""] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: NettyAgGridBase, isStandalone: true, selector: "ntybase-ag-grid-base", inputs: { readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, popupFilterValid: { classPropertyName: "popupFilterValid", publicName: "popupFilterValid", isSignal: true, isRequired: false, transformFunction: null }, popupValid: { classPropertyName: "popupValid", publicName: "popupValid", isSignal: true, isRequired: false, transformFunction: null }, isEmbedded: { classPropertyName: "isEmbedded", publicName: "isEmbedded", isSignal: true, isRequired: false, transformFunction: null }, componantParameterGUID: { classPropertyName: "componantParameterGUID", publicName: "componantParameterGUID", isSignal: true, isRequired: false, transformFunction: null }, componantParameterType: { classPropertyName: "componantParameterType", publicName: "componantParameterType", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onElementSelect: "onElementSelect", selectedElement: "selectedElement" }, host: { attributes: { "ntybase-id": "NettyAgGridBase" } }, usesInheritance: true, ngImport: i0, template: "<p>ag-grid-base works!</p>\n", styles: [""] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NettyAgGridBase, decorators: [{
             type: Component,
-            args: [{ selector: 'ntybase-ag-grid-base', imports: [], template: "<p>ag-grid-base works!</p>\n" }]
+            args: [{ selector: 'ntybase-ag-grid-base', imports: [], host: { 'ntybase-id': 'NettyAgGridBase' }, template: "<p>ag-grid-base works!</p>\n" }]
         }], ctorParameters: () => [], propDecorators: { readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], popupFilterValid: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupFilterValid", required: false }] }], popupValid: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupValid", required: false }] }], isEmbedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "isEmbedded", required: false }] }], componantParameterGUID: [{ type: i0.Input, args: [{ isSignal: true, alias: "componantParameterGUID", required: false }] }], componantParameterType: [{ type: i0.Input, args: [{ isSignal: true, alias: "componantParameterType", required: false }] }], onElementSelect: [{ type: i0.Output, args: ["onElementSelect"] }], selectedElement: [{ type: i0.Output, args: ["selectedElement"] }] } });
 
 class NettyAgGridSaveBase extends NettyAppsBase {
@@ -2589,11 +2589,11 @@ class RangeDateTimeFilter {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: RangeDateTimeFilter, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: RangeDateTimeFilter, isStandalone: true, selector: "ntybase-range-date-time-filter", ngImport: i0, template: "<div class=\"custom-filter\">\n  <div class=\"custom-filter__header\">\n    <label class=\"custom-filter__title\">\n      {{ '@dateTimeFilter' | translate }}\n    </label>\n    <input\n      type=\"text\"\n      class=\"custom-filter__input\"\n      [placeholder]=\"'@dateTimeFilterPlaceholder' | translate\"\n      [value]=\"filterText\"\n      (input)=\"onFilterTextChanged($event)\"\n    />\n  </div>\n\n  <div class=\"custom-filter__help\">\n    <strong class=\"custom-filter__help-title\">\n      {{ '@formats' | translate }}:\n    </strong>\n\n    <div class=\"custom-filter__format\">\n      {{ '@range' | translate }}:\n      <code>start..end</code>\n      <span class=\"custom-filter__example\">(today..yesterday)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@singleDate' | translate }}:\n      <code>YYYY-MM-DD</code>\n      <span class=\"custom-filter__example\">(2024-05-15)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@dateTime' | translate }}:\n      <code>YYYY-MM-DD HH:MM</code>\n      <span class=\"custom-filter__example\">(2024-05-15 14:30)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@multiple' | translate }}:\n      <code>date1,date2,start..end</code>\n    </div>\n\n    <strong class=\"custom-filter__subtitle\">\n      {{ '@specialKeywords' | translate }}:\n    </strong>\n\n    <div class=\"custom-filter__format\">\n      {{ '@turkish' | translate }}:\n      <span class=\"custom-filter__keywords\">\n        <code class=\"custom-filter__keyword\">bug\u00FCn</code>\n        <code class=\"custom-filter__keyword\">d\u00FCn</code>\n        <code class=\"custom-filter__keyword\">bu hafta</code>\n        <code class=\"custom-filter__keyword\">bu ay</code>\n      </span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@english' | translate }}:\n      <span class=\"custom-filter__keywords\">\n        <code class=\"custom-filter__keyword\">today</code>\n        <code class=\"custom-filter__keyword\">yesterday</code>\n        <code class=\"custom-filter__keyword\">thisWeek</code>\n        <code class=\"custom-filter__keyword\">thisMonth</code>\n      </span>\n    </div>\n\n    <div class=\"custom-filter__note\">{{ '@filterExample' | translate }}</div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: RangeDateTimeFilter, isStandalone: true, selector: "ntybase-range-date-time-filter", host: { attributes: { "ntybase-id": "RangeDateTimeFilter" } }, ngImport: i0, template: "<div class=\"custom-filter\">\n  <div class=\"custom-filter__header\">\n    <label class=\"custom-filter__title\">\n      {{ '@dateTimeFilter' | translate }}\n    </label>\n    <input\n      type=\"text\"\n      class=\"custom-filter__input\"\n      [placeholder]=\"'@dateTimeFilterPlaceholder' | translate\"\n      [value]=\"filterText\"\n      (input)=\"onFilterTextChanged($event)\"\n    />\n  </div>\n\n  <div class=\"custom-filter__help\">\n    <strong class=\"custom-filter__help-title\">\n      {{ '@formats' | translate }}:\n    </strong>\n\n    <div class=\"custom-filter__format\">\n      {{ '@range' | translate }}:\n      <code>start..end</code>\n      <span class=\"custom-filter__example\">(today..yesterday)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@singleDate' | translate }}:\n      <code>YYYY-MM-DD</code>\n      <span class=\"custom-filter__example\">(2024-05-15)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@dateTime' | translate }}:\n      <code>YYYY-MM-DD HH:MM</code>\n      <span class=\"custom-filter__example\">(2024-05-15 14:30)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@multiple' | translate }}:\n      <code>date1,date2,start..end</code>\n    </div>\n\n    <strong class=\"custom-filter__subtitle\">\n      {{ '@specialKeywords' | translate }}:\n    </strong>\n\n    <div class=\"custom-filter__format\">\n      {{ '@turkish' | translate }}:\n      <span class=\"custom-filter__keywords\">\n        <code class=\"custom-filter__keyword\">bug\u00FCn</code>\n        <code class=\"custom-filter__keyword\">d\u00FCn</code>\n        <code class=\"custom-filter__keyword\">bu hafta</code>\n        <code class=\"custom-filter__keyword\">bu ay</code>\n      </span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@english' | translate }}:\n      <span class=\"custom-filter__keywords\">\n        <code class=\"custom-filter__keyword\">today</code>\n        <code class=\"custom-filter__keyword\">yesterday</code>\n        <code class=\"custom-filter__keyword\">thisWeek</code>\n        <code class=\"custom-filter__keyword\">thisMonth</code>\n      </span>\n    </div>\n\n    <div class=\"custom-filter__note\">{{ '@filterExample' | translate }}</div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: RangeDateTimeFilter, decorators: [{
             type: Component,
-            args: [{ selector: 'ntybase-range-date-time-filter', imports: [TranslateModule], template: "<div class=\"custom-filter\">\n  <div class=\"custom-filter__header\">\n    <label class=\"custom-filter__title\">\n      {{ '@dateTimeFilter' | translate }}\n    </label>\n    <input\n      type=\"text\"\n      class=\"custom-filter__input\"\n      [placeholder]=\"'@dateTimeFilterPlaceholder' | translate\"\n      [value]=\"filterText\"\n      (input)=\"onFilterTextChanged($event)\"\n    />\n  </div>\n\n  <div class=\"custom-filter__help\">\n    <strong class=\"custom-filter__help-title\">\n      {{ '@formats' | translate }}:\n    </strong>\n\n    <div class=\"custom-filter__format\">\n      {{ '@range' | translate }}:\n      <code>start..end</code>\n      <span class=\"custom-filter__example\">(today..yesterday)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@singleDate' | translate }}:\n      <code>YYYY-MM-DD</code>\n      <span class=\"custom-filter__example\">(2024-05-15)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@dateTime' | translate }}:\n      <code>YYYY-MM-DD HH:MM</code>\n      <span class=\"custom-filter__example\">(2024-05-15 14:30)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@multiple' | translate }}:\n      <code>date1,date2,start..end</code>\n    </div>\n\n    <strong class=\"custom-filter__subtitle\">\n      {{ '@specialKeywords' | translate }}:\n    </strong>\n\n    <div class=\"custom-filter__format\">\n      {{ '@turkish' | translate }}:\n      <span class=\"custom-filter__keywords\">\n        <code class=\"custom-filter__keyword\">bug\u00FCn</code>\n        <code class=\"custom-filter__keyword\">d\u00FCn</code>\n        <code class=\"custom-filter__keyword\">bu hafta</code>\n        <code class=\"custom-filter__keyword\">bu ay</code>\n      </span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@english' | translate }}:\n      <span class=\"custom-filter__keywords\">\n        <code class=\"custom-filter__keyword\">today</code>\n        <code class=\"custom-filter__keyword\">yesterday</code>\n        <code class=\"custom-filter__keyword\">thisWeek</code>\n        <code class=\"custom-filter__keyword\">thisMonth</code>\n      </span>\n    </div>\n\n    <div class=\"custom-filter__note\">{{ '@filterExample' | translate }}</div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'ntybase-range-date-time-filter', imports: [TranslateModule], host: { 'ntybase-id': 'RangeDateTimeFilter' }, template: "<div class=\"custom-filter\">\n  <div class=\"custom-filter__header\">\n    <label class=\"custom-filter__title\">\n      {{ '@dateTimeFilter' | translate }}\n    </label>\n    <input\n      type=\"text\"\n      class=\"custom-filter__input\"\n      [placeholder]=\"'@dateTimeFilterPlaceholder' | translate\"\n      [value]=\"filterText\"\n      (input)=\"onFilterTextChanged($event)\"\n    />\n  </div>\n\n  <div class=\"custom-filter__help\">\n    <strong class=\"custom-filter__help-title\">\n      {{ '@formats' | translate }}:\n    </strong>\n\n    <div class=\"custom-filter__format\">\n      {{ '@range' | translate }}:\n      <code>start..end</code>\n      <span class=\"custom-filter__example\">(today..yesterday)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@singleDate' | translate }}:\n      <code>YYYY-MM-DD</code>\n      <span class=\"custom-filter__example\">(2024-05-15)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@dateTime' | translate }}:\n      <code>YYYY-MM-DD HH:MM</code>\n      <span class=\"custom-filter__example\">(2024-05-15 14:30)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@multiple' | translate }}:\n      <code>date1,date2,start..end</code>\n    </div>\n\n    <strong class=\"custom-filter__subtitle\">\n      {{ '@specialKeywords' | translate }}:\n    </strong>\n\n    <div class=\"custom-filter__format\">\n      {{ '@turkish' | translate }}:\n      <span class=\"custom-filter__keywords\">\n        <code class=\"custom-filter__keyword\">bug\u00FCn</code>\n        <code class=\"custom-filter__keyword\">d\u00FCn</code>\n        <code class=\"custom-filter__keyword\">bu hafta</code>\n        <code class=\"custom-filter__keyword\">bu ay</code>\n      </span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@english' | translate }}:\n      <span class=\"custom-filter__keywords\">\n        <code class=\"custom-filter__keyword\">today</code>\n        <code class=\"custom-filter__keyword\">yesterday</code>\n        <code class=\"custom-filter__keyword\">thisWeek</code>\n        <code class=\"custom-filter__keyword\">thisMonth</code>\n      </span>\n    </div>\n\n    <div class=\"custom-filter__note\">{{ '@filterExample' | translate }}</div>\n  </div>\n</div>\n" }]
         }] });
 
 class RangeNumberFilter {
@@ -2788,11 +2788,11 @@ class RangeNumberFilter {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: RangeNumberFilter, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: RangeNumberFilter, isStandalone: true, selector: "ntybase-range-number-filter", ngImport: i0, template: "<div class=\"custom-filter\">\n  <div class=\"custom-filter__header\">\n    <label class=\"custom-filter__title\">\n      {{ '@numberFilter' | translate }}\n    </label>\n    <input\n      type=\"text\"\n      class=\"custom-filter__input\"\n      [placeholder]=\"'@numberFilterPlaceholder' | translate\"\n      [value]=\"filterText\"\n      (input)=\"onFilterTextChanged($event)\"\n    />\n  </div>\n\n  <div class=\"custom-filter__help\">\n    <strong class=\"custom-filter__help-title\"\n      >{{ '@formats' | translate }}:</strong\n    >\n\n    <div class=\"custom-filter__format\">\n      {{ '@closedRange' | translate }}:\n      <code>min..max</code>\n      <span class=\"custom-filter__example\">(0..5)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@equalOrGreater' | translate }}:\n      <code>min..</code>\n      <span class=\"custom-filter__example\">(5..)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@equalOrLess' | translate }}:\n      <code>..max</code>\n      <span class=\"custom-filter__example\">(..10)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@singleValue' | translate }}:\n      <code>number</code>\n      <span class=\"custom-filter__example\">(10)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@exclusion' | translate }}:\n      <code>!number</code>\n      <span class=\"custom-filter__example\">(!5)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@rangeExclusion' | translate }}:\n      <code>!min..max</code>\n      <span class=\"custom-filter__example\">(!5..10)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@multiple' | translate }}:\n      <code>value1,value2,range</code>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: RangeNumberFilter, isStandalone: true, selector: "ntybase-range-number-filter", host: { attributes: { "ntybase-id": "RangeNumberFilter" } }, ngImport: i0, template: "<div class=\"custom-filter\">\n  <div class=\"custom-filter__header\">\n    <label class=\"custom-filter__title\">\n      {{ '@numberFilter' | translate }}\n    </label>\n    <input\n      type=\"text\"\n      class=\"custom-filter__input\"\n      [placeholder]=\"'@numberFilterPlaceholder' | translate\"\n      [value]=\"filterText\"\n      (input)=\"onFilterTextChanged($event)\"\n    />\n  </div>\n\n  <div class=\"custom-filter__help\">\n    <strong class=\"custom-filter__help-title\"\n      >{{ '@formats' | translate }}:</strong\n    >\n\n    <div class=\"custom-filter__format\">\n      {{ '@closedRange' | translate }}:\n      <code>min..max</code>\n      <span class=\"custom-filter__example\">(0..5)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@equalOrGreater' | translate }}:\n      <code>min..</code>\n      <span class=\"custom-filter__example\">(5..)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@equalOrLess' | translate }}:\n      <code>..max</code>\n      <span class=\"custom-filter__example\">(..10)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@singleValue' | translate }}:\n      <code>number</code>\n      <span class=\"custom-filter__example\">(10)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@exclusion' | translate }}:\n      <code>!number</code>\n      <span class=\"custom-filter__example\">(!5)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@rangeExclusion' | translate }}:\n      <code>!min..max</code>\n      <span class=\"custom-filter__example\">(!5..10)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@multiple' | translate }}:\n      <code>value1,value2,range</code>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: RangeNumberFilter, decorators: [{
             type: Component,
-            args: [{ selector: 'ntybase-range-number-filter', imports: [TranslateModule], template: "<div class=\"custom-filter\">\n  <div class=\"custom-filter__header\">\n    <label class=\"custom-filter__title\">\n      {{ '@numberFilter' | translate }}\n    </label>\n    <input\n      type=\"text\"\n      class=\"custom-filter__input\"\n      [placeholder]=\"'@numberFilterPlaceholder' | translate\"\n      [value]=\"filterText\"\n      (input)=\"onFilterTextChanged($event)\"\n    />\n  </div>\n\n  <div class=\"custom-filter__help\">\n    <strong class=\"custom-filter__help-title\"\n      >{{ '@formats' | translate }}:</strong\n    >\n\n    <div class=\"custom-filter__format\">\n      {{ '@closedRange' | translate }}:\n      <code>min..max</code>\n      <span class=\"custom-filter__example\">(0..5)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@equalOrGreater' | translate }}:\n      <code>min..</code>\n      <span class=\"custom-filter__example\">(5..)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@equalOrLess' | translate }}:\n      <code>..max</code>\n      <span class=\"custom-filter__example\">(..10)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@singleValue' | translate }}:\n      <code>number</code>\n      <span class=\"custom-filter__example\">(10)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@exclusion' | translate }}:\n      <code>!number</code>\n      <span class=\"custom-filter__example\">(!5)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@rangeExclusion' | translate }}:\n      <code>!min..max</code>\n      <span class=\"custom-filter__example\">(!5..10)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@multiple' | translate }}:\n      <code>value1,value2,range</code>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'ntybase-range-number-filter', imports: [TranslateModule], host: { 'ntybase-id': 'RangeNumberFilter' }, template: "<div class=\"custom-filter\">\n  <div class=\"custom-filter__header\">\n    <label class=\"custom-filter__title\">\n      {{ '@numberFilter' | translate }}\n    </label>\n    <input\n      type=\"text\"\n      class=\"custom-filter__input\"\n      [placeholder]=\"'@numberFilterPlaceholder' | translate\"\n      [value]=\"filterText\"\n      (input)=\"onFilterTextChanged($event)\"\n    />\n  </div>\n\n  <div class=\"custom-filter__help\">\n    <strong class=\"custom-filter__help-title\"\n      >{{ '@formats' | translate }}:</strong\n    >\n\n    <div class=\"custom-filter__format\">\n      {{ '@closedRange' | translate }}:\n      <code>min..max</code>\n      <span class=\"custom-filter__example\">(0..5)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@equalOrGreater' | translate }}:\n      <code>min..</code>\n      <span class=\"custom-filter__example\">(5..)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@equalOrLess' | translate }}:\n      <code>..max</code>\n      <span class=\"custom-filter__example\">(..10)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@singleValue' | translate }}:\n      <code>number</code>\n      <span class=\"custom-filter__example\">(10)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@exclusion' | translate }}:\n      <code>!number</code>\n      <span class=\"custom-filter__example\">(!5)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@rangeExclusion' | translate }}:\n      <code>!min..max</code>\n      <span class=\"custom-filter__example\">(!5..10)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@multiple' | translate }}:\n      <code>value1,value2,range</code>\n    </div>\n  </div>\n</div>\n" }]
         }] });
 
 class RangeStringFilter {
@@ -3041,11 +3041,11 @@ class RangeStringFilter {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: RangeStringFilter, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: RangeStringFilter, isStandalone: true, selector: "ntybase-range-string-filter", ngImport: i0, template: "<div class=\"custom-filter\">\n  <div class=\"custom-filter__header\">\n    <label class=\"custom-filter__title\">\n      {{ '@stringFilter' | translate }}\n    </label>\n    <input\n      type=\"text\"\n      class=\"custom-filter__input\"\n      [placeholder]=\"'@stringFilterPlaceholder' | translate\"\n      [value]=\"filterText\"\n      (input)=\"onFilterTextChanged($event)\"\n    />\n  </div>\n\n  <div class=\"custom-filter__help\">\n    <strong class=\"custom-filter__help-title\">\n      {{ '@formats' | translate }}:\n    </strong>\n\n    <div class=\"custom-filter__format\">\n      {{ '@exactMatch' | translate }}:\n      <code>text</code>\n      <span class=\"custom-filter__example\">(ahmet)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@startsWith' | translate }}:\n      <code>text*</code>\n      <span class=\"custom-filter__example\">(ahmet*)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@endsWith' | translate }}:\n      <code>*text</code>\n      <span class=\"custom-filter__example\">(*metin)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@contains' | translate }}:\n      <code>*text*</code>\n      <span class=\"custom-filter__example\">(*ahmet*)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@range' | translate }}:\n      <code>start..end</code>\n      <span class=\"custom-filter__example\">(ali..veli)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      <span class=\"custom-filter__description\">\n        {{ '@singleCharacter' | translate }}:\n      </span>\n      <code>?em</code>\n      <span class=\"custom-filter__example\">\n        (?em = 3 characters, 2nd and 3rd letters \"em\")\n      </span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      <span class=\"custom-filter__description\">\n        {{ '@multipleCharacters' | translate }}:\n      </span>\n      <code>???in</code>\n      <span class=\"custom-filter__example\">\n        (5 characters, last 2 letters \"in\")\n      </span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@not' | translate }}:\n      <code>!condition</code>\n      <span class=\"custom-filter__example\">(!*ahmet*, !?hmet)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@regex' | translate }}:\n      <code>$$pattern</code>\n      <span class=\"custom-filter__example\">($$^[A-Z].*, $$a.*b)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@multiple' | translate }}:\n      <code>value1,value2,*end,$$pattern</code>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: RangeStringFilter, isStandalone: true, selector: "ntybase-range-string-filter", host: { attributes: { "ntybase-id": "RangeStringFilter" } }, ngImport: i0, template: "<div class=\"custom-filter\">\n  <div class=\"custom-filter__header\">\n    <label class=\"custom-filter__title\">\n      {{ '@stringFilter' | translate }}\n    </label>\n    <input\n      type=\"text\"\n      class=\"custom-filter__input\"\n      [placeholder]=\"'@stringFilterPlaceholder' | translate\"\n      [value]=\"filterText\"\n      (input)=\"onFilterTextChanged($event)\"\n    />\n  </div>\n\n  <div class=\"custom-filter__help\">\n    <strong class=\"custom-filter__help-title\">\n      {{ '@formats' | translate }}:\n    </strong>\n\n    <div class=\"custom-filter__format\">\n      {{ '@exactMatch' | translate }}:\n      <code>text</code>\n      <span class=\"custom-filter__example\">(ahmet)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@startsWith' | translate }}:\n      <code>text*</code>\n      <span class=\"custom-filter__example\">(ahmet*)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@endsWith' | translate }}:\n      <code>*text</code>\n      <span class=\"custom-filter__example\">(*metin)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@contains' | translate }}:\n      <code>*text*</code>\n      <span class=\"custom-filter__example\">(*ahmet*)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@range' | translate }}:\n      <code>start..end</code>\n      <span class=\"custom-filter__example\">(ali..veli)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      <span class=\"custom-filter__description\">\n        {{ '@singleCharacter' | translate }}:\n      </span>\n      <code>?em</code>\n      <span class=\"custom-filter__example\">\n        (?em = 3 characters, 2nd and 3rd letters \"em\")\n      </span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      <span class=\"custom-filter__description\">\n        {{ '@multipleCharacters' | translate }}:\n      </span>\n      <code>???in</code>\n      <span class=\"custom-filter__example\">\n        (5 characters, last 2 letters \"in\")\n      </span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@not' | translate }}:\n      <code>!condition</code>\n      <span class=\"custom-filter__example\">(!*ahmet*, !?hmet)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@regex' | translate }}:\n      <code>$$pattern</code>\n      <span class=\"custom-filter__example\">($$^[A-Z].*, $$a.*b)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@multiple' | translate }}:\n      <code>value1,value2,*end,$$pattern</code>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: RangeStringFilter, decorators: [{
             type: Component,
-            args: [{ selector: 'ntybase-range-string-filter', imports: [TranslateModule], template: "<div class=\"custom-filter\">\n  <div class=\"custom-filter__header\">\n    <label class=\"custom-filter__title\">\n      {{ '@stringFilter' | translate }}\n    </label>\n    <input\n      type=\"text\"\n      class=\"custom-filter__input\"\n      [placeholder]=\"'@stringFilterPlaceholder' | translate\"\n      [value]=\"filterText\"\n      (input)=\"onFilterTextChanged($event)\"\n    />\n  </div>\n\n  <div class=\"custom-filter__help\">\n    <strong class=\"custom-filter__help-title\">\n      {{ '@formats' | translate }}:\n    </strong>\n\n    <div class=\"custom-filter__format\">\n      {{ '@exactMatch' | translate }}:\n      <code>text</code>\n      <span class=\"custom-filter__example\">(ahmet)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@startsWith' | translate }}:\n      <code>text*</code>\n      <span class=\"custom-filter__example\">(ahmet*)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@endsWith' | translate }}:\n      <code>*text</code>\n      <span class=\"custom-filter__example\">(*metin)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@contains' | translate }}:\n      <code>*text*</code>\n      <span class=\"custom-filter__example\">(*ahmet*)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@range' | translate }}:\n      <code>start..end</code>\n      <span class=\"custom-filter__example\">(ali..veli)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      <span class=\"custom-filter__description\">\n        {{ '@singleCharacter' | translate }}:\n      </span>\n      <code>?em</code>\n      <span class=\"custom-filter__example\">\n        (?em = 3 characters, 2nd and 3rd letters \"em\")\n      </span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      <span class=\"custom-filter__description\">\n        {{ '@multipleCharacters' | translate }}:\n      </span>\n      <code>???in</code>\n      <span class=\"custom-filter__example\">\n        (5 characters, last 2 letters \"in\")\n      </span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@not' | translate }}:\n      <code>!condition</code>\n      <span class=\"custom-filter__example\">(!*ahmet*, !?hmet)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@regex' | translate }}:\n      <code>$$pattern</code>\n      <span class=\"custom-filter__example\">($$^[A-Z].*, $$a.*b)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@multiple' | translate }}:\n      <code>value1,value2,*end,$$pattern</code>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'ntybase-range-string-filter', imports: [TranslateModule], host: { 'ntybase-id': 'RangeStringFilter' }, template: "<div class=\"custom-filter\">\n  <div class=\"custom-filter__header\">\n    <label class=\"custom-filter__title\">\n      {{ '@stringFilter' | translate }}\n    </label>\n    <input\n      type=\"text\"\n      class=\"custom-filter__input\"\n      [placeholder]=\"'@stringFilterPlaceholder' | translate\"\n      [value]=\"filterText\"\n      (input)=\"onFilterTextChanged($event)\"\n    />\n  </div>\n\n  <div class=\"custom-filter__help\">\n    <strong class=\"custom-filter__help-title\">\n      {{ '@formats' | translate }}:\n    </strong>\n\n    <div class=\"custom-filter__format\">\n      {{ '@exactMatch' | translate }}:\n      <code>text</code>\n      <span class=\"custom-filter__example\">(ahmet)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@startsWith' | translate }}:\n      <code>text*</code>\n      <span class=\"custom-filter__example\">(ahmet*)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@endsWith' | translate }}:\n      <code>*text</code>\n      <span class=\"custom-filter__example\">(*metin)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@contains' | translate }}:\n      <code>*text*</code>\n      <span class=\"custom-filter__example\">(*ahmet*)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@range' | translate }}:\n      <code>start..end</code>\n      <span class=\"custom-filter__example\">(ali..veli)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      <span class=\"custom-filter__description\">\n        {{ '@singleCharacter' | translate }}:\n      </span>\n      <code>?em</code>\n      <span class=\"custom-filter__example\">\n        (?em = 3 characters, 2nd and 3rd letters \"em\")\n      </span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      <span class=\"custom-filter__description\">\n        {{ '@multipleCharacters' | translate }}:\n      </span>\n      <code>???in</code>\n      <span class=\"custom-filter__example\">\n        (5 characters, last 2 letters \"in\")\n      </span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@not' | translate }}:\n      <code>!condition</code>\n      <span class=\"custom-filter__example\">(!*ahmet*, !?hmet)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@regex' | translate }}:\n      <code>$$pattern</code>\n      <span class=\"custom-filter__example\">($$^[A-Z].*, $$a.*b)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@multiple' | translate }}:\n      <code>value1,value2,*end,$$pattern</code>\n    </div>\n  </div>\n</div>\n" }]
         }] });
 
 class AuthenticationGuard {
@@ -4158,11 +4158,11 @@ class NtyLoadingComponent {
     loadingService = inject(NtyLoadingService);
     isLoading = this.loadingService.isLoading;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NtyLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: NtyLoadingComponent, isStandalone: true, selector: "app-nty-loading", ngImport: i0, template: "@if (isLoading()) {\n<div class=\"loading-overlay\" (click)=\"$event.stopPropagation(); $event.preventDefault()\">\n    <div class=\"spinner\">\n        <i class=\"fas fa-spinner\"></i>\n    </div>\n    <div style=\"margin-top: 10px;\">{{'@loading' | translate}}</div>\n</div>\n}", styles: [".loading-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:2147483647;display:flex;justify-content:center;align-items:center;color:#fff;flex-direction:column;pointer-events:all;cursor:wait;-webkit-user-select:none;user-select:none}.spinner{font-size:3rem}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.fa-spinner{animation:spin 1s linear infinite}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: NtyLoadingComponent, isStandalone: true, selector: "app-nty-loading", host: { attributes: { "ntybase-id": "NtyLoadingComponent" } }, ngImport: i0, template: "@if (isLoading()) {\n<div class=\"loading-overlay\" (click)=\"$event.stopPropagation(); $event.preventDefault()\">\n    <div class=\"spinner\">\n        <i class=\"fas fa-spinner\"></i>\n    </div>\n    <div style=\"margin-top: 10px;\">{{'@loading' | translate}}</div>\n</div>\n}", styles: [".loading-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:2147483647;display:flex;justify-content:center;align-items:center;color:#fff;flex-direction:column;pointer-events:all;cursor:wait;-webkit-user-select:none;user-select:none}.spinner{font-size:3rem}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.fa-spinner{animation:spin 1s linear infinite}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NtyLoadingComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-nty-loading', imports: [TranslateModule], template: "@if (isLoading()) {\n<div class=\"loading-overlay\" (click)=\"$event.stopPropagation(); $event.preventDefault()\">\n    <div class=\"spinner\">\n        <i class=\"fas fa-spinner\"></i>\n    </div>\n    <div style=\"margin-top: 10px;\">{{'@loading' | translate}}</div>\n</div>\n}", styles: [".loading-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:2147483647;display:flex;justify-content:center;align-items:center;color:#fff;flex-direction:column;pointer-events:all;cursor:wait;-webkit-user-select:none;user-select:none}.spinner{font-size:3rem}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.fa-spinner{animation:spin 1s linear infinite}\n"] }]
+            args: [{ selector: 'app-nty-loading', imports: [TranslateModule], host: { 'ntybase-id': 'NtyLoadingComponent' }, template: "@if (isLoading()) {\n<div class=\"loading-overlay\" (click)=\"$event.stopPropagation(); $event.preventDefault()\">\n    <div class=\"spinner\">\n        <i class=\"fas fa-spinner\"></i>\n    </div>\n    <div style=\"margin-top: 10px;\">{{'@loading' | translate}}</div>\n</div>\n}", styles: [".loading-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:2147483647;display:flex;justify-content:center;align-items:center;color:#fff;flex-direction:column;pointer-events:all;cursor:wait;-webkit-user-select:none;user-select:none}.spinner{font-size:3rem}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.fa-spinner{animation:spin 1s linear infinite}\n"] }]
         }] });
 
 class NettyMenuService {