slicejs-web-framework 2.3.4 → 2.4.0

package/src/Components/Visual/Button/Button.css

@@ -1,47 +1,47 @@
-.slice_button_container {
-  padding: 10px;
-}
-.slice_button_value {
-  user-select: none;
-  cursor: pointer;
-}
-.slice_button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  overflow: hidden;
-  position: relative;
-  max-width: fit-content;
-  background-color: var(--primary-color);
-  color: var(--primary-color-contrast);
-  border-radius: var(--border-radius-slice);
-  border: var(--slice-border) solid var(--primary-color);
-  font-weight: 800;
-  min-width: 100%;
-  padding: 10px;
-  -webkit-transition-duration: 0.4s; /* Safari */
-  transition-duration: 0.4s;
-}
-.slice_button:after {
-  content: "";
-  width: 100%;
-  height: 100%;
-  border-radius: 100%;
-  background: #ffffff50;
-  position: absolute;
-  display: block;
-  opacity: 0;
-  scale: 10;
-  transition: all 1s;
-}
-.slice_button:active {
-  transform: translateY(5px);
-}
-.slice_button:active:after {
-  scale: 0;
-  padding: 0;
-  margin: 0;
-  opacity: 1;
-  transition: 0s;
-}
+.slice_button_container {
+  padding: 10px;
+}
+.slice_button_value {
+  user-select: none;
+  cursor: pointer;
+}
+.slice_button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  overflow: hidden;
+  position: relative;
+  max-width: fit-content;
+  background-color: var(--primary-color);
+  color: var(--primary-color-contrast);
+  border-radius: var(--border-radius-slice);
+  border: var(--slice-border) solid var(--primary-color);
+  font-weight: 800;
+  min-width: 100%;
+  padding: 10px;
+  -webkit-transition-duration: 0.4s; /* Safari */
+  transition-duration: 0.4s;
+}
+.slice_button:after {
+  content: "";
+  width: 100%;
+  height: 100%;
+  border-radius: 100%;
+  background: #ffffff50;
+  position: absolute;
+  display: block;
+  opacity: 0;
+  scale: 10;
+  transition: all 1s;
+}
+.slice_button:active {
+  transform: translateY(5px);
+}
+.slice_button:active:after {
+  scale: 0;
+  padding: 0;
+  margin: 0;
+  opacity: 1;
+  transition: 0s;
+}

package/src/Components/Visual/Button/Button.html

@@ -1,5 +1,5 @@
-<div class="slice_button_container">
-  <button class="slice_button">
-    <label class="slice_button_value"></label>
-  </button>
-</div>
+<div class="slice_button_container">
+  <button class="slice_button">
+    <label class="slice_button_value"></label>
+  </button>
+</div>

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

@@ -1,93 +1,93 @@
-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.$container.addEventListener('click', async () => await this.onClickCallback());
-      }
-
-      slice.controller.setComponentProps(this, props);
-   }
-
-   async init() {
-      if (this.icon) {
-         this.$icon = await slice.build('Icon', {
-            name: this.icon,
-            size: '20px',
-            color: 'currentColor',
-         });
-         this.$button.insertBefore(this.$icon, this.$value);
-      }
-   }
-
-   get icon() {
-      return this._icon;
-   }
-
-   set icon(value) {
-      this._icon = value;
-      if (!this.$icon) return;
-      this.$icon.name = value.name;
-      this.$icon.iconStyle = value.iconStyle;
-   }
-
-   get value() {
-      return this._value;
-   }
-
-   set value(value) {
-      this._value = value;
-      this.$value.textContent = value;
-   }
-
-   get customColor() {
-      return this._customColor;
-   }
-
-   set customColor(value) {
-      this._customColor = value;
-      if (!value) return;
-
-      // Mantener la misma API: { button: 'color', label: 'color' }
-      if (value.button) {
-         this.$button.style.backgroundColor = value.button;
-         this.$button.style.borderColor = value.button;
-      }
-      if (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;
-         }
-      }
-   }
-}
-
+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.$container.addEventListener('click', async () => await this.onClickCallback());
+      }
+
+      slice.controller.setComponentProps(this, props);
+   }
+
+   async init() {
+      if (this.icon) {
+         this.$icon = await slice.build('Icon', {
+            name: this.icon,
+            size: '20px',
+            color: 'currentColor',
+         });
+         this.$button.insertBefore(this.$icon, this.$value);
+      }
+   }
+
+   get icon() {
+      return this._icon;
+   }
+
+   set icon(value) {
+      this._icon = value;
+      if (!this.$icon) return;
+      this.$icon.name = value.name;
+      this.$icon.iconStyle = value.iconStyle;
+   }
+
+   get value() {
+      return this._value;
+   }
+
+   set value(value) {
+      this._value = value;
+      this.$value.textContent = value;
+   }
+
+   get customColor() {
+      return this._customColor;
+   }
+
+   set customColor(value) {
+      this._customColor = value;
+      if (!value) return;
+
+      // Mantener la misma API: { button: 'color', label: 'color' }
+      if (value.button) {
+         this.$button.style.backgroundColor = value.button;
+         this.$button.style.borderColor = value.button;
+      }
+      if (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;
+         }
+      }
+   }
+}
+
 customElements.define('slice-button', Button);

package/src/Components/Visual/Card/Card.css

@@ -1,68 +1,68 @@
-.title {
-  font-size: 20px;
-  font-weight: bold;
-  color: var(--font-primary-color);
-  text-align: center;
-}
-
-.slice-card {
-  height: 220px;
-  position: relative;
-  font-family: var(--font-family);
-  background-color: var(--seconday-background-color);
-  border-radius: var(--border-radius-slice);
-  transition: all 300ms;
-}
-
-.slice-card:hover {
-  .card_cover {
-    height: auto;
-    transform: translateY(-70%);
-    box-shadow: 0px 10px 10px #00000050;
-  }
-  .card_info {
-    height: 100%;
-    transform: translateY(20%);
-    box-shadow: 0px -10px 10px #00000050;
-  }
-}
-.card_cover {
-  width: 100%;
-  height: 90%;
-  background: var(--primary-color);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: absolute;
-  z-index: 1;
-  transition: all 400ms ease;
-  border-radius: var(--border-radius-slice);
-}
-
-.card_info {
-  width: 100%;
-  height: 200px;
-  bottom: 0;
-  color: var(--font-secondary-color);
-  background: var(--secondary-background-color);
-  position: absolute;
-  font-size: 20px;
-  transition: all 400ms cubic-bezier(0.5, 0, 0, 1);
-  border-radius: var(--border-radius-slice);
-}
-
-.card_info p {
-  text-align: center;
-  color: var(--font-secondary-color);
-  padding: 0px 20px 20px 20px;
-  font-size: 15px;
-  display: -webkit-box;
-  display: -moz-box;
-  display: box;
-  -webkit-box-orient: vertical;
-  -moz-box-orient: vertical;
-  box-orient: vertical;
-  -webkit-line-clamp: 5;
-  line-clamp: 5;
-  overflow: hidden;
-}
+.title {
+  font-size: 20px;
+  font-weight: bold;
+  color: var(--font-primary-color);
+  text-align: center;
+}
+
+.slice-card {
+  height: 220px;
+  position: relative;
+  font-family: var(--font-family);
+  background-color: var(--seconday-background-color);
+  border-radius: var(--border-radius-slice);
+  transition: all 300ms;
+}
+
+.slice-card:hover {
+  .card_cover {
+    height: auto;
+    transform: translateY(-70%);
+    box-shadow: 0px 10px 10px #00000050;
+  }
+  .card_info {
+    height: 100%;
+    transform: translateY(20%);
+    box-shadow: 0px -10px 10px #00000050;
+  }
+}
+.card_cover {
+  width: 100%;
+  height: 90%;
+  background: var(--primary-color);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  z-index: 1;
+  transition: all 400ms ease;
+  border-radius: var(--border-radius-slice);
+}
+
+.card_info {
+  width: 100%;
+  height: 200px;
+  bottom: 0;
+  color: var(--font-secondary-color);
+  background: var(--secondary-background-color);
+  position: absolute;
+  font-size: 20px;
+  transition: all 400ms cubic-bezier(0.5, 0, 0, 1);
+  border-radius: var(--border-radius-slice);
+}
+
+.card_info p {
+  text-align: center;
+  color: var(--font-secondary-color);
+  padding: 0px 20px 20px 20px;
+  font-size: 15px;
+  display: -webkit-box;
+  display: -moz-box;
+  display: box;
+  -webkit-box-orient: vertical;
+  -moz-box-orient: vertical;
+  box-orient: vertical;
+  -webkit-line-clamp: 5;
+  line-clamp: 5;
+  overflow: hidden;
+}

package/src/Components/Visual/Card/Card.html

@@ -1,7 +1,7 @@
-<div class="slice-card">
-  <div class="card_cover"></div>
-  <div class="card_info">
-    <h1 class="title">Slice Card Title</h1>
-    <p class="text">Slice Card text</p>
-  </div>
-</div>
+<div class="slice-card">
+  <div class="card_cover"></div>
+  <div class="card_info">
+    <h1 class="title">Slice Card Title</h1>
+    <p class="text">Slice Card text</p>
+  </div>
+</div>

package/src/Components/Visual/Card/Card.js

@@ -1,107 +1,107 @@
-export default class Card extends HTMLElement {
-   constructor(props) {
-      super();
-      slice.attachTemplate(this);
-      this.$card = this.querySelector('.slice-card');
-      this.$title = this.querySelector('.title');
-      this.$text = this.querySelector('.text');
-      this.$cover = this.querySelector('.card_cover');
-      slice.controller.setComponentProps(this, props);
-
-      this.$cover.addEventListener('click', () => {
-         this.isOpen = !this.isOpen;
-      });
-
-      this.$card.addEventListener('mouseover', () => {
-         this.$cover.style.backgroundColor = this.$color.icon;
-         this.$icon.color = this.$color.card;
-      });
-      this.$card.addEventListener('mouseout', () => {
-         this.$cover.style.backgroundColor = this.$color.card;
-         this.$icon.color = this.$color.icon;
-      });
-
-      this.debuggerProps = ['title', 'text', 'icon', 'customColor', 'isOpen'];
-   }
-
-   async init() {
-      if (this.isOpen === undefined) {
-         this.isOpen = false;
-      }
-
-      if (!this.customColor) {
-         this.$color = {
-            icon: 'var(--primary-color-contrast)',
-            card: 'var(--primary-color)',
-         };
-      }
-
-      if (!this._icon) {
-         this.icon = { name: 'sliceJs', iconStyle: 'filled' };
-      }
-
-      this.$icon = await slice.build('Icon', {
-         name: this.icon.name,
-         size: '150px',
-         color: this.$color.icon,
-         iconStyle: this._icon.iconStyle,
-      });
-      this.$cover.appendChild(this.$icon);
-   }
-
-   get title() {
-      return this._title;
-   }
-
-   set title(value) {
-      this._title = value;
-      this.$title.textContent = value;
-   }
-
-   get text() {
-      return this._text;
-   }
-
-   set text(value) {
-      this._text = value;
-      this.$text.textContent = value;
-   }
-
-   get icon() {
-      return this._icon;
-   }
-
-   set icon(value) {
-      this._icon = value;
-      if (!this.$icon) return;
-      this.$icon.name = value.name;
-      this.$icon.iconStyle = value.iconStyle;
-   }
-
-   get isOpen() {
-      return this._isOpen;
-   }
-
-   set isOpen(boolean) {
-      this._isOpen = boolean;
-      if (boolean) {
-         this.$cover.style.zIndex = 0;
-      } else {
-         this.$cover.style.zIndex = 1;
-      }
-   }
-
-   get customColor() {
-      return this._customColor;
-   }
-
-   set customColor(value) {
-      this._customColor = value;
-      this.$color = value;
-      if (value.card) {
-         this.$cover.style.backgroundColor = value.card;
-      }
-   }
-}
-
-customElements.define('slice-card', Card);
+export default class Card extends HTMLElement {
+   constructor(props) {
+      super();
+      slice.attachTemplate(this);
+      this.$card = this.querySelector('.slice-card');
+      this.$title = this.querySelector('.title');
+      this.$text = this.querySelector('.text');
+      this.$cover = this.querySelector('.card_cover');
+      slice.controller.setComponentProps(this, props);
+
+      this.$cover.addEventListener('click', () => {
+         this.isOpen = !this.isOpen;
+      });
+
+      this.$card.addEventListener('mouseover', () => {
+         this.$cover.style.backgroundColor = this.$color.icon;
+         this.$icon.color = this.$color.card;
+      });
+      this.$card.addEventListener('mouseout', () => {
+         this.$cover.style.backgroundColor = this.$color.card;
+         this.$icon.color = this.$color.icon;
+      });
+
+      this.debuggerProps = ['title', 'text', 'icon', 'customColor', 'isOpen'];
+   }
+
+   async init() {
+      if (this.isOpen === undefined) {
+         this.isOpen = false;
+      }
+
+      if (!this.customColor) {
+         this.$color = {
+            icon: 'var(--primary-color-contrast)',
+            card: 'var(--primary-color)',
+         };
+      }
+
+      if (!this._icon) {
+         this.icon = { name: 'sliceJs', iconStyle: 'filled' };
+      }
+
+      this.$icon = await slice.build('Icon', {
+         name: this.icon.name,
+         size: '150px',
+         color: this.$color.icon,
+         iconStyle: this._icon.iconStyle,
+      });
+      this.$cover.appendChild(this.$icon);
+   }
+
+   get title() {
+      return this._title;
+   }
+
+   set title(value) {
+      this._title = value;
+      this.$title.textContent = value;
+   }
+
+   get text() {
+      return this._text;
+   }
+
+   set text(value) {
+      this._text = value;
+      this.$text.textContent = value;
+   }
+
+   get icon() {
+      return this._icon;
+   }
+
+   set icon(value) {
+      this._icon = value;
+      if (!this.$icon) return;
+      this.$icon.name = value.name;
+      this.$icon.iconStyle = value.iconStyle;
+   }
+
+   get isOpen() {
+      return this._isOpen;
+   }
+
+   set isOpen(boolean) {
+      this._isOpen = boolean;
+      if (boolean) {
+         this.$cover.style.zIndex = 0;
+      } else {
+         this.$cover.style.zIndex = 1;
+      }
+   }
+
+   get customColor() {
+      return this._customColor;
+   }
+
+   set customColor(value) {
+      this._customColor = value;
+      this.$color = value;
+      if (value.card) {
+         this.$cover.style.backgroundColor = value.card;
+      }
+   }
+}
+
+customElements.define('slice-card', Card);