@decaf-ts/for-angular 0.1.33 → 0.1.36

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -26,7 +26,6 @@ import { addIcons } from 'ionicons';
26
26
  import * as allIcons from 'ionicons/icons';
27
27
  import { chevronUpOutline, chevronDownOutline, createOutline, trashOutline, addOutline, alertCircleOutline, arrowUpOutline, arrowDownOutline, searchOutline, closeOutline, chevronForwardOutline, chevronBackOutline, arrowBackOutline, arrowForwardOutline } from 'ionicons/icons';
28
28
  import { modalController } from '@ionic/core';
29
- import { formatDate as formatDate$1, dateFromString as dateFromString$1 } from 'src/lib/utils';
30
29
 
31
30
  const DB_ADAPTER_FLAVOUR_TOKEN = 'DbAdapterFlavour';
32
31
  /**
@@ -309,23 +308,21 @@ const CssClasses = {
309
308
  * @summary Provides default configuration for form buttons in CRUD operations.
310
309
  * Includes default text labels for submit and clear buttons, which can be
311
310
  * overridden by individual form implementations.
312
- * @type {ICrudFormOptions}
311
+ * @type {ICrudFormButtons}
313
312
  * @property {Object} buttons - Configuration for form action buttons
314
313
  * @property {Object} buttons.submit - Submit button configuration
315
314
  * @property {string} buttons.submit.text - Default text for submit button
316
315
  * @property {Object} buttons.clear - Clear button configuration
317
316
  * @property {string} buttons.clear.text - Default text for clear button
318
- * @const DefaultFormReactiveOptions
317
+ * @const DefaultFormButtonsOptions
319
318
  * @memberOf module:lib/engine/constants
320
319
  */
321
- const DefaultFormReactiveOptions = {
322
- buttons: {
323
- submit: {
324
- text: 'Submit',
325
- },
326
- clear: {
327
- text: 'Clear',
328
- },
320
+ const DefaultFormButtonsOptions = {
321
+ submit: {
322
+ text: 'Submit',
323
+ },
324
+ clear: {
325
+ text: 'Clear',
329
326
  },
330
327
  };
331
328
  /**
@@ -6994,6 +6991,14 @@ let ModalComponent = class ModalComponent extends NgxParentComponentDirective {
6994
6991
  * @default false
6995
6992
  */
6996
6993
  this.expandable = false;
6994
+ /**
6995
+ * @description Controls whether modal content renders with visual borders.
6996
+ * @summary When set to true, border styles are applied according to inherited
6997
+ * component styling rules; when false, border rendering is disabled.
6998
+ * @type {boolean}
6999
+ * @default true
7000
+ */
7001
+ this.borders = true;
6997
7002
  /**
6998
7003
  * @description Enables lightbox mode for the modal.
6999
7004
  * @summary When set to true, the modal is displayed as a lightbox.
@@ -7185,7 +7190,7 @@ let ModalComponent = class ModalComponent extends NgxParentComponentDirective {
7185
7190
  await modal.dismiss(event?.data || undefined, ActionRoles.confirm);
7186
7191
  }
7187
7192
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
7188
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: ModalComponent, isStandalone: true, selector: "ngx-decaf-modal", inputs: { title: "title", isOpen: "isOpen", tag: "tag", options: "options", globals: "globals", inlineContent: "inlineContent", inlineContentPosition: "inlineContentPosition", fullscreen: "fullscreen", expandable: "expandable", lightBox: "lightBox", headerTransparent: "headerTransparent", headerBackground: "headerBackground", showHeader: "showHeader", showCloseButton: "showCloseButton", handlers: "handlers" }, outputs: { willDismissEvent: "willDismissEvent" }, host: { properties: { "attr.id": "uid" } }, viewQueries: [{ propertyName: "modal", first: true, predicate: ["component"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ion-modal\n [id]=\"uid\"\n [class]=\"'dcf-modal-component ' + className\"\n [isOpen]=\"isOpen\"\n (willDismiss)=\"handleWillDismiss($event)\"\n [backdropDismiss]=\"options?.backdropDismiss\"\n [showBackdrop]=\"options?.showBackdrop\"\n [animated]=\"options?.animated\"\n [canDismiss]=\"options?.canDismiss\"\n [class.dcf-fullscreen-modal]=\"fullscreen\"\n [class.dcf-fullscreen-expanded]=\"expanded\"\n [class.dcf-lightbox-modal]=\"lightBox\"\n [class.dcf-modal-no-header]=\"!showHeader\"\n [class.dcf-header-transparent]=\"headerTransparent\"\n [class.dcf-no-title]=\"!title?.length\"\n #component\n>\n <ng-template>\n <ion-header>\n <ion-toolbar [color]=\"headerBackground\">\n @if (title?.length) {\n <ion-title>{{ title | translate }}</ion-title>\n }\n <ion-buttons slot=\"end\">\n @if (expandable && !fullscreen) {\n <ion-button\n fill=\"clear\"\n size=\"small\"\n type=\"button\"\n class=\"dcf-button-expand\"\n (click)=\"handleExpandToggle()\"\n >\n <ngx-decaf-icon\n [color]=\"iconColor\"\n [name]=\"expanded ? 'ti-maximize-off' : 'ti-maximize'\"\n />\n </ion-button>\n }\n @if (showCloseButton) {\n <ion-button\n size=\"small\"\n type=\"button\"\n class=\"dcf-button-close\"\n (click)=\"cancel()\"\n >\n <ngx-decaf-icon\n [color]=\"iconColor\"\n name=\"ti-x\"\n />\n </ion-button>\n }\n </ion-buttons>\n </ion-toolbar>\n </ion-header>\n\n <ion-content>\n <section\n class=\"dcf-modal-body\"\n [class.dcf-has-title]=\"title?.length\"\n >\n @if (!tag && !model && !inlineContent) {\n <div class=\"dcf-loading-container\">\n <ion-spinner\n name=\"crescent\"\n color=\"primary\"\n ></ion-spinner>\n </div>\n } @else {\n @if (inlineContent && inlineContentPosition === 'top') {\n <div\n class=\"dcf-modal-content\"\n id=\"dcf-modal-content\"\n [innerHTML]=\"inlineContent\"\n ></div>\n }\n @if (!tag && model) {\n <ngx-decaf-model-renderer\n (listenEvent)=\"handleEvent($event)\"\n [model]=\"model\"\n [globals]=\"globals\"\n />\n } @else if (tag && globals) {\n <ngx-decaf-component-renderer\n [tag]=\"tag\"\n (listenEvent)=\"handleEvent($event)\"\n [model]=\"model\"\n [globals]=\"{ props: globals }\"\n />\n }\n @if (inlineContent && inlineContentPosition === 'bottom') {\n <div\n class=\"dcf-modal-content\"\n id=\"dcf-modal-content\"\n [innerHTML]=\"inlineContent\"\n ></div>\n }\n }\n </section>\n </ion-content>\n </ng-template>\n</ion-modal>\n", styles: [".dcf-modal-component{--border-radius: var(--dcf-border-radius)}.dcf-modal-component.dcf-modal-confirm{top:-100px;--max-width: 320px;--max-height: 35vh}.dcf-modal-component.dcf-modal-confirm ::ng-deep .dcf-title{font-weight:500;font-size:1.125rem;line-height:1.75rem;color:var(--dcf-color-gray-8)}.dcf-modal-component.dcf-modal-confirm ::ng-deep .dcf-delete .dcf-title{color:var(--dcf-color-danger)}.dcf-modal-component.dcf-modal-confirm ::ng-deep .dcf-content{font-weight:400;font-size:.935rem;line-height:1.375rem;color:var(--dcf-color-gray-6);margin-top:1rem}.dcf-modal-component.dcf-modal-confirm ::ng-deep .dcf-buttons-grid{position:absolute;bottom:2rem;right:1rem}.dcf-modal-component ::ng-deep form .dcf-buttons-grid{align-content:center!important;justify-content:center;padding-top:1rem}.dcf-modal-component ion-header{box-shadow:none!important;border-bottom:1px solid var(--dcf-color-gray-2)}.dcf-modal-component ion-button.dcf-button-close{--background: var(--dcf-color-light) !important;--border-radius: var(--dcf-border-radius-small) !important}.dcf-modal-component.dcf-modal-no-header ion-header,.dcf-modal-component.dcf-no-title ion-header{box-shadow:none;border-color:transparent!important}.dcf-modal-component .dcf-modal-content ::ng-deep pre{border:1px solid var(--dcf-color-gray-2);white-space:pre-wrap;overflow-wrap:anywhere;background:rgba(var(--dcf-color-warning-rgb),.175)!important;padding:var(--dcf-padding);border-radius:var(--dcf-border-radius-small);font-size:.9rem!important;font-weight:500;margin-top:2rem}@media (max-width: 768px){.dcf-modal-component .dcf-button-expand{display:none!important}}.dcf-modal-component.dcf-modal-select-interface{--min-width: 300px;--max-width: 500px;--max-height: 50%;--border-radius: var(--dcf-border-radius)}.dcf-modal-component.dcf-modal-select-interface .dcf-modal-body{--max-height: 60%;max-height:60%;padding:0px var(--dcf-padding-small)!important}.dcf-modal-component.dcf-modal-expand{--min-height: 50%;--min-width: 75%;--max-width: 100%}.dcf-modal-component.dcf-fullscreen-expanded,.dcf-modal-component.dcf-fullscreen-modal{--height: 100%;--width: 100%;--max-width: 100%;--border-radius: 0}.dcf-modal-component.dcf-fullscreen-expanded.dcf-header-transparent,.dcf-modal-component.dcf-fullscreen-modal.dcf-header-transparent{padding-left:2rem;padding-bottom:2rem;padding-right:1rem}.dcf-modal-component.dcf-fullscreen-expanded:not(.dcf-header-transparent).dcf-no-title ion-header ion-button,.dcf-modal-component.dcf-fullscreen-modal:not(.dcf-header-transparent).dcf-no-title ion-header ion-button{transform:translate(-5px,5px)}.dcf-modal-component.dcf-lightbox-modal ion-content{--background: transparent !important}.dcf-modal-component.dcf-lightbox-modal .dcf-modal-body{display:flex;height:auto;justify-content:center;align-items:center}.dcf-modal-component.dcf-lightbox-modal.dcf-fullscreen-modal{padding:var(--dcf-padding-small)}.dcf-modal-component.dcf-header-transparent ion-header{box-shadow:none!important;border-bottom:none!important}.dcf-modal-component.dcf-header-transparent ion-title{width:calc(100% + 10px);position:relative;top:1.25rem;background:#fff;height:50px!important}.dcf-modal-component.dcf-header-transparent ion-buttons ion-button:not(:last-of-type){position:relative;right:1px}.dcf-modal-component.dcf-header-transparent ion-content[part=background],.dcf-modal-component.dcf-header-transparent ion-content::part(background){border-radius:var(--dcf-border-radius)!important}.dcf-modal-component.dcf-header-transparent .dcf-modal-body.dcf-has-title{padding-top:2rem!important}.dcf-modal-component.dcf-header-transparent,.dcf-modal-component.dcf-lightbox-modal{--background: transparent;--box-shadow: none !important}@media (max-width: 767px){.dcf-modal-component.dcf-header-transparent,.dcf-modal-component.dcf-lightbox-modal{padding:var(--dcf-padding-xsmall)}}.dcf-modal-component.dcf-header-transparent ion-header,.dcf-modal-component.dcf-lightbox-modal ion-header{box-shadow:none!important;border-color:transparent!important;padding:unset!important;margin:unset!important;height:30px}.dcf-modal-component.dcf-header-transparent ion-header ion-buttons,.dcf-modal-component.dcf-lightbox-modal ion-header ion-buttons{background:var(--dcf-color-gray-2)!important;border-radius:var(--dcf-border-radius)!important;box-shadow:var(--dcf-box-shadow)!important}.dcf-modal-component.dcf-header-transparent ion-header ion-button,.dcf-modal-component.dcf-lightbox-modal ion-header ion-button{--background: transparent !important;margin:0!important;width:35px!important;height:25px!important}.dcf-modal-component.dcf-header-transparent ion-header ion-button *,.dcf-modal-component.dcf-lightbox-modal ion-header ion-button *{margin:-5px}.dcf-modal-component.dcf-header-transparent ion-header ion-button ngx-decaf-icon,.dcf-modal-component.dcf-lightbox-modal ion-header ion-button ngx-decaf-icon{transform:translate(-1px)!important}.dcf-modal-component.dcf-header-transparent ion-header ion-button ion-icon,.dcf-modal-component.dcf-lightbox-modal ion-header ion-button ion-icon{font-size:1.15rem!important;color:var(--dcf-color-gray-5)}.dcf-modal-component.dcf-header-transparent ion-header ion-toolbar,.dcf-modal-component.dcf-lightbox-modal ion-header ion-toolbar{--background: transparent !important;padding:unset!important;margin:unset!important}.dcf-modal-component.dcf-header-transparent ion-content,.dcf-modal-component.dcf-lightbox-modal ion-content{max-width:calc(100% - 10px)}.dcf-modal-component.dcf-header-transparent .dcf-modal-body,.dcf-modal-component.dcf-lightbox-modal .dcf-modal-body{background:#fff!important;padding:2px 0 0;border-radius:var(--dcf-border-radius)}.dcf-modal-component.dcf-header-transparent .dcf-modal-body>div,.dcf-modal-component.dcf-lightbox-modal .dcf-modal-body>div{border-radius:var(--dcf-border-radius)!important;max-width:calc(100% - 5px)}.dcf-modal-component:not(.dcf-lightbox-modal) .dcf-modal-body{padding:1.5rem 1rem}.dcf-modal-component .dcf-loading-container{height:50%;display:flex;justify-content:center;align-items:center}.dcf-modal-component .dcf-loading-container ion-spinner{width:60px;height:60px}\n"], dependencies: [{ kind: "component", type: IonModal, selector: "ion-modal" }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "children", "projectable", "pk", "parent"] }, { kind: "component", type: ModelRendererComponent, selector: "ngx-decaf-model-renderer", inputs: ["projectable"] }, { kind: "component", type: IconComponent, selector: "ngx-decaf-icon", inputs: ["name", "color", "slot", "button", "buttonFill", "buttonShape", "width", "size", "inline"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { 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: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
7193
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: ModalComponent, isStandalone: true, selector: "ngx-decaf-modal", inputs: { title: "title", isOpen: "isOpen", tag: "tag", options: "options", globals: "globals", inlineContent: "inlineContent", inlineContentPosition: "inlineContentPosition", fullscreen: "fullscreen", expandable: "expandable", borders: "borders", lightBox: "lightBox", headerTransparent: "headerTransparent", headerBackground: "headerBackground", showHeader: "showHeader", showCloseButton: "showCloseButton", handlers: "handlers" }, outputs: { willDismissEvent: "willDismissEvent" }, host: { properties: { "attr.id": "uid" } }, viewQueries: [{ propertyName: "modal", first: true, predicate: ["component"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ion-modal\n [id]=\"uid\"\n [class]=\"'dcf-modal-component ' + className\"\n [isOpen]=\"isOpen\"\n (willDismiss)=\"handleWillDismiss($event)\"\n [backdropDismiss]=\"options?.backdropDismiss\"\n [showBackdrop]=\"options?.showBackdrop\"\n [animated]=\"options?.animated\"\n [canDismiss]=\"options?.canDismiss\"\n [class.dcf-fullscreen-modal]=\"fullscreen\"\n [class.dcf-no-borders]=\"!borders\"\n [class.dcf-fullscreen-expanded]=\"expanded\"\n [class.dcf-lightbox-modal]=\"lightBox\"\n [class.dcf-modal-no-header]=\"!showHeader\"\n [class.dcf-header-transparent]=\"headerTransparent\"\n [class.dcf-no-title]=\"!title?.length\"\n #component\n>\n <ng-template>\n <ion-header>\n <ion-toolbar [color]=\"headerBackground\">\n @if (title?.length) {\n <ion-title>{{ title | translate }}</ion-title>\n }\n <ion-buttons slot=\"end\">\n @if (expandable && !fullscreen) {\n <ion-button\n fill=\"clear\"\n size=\"small\"\n type=\"button\"\n class=\"dcf-button-expand\"\n (click)=\"handleExpandToggle()\"\n >\n <ngx-decaf-icon\n [color]=\"iconColor\"\n [name]=\"expanded ? 'ti-maximize-off' : 'ti-maximize'\"\n />\n </ion-button>\n }\n @if (showCloseButton) {\n <ion-button\n size=\"small\"\n type=\"button\"\n class=\"dcf-button-close\"\n (click)=\"cancel()\"\n >\n <ngx-decaf-icon\n [color]=\"iconColor\"\n name=\"ti-x\"\n />\n </ion-button>\n }\n </ion-buttons>\n </ion-toolbar>\n </ion-header>\n\n <ion-content>\n <section\n class=\"dcf-modal-body\"\n [class.dcf-has-title]=\"title?.length\"\n >\n @if (!tag && !model && !inlineContent) {\n <div class=\"dcf-loading-container\">\n <ion-spinner\n name=\"crescent\"\n color=\"primary\"\n ></ion-spinner>\n </div>\n } @else {\n @if (inlineContent && inlineContentPosition === 'top') {\n <div\n class=\"dcf-modal-content\"\n id=\"dcf-modal-content\"\n [innerHTML]=\"inlineContent\"\n ></div>\n }\n @if (!tag && model) {\n <ngx-decaf-model-renderer\n (listenEvent)=\"handleEvent($event)\"\n [model]=\"model\"\n [globals]=\"globals\"\n />\n } @else if (tag && globals) {\n <ngx-decaf-component-renderer\n [tag]=\"tag\"\n (listenEvent)=\"handleEvent($event)\"\n [model]=\"model\"\n [globals]=\"{ props: globals }\"\n />\n }\n @if (inlineContent && inlineContentPosition === 'bottom') {\n <div\n class=\"dcf-modal-content\"\n id=\"dcf-modal-content\"\n [innerHTML]=\"inlineContent\"\n ></div>\n }\n }\n </section>\n </ion-content>\n </ng-template>\n</ion-modal>\n", styles: [".dcf-modal-component{--border-radius: var(--dcf-border-radius)}.dcf-modal-component.dcf-modal-confirm{top:-100px;--max-width: 320px;--max-height: 35vh}.dcf-modal-component.dcf-modal-confirm ::ng-deep .dcf-title{font-weight:500;font-size:1.125rem;line-height:1.75rem;color:var(--dcf-color-gray-8)}.dcf-modal-component.dcf-modal-confirm ::ng-deep .dcf-delete .dcf-title{color:var(--dcf-color-danger)}.dcf-modal-component.dcf-modal-confirm ::ng-deep .dcf-content{font-weight:400;font-size:.935rem;line-height:1.375rem;color:var(--dcf-color-gray-6);margin-top:1rem}.dcf-modal-component.dcf-modal-confirm ::ng-deep .dcf-buttons-grid{position:absolute;bottom:2rem;right:1rem}.dcf-modal-component ::ng-deep form .dcf-buttons-grid{align-content:center!important;justify-content:center;padding-top:1rem}.dcf-modal-component ion-header{box-shadow:none!important}.dcf-modal-component ion-header:not(.dcf-no-borders){border-bottom:1px solid var(--dcf-color-gray-2)}.dcf-modal-component ion-header.dcf-no-borders{border-bottom:1px solid transparent!important}.dcf-modal-component ion-button.dcf-button-close{--background: var(--dcf-color-light) !important;--border-radius: var(--dcf-border-radius-small) !important}.dcf-modal-component.dcf-modal-no-header ion-header,.dcf-modal-component.dcf-no-title ion-header{box-shadow:none;border-color:transparent!important}.dcf-modal-component .dcf-modal-content ::ng-deep pre{border:1px solid var(--dcf-color-gray-2);white-space:pre-wrap;overflow-wrap:anywhere;background:rgba(var(--dcf-color-warning-rgb),.175)!important;padding:var(--dcf-padding);border-radius:var(--dcf-border-radius-small);font-size:.9rem!important;font-weight:500;margin-top:2rem}@media (max-width: 768px){.dcf-modal-component .dcf-button-expand{display:none!important}}.dcf-modal-component.dcf-modal-select-interface{--min-width: 300px;--max-width: 500px;--max-height: 50%;--border-radius: var(--dcf-border-radius)}.dcf-modal-component.dcf-modal-select-interface .dcf-modal-body{--max-height: 60%;max-height:60%;padding:0px var(--dcf-padding-small)!important}.dcf-modal-component.dcf-modal-expand{--min-height: 50%;--min-width: 75%;--max-width: 100%}.dcf-modal-component.dcf-fullscreen-expanded,.dcf-modal-component.dcf-fullscreen-modal{--height: 100%;--width: 100%;--max-width: 100%;--border-radius: 0}.dcf-modal-component.dcf-fullscreen-expanded.dcf-header-transparent,.dcf-modal-component.dcf-fullscreen-modal.dcf-header-transparent{padding-left:2rem;padding-bottom:2rem;padding-right:1rem}.dcf-modal-component.dcf-fullscreen-expanded:not(.dcf-header-transparent).dcf-no-title ion-header ion-button,.dcf-modal-component.dcf-fullscreen-modal:not(.dcf-header-transparent).dcf-no-title ion-header ion-button{transform:translate(-5px,5px)}.dcf-modal-component.dcf-lightbox-modal ion-content{--background: transparent !important}.dcf-modal-component.dcf-lightbox-modal .dcf-modal-body{display:flex;height:auto;justify-content:center;align-items:center}.dcf-modal-component.dcf-lightbox-modal.dcf-fullscreen-modal{padding:var(--dcf-padding-small)}.dcf-modal-component.dcf-header-transparent ion-header{box-shadow:none!important;border-bottom:none!important}.dcf-modal-component.dcf-header-transparent ion-title{width:calc(100% + 10px);position:relative;top:1.25rem;background:#fff;height:50px!important}.dcf-modal-component.dcf-header-transparent ion-buttons ion-button:not(:last-of-type){position:relative;right:1px}.dcf-modal-component.dcf-header-transparent ion-content[part=background],.dcf-modal-component.dcf-header-transparent ion-content::part(background){border-radius:var(--dcf-border-radius)!important}.dcf-modal-component.dcf-header-transparent .dcf-modal-body.dcf-has-title{padding-top:2rem!important}.dcf-modal-component.dcf-header-transparent,.dcf-modal-component.dcf-lightbox-modal{--background: transparent;--box-shadow: none !important}@media (max-width: 767px){.dcf-modal-component.dcf-header-transparent,.dcf-modal-component.dcf-lightbox-modal{padding:var(--dcf-padding-xsmall)}}.dcf-modal-component.dcf-header-transparent ion-header,.dcf-modal-component.dcf-lightbox-modal ion-header{box-shadow:none!important;border-color:transparent!important;padding:unset!important;margin:unset!important;height:30px}.dcf-modal-component.dcf-header-transparent ion-header ion-buttons,.dcf-modal-component.dcf-lightbox-modal ion-header ion-buttons{background:var(--dcf-color-gray-2)!important;border-radius:var(--dcf-border-radius)!important;box-shadow:var(--dcf-box-shadow)!important}.dcf-modal-component.dcf-header-transparent ion-header ion-button,.dcf-modal-component.dcf-lightbox-modal ion-header ion-button{--background: transparent !important;margin:0!important;width:35px!important;height:25px!important}.dcf-modal-component.dcf-header-transparent ion-header ion-button *,.dcf-modal-component.dcf-lightbox-modal ion-header ion-button *{margin:-5px}.dcf-modal-component.dcf-header-transparent ion-header ion-button ngx-decaf-icon,.dcf-modal-component.dcf-lightbox-modal ion-header ion-button ngx-decaf-icon{transform:translate(-1px)!important}.dcf-modal-component.dcf-header-transparent ion-header ion-button ion-icon,.dcf-modal-component.dcf-lightbox-modal ion-header ion-button ion-icon{font-size:1.15rem!important;color:var(--dcf-color-gray-5)}.dcf-modal-component.dcf-header-transparent ion-header ion-toolbar,.dcf-modal-component.dcf-lightbox-modal ion-header ion-toolbar{--background: transparent !important;padding:unset!important;margin:unset!important}.dcf-modal-component.dcf-header-transparent ion-content,.dcf-modal-component.dcf-lightbox-modal ion-content{max-width:calc(100% - 10px)}.dcf-modal-component.dcf-header-transparent .dcf-modal-body,.dcf-modal-component.dcf-lightbox-modal .dcf-modal-body{background:#fff!important;padding:2px 0 0;border-radius:var(--dcf-border-radius)}.dcf-modal-component.dcf-header-transparent .dcf-modal-body>div,.dcf-modal-component.dcf-lightbox-modal .dcf-modal-body>div{border-radius:var(--dcf-border-radius)!important;max-width:calc(100% - 5px)}.dcf-modal-component:not(.dcf-lightbox-modal) .dcf-modal-body{padding:1.5rem 1rem}.dcf-modal-component .dcf-loading-container{height:50%;display:flex;justify-content:center;align-items:center}.dcf-modal-component .dcf-loading-container ion-spinner{width:60px;height:60px}\n"], dependencies: [{ kind: "component", type: IonModal, selector: "ion-modal" }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "children", "projectable", "pk", "parent"] }, { kind: "component", type: ModelRendererComponent, selector: "ngx-decaf-model-renderer", inputs: ["projectable"] }, { kind: "component", type: IconComponent, selector: "ngx-decaf-icon", inputs: ["name", "color", "slot", "button", "buttonFill", "buttonShape", "width", "size", "inline"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { 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: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
7189
7194
  };
7190
7195
  ModalComponent = __decorate([
7191
7196
  Dynamic(),
@@ -7206,7 +7211,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
7206
7211
  IonHeader,
7207
7212
  IonTitle,
7208
7213
  IonToolbar,
7209
- ], host: { '[attr.id]': 'uid' }, template: "<ion-modal\n [id]=\"uid\"\n [class]=\"'dcf-modal-component ' + className\"\n [isOpen]=\"isOpen\"\n (willDismiss)=\"handleWillDismiss($event)\"\n [backdropDismiss]=\"options?.backdropDismiss\"\n [showBackdrop]=\"options?.showBackdrop\"\n [animated]=\"options?.animated\"\n [canDismiss]=\"options?.canDismiss\"\n [class.dcf-fullscreen-modal]=\"fullscreen\"\n [class.dcf-fullscreen-expanded]=\"expanded\"\n [class.dcf-lightbox-modal]=\"lightBox\"\n [class.dcf-modal-no-header]=\"!showHeader\"\n [class.dcf-header-transparent]=\"headerTransparent\"\n [class.dcf-no-title]=\"!title?.length\"\n #component\n>\n <ng-template>\n <ion-header>\n <ion-toolbar [color]=\"headerBackground\">\n @if (title?.length) {\n <ion-title>{{ title | translate }}</ion-title>\n }\n <ion-buttons slot=\"end\">\n @if (expandable && !fullscreen) {\n <ion-button\n fill=\"clear\"\n size=\"small\"\n type=\"button\"\n class=\"dcf-button-expand\"\n (click)=\"handleExpandToggle()\"\n >\n <ngx-decaf-icon\n [color]=\"iconColor\"\n [name]=\"expanded ? 'ti-maximize-off' : 'ti-maximize'\"\n />\n </ion-button>\n }\n @if (showCloseButton) {\n <ion-button\n size=\"small\"\n type=\"button\"\n class=\"dcf-button-close\"\n (click)=\"cancel()\"\n >\n <ngx-decaf-icon\n [color]=\"iconColor\"\n name=\"ti-x\"\n />\n </ion-button>\n }\n </ion-buttons>\n </ion-toolbar>\n </ion-header>\n\n <ion-content>\n <section\n class=\"dcf-modal-body\"\n [class.dcf-has-title]=\"title?.length\"\n >\n @if (!tag && !model && !inlineContent) {\n <div class=\"dcf-loading-container\">\n <ion-spinner\n name=\"crescent\"\n color=\"primary\"\n ></ion-spinner>\n </div>\n } @else {\n @if (inlineContent && inlineContentPosition === 'top') {\n <div\n class=\"dcf-modal-content\"\n id=\"dcf-modal-content\"\n [innerHTML]=\"inlineContent\"\n ></div>\n }\n @if (!tag && model) {\n <ngx-decaf-model-renderer\n (listenEvent)=\"handleEvent($event)\"\n [model]=\"model\"\n [globals]=\"globals\"\n />\n } @else if (tag && globals) {\n <ngx-decaf-component-renderer\n [tag]=\"tag\"\n (listenEvent)=\"handleEvent($event)\"\n [model]=\"model\"\n [globals]=\"{ props: globals }\"\n />\n }\n @if (inlineContent && inlineContentPosition === 'bottom') {\n <div\n class=\"dcf-modal-content\"\n id=\"dcf-modal-content\"\n [innerHTML]=\"inlineContent\"\n ></div>\n }\n }\n </section>\n </ion-content>\n </ng-template>\n</ion-modal>\n", styles: [".dcf-modal-component{--border-radius: var(--dcf-border-radius)}.dcf-modal-component.dcf-modal-confirm{top:-100px;--max-width: 320px;--max-height: 35vh}.dcf-modal-component.dcf-modal-confirm ::ng-deep .dcf-title{font-weight:500;font-size:1.125rem;line-height:1.75rem;color:var(--dcf-color-gray-8)}.dcf-modal-component.dcf-modal-confirm ::ng-deep .dcf-delete .dcf-title{color:var(--dcf-color-danger)}.dcf-modal-component.dcf-modal-confirm ::ng-deep .dcf-content{font-weight:400;font-size:.935rem;line-height:1.375rem;color:var(--dcf-color-gray-6);margin-top:1rem}.dcf-modal-component.dcf-modal-confirm ::ng-deep .dcf-buttons-grid{position:absolute;bottom:2rem;right:1rem}.dcf-modal-component ::ng-deep form .dcf-buttons-grid{align-content:center!important;justify-content:center;padding-top:1rem}.dcf-modal-component ion-header{box-shadow:none!important;border-bottom:1px solid var(--dcf-color-gray-2)}.dcf-modal-component ion-button.dcf-button-close{--background: var(--dcf-color-light) !important;--border-radius: var(--dcf-border-radius-small) !important}.dcf-modal-component.dcf-modal-no-header ion-header,.dcf-modal-component.dcf-no-title ion-header{box-shadow:none;border-color:transparent!important}.dcf-modal-component .dcf-modal-content ::ng-deep pre{border:1px solid var(--dcf-color-gray-2);white-space:pre-wrap;overflow-wrap:anywhere;background:rgba(var(--dcf-color-warning-rgb),.175)!important;padding:var(--dcf-padding);border-radius:var(--dcf-border-radius-small);font-size:.9rem!important;font-weight:500;margin-top:2rem}@media (max-width: 768px){.dcf-modal-component .dcf-button-expand{display:none!important}}.dcf-modal-component.dcf-modal-select-interface{--min-width: 300px;--max-width: 500px;--max-height: 50%;--border-radius: var(--dcf-border-radius)}.dcf-modal-component.dcf-modal-select-interface .dcf-modal-body{--max-height: 60%;max-height:60%;padding:0px var(--dcf-padding-small)!important}.dcf-modal-component.dcf-modal-expand{--min-height: 50%;--min-width: 75%;--max-width: 100%}.dcf-modal-component.dcf-fullscreen-expanded,.dcf-modal-component.dcf-fullscreen-modal{--height: 100%;--width: 100%;--max-width: 100%;--border-radius: 0}.dcf-modal-component.dcf-fullscreen-expanded.dcf-header-transparent,.dcf-modal-component.dcf-fullscreen-modal.dcf-header-transparent{padding-left:2rem;padding-bottom:2rem;padding-right:1rem}.dcf-modal-component.dcf-fullscreen-expanded:not(.dcf-header-transparent).dcf-no-title ion-header ion-button,.dcf-modal-component.dcf-fullscreen-modal:not(.dcf-header-transparent).dcf-no-title ion-header ion-button{transform:translate(-5px,5px)}.dcf-modal-component.dcf-lightbox-modal ion-content{--background: transparent !important}.dcf-modal-component.dcf-lightbox-modal .dcf-modal-body{display:flex;height:auto;justify-content:center;align-items:center}.dcf-modal-component.dcf-lightbox-modal.dcf-fullscreen-modal{padding:var(--dcf-padding-small)}.dcf-modal-component.dcf-header-transparent ion-header{box-shadow:none!important;border-bottom:none!important}.dcf-modal-component.dcf-header-transparent ion-title{width:calc(100% + 10px);position:relative;top:1.25rem;background:#fff;height:50px!important}.dcf-modal-component.dcf-header-transparent ion-buttons ion-button:not(:last-of-type){position:relative;right:1px}.dcf-modal-component.dcf-header-transparent ion-content[part=background],.dcf-modal-component.dcf-header-transparent ion-content::part(background){border-radius:var(--dcf-border-radius)!important}.dcf-modal-component.dcf-header-transparent .dcf-modal-body.dcf-has-title{padding-top:2rem!important}.dcf-modal-component.dcf-header-transparent,.dcf-modal-component.dcf-lightbox-modal{--background: transparent;--box-shadow: none !important}@media (max-width: 767px){.dcf-modal-component.dcf-header-transparent,.dcf-modal-component.dcf-lightbox-modal{padding:var(--dcf-padding-xsmall)}}.dcf-modal-component.dcf-header-transparent ion-header,.dcf-modal-component.dcf-lightbox-modal ion-header{box-shadow:none!important;border-color:transparent!important;padding:unset!important;margin:unset!important;height:30px}.dcf-modal-component.dcf-header-transparent ion-header ion-buttons,.dcf-modal-component.dcf-lightbox-modal ion-header ion-buttons{background:var(--dcf-color-gray-2)!important;border-radius:var(--dcf-border-radius)!important;box-shadow:var(--dcf-box-shadow)!important}.dcf-modal-component.dcf-header-transparent ion-header ion-button,.dcf-modal-component.dcf-lightbox-modal ion-header ion-button{--background: transparent !important;margin:0!important;width:35px!important;height:25px!important}.dcf-modal-component.dcf-header-transparent ion-header ion-button *,.dcf-modal-component.dcf-lightbox-modal ion-header ion-button *{margin:-5px}.dcf-modal-component.dcf-header-transparent ion-header ion-button ngx-decaf-icon,.dcf-modal-component.dcf-lightbox-modal ion-header ion-button ngx-decaf-icon{transform:translate(-1px)!important}.dcf-modal-component.dcf-header-transparent ion-header ion-button ion-icon,.dcf-modal-component.dcf-lightbox-modal ion-header ion-button ion-icon{font-size:1.15rem!important;color:var(--dcf-color-gray-5)}.dcf-modal-component.dcf-header-transparent ion-header ion-toolbar,.dcf-modal-component.dcf-lightbox-modal ion-header ion-toolbar{--background: transparent !important;padding:unset!important;margin:unset!important}.dcf-modal-component.dcf-header-transparent ion-content,.dcf-modal-component.dcf-lightbox-modal ion-content{max-width:calc(100% - 10px)}.dcf-modal-component.dcf-header-transparent .dcf-modal-body,.dcf-modal-component.dcf-lightbox-modal .dcf-modal-body{background:#fff!important;padding:2px 0 0;border-radius:var(--dcf-border-radius)}.dcf-modal-component.dcf-header-transparent .dcf-modal-body>div,.dcf-modal-component.dcf-lightbox-modal .dcf-modal-body>div{border-radius:var(--dcf-border-radius)!important;max-width:calc(100% - 5px)}.dcf-modal-component:not(.dcf-lightbox-modal) .dcf-modal-body{padding:1.5rem 1rem}.dcf-modal-component .dcf-loading-container{height:50%;display:flex;justify-content:center;align-items:center}.dcf-modal-component .dcf-loading-container ion-spinner{width:60px;height:60px}\n"] }]
7214
+ ], host: { '[attr.id]': 'uid' }, template: "<ion-modal\n [id]=\"uid\"\n [class]=\"'dcf-modal-component ' + className\"\n [isOpen]=\"isOpen\"\n (willDismiss)=\"handleWillDismiss($event)\"\n [backdropDismiss]=\"options?.backdropDismiss\"\n [showBackdrop]=\"options?.showBackdrop\"\n [animated]=\"options?.animated\"\n [canDismiss]=\"options?.canDismiss\"\n [class.dcf-fullscreen-modal]=\"fullscreen\"\n [class.dcf-no-borders]=\"!borders\"\n [class.dcf-fullscreen-expanded]=\"expanded\"\n [class.dcf-lightbox-modal]=\"lightBox\"\n [class.dcf-modal-no-header]=\"!showHeader\"\n [class.dcf-header-transparent]=\"headerTransparent\"\n [class.dcf-no-title]=\"!title?.length\"\n #component\n>\n <ng-template>\n <ion-header>\n <ion-toolbar [color]=\"headerBackground\">\n @if (title?.length) {\n <ion-title>{{ title | translate }}</ion-title>\n }\n <ion-buttons slot=\"end\">\n @if (expandable && !fullscreen) {\n <ion-button\n fill=\"clear\"\n size=\"small\"\n type=\"button\"\n class=\"dcf-button-expand\"\n (click)=\"handleExpandToggle()\"\n >\n <ngx-decaf-icon\n [color]=\"iconColor\"\n [name]=\"expanded ? 'ti-maximize-off' : 'ti-maximize'\"\n />\n </ion-button>\n }\n @if (showCloseButton) {\n <ion-button\n size=\"small\"\n type=\"button\"\n class=\"dcf-button-close\"\n (click)=\"cancel()\"\n >\n <ngx-decaf-icon\n [color]=\"iconColor\"\n name=\"ti-x\"\n />\n </ion-button>\n }\n </ion-buttons>\n </ion-toolbar>\n </ion-header>\n\n <ion-content>\n <section\n class=\"dcf-modal-body\"\n [class.dcf-has-title]=\"title?.length\"\n >\n @if (!tag && !model && !inlineContent) {\n <div class=\"dcf-loading-container\">\n <ion-spinner\n name=\"crescent\"\n color=\"primary\"\n ></ion-spinner>\n </div>\n } @else {\n @if (inlineContent && inlineContentPosition === 'top') {\n <div\n class=\"dcf-modal-content\"\n id=\"dcf-modal-content\"\n [innerHTML]=\"inlineContent\"\n ></div>\n }\n @if (!tag && model) {\n <ngx-decaf-model-renderer\n (listenEvent)=\"handleEvent($event)\"\n [model]=\"model\"\n [globals]=\"globals\"\n />\n } @else if (tag && globals) {\n <ngx-decaf-component-renderer\n [tag]=\"tag\"\n (listenEvent)=\"handleEvent($event)\"\n [model]=\"model\"\n [globals]=\"{ props: globals }\"\n />\n }\n @if (inlineContent && inlineContentPosition === 'bottom') {\n <div\n class=\"dcf-modal-content\"\n id=\"dcf-modal-content\"\n [innerHTML]=\"inlineContent\"\n ></div>\n }\n }\n </section>\n </ion-content>\n </ng-template>\n</ion-modal>\n", styles: [".dcf-modal-component{--border-radius: var(--dcf-border-radius)}.dcf-modal-component.dcf-modal-confirm{top:-100px;--max-width: 320px;--max-height: 35vh}.dcf-modal-component.dcf-modal-confirm ::ng-deep .dcf-title{font-weight:500;font-size:1.125rem;line-height:1.75rem;color:var(--dcf-color-gray-8)}.dcf-modal-component.dcf-modal-confirm ::ng-deep .dcf-delete .dcf-title{color:var(--dcf-color-danger)}.dcf-modal-component.dcf-modal-confirm ::ng-deep .dcf-content{font-weight:400;font-size:.935rem;line-height:1.375rem;color:var(--dcf-color-gray-6);margin-top:1rem}.dcf-modal-component.dcf-modal-confirm ::ng-deep .dcf-buttons-grid{position:absolute;bottom:2rem;right:1rem}.dcf-modal-component ::ng-deep form .dcf-buttons-grid{align-content:center!important;justify-content:center;padding-top:1rem}.dcf-modal-component ion-header{box-shadow:none!important}.dcf-modal-component ion-header:not(.dcf-no-borders){border-bottom:1px solid var(--dcf-color-gray-2)}.dcf-modal-component ion-header.dcf-no-borders{border-bottom:1px solid transparent!important}.dcf-modal-component ion-button.dcf-button-close{--background: var(--dcf-color-light) !important;--border-radius: var(--dcf-border-radius-small) !important}.dcf-modal-component.dcf-modal-no-header ion-header,.dcf-modal-component.dcf-no-title ion-header{box-shadow:none;border-color:transparent!important}.dcf-modal-component .dcf-modal-content ::ng-deep pre{border:1px solid var(--dcf-color-gray-2);white-space:pre-wrap;overflow-wrap:anywhere;background:rgba(var(--dcf-color-warning-rgb),.175)!important;padding:var(--dcf-padding);border-radius:var(--dcf-border-radius-small);font-size:.9rem!important;font-weight:500;margin-top:2rem}@media (max-width: 768px){.dcf-modal-component .dcf-button-expand{display:none!important}}.dcf-modal-component.dcf-modal-select-interface{--min-width: 300px;--max-width: 500px;--max-height: 50%;--border-radius: var(--dcf-border-radius)}.dcf-modal-component.dcf-modal-select-interface .dcf-modal-body{--max-height: 60%;max-height:60%;padding:0px var(--dcf-padding-small)!important}.dcf-modal-component.dcf-modal-expand{--min-height: 50%;--min-width: 75%;--max-width: 100%}.dcf-modal-component.dcf-fullscreen-expanded,.dcf-modal-component.dcf-fullscreen-modal{--height: 100%;--width: 100%;--max-width: 100%;--border-radius: 0}.dcf-modal-component.dcf-fullscreen-expanded.dcf-header-transparent,.dcf-modal-component.dcf-fullscreen-modal.dcf-header-transparent{padding-left:2rem;padding-bottom:2rem;padding-right:1rem}.dcf-modal-component.dcf-fullscreen-expanded:not(.dcf-header-transparent).dcf-no-title ion-header ion-button,.dcf-modal-component.dcf-fullscreen-modal:not(.dcf-header-transparent).dcf-no-title ion-header ion-button{transform:translate(-5px,5px)}.dcf-modal-component.dcf-lightbox-modal ion-content{--background: transparent !important}.dcf-modal-component.dcf-lightbox-modal .dcf-modal-body{display:flex;height:auto;justify-content:center;align-items:center}.dcf-modal-component.dcf-lightbox-modal.dcf-fullscreen-modal{padding:var(--dcf-padding-small)}.dcf-modal-component.dcf-header-transparent ion-header{box-shadow:none!important;border-bottom:none!important}.dcf-modal-component.dcf-header-transparent ion-title{width:calc(100% + 10px);position:relative;top:1.25rem;background:#fff;height:50px!important}.dcf-modal-component.dcf-header-transparent ion-buttons ion-button:not(:last-of-type){position:relative;right:1px}.dcf-modal-component.dcf-header-transparent ion-content[part=background],.dcf-modal-component.dcf-header-transparent ion-content::part(background){border-radius:var(--dcf-border-radius)!important}.dcf-modal-component.dcf-header-transparent .dcf-modal-body.dcf-has-title{padding-top:2rem!important}.dcf-modal-component.dcf-header-transparent,.dcf-modal-component.dcf-lightbox-modal{--background: transparent;--box-shadow: none !important}@media (max-width: 767px){.dcf-modal-component.dcf-header-transparent,.dcf-modal-component.dcf-lightbox-modal{padding:var(--dcf-padding-xsmall)}}.dcf-modal-component.dcf-header-transparent ion-header,.dcf-modal-component.dcf-lightbox-modal ion-header{box-shadow:none!important;border-color:transparent!important;padding:unset!important;margin:unset!important;height:30px}.dcf-modal-component.dcf-header-transparent ion-header ion-buttons,.dcf-modal-component.dcf-lightbox-modal ion-header ion-buttons{background:var(--dcf-color-gray-2)!important;border-radius:var(--dcf-border-radius)!important;box-shadow:var(--dcf-box-shadow)!important}.dcf-modal-component.dcf-header-transparent ion-header ion-button,.dcf-modal-component.dcf-lightbox-modal ion-header ion-button{--background: transparent !important;margin:0!important;width:35px!important;height:25px!important}.dcf-modal-component.dcf-header-transparent ion-header ion-button *,.dcf-modal-component.dcf-lightbox-modal ion-header ion-button *{margin:-5px}.dcf-modal-component.dcf-header-transparent ion-header ion-button ngx-decaf-icon,.dcf-modal-component.dcf-lightbox-modal ion-header ion-button ngx-decaf-icon{transform:translate(-1px)!important}.dcf-modal-component.dcf-header-transparent ion-header ion-button ion-icon,.dcf-modal-component.dcf-lightbox-modal ion-header ion-button ion-icon{font-size:1.15rem!important;color:var(--dcf-color-gray-5)}.dcf-modal-component.dcf-header-transparent ion-header ion-toolbar,.dcf-modal-component.dcf-lightbox-modal ion-header ion-toolbar{--background: transparent !important;padding:unset!important;margin:unset!important}.dcf-modal-component.dcf-header-transparent ion-content,.dcf-modal-component.dcf-lightbox-modal ion-content{max-width:calc(100% - 10px)}.dcf-modal-component.dcf-header-transparent .dcf-modal-body,.dcf-modal-component.dcf-lightbox-modal .dcf-modal-body{background:#fff!important;padding:2px 0 0;border-radius:var(--dcf-border-radius)}.dcf-modal-component.dcf-header-transparent .dcf-modal-body>div,.dcf-modal-component.dcf-lightbox-modal .dcf-modal-body>div{border-radius:var(--dcf-border-radius)!important;max-width:calc(100% - 5px)}.dcf-modal-component:not(.dcf-lightbox-modal) .dcf-modal-body{padding:1.5rem 1rem}.dcf-modal-component .dcf-loading-container{height:50%;display:flex;justify-content:center;align-items:center}.dcf-modal-component .dcf-loading-container ion-spinner{width:60px;height:60px}\n"] }]
7210
7215
  }], ctorParameters: () => [], propDecorators: { modal: [{
7211
7216
  type: ViewChild,
7212
7217
  args: ['component']
@@ -7228,6 +7233,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
7228
7233
  type: Input
7229
7234
  }], expandable: [{
7230
7235
  type: Input
7236
+ }], borders: [{
7237
+ type: Input
7231
7238
  }], lightBox: [{
7232
7239
  type: Input
7233
7240
  }], headerTransparent: [{
@@ -7542,7 +7549,7 @@ let CrudFieldComponent = class CrudFieldComponent extends NgxFormFieldDirective
7542
7549
  * When true, the browser will check the spelling of the input text.
7543
7550
  *
7544
7551
  * @type {boolean}
7545
- * @default false
7552
+ * @default true
7546
7553
  * @memberOf CrudFieldComponent
7547
7554
  */
7548
7555
  this.startEmpty = true;
@@ -8242,7 +8249,7 @@ class NgxFormDirective extends NgxParentComponentDirective {
8242
8249
  return undefined;
8243
8250
  }
8244
8251
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: NgxFormDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
8245
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.17", type: NgxFormDirective, isStandalone: true, inputs: { parentFormId: "parentFormId", deepMerge: "deepMerge", path: "path", multiple: "multiple", updateOn: "updateOn", target: "target", method: "method", options: "options", action: "action", operation: "operation", handlers: "handlers", rendererId: "rendererId", allowClear: "allowClear", match: "match" }, outputs: { submitEvent: "submitEvent", formGroupLoadedEvent: "formGroupLoadedEvent" }, viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
8252
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.17", type: NgxFormDirective, isStandalone: true, inputs: { parentFormId: "parentFormId", deepMerge: "deepMerge", path: "path", multiple: "multiple", updateOn: "updateOn", target: "target", method: "method", buttons: "buttons", action: "action", operation: "operation", handlers: "handlers", rendererId: "rendererId", allowClear: "allowClear", match: "match" }, outputs: { submitEvent: "submitEvent", formGroupLoadedEvent: "formGroupLoadedEvent" }, viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
8246
8253
  }
8247
8254
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: NgxFormDirective, decorators: [{
8248
8255
  type: Directive
@@ -8263,7 +8270,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
8263
8270
  type: Input
8264
8271
  }], method: [{
8265
8272
  type: Input
8266
- }], options: [{
8273
+ }], buttons: [{
8267
8274
  type: Input
8268
8275
  }], action: [{
8269
8276
  type: Input
@@ -8707,7 +8714,7 @@ let CrudFormComponent = class CrudFormComponent extends NgxFormDirective {
8707
8714
  * @memberOf CrudFormComponent
8708
8715
  */
8709
8716
  async ngOnInit() {
8710
- this.options = Object.assign({}, DefaultFormReactiveOptions, { buttons: { submit: { text: this.operation.toLowerCase() } } }, this.options || {});
8717
+ this.buttons = Object.assign({}, DefaultFormButtonsOptions, { submit: { text: this.operation.toLowerCase() } }, this.buttons || {});
8711
8718
  if (!this.pk && this.modelName) {
8712
8719
  const repo = getModelAndRepository(this.modelName);
8713
8720
  if (repo) {
@@ -8730,7 +8737,7 @@ let CrudFormComponent = class CrudFormComponent extends NgxFormDirective {
8730
8737
  super.submitEventEmit(this.model, 'CrudFormComponent', ComponentEventNames.Submit, this.handlers, OperationKeys.DELETE);
8731
8738
  }
8732
8739
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: CrudFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
8733
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: CrudFormComponent, isStandalone: true, selector: "ngx-decaf-crud-form", inputs: { showCancelButton: "showCancelButton" }, host: { properties: { "attr.id": "uid" } }, usesInheritance: true, ngImport: i0, template: "@if (operation !== 'read' && operation !== 'delete') {\n <form\n [class]=\"'dcf-form-grid ' + operation\"\n #component\n [id]=\"rendererId\"\n [formGroup]=\"formGroup\"\n (ngSubmit)=\"submit($event)\"\n novalidate\n [target]=\"target\"\n >\n @if (!children?.length) {\n <ng-content #formContent></ng-content>\n } @else {\n <ngx-decaf-layout\n [className]=\"'dcf-crud-form-grid dcf-grid-nested '\"\n [children]=\"children || []\"\n [isModalChild]=\"isModalChild\"\n [pk]=\"pk\"\n (listenEvent)=\"handleEvent($event)\"\n [parentForm]=\"formGroup || parentForm\"\n [operation]=\"operation\"\n [modelId]=\"modelId\"\n [cardType]=\"cardType ?? 'blank'\"\n [match]=\"match ?? false\"\n [refreshing]=\"refreshing\"\n [gap]=\"'small'\"\n [flexMode]=\"props.flexMode || false\"\n [rows]=\"rows\"\n [borders]=\"borders ?? false\"\n [breakpoint]=\"breakpoint ?? 'large'\"\n [cols]=\"cols\"\n />\n }\n @if (initialized) {\n <div\n class=\"dcf-buttons-grid dcf-grid dcf-grid-small dcf-flex dcf-flex-right\"\n >\n @if (!action) {\n <div [class.dcf-hidden]=\"!showCancelButton\">\n <ion-button\n fill=\"clear\"\n (click)=\"handleReset()\"\n >\n @if (options.buttons.clear?.icon) {\n <ion-icon\n aria-hidden=\"true\"\n [slot]=\"options.buttons.clear?.iconSlot\"\n [name]=\"options.buttons.clear?.icon\"\n ></ion-icon>\n }\n {{\n locale +\n '.' +\n (allowClear ? options.buttons.clear?.text : 'back')\n | translate\n }}\n </ion-button>\n </div>\n }\n <div>\n <ion-button\n type=\"submit\"\n [expand]=\"action ? 'block' : 'default'\"\n >\n @if (options.buttons.submit.icon) {\n <ion-icon\n aria-hidden=\"true\"\n [slot]=\"options.buttons.submit.iconSlot\"\n [name]=\"options.buttons.submit.icon\"\n ></ion-icon>\n }\n {{\n action\n ? action\n : (locale + '.' + options.buttons.submit.text | translate)\n }}\n </ion-button>\n </div>\n </div>\n }\n </form>\n} @else {\n <section\n #component\n [id]=\"uid\"\n >\n <ngx-decaf-layout\n [className]=\"''\"\n [pk]=\"pk\"\n [isModalChild]=\"isModalChild\"\n [modelId]=\"modelId\"\n [children]=\"children || []\"\n [operation]=\"operation\"\n [cardType]=\"cardType ?? 'blank'\"\n [modelId]=\"modelId\"\n [match]=\"match ?? false\"\n [gap]=\"'small'\"\n [isModalChild]=\"isModalChild\"\n (listenEvent)=\"handleEvent($event)\"\n [flexMode]=\"props.flexMode || false\"\n [rows]=\"rows\"\n [borders]=\"borders ?? false\"\n [breakpoint]=\"breakpoint ?? 'large'\"\n [cols]=\"cols\"\n />\n </section>\n\n <section\n [class]=\"\n 'dcf-buttons-grid dcf-grid dcf-grid-small dcf-flex dcf-flex-left ' +\n operation\n \"\n [id]=\"uid\"\n >\n @if ([OperationKeys.DELETE].includes(operation) && modelId) {\n <div>\n <ion-button\n (click)=\"handleDelete()\"\n color=\"danger\"\n type=\"button\"\n >\n @if (options.buttons.submit.icon) {\n <ion-icon\n aria-hidden=\"true\"\n [slot]=\"options.buttons.submit.iconSlot\"\n [name]=\"options.buttons.submit.icon\"\n ></ion-icon>\n }\n {{ locale + '.delete' | translate }}\n </ion-button>\n </div>\n }\n @if (\n operation === OperationKeys.CREATE || operation === OperationKeys.UPDATE\n ) {\n <div>\n <ion-button type=\"submit\">\n @if (options.buttons.submit.icon) {\n <ion-icon\n aria-hidden=\"true\"\n [slot]=\"options.buttons.submit.iconSlot\"\n [name]=\"options.buttons.submit.icon\"\n ></ion-icon>\n }\n {{\n action\n ? action\n : (locale + '.' + options.buttons.submit.text | translate)\n }}\n </ion-button>\n </div>\n }\n <div>\n <ion-button\n fill=\"clear\"\n (click)=\"handleReset()\"\n >\n @if (options.buttons.clear?.icon) {\n <ion-icon\n aria-hidden=\"true\"\n [slot]=\"options.buttons.clear?.iconSlot\"\n [name]=\"options.buttons.clear?.icon\"\n ></ion-icon>\n }\n {{\n [\n OperationKeys.DELETE,\n OperationKeys.READ,\n OperationKeys.UPDATE,\n ].includes(operation)\n ? (locale + '.back' | translate)\n : options.buttons.clear?.text\n }}\n </ion-button>\n </div>\n </section>\n}\n", styles: [".dcf-buttons-grid{margin-top:var(--dcf-margin-medium);margin-bottom:var(--dcf-margin)}@media (min-width: 577px){.dcf-buttons-grid.dcf-flex.read,.dcf-buttons-grid.dcf-flex.delete{flex-direction:row-reverse}}@media (max-width: 576px){.dcf-buttons-grid.dcf-flex{flex-direction:column-reverse}.dcf-buttons-grid.dcf-flex>div{width:100%}.dcf-buttons-grid.dcf-flex>div+div{margin-top:1rem}.dcf-buttons-grid.dcf-flex ion-button{width:100%}}.dcf-form-grid.create,.dcf-form-grid.update{margin-top:var(--dcf-margin-small)}.dcf-form-grid .dcf-form-item{margin-top:0!important}.dcf-form-grid.read .dcf-form-item{margin-bottom:var(--dcf-margin-small)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: LayoutComponent, selector: "ngx-decaf-layout", inputs: ["gap", "grid", "flexMode", "rowCard", "maxColsLength", "accordion"] }, { 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: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
8740
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: CrudFormComponent, isStandalone: true, selector: "ngx-decaf-crud-form", inputs: { showCancelButton: "showCancelButton" }, host: { properties: { "attr.id": "uid" } }, usesInheritance: true, ngImport: i0, template: "@if (operation !== 'read' && operation !== 'delete') {\n <form\n [class]=\"'dcf-form-grid ' + operation\"\n #component\n [id]=\"rendererId\"\n [formGroup]=\"formGroup\"\n (ngSubmit)=\"submit($event)\"\n novalidate\n [target]=\"target\"\n >\n @if (!children?.length) {\n <ng-content #formContent></ng-content>\n } @else {\n <ngx-decaf-layout\n [className]=\"'dcf-crud-form-grid dcf-grid-nested '\"\n [children]=\"children || []\"\n [isModalChild]=\"isModalChild\"\n [pk]=\"pk\"\n (listenEvent)=\"handleEvent($event)\"\n [parentForm]=\"formGroup || parentForm\"\n [operation]=\"operation\"\n [modelId]=\"modelId\"\n [cardType]=\"cardType ?? 'blank'\"\n [match]=\"match ?? false\"\n [refreshing]=\"refreshing\"\n [gap]=\"'small'\"\n [flexMode]=\"props.flexMode || false\"\n [rows]=\"rows\"\n [borders]=\"borders ?? false\"\n [breakpoint]=\"breakpoint ?? 'large'\"\n [cols]=\"cols\"\n />\n }\n @if (initialized) {\n <div\n class=\"dcf-buttons-grid dcf-grid dcf-grid-small dcf-flex dcf-flex-right\"\n >\n @if (!action) {\n <div [class.dcf-hidden]=\"!showCancelButton\">\n <ion-button\n fill=\"clear\"\n (click)=\"handleReset()\"\n >\n @if (buttons.clear?.icon) {\n <ion-icon\n aria-hidden=\"true\"\n [slot]=\"buttons.clear?.iconSlot\"\n [name]=\"buttons.clear?.icon\"\n ></ion-icon>\n }\n {{\n locale + '.' + (allowClear ? buttons.clear?.text : 'back')\n | translate\n }}\n </ion-button>\n </div>\n }\n <div>\n <ion-button\n type=\"submit\"\n [expand]=\"action ? 'block' : 'default'\"\n >\n @if (buttons.submit.icon) {\n <ion-icon\n aria-hidden=\"true\"\n [slot]=\"buttons.submit.iconSlot\"\n [name]=\"buttons.submit.icon\"\n ></ion-icon>\n }\n {{\n action ? action : (locale + '.' + buttons.submit.text | translate)\n }}\n </ion-button>\n </div>\n </div>\n }\n </form>\n} @else {\n <section\n #component\n [id]=\"uid\"\n >\n <ngx-decaf-layout\n [className]=\"''\"\n [pk]=\"pk\"\n [isModalChild]=\"isModalChild\"\n [modelId]=\"modelId\"\n [children]=\"children || []\"\n [operation]=\"operation\"\n [cardType]=\"cardType ?? 'blank'\"\n [modelId]=\"modelId\"\n [match]=\"match ?? false\"\n [gap]=\"'small'\"\n [isModalChild]=\"isModalChild\"\n (listenEvent)=\"handleEvent($event)\"\n [flexMode]=\"props.flexMode || false\"\n [rows]=\"rows\"\n [borders]=\"borders ?? false\"\n [breakpoint]=\"breakpoint ?? 'large'\"\n [cols]=\"cols\"\n />\n </section>\n\n <section\n [class]=\"\n 'dcf-buttons-grid dcf-grid dcf-grid-small dcf-flex dcf-flex-left ' +\n operation\n \"\n [id]=\"uid\"\n >\n @if ([OperationKeys.DELETE].includes(operation) && modelId) {\n <div>\n <ion-button\n (click)=\"handleDelete()\"\n color=\"danger\"\n type=\"button\"\n >\n @if (buttons.submit.icon) {\n <ion-icon\n aria-hidden=\"true\"\n [slot]=\"buttons.submit.iconSlot\"\n [name]=\"buttons.submit.icon\"\n ></ion-icon>\n }\n {{ locale + '.delete' | translate }}\n </ion-button>\n </div>\n }\n @if (\n operation === OperationKeys.CREATE || operation === OperationKeys.UPDATE\n ) {\n <div>\n <ion-button type=\"submit\">\n @if (buttons.submit.icon) {\n <ion-icon\n aria-hidden=\"true\"\n [slot]=\"buttons.submit.iconSlot\"\n [name]=\"buttons.submit.icon\"\n ></ion-icon>\n }\n {{\n action\n ? action\n : !translatable\n ? buttons.submit.text\n : (locale + '.' + buttons.submit.text | translate)\n }}\n </ion-button>\n </div>\n }\n <div>\n <ion-button\n fill=\"clear\"\n (click)=\"handleReset()\"\n >\n @if (buttons.clear?.icon) {\n <ion-icon\n aria-hidden=\"true\"\n [slot]=\"buttons.clear?.iconSlot\"\n [name]=\"buttons.clear?.icon\"\n ></ion-icon>\n }\n {{\n !translatable\n ? buttons.clear?.text\n : [\n OperationKeys.DELETE,\n OperationKeys.READ,\n OperationKeys.UPDATE,\n ].includes(operation)\n ? (locale + '.back' | translate)\n : (locale + '.' + buttons.clear.text | translate)\n }}\n </ion-button>\n </div>\n </section>\n}\n", styles: [".dcf-buttons-grid{margin-top:var(--dcf-margin-medium);margin-bottom:var(--dcf-margin)}@media (min-width: 577px){.dcf-buttons-grid.dcf-flex.read,.dcf-buttons-grid.dcf-flex.delete{flex-direction:row-reverse}}@media (max-width: 576px){.dcf-buttons-grid.dcf-flex{flex-direction:column-reverse}.dcf-buttons-grid.dcf-flex>div{width:100%}.dcf-buttons-grid.dcf-flex>div+div{margin-top:1rem}.dcf-buttons-grid.dcf-flex ion-button{width:100%}}.dcf-form-grid.create,.dcf-form-grid.update{margin-top:var(--dcf-margin-small)}.dcf-form-grid .dcf-form-item{margin-top:0!important}.dcf-form-grid.read .dcf-form-item{margin-bottom:var(--dcf-margin-small)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: LayoutComponent, selector: "ngx-decaf-layout", inputs: ["gap", "grid", "flexMode", "rowCard", "maxColsLength", "accordion"] }, { 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: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
8734
8741
  };
8735
8742
  CrudFormComponent = __decorate([
8736
8743
  Dynamic(),
@@ -8738,7 +8745,7 @@ CrudFormComponent = __decorate([
8738
8745
  ], CrudFormComponent);
8739
8746
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: CrudFormComponent, decorators: [{
8740
8747
  type: Component,
8741
- args: [{ standalone: true, selector: 'ngx-decaf-crud-form', imports: [TranslatePipe, ReactiveFormsModule, LayoutComponent, IonButton, IonIcon], host: { '[attr.id]': 'uid' }, template: "@if (operation !== 'read' && operation !== 'delete') {\n <form\n [class]=\"'dcf-form-grid ' + operation\"\n #component\n [id]=\"rendererId\"\n [formGroup]=\"formGroup\"\n (ngSubmit)=\"submit($event)\"\n novalidate\n [target]=\"target\"\n >\n @if (!children?.length) {\n <ng-content #formContent></ng-content>\n } @else {\n <ngx-decaf-layout\n [className]=\"'dcf-crud-form-grid dcf-grid-nested '\"\n [children]=\"children || []\"\n [isModalChild]=\"isModalChild\"\n [pk]=\"pk\"\n (listenEvent)=\"handleEvent($event)\"\n [parentForm]=\"formGroup || parentForm\"\n [operation]=\"operation\"\n [modelId]=\"modelId\"\n [cardType]=\"cardType ?? 'blank'\"\n [match]=\"match ?? false\"\n [refreshing]=\"refreshing\"\n [gap]=\"'small'\"\n [flexMode]=\"props.flexMode || false\"\n [rows]=\"rows\"\n [borders]=\"borders ?? false\"\n [breakpoint]=\"breakpoint ?? 'large'\"\n [cols]=\"cols\"\n />\n }\n @if (initialized) {\n <div\n class=\"dcf-buttons-grid dcf-grid dcf-grid-small dcf-flex dcf-flex-right\"\n >\n @if (!action) {\n <div [class.dcf-hidden]=\"!showCancelButton\">\n <ion-button\n fill=\"clear\"\n (click)=\"handleReset()\"\n >\n @if (options.buttons.clear?.icon) {\n <ion-icon\n aria-hidden=\"true\"\n [slot]=\"options.buttons.clear?.iconSlot\"\n [name]=\"options.buttons.clear?.icon\"\n ></ion-icon>\n }\n {{\n locale +\n '.' +\n (allowClear ? options.buttons.clear?.text : 'back')\n | translate\n }}\n </ion-button>\n </div>\n }\n <div>\n <ion-button\n type=\"submit\"\n [expand]=\"action ? 'block' : 'default'\"\n >\n @if (options.buttons.submit.icon) {\n <ion-icon\n aria-hidden=\"true\"\n [slot]=\"options.buttons.submit.iconSlot\"\n [name]=\"options.buttons.submit.icon\"\n ></ion-icon>\n }\n {{\n action\n ? action\n : (locale + '.' + options.buttons.submit.text | translate)\n }}\n </ion-button>\n </div>\n </div>\n }\n </form>\n} @else {\n <section\n #component\n [id]=\"uid\"\n >\n <ngx-decaf-layout\n [className]=\"''\"\n [pk]=\"pk\"\n [isModalChild]=\"isModalChild\"\n [modelId]=\"modelId\"\n [children]=\"children || []\"\n [operation]=\"operation\"\n [cardType]=\"cardType ?? 'blank'\"\n [modelId]=\"modelId\"\n [match]=\"match ?? false\"\n [gap]=\"'small'\"\n [isModalChild]=\"isModalChild\"\n (listenEvent)=\"handleEvent($event)\"\n [flexMode]=\"props.flexMode || false\"\n [rows]=\"rows\"\n [borders]=\"borders ?? false\"\n [breakpoint]=\"breakpoint ?? 'large'\"\n [cols]=\"cols\"\n />\n </section>\n\n <section\n [class]=\"\n 'dcf-buttons-grid dcf-grid dcf-grid-small dcf-flex dcf-flex-left ' +\n operation\n \"\n [id]=\"uid\"\n >\n @if ([OperationKeys.DELETE].includes(operation) && modelId) {\n <div>\n <ion-button\n (click)=\"handleDelete()\"\n color=\"danger\"\n type=\"button\"\n >\n @if (options.buttons.submit.icon) {\n <ion-icon\n aria-hidden=\"true\"\n [slot]=\"options.buttons.submit.iconSlot\"\n [name]=\"options.buttons.submit.icon\"\n ></ion-icon>\n }\n {{ locale + '.delete' | translate }}\n </ion-button>\n </div>\n }\n @if (\n operation === OperationKeys.CREATE || operation === OperationKeys.UPDATE\n ) {\n <div>\n <ion-button type=\"submit\">\n @if (options.buttons.submit.icon) {\n <ion-icon\n aria-hidden=\"true\"\n [slot]=\"options.buttons.submit.iconSlot\"\n [name]=\"options.buttons.submit.icon\"\n ></ion-icon>\n }\n {{\n action\n ? action\n : (locale + '.' + options.buttons.submit.text | translate)\n }}\n </ion-button>\n </div>\n }\n <div>\n <ion-button\n fill=\"clear\"\n (click)=\"handleReset()\"\n >\n @if (options.buttons.clear?.icon) {\n <ion-icon\n aria-hidden=\"true\"\n [slot]=\"options.buttons.clear?.iconSlot\"\n [name]=\"options.buttons.clear?.icon\"\n ></ion-icon>\n }\n {{\n [\n OperationKeys.DELETE,\n OperationKeys.READ,\n OperationKeys.UPDATE,\n ].includes(operation)\n ? (locale + '.back' | translate)\n : options.buttons.clear?.text\n }}\n </ion-button>\n </div>\n </section>\n}\n", styles: [".dcf-buttons-grid{margin-top:var(--dcf-margin-medium);margin-bottom:var(--dcf-margin)}@media (min-width: 577px){.dcf-buttons-grid.dcf-flex.read,.dcf-buttons-grid.dcf-flex.delete{flex-direction:row-reverse}}@media (max-width: 576px){.dcf-buttons-grid.dcf-flex{flex-direction:column-reverse}.dcf-buttons-grid.dcf-flex>div{width:100%}.dcf-buttons-grid.dcf-flex>div+div{margin-top:1rem}.dcf-buttons-grid.dcf-flex ion-button{width:100%}}.dcf-form-grid.create,.dcf-form-grid.update{margin-top:var(--dcf-margin-small)}.dcf-form-grid .dcf-form-item{margin-top:0!important}.dcf-form-grid.read .dcf-form-item{margin-bottom:var(--dcf-margin-small)}\n"] }]
8748
+ args: [{ standalone: true, selector: 'ngx-decaf-crud-form', imports: [TranslatePipe, ReactiveFormsModule, LayoutComponent, IonButton, IonIcon], host: { '[attr.id]': 'uid' }, template: "@if (operation !== 'read' && operation !== 'delete') {\n <form\n [class]=\"'dcf-form-grid ' + operation\"\n #component\n [id]=\"rendererId\"\n [formGroup]=\"formGroup\"\n (ngSubmit)=\"submit($event)\"\n novalidate\n [target]=\"target\"\n >\n @if (!children?.length) {\n <ng-content #formContent></ng-content>\n } @else {\n <ngx-decaf-layout\n [className]=\"'dcf-crud-form-grid dcf-grid-nested '\"\n [children]=\"children || []\"\n [isModalChild]=\"isModalChild\"\n [pk]=\"pk\"\n (listenEvent)=\"handleEvent($event)\"\n [parentForm]=\"formGroup || parentForm\"\n [operation]=\"operation\"\n [modelId]=\"modelId\"\n [cardType]=\"cardType ?? 'blank'\"\n [match]=\"match ?? false\"\n [refreshing]=\"refreshing\"\n [gap]=\"'small'\"\n [flexMode]=\"props.flexMode || false\"\n [rows]=\"rows\"\n [borders]=\"borders ?? false\"\n [breakpoint]=\"breakpoint ?? 'large'\"\n [cols]=\"cols\"\n />\n }\n @if (initialized) {\n <div\n class=\"dcf-buttons-grid dcf-grid dcf-grid-small dcf-flex dcf-flex-right\"\n >\n @if (!action) {\n <div [class.dcf-hidden]=\"!showCancelButton\">\n <ion-button\n fill=\"clear\"\n (click)=\"handleReset()\"\n >\n @if (buttons.clear?.icon) {\n <ion-icon\n aria-hidden=\"true\"\n [slot]=\"buttons.clear?.iconSlot\"\n [name]=\"buttons.clear?.icon\"\n ></ion-icon>\n }\n {{\n locale + '.' + (allowClear ? buttons.clear?.text : 'back')\n | translate\n }}\n </ion-button>\n </div>\n }\n <div>\n <ion-button\n type=\"submit\"\n [expand]=\"action ? 'block' : 'default'\"\n >\n @if (buttons.submit.icon) {\n <ion-icon\n aria-hidden=\"true\"\n [slot]=\"buttons.submit.iconSlot\"\n [name]=\"buttons.submit.icon\"\n ></ion-icon>\n }\n {{\n action ? action : (locale + '.' + buttons.submit.text | translate)\n }}\n </ion-button>\n </div>\n </div>\n }\n </form>\n} @else {\n <section\n #component\n [id]=\"uid\"\n >\n <ngx-decaf-layout\n [className]=\"''\"\n [pk]=\"pk\"\n [isModalChild]=\"isModalChild\"\n [modelId]=\"modelId\"\n [children]=\"children || []\"\n [operation]=\"operation\"\n [cardType]=\"cardType ?? 'blank'\"\n [modelId]=\"modelId\"\n [match]=\"match ?? false\"\n [gap]=\"'small'\"\n [isModalChild]=\"isModalChild\"\n (listenEvent)=\"handleEvent($event)\"\n [flexMode]=\"props.flexMode || false\"\n [rows]=\"rows\"\n [borders]=\"borders ?? false\"\n [breakpoint]=\"breakpoint ?? 'large'\"\n [cols]=\"cols\"\n />\n </section>\n\n <section\n [class]=\"\n 'dcf-buttons-grid dcf-grid dcf-grid-small dcf-flex dcf-flex-left ' +\n operation\n \"\n [id]=\"uid\"\n >\n @if ([OperationKeys.DELETE].includes(operation) && modelId) {\n <div>\n <ion-button\n (click)=\"handleDelete()\"\n color=\"danger\"\n type=\"button\"\n >\n @if (buttons.submit.icon) {\n <ion-icon\n aria-hidden=\"true\"\n [slot]=\"buttons.submit.iconSlot\"\n [name]=\"buttons.submit.icon\"\n ></ion-icon>\n }\n {{ locale + '.delete' | translate }}\n </ion-button>\n </div>\n }\n @if (\n operation === OperationKeys.CREATE || operation === OperationKeys.UPDATE\n ) {\n <div>\n <ion-button type=\"submit\">\n @if (buttons.submit.icon) {\n <ion-icon\n aria-hidden=\"true\"\n [slot]=\"buttons.submit.iconSlot\"\n [name]=\"buttons.submit.icon\"\n ></ion-icon>\n }\n {{\n action\n ? action\n : !translatable\n ? buttons.submit.text\n : (locale + '.' + buttons.submit.text | translate)\n }}\n </ion-button>\n </div>\n }\n <div>\n <ion-button\n fill=\"clear\"\n (click)=\"handleReset()\"\n >\n @if (buttons.clear?.icon) {\n <ion-icon\n aria-hidden=\"true\"\n [slot]=\"buttons.clear?.iconSlot\"\n [name]=\"buttons.clear?.icon\"\n ></ion-icon>\n }\n {{\n !translatable\n ? buttons.clear?.text\n : [\n OperationKeys.DELETE,\n OperationKeys.READ,\n OperationKeys.UPDATE,\n ].includes(operation)\n ? (locale + '.back' | translate)\n : (locale + '.' + buttons.clear.text | translate)\n }}\n </ion-button>\n </div>\n </section>\n}\n", styles: [".dcf-buttons-grid{margin-top:var(--dcf-margin-medium);margin-bottom:var(--dcf-margin)}@media (min-width: 577px){.dcf-buttons-grid.dcf-flex.read,.dcf-buttons-grid.dcf-flex.delete{flex-direction:row-reverse}}@media (max-width: 576px){.dcf-buttons-grid.dcf-flex{flex-direction:column-reverse}.dcf-buttons-grid.dcf-flex>div{width:100%}.dcf-buttons-grid.dcf-flex>div+div{margin-top:1rem}.dcf-buttons-grid.dcf-flex ion-button{width:100%}}.dcf-form-grid.create,.dcf-form-grid.update{margin-top:var(--dcf-margin-small)}.dcf-form-grid .dcf-form-item{margin-top:0!important}.dcf-form-grid.read .dcf-form-item{margin-bottom:var(--dcf-margin-small)}\n"] }]
8742
8749
  }], ctorParameters: () => [], propDecorators: { showCancelButton: [{
8743
8750
  type: Input
8744
8751
  }] } });
@@ -12382,11 +12389,12 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
12382
12389
  }
12383
12390
  else {
12384
12391
  this.changeDetectorRef.detectChanges();
12392
+ const condition = this.parseConditions(this.searchValue);
12385
12393
  request = await this.parseResult(typeof this.searchValue === Primitives.STRING
12386
12394
  ? await repo.find(String(this.searchValue), this.sortDirection)
12387
12395
  : await repo
12388
12396
  .select()
12389
- .where(this.parseConditions(this.searchValue))
12397
+ .where(condition)
12390
12398
  .orderBy((this.sortBy || this.pk), this.sortDirection)
12391
12399
  .execute());
12392
12400
  data = [];
@@ -12435,61 +12443,63 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
12435
12443
  */
12436
12444
  parseConditions(value) {
12437
12445
  let _condition;
12438
- const model = this.model;
12446
+ const constructor = this.repository.class;
12439
12447
  if (typeof value === Primitives.STRING) {
12440
12448
  _condition = Condition.attribute(this.pk).eq(this.pkType.toLocaleLowerCase() === Primitives.STRING ? value : Number(value));
12441
12449
  for (const index of this.indexes) {
12442
- if (index === this.pk)
12443
- continue;
12444
- let orCondition;
12445
- if (!isNaN(value)) {
12446
- orCondition = Condition.attribute(index).eq(Number(value));
12447
- }
12448
- else {
12449
- const type = Metadata.type(model.constructor, index).name;
12450
- orCondition =
12451
- type === Date
12452
- ? Condition.attribute(index).eq(new Date(value))
12453
- : Condition.attribute(index).regexp(value);
12450
+ if (index !== this.pk) {
12451
+ const type = Metadata.type(constructor, index).name;
12452
+ let orCondition;
12453
+ if ([Primitives.NUMBER, Primitives.BIGINT].includes(type.toLocaleLowerCase())) {
12454
+ orCondition = Condition.attribute(index).eq(Number(value));
12455
+ }
12456
+ else {
12457
+ orCondition =
12458
+ type === Date
12459
+ ? Condition.attribute(index).eq(new Date(value))
12460
+ : Condition.attribute(index).regexp(value);
12461
+ }
12462
+ _condition = _condition.or(orCondition);
12454
12463
  }
12455
- _condition = _condition.or(orCondition);
12456
12464
  }
12457
12465
  }
12458
12466
  else {
12459
12467
  const { query, sort } = value;
12460
12468
  const pk = this.pk;
12461
12469
  _condition = Condition.attribute(pk).dif('null');
12462
- if (query?.length)
12470
+ if (query?.length) {
12463
12471
  _condition = undefined;
12472
+ }
12464
12473
  (query || []).forEach((item) => {
12465
12474
  const { value, condition, index } = item;
12475
+ const idx = index;
12476
+ const type = Metadata.type(constructor, idx).name;
12466
12477
  let val = value;
12467
- if (index === this.pk || !isNaN(val)) {
12478
+ if ([Primitives.NUMBER, Primitives.BIGINT].includes(type.toLocaleLowerCase())) {
12468
12479
  val = Number(val);
12469
12480
  }
12470
- const type = Metadata.type(model.constructor, index).name;
12471
12481
  if (type === Date.name) {
12472
12482
  val = new Date(val);
12473
12483
  }
12474
12484
  let orCondition;
12475
12485
  switch (condition) {
12476
12486
  case 'Equal':
12477
- orCondition = Condition.attribute(index).eq(val);
12487
+ orCondition = Condition.attribute(idx).eq(val);
12478
12488
  break;
12479
12489
  case 'Not Equal':
12480
- orCondition = Condition.attribute(index).dif(val);
12490
+ orCondition = Condition.attribute(idx).dif(val);
12481
12491
  break;
12482
12492
  case 'Not Contains':
12483
- orCondition = !Condition.attribute(index).regexp(new RegExp(`^(?!.*${val}).*$`));
12493
+ orCondition = !Condition.attribute(idx).regexp(new RegExp(`^(?!.*${val}).*$`));
12484
12494
  break;
12485
12495
  case 'Contains':
12486
- orCondition = Condition.attribute(index).regexp(val);
12496
+ orCondition = Condition.attribute(idx).regexp(val);
12487
12497
  break;
12488
12498
  case 'Greater Than':
12489
- orCondition = Condition.attribute(index).gte(val);
12499
+ orCondition = Condition.attribute(idx).gte(val);
12490
12500
  break;
12491
12501
  case 'Less Than':
12492
- orCondition = Condition.attribute(index).lte(val);
12502
+ orCondition = Condition.attribute(idx).lte(val);
12493
12503
  break;
12494
12504
  }
12495
12505
  _condition = (!_condition ? orCondition : _condition.and(orCondition));
@@ -13792,6 +13802,17 @@ let FileUploadComponent = class FileUploadComponent extends NgxFormFieldDirectiv
13792
13802
  this.files = [validFiles[0]];
13793
13803
  }
13794
13804
  if (this.files.length) {
13805
+ this.files = this.files.sort((a, b) => {
13806
+ const aIsImage = a?.['type'].includes('image');
13807
+ const bIsImage = b?.['type'].includes('image');
13808
+ if (aIsImage && !bIsImage) {
13809
+ return 1;
13810
+ }
13811
+ if (!aIsImage && bIsImage) {
13812
+ return -1;
13813
+ }
13814
+ return 0;
13815
+ });
13795
13816
  this.setValue(await this.parseValue());
13796
13817
  }
13797
13818
  await this.getPreview();
@@ -15028,7 +15049,7 @@ let TableComponent = class TableComponent extends ListComponent {
15028
15049
  const value = model[prop];
15029
15050
  if (value !== undefined) {
15030
15051
  if (isValidDate$1(value)) {
15031
- entry.value = `${formatDate$1(dateFromString$1(value))}`;
15052
+ entry.value = `${formatDate(dateFromString(value))}`;
15032
15053
  }
15033
15054
  else {
15034
15055
  entry.value = value;
@@ -15334,5 +15355,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
15334
15355
  * Generated bundle index. Do not edit.
15335
15356
  */
15336
15357
 
15337
- export { ActionRoles, AngularEngineKeys, BaseComponentProps, CPTKN, CardComponent, ComponentRendererComponent, ComponentsTagNames, CrudFieldComponent, CrudFormComponent, CssClasses, DB_ADAPTER_FLAVOUR_TOKEN, DB_ADAPTER_PROVIDER_TOKEN, DecafFakerRepository, DecafTooltipDirective, DecafTranslatePipe, DecafTruncatePipe, DefaultFormReactiveOptions, DefaultListEmptyOptions, DefaultModalOptions, Dynamic, DynamicModule, EmptyStateComponent, FieldsetComponent, FileUploadComponent, FilterComponent, ForAngularCommonModule, ForAngularComponentsModule, I18N_CONFIG_TOKEN, I18nLoader, I18nLoaderFactory, I18nParser, IconComponent, LOCALE_ROOT_TOKEN, LayoutComponent, ListComponent, ListComponentsTypes, ListItemComponent, ListItemPositions, ModalComponent, ModalConfirmComponent, ModelRendererComponent, NgxComponentDirective, NgxEventHandler, NgxFormDirective, NgxFormFieldDirective, NgxFormService, NgxMediaService, NgxModelPageDirective, NgxPageDirective, NgxParentComponentDirective, NgxRenderingEngine, NgxRouterService, NgxSvgDirective, PaginationComponent, RouteDirections, SearchbarComponent, SelectFieldInterfaces, SteppedFormComponent, TableComponent, WindowColorSchemes, cleanSpaces, dataMapper, dateFromString, decafPageTransition, filterString, formatDate, generateRandomValue, getDbAdapterFlavour, getFakerData, getInjectablesRegistry, getLocaleContext, getLocaleContextByKey, getLocaleFromClassName, getLocaleLanguage, getLogger, getMenuIcon, getModelAndRepository, getNgxInlineModal, getNgxModalComponent, getNgxModalCrudComponent, getNgxSelectOptionsModal, getOnWindow, getOnWindowDocument, getWindow, getWindowDocument, getWindowWidth, isDarkMode, isDevelopmentMode, isNotUndefined, isValidBase64, isValidDate, itemMapper, patternValidators, presentModalConfirm, presentNgxInlineModal, presentNgxLightBoxModal, provideDecafDarkMode, provideDecafDbAdapter, provideDecafDynamicComponents, provideDecafI18nConfig, provideDecafI18nLoader, provideDecafPageTransition, removeFocusTrap, setOnWindow, stringToBoolean, windowEventEmitter };
15358
+ export { ActionRoles, AngularEngineKeys, BaseComponentProps, CPTKN, CardComponent, ComponentRendererComponent, ComponentsTagNames, CrudFieldComponent, CrudFormComponent, CssClasses, DB_ADAPTER_FLAVOUR_TOKEN, DB_ADAPTER_PROVIDER_TOKEN, DecafFakerRepository, DecafTooltipDirective, DecafTranslatePipe, DecafTruncatePipe, DefaultFormButtonsOptions, DefaultListEmptyOptions, DefaultModalOptions, Dynamic, DynamicModule, EmptyStateComponent, FieldsetComponent, FileUploadComponent, FilterComponent, ForAngularCommonModule, ForAngularComponentsModule, I18N_CONFIG_TOKEN, I18nLoader, I18nLoaderFactory, I18nParser, IconComponent, LOCALE_ROOT_TOKEN, LayoutComponent, ListComponent, ListComponentsTypes, ListItemComponent, ListItemPositions, ModalComponent, ModalConfirmComponent, ModelRendererComponent, NgxComponentDirective, NgxEventHandler, NgxFormDirective, NgxFormFieldDirective, NgxFormService, NgxMediaService, NgxModelPageDirective, NgxPageDirective, NgxParentComponentDirective, NgxRenderingEngine, NgxRouterService, NgxSvgDirective, PaginationComponent, RouteDirections, SearchbarComponent, SelectFieldInterfaces, SteppedFormComponent, TableComponent, WindowColorSchemes, cleanSpaces, dataMapper, dateFromString, decafPageTransition, filterString, formatDate, generateRandomValue, getDbAdapterFlavour, getFakerData, getInjectablesRegistry, getLocaleContext, getLocaleContextByKey, getLocaleFromClassName, getLocaleLanguage, getLogger, getMenuIcon, getModelAndRepository, getNgxInlineModal, getNgxModalComponent, getNgxModalCrudComponent, getNgxSelectOptionsModal, getOnWindow, getOnWindowDocument, getWindow, getWindowDocument, getWindowWidth, isDarkMode, isDevelopmentMode, isNotUndefined, isValidBase64, isValidDate, itemMapper, patternValidators, presentModalConfirm, presentNgxInlineModal, presentNgxLightBoxModal, provideDecafDarkMode, provideDecafDbAdapter, provideDecafDynamicComponents, provideDecafI18nConfig, provideDecafI18nLoader, provideDecafPageTransition, removeFocusTrap, setOnWindow, stringToBoolean, windowEventEmitter };
15338
15359
  //# sourceMappingURL=decaf-ts-for-angular.mjs.map