slicejs-cli 1.0.45 → 1.0.47

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

@@ -0,0 +1,91 @@
+.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

@@ -0,0 +1,8 @@
+<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

@@ -0,0 +1,210 @@
+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

@@ -0,0 +1,76 @@
+.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

@@ -0,0 +1,8 @@
+<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

@@ -0,0 +1,109 @@
+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

@@ -0,0 +1,34 @@
+.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

@@ -0,0 +1,7 @@
+<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

@@ -0,0 +1,33 @@
+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

@@ -0,0 +1,34 @@
+.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

@@ -0,0 +1,43 @@
+<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

@@ -0,0 +1,39 @@
+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);