@dile/crud 0.0.55 → 0.0.56

package/components/ajax-form/src/DileAjaxForm.js

@@ -35,6 +35,7 @@ export class DileAjaxForm extends DileI18nMixin(LitElement) {
             :host([inline]) section {
                 display: flex;
                 align-items: center;
+                gap: var(--inline-gap, 1rem);
             }
             :host([inline]) dile-inline-feedback {
                 display: none;
@@ -42,6 +43,12 @@ export class DileAjaxForm extends DileI18nMixin(LitElement) {
             :host([hidefeedback]) dile-inline-feedback {
                 display: none;
             }
+            .actionIcon {
+                --dile-icon-color: var(--action-icon-color, var(--dile-primary-color, #674cdc));
+            }
+            .cancelIcon {
+                --dile-icon-color: var(--cancel-icon-color, #d74c3c);
+            }
         `
     ];
 
@@ -60,6 +67,9 @@ export class DileAjaxForm extends DileI18nMixin(LitElement) {
         responseAdapter: { type: Object },
         sendDataAsFormData: { type: Boolean },
         showCancelButton: { type: Boolean },
+        inline: { type: Boolean, reflect: true },
+        actionIcon: { type: Object },
+        cancelIcon: { type: Object },
       };
     }
 
@@ -108,14 +118,29 @@ export class DileAjaxForm extends DileI18nMixin(LitElement) {
         return html`
             ${this.ajaxComponents}
             <section>
-            <slot></slot>
+                <slot></slot>
+                ${this.inline ? this.actionsTemplate : ''}
+            </section>
             <dile-inline-feedback id="feedback"></dile-inline-feedback>
+            ${this.inline ? '' : this.actionsTemplate}
+        `;
+    }
+
+    get actionsTemplate() {
+        return html`
             <div class="actions">
-                <dile-button @click=${this.doAction}>${this.actionLabelComputed(this.actionLabel, this.translations, this.operation)}</dile-button>
-                ${this.showCancelButton ? html`<dile-button class="cancel_button" @click=${this.doCancel}>${this.translations.cancel_label}</dile-button>` : ''}
+                ${this.actionIcon 
+                    ? html`<a href="#" @click=${this.doAction}><dile-icon .icon=${this.actionIcon} class="actionIcon"></dile-icon></a>`
+                    : html`<dile-button @click=${this.doAction}>${this.actionLabelComputed(this.actionLabel, this.translations, this.operation)}</dile-button>`
+                }
+                ${this.showCancelButton ? 
+                    this.cancelIcon 
+                        ? html`<a href="#" @click=${this.doCancel}><dile-icon @click=${this.doAction} .icon=${this.cancelIcon} class="cancelIcon"></dile-icon></a>`
+                        : html`<dile-button class="cancel_button" @click=${this.doCancel}>${this.translations.cancel_label}</dile-button>`
+                    : ''
+                }
             </div> 
-            </section>
-        `;
+        `
     }
 
     get ajaxComponents() {
@@ -148,7 +173,8 @@ export class DileAjaxForm extends DileI18nMixin(LitElement) {
         }
     }
 
-    doAction() {
+    doAction(e) {
+        e.preventDefault();
         this.feedback.clear();
         this.ajaxsave.data = this.form.getData();
         this.ajaxsave.generateRequest();
@@ -266,7 +292,8 @@ export class DileAjaxForm extends DileI18nMixin(LitElement) {
         return this.translations.error_operation(this.operation);
     }
 
-    doCancel() {
+    doCancel(e) {
+        e.preventDefault();
         this.dispatchEvent(new CustomEvent('form-canceled', {
             bubbles: true,
             composed: true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/crud",
-  "version": "0.0.55",
+  "version": "0.0.56",
   "description": "Components to create a generic crud system based on Web Components and Lit",
   "main": "index.js",
   "scripts": {
@@ -31,5 +31,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "8f71392b64dc49d9049cf98d1087dcb2d841c5df"
+  "gitHead": "995e1cef5db80dad3e967d4a88b26d19ae37d5cc"
 }