slicejs-cli 1.0.54 → 1.0.56

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

@@ -1,63 +0,0 @@
-.title {
-  font-size: 20px;
-  font-weight: bold;
-  color: var(--font-primary-color);
-  text-align: center;
-}
-
-.slice-card {
-  width: 300px;
-  position: relative;
-  font-family: var(--font-family);
-  transition: all 300ms;
-}
-
-.slice-card:hover {
-  .card_cover {
-    transform: translateY(-90%);
-    box-shadow: 0px 10px 10px #00000050;
-  }
-  .card_info {
-    /* transform: translateY(20%); */
-    box-shadow: 0px -10px 10px #00000050;
-  }
-}
-
-.card_cover {
-  width: 100%;
-  height: 220px;
-  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%;
-  margin-top: 20px;
-  height: 220px;
-  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 {
-  padding: 0px 20px 20px 20px;
-  font-size: 20px;
-  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/PROJECT_TEMPLATES/Basic/Slice/Components/Visual/Card/Card.html

@@ -1,7 +0,0 @@
-<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/PROJECT_TEMPLATES/Basic/Slice/Components/Visual/Card/Card.js

@@ -1,110 +0,0 @@
-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.$card.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 = "youtube";
-      this.icon.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);

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

@@ -1,87 +0,0 @@
-.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/PROJECT_TEMPLATES/Basic/Slice/Components/Visual/Checkbox/Checkbox.html

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

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

@@ -1,87 +0,0 @@
-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", "position"];
-  }
-
-  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 position() {
-    return this._position;
-  }
-
-  set position(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/PROJECT_TEMPLATES/Basic/Slice/Components/Visual/CodeValidator/CodeValidator.css

@@ -1,97 +0,0 @@
-/* Import Google font - Poppins */
-@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-  font-family: "Poppins", sans-serif;
-}
-body {
-  min-height: 100vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: #4070f4;
-}
-:where(.container, form, .input-field, header) {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-.container {
-  background: #fff;
-  padding: 30px 65px;
-  border-radius: 12px;
-  row-gap: 20px;
-  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
-  z-index: 15000;
-  position: fixed;
-}
-.container header {
-  height: 65px;
-  width: 65px;
-  background: #4070f4;
-  color: #fff;
-  font-size: 2.5rem;
-  border-radius: 50%;
-}
-.container h4 {
-  font-size: 1.25rem;
-  color: #333;
-  font-weight: 500;
-}
-form .input-field {
-  flex-direction: row;
-  column-gap: 10px;
-}
-.input-field input {
-  height: 45px;
-  width: 42px;
-  border-radius: 6px;
-  outline: none;
-  font-size: 1.125rem;
-  text-align: center;
-  border: 1px solid #ddd;
-}
-.input-field input:focus {
-  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
-}
-.input-field input::-webkit-inner-spin-button,
-.input-field input::-webkit-outer-spin-button {
-  display: none;
-}
-form button {
-  margin-top: 25px;
-  width: 100%;
-  color: #fff;
-  font-size: 1rem;
-  border: none;
-  padding: 9px 0;
-  cursor: pointer;
-  border-radius: 6px;
-  pointer-events: none;
-  background: #6e93f7;
-  transition: all 0.2s ease;
-}
-form button.active {
-  background: #4070f4;
-  pointer-events: auto;
-}
-form button:hover {
-  background: #0e4bf1;
-}
-
-.center-screen {
-  position: absolute;
-    top: 50%;
-    left: 50%;
-    margin-right: -50%;
-    transform: translate(-50%, -50%);
-    z-index: 100000;
-}
-
-.container::backdrop{
-  background-color: black;
-  opacity: 0.5;
-}

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

@@ -1,18 +0,0 @@
-<link rel="stylesheet" href="./Slice/css/CodeValidator.css">
-<div class="container center-screen">
-    <header>
-      <i class="bx bxs-check-shield"></i>
-    </header>
-    <h4>Enter OTP Code</h4>
-    <form action="#">
-      <div class="input-field">
-        <input type="number" />
-        <input type="number" disabled />
-        <input type="number" disabled />
-        <input type="number" disabled />
-        <input type="number" disabled />
-        <input type="number" disabled />
-      </div>
-      <button>Verify OTP</button>
-    </form>
-  </div>

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

@@ -1,86 +0,0 @@
-export default class Button extends HTMLElement {
-  constructor() {
-    super();
-    slice.controller
-      .loadTemplate("./Slice/templates/codeValidator.html")
-      .then((template) => {
-        this.shadow = this.attachShadow({ mode: "open" });
-        this.shadowRoot.appendChild(template.content.cloneNode(true));
-
-        const inputs = this.shadowRoot.querySelectorAll("input"),
-          button = this.shadowRoot.querySelector("button");
-
-        // iterate over all inputs
-        inputs.forEach((input, index1) => {
-          input.addEventListener("keyup", (e) => {
-            // This code gets the current input element and stores it in the currentInput variable
-            // This code gets the next sibling element of the current input element and stores it in the nextInput variable
-            // This code gets the previous sibling element of the current input element and stores it in the prevInput variable
-            const currentInput = input,
-              nextInput = input.nextElementSibling,
-              prevInput = input.previousElementSibling;
-
-            // if the value has more than one character then clear it
-            if (currentInput.value.length > 1) {
-              currentInput.value = "";
-              return;
-            }
-            // if the next input is disabled and the current value is not empty
-            //  enable the next input and focus on it
-            if (
-              nextInput &&
-              nextInput.hasAttribute("disabled") &&
-              currentInput.value !== ""
-            ) {
-              nextInput.removeAttribute("disabled");
-              nextInput.focus();
-            }
-
-            // if the backspace key is pressed
-            if (e.key === "Backspace") {
-              // iterate over all inputs again
-              inputs.forEach((input, index2) => {
-                // if the index1 of the current input is less than or equal to the index2 of the input in the outer loop
-                // and the previous element exists, set the disabled attribute on the input and focus on the previous element
-                if (index1 <= index2 && prevInput) {
-                  input.setAttribute("disabled", true);
-                  input.value = "";
-                  prevInput.focus();
-                }
-              });
-            }
-            //if the fourth input( which index number is 3) is not empty and has not disable attribute then
-            //add active class if not then remove the active class.
-            if (!inputs[5].disabled && inputs[5].value !== "") {
-              button.classList.add("active");
-              return;
-            }
-            button.classList.remove("active");
-          });
-        });
-
-        //focus the first input which index is 0 on window load
-        window.addEventListener("load", () => inputs[0].focus());
-
-        slice.controller.registerComponent(this);
-      });
-  }
-
-  show() {
-    document.body.appendChild(this);
-  }
-
-  getSubmitButton() {
-    return this.shadowRoot.querySelector("button");
-  }
-
-  getCode() {
-    let code = "";
-    const inputs = this.shadowRoot.querySelectorAll("input");
-    inputs.forEach((input) => {
-      code += input.value;
-    });
-    return code;
-  }
-}
-window.customElements.define("my-button", Button);