slicejs-web-framework 1.0.30 → 1.0.32

package/Slice/Slice.js

@@ -11,6 +11,7 @@ export default class Slice {
       this.loggerConfig = sliceConfig.logger;
       this.debuggerConfig = sliceConfig.debugger;
       this.loadingConfig = sliceConfig.loading;
+      this.productionConfig = sliceConfig.production;
    }
 
    async getClass(module) {
@@ -22,6 +23,10 @@ export default class Slice {
       }
    }
 
+   isProduction(){
+      return this.productionConfig.enabled;
+   }
+
    getComponent(componentSliceId) {
       return this.controller.activeComponents.get(componentSliceId);
    }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slicejs-web-framework",
-  "version": "1.0.30",
+  "version": "1.0.32",
   "description": "",
   "engines": {
     "node": ">=20"

package/src/Components/Visual/Button/Button.js

@@ -1,31 +1,48 @@
 export default class Button extends HTMLElement {
+
+   static props = {
+      value: { 
+         type: 'string', 
+         default: 'Button', 
+         required: false 
+      },
+      onClickCallback: { 
+         type: 'function', 
+         default: null 
+      },
+      customColor: { 
+         type: 'object', 
+         default: null 
+      },
+      icon: { 
+         type: 'object', 
+         default: null 
+      }
+   };
+
    constructor(props) {
       super();
       slice.attachTemplate(this);
       this.$value = this.querySelector('.slice_button_value');
       this.$button = this.querySelector('.slice_button');
+      this.$container = this.querySelector('.slice_button_container');
+      
       if (props.onClickCallback) {
          this.onClickCallback = props.onClickCallback;
-         this.querySelector('.slice_button_container').addEventListener(
-            'click',
-            async () => await this.onClickCallback()
-         );
-         //revisar esta verga por si habria q deletear o no
+         this.$container.addEventListener('click', async () => await this.onClickCallback());
       }
 
       slice.controller.setComponentProps(this, props);
-      this.debuggerProps = ['value', 'onClickCallback', 'customColor'];
    }
 
    async init() {
       if (this.icon) {
          this.$icon = await slice.build('Icon', {
             name: this.icon,
-            size: '25px',
-            color: 'var(--primary-color-contrast)',
-            // iconStyle: this._icon.iconStyle,
+            size: '20px',
+            color: 'currentColor',
          });
-         this.$button.appendChild(this.$icon);
+         this.$button.insertBefore(this.$icon, this.$value);
       }
    }
 
@@ -55,16 +72,22 @@ export default class Button extends HTMLElement {
 
    set customColor(value) {
       this._customColor = value;
+      if (!value) return;
+
+      // Mantener la misma API: { button: 'color', label: 'color' }
       if (value.button) {
-         this.style = `--primary-color: ${value.button};`;
+         this.$button.style.backgroundColor = value.button;
+         this.$button.style.borderColor = value.button;
       }
       if (value.label) {
-         this.$button.style = `--primary-color-contrast: ${value.label};`;
+         this.$button.style.color = value.label;
+         this.$value.style.color = value.label;
+         // También aplicar al icono si existe
+         if (this.$icon) {
+            this.$icon.style.color = value.label;
+         }
       }
    }
-
-   handleButtonClick() {
-      this.onClickCallback();
-   }
 }
-window.customElements.define('slice-button', Button);
+
+customElements.define('slice-button', Button);