slicejs-cli 1.0.45 → 1.0.47

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

@@ -0,0 +1,110 @@
+/* Import Google font - Poppins */
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: 'Poppins', sans-serif;
+}
+
+.notifications {
+  position: fixed;
+  top: 80px;
+  right: 20px;
+}
+.notifications :where(.toast, .column) {
+  display: flex;
+  align-items: center;
+}
+.notifications .toast {
+  width: 400px;
+  position: relative;
+  overflow: hidden;
+  list-style: none;
+  border-radius: 4px;
+  padding: 16px 17px;
+  margin-bottom: 10px;
+  background: #ffffff;
+  justify-content: space-between;
+  animation: show_toast 0.3s ease forwards;
+  z-index: 100000;
+  
+}
+@keyframes show_toast {
+  0% {
+    transform: translateX(100%);
+  }
+  40% {
+    transform: translateX(-5%);
+  }
+  80% {
+    transform: translateX(0%);
+  }
+  100% {
+    transform: translateX(-10px);
+  }
+}
+.notifications .toast.hide {
+  animation: hide_toast 0.3s ease forwards;
+}
+@keyframes hide_toast {
+  0% {
+    transform: translateX(-10px);
+  }
+  40% {
+    transform: translateX(0%);
+  }
+  80% {
+    transform: translateX(-5%);
+  }
+  100% {
+    transform: translateX(calc(100% + 20px));
+  }
+}
+.toast::before {
+  position: absolute;
+  content: "";
+  height: 3px;
+  width: 100%;
+  bottom: 0px;
+  left: 0px;
+  animation: progress 5s linear forwards;
+}
+
+@keyframes progress {
+  100% {
+    width: 0%;
+  }
+}
+.toast::before {
+  background: black;
+}
+
+
+.toast .column i {
+  font-size: 1.75rem;
+}
+
+.toast .column span {
+  font-size: 1.07rem;
+  margin-left: 12px;
+}
+.toast i:last-child {
+  color: #aeb0d7;
+  cursor: pointer;
+}
+.toast i:last-child:hover {
+  color: #34495E;
+}
+
+@media screen and (max-width: 530px) {
+  .notifications {
+    width: 95%;
+  }
+  .notifications .toast {
+    width: 100%;
+    font-size: 1rem;
+    margin-left: 20px;
+  }
+  
+}

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

@@ -0,0 +1,12 @@
+<link rel="stylesheet" href="./Slice/css/ToastAlert.css">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" rel="stylesheet"  type='text/css'>
+
+<ul id="notifications" class="notifications">
+    <li class="toast">
+        <div class="column">
+            <i id="addIcon" class="fa-solid"></i>
+            <span id="textSpan"></span>
+         </div>
+         <i id="closeBtn" class="fa-solid fa-xmark"></i>`;
+    </li>
+</ul>

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

@@ -0,0 +1,65 @@
+export default class ToastAlert extends HTMLElement {
+  constructor() {
+    super();
+    slice.controller
+      .loadTemplate("./Slice/templates/ToastAlert.html")
+      .then((template) => {
+        this.shadow = this.attachShadow({ mode: "open" });
+        this.shadowRoot.appendChild(template.content.cloneNode(true));
+
+        if (this.props != undefined) {
+          if (this.props.color != undefined) {
+            this.color = this.props.color;
+            this.shadowRoot.innerHTML += `<style>
+                    .toast::before {background: ${this.color}; } 
+                    .toast .column i {color: ${this.color}; }
+                    </style>`;
+          }
+          if (this.props.text != undefined) {
+            this.text = this.props.text;
+            const textSpan = this.shadowRoot.getElementById("textSpan");
+            textSpan.innerHTML = this.text;
+          }
+          if (this.props.icon != undefined) {
+            this.icon = this.props.icon;
+            const addIcon = this.shadowRoot.getElementById("addIcon");
+            addIcon.classList.add(toastDetails[this.icon].icon);
+          }
+        }
+        const closeBtn = this.shadowRoot.getElementById("closeBtn");
+        closeBtn.addEventListener("click", () => {
+          this.remove();
+        });
+
+        slice.controller.registerComponent(this);
+      });
+  }
+
+  show() {
+    document.body.appendChild(this);
+    setTimeout(() => this.remove(), 5000);
+  }
+}
+
+// Object containing details for different types of toasts
+const toastDetails = {
+  timer: 5000,
+  success: {
+    icon: "fa-circle-check",
+    text: "Success: This is a success toast.",
+  },
+  error: {
+    icon: "fa-circle-xmark",
+    text: "Error: This is an error toast.",
+  },
+  warning: {
+    icon: "fa-triangle-exclamation",
+    text: "Warning: This is a warning toast.",
+  },
+  info: {
+    icon: "fa-circle-info",
+    text: "Info: This is an information toast.",
+  },
+};
+
+customElements.define("toast-alert", ToastAlert);

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

@@ -0,0 +1,163 @@
+#complexNavbar{
+    --bg-color: #2B3467;
+    --text-color: #fff;
+    --main-color: #EB455F;
+}
+
+
+* {
+    
+    padding: 0;
+    margin: 0;
+    font-family: 'Poppins', sans-serif;
+    list-style: none;
+    text-decoration: none;
+}
+
+
+header {
+    position: fixed;
+    width: 100%;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 1000;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    background: var(--bg-color);
+    padding: 28px 12%;
+    transition: all .50s ease;
+}
+
+.logo {
+    display: flex;
+    align-items: center;
+}
+
+.logo i {
+    color: var(--main-color);
+    font-size: 28px;
+    margin-right: 3px;
+}
+
+.logo span {
+    color: var(--text-color);
+    font-size: 1.7rem;
+    font-weight: 600;
+}
+
+.navbar {
+    display: flex;
+}
+
+.navbar a {
+    color: var(--text-color);
+    font-size: 1.1rem;
+    font-weight: 500;
+    padding: 5px 0;
+    margin: 0px 30px;
+    transition: all .50s ease;
+}
+
+.navbar a:hover {
+    color: var(--main-color)
+}
+
+.navbar a.active {
+    color: var(--main-color)
+}
+
+.main {
+    display: flex;
+    align-items: center;
+}
+
+.main a {
+    margin-right: 25px;
+    margin-left: 10px;
+    color: var(--text-color);
+    font-size: 1.1rem;
+    font-weight: 500;
+    transition: all .50s ease;
+}
+
+.user {
+    display: flex;
+    align-items: center;
+}
+
+.user i {
+    color: var(--main-color);
+    font-size: 28px;
+    margin-right: 7px;
+}
+
+.main a:hover {
+    color: var(--main-color)
+}
+
+#menu-icon {
+    font-size: 35px;
+    color: var(--text-color);
+    cursor: pointer;
+    z-index: 10001;
+    display: none;
+}
+
+@media (max-width: 1280px) {
+    header {
+        padding: 14px 2%;
+        transition: .2s;
+    }
+
+    .navbar a {
+        padding: 5px 0;
+        margin: 0px 20px;
+
+    }
+}
+
+@media(max-width:1090px) {
+    #menu-icon {
+        display: block;
+    }
+
+
+
+    .navbar {
+        position: absolute;
+        top: 100%;
+        right: -100%;
+        width: 270px;
+        height: 29vh;
+        background: var(--main-color);
+        flex-direction: column;
+        justify-content: flex-start;
+        text-align: center;
+        justify-items: center;
+        justify-self: center;
+        border-radius: 10px;
+        transition: all .50s ease;
+    }
+
+    .navbar a {
+        display: block;
+        margin: 12px 0;
+        padding: 0px 25px;
+        transition: all .50s ease;
+    }
+
+    .navbar a:hover {
+        color: var(--text-color);
+        transform: translateY(5px);
+    }
+
+    .navbar a.active {
+        color: var(--text-color)
+    }
+
+    .navbar.open {
+        right: 2%;
+    }
+}

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

@@ -0,0 +1,15 @@
+<div id="complexNavbar">
+    <link rel=" stylesheet" href="./Slice/Components/complexNavbar/complexNavbar.css" type="text/css">
+<header>
+<a href="#" id="logoLink" class="logo"> <i class="fa fa-home"></i> <span id="logo"></span></a>
+<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet"  type='text/css'>
+<ul class="navbar"> </ul> 
+<div class="main">
+    <a href="" id ="sign-in" class="user"><i class="fa fa-user"></i> Sign In</a>
+    <div > <i id="menu-icon" class="fa fa-navicon" ></i></div>
+</div>
+
+</header>
+</div>
+
+

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

@@ -0,0 +1,48 @@
+export default class complexNavbar extends HTMLElement {
+  constructor(props) {
+    super();
+    slice.controller.loadTemplate(this);
+    let menu = this.shadowRoot.querySelector("#menu-icon");
+    let navbar = this.shadowRoot.querySelector(".navbar");
+
+    menu.addEventListener("click", () => {
+      navbar.classList.toggle("open");
+      menu.classList.toggle("fa-navicon");
+      menu.classList.toggle("fa-close");
+    });
+
+    if (props != undefined) {
+      if (props.id != undefined) {
+        this.id = props.id;
+      }
+
+      let logoLink = this.shadowRoot.getElementById("logoLink");
+      if (props.logoLink != undefined) {
+        logoLink.href = props.logoLink;
+      }
+
+      let sign = this.shadowRoot.querySelector("#sign-in");
+      if (props.sign != undefined) {
+        sign.href = props.sign;
+      } else {
+        sign.style.display = "none";
+      }
+
+      let logo = this.shadowRoot.querySelector("#logo");
+      logo.innerHTML = props.logo;
+
+      let titleContainer = this.shadowRoot.querySelector(".navbar");
+      for (let i = 0; i < props.sections.length; i++) {
+        let prop = props.sections[i];
+        titleContainer.innerHTML += `<li><a id=${prop.id}  href="${prop.link}">${prop.text}</a></li>`;
+      }
+    }
+    slice.controller.registerComponent(this);
+  }
+
+  getElement(id) {
+    return this.shadowRoot.getElementById(id);
+  }
+}
+
+window.customElements.define("complex-navbar", complexNavbar);

package/PROJECT_TEMPLATES/Basic/Slice/Components/Visual/imageCarousel/img-carousel.css

@@ -0,0 +1,56 @@
+.slider {
+    height: 300px;
+    aspect-ratio: 16/9; 
+    position: relative;
+    overflow: hidden; /* <===  */
+    border-radius: 10px;
+}
+
+.slider .slide {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    transition: all 0.5s;
+}
+
+.slide img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.btn {
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    padding: 10px;
+    border: none;
+    border-radius: 50%;
+    z-index: 10;
+    cursor: pointer;
+    line-height: 0.6;
+    font-weight: bold;
+    background-color: #fff;
+    font-size: 18px;
+}
+
+.btn:active {
+    transform: scale(1.1);
+}
+
+.btn-prev {
+    top: 45%;
+    left: 2%;
+}
+
+.btn-next {
+    top: 45%;
+    right: 2%;
+}
+
+@media only screen and (max-width: 600px) {
+    .slider {
+        aspect-ratio: 3/4;
+        
+    }
+}

package/PROJECT_TEMPLATES/Basic/Slice/Components/Visual/imageCarousel/img-carousel.html

@@ -0,0 +1,6 @@
+<link rel="stylesheet" href="./Slice/css/img-carousel.css">
+    <div id="slider" class="slider">
+        <div id="prev" class="btn btn-prev"><</div>
+        <div id="next" class="btn btn-next">></div>
+    </div>
+

package/PROJECT_TEMPLATES/Basic/Slice/Components/Visual/imageCarousel/img-carousel.js

@@ -0,0 +1,119 @@
+export default class ImgCarousel extends HTMLElement {
+  constructor() {
+    super();
+
+    this.jumpInterval = 1500;
+    this.images = [];
+    this.slides = [];
+    this.currentImage = 0;
+    this.maxImage = 0;
+
+    slice.controller
+      .loadTemplate("./Slice/templates/img-carousel.html")
+      .then((template) => {
+        this.shadow = this.attachShadow({ mode: "open" });
+        this.shadowRoot.appendChild(template.content.cloneNode(true));
+        const nextBtn = this.shadowRoot.getElementById("next");
+        const prevBtn = this.shadowRoot.getElementById("prev");
+        nextBtn.addEventListener("click", (e) => this.moveNext());
+        prevBtn.addEventListener("click", (e) => this.movePrev());
+        const slider = this.shadowRoot.getElementById("slider");
+
+        if (this.props != undefined) {
+          if (this.props.id != undefined) {
+            this.id = this.props.id;
+          }
+          this.images = this.props.images;
+          this.maxImage = this.images.length - 1;
+          this.create();
+          if (this.props.ratio != undefined) {
+            this.changeStyles({ "aspect-ratio": this.props.ratio });
+          }
+          if (this.props.jumpInterval != undefined) {
+            this.jumpInterval = this.props.jumpInterval * 1000;
+          }
+          if (this.props.height != undefined) {
+            this.changeStyles({ height: this.props.height });
+          }
+          if (this.props.motion != undefined) {
+            if (this.props.motion == "fw") {
+              this.autoMoveNext();
+            } else {
+              this.autoMovePrev();
+            }
+          }
+          slice.controller.registerComponent(this);
+        }
+      });
+  }
+
+  connectedCallback() {}
+
+  changeStyles(styles) {
+    let slider = this.shadowRoot.getElementById("slider");
+    Object.keys(styles).forEach((property) => {
+      slider.style[property] = styles[property];
+    });
+  }
+
+  autoMovePrev() {
+    setInterval(
+      function () {
+        this.movePrev().bind(this);
+      }.bind(this),
+      this.jumpInterval
+    );
+  }
+
+  autoMoveNext() {
+    setInterval(
+      function () {
+        this.moveNext().bind(this);
+      }.bind(this),
+      this.jumpInterval
+    );
+  }
+
+  moveNext() {
+    if (this.currentImage === this.maxImage) {
+      this.currentImage = 0;
+    } else {
+      this.currentImage++;
+    }
+
+    this.slides.forEach((slide, idx) => {
+      slide.style.transform = `translateX(${100 * (idx - this.currentImage)}%)`;
+    });
+  }
+
+  movePrev() {
+    if (this.currentImage === 0) {
+      this.currentImage = this.maxImage;
+    } else {
+      this.currentImage--;
+    }
+
+    this.slides.forEach((slide, idx) => {
+      slide.style.transform = `translateX(${100 * (idx - this.currentImage)}%)`;
+    });
+  }
+
+  create() {
+    this.images.forEach((img, idx) => {
+      let slider = this.shadow.querySelector(".slider");
+
+      let slide = document.createElement("div");
+      slide.classList.add("slide");
+      slide.style.transform = `translateX(${idx * 100}%)`;
+
+      let image = document.createElement("img");
+      image.src = img;
+
+      slide.appendChild(image);
+      slider.appendChild(slide);
+      this.slides.push(slide);
+    });
+  }
+}
+
+customElements.define("img-carousel", ImgCarousel);

package/PROJECT_TEMPLATES/Basic/Slice/Components/components.js

@@ -1,12 +1,23 @@
 const components = {
-    "TestComponent": "Visual",
-    "FetchManager": "Service",
-    "IndexedDbManager": "Service",
-    "LocalStorageManager": "Service",
-    "Translator": "Service",
-    "TestProvider": "Provider",
-    "Controller": "Structural",
-    "Debugger": "Structural",
-    "Logger": "Structural",
-    "StylesManager": "Structural"
-  }; export default components;
+  Tester: "Visual",
+  Button: "Visual",
+  Input: "Visual",
+  Checkbox: "Visual",
+  Select: "Visual",
+  Switch: "Visual",
+  TestComponent: "Visual",
+  FetchManager: "Service",
+  IndexedDbManager: "Service",
+  LocalStorageManager: "Service",
+  Translator: "Service",
+  TestProvider: "Provider",
+  Controller: "Structural",
+  Debugger: "Structural",
+  Logger: "Structural",
+  StylesManager: "Structural",
+  Icon: "Visual",
+  Loading: "Visual",
+  Card: "Visual",
+  NavBar: "Visual",
+};
+export default components;