slicejs-web-framework 2.3.4 → 2.4.0

package/src/Components/Visual/Details/Details.html

@@ -1,9 +1,9 @@
-<div class="details_summary">
-   <div class="symbol plus"></div>
-   <span class="details_title"></span>
-</div>
-<div class="details_container">
-   <div class="full_details">
-      <div class="details_text"></div>
-   </div>
-</div>
+<div class="details_summary">
+   <div class="symbol plus"></div>
+   <span class="details_title"></span>
+</div>
+<div class="details_container">
+   <div class="full_details">
+      <div class="details_text"></div>
+   </div>
+</div>

package/src/Components/Visual/Details/Details.js

@@ -1,76 +1,76 @@
-export default class Details extends HTMLElement {
-   constructor(props) {
-      super();
-      slice.attachTemplate(this);
-
-      this.$detailsTitle = this.querySelector('.details_title');
-      this.$detailsText = this.querySelector('.details_text');
-      this.$details = this.querySelector('.full_details');
-      this.$summary = this.querySelector('.details_summary');
-      this.$container = this.querySelector('.details_container'); // Referencia al contenedor
-
-      this.$summary.addEventListener('click', () => {
-         this.toggleDetails();
-      });
-
-      slice.controller.setComponentProps(this, props);
-      this.debuggerProps = ['title', 'text'];
-   }
-
-   toggleDetails() {
-      const isOpen = this.$container.classList.toggle('details_open');
-      const symbol = this.$summary.querySelector('.symbol');
-
-      if (isOpen) {
-         symbol.classList.remove('plus');
-         symbol.classList.add('minus');
-
-         // Obtener la altura total del contenedor
-         const fullHeight = this.$container.scrollHeight + 'px';
-
-         // Establecer la altura para iniciar la animación
-         this.$container.style.height = fullHeight;
-
-         // Después de la transición, ajustar la altura a 'auto'
-         this.$container.addEventListener('transitionend', function onTransitionEnd() {
-            this.style.height = 'auto';
-            this.removeEventListener('transitionend', onTransitionEnd);
-         });
-      } else {
-         symbol.classList.remove('minus');
-         symbol.classList.add('plus');
-
-         // Establecer la altura para iniciar la animación de cierre
-         this.$container.style.height = this.$container.scrollHeight + 'px';
-
-         // Forzar el reflujo para que la transición funcione
-         requestAnimationFrame(() => {
-            this.$container.style.height = '0';
-         });
-      }
-   }
-
-   get title() {
-      return this._title;
-   }
-
-   set title(value) {
-      this._title = value;
-      this.$detailsTitle.textContent = value;
-   }
-
-   get text() {
-      return this._text;
-   }
-
-   set text(value) {
-      this._text = value;
-      this.$detailsText.textContent = value;
-   }
-
-   addDetail(value) {
-      this.$details.appendChild(value);
-   }
-}
-
-customElements.define('slice-details', Details);
+export default class Details extends HTMLElement {
+   constructor(props) {
+      super();
+      slice.attachTemplate(this);
+
+      this.$detailsTitle = this.querySelector('.details_title');
+      this.$detailsText = this.querySelector('.details_text');
+      this.$details = this.querySelector('.full_details');
+      this.$summary = this.querySelector('.details_summary');
+      this.$container = this.querySelector('.details_container'); // Referencia al contenedor
+
+      this.$summary.addEventListener('click', () => {
+         this.toggleDetails();
+      });
+
+      slice.controller.setComponentProps(this, props);
+      this.debuggerProps = ['title', 'text'];
+   }
+
+   toggleDetails() {
+      const isOpen = this.$container.classList.toggle('details_open');
+      const symbol = this.$summary.querySelector('.symbol');
+
+      if (isOpen) {
+         symbol.classList.remove('plus');
+         symbol.classList.add('minus');
+
+         // Obtener la altura total del contenedor
+         const fullHeight = this.$container.scrollHeight + 'px';
+
+         // Establecer la altura para iniciar la animación
+         this.$container.style.height = fullHeight;
+
+         // Después de la transición, ajustar la altura a 'auto'
+         this.$container.addEventListener('transitionend', function onTransitionEnd() {
+            this.style.height = 'auto';
+            this.removeEventListener('transitionend', onTransitionEnd);
+         });
+      } else {
+         symbol.classList.remove('minus');
+         symbol.classList.add('plus');
+
+         // Establecer la altura para iniciar la animación de cierre
+         this.$container.style.height = this.$container.scrollHeight + 'px';
+
+         // Forzar el reflujo para que la transición funcione
+         requestAnimationFrame(() => {
+            this.$container.style.height = '0';
+         });
+      }
+   }
+
+   get title() {
+      return this._title;
+   }
+
+   set title(value) {
+      this._title = value;
+      this.$detailsTitle.textContent = value;
+   }
+
+   get text() {
+      return this._text;
+   }
+
+   set text(value) {
+      this._text = value;
+      this.$detailsText.textContent = value;
+   }
+
+   addDetail(value) {
+      this.$details.appendChild(value);
+   }
+}
+
+customElements.define('slice-details', Details);

package/src/Components/Visual/DropDown/DropDown.css

@@ -1,60 +1,60 @@
-.slice_dropdown_label {
-  cursor: pointer;
-}
-.slice_dropdown {
-  cursor: pointer;
-  user-select: none;
-  display: flex;
-  justify-content: center;
-  display: flex;
-  border-radius: var(--border-radius-slice);
-  border: var(--slice-border) solid var(--primary-color);
-  align-items: center;
-}
-.slice_dropdown .caret {
-  margin-left: 10px;
-  border-top-color: var(--primary-color-contrast);
-}
-.slice_dropbox {
-  display: flex;
-  flex-direction: column;
-  border: var(--slice-border) solid var(--primary-color);
-  list-style: none;
-  font-family: var(--font-family);
-  visibility: hidden;
-  overflow: hidden;
-  position: absolute;
-  opacity: 0;
-  transition: 0s, opacity 0.3s;
-  top: 100%;
-  z-index: 1;
-  background-color: var(--primary-color);
-  border-radius: var(--border-radius-slice);
-  box-shadow: 0 0 10px 0 #00000050;
-}
-.slice_dropbox_open {
-  overflow-y: scroll;
-  min-height: min-content;
-  max-height: 200px;
-  visibility: visible;
-  opacity: 1;
-}
-.slice_dropbox_open::-webkit-scrollbar {
-  width: 5px;
-}
-.slice_dropbox_open::-webkit-scrollbar-thumb {
-  background: var(--secondary-color);
-  border-radius: var(--border-radius-slice);
-}
-.slice_dropbox {
-  width: 100%;
-}
-.slice_dropbox_open div a {
-  text-decoration: none;
-  color: var(--primary-color-contrast);
-  width: 100%;
-}
-.slice_dropbox_open div {
-  width: 100%;
-  padding: 5px;
-}
+.slice_dropdown_label {
+  cursor: pointer;
+}
+.slice_dropdown {
+  cursor: pointer;
+  user-select: none;
+  display: flex;
+  justify-content: center;
+  display: flex;
+  border-radius: var(--border-radius-slice);
+  border: var(--slice-border) solid var(--primary-color);
+  align-items: center;
+}
+.slice_dropdown .caret {
+  margin-left: 10px;
+  border-top-color: var(--primary-color-contrast);
+}
+.slice_dropbox {
+  display: flex;
+  flex-direction: column;
+  border: var(--slice-border) solid var(--primary-color);
+  list-style: none;
+  font-family: var(--font-family);
+  visibility: hidden;
+  overflow: hidden;
+  position: absolute;
+  opacity: 0;
+  transition: 0s, opacity 0.3s;
+  top: 100%;
+  z-index: 1;
+  background-color: var(--primary-color);
+  border-radius: var(--border-radius-slice);
+  box-shadow: 0 0 10px 0 #00000050;
+}
+.slice_dropbox_open {
+  overflow-y: scroll;
+  min-height: min-content;
+  max-height: 200px;
+  visibility: visible;
+  opacity: 1;
+}
+.slice_dropbox_open::-webkit-scrollbar {
+  width: 5px;
+}
+.slice_dropbox_open::-webkit-scrollbar-thumb {
+  background: var(--secondary-color);
+  border-radius: var(--border-radius-slice);
+}
+.slice_dropbox {
+  width: 100%;
+}
+.slice_dropbox_open div a {
+  text-decoration: none;
+  color: var(--primary-color-contrast);
+  width: 100%;
+}
+.slice_dropbox_open div {
+  width: 100%;
+  padding: 5px;
+}

package/src/Components/Visual/DropDown/DropDown.html

@@ -1,5 +1,5 @@
-<div class="slice_dropdown">
-  <label class="slice_dropdown_label"></label>
-  <div class="caret"></div>
-</div>
-<div class="slice_dropbox"></div>
+<div class="slice_dropdown">
+  <label class="slice_dropdown_label"></label>
+  <div class="caret"></div>
+</div>
+<div class="slice_dropbox"></div>

package/src/Components/Visual/DropDown/DropDown.js

@@ -1,63 +1,63 @@
-export default class DropDown extends HTMLElement {
-   constructor(props) {
-      super();
-      slice.attachTemplate(this);
-
-      this.$dropdown = this.querySelector('.slice_dropdown');
-      this.$box = this.querySelector('.slice_dropbox');
-      this.$label = this.querySelector('.slice_dropdown_label');
-      this.$caret = this.querySelector('.caret');
-
-      this.addEventListener('click', () => {
-         this.toggleDrop();
-      });
-
-      this.$box.addEventListener('mouseleave', () => {
-         this.closeDrop();
-      });
-
-      slice.controller.setComponentProps(this, props);
-      this.debuggerProps = ['label', 'dropbox'];
-   }
-
-   init() {}
-
-   get label() {
-      return this._label;
-   }
-
-   set label(value) {
-      this._label;
-      this.$label.textContent = value;
-   }
-
-   get options() {
-      return this._options;
-   }
-
-   set options(values) {
-      this._options = values;
-      values.forEach((element) => {
-         const div = document.createElement('div');
-         const e = document.createElement('a');
-         e.addEventListener('click', () => {
-            this.closeDrop();
-         });
-         e.textContent = element.text;
-         e.href = element.href;
-         div.appendChild(e);
-         this.$box.appendChild(div);
-      });
-   }
-
-   toggleDrop() {
-      this.$box.classList.toggle('slice_dropbox_open');
-      this.$caret.classList.toggle('caret_open');
-   }
-   closeDrop() {
-      this.$box.classList.remove('slice_dropbox_open');
-      this.$caret.classList.remove('caret_open');
-   }
-}
-
-customElements.define('slice-dropdown', DropDown);
+export default class DropDown extends HTMLElement {
+   constructor(props) {
+      super();
+      slice.attachTemplate(this);
+
+      this.$dropdown = this.querySelector('.slice_dropdown');
+      this.$box = this.querySelector('.slice_dropbox');
+      this.$label = this.querySelector('.slice_dropdown_label');
+      this.$caret = this.querySelector('.caret');
+
+      this.addEventListener('click', () => {
+         this.toggleDrop();
+      });
+
+      this.$box.addEventListener('mouseleave', () => {
+         this.closeDrop();
+      });
+
+      slice.controller.setComponentProps(this, props);
+      this.debuggerProps = ['label', 'dropbox'];
+   }
+
+   init() {}
+
+   get label() {
+      return this._label;
+   }
+
+   set label(value) {
+      this._label;
+      this.$label.textContent = value;
+   }
+
+   get options() {
+      return this._options;
+   }
+
+   set options(values) {
+      this._options = values;
+      values.forEach((element) => {
+         const div = document.createElement('div');
+         const e = document.createElement('a');
+         e.addEventListener('click', () => {
+            this.closeDrop();
+         });
+         e.textContent = element.text;
+         e.href = element.href;
+         div.appendChild(e);
+         this.$box.appendChild(div);
+      });
+   }
+
+   toggleDrop() {
+      this.$box.classList.toggle('slice_dropbox_open');
+      this.$caret.classList.toggle('caret_open');
+   }
+   closeDrop() {
+      this.$box.classList.remove('slice_dropbox_open');
+      this.$caret.classList.remove('caret_open');
+   }
+}
+
+customElements.define('slice-dropdown', DropDown);

package/src/Components/Visual/Grid/Grid.css

@@ -1,7 +1,7 @@
-.grid-container {
-  display: grid;
-  grid-template-columns: repeat(1, 1fr);
-  grid-template-rows: repeat(1, 1fr);
-  gap: 10px;
-  margin: 0 auto;
-}
+.grid-container {
+  display: grid;
+  grid-template-columns: repeat(1, 1fr);
+  grid-template-rows: repeat(1, 1fr);
+  gap: 10px;
+  margin: 0 auto;
+}

package/src/Components/Visual/Grid/Grid.html

@@ -1 +1 @@
-<div class="grid-container"></div>
+<div class="grid-container"></div>

package/src/Components/Visual/Grid/Grid.js

@@ -1,57 +1,57 @@
-export default class Grid extends HTMLElement {
-   constructor(props) {
-      super();
-      slice.attachTemplate(this);
-
-      this.$grid = this.querySelector('.grid-container');
-
-      slice.controller.setComponentProps(this, props);
-      this.debuggerProps = ['columns', 'rows'];
-   }
-
-   async init() {
-      if (!this.rows || !this.columns) {
-         throw new Error('Grid cannot be build if rows or columns are not created.');
-      }
-   }
-
-   set columns(value) {
-      this._columns = value;
-      this.$grid.style.gridTemplateColumns = `repeat(${value}, 1fr)`;
-   }
-
-   get columns() {
-      return this._columns;
-   }
-
-   set rows(value) {
-      this.$grid.style.gridTemplateRows = `repeat(${value}, 1fr)`;
-      this._rows = value;
-   }
-
-   get rows() {
-      return this._rows;
-   }
-
-   set items(values) {
-      this.setItems(values);
-      this._items = values;
-   }
-
-   get items() {
-      return this._items;
-   }
-
-   async setItem(item) {
-      item.classList.add('grid-item');
-      this.$grid.appendChild(item);
-   }
-
-   async setItems(items) {
-      for (let i = 0; i < items.length; i++) {
-         this.setItem(items[i]);
-      }
-   }
-}
-
-customElements.define('slice-grid', Grid);
+export default class Grid extends HTMLElement {
+   constructor(props) {
+      super();
+      slice.attachTemplate(this);
+
+      this.$grid = this.querySelector('.grid-container');
+
+      slice.controller.setComponentProps(this, props);
+      this.debuggerProps = ['columns', 'rows'];
+   }
+
+   async init() {
+      if (!this.rows || !this.columns) {
+         throw new Error('Grid cannot be build if rows or columns are not created.');
+      }
+   }
+
+   set columns(value) {
+      this._columns = value;
+      this.$grid.style.gridTemplateColumns = `repeat(${value}, 1fr)`;
+   }
+
+   get columns() {
+      return this._columns;
+   }
+
+   set rows(value) {
+      this.$grid.style.gridTemplateRows = `repeat(${value}, 1fr)`;
+      this._rows = value;
+   }
+
+   get rows() {
+      return this._rows;
+   }
+
+   set items(values) {
+      this.setItems(values);
+      this._items = values;
+   }
+
+   get items() {
+      return this._items;
+   }
+
+   async setItem(item) {
+      item.classList.add('grid-item');
+      this.$grid.appendChild(item);
+   }
+
+   async setItems(items) {
+      for (let i = 0; i < items.length; i++) {
+         this.setItem(items[i]);
+      }
+   }
+}
+
+customElements.define('slice-grid', Grid);