@dogiloki/artha-js 1.2.0 → 1.3.0

package/dist/artha.min.css

@@ -1 +1 @@
-artha-message{width:100%;padding:10px;text-align:left;font-size:1em;cursor:default}artha-message[type=error]{background-color:#f2dede;color:#b94a48}artha-message[type=success]{background-color:#dff0d8;color:#468847}artha-message[type=warning]{background-color:#fcf8e3;color:#c09853}artha-message[type=info]{background-color:#d9edf7;color:#3a87ad}artha-loader{display:inline-flex;flex-direction:column;align-items:center}artha-loader .loader-content{display:flex;justify-content:center;align-items:center;gap:10px}artha-loader[type=dots] .loader-content>div{width:10px;height:10px;background-color:#3b82f6;border-radius:50%;animation:dot 1.2s infinite ease-in-out}artha-loader[type=dots] .loader-content>div:nth-of-type(1){animation-delay:0s}artha-loader[type=dots] .loader-content>div:nth-of-type(2){animation-delay:.2s}artha-loader[type=dots] .loader-content>div:nth-of-type(3){animation-delay:.4s}artha-loader[type=ring] .loader-content>div{width:32px;height:32px;border:3px solid #93c5fd;border-top-color:#3b82f6;border-radius:50%;animation:ring .8s linear infinite}artha-loader span{font-size:1rem;color:#5b6e8c}@keyframes dot{0%,100%{transform:scale(0.8);opacity:.4}50%{transform:scale(1.2);opacity:1}}@keyframes ring{to{transform:rotate(360deg)}}/*# sourceMappingURL=artha.min.css.map */
+.icon{width:1.2rem;height:1.2rem;display:inline-block;vertical-align:middle;background-color:#000;mask-repeat:no-repeat;mask-position:center;mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;-webkit-mask-size:contain}.icon.search{mask-image:url("./assets/icons/search.svg");-webkit-mask-image:url("./assets/icons/search.svg")}artha-message{width:100%;padding:10px;text-align:left;font-size:1em;cursor:default}artha-message[type=error]{background-color:#f2dede;color:#b94a48}artha-message[type=success]{background-color:#dff0d8;color:#468847}artha-message[type=warning]{background-color:#fcf8e3;color:#c09853}artha-message[type=info]{background-color:#d9edf7;color:#3a87ad}artha-loader{display:inline-flex;flex-direction:column;align-items:center}artha-loader .loader-content{display:flex;justify-content:center;align-items:center;gap:10px}artha-loader[type=dots] .loader-content>div{width:10px;height:10px;background-color:#3b82f6;border-radius:50%;animation:dot 1.2s infinite ease-in-out}artha-loader[type=dots] .loader-content>div:nth-of-type(1){animation-delay:0s}artha-loader[type=dots] .loader-content>div:nth-of-type(2){animation-delay:.2s}artha-loader[type=dots] .loader-content>div:nth-of-type(3){animation-delay:.4s}artha-loader[type=ring] .loader-content>div{width:32px;height:32px;border:3px solid #93c5fd;border-top-color:#3b82f6;border-radius:50%;animation:ring .8s linear infinite}artha-loader span{font-size:1rem;color:#5b6e8c}@keyframes dot{0%,100%{transform:scale(0.8);opacity:.4}50%{transform:scale(1.2);opacity:1}}@keyframes ring{to{transform:rotate(360deg)}}/*# sourceMappingURL=artha.min.css.map */

package/dist/artha.min.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../src/scss/message.scss","../src/scss/colors.scss","../src/scss/loader.scss"],"names":[],"mappings":"AAEA,cACI,WACA,aACA,gBACA,cACA,eAEA,0BACI,iBCLqB,QDMrB,MCVe,QDYnB,4BACI,iBCRuB,QDSvB,MCbiB,QDerB,4BACI,iBCXuB,QDYvB,MChBiB,QDkBrB,yBACI,iBCdoB,QDepB,MCnBc,QCFtB,aACI,oBACA,sBACA,mBAEA,6BACI,aACA,uBACA,mBACA,SAKI,4CACI,WACA,YACA,iBDTO,QCUP,kBACA,wCAEA,2DACI,mBAEJ,2DACI,oBAEJ,2DACI,oBAQR,4CACI,WACA,YACA,yBACA,iBDhCO,QCiCP,kBACA,mCAIZ,kBACI,eACA,MDtCa,QC0CrB,eACI,QACI,qBACA,WAEJ,IACI,qBACA,WAIR,gBACI,GACI","file":"artha.min.css"}
+{"version":3,"sourceRoot":"","sources":["../src/scss/icons.scss","../src/scss/colors.scss","../src/scss/message.scss","../src/scss/loader.scss"],"names":[],"mappings":"AAEA,MACI,aACA,cACA,qBACA,sBACA,iBCFK,KDGL,sBACA,qBACA,kBACA,8BACA,6BACA,0BAEA,aACI,4CACA,oDEfR,cACI,WACA,aACA,gBACA,cACA,eAEA,0BACI,iBDcqB,QCbrB,MDSe,QCPnB,4BACI,iBDWuB,QCVvB,MDMiB,QCJrB,4BACI,iBDQuB,QCPvB,MDGiB,QCDrB,yBACI,iBDKoB,QCJpB,cCrBR,aACI,oBACA,sBACA,mBAEA,6BACI,aACA,uBACA,mBACA,SAKI,4CACI,WACA,YACA,iBFWO,QEVP,kBACA,wCAEA,2DACI,mBAEJ,2DACI,oBAEJ,2DACI,oBAQR,4CACI,WACA,YACA,yBACA,iBFZO,QEaP,kBACA,mCAIZ,kBACI,eACA,MFlBa,QEsBrB,eACI,QACI,qBACA,WAEJ,IACI,qBACA,WAIR,gBACI,GACI","file":"artha.min.css"}

package/dist/artha.min.js

@@ -6,6 +6,7 @@ import ArthaMessage from '../src/components/artha-message.js';
 import ArthaLoader from '../src/components/artha-loader.js';
 import ArthaContainer from '../src/components/artha-container.js';
 import ArthaForm from '../src/components/artha-form.js';
+import InputSearch from '../src/components/input-search.js';
 
 export {
     Util,
@@ -15,7 +16,8 @@ export {
     ArthaMessage,
     ArthaLoader,
     ArthaContainer,
-    ArthaForm
+    ArthaForm,
+    InputSearch
 };
 
 Promise.resolve().then(()=>{
@@ -37,4 +39,7 @@ function registerComponents(){
     if(!customElements.get('artha-loader')){
         customElements.define('artha-loader',ArthaLoader);
     }
+    if(!customElements.get('input-search')){
+        customElements.define('input-search',InputSearch);
+    }
 }

package/dist/assets/icons/refresh.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M482-160q-134 0-228-93t-94-227v-7l-64 64-56-56 160-160 160 160-56 56-64-64v7q0 100 70.5 170T482-240q26 0 51-6t49-18l60 60q-38 22-78 33t-82 11Zm278-161L600-481l56-56 64 64v-7q0-100-70.5-170T478-720q-26 0-51 6t-49 18l-60-60q38-22 78-33t82-11q134 0 228 93t94 227v7l64-64 56 56-160 160Z"/></svg>

package/dist/assets/icons/search.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dogiloki/artha-js",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "",
   "main": "dist/artha.min.js",
   "type": "module",

package/src/abstract/BaseComponent.js

@@ -16,12 +16,15 @@ export default class BaseComponent extends HTMLElement{
         this._updating=false;
         // Mapeo de atributos
         this._props=[];
+        // Mapeo de propiedade no reflejadas como atributos
+        this._memory={};
         // Mapeo para indicar comportamiento especiales en el mapeo de atributos
         this._special_props={
             booleans:[], // Propiedades booleanas
             element_refs:[], // Propiedades de referencian elementos por ID
             defaults:{}, // Propiedades con valor por defecto
-            resolvers:{} // Propiedades con un callback
+            resolvers:{}, // Propiedades con un callback
+            reflect:{} // Guardar en memoria y no llamar a setAttribute y getAttribute
         };
         this.configureProperties(props,options);
     }
@@ -43,12 +46,13 @@ export default class BaseComponent extends HTMLElement{
 
     attributeChangedCallback(name,old_value,new_value){
         if(old_value===new_value) return;
-        if(this._props.includes(name)){
-            this._triggerUpdate(name,this._getPropertyValue(name));
+        const attr=this._valueToAttr(name);
+        if(this._props.includes(attr)){
+            this._triggerUpdate(attr,this._getPropertyValue(attr));
         }
-        this.onAttributeChanged(name,old_value,new_value);
+        this.onAttributeChanged(attr,old_value,new_value);
     }
-    onAttributeChanged(name,old_value,new_value){}
+    onAttributeChanged(prop,old_value,new_value){}
 
     configureProperties(props,options={}){
         if(props==null) return;
@@ -57,11 +61,40 @@ export default class BaseComponent extends HTMLElement{
             booleans:options.booleans||[],
             element_refs:options.element_refs||[],
             defaults:options.defaults||{},
-            resolvers:options.resolvers||{}
+            resolvers:options.resolvers||{},
+            reflect:options.reflect||{}
         };
         this._setupProperties();
     }
 
+    _isReflected(prop){
+        return this._special_props.reflect[prop]!==false;
+    }
+
+    _getAttribute(attr){
+        return this.getAttribute(this._valueToAttr(attr));
+    }
+
+    _setAttribute(attr,value){
+        return this.setAttribute(this._valueToAttr(attr),value);
+    }
+
+    _removeAttribute(attr){
+        return this.removeAttribute(this._valueToAttr(attr));
+    }
+
+    _hasAttribute(attr){
+        return this.hasAttribute(this._valueToAttr(attr));
+    }
+
+    _valueToAttr(value){
+        return value.replace(/_/g,'-');
+    }
+
+    _attrToValue(value){
+        return value.replace(/-/g,'_');
+    }
+
     _setupProperties(){
         this._props.forEach((prop)=>{
             Object.defineProperty(this,prop,{
@@ -76,10 +109,22 @@ export default class BaseComponent extends HTMLElement{
     }
 
     _getPropertyValue(prop){
+        // Propiedades que son se refleja como atributos
+        if(!this._isReflected(prop)){
+            if(prop in this._memory){
+                return this._memory[prop];
+            }
+            if(this._special_props.defaults[prop]!==undefined){
+                return this._special_props.defaults[prop];
+            }
+            return null;
+        }
         // Propiedade que referencia un elemento por ID
         if(this._special_props.element_refs.includes(prop)){
-            const element_id=this.getAttribute(prop);
-            if(!element_id) return null;
+            const element_id=this._getAttribute(prop);
+            if(!element_id){
+                return this._elements[prop]??null;
+            }
             // Cache para evitar múltiples búsquedas en el DOM
             if(!this._elements[prop] || this._elements[prop].id!==element_id){
                 this._elements[prop]=document.getElementById(element_id);
@@ -88,15 +133,15 @@ export default class BaseComponent extends HTMLElement{
         }
         // Propiedades con callback
         if(this._special_props.resolvers[prop]){
-            const raw_value=this.getAttribute(prop);
+            const raw_value=this._getAttribute(prop);
             return this._special_props.resolvers[prop].get(raw_value,this);
         }
         // Propiedad booleana
         if(this._special_props.booleans.includes(prop)){
-            return this.hasAttribute(prop) && this.getAttribute(prop)!=='false';
+            return this._hasAttribute(prop) && this._getAttribute(prop)!=='false';
         }
         // Propiedad con valor por defecto
-        const value=this.getAttribute(prop);
+        const value=this._getAttribute(prop);
         if(value===null && this._special_props.defaults[prop]!==undefined){
             return this._special_props.defaults[prop];
         }
@@ -105,7 +150,13 @@ export default class BaseComponent extends HTMLElement{
 
     _setPropertyValue(prop,value){
         if(this._updating) return;
-        const current_value=this.getAttribute(prop);
+        // Propiedades que son se refleja como atributos
+        if(this._isReflected(prop)===false){
+            this._memory[prop]=value;
+            this._triggerUpdate(prop,value);
+            return;
+        }
+        const current_value=this._getAttribute(prop);
         let new_value=value;
         // Convertir a string para atributos
         if(value===null || value===undefined){
@@ -126,9 +177,9 @@ export default class BaseComponent extends HTMLElement{
         // Solo actualizar si cambió
         if(current_value!==new_value){
             if(new_value===null){
-                this.removeAttribute(prop);
+                this._removeAttribute(prop);
             }else{
-                this.setAttribute(prop,new_value);
+                this._setAttribute(prop,new_value);
             }
             this._triggerUpdate(prop,value);
         }
@@ -136,7 +187,13 @@ export default class BaseComponent extends HTMLElement{
 
     _initializeProperties(){
         this._props.forEach((prop)=>{
-            const attrib_value=this.getAttribute(prop);
+            if(this._isReflected(prop)===false){
+                if(this._special_props.defaults[prop]!==undefined){
+                    this._memory[prop]=this._special_props.defaults[prop];
+                }
+                return;
+            }
+            const attrib_value=this._getAttribute(prop);
             if(attrib_value!==null){
                 this[prop]=this._getPropertyValue(prop);
             }else if(this._special_props.defaults[prop]!==undefined){

package/src/components/artha-container.js

@@ -3,20 +3,29 @@ import Util from '../core/Util.js';
 import EventBus from '../core/EventBus.js';
 import XHR from '../core/XHR.js';
 import TaskQueue from '../core/TaskQueue.js';
-import ArthaMessage from './artha-message.js';
 
 export default class ArthaContainer extends BaseComponent{
 
+    static defaults={
+        method:'GET',
+        pagination:10,
+        page:1,
+        response_type:'json'
+    };
+
     constructor(){
         super(
-            ["template","action","action_router","method",
-            "pagination","message","searcher","selectable","multiple"],
+            ["template","action","action_router","method","page","search",
+            "pagination","message","searcher","selectable","multiple","response_type"],
             {
                 booleans:['searcher','selectable','multiple'],
-                element_refs:['template','mesage'],
+                element_refs:['template','message'],
                 defaults:{
-                    method:'GET',
-                    pagination:10
+                    response_type:ArthaContainer.defaults.response_type
+                },
+                reflect:{
+                    search:false,
+                    response_type:false
                 }
             }
         );
@@ -26,26 +35,40 @@ export default class ArthaContainer extends BaseComponent{
         this.onRenderItemIter=(element,data,iter_element,iter_data)=>{};
 
         this.task_queue=TaskQueue.singleton();
+        this._current_xhr=null;
         this.items={};
         this.selection_store=new SelectionStore();
-        this.response_type='json';
         this.message??=this.querySelector('artha-message')??this.querySelector(this.getAttribute('message-target'))??null;
         this.id=this.getAttribute('id')??'container-'+BaseComponent.counter;
+        if(this.hasPagination()){
+            this.pagination=this.pagination||ArthaContainer.defaults.pagination;
+            this.page=this.page||ArthaContainer.defaults.page;
+        }
+        if(this.hasAction()){
+            this.method=this.method||ArthaContainer.defaults.method;
+        }
 
         // Loader
         this.loader_container=this._createLoader();
 
+        // Input de búsqueda
+        if(this.searcher){
+            this.searcher_input=Util.createElement('input-search');
+            this.appendChild(this.searcher_input);
+            this.searcher_input.addEventListener('search',(evt)=>this._handleSearch(evt));
+            this.searcher_input.addEventListener('cancel-search',(evt)=>this._cancelSearch(evt));
+        }
+
         // Contenido
         this.content=this.querySelector(':scope > dynamic-content') || this.appendChild(document.createElement('dynamic-content'));
         this._content=this.content.children[0];
 
-        // Input de búsqueda
-        this.input_search=this.querySelector("input-search");
-        if(this.input_search){
-            this.input_search.addEventListener('search',(evt)=>this._handleSearch(evt));
-            this.refresh(this.input_search.value);
-        }else{
-            this.refresh();
+        if(this.hasAction()){
+            if(this.searcher){
+                this.refresh(this.searcher_input.value);
+            }else{
+                this.refresh();
+            }
         }
     }
 
@@ -54,16 +77,23 @@ export default class ArthaContainer extends BaseComponent{
     }
 
     _handleSearch(evt){
+        this.page=1;
         if(this.action){
-            this.refresh(evt.detail.query);
+            this.search=evt.detail.query;
+            return this.refresh();
         }else{
             const search=evt.detail.query?.toLowerCase()??'';
-            for(const item of this.items??[]){
+            for(const item of this.items){
                 Util.modal(item,item.textContent.toLowerCase().includes(search));
             }
         }
     }
 
+    _cancelSearch(evt){
+        this._current_xhr?.abort();
+        this._current_xhr=null;
+    }
+
     // value - getter/setter
     get value(){
         if(!this.selectable) return null;
@@ -105,10 +135,20 @@ export default class ArthaContainer extends BaseComponent{
     }
 
     getData(search=null){
+        search??=this.search;
         if(!this.action) return;
-        const query=search?{search}:{};
-        this.task_queue.loadTask(`container-${this.id}`,null,(task)=>{
-            XHR.request({
+        let query={};
+        if(this.hasPagination()){
+            query={
+                pagination:this.pagination,
+                page:this.page
+            };
+        }
+        if(search){
+            query['search']=search;
+        }
+        return this.task_queue.loadTask(`container-${this.id}`,null,(task)=>{
+            this._current_xhr=XHR.request({
                 url:this.action,
                 method:this.method,
                 headers:{
@@ -120,6 +160,7 @@ export default class ArthaContainer extends BaseComponent{
                     this.dispatchEvent(new CustomEvent('load',{detail:xhr}));
                 },
                 onData:(xhr,json)=>{
+                    this._current_xhr=null;
                     // Respuesta procesada en en formato json
                     task.resolve(xhr,()=>{
                         this.dispatchEvent(new CustomEvent('resolve',{detail:json}));
@@ -132,6 +173,11 @@ export default class ArthaContainer extends BaseComponent{
                 onError:(err)=>{
                     this.message?.error(err??"Error de conexión");
                     task.onFinalize();
+                    this._cancelSearch();
+                },
+                onAbort:(err)=>{
+                    task.onFinalize();
+                    this._cancelSearch();
                 }
             });
         },{
@@ -139,14 +185,49 @@ export default class ArthaContainer extends BaseComponent{
         });
     }
 
+    hasAction(){
+        return this.hasAttribute('action');
+    }
+
+    hasPagination(){
+        return this.hasAttribute('pagination');
+    }
+
+    nextPage(){
+        if(!this.hasPagination()) return;
+        this.page+=1;
+        return this.refresh(this.search);
+    }
+
+    prevPage(){
+        if(!this.hasPagination()) return;
+        if(this.page>1){
+            this.page-=1;
+        }
+        return this.refresh(this.search);
+    }
+
+    goToPage(page){
+        page=Number(page);
+        if(!this.hasPagination() || !Number.isInteger(page) || page<1) return;
+        this.page=page;
+        return this.refresh(this.search);
+    }
+
+    resetPagination(refresh=false){
+        this.page=1;
+        if(refresh) return this.refresh(this.search);
+    }
+
     refresh(search=null){
+        search??=this.search;
         this.loader_container.remove();
         if(this.template){
             this.content.innerHTML="";
             if(this._content) this.content.appendChild(this._content);
             this.content.appendChild(this.loader_container);
         }
-        this.getData(search);
+        return this.getData(search);
     }
 
     refreshWithData(data){

package/src/components/artha-form.js

@@ -2,15 +2,26 @@ import BaseComponent from '../abstract/BaseComponent.js';
 import Util from '../core/Util.js';
 import XHR from '../core/XHR.js';
 import TaskQueue from '../core/TaskQueue.js';
-import ArthaMessage from './artha-message.js';
 
 export default class ArthaForm extends BaseComponent{
     
+    static defaults={
+        response_type:'json'
+    };
+
     constructor(){
-        super();
+        super([
+            'action','method','response_type','disable_submit'
+        ],{
+            booleans:['disable_submit'],
+            defaults:{
+                'response_type':ArthaForm.defaults.response_type
+            },
+            reflect:{
+                response_type:false
+            }
+        });
         this.task_queue=TaskQueue.singleton();
-        this.response_type=this.getAttribute('response-type')??'json';
-        this.disable_submit=this.hasAttribute('disable-submit');
         this.message=this.querySelector('artha-message')??this.querySelector(this.getAttribute('message-target'))??null;
         if(!this.message){
             this.message=Util.createElement('artha-message');
@@ -112,13 +123,11 @@ export default class ArthaForm extends BaseComponent{
         this.element_inputs.forEach((element)=>{
             form_data[element.name]=element.type==='checkbox'?(element.checked?1:0):element.value;
         });
-        const action=this.getAttribute('action')??'';
-        const method=this.getAttribute('method')??'GET';
         const id=this.getAttribute('id');
         this.task_queue.loadTask(`form-${id}`,null,(task)=>{
             XHR.request({
-                url:action,
-                method:method,
+                url:this.action,
+                method:this.method,
                 data:form_data,
                 response_type:this.response_type,
                 onLoad:(xhr)=>{

package/src/components/input-search.js

@@ -0,0 +1,104 @@
+import BaseComponent from '../abstract/BaseComponent.js';
+import Util from "../core/Util.js";
+
+export default class InputSearch extends BaseComponent{
+
+    static defaults={
+        delay:300,
+        text:'Búscar',
+        icon:'../dist/assets/icons/search.svg'
+    }
+
+    constructor(){
+        super([
+            'delay','text','value','input','button'
+        ],{
+            element_refs:['input','button'],
+            resolvers:{
+                'value':{
+                    set:(raw)=>{
+                        return this.input.value=raw;
+                    },
+                    get:(raw)=>{
+                        return this.input?.value??null;
+                    }
+                }
+            },
+            defaults:{
+                delay:InputSearch.defaults.delay,
+                text:InputSearch.defaults.text
+            },
+            reflect:{
+                text:false
+            }
+        });
+        this._search_timer=null;
+        this._ensureStructure();
+    }
+
+    _ensureStructure(){
+        this.icon=InputSearch.defaults.icon;
+        this.style.display="flex";
+        this.input=this.appendChild(Util.createElement('input',(input)=>{
+            input.classList.add('input-field');
+            input.type="search";
+            input.placeholder=this.text;
+        }));
+        this.button=this.appendChild(Util.createElement('button',async(button)=>{
+            button.classList.add('button-search');
+            button.appendChild(Util.createElement('span',(span)=>{
+                span.classList.add('icon','search');
+            }));
+        }));
+        this._bindEvents();
+    }
+
+    _bindEvents(){
+        this.input.addEventListener('input',(evt)=>{
+            this._queueSearch();
+        });
+        this.input.addEventListener('keydown',(evt)=>{
+            if(evt.key==='Enter'){
+                evt.preventDefault();
+                this._cancelQueuedSearch();
+                this.search();
+            }
+        });
+        this.button.addEventListener('click',(evt)=>{
+            evt.preventDefault();
+            this._cancelQueuedSearch();
+            this.search();
+        });
+    }
+
+    _queueSearch(){
+        this._cancelQueuedSearch();
+        this._search_timer=setTimeout(()=>{
+            this.search();
+            this._search_timer=null;
+        },Number(this.delay));
+    }
+
+    _cancelQueuedSearch(){
+        this.dispatchEvent(new CustomEvent('cancel-search',{
+            detail:{
+                query:this.value
+            },
+            bubbles:true
+        }));
+        if(this._search_timer){
+            clearTimeout(this._search_timer);
+            this._search_timer=null;
+        }
+    }
+
+    search(){
+        this.dispatchEvent(new CustomEvent('search',{
+            detail:{
+                query:this.value
+            },
+            bubbles:true
+        }));
+    }
+
+}

package/src/core/TaskQueue.js

@@ -153,11 +153,6 @@ class TaskQueueItem{
         this.onFinalize();
     }
 
-    // Cancelar si usa XHR
-    cancel(){
-        if(this.xhr) this.xhr.abort();
-    }
-
     // Resolver manualmente
     resolve(data,callback){
         this.resolve_callback=callback;

package/src/scss/colors.scss

@@ -1,3 +1,22 @@
+// Colores generales
+$primary-color: #06c;
+$secondary-color: #2c3e50;
+$primary-color-hover: #007bff;
+$secondary-color-hover: #2c3e50;
+$black1: #000000;
+$black2: #202020;
+$black3: #404040;
+$black4: #808080;
+$black: $black1;
+$white1: #ffffff;
+$white2: #f5f5f5;
+$white3: #e0e0e0;
+$white4: #bfbfbf;
+$white: $white1;
+$valid-color: #008000;
+$invalid-color: #FF0000;
+$neutral-color: #353535;
+
 // Colores de ventanas de mensajes
 $msg-text-error-color: #b94a48;
 $msg-text-success-color: #468847;
@@ -8,6 +27,16 @@ $msg-background-success-color: #dff0d8;
 $msg-background-warning-color: #fcf8e3;
 $msg-background-info-color: #d9edf7;
 
+// Colores para carga
 $loader-primary-color: #3b82f6;
 $loader-secondary-color: #93c5fd;
-$loader-muted-color: #5b6e8c;
+$loader-muted-color: #5b6e8c;
+
+// Colores para botones
+$add-button-background: #006400;
+$add-button-background-hover: #004b00;
+$edit-button-background: #004080;
+$edit-button-background-hover: #003060;
+$delete-button-background: #8b0000;
+$delete-button-background-hover: #6b0000;
+$disabled-button-background: #dddddd;

package/src/scss/icons.scss

@@ -0,0 +1,20 @@
+@use './colors.scss' as *;
+
+.icon{
+    width: 1.2rem;
+    height: 1.2rem;
+    display: inline-block;
+    vertical-align: middle;
+    background-color: $black;
+    mask-repeat: no-repeat;
+    mask-position: center;
+    mask-size: contain;
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+    -webkit-mask-size: contain;
+
+    &.search{
+        mask-image: url("./assets/icons/search.svg");
+        -webkit-mask-image: url("./assets/icons/search.svg");
+    }
+}

package/src/scss/main.scss

@@ -1,2 +1,3 @@
+@use './icons.scss' as *;
 @use './message.scss' as *;
 @use './loader.scss' as *;