@dile/crud 1.14.0 → 1.14.2

package/components/ajax-change/ajax-change.js

@@ -0,0 +1,2 @@
+import { DileAjaxChange } from "./src/DileAjaxChange.js";
+customElements.define('dile-ajax-change', DileAjaxChange);

package/components/ajax-change/index.js

@@ -0,0 +1 @@
+export { DileAjaxChange } from "./src/DileAjaxChange.js";

package/components/ajax-change/src/DileAjaxChange.js

@@ -0,0 +1,112 @@
+import { LitElement, html, css } from 'lit';
+import '../../ajax/ajax.js';
+import { RequestApiAdapter } from '../../../lib/RequestApiAdapter.js';
+
+export class DileAjaxChange extends LitElement {
+  static styles = [
+    css`
+      :host {
+        display: block;
+      }
+    `
+  ];
+
+  static get properties() {
+    return {
+      value: { type: String },
+      endpoint: { type: String },
+      loading: { type: Boolean },
+      method: { type: String },
+      requestApiAdapter: { type: Object },
+      dataFieldName: { type: String },
+    };
+  }
+
+  constructor() {
+    super();
+    this.requestApiAdapter = new RequestApiAdapter();
+    this.method = 'patch';
+    this.dataFieldName = 'value';
+    this.changeHandler = this.onChange.bind(this);
+    this.slotElement = null;
+  }
+
+  render() {
+    return html`
+      <dile-ajax
+        id="elajax"
+        method="${this.method}"
+        url="${this.endpoint}"
+        @ajax-success="${this.doSuccessAjax}"
+        @ajax-error="${this.doErrorAjax}"
+      ></dile-ajax>
+      <slot name="input"></slot>
+    `;
+  }
+
+  firstUpdated() {
+    const slot = this.shadowRoot.querySelector('slot[name="input"]');
+    if (!slot) {
+      throw new Error('slot with name="input" not found');
+    }
+    
+    this.slotElement = slot;
+    slot.addEventListener('slotchange', () => {
+      this.handleSlotChange();
+    });
+    
+    // Trigger initial slot change
+    this.handleSlotChange();
+  }
+
+  handleSlotChange() {
+    const [element] = this.slotElement.assignedElements({ flatten: true });
+    
+    // Remove listener from previous element if exists
+    if (this.currentElement) {
+      this.currentElement.removeEventListener('change', this.changeHandler);
+    }
+    
+    if (element) {
+      this.currentElement = element;
+      element.addEventListener('change', this.changeHandler);
+    }
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.currentElement) {
+      this.currentElement.removeEventListener('change', this.changeHandler);
+    }
+  }
+
+  onChange(e) {
+    if (!this.loading) {
+      this.loading = true;
+      this.value = e.target.value;
+      let data = {};
+      data[this.dataFieldName] = this.value;
+      let elajax = this.shadowRoot.getElementById('elajax');
+      elajax.data = data;
+      elajax.generateRequest();
+    }
+  }
+
+  doErrorAjax(e) {
+    this.loading = false;
+    this.dispatchEvent(new CustomEvent('ajax-change-error', {
+      detail: e.detail,
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  doSuccessAjax(e) {
+    this.loading = false;
+    this.dispatchEvent(new CustomEvent('ajax-change-success', {
+      detail: e.detail,
+      bubbles: true,
+      composed: true,
+    }));
+  }
+}

package/components/ajax-select-change/ajax-select-change.js

@@ -1,2 +1,2 @@
 import { DileSelectAjaxChange } from "./src/DileSelectAjaxChange.js";
-customElements.define('dile-select-ajax-change', DileSelectAjaxChange);
+customElements.define('dile-ajax-select-change', DileSelectAjaxChange);

package/components/ajax-select-change/src/DileSelectAjaxChange.js

@@ -1,5 +1,4 @@
 import { LitElement, html, css } from 'lit';
-import '@dile/ui/components/select/select.js';
 import '../../ajax/ajax.js';
 import { RequestApiAdapter } from '../../../lib/RequestApiAdapter.js';
 
@@ -29,6 +28,7 @@ export class DileSelectAjaxChange extends LitElement {
     this.method = 'patch';
     this.dataFieldName = 'value';
     this.changeHandler = this.onSelectChange.bind(this);
+    this.slotElement = null;
   }
 
   render() {
@@ -44,23 +44,39 @@ export class DileSelectAjaxChange extends LitElement {
     `;
   }
 
-  get elselect() {
-    return this.querySelector("select");
+  firstUpdated() {
+    const slot = this.shadowRoot.querySelector('slot[name="select"]');
+    if (!slot) {
+      throw new Error('slot with name="select" not found');
+    }
+    
+    this.slotElement = slot;
+    slot.addEventListener('slotchange', () => {
+      this.handleSlotChange();
+    });
+    
+    // Trigger initial slot change
+    this.handleSlotChange();
   }
 
-  connectedCallback() {
-    super.connectedCallback();
-    if (!this.elselect) {
-      throw new Error('Use dile-select-ajax-change with a select element in the slot "select"');
-    } else {
-      this.elselect.addEventListener("change", this.changeHandler);
+  handleSlotChange() {
+    const [element] = this.slotElement.assignedElements({ flatten: true });
+    
+    // Remove listener from previous element if exists
+    if (this.currentElement) {
+      this.currentElement.removeEventListener('change', this.changeHandler);
+    }
+    
+    if (element) {
+      this.currentElement = element;
+      element.addEventListener('change', this.changeHandler);
     }
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
-    if (this.elselect) {
-      this.elselect.removeEventListener("change", this.changeHandler);
+    if (this.currentElement) {
+      this.currentElement.removeEventListener('change', this.changeHandler);
     }
   }
 
@@ -76,11 +92,21 @@ export class DileSelectAjaxChange extends LitElement {
     }
   }
 
-  doErrorAjax() {
+  doErrorAjax(e) {
     this.loading = false;
+    this.dispatchEvent(new CustomEvent('ajax-error', {
+      detail: e.detail,
+      bubbles: true,
+      composed: true,
+    }));
   }
 
-  doSuccessAjax() {
+  doSuccessAjax(e) {
     this.loading = false;
+    this.dispatchEvent(new CustomEvent('ajax-success', {
+      detail: e.detail,
+      bubbles: true,
+      composed: true,
+    }));
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/crud",
-  "version": "1.14.0",
+  "version": "1.14.2",
   "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": "5cc12dde784bca3bf51a8e2cfcd537cafb72123f"
+  "gitHead": "34d14af1dad358ed978b7dcff38710157fdac19a"
 }

package/components/ajax-select-change/index.js

@@ -1 +0,0 @@
-export { DileSelectAjaxChange } from "./src/DileSelectAjaxChange.js";