slicejs-cli 2.0.6 → 2.0.8

package/ProjectTemplate/src/Components/AppComponents/MainMenu/MainMenu.css

@@ -1,80 +0,0 @@
-slice-mainmenu {
-  position: fixed;
-  top: 0;
-  left: 0;
-  font-family: var(--font-family);
-  background-color: var(--primary-background-color);
-  border-right: 1px solid var(--primary-color-shade);
-  display: flex;
-  align-items: flex-start;
-  height: 100%;
-  width: 17%;
-  transition: transform 0.3s ease, width 0.3s ease;
-  overflow-x: hidden;
-}
-.slice_menu {
-  margin-top: 175px;
-  width: 100%;
-  height: 100%;
-  overflow-y: scroll;
-  overflow-x: hidden;
-  padding: 10px;
-}
-
-.slice_menu_button {
-  position: fixed;
-  top: 0;
-  left: 0;
-  visibility: hidden;
-  width: min-content;
-  cursor: pointer;
-  padding: 20px;
-}
-
-.menu_title {
-  visibility: hidden;
-}
-
-.slice_close_menu {
-  visibility: hidden;
-  position: absolute;
-  padding: 20px;
-  top: 0;
-  right: 0;
-}
-
-slice-treeview .simple_treeview::-webkit-scrollbar,
-slice-mainmenu::-webkit-scrollbar {
-  width: 0px;
-}
-slice-treeview .simple_treeview::-webkit-scrollbar:horizontal,
-slice-mainmenu::-webkit-scrollbar:horizontal  {
-  height: 0px;
-}
-
-@media only screen and (max-width: 770px) {
-  slice-mainmenu {
-    top: 0px;
-    position: fixed;
-    z-index: 100000;
-    display: flex;
-    width: 0%;
-  }
-
-  .slice_menu_button {
-    right: 100%;
-    visibility: visible;
-  }
-
-  .menu_title {
-    visibility: visible;
-  }
-
-  .slice_menu_open {
-    width: 80%;
-  }
-
-  .slice_close_menu {
-    visibility: visible;
-  }
-}

package/ProjectTemplate/src/Components/AppComponents/MainMenu/MainMenu.html

@@ -1,39 +0,0 @@
-  <div class="slice_menu_button">
-    <svg
-      class="w-6 h-6 text-gray-800 dark:text-white"
-      aria-hidden="true"
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      fill="none"
-      viewBox="0 0 24 24"
-    >
-      <path
-        stroke="var(--primary-color-contrast)"
-        stroke-linecap="round"
-        stroke-width="2.3"
-        d="M5 7h14M5 12h14M5 17h14"
-      />
-    </svg>
-  </div>
-  <div class="slice_menu">
-    <div class="slice_close_menu">
-      <svg
-        class="w-6 h-6 text-gray-800 dark:text-white"
-        aria-hidden="true"
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        fill="none"
-        viewBox="0 0 24 24"
-      >
-        <path
-          stroke="var(--primary-color)"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M6 18 17.94 6M18 18 6.06 6"
-        />
-      </svg>
-    </div>
-  </div>

package/ProjectTemplate/src/Components/AppComponents/MainMenu/MainMenu.js

@@ -1,42 +0,0 @@
-export default class MainMenu extends HTMLElement {
-   constructor(props) {
-      super();
-      slice.attachTemplate(this);
-
-      this.$menuButton = this.querySelector('.slice_menu_button');
-      this.$closeButton = this.querySelector('.slice_close_menu');
-      this.$menu = this.querySelector('.slice_menu');
-
-      this.$menuButton.addEventListener('click', () => {
-         this.handleOpenMenu();
-      });
-      this.$closeButton.addEventListener('click', () => {
-         this.handleCloseMenu();
-      });
-
-      slice.controller.setComponentProps(this, props);
-      this.debuggerProps = [];
-   }
-
-   init() {
-      this.addEventListener('mouseleave', () => {
-         if (this.querySelector('.slice_menu_open')) {
-            this.handleCloseMenu();
-         }
-      });
-   }
-
-   add(value) {
-      this.$menu.appendChild(value);
-   }
-
-   handleOpenMenu() {
-      this.classList.add('slice_menu_open');
-   }
-
-   handleCloseMenu() {
-      this.classList.remove('slice_menu_open');
-   }
-}
-
-customElements.define('slice-mainmenu', MainMenu);

package/ProjectTemplate/src/Components/AppComponents/MyLayout/MyLayout.js

@@ -1,13 +0,0 @@
-export default class MyLayout extends HTMLElement {
-   constructor(props) {
-      super();
-      slice.attachTemplate(this);
-
-      slice.controller.setComponentProps(this, props);
-      this.debuggerProps = [];
-   }
-
-   init() {}
-}
-
-customElements.define('slice-mylayout', MyLayout);

package/ProjectTemplate/src/Components/AppComponents/MyNavigation/MyNavigation.css

@@ -1,49 +0,0 @@
-slice-mynavigation {
-  position: fixed;
-  top: 0;
-  right: 0;
-  font-family: var(--font-family);
-  background-color: var(--primary-background-color);
-  border-left: 1px solid var(--primary-color-shade);
-  display: flex;
-  align-items: flex-start;
-  height: 100%;
-  width: 17%;
-  transition: transform 0.3s ease, width 0.3s ease;
-  overflow-x: hidden;
-}
-.my_navigation {
-  display: flex;
-  flex-direction: column;
-  margin-top: 80px;
-}
-.my_navigation a {
-  padding: 10px;
-}
-
-@media only screen and (max-width: 770px) {
-  slice-mynavigation {
-    visibility: hidden;
-  }
-}
-a[class^="nav-"] {
-  text-decoration: none;
-  color: var(--font-primary-color);
-}
-a[class^="nav-"]:hover{
-  color: var(--primary-color);
-}
-a[class$="1"] {
-  font-weight: 700;
-  margin-left: 0%;
-}
-a[class$="2"] {
-  margin-left: 5%;
-}
-a[class$="3"] {
-  margin-left: 10%;
-}
-a[class$="4"] {
-  margin-left: 15%;
-}
-

package/ProjectTemplate/src/Components/AppComponents/MyNavigation/MyNavigation.html

@@ -1 +0,0 @@
-<div class="my_navigation"></div>

package/ProjectTemplate/src/Components/AppComponents/MyNavigation/MyNavigation.js

@@ -1,60 +0,0 @@
-export default class MyNavigation extends HTMLElement {
-   constructor(props) {
-      super();
-      slice.attachTemplate(this);
-
-      this.$navigation = this.querySelector('.my_navigation');
-
-      slice.controller.setComponentProps(this, props);
-      this.debuggerProps = ['page'];
-   }
-
-   set page(value) {
-      this._page = value;
-      this.updateNavigation();
-   }
-
-   get page() {
-      return this._page;
-   }
-
-   init() {
-      if (this.page) {
-         this.updateNavigation();
-      }
-   }
-
-   updateNavigation() {
-      this.$navigation.innerHTML = '';
-      const idElements = this.page.querySelectorAll('[id]');
-
-      idElements.forEach((element) => {
-         const a = document.createElement('a');
-         a.textContent = element.innerHTML;
-
-         // Obtener la jerarquía del elemento, por ejemplo 'h1', 'h2', etc.
-         const tagName = element.tagName.toLowerCase();
-
-         // Iterar desde h1 hasta h6 para aplicar clases basadas en la jerarquía
-         for (let i = 1; i <= 6; i++) {
-            if (tagName === `h${i}`) {
-               a.classList.add(`nav-h${i}`);
-               break; // Si ya encontró la coincidencia, no sigue iterando
-            }
-         }
-
-         if (element.id) {
-            a.href = `#${element.id}`;
-            a.addEventListener('click', (event) => {
-               event.preventDefault();
-               document.getElementById(element.id).scrollIntoView({ behavior: 'smooth', block: 'center' });
-            });
-         } else {
-            a.href = ``;
-         }
-         this.$navigation.appendChild(a);
-      });
-   }
-}
-
-customElements.define('slice-mynavigation', MyNavigation);

package/ProjectTemplate/src/Components/AppComponents/Playground/Playground.css

@@ -1,12 +0,0 @@
-.indexGrid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    grid-template-rows: repeat(1, 1fr);
-    gap: 10px;
-    margin: 0 auto;
-  }
-  .indexGridItem {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }

package/ProjectTemplate/src/Components/AppComponents/Playground/Playground.js

@@ -1,126 +0,0 @@
-export default class Playground extends HTMLElement {
-   constructor(props) {
-      super();
-      slice.attachTemplate(this);
-
-      slice.controller.setComponentProps(this, props);
-      this.debuggerProps = [];
-   }
-
-   async init() {
-      let theme = slice.stylesManager.themeManager.currentTheme;
-
-      const navBar = await slice.build('Navbar', {
-         // position: "fixed",
-         logo: {
-            src: '../../images/Slice.js-logo.png',
-            path: '/',
-         },
-         items: [
-            {
-               text: 'Home',
-               path: '/',
-            },
-            {
-               text: 'Documentation',
-               path: '/Documentation',
-            },
-            {
-               text: 'Playground',
-               path: '/Playground',
-            },
-            {
-               text: 'Our Team',
-               path: '/Team',
-            }
-         ],
-         buttons: [
-            {
-               value: 'Change Theme',
-               // color:
-               onClickCallback: async () => {
-                  if (theme === 'Slice') {
-                     await slice.setTheme('Light');
-                     theme = 'Light';
-                  } else if (theme === 'Light') {
-                     await slice.setTheme('Dark');
-                     theme = 'Dark';
-                  } else if (theme === 'Dark') {
-                     await slice.setTheme('Slice');
-                     theme = 'Slice';
-                  }
-               },
-            },
-         ],
-      });
-
-      this.appendChild(navBar);
-
-      const sliceButton = await slice.build('Button', {
-         value: 'Slice',
-         onClickCallback: () => {
-            if (slice.translator.currentLanguage == 'es') {
-               slice.translator.changeLanguage('en');
-            } else {
-               slice.translator.changeLanguage('es');
-            }
-         },
-      });
-      const sliceInput = await slice.build('Input', {
-         placeholder: 'Enter text here...',
-      });
-      const checkbox = await slice.build('Checkbox', {
-         label: 'Check',
-         position: 'top',
-      });
-
-      const sliceSwitch = await slice.build('Switch', {
-         label: 'Switch',
-         labelPlacement: 'left',
-      });
-      const select = await slice.build('Select', {
-         options: [
-            { value: 'Hola', id: 0 },
-            { value: 'Hello', id: 1 },
-            { value: 'Hallo', id: 2 },
-            { value: 'Hi', id: 3 },
-            { value: 'Hola', id: 4 },
-            { value: 'Hello', id: 5 },
-            { value: 'Hallo', id: 6 },
-            { value: 'Hi', id: 7 },
-         ],
-         visibleProp: 'id',
-         label: 'Elige una opcion',
-         multiple: true,
-      });
-      const sliceCard = await slice.build('Card', {
-         sliceId: 'prueba',
-      });
-      const details = await slice.build('Details', {
-         title: 'Slice',
-         text: 'Slice details text',
-      });
-
-      const grid = document.createElement('div');
-      grid.classList.add('indexGrid');
-
-      sliceButton.classList.add('indexGridItem');
-      sliceInput.classList.add('indexGridItem');
-      sliceSwitch.classList.add('indexGridItem');
-      select.classList.add('indexGridItem');
-      checkbox.classList.add('indexGridItem');
-      details.classList.add('indexGridItem');
-
-      grid.appendChild(sliceButton);
-      grid.appendChild(sliceInput);
-      grid.appendChild(sliceSwitch);
-      grid.appendChild(select);
-      grid.appendChild(checkbox);
-      grid.appendChild(sliceCard);
-      grid.appendChild(details);
-
-      this.appendChild(grid);
-   }
-}
-
-customElements.define('slice-playground', Playground);

package/ProjectTemplate/src/Components/AppComponents/SliceTeamCard/SliceTeamCard.css

@@ -1,104 +0,0 @@
-slice-team-card {
-  display: block;
-  width: 100%;
-  max-width: 800px;
-  margin: 20px auto;
-  font-family: var(--font-family);
-}
-
-.slice_team_card {
-  display: flex;
-  align-items: center;
-  padding: 20px;
-  background: var(--primary-background-color);
-  border: 1px solid var(--medium-color);
-  border-radius: 12px;
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
-  transition: transform 0.3s ease-in-out;
-  width: 100%;
-}
-
-.slice_team_card:hover {
-  transform: scale(1.02);
-}
-
-/* Imagen circular */
-.team_card_image {
-  flex: 0 0 120px;
-  height: 120px;
-  border-radius: 50%;
-  overflow: hidden;
-  margin-right: 20px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background: var(--light-gray);
-}
-
-.team_card_image img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  border-radius: 50%;
-}
-
-/* Contenido de la tarjeta */
-.team_card_content {
-  flex: 1;
-}
-
-.team_card_name {
-  margin: 0;
-  font-size: 1.5rem;
-  font-weight: bold;
-  color: var(--font-primary-color);
-}
-
-.team_card_role {
-  margin: 5px 0;
-  font-size: 1rem;
-  color: var(--medium-contrast);
-}
-
-.team_card_description {
-  font-size: 0.9rem;
-  color: var(--medium-contrast);
-  margin-top: 5px;
-}
-
-/* Links */
-.team_card_links {
-  margin-top: 10px;
-  display: flex;
-  gap: 10px;
-}
-
-.team_card_links a {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 8px 12px;
-  background: var(--primary-color);
-  color: var(--primary-color-contrast);
-  border-radius: 8px;
-  text-decoration: none;
-  transition: background 0.3s;
-  font-weight: bold;
-}
-
-.team_card_links a:hover {
-  background: var(--secondary-color);
-}
-
-/* Responsive */
-@media (max-width: 600px) {
-  .slice_team_card {
-    flex-direction: column;
-    text-align: center;
-  }
-
-  .team_card_image {
-    margin-bottom: 15px;
-    margin-right: 0;
-  }
-}

package/ProjectTemplate/src/Components/AppComponents/SliceTeamCard/SliceTeamCard.html

@@ -1,12 +0,0 @@
-<div class="slice_team_card">
-    <div class="team_card_image">
-       <img src="" alt="Profile Image">
-    </div>
-    <div class="team_card_content">
-       <h3 class="team_card_name"></h3>
-       <p class="team_card_role"></p>
-       <p class="team_card_description"></p>
-       <div class="team_card_links"></div>
-    </div>
- </div>
- 

package/ProjectTemplate/src/Components/AppComponents/SliceTeamCard/SliceTeamCard.js

@@ -1,74 +0,0 @@
-export default class SliceTeamCard extends HTMLElement {
-  constructor(props) {
-     super();
-     slice.attachTemplate(this);
-
-     this.$imageContainer = this.querySelector('.team_card_image img'); 
-     this.$name = this.querySelector('.team_card_name');
-     this.$role = this.querySelector('.team_card_role');
-     this.$description = this.querySelector('.team_card_description');
-     this.$links = this.querySelector('.team_card_links');
-
-     slice.controller.setComponentProps(this, props);
-     this.debuggerProps = ['name', 'role', 'image', 'description', 'links'];
-  }
-
-  get name() {
-     return this._name;
-  }
-
-  set name(value) {
-     this._name = value;
-     if (this.$name) this.$name.textContent = value;
-  }
-
-  get role() {
-     return this._role;
-  }
-
-  set role(value) {
-     this._role = value;
-     if (this.$role) this.$role.textContent = value;
-  }
-
-  get image() {
-     return this._image;
-  }
-
-  set image(value) {
-     this._image = value;
-     if (this.$imageContainer) {
-        this.$imageContainer.src = value;
-        this.$imageContainer.alt = value ? `${this._name} profile picture` : 'Profile image';
-     }
-  }
-
-  get description() {
-     return this._description;
-  }
-
-  set description(value) {
-     this._description = value;
-     if (this.$description) this.$description.textContent = value;
-  }
-
-  get links() {
-     return this._links;
-  }
-
-  set links(values) {
-     this._links = values;
-     if (this.$links) {
-        this.$links.innerHTML = ''; // Limpiar enlaces previos
-        values.forEach(link => {
-           const a = document.createElement('a');
-           a.href = link.href;
-           a.textContent = link.label;
-           a.target = '_blank';
-           this.$links.appendChild(a);
-        });
-     }
-  }
-}
-
-window.customElements.define('slice-team-card', SliceTeamCard);

package/ProjectTemplate/src/Components/AppComponents/SwitchDocumentation/SwitchDocumentation.css

@@ -1,21 +0,0 @@
-.switchs {
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-  }
-  .labelSwitch {
-    display: grid;
-    align-items: end;
-    grid-template-columns: repeat(2, 1fr);
-    grid-template-rows: repeat(1, 1fr);
-    gap: 10px;
-    margin: 0 auto;
-  }
-  
-  @media only screen and (max-width: 770px) {
-    .labelSwitch {
-      grid-template-columns: repeat(1, 1fr);
-    }
-  }

package/ProjectTemplate/src/Components/AppComponents/SwitchDocumentation/SwitchDocumentation.html

@@ -1,35 +0,0 @@
-<h1 id="sliceSwitch">Slice Switch</h1>
-<div class="mySwitch">
-  <p>This is a Slice Switch.</p>
-</div>
-<div class="colorSwitch">
-  <h2 id="customColor">Custom color</h2>
-  <p>
-    You cand customize your Slice Switch by changing it's color with the color
-    prop
-  </p>
-</div>
-<h1 id="label">Label</h1>
-<div class="label">
-  <p>You can set a label to your switch.</p>
-</div>
-<h2 id="labelPlacement">Label Placement</h2>
-<p>You can also set in wich position to put the label to.</p>
-<div class="labelSwitch">
-  <div class="labelLeft">
-    <h2>Left</h2>
-    <p>This label is positioned at left.</p>
-  </div>
-  <div class="labelTop">
-    <h2>Top</h2>
-    <p>This label is positioned at top.</p>
-  </div>
-  <div class="labelRight">
-    <h2>Right (default)</h2>
-    <p>This label is positioned at right.</p>
-  </div>
-  <div class="labelBottom">
-    <h2>Bottom</h2>
-    <p>This label is positioned at bottom.</p>
-  </div>
-</div>