@dile/crud 0.0.32 → 0.0.33

package/components/detail/src/DileCrudDetail.js

@@ -153,6 +153,7 @@ export class DileCrudDetail extends DileLoading(LitElement) {
   }
 
   doErrorGet(e) {
+    this.loading = false;
     this.dispatchEvent(new CustomEvent('crud-item-detail-load-error', {
       bubbles: true,
       composed: true,

package/components/item-delete/src/DileCrudItemDelete.js

@@ -83,7 +83,15 @@ export class DileCrudItemDelete extends DileI18nMixin(LitElement) {
   }
 
   doSuccessDelete(e) {
-    this.dispatchEvent(new CustomEvent('delete-success', { bubbles: true, composed: true }));
+    let msg = this.computeResponseMessage(e.detail);
+    this.dispatchEvent(new CustomEvent('delete-success', { 
+      bubbles: true, 
+      composed: true,
+      detail: {
+        msg,
+        previousDetail: e.detail,
+      } 
+    }));
   }
   
   doErrorDelete(e) {

package/components/list/src/DileCrudList.js

@@ -1,5 +1,4 @@
 import { LitElement, html, css } from 'lit';
-import { deepMerge } from '../../../lib/deepMerge.js';
 import { DileLoading, loadingStyles } from '../../../lib/DileLoading.js';
 import '@dile/ui/components/button/button.js';
 import '../../ajax/ajax.js'
@@ -8,8 +7,9 @@ import '../../list/crud-list-pagination-links.js';
 import '../crud-list-item.js';
 import '../crud-select-all';
 import '../crud-list-service.js';
+import { DileI18nMixin } from '../../../lib/DileI18nMixin.js';
 
-export class DileCrudList extends DileLoading(LitElement) {
+export class DileCrudList extends DileI18nMixin(DileLoading(LitElement)) {
     static styles = [
         loadingStyles,
         css`
@@ -130,13 +130,14 @@ export class DileCrudList extends DileLoading(LitElement) {
                         pageSize=${this.pageSize}
                         numItems=${this.numItems}
                         ?disablePagination=${this.config.customization?.disablePagination}
+                        language="${this.language}"
                     ></dile-crud-select-all>
                   `
                 }
                 <span>
                     ${this.numItems != undefined 
                         ? html`
-                            ${this.numItems} items in total. ${this.config.customization?.disablePagination ? '' : html`Showing ${this.pageSize} items per page.` }
+                            ${this.numItems} ${this.translations.items_total}. ${this.config.customization?.disablePagination ? '' : this.translations.showing_page_size(this.pageSize) }
                           `
                         : 'Loading...' 
                     }
@@ -157,6 +158,7 @@ export class DileCrudList extends DileLoading(LitElement) {
                 belongsTo=${this.belongsTo}
                 relationId=${this.relationId}
                 @crud-list-get-success=${this.getSuccess}
+                language="${this.language}"
             ></dile-crud-list-service>
             <dile-ajax
                 id="ajaxgetallids"
@@ -164,18 +166,24 @@ export class DileCrudList extends DileLoading(LitElement) {
                 url="${this.allIdsUrl}"
                 @ajax-success="${this.doSuccessGetIds}"
                 @ajax-error="${this.doErrorGet}"
+                language="${this.language}"
             ></dile-ajax>
         `;
     }
     get emptyTemplate() {
         return html`
             <div class="empty">
-                <p>There are no items yet</p>
+                <p>${this.translations.empty_list}</p>
                 ${this.config.customization.disableInsert || this.config.customization?.hideEmptyInsertButton
                     ? ''
-            : html`<p><dile-button @click=${this.dispatchInsertRequest}>${this.config.labels.insertAction}</dile-button></p>`
+                    : html`
+                        <p>
+                            <dile-button @click=${this.dispatchInsertRequest}>
+                                ${this.config.labels.insertAction}
+                            </dile-button>
+                        </p>
+                      `
                 }
-                
             </div>
         `;
     }
@@ -220,6 +228,7 @@ export class DileCrudList extends DileLoading(LitElement) {
                   pageSize="${this.pageSize}"
                   @crud-pagination-prev=${this.goPrev}
                   @crud-pagination-next=${this.goNext}
+                  language="${this.language}"
             ></dile-crud-list-pagination-links>
           `
         }

package/components/list/src/DileCrudListPaginationLinks.js

@@ -1,7 +1,8 @@
 import { LitElement, html, css } from 'lit';
 import '../../ui/crud-pagination-nav-button';
+import { DileI18nMixin } from '../../../lib/DileI18nMixin.js';
 
-export class DileCrudListPaginationLinks extends LitElement {
+export class DileCrudListPaginationLinks extends DileI18nMixin(LitElement) {
   static styles = [
     css`
       :host {
@@ -52,7 +53,7 @@ export class DileCrudListPaginationLinks extends LitElement {
                   ></dile-crud-pagination-nav-button>
               </span>
               <span class="pagination-summary">
-                  Página ${this.paginationData.currentPage} de ${this.numPages(this.numItems, this.pageSize)}
+                  ${this.translations.current_page(this.paginationData.currentPage, this.numPages(this.numItems, this.pageSize))}
               </span>
               <span class="pagination-next">
                   <dile-crud-pagination-nav-button 
@@ -66,7 +67,7 @@ export class DileCrudListPaginationLinks extends LitElement {
     } else {
       return html`
           <div class="pagination-summary-one-page">
-                  Page 1 of 1
+                  ${this.translations.one_page}
           </div>
       `;
     }

package/components/list/src/DileCrudListService.js

@@ -1,6 +1,7 @@
 import { LitElement, html, css } from 'lit';
+import { DileI18nMixin } from '../../../lib/DileI18nMixin.js';
 
-export class DileCrudListService extends LitElement {
+export class DileCrudListService extends DileI18nMixin(LitElement) {
   static styles = [
     css`
       :host {
@@ -44,6 +45,7 @@ export class DileCrudListService extends LitElement {
         url="${this.cleanUrl}"
         @ajax-success="${this.doSuccessGet}"
         @ajax-error="${this.doErrorGet}"
+        language="${this.language}"
       ></dile-ajax>
     `;
   }

package/components/list/src/DileCrudSelectAll.js

@@ -3,8 +3,9 @@ import '@dile/ui/components/button/button-icon.js';
 import { checkboxBlankIcon, arrowDropDownIcon, checkboxCheckedIcon } from '@dile/icons';
 import '@dile/ui/components/icon/icon.js';
 import '@dile/ui/components/menu-overlay/menu-overlay.js';
+import { DileI18nMixin } from '../../../lib/DileI18nMixin.js';
 
-export class DileCrudSelectAll  extends LitElement {
+export class DileCrudSelectAll  extends DileI18nMixin(LitElement) {
 
   static get styles() {
     return css`
@@ -19,6 +20,13 @@ export class DileCrudSelectAll  extends LitElement {
         display: flex;
         align-items: center;
       }
+
+      dile-button-icon div {
+        max-width: 130px;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
       dile-button-icon div {
         margin-right: 0.5rem;
         display: inline-block;
@@ -75,8 +83,8 @@ export class DileCrudSelectAll  extends LitElement {
   render() {
     return html`
       <dile-menu-overlay>
-        <dile-button-icon small .icon="${this.selectIcon(this.mainChecked)}" slot="trigger">
-          <div>Select <span class="desk">all</span></div>
+        <dile-button-icon no-wrap small .icon="${this.selectIcon(this.mainChecked)}" slot="trigger">
+          <div>${this.translations.select} <span class="desk">${this.translations.all}</span></div>
           <dile-icon .icon=${arrowDropDownIcon} class="drop"></dile-icon>
         </dile-button-icon>
         <div slot="content" class="content">
@@ -86,7 +94,7 @@ export class DileCrudSelectAll  extends LitElement {
               <p class="option" @click=${this.checkPageItems}>
                 <dile-icon .icon=${this.selectIcon(this.pageChecked)} class="drop"></dile-icon>
                 <span>
-                  Todos de esta página 
+                  ${this.translations.all_in_page} 
                   (${this.pageSize > this.numItems ? this.numItems : this.pageSize})
                 </span>
               </p>
@@ -95,7 +103,7 @@ export class DileCrudSelectAll  extends LitElement {
           <p class="option" @click=${this.checkAllItems}>
             <dile-icon .icon=${this.selectIcon(this.allChecked)} class="drop"></dile-icon>
             <span>
-              Seleccionar todos 
+              ${this.translations.select_matching}
               (${this.numItems})
             </span>
           </p>

package/lib/DileI18nMixin.js

@@ -11,6 +11,12 @@ export const DileI18nMixin = (superclass) => class extends superclass {
   constructor() {
     super();
     this.language = 'en';
+    this.translations = {
+      success_operation: () => '',
+      error_operation: () => '',
+      showing_page_size: () => '',
+      current_page: () => '',
+    };
   }
 
   async connectedCallback() {

package/lib/i18n/en.js

@@ -16,4 +16,13 @@ export const translations = {
   delete_label: "Delete",
   cancel_label: "Cancel",
   delete_confirm_message: "Are you sure you want to delete this item?",
+  items_total: "items in total",
+  showing_page_size: (pageSize) => `Showing ${pageSize} items per page.`,
+  empty_list: "There are no items yet",
+  one_page: "Page 1 of 1",
+  current_page: (page, numPages) => `Page ${page} of ${numPages}`,
+  select: "Select",
+  all: "all",
+  all_in_page: "All in this page",
+  select_matching: "Select all matching",
 };

package/lib/i18n/es.js

@@ -16,4 +16,14 @@ export const translations = {
   delete_label: "Borrar",
   cancel_label: "Cancelar",
   delete_confirm_message: "¿Estás seguro que quieres borrar este ítem?",
+  items_total: "Elementos en total",
+  showing_page_size: (pageSize) => `Mostrando ${pageSize} elementos por página.`,
+  empty_list: "No tenemos elementos todavía",
+  one_page: "Página 1 de 1",
+  current_page: (page, numPages) => `Página ${page} de ${numPages}`,
+  select: "Seleccionar",
+  all: "todos",
+  all_in_page: "Todos de esta página",
+  select_matching: "Seleccionar coincidentes",
+  
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/crud",
-  "version": "0.0.32",
+  "version": "0.0.33",
   "description": "Components to create a generic crud system based on Web Components and Lit",
   "main": "index.js",
   "scripts": {
@@ -24,12 +24,12 @@
   },
   "homepage": "https://dile-components.polydile.com/",
   "dependencies": {
-    "@dile/ui": "^2.1.16",
+    "@dile/ui": "^2.1.17",
     "axios": "^1.7.2",
     "lit": "^2.7.0 || ^3.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "817f5102c42848615896580e968fc42d8ee21d66"
+  "gitHead": "15a59318f4be16facc3e442c13709fc0c543b57b"
 }