slicejs-cli 1.0.54 → 1.0.55

package/PROJECT_TEMPLATES/Basic/Slice/Components/Visual/Select/Select.css

@@ -1,91 +0,0 @@
-.slice_dropdown {
-  font-family: var(--font-family);
-  max-width: 100%;
-  margin-bottom: 25px;
-  margin-top: 25px;
-  position: relative;
-}
-.slice_select_container {
-  cursor: pointer;
-  display: flex;
-  padding: 10px;
-  border-radius: var(--border-radius-slice);
-  border: var(--slice-border) solid var(--primary-color);
-  background-color: var(--primary-background-color);
-  justify-content: space-between;
-  align-items: center;
-}
-.slice_select {
-  pointer-events: none;
-  color: var(--font-primary-color);
-  width: 100%;
-  background: none;
-  outline: none;
-  border: none;
-}
-.slice_select_label {
-  color: var(--primary-color);
-  position: absolute;
-  transition: all 0.5s;
-  user-select: none;
-}
-.slice_select_value {
-  scale: 0.8;
-  transform: translateY(-200%);
-  transition: all 0.5s;
-}
-.slice_menu {
-  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%;
-  width: 100%;
-  z-index: 1;
-  background-color: var(--primary-background-color);
-  border-radius: var(--border-radius-slice);
-  box-shadow: 0 0 10px 0 #00000050;
-  div {
-    color: var(--font-primary-color);
-    cursor: pointer;
-    padding: 10px;
-    &:hover {
-      color: var(--secondary-color-contrast);
-      background-color: var(--secondary-color);
-    }
-  }
-}
-.menu_open {
-  overflow-y: scroll;
-  min-height: min-content;
-  max-height: 200px;
-  visibility: visible;
-  opacity: 1;
-}
-.menu_open::-webkit-scrollbar {
-  width: 5px;
-}
-.menu_open::-webkit-scrollbar-thumb {
-  background: var(--secondary-color);
-  border-radius: var(--border-radius-slice);
-}
-.active {
-  /* color: var(--primary-color); */
-  background-color: var(--secondary-background-color);
-}
-.caret {
-  margin-left: 10px;
-  width: 0;
-  height: 0;
-  border-left: 5px solid transparent;
-  border-right: 5px solid transparent;
-  border-top: 6px solid var(--primary-color-rgb);
-  transition: 0.3s;
-}
-.caret_open {
-  transform: rotate(180deg);
-}

package/PROJECT_TEMPLATES/Basic/Slice/Components/Visual/Select/Select.html

@@ -1,8 +0,0 @@
-<div class="slice_dropdown">
-  <div class="slice_select_container">
-    <label class="slice_select_label"></label>
-    <input class="slice_select" />
-    <div class="caret"></div>
-  </div>
-  <div class="slice_menu"></div>
-</div>

package/PROJECT_TEMPLATES/Basic/Slice/Components/Visual/Select/Select.js

@@ -1,210 +0,0 @@
-export default class Select extends HTMLElement {
-  constructor(props) {
-    super();
-    slice.attachTemplate(this);
-    this.$dropdown = this.querySelector(".slice_dropdown");
-    this.$selectContainer = this.querySelector(".slice_select_container");
-    this.$label = this.querySelector(".slice_select_label");
-    this.$select = this.querySelector(".slice_select");
-    this.$menu = this.querySelector(".slice_menu");
-    this.$caret = this.querySelector(".caret");
-
-    this.$selectContainer.addEventListener("click", () => {
-      this.$menu.classList.toggle("menu_open");
-      this.$caret.classList.toggle("caret_open");
-    });
-    this.$dropdown.addEventListener("mouseleave", () => {
-      this.$menu.classList.remove("menu_open");
-      this.$caret.classList.remove("caret_open");
-    });
-
-    if (props.visibleProp) {
-      this.visibleProp = props.visibleProp;
-    }
-    this._value = [];
-
-    if (props.onOptionSelect) {
-      this.onOptionSelect = props.onOptionSelect;
-    }
-    slice.controller.setComponentProps(this, props);
-    this.debuggerProps = [
-      "options",
-      "disabled",
-      "label",
-      "multiple",
-      "visibleProp",
-    ];
-  }
-
-  init() {
-    if(!this.disabled){
-      this._disabled=false;
-    }
-
-    if(!this._multiple){
-      this._multiple=false;
-    }
-  }
-
-  get options() {
-    return this._options;
-  }
-
-  removeOptionFromValue(option) {
-    const optionIndex = this.isObjectInArray(option, this._value).index;
-    if (optionIndex !== -1) {
-      this._value.splice(optionIndex, 1);
-      // Actualizar la representación visual en el elemento select
-      this.updateSelectLabel();
-    }
-
-    if (this._value.length === 0) {
-      this.$label.classList.remove("slice_select_value");
-    }
-  }
-
-  updateSelectLabel() {
-    // Limpiar el contenido actual del elemento select
-    this.$select.value = "";
-
-    // Volver a agregar los valores seleccionados
-    if (this._value.length > 0) {
-      this.$select.value = this._value
-        .map((option) => option[this.visibleProp])
-        .join(", ");
-      this.$label.classList.add("slice_select_value");
-    } else {
-      this.$label.classList.remove("slice_select_value");
-    }
-  }
-
-  addSelectedOption(option) {
-    this._value.push(option);
-    this.updateSelectLabel();
-    this.$label.classList.add("slice_select_value");
-    if (!this.multiple) {
-      this.$menu.classList.remove("menu_open");
-    }
-  }
-
-  set options(values) {
-    this._options = values;
-    values.forEach((option) => {
-      const opt = document.createElement("div");
-      opt.textContent = option[this.visibleProp];
-      opt.addEventListener("click", () => {
-        if (this.$menu.querySelector(".active") && !this.multiple) {
-          this.$menu.querySelector(".active").classList.remove("active");
-        }
-
-        if (this._value.length === 1 && !this.multiple) {
-          this.removeOptionFromValue(this._value[0]);
-          this.addSelectedOption(option);
-          if (this.onOptionSelect) this.onOptionSelect();
-          return;
-        }
-
-        if (this.isObjectInArray(option, this._value).found) {
-          this.removeOptionFromValue(option);
-          opt.classList.remove("active");
-        } else {
-          this.addSelectedOption(option);
-          opt.classList.add("active");
-        }
-        if (this.onOptionSelect) this.onOptionSelect();
-      });
-      this.$menu.appendChild(opt);
-    });
-  }
-
-  get value() {
-    if (this._value.length === 1) {
-      return this._value[0];
-    }
-    return this._value;
-  }
-
-  set value(valueParam) {
-    this._value = [];
-
-    console.log(valueParam);
-    if (valueParam.length > 1 && !this.multiple) {
-      return console.error(
-        "Select is not multiple, you can only select one option"
-      );
-    }
-
-    const validOptions = valueParam.every(
-      (option) => this.isObjectInArray(option, this._options).found
-    );
-
-    if (!validOptions) {
-      console.error(
-        "Error: Al menos una de las opciones proporcionadas no está en this.options."
-      );
-      return;
-    }
-
-    // Agregar las opciones a _value
-    this.$label.classList.add("slice_select_value");
-    valueParam.forEach((option) => this.addSelectedOption(option));
-  }
-
-  get label() {
-    return this._label;
-  }
-
-  set label(value) {
-    this._label = value;
-    this.$label.textContent = value;
-  }
-
-  get multiple() {
-    return this._multiple;
-  }
-  set multiple(value) {
-    this._multiple = value;
-  }
-
-  get disabled() {
-    return this._disabled;
-  }
-
-  set disabled(value) {
-    this._disabled = value;
-  }
-
-  isObjectInArray(objeto, arreglo) {
-    for (let i = 0; i < arreglo.length; i++) {
-      if (this.sameObject(arreglo[i], objeto)) {
-        return { found: true, index: i };
-      }
-    }
-    return { found: false, index: -1 };
-  }
-  sameObject(objetoA, objetoB) {
-    const keysA = Object.keys(objetoA);
-    const keysB = Object.keys(objetoB);
-
-    if (keysA.length !== keysB.length) {
-      return false;
-    }
-
-    for (const key of keysA) {
-      const valueA = objetoA[key];
-      const valueB = objetoB[key];
-
-      if (typeof valueA === "object" && typeof valueB === "object") {
-        if (!this.sameObject(valueA, valueB)) {
-          return false;
-        }
-      } else if (valueA !== valueB) {
-        return false;
-      }
-    }
-
-    return true;
-  }
-}
-
-customElements.define("slice-select", Select);

package/PROJECT_TEMPLATES/Basic/Slice/Components/Visual/Switch/Switch.css

@@ -1,76 +0,0 @@
-.slice_switch {
-  --button-width: calc(var(--button-height) * 2);
-  --button-height: 1.8em;
-  --toggle-diameter: calc(var(--button-width) / 3);
-  --button-toggle-offset: calc(
-    (var(--button-height) - var(--toggle-diameter)) / 2
-  );
-  --toggle-shadow-offset: 10px;
-  --toggle-wider: 1.8em;
-}
-
-.slice_switch_container {
-  width: fit-content;
-}
-
-.slice_switch {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  user-select: none;
-}
-
-.switch_label {
-  margin: 5px;
-  font-family: var(--font-family);
-  color: var(--font-primary-color);
-}
-
-.slider {
-  cursor: pointer;
-  display: inline-block;
-  width: var(--button-width);
-  height: var(--button-height);
-  background-color: var(--secondary-background-color);
-  border: var(--slice-border) solid var(--primary-color);
-  border-radius: calc(var(--button-height) / 2);
-  position: relative;
-  transition: 0.3s all ease-in-out;
-}
-
-.slider::after {
-  content: "";
-  display: inline-block;
-  width: var(--toggle-diameter);
-  height: var(--toggle-diameter);
-  background-color: #fff;
-  border-radius: calc(var(--toggle-diameter) / 2);
-  position: absolute;
-  top: var(--button-toggle-offset);
-  transform: translateX(var(--button-toggle-offset));
-  transition: 0.3s all ease-in-out;
-}
-
-.slice_switch input[type="checkbox"]:checked + .slider {
-  background-color: var(--success-color);
-  border: var(--slice-border) solid var(--success-color);
-}
-
-.slice_switch input[type="checkbox"]:checked + .slider::after {
-  transform: translateX(
-    calc(
-      var(--button-width) - var(--toggle-diameter) - var(--button-toggle-offset)
-    )
-  );
-}
-
-.slice_switch input[type="checkbox"] {
-  display: none;
-}
-
-.disabled {
-  border-color: var(--disabled-color);
-  background-color: var(--primary-color-shade);
-  color: var(--disabled-color);
-  cursor: not-allowed;
-}

package/PROJECT_TEMPLATES/Basic/Slice/Components/Visual/Switch/Switch.html

@@ -1,8 +0,0 @@
-<div class="slice_switch_container">
-  <div class="slice_switch">
-    <label>
-      <input type="checkbox" />
-      <span class="slider"></span>
-    </label>
-  </div>
-</div>

package/PROJECT_TEMPLATES/Basic/Slice/Components/Visual/Switch/Switch.js

@@ -1,109 +0,0 @@
-export default class Switch extends HTMLElement {
-  constructor(props) {
-    super();
-    slice.attachTemplate(this);
-    this.$switch = this.querySelector(".slice_switch");
-    this.$checkbox = this.querySelector("input");
-    this.toggle = props.toggle;
-    if (this.toggle) {
-      this.$checkbox.addEventListener("click", () => this.toggle());
-    }
-
-    slice.controller.setComponentProps(this, props);
-    this.debuggerProps = [
-      "checked",
-      "disabled",
-      "label",
-      "customColor",
-      "position",
-    ];
-  }
-
-  init() {
-    if (this._checked === undefined) {
-      this.checked = false;
-    }
-    if (this.position === undefined) {
-      this.position = "right";
-    }
-
-    if(!this.disabled){
-      this._disabled=false;
-    }
-
-    this.querySelector("input").addEventListener("change", (e) => {
-      this.checked = e.target.checked;
-    });
-  }
-
-  get checked() {
-    return this._checked;
-  }
-
-  set checked(value) {
-    this._checked = value;
-    this.$checkbox.checked = value;
-  }
-
-  get label() {
-    return this._label;
-  }
-
-  set label(value) {
-    this._label = value;
-    if (this.querySelector(".switch_label")) {
-      this.querySelector(".switch_label").textContent = value;
-    } else {
-      const label = document.createElement("label");
-      label.classList.add("switch_label");
-      label.textContent = value;
-      this.$switch.appendChild(label);
-    }
-  }
-
-  get customColor() {
-    return this._customColor;
-  }
-
-  set customColor(value) {
-    this._customColor = value;
-    this.style = `--success-color: ${value};`;
-  }
-
-  get position() {
-    return this._position;
-  }
-
-  set position(value) {
-    if (value === "left") {
-      this.$switch.style = ` flex-direction: row-reverse;`;
-    }
-    if (value === "right") {
-      this.$switch.style = `flex-direction: row;`;
-    }
-    if (value === "top") {
-      this.$switch.style = `flex-direction: column-reverse;`;
-    }
-    if (value === "bottom") {
-      this.$switch.style = `flex-direction: column;`;
-    }
-    this._position = value;
-  }
-
-  get disabled() {
-    return this._disabled;
-  }
-
-  set disabled(value) {
-    this._disabled = value;
-    this.$checkbox.disabled = value;
-    if(value===true){
-      this.querySelector(".slider").classList.add("disabled");
-    }else{
-      this.querySelector(".slider").classList.remove("disabled");
-    }
-
-  }
-}
-
-customElements.define("slice-switch", Switch);

package/PROJECT_TEMPLATES/Basic/Slice/Components/Visual/Tester/Tester.css

@@ -1,34 +0,0 @@
-.container {
-    width: 90%;
-    margin: 50px auto;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-}
-
-.slice-tester {
-    border: 2px solid #3498db;
-    border-radius: 8px;
-    overflow: hidden;
-    margin: 15px;
-    width: 200px;
-    background-color: #fff;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-    transition: transform 0.3s ease-in-out;
-}
-
-.slice-tester:hover {
-    transform: scale(1.05);
-}
-
-.slice_tester_subject {
-    background-color: #3498db;
-    color: #fff;
-    padding: 10px;
-    font-weight: bold;
-}
-
-.slice_tester_description {
-    background-color: #ecf0f1;
-    text-align: center;
-}

package/PROJECT_TEMPLATES/Basic/Slice/Components/Visual/Tester/Tester.html

@@ -1,7 +0,0 @@
-<div class="container">
-    <div class="slice-tester">
-        <div class="slice_tester_subject"></div>
-        <span class="slice_tester_description"></span>
-    </div>
-</div>
-

package/PROJECT_TEMPLATES/Basic/Slice/Components/Visual/Tester/Tester.js

@@ -1,33 +0,0 @@
-export default class Tester extends HTMLElement {
-  
-  constructor(props) {
-    super(); 
-    slice.attachTemplate(this)
-  
-    for (const prop in props) {
-      this.setAttribute(prop, props[prop])
-    }
-    
-  }
-
-
-  static observedAttributes = ['subject', 'description'];
-
-   attributeChangedCallback(attributeName, oldValue, newValue){
-     if(Tester.observedAttributes.includes(attributeName)){
-
-       switch(attributeName){
-         case 'subject':
-           this.querySelector(".slice_tester_subject").textContent=newValue;
-           
-            break;
-
-          case 'description':
-            this.querySelector(".slice_tester_description").textContent=newValue;
-            break;
-        }
-      }
-   }
-}
-
-customElements.define("slice-tester", Tester);

package/PROJECT_TEMPLATES/Basic/Slice/Components/Visual/Tester2/Tester2.css

@@ -1,34 +0,0 @@
-.container {
-    width: 90%;
-    margin: 50px auto;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-}
-
-.slice-tester2 {
-    border: 2px solid #3498db;
-    border-radius: 8px;
-    overflow: hidden;
-    margin: 15px;
-    width: 200px;
-    background-color: #fff;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-    transition: transform 0.3s ease-in-out;
-}
-
-.slice-tester2:hover {
-    transform: scale(1.05);
-}
-
-.slice_tester2_subject {
-    background-color: #3498db;
-    color: #fff;
-    padding: 10px;
-    font-weight: bold;
-}
-
-.slice_tester2_description {
-    background-color: #ecf0f1;
-    text-align: center;
-}

package/PROJECT_TEMPLATES/Basic/Slice/Components/Visual/Tester2/Tester2.html

@@ -1,43 +0,0 @@
-<div class="container">
-    <div class="slice-tester2">
-        <div class="slice_tester2_subject">Lorem Ipsum</div>
-        <span class="slice_tester2_description">Lorem Ipsum Sit Amet</span>
-    </div>
-</div>
-
-<style>
-    .container {
-            width: 90%;
-            margin: 50px auto;
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: space-between;
-        }
-
-        .slice-tester2 {
-            border: 2px solid #00ffd5;
-            border-radius: 8px;
-            overflow: hidden;
-            margin: 15px;
-            width: 200px;
-            background-color: #fff;
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-            transition: transform 0.3s ease-in-out;
-        }
-
-        .slice-tester2:hover {
-            transform: scale(1.05);
-        }
-
-        .slice_tester2_subject {
-            background-color: #00ffd5;
-            color: #fff;
-            padding: 10px;
-            font-weight: bold;
-        }
-
-        .slice_tester2_description {
-            background-color: #ecf0f1;
-            text-align: center;
-        }
-</style>

package/PROJECT_TEMPLATES/Basic/Slice/Components/Visual/Tester2/Tester2.js

@@ -1,39 +0,0 @@
-export default class Tester2 extends HTMLElement {
-  
-  constructor(props) {
-    super(); 
-    slice.attachTemplate(this)
-
-    for (const prop in props) {
-      this.setAttribute(prop, props[prop])
-    }
-     
-    
-  }
-  
-  static observedAttributes = ['subject', 'description', "children"];
-
-   async attributeChangedCallback(attributeName, oldValue, newValue){
-     if(Tester2.observedAttributes.includes(attributeName)){
-
-       switch(attributeName){
-         case 'subject':
-           this.querySelector(".slice_tester2_subject").textContent=newValue;
-           
-            break;
-
-          case 'description':
-            this.querySelector(".slice_tester2_description").textContent=newValue;
-            break;
-
-          case 'children':
-            
-            let newTester = await slice.build("Tester", {id: "testerHijo", sliceId: "testerHijo",  subject: "Este es el subject del hijo de un componente Tester2", description: "Este es el description de un componente Tester"})
-            this.appendChild(newTester);
-            break;
-        }
-      }
-   }
-}
-
-customElements.define("slice-tester2", Tester2);