slicejs-cli 1.0.45 → 1.0.47

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

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

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

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

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

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

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

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