slicejs-web-framework 3.2.3 → 3.3.0

package/src/Components/Visual/Checkbox/Checkbox.css

@@ -1,87 +1,87 @@
-.slice_checkbox input {
-  position: absolute;
-  opacity: 0;
-  cursor: pointer;
-  height: 0;
-  width: 0;
-}
-
-.slice_checkbox_container {
-  width: fit-content;
-}
-.slice_checkbox {
-  display: flex;
-  align-items: center;
-  user-select: none;
-  margin-top: 25px;
-  margin-bottom: 25px;
-  position: relative;
-  user-select: none;
-}
-.checkbox_label {
-  margin: 5px;
-  font-family: var(--font-family);
-  color: var(--font-primary-color);
-}
-.checkmark {
-  position: relative;
-  top: 0;
-  left: 0;
-  height: 1.3em;
-  width: 1.3em;
-  background-color: var(--secondary-background-color);
-  border: var(--slice-border) solid var(--primary-color);
-  transition: all 0.3s;
-  border-radius: var(--border-radius-slice);
-  cursor: pointer;
-}
-.slice_checkbox input:checked ~ .checkmark {
-  border: var(--slice-border) solid var(--success-color);
-  background-color: var(--success-color);
-  animation: pop 0.5s;
-  animation-direction: alternate;
-}
-
-.checkmark:after {
-  content: "";
-  position: absolute;
-  display: none;
-}
-
-.slice_checkbox input:checked ~ .checkmark:after {
-  display: block;
-}
-
-.slice_checkbox .checkmark:after {
-  left: 0.45em;
-  top: 0.25em;
-  width: 0.25em;
-  height: 0.5em;
-  border: solid white;
-  border-width: 0 0.15em 0.15em 0;
-  transform: rotate(45deg);
-}
-.disabled {
-  border-color: var(--disabled-color);
-  background-color: var(--primary-color-shade);
-  color: var(--disabled-color);
-  cursor: not-allowed;
-}
-@keyframes pop {
-  0% {
-    transform: scale(1);
-  }
-
-  50% {
-    transform: scale(0.9);
-  }
-
-  100% {
-    transform: scale(1);
-  }
-}
-.checkbox_label {
-  margin-left: 5px;
-  font-family: var(--font-family);
-  color: var(--font-primary-color);
-}
+.slice_checkbox input {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+}
+
+.slice_checkbox_container {
+  width: fit-content;
+}
+.slice_checkbox {
+  display: flex;
+  align-items: center;
+  user-select: none;
+  margin-top: 25px;
+  margin-bottom: 25px;
+  position: relative;
+  user-select: none;
+}
+.checkbox_label {
+  margin: 5px;
+  font-family: var(--font-family);
+  color: var(--font-primary-color);
+}
+.checkmark {
+  position: relative;
+  top: 0;
+  left: 0;
+  height: 1.3em;
+  width: 1.3em;
+  background-color: var(--secondary-background-color);
+  border: var(--slice-border) solid var(--primary-color);
+  transition: all 0.3s;
+  border-radius: var(--border-radius-slice);
+  cursor: pointer;
+}
+.slice_checkbox input:checked ~ .checkmark {
+  border: var(--slice-border) solid var(--success-color);
+  background-color: var(--success-color);
+  animation: pop 0.5s;
+  animation-direction: alternate;
+}
+
+.checkmark:after {
+  content: "";
+  position: absolute;
+  display: none;
+}
+
+.slice_checkbox input:checked ~ .checkmark:after {
+  display: block;
+}
+
+.slice_checkbox .checkmark:after {
+  left: 0.45em;
+  top: 0.25em;
+  width: 0.25em;
+  height: 0.5em;
+  border: solid white;
+  border-width: 0 0.15em 0.15em 0;
+  transform: rotate(45deg);
+}
+.disabled {
+  border-color: var(--disabled-color);
+  background-color: var(--primary-color-shade);
+  color: var(--disabled-color);
+  cursor: not-allowed;
+}
+@keyframes pop {
+  0% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(0.9);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+.checkbox_label {
+  margin-left: 5px;
+  font-family: var(--font-family);
+  color: var(--font-primary-color);
+}

package/src/Components/Visual/Checkbox/Checkbox.html

@@ -1,8 +1,8 @@
-<div class="slice_checkbox_container">
-  <div class="slice_checkbox">
-    <label>
-      <input type="checkbox" />
-      <div class="checkmark"></div>
-    </label>
-  </div>
-</div>
+<div class="slice_checkbox_container">
+  <div class="slice_checkbox">
+    <label>
+      <input type="checkbox" />
+      <div class="checkmark"></div>
+    </label>
+  </div>
+</div>

package/src/Components/Visual/Checkbox/Checkbox.js

@@ -1,86 +1,86 @@
-export default class Checkbox extends HTMLElement {
-   constructor(props) {
-      super();
-      slice.attachTemplate(this);
-      this.$checkbox = this.querySelector('.slice_checkbox');
-      this.$checkmark = this.querySelector('.checkmark');
-
-      slice.controller.setComponentProps(this, props);
-      this.debuggerProps = ['checked', 'disabled', 'customColor', 'labelPlacement'];
-   }
-
-   init() {
-      if (this._checked === undefined) {
-         this.checked = false;
-      }
-
-      if (!this.disabled) {
-         this._disabled = false;
-      }
-   }
-
-   get checked() {
-      return this._checked;
-   }
-
-   set checked(value) {
-      this._checked = value;
-      this.querySelector('input').checked = value;
-   }
-
-   get label() {
-      return this._label;
-   }
-
-   set label(value) {
-      this._label = value;
-      if (this.querySelector('.checkbox_label')) {
-         this.querySelector('.checkbox_label').textContent = value;
-      } else {
-         const label = document.createElement('label');
-         label.classList.add('checkbox_label');
-         label.textContent = value;
-         this.$checkbox.appendChild(label);
-      }
-   }
-
-   get customColor() {
-      return this._customColor;
-   }
-
-   set customColor(value) {
-      this._customColor = value;
-      this.style = `--success-color: ${value};`;
-   }
-
-   get labelPlacement() {
-      return this._labelPlacement;
-   }
-
-   set labelPlacement(value) {
-      if (value === 'left') {
-         this.$checkbox.style = ` flex-direction: row-reverse;`;
-      }
-      if (value === 'right') {
-         this.$checkbox.style = `flex-direction: row;`;
-      }
-      if (value === 'top') {
-         this.$checkbox.style = `flex-direction: column-reverse;`;
-      }
-      if (value === 'bottom') {
-         this.$checkbox.style = `flex-direction: column;`;
-      }
-   }
-
-   get disabled() {
-      return this._disabled;
-   }
-
-   set disabled(value) {
-      this._disabled = value;
-      this.querySelector('input').disabled = value;
-      this.$checkmark.classList.add('disabled');
-   }
-}
-
-customElements.define('slice-checkbox', Checkbox);
+export default class Checkbox extends HTMLElement {
+   constructor(props) {
+      super();
+      slice.attachTemplate(this);
+      this.$checkbox = this.querySelector('.slice_checkbox');
+      this.$checkmark = this.querySelector('.checkmark');
+
+      slice.controller.setComponentProps(this, props);
+      this.debuggerProps = ['checked', 'disabled', 'customColor', 'labelPlacement'];
+   }
+
+   init() {
+      if (this._checked === undefined) {
+         this.checked = false;
+      }
+
+      if (!this.disabled) {
+         this._disabled = false;
+      }
+   }
+
+   get checked() {
+      return this._checked;
+   }
+
+   set checked(value) {
+      this._checked = value;
+      this.querySelector('input').checked = value;
+   }
+
+   get label() {
+      return this._label;
+   }
+
+   set label(value) {
+      this._label = value;
+      if (this.querySelector('.checkbox_label')) {
+         this.querySelector('.checkbox_label').textContent = value;
+      } else {
+         const label = document.createElement('label');
+         label.classList.add('checkbox_label');
+         label.textContent = value;
+         this.$checkbox.appendChild(label);
+      }
+   }
+
+   get customColor() {
+      return this._customColor;
+   }
+
+   set customColor(value) {
+      this._customColor = value;
+      this.style = `--success-color: ${value};`;
+   }
+
+   get labelPlacement() {
+      return this._labelPlacement;
+   }
+
+   set labelPlacement(value) {
+      if (value === 'left') {
+         this.$checkbox.style = ` flex-direction: row-reverse;`;
+      }
+      if (value === 'right') {
+         this.$checkbox.style = `flex-direction: row;`;
+      }
+      if (value === 'top') {
+         this.$checkbox.style = `flex-direction: column-reverse;`;
+      }
+      if (value === 'bottom') {
+         this.$checkbox.style = `flex-direction: column;`;
+      }
+   }
+
+   get disabled() {
+      return this._disabled;
+   }
+
+   set disabled(value) {
+      this._disabled = value;
+      this.querySelector('input').disabled = value;
+      this.$checkmark.classList.add('disabled');
+   }
+}
+
+customElements.define('slice-checkbox', Checkbox);

package/src/Components/Visual/CodeVisualizer/CodeVisualizer.css

@@ -1,130 +1,130 @@
-slice-codevisualizer {
-  display: block;
-  width: 100%;
-}
-
-.codevisualizer_container {
-  position: relative;
-  font-size: smaller;
-  max-width: 100%;
-  background-color: var(--secondary-background-color);
-  border: 1px solid var(--primary-color);
-  padding: 15px 10px 10px;
-  border-radius: var(--border-radius-slice, 10px);
-  overflow-x: auto;
-  margin: 15px 0;
-}
-
-.codevisualizer pre {
-  margin: 0;
-  padding: 0;
-  font-family: 'Courier New', Courier, monospace;
-  line-height: 1.5;
-  white-space: pre;
-  tab-size: 2;
-}
-
-.codevisualizer code {
-  display: block;
-  color: var(--font-primary-color);
-  overflow-wrap: normal;
-  word-break: normal;
-}
-
-/* Botón de copiar */
-.copy-button {
-  position: absolute;
-  top: 5px;
-  right: 10px;
-  padding: 4px 8px;
-  font-size: 12px;
-  background-color: var(--primary-color);
-  color: var(--primary-color-contrast);
-  border: none;
-  border-radius: var(--border-radius-slice, 4px);
-  cursor: pointer;
-  opacity: 0.7;
-  transition: opacity 0.2s ease, background-color 0.2s ease;
-  z-index: 1;
-}
-
-.copy-button:hover {
-  opacity: 1;
-}
-
-.copy-button.copied {
-  background-color: var(--success-color);
-  color: var(--success-contrast);
-  opacity: 1;
-}
-
-/* Temas para resaltado de sintaxis adaptados a las variables de Slice */
-.codevisualizer .code-keyword {
-  color: var(--primary-color); /* Palabras clave en color primario */
-}
-
-.codevisualizer .code-string {
-  color: var(--success-color); /* Strings en color de éxito */
-}
-
-.codevisualizer .code-number {
-  color: var(--warning-color); /* Números en color de advertencia */
-}
-
-.codevisualizer .code-comment {
-  color: var(--medium-color); /* Comentarios en color medio */
-  font-style: italic;
-}
-
-.codevisualizer .code-function {
-  color: var(--secondary-color); /* Funciones en color secundario */
-}
-
-.codevisualizer .code-method {
-  color: var(--secondary-color); /* Métodos en color secundario */
-}
-
-.codevisualizer .code-builtin {
-  color: var(--secondary-color); /* Objetos integrados en color secundario */
-}
-
-.codevisualizer .code-tag {
-  color: var(--primary-color); /* Tags HTML en color primario */
-}
-
-.codevisualizer .code-attribute {
-  color: var(--warning-color); /* Atributos HTML en color de advertencia */
-}
-
-.codevisualizer .code-selector {
-  color: var(--primary-color); /* Selectores CSS en color primario */
-}
-
-.codevisualizer .code-property {
-  color: var(--secondary-color); /* Propiedades CSS en color secundario */
-}
-
-.codevisualizer .code-value {
-  color: var(--success-color); /* Valores CSS en color de éxito */
-}
-
-.codevisualizer .code-unit {
-  color: var(--warning-color); /* Unidades CSS en color de advertencia */
-}
-
-.codevisualizer .code-color {
-  color: var(--font-primary-color); /* Colores CSS en color primario */
-}
-
-/* Media query para diseño responsivo */
-@media screen and (max-width: 768px) {
-  .codevisualizer_container {
-    font-size: 12px;
-    padding: 25px 8px 8px;
-  }
-  
-  .copy-button {
-    font-size: 10px;
-    padding: 3px 6px;
-  }
+slice-codevisualizer {
+  display: block;
+  width: 100%;
+}
+
+.codevisualizer_container {
+  position: relative;
+  font-size: smaller;
+  max-width: 100%;
+  background-color: var(--secondary-background-color);
+  border: 1px solid var(--primary-color);
+  padding: 15px 10px 10px;
+  border-radius: var(--border-radius-slice, 10px);
+  overflow-x: auto;
+  margin: 15px 0;
+}
+
+.codevisualizer pre {
+  margin: 0;
+  padding: 0;
+  font-family: 'Courier New', Courier, monospace;
+  line-height: 1.5;
+  white-space: pre;
+  tab-size: 2;
+}
+
+.codevisualizer code {
+  display: block;
+  color: var(--font-primary-color);
+  overflow-wrap: normal;
+  word-break: normal;
+}
+
+/* Botón de copiar */
+.copy-button {
+  position: absolute;
+  top: 5px;
+  right: 10px;
+  padding: 4px 8px;
+  font-size: 12px;
+  background-color: var(--primary-color);
+  color: var(--primary-color-contrast);
+  border: none;
+  border-radius: var(--border-radius-slice, 4px);
+  cursor: pointer;
+  opacity: 0.7;
+  transition: opacity 0.2s ease, background-color 0.2s ease;
+  z-index: 1;
+}
+
+.copy-button:hover {
+  opacity: 1;
+}
+
+.copy-button.copied {
+  background-color: var(--success-color);
+  color: var(--success-contrast);
+  opacity: 1;
+}
+
+/* Temas para resaltado de sintaxis adaptados a las variables de Slice */
+.codevisualizer .code-keyword {
+  color: var(--primary-color); /* Palabras clave en color primario */
+}
+
+.codevisualizer .code-string {
+  color: var(--success-color); /* Strings en color de éxito */
+}
+
+.codevisualizer .code-number {
+  color: var(--warning-color); /* Números en color de advertencia */
+}
+
+.codevisualizer .code-comment {
+  color: var(--medium-color); /* Comentarios en color medio */
+  font-style: italic;
+}
+
+.codevisualizer .code-function {
+  color: var(--secondary-color); /* Funciones en color secundario */
+}
+
+.codevisualizer .code-method {
+  color: var(--secondary-color); /* Métodos en color secundario */
+}
+
+.codevisualizer .code-builtin {
+  color: var(--secondary-color); /* Objetos integrados en color secundario */
+}
+
+.codevisualizer .code-tag {
+  color: var(--primary-color); /* Tags HTML en color primario */
+}
+
+.codevisualizer .code-attribute {
+  color: var(--warning-color); /* Atributos HTML en color de advertencia */
+}
+
+.codevisualizer .code-selector {
+  color: var(--primary-color); /* Selectores CSS en color primario */
+}
+
+.codevisualizer .code-property {
+  color: var(--secondary-color); /* Propiedades CSS en color secundario */
+}
+
+.codevisualizer .code-value {
+  color: var(--success-color); /* Valores CSS en color de éxito */
+}
+
+.codevisualizer .code-unit {
+  color: var(--warning-color); /* Unidades CSS en color de advertencia */
+}
+
+.codevisualizer .code-color {
+  color: var(--font-primary-color); /* Colores CSS en color primario */
+}
+
+/* Media query para diseño responsivo */
+@media screen and (max-width: 768px) {
+  .codevisualizer_container {
+    font-size: 12px;
+    padding: 25px 8px 8px;
+  }
+  
+  .copy-button {
+    font-size: 10px;
+    padding: 3px 6px;
+  }
 }

package/src/Components/Visual/CodeVisualizer/CodeVisualizer.html

@@ -1,4 +1,4 @@
-<div class="codevisualizer_container">
-  <button class="copy-button" title="Copy to clipboard">Copy</button>
-  <pre class="codevisualizer"><code></code></pre>
+<div class="codevisualizer_container">
+  <button class="copy-button" title="Copy to clipboard">Copy</button>
+  <pre class="codevisualizer"><code></code></pre>
 </div>