@decaf-ts/for-angular 0.0.62 → 0.0.63

package/fesm2022/decaf-ts-for-angular.mjs

@@ -2978,7 +2978,8 @@ var component = {
 		search: {
 			title: "Not data found for search",
 			subtitle: "You searched for: <ion-text color=\"primary\" class=\"display-block ion-text-center text-bold\">{0}</ion-text>",
-			button: "Clear search"
+			button: "Clear search",
+			placeholder: "Search..."
 		},
 		empty: {
 			title: "No data found",
@@ -8175,7 +8176,7 @@ class SearchbarComponent extends NgxComponentDirective {
          * @default "off"
          * @memberOf SearchbarComponent
          */
-        this.autocomplete = "off";
+        this.autocomplete = 'off';
         /**
          * @description The autocorrect attribute for the searchbar input.
          * @summary Controls whether the browser should enable autocorrect functionality for the input field.
@@ -8186,7 +8187,7 @@ class SearchbarComponent extends NgxComponentDirective {
          * @default "off"
          * @memberOf SearchbarComponent
          */
-        this.autocorrect = "off";
+        this.autocorrect = 'off';
         /**
          * @description Whether the searchbar should animate.
          * @summary Controls the animation behavior of the searchbar during appearance and disappearance transitions.
@@ -8209,7 +8210,7 @@ class SearchbarComponent extends NgxComponentDirective {
          * @default "Cancel"
          * @memberOf SearchbarComponent
          */
-        this.buttonCancelText = "Cancel";
+        this.buttonCancelText = 'Cancel';
         /**
          * @description The icon to use for the clear button.
          * @summary Specifies the icon to be displayed for the clear button of the searchbar.
@@ -8249,7 +8250,7 @@ class SearchbarComponent extends NgxComponentDirective {
          * @default "enter"
          * @memberOf SearchbarComponent
          */
-        this.enterkeyhint = "enter";
+        this.enterkeyhint = 'enter';
         /**
          * @description The input mode for the searchbar.
          * @summary Specifies the type of data that might be entered by the user while editing the element or its contents.
@@ -8265,7 +8266,7 @@ class SearchbarComponent extends NgxComponentDirective {
          * @default "Search"
          * @memberOf SearchbarComponent
          */
-        this.placeholder = "Search";
+        this.placeholder = 'Search';
         /**
          * @description The icon to use for the search button.
          * @summary Specifies the icon to be displayed for the search button of the searchbar.
@@ -8273,7 +8274,7 @@ class SearchbarComponent extends NgxComponentDirective {
          * @default "search-outline"
          * @memberOf SearchbarComponent
          */
-        this.searchIcon = "search-outline";
+        this.searchIcon = 'search-outline';
         /**
          * @description When to show the cancel button.
          * @summary Controls the visibility of the cancel button in different states of the searchbar.
@@ -8281,7 +8282,7 @@ class SearchbarComponent extends NgxComponentDirective {
          * @default "never"
          * @memberOf SearchbarComponent
          */
-        this.showCancelButton = "never";
+        this.showCancelButton = 'never';
         /**
          * @description When to show the clear button.
          * @summary Controls the visibility of the clear button in different states of the searchbar.
@@ -8289,7 +8290,7 @@ class SearchbarComponent extends NgxComponentDirective {
          * @default "focus"
          * @memberOf SearchbarComponent
          */
-        this.showClearButton = "focus";
+        this.showClearButton = 'focus';
         /**
          * @description Whether to enable spellcheck on the searchbar input.
          * @summary Controls whether the browser's spellcheck feature is enabled for the searchbar input.
@@ -8305,7 +8306,7 @@ class SearchbarComponent extends NgxComponentDirective {
          * @default "search"
          * @memberOf SearchbarComponent
          */
-        this.type = "search";
+        this.type = 'search';
         /**
          * @description The value of the searchbar input.
          * @summary Specifies the current value of the searchbar input.
@@ -8313,7 +8314,7 @@ class SearchbarComponent extends NgxComponentDirective {
          * @default ""
          * @memberOf SearchbarComponent
          */
-        this.value = "";
+        this.value = '';
         /**
          * @description The keys to use for querying.
          * @summary Specifies the keys to be used when performing a search query.
@@ -8321,7 +8322,7 @@ class SearchbarComponent extends NgxComponentDirective {
          * @default "name"
          * @memberOf SearchbarComponent
          */
-        this.queryKeys = "name";
+        this.queryKeys = 'name';
         /**
          * @description Whether the searchbar is visible.
          * @summary Controls the visibility of the searchbar component.
@@ -8345,7 +8346,7 @@ class SearchbarComponent extends NgxComponentDirective {
          * @default "primary"
          * @memberOf SearchbarComponent
          */
-        this.wrapperColor = "primary";
+        this.wrapperColor = 'primary';
         /**
          * @description Whether to emit events to the window.
          * @summary Controls whether search events should be emitted as window events.
@@ -8565,11 +8566,11 @@ class SearchbarComponent extends NgxComponentDirective {
         event.preventDefault();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SearchbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SearchbarComponent, isStandalone: true, selector: "ngx-decaf-searchbar", inputs: { autocomplete: "autocomplete", autocorrect: "autocorrect", animated: "animated", buttonCancelText: "buttonCancelText", clearIcon: "clearIcon", color: "color", debounce: "debounce", disabled: "disabled", enterkeyhint: "enterkeyhint", inputmode: "inputmode", placeholder: "placeholder", searchIcon: "searchIcon", showCancelButton: "showCancelButton", showClearButton: "showClearButton", spellcheck: "spellcheck", type: "type", value: "value", queryKeys: "queryKeys", isVisible: "isVisible", wrapper: "wrapper", wrapperColor: "wrapperColor", emitEventToWindow: "emitEventToWindow" }, outputs: { searchEvent: "searchEvent" }, host: { listeners: { "window:toggleSearchbarVisibility": "handleToggleVisibility($event)" } }, usesInheritance: true, ngImport: i0, template: "<ion-searchbar\n  [id]=\"uid\"\n  ngClass=\"dcf-searchbar\"\n  name=\"search\"\n  mode=\"ios\"\n  (keyup.enter)=\"preventChange($event)\"\n  (ionInput)=\"handleInput($event)\"\n  (ionClear)=\"handleClear()\"\n  [autocomplete]=\"autocomplete\"\n  [showCancelButton]=\"showCancelButton\"\n  [cancelButtonText]=\"buttonCancelText\"\n  [clearIcon]=\"clearIcon\"\n  [color]=\"color\"\n  [debounce]=\"debounce\"\n  [disabled]=\"disabled\"\n  [enterkeyhint]=\"enterkeyhint\"\n  [inputmode]=\"inputmode\"\n  [placeholder]=\"placeholder\"\n  [searchIcon]=\"searchIcon\"\n  [showClearButton]=\"showClearButton\"\n  [spellcheck]=\"spellcheck\"\n  [type]=\"type\"\n  #component\n />\n", styles: [""], dependencies: [{ kind: "component", type: IonSearchbar, selector: "ion-searchbar", inputs: ["animated", "autocomplete", "autocorrect", "cancelButtonIcon", "cancelButtonText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "mode", "name", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SearchbarComponent, isStandalone: true, selector: "ngx-decaf-searchbar", inputs: { autocomplete: "autocomplete", autocorrect: "autocorrect", animated: "animated", buttonCancelText: "buttonCancelText", clearIcon: "clearIcon", color: "color", debounce: "debounce", disabled: "disabled", enterkeyhint: "enterkeyhint", inputmode: "inputmode", placeholder: "placeholder", searchIcon: "searchIcon", showCancelButton: "showCancelButton", showClearButton: "showClearButton", spellcheck: "spellcheck", type: "type", value: "value", queryKeys: "queryKeys", isVisible: "isVisible", wrapper: "wrapper", wrapperColor: "wrapperColor", emitEventToWindow: "emitEventToWindow" }, outputs: { searchEvent: "searchEvent" }, host: { listeners: { "window:toggleSearchbarVisibility": "handleToggleVisibility($event)" } }, usesInheritance: true, ngImport: i0, template: "<ion-searchbar\n  [id]=\"uid\"\n  ngClass=\"dcf-searchbar\"\n  name=\"search\"\n  mode=\"ios\"\n  (keyup.enter)=\"preventChange($event)\"\n  (ionInput)=\"handleInput($event)\"\n  (ionClear)=\"handleClear()\"\n  [autocomplete]=\"autocomplete\"\n  [showCancelButton]=\"showCancelButton\"\n  [cancelButtonText]=\"buttonCancelText\"\n  [clearIcon]=\"clearIcon\"\n  [color]=\"color\"\n  [debounce]=\"debounce\"\n  [disabled]=\"disabled\"\n  [enterkeyhint]=\"enterkeyhint\"\n  [inputmode]=\"inputmode\"\n  [placeholder]=\"placeholder | translate\"\n  [searchIcon]=\"searchIcon\"\n  [showClearButton]=\"showClearButton\"\n  [spellcheck]=\"spellcheck\"\n  [type]=\"type\"\n  #component\n />\n", styles: [""], dependencies: [{ kind: "component", type: IonSearchbar, selector: "ion-searchbar", inputs: ["animated", "autocomplete", "autocorrect", "cancelButtonIcon", "cancelButtonText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "mode", "name", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SearchbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-decaf-searchbar', standalone: true, imports: [IonSearchbar], template: "<ion-searchbar\n  [id]=\"uid\"\n  ngClass=\"dcf-searchbar\"\n  name=\"search\"\n  mode=\"ios\"\n  (keyup.enter)=\"preventChange($event)\"\n  (ionInput)=\"handleInput($event)\"\n  (ionClear)=\"handleClear()\"\n  [autocomplete]=\"autocomplete\"\n  [showCancelButton]=\"showCancelButton\"\n  [cancelButtonText]=\"buttonCancelText\"\n  [clearIcon]=\"clearIcon\"\n  [color]=\"color\"\n  [debounce]=\"debounce\"\n  [disabled]=\"disabled\"\n  [enterkeyhint]=\"enterkeyhint\"\n  [inputmode]=\"inputmode\"\n  [placeholder]=\"placeholder\"\n  [searchIcon]=\"searchIcon\"\n  [showClearButton]=\"showClearButton\"\n  [spellcheck]=\"spellcheck\"\n  [type]=\"type\"\n  #component\n />\n" }]
+            args: [{ selector: 'ngx-decaf-searchbar', standalone: true, imports: [TranslatePipe, IonSearchbar], template: "<ion-searchbar\n  [id]=\"uid\"\n  ngClass=\"dcf-searchbar\"\n  name=\"search\"\n  mode=\"ios\"\n  (keyup.enter)=\"preventChange($event)\"\n  (ionInput)=\"handleInput($event)\"\n  (ionClear)=\"handleClear()\"\n  [autocomplete]=\"autocomplete\"\n  [showCancelButton]=\"showCancelButton\"\n  [cancelButtonText]=\"buttonCancelText\"\n  [clearIcon]=\"clearIcon\"\n  [color]=\"color\"\n  [debounce]=\"debounce\"\n  [disabled]=\"disabled\"\n  [enterkeyhint]=\"enterkeyhint\"\n  [inputmode]=\"inputmode\"\n  [placeholder]=\"placeholder | translate\"\n  [searchIcon]=\"searchIcon\"\n  [showClearButton]=\"showClearButton\"\n  [spellcheck]=\"spellcheck\"\n  [type]=\"type\"\n  #component\n />\n" }]
         }], ctorParameters: () => [], propDecorators: { autocomplete: [{
                 type: Input
             }], autocorrect: [{
@@ -8618,7 +8619,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 type: Output
             }], handleToggleVisibility: [{
                 type: HostListener,
-                args: ["window:toggleSearchbarVisibility", ['$event']]
+                args: ['window:toggleSearchbarVisibility', ['$event']]
             }] } });
 
 /**
@@ -10035,6 +10036,8 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
         this.observer = {
             refresh: async (...args) => this.observeRepository(...args),
         };
+        if (!this.searchbarPlaceholder)
+            this.searchbarPlaceholder = `${this.locale}.search.placeholder`;
         this.clickItemSubject
             .pipe(debounceTime(100))
             .subscribe((event) => this.clickEventEmit(event));
@@ -10474,7 +10477,10 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
      */
     async getFromRequest(force = false, start, limit) {
         let data = [...(this.data || [])];
-        if (!this.data?.length || force || this.searchValue?.length || !!this.searchValue) {
+        if (!this.data?.length ||
+            force ||
+            this.searchValue?.length ||
+            !!this.searchValue) {
             // (self.data as ListItem[]) = [];
             if (!this.searchValue?.length &&
                 !this.searchValue) {
@@ -10539,6 +10545,9 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
                 this._repository.observe(this.observer);
         }
         const repo = this._repository;
+        if (!this.indexes) {
+            this.indexes = Object.keys(Model.indexes(this.model) || {});
+        }
         if (!this.data?.length ||
             force ||
             this.searchValue?.length ||
@@ -10552,20 +10561,21 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
                     if (!this.paginator) {
                         this.paginator = await repo
                             .select()
-                            .where(this.condition ? this.condition.eq(!this.modelId ?
-                            undefined : ([Primitives.NUMBER, Primitives.BIGINT].includes(this.pkType) ?
-                            Number(this.modelId) : this.modelId)) : Condition.attribute(this.pk).dif(null))
+                            .where(this.condition
+                            ? this.condition.eq(!this.modelId
+                                ? undefined
+                                : [Primitives.NUMBER, Primitives.BIGINT].includes(this.pkType)
+                                    ? Number(this.modelId)
+                                    : this.modelId)
+                            : Condition.attribute(this.pk).dif(null))
                             .orderBy([this.pk, this.sortDirection])
                             .paginate(this.limit);
                     }
                     request = await this.parseResult(this.paginator);
                 }
                 else {
-                    if (!this.indexes)
-                        this.indexes = Object.values(this.mapper) || [this.pk];
-                    const condition = this.parseConditions(this.searchValue);
                     this.changeDetectorRef.detectChanges();
-                    request = await this.parseResult(await repo.query(condition, (this.sortBy || this.pk), this.sortDirection));
+                    request = await this.parseResult(await repo.query(this.parseConditions(this.searchValue), (this.sortBy || this.pk), this.sortDirection));
                     data = [];
                     this.changeDetectorRef.detectChanges();
                 }
@@ -10616,8 +10626,8 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
      */
     parseConditions(value) {
         let _condition;
-        if (typeof value === Primitives.STRING ||
-            typeof value === Primitives.NUMBER) {
+        const model = this.model;
+        if (typeof value === Primitives.STRING || !isNaN(value)) {
             _condition = Condition.attribute(this.pk).eq(!isNaN(value) ? Number(value) : value);
             for (const index of this.indexes) {
                 if (index === this.pk)
@@ -10627,21 +10637,31 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
                     orCondition = Condition.attribute(index).eq(Number(value));
                 }
                 else {
-                    orCondition = Condition.attribute(index).regexp(value);
+                    const type = Metadata.type(model.constructor, index).name;
+                    orCondition =
+                        type === Date
+                            ? Condition.attribute(index).eq(new Date(value))
+                            : Condition.attribute(index).regexp(value);
                 }
                 _condition = _condition.or(orCondition);
             }
         }
         else {
             const { query, sort } = value;
-            _condition = Condition.attribute(this.pk).dif('null');
+            const pk = this.pk;
+            _condition = Condition.attribute(pk).dif('null');
             if (query?.length)
                 _condition = undefined;
             (query || []).forEach((item) => {
                 const { value, condition, index } = item;
                 let val = value;
-                if (index === this.pk || !isNaN(val))
+                if (index === this.pk || !isNaN(val)) {
                     val = Number(val);
+                }
+                const type = Metadata.type(model.constructor, index).name;
+                if (type === Date.name) {
+                    val = new Date(val);
+                }
                 let orCondition;
                 switch (condition) {
                     case 'Equal':
@@ -10800,13 +10820,13 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
             ...Object.keys(this.item).reduce((acc, key) => {
                 acc[key] = this.item[key];
                 return acc;
-            }, {})
+            }, {}),
         });
         return data.reduce((accum, curr) => {
             accum.push({
                 ...this.itemMapper(curr, this.mapper, props),
                 ...{ pk: this.pk },
-                ...{ model: curr }
+                ...{ model: curr },
             });
             return accum;
         }, []);
@@ -10820,7 +10840,7 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
             .join(', ');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ListComponent, isStandalone: true, selector: "ngx-decaf-list", inputs: { type: "type", showSearchbar: "showSearchbar", data: "data", source: "source", start: "start", limit: "limit", loadMoreData: "loadMoreData", lines: "lines", inset: "inset", scrollThreshold: "scrollThreshold", scrollPosition: "scrollPosition", loadingText: "loadingText", showRefresher: "showRefresher", createButton: "createButton", loadingSpinner: "loadingSpinner", enableFilter: "enableFilter", sortBy: "sortBy", sortDirection: "sortDirection", disableSort: "disableSort", empty: "empty" }, outputs: { clickEvent: "clickEvent" }, host: { listeners: { "window:ListItemClickEvent": "handleClick($event)", "window:searchbarEvent": "handleSearch($event)", "window:BackButtonNavigationEndEvent": "refresh($event)" }, properties: { "attr.id": "uid" } }, usesInheritance: true, ngImport: i0, template: "\n@if (showRefresher) {\n  <ion-refresher slot=\"fixed\" [pullFactor]=\"1\" [pullMin]=\"100\" [pullMax]=\"200\" (ionRefresh)=\"handleRefresh($event)\">\n    <ion-refresher-content />\n  </ion-refresher>\n}\n\n@if (showSearchbar) {\n  <div [hidden]=\"!data?.length && !searching\">\n    <div class=\"dcf-grid dcf-grid-collapse dcf-grid-actions\">\n      <div class=\"dcf-width-expand@m  dcf-width-1-1\">\n        @if (model && enableFilter) {\n          @if (data?.length || searching) {\n            <ngx-decaf-filter\n              [model]=\"model\"\n              [sortDirection]=\"sortDirection\"\n              [disableSort]=\"disableSort\"\n              (filterEvent)=\"handleFilter($event)\"\n              (searchEvent)=\"handleSearch($event)\"\n            />\n          }\n        } @else {\n          <ngx-decaf-searchbar [emitEventToWindow]=\"false\" [debounce]=\"500\" (searchEvent)=\"handleSearch($event)\" />\n        }\n      </div>\n      @if(createButton) {\n        <div class=\"dcf-width-auto@m dcf-button-container dcf-width-1-1 dcf-flex-middle dcf-flex dcf-flex-center dcf-flex-right@m\">\n          <div>\n            <ion-button expand=\"block\" (click)=\"changeOperation(OperationKeys.CREATE)\">Create</ion-button>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n}\n@if (initialized && data?.length) {\n  <ion-list [id]=\"uid\" [inset]=\"inset\" [lines]=\"lines\">\n    @if (item?.tag) {\n      @for(child of items; track trackItemFn($index, child)) {\n        <ngx-decaf-component-renderer\n          [tag]=\"item.tag\"\n          (listenEvent)=\"handleEvent($event)\"\n          [globals]='{\n            item: child,\n            mapper: mapper,\n            route: route,\n            model: child\n          }'>\n          </ngx-decaf-component-renderer>\n        }\n    } @else {\n      <ng-content></ng-content>\n    }\n  </ion-list>\n\n  @if (loadMoreData) {\n    @if (pages > 0 && type === 'paginated' && !searchValue?.length) {\n      <ngx-decaf-pagination\n        [totalPages]=\"pages\"\n        [current]=\"page\"\n        (clickEvent)=\"handlePaginate($event)\"\n      />\n\n    } @else {\n      <ion-infinite-scroll\n        [class]=\"searchValue?.length ? 'dcf-hidden' : ''\"\n\n        [position]=\"scrollPosition\"\n        [threshold]=\"scrollThreshold\"\n        (ionInfinite)=\"handleRefresh($event)\">\n        <ion-infinite-scroll-content [loadingSpinner]=\"loadingSpinner\" [loadingText]=\"loadingText\" />\n      </ion-infinite-scroll>\n    }\n  }\n} @else {\n  @if (refreshing) {\n    @for(skl of skeletonData; track $index) {\n      <ion-item>\n        <ion-thumbnail slot=\"start\">\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n        </ion-thumbnail>\n        <ion-label>\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n          <ion-text class=\"date\" style=\"width: 20%;\"><ion-skeleton-text [animated]=\"true\"></ion-skeleton-text></ion-text>\n        </ion-label>\n      </ion-item>\n    }\n\n  } @else {\n    @if (!searching) {\n      <ngx-decaf-empty-state\n        [title]=\"empty.title ? ((locale + '.'+ empty.title) | translate) : ''\"\n        [model]=\"model\"\n        [route]=\"route\"\n        [modelId]=\"modelId\"\n        [buttonLink]=\"empty?.link ?? undefined\"\n        [borders]=\"borders\"\n        [icon]=\"(item?.icon ?? 'folder-open-outline') || empty.icon\"\n        className=\"dcf-empty-data\"\n        [subtitle]=\"empty.subtitle ? ((locale + '.'+ empty.subtitle) | translate) : ''\" />\n    } @else {\n\n      <ngx-decaf-empty-state\n        icon=\"search-outline\"\n        [model]=\"model\"\n        [route]=\"route\"\n        [modelId]=\"modelId\"\n        [borders]=\"borders\"\n        [operations]=\"operations\"\n        [body]=\"'small'\"\n        [translatable]=\"true\"\n        [title]=\"locale + '.search.title' | translate\"\n        [subtitle]=\"locale + '.search.subtitle' | translate: {'0': parseSearchValue()}\"\n        [searchValue]=\"searchValue\"\n      />\n    }\n  }\n}\n\n", styles: ["ion-infinite-scroll{max-height:50px}ion-infinite-scroll:not(.infinite-scroll-loading) ::ng-deep{max-height:1.5rem}ion-infinite-scroll ::ng-deep ion-spinner{--color: var(--dcf-color-primary);padding-top:1rem}@media (max-width: 768px){#end,[slot=end]{display:none!important}}.dcf-grid-actions{padding:var(--dcf-padding-small);padding-bottom:0}@media (max-width: 768px){.dcf-grid-actions .dcf-button-container{width:100%!important}.dcf-grid-actions .dcf-button-container *{width:calc(100% - 5px)!important;display:inline-block;margin-top:0!important;margin-bottom:var(--dcf-margin-xsmall)!important}}.dcf-grid-actions>div:only-child{width:100%}\n"], dependencies: [{ kind: "component", type: IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: PaginationComponent, selector: "ngx-decaf-pagination", inputs: ["totalPages", "current"], outputs: ["clickEvent"] }, { kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonThumbnail, selector: "ion-thumbnail" }, { kind: "component", type: IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: IonInfiniteScroll, selector: "ion-infinite-scroll", inputs: ["disabled", "position", "threshold"] }, { kind: "component", type: IonInfiniteScrollContent, selector: "ion-infinite-scroll-content", inputs: ["loadingSpinner", "loadingText"] }, { kind: "component", type: SearchbarComponent, selector: "ngx-decaf-searchbar", inputs: ["autocomplete", "autocorrect", "animated", "buttonCancelText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value", "queryKeys", "isVisible", "wrapper", "wrapperColor", "emitEventToWindow"], outputs: ["searchEvent"] }, { kind: "component", type: EmptyStateComponent, selector: "ngx-decaf-empty-state", inputs: ["title", "titleColor", "subtitle", "subtitleColor", "showIcon", "icon", "iconSize", "iconColor", "buttonLink", "buttonText", "buttonFill", "buttonColor", "buttonSize", "searchValue"] }, { kind: "component", type: FilterComponent, selector: "ngx-decaf-filter", inputs: ["indexes", "multiple", "conditions", "sortBy", "disableSort"], outputs: ["filterEvent", "searchEvent"] }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "children", "projectable", "parent"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ListComponent, isStandalone: true, selector: "ngx-decaf-list", inputs: { type: "type", showSearchbar: "showSearchbar", searchbarPlaceholder: "searchbarPlaceholder", data: "data", source: "source", start: "start", limit: "limit", loadMoreData: "loadMoreData", lines: "lines", inset: "inset", scrollThreshold: "scrollThreshold", scrollPosition: "scrollPosition", loadingText: "loadingText", showRefresher: "showRefresher", createButton: "createButton", loadingSpinner: "loadingSpinner", enableFilter: "enableFilter", sortBy: "sortBy", sortDirection: "sortDirection", disableSort: "disableSort", empty: "empty" }, outputs: { clickEvent: "clickEvent" }, host: { listeners: { "window:ListItemClickEvent": "handleClick($event)", "window:searchbarEvent": "handleSearch($event)", "window:BackButtonNavigationEndEvent": "refresh($event)" }, properties: { "attr.id": "uid" } }, usesInheritance: true, ngImport: i0, template: "\n@if (showRefresher) {\n  <ion-refresher slot=\"fixed\" [pullFactor]=\"1\" [pullMin]=\"100\" [pullMax]=\"200\" (ionRefresh)=\"handleRefresh($event)\">\n    <ion-refresher-content />\n  </ion-refresher>\n}\n\n@if (showSearchbar) {\n  <div [hidden]=\"!data?.length && !searching\">\n    <div class=\"dcf-grid dcf-grid-collapse dcf-grid-actions\">\n      <div class=\"dcf-width-expand@m  dcf-width-1-1\">\n        @if (model && enableFilter) {\n          @if (data?.length || searching) {\n            <ngx-decaf-filter\n              [model]=\"model\"\n              [indexes]=\"indexes ?? []\"\n              [sortDirection]=\"sortDirection\"\n              [disableSort]=\"disableSort\"\n              (filterEvent)=\"handleFilter($event)\"\n              (searchEvent)=\"handleSearch($event)\"\n            />\n          }\n        } @else {\n          <ngx-decaf-searchbar [placeholder]=\"searchbarPlaceholder\" [emitEventToWindow]=\"false\" [debounce]=\"500\" (searchEvent)=\"handleSearch($event)\" />\n        }\n      </div>\n      @if(createButton) {\n        <div class=\"dcf-width-auto@m dcf-button-container dcf-width-1-1 dcf-flex-middle dcf-flex dcf-flex-center dcf-flex-right@m\">\n          <div>\n            <ion-button expand=\"block\" (click)=\"changeOperation(OperationKeys.CREATE)\">Create</ion-button>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n}\n@if (initialized && data?.length) {\n  <ion-list [id]=\"uid\" [inset]=\"inset\" [lines]=\"lines\">\n    @if (item?.tag) {\n      @for(child of items; track trackItemFn($index, child)) {\n        <ngx-decaf-component-renderer\n          [tag]=\"item.tag\"\n          (listenEvent)=\"handleEvent($event)\"\n          [globals]='{\n            item: child,\n            mapper: mapper,\n            route: route,\n            model: child\n          }'>\n          </ngx-decaf-component-renderer>\n        }\n    } @else {\n      <ng-content></ng-content>\n    }\n  </ion-list>\n\n  @if (loadMoreData) {\n    @if (pages > 0 && type === 'paginated' && !searchValue?.length) {\n      <ngx-decaf-pagination\n        [totalPages]=\"pages\"\n        [current]=\"page\"\n        (clickEvent)=\"handlePaginate($event)\"\n      />\n\n    } @else {\n      <ion-infinite-scroll\n        [class]=\"searchValue?.length ? 'dcf-hidden' : ''\"\n\n        [position]=\"scrollPosition\"\n        [threshold]=\"scrollThreshold\"\n        (ionInfinite)=\"handleRefresh($event)\">\n        <ion-infinite-scroll-content [loadingSpinner]=\"loadingSpinner\" [loadingText]=\"loadingText\" />\n      </ion-infinite-scroll>\n    }\n  }\n} @else {\n  @if (refreshing) {\n    @for(skl of skeletonData; track $index) {\n      <ion-item>\n        <ion-thumbnail slot=\"start\">\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n        </ion-thumbnail>\n        <ion-label>\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n          <ion-text class=\"date\" style=\"width: 20%;\"><ion-skeleton-text [animated]=\"true\"></ion-skeleton-text></ion-text>\n        </ion-label>\n      </ion-item>\n    }\n\n  } @else {\n    @if (!searching) {\n      <ngx-decaf-empty-state\n        [title]=\"empty.title ? ((locale + '.'+ empty.title) | translate) : ''\"\n        [model]=\"model\"\n        [route]=\"route\"\n        [modelId]=\"modelId\"\n        [buttonLink]=\"empty?.link ?? undefined\"\n        [borders]=\"borders\"\n        [icon]=\"(item?.icon ?? 'folder-open-outline') || empty.icon\"\n        className=\"dcf-empty-data\"\n        [subtitle]=\"empty.subtitle ? ((locale + '.'+ empty.subtitle) | translate) : ''\" />\n    } @else {\n\n      <ngx-decaf-empty-state\n        icon=\"search-outline\"\n        [model]=\"model\"\n        [route]=\"route\"\n        [modelId]=\"modelId\"\n        [borders]=\"borders\"\n        [operations]=\"operations\"\n        [body]=\"'small'\"\n        [translatable]=\"true\"\n        [title]=\"locale + '.search.title' | translate\"\n        [subtitle]=\"locale + '.search.subtitle' | translate: {'0': parseSearchValue()}\"\n        [searchValue]=\"searchValue\"\n      />\n    }\n  }\n}\n\n", styles: ["ion-infinite-scroll{max-height:50px}ion-infinite-scroll:not(.infinite-scroll-loading) ::ng-deep{max-height:1.5rem}ion-infinite-scroll ::ng-deep ion-spinner{--color: var(--dcf-color-primary);padding-top:1rem}@media (max-width: 768px){#end,[slot=end]{display:none!important}}.dcf-grid-actions{padding:var(--dcf-padding-small);padding-bottom:0}@media (max-width: 768px){.dcf-grid-actions .dcf-button-container{width:100%!important}.dcf-grid-actions .dcf-button-container *{width:calc(100% - 5px)!important;display:inline-block;margin-top:0!important;margin-bottom:var(--dcf-margin-xsmall)!important}}.dcf-grid-actions>div:only-child{width:100%}\n"], dependencies: [{ kind: "component", type: IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: PaginationComponent, selector: "ngx-decaf-pagination", inputs: ["totalPages", "current"], outputs: ["clickEvent"] }, { kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonThumbnail, selector: "ion-thumbnail" }, { kind: "component", type: IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: IonInfiniteScroll, selector: "ion-infinite-scroll", inputs: ["disabled", "position", "threshold"] }, { kind: "component", type: IonInfiniteScrollContent, selector: "ion-infinite-scroll-content", inputs: ["loadingSpinner", "loadingText"] }, { kind: "component", type: SearchbarComponent, selector: "ngx-decaf-searchbar", inputs: ["autocomplete", "autocorrect", "animated", "buttonCancelText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value", "queryKeys", "isVisible", "wrapper", "wrapperColor", "emitEventToWindow"], outputs: ["searchEvent"] }, { kind: "component", type: EmptyStateComponent, selector: "ngx-decaf-empty-state", inputs: ["title", "titleColor", "subtitle", "subtitleColor", "showIcon", "icon", "iconSize", "iconColor", "buttonLink", "buttonText", "buttonFill", "buttonColor", "buttonSize", "searchValue"] }, { kind: "component", type: FilterComponent, selector: "ngx-decaf-filter", inputs: ["indexes", "multiple", "conditions", "sortBy", "disableSort"], outputs: ["filterEvent", "searchEvent"] }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "children", "projectable", "parent"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 ListComponent = __decorate([
     Dynamic(),
@@ -10848,11 +10868,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         EmptyStateComponent,
                         FilterComponent,
                         ComponentRendererComponent,
-                    ], host: { '[attr.id]': 'uid' }, template: "\n@if (showRefresher) {\n  <ion-refresher slot=\"fixed\" [pullFactor]=\"1\" [pullMin]=\"100\" [pullMax]=\"200\" (ionRefresh)=\"handleRefresh($event)\">\n    <ion-refresher-content />\n  </ion-refresher>\n}\n\n@if (showSearchbar) {\n  <div [hidden]=\"!data?.length && !searching\">\n    <div class=\"dcf-grid dcf-grid-collapse dcf-grid-actions\">\n      <div class=\"dcf-width-expand@m  dcf-width-1-1\">\n        @if (model && enableFilter) {\n          @if (data?.length || searching) {\n            <ngx-decaf-filter\n              [model]=\"model\"\n              [sortDirection]=\"sortDirection\"\n              [disableSort]=\"disableSort\"\n              (filterEvent)=\"handleFilter($event)\"\n              (searchEvent)=\"handleSearch($event)\"\n            />\n          }\n        } @else {\n          <ngx-decaf-searchbar [emitEventToWindow]=\"false\" [debounce]=\"500\" (searchEvent)=\"handleSearch($event)\" />\n        }\n      </div>\n      @if(createButton) {\n        <div class=\"dcf-width-auto@m dcf-button-container dcf-width-1-1 dcf-flex-middle dcf-flex dcf-flex-center dcf-flex-right@m\">\n          <div>\n            <ion-button expand=\"block\" (click)=\"changeOperation(OperationKeys.CREATE)\">Create</ion-button>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n}\n@if (initialized && data?.length) {\n  <ion-list [id]=\"uid\" [inset]=\"inset\" [lines]=\"lines\">\n    @if (item?.tag) {\n      @for(child of items; track trackItemFn($index, child)) {\n        <ngx-decaf-component-renderer\n          [tag]=\"item.tag\"\n          (listenEvent)=\"handleEvent($event)\"\n          [globals]='{\n            item: child,\n            mapper: mapper,\n            route: route,\n            model: child\n          }'>\n          </ngx-decaf-component-renderer>\n        }\n    } @else {\n      <ng-content></ng-content>\n    }\n  </ion-list>\n\n  @if (loadMoreData) {\n    @if (pages > 0 && type === 'paginated' && !searchValue?.length) {\n      <ngx-decaf-pagination\n        [totalPages]=\"pages\"\n        [current]=\"page\"\n        (clickEvent)=\"handlePaginate($event)\"\n      />\n\n    } @else {\n      <ion-infinite-scroll\n        [class]=\"searchValue?.length ? 'dcf-hidden' : ''\"\n\n        [position]=\"scrollPosition\"\n        [threshold]=\"scrollThreshold\"\n        (ionInfinite)=\"handleRefresh($event)\">\n        <ion-infinite-scroll-content [loadingSpinner]=\"loadingSpinner\" [loadingText]=\"loadingText\" />\n      </ion-infinite-scroll>\n    }\n  }\n} @else {\n  @if (refreshing) {\n    @for(skl of skeletonData; track $index) {\n      <ion-item>\n        <ion-thumbnail slot=\"start\">\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n        </ion-thumbnail>\n        <ion-label>\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n          <ion-text class=\"date\" style=\"width: 20%;\"><ion-skeleton-text [animated]=\"true\"></ion-skeleton-text></ion-text>\n        </ion-label>\n      </ion-item>\n    }\n\n  } @else {\n    @if (!searching) {\n      <ngx-decaf-empty-state\n        [title]=\"empty.title ? ((locale + '.'+ empty.title) | translate) : ''\"\n        [model]=\"model\"\n        [route]=\"route\"\n        [modelId]=\"modelId\"\n        [buttonLink]=\"empty?.link ?? undefined\"\n        [borders]=\"borders\"\n        [icon]=\"(item?.icon ?? 'folder-open-outline') || empty.icon\"\n        className=\"dcf-empty-data\"\n        [subtitle]=\"empty.subtitle ? ((locale + '.'+ empty.subtitle) | translate) : ''\" />\n    } @else {\n\n      <ngx-decaf-empty-state\n        icon=\"search-outline\"\n        [model]=\"model\"\n        [route]=\"route\"\n        [modelId]=\"modelId\"\n        [borders]=\"borders\"\n        [operations]=\"operations\"\n        [body]=\"'small'\"\n        [translatable]=\"true\"\n        [title]=\"locale + '.search.title' | translate\"\n        [subtitle]=\"locale + '.search.subtitle' | translate: {'0': parseSearchValue()}\"\n        [searchValue]=\"searchValue\"\n      />\n    }\n  }\n}\n\n", styles: ["ion-infinite-scroll{max-height:50px}ion-infinite-scroll:not(.infinite-scroll-loading) ::ng-deep{max-height:1.5rem}ion-infinite-scroll ::ng-deep ion-spinner{--color: var(--dcf-color-primary);padding-top:1rem}@media (max-width: 768px){#end,[slot=end]{display:none!important}}.dcf-grid-actions{padding:var(--dcf-padding-small);padding-bottom:0}@media (max-width: 768px){.dcf-grid-actions .dcf-button-container{width:100%!important}.dcf-grid-actions .dcf-button-container *{width:calc(100% - 5px)!important;display:inline-block;margin-top:0!important;margin-bottom:var(--dcf-margin-xsmall)!important}}.dcf-grid-actions>div:only-child{width:100%}\n"] }]
+                    ], host: { '[attr.id]': 'uid' }, template: "\n@if (showRefresher) {\n  <ion-refresher slot=\"fixed\" [pullFactor]=\"1\" [pullMin]=\"100\" [pullMax]=\"200\" (ionRefresh)=\"handleRefresh($event)\">\n    <ion-refresher-content />\n  </ion-refresher>\n}\n\n@if (showSearchbar) {\n  <div [hidden]=\"!data?.length && !searching\">\n    <div class=\"dcf-grid dcf-grid-collapse dcf-grid-actions\">\n      <div class=\"dcf-width-expand@m  dcf-width-1-1\">\n        @if (model && enableFilter) {\n          @if (data?.length || searching) {\n            <ngx-decaf-filter\n              [model]=\"model\"\n              [indexes]=\"indexes ?? []\"\n              [sortDirection]=\"sortDirection\"\n              [disableSort]=\"disableSort\"\n              (filterEvent)=\"handleFilter($event)\"\n              (searchEvent)=\"handleSearch($event)\"\n            />\n          }\n        } @else {\n          <ngx-decaf-searchbar [placeholder]=\"searchbarPlaceholder\" [emitEventToWindow]=\"false\" [debounce]=\"500\" (searchEvent)=\"handleSearch($event)\" />\n        }\n      </div>\n      @if(createButton) {\n        <div class=\"dcf-width-auto@m dcf-button-container dcf-width-1-1 dcf-flex-middle dcf-flex dcf-flex-center dcf-flex-right@m\">\n          <div>\n            <ion-button expand=\"block\" (click)=\"changeOperation(OperationKeys.CREATE)\">Create</ion-button>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n}\n@if (initialized && data?.length) {\n  <ion-list [id]=\"uid\" [inset]=\"inset\" [lines]=\"lines\">\n    @if (item?.tag) {\n      @for(child of items; track trackItemFn($index, child)) {\n        <ngx-decaf-component-renderer\n          [tag]=\"item.tag\"\n          (listenEvent)=\"handleEvent($event)\"\n          [globals]='{\n            item: child,\n            mapper: mapper,\n            route: route,\n            model: child\n          }'>\n          </ngx-decaf-component-renderer>\n        }\n    } @else {\n      <ng-content></ng-content>\n    }\n  </ion-list>\n\n  @if (loadMoreData) {\n    @if (pages > 0 && type === 'paginated' && !searchValue?.length) {\n      <ngx-decaf-pagination\n        [totalPages]=\"pages\"\n        [current]=\"page\"\n        (clickEvent)=\"handlePaginate($event)\"\n      />\n\n    } @else {\n      <ion-infinite-scroll\n        [class]=\"searchValue?.length ? 'dcf-hidden' : ''\"\n\n        [position]=\"scrollPosition\"\n        [threshold]=\"scrollThreshold\"\n        (ionInfinite)=\"handleRefresh($event)\">\n        <ion-infinite-scroll-content [loadingSpinner]=\"loadingSpinner\" [loadingText]=\"loadingText\" />\n      </ion-infinite-scroll>\n    }\n  }\n} @else {\n  @if (refreshing) {\n    @for(skl of skeletonData; track $index) {\n      <ion-item>\n        <ion-thumbnail slot=\"start\">\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n        </ion-thumbnail>\n        <ion-label>\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n          <ion-text class=\"date\" style=\"width: 20%;\"><ion-skeleton-text [animated]=\"true\"></ion-skeleton-text></ion-text>\n        </ion-label>\n      </ion-item>\n    }\n\n  } @else {\n    @if (!searching) {\n      <ngx-decaf-empty-state\n        [title]=\"empty.title ? ((locale + '.'+ empty.title) | translate) : ''\"\n        [model]=\"model\"\n        [route]=\"route\"\n        [modelId]=\"modelId\"\n        [buttonLink]=\"empty?.link ?? undefined\"\n        [borders]=\"borders\"\n        [icon]=\"(item?.icon ?? 'folder-open-outline') || empty.icon\"\n        className=\"dcf-empty-data\"\n        [subtitle]=\"empty.subtitle ? ((locale + '.'+ empty.subtitle) | translate) : ''\" />\n    } @else {\n\n      <ngx-decaf-empty-state\n        icon=\"search-outline\"\n        [model]=\"model\"\n        [route]=\"route\"\n        [modelId]=\"modelId\"\n        [borders]=\"borders\"\n        [operations]=\"operations\"\n        [body]=\"'small'\"\n        [translatable]=\"true\"\n        [title]=\"locale + '.search.title' | translate\"\n        [subtitle]=\"locale + '.search.subtitle' | translate: {'0': parseSearchValue()}\"\n        [searchValue]=\"searchValue\"\n      />\n    }\n  }\n}\n\n", styles: ["ion-infinite-scroll{max-height:50px}ion-infinite-scroll:not(.infinite-scroll-loading) ::ng-deep{max-height:1.5rem}ion-infinite-scroll ::ng-deep ion-spinner{--color: var(--dcf-color-primary);padding-top:1rem}@media (max-width: 768px){#end,[slot=end]{display:none!important}}.dcf-grid-actions{padding:var(--dcf-padding-small);padding-bottom:0}@media (max-width: 768px){.dcf-grid-actions .dcf-button-container{width:100%!important}.dcf-grid-actions .dcf-button-container *{width:calc(100% - 5px)!important;display:inline-block;margin-top:0!important;margin-bottom:var(--dcf-margin-xsmall)!important}}.dcf-grid-actions>div:only-child{width:100%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { type: [{
                 type: Input
             }], showSearchbar: [{
                 type: Input
+            }], searchbarPlaceholder: [{
+                type: Input
             }], data: [{
                 type: Input
             }], source: [{