slicejs-cli 1.0.54 → 1.0.56

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

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

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

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

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

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

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

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

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

@@ -1,119 +0,0 @@
-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,23 +0,0 @@
-const 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;