slicejs-cli 2.0.5 → 2.0.6

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,103 @@
+export default class SwitchDocumentation extends HTMLElement {
+   constructor(props) {
+      super();
+      slice.attachTemplate(this);
+
+      slice.controller.setComponentProps(this, props);
+      this.debuggerProps = [];
+   }
+
+   async init() {
+      await this.createSwitch(this.querySelector('.mySwitch'), {}, `{}`);
+      await this.createSwitch(
+         this.querySelector('.colorSwitch'),
+         { customColor: 'gold' },
+         `{ 
+        customColor: "gold" 
+      }`
+      );
+      await this.createSwitch(
+         this.querySelector('.label'),
+         {
+            label: 'Switch',
+         },
+         `{
+        label: "Switch",
+      }`
+      );
+      await this.createSwitch(
+         this.querySelector('.labelLeft'),
+         {
+            label: 'Left',
+            labelPlacement: 'left',
+         },
+         `{
+        label: "Left",
+        labelPlacement: "left",
+      }`
+      );
+      await this.createSwitch(
+         this.querySelector('.labelTop'),
+         {
+            label: 'Top',
+            labelPlacement: 'top',
+         },
+         `{
+        label: "Top",
+        labelPlacement: "top",
+      }`
+      );
+      await this.createSwitch(
+         this.querySelector('.labelRight'),
+         {
+            label: 'Right',
+            labelPlacement: 'right',
+         },
+         `{
+        label: "Right",
+        labelPlacement: "right",
+      }`
+      );
+      await this.createSwitch(
+         this.querySelector('.labelBottom'),
+         {
+            label: 'Bottom',
+            labelPlacement: 'bottom',
+         },
+         `{
+        label: "Bottom",
+        labelPlacement: "bottom",
+      }`
+      );
+   }
+
+   async createSwitch(appendTo, switchProps, codeProps) {
+      if (!codeProps) {
+         codeProps = '{}';
+      }
+      const mySwitch = await slice.build('Switch', switchProps);
+
+      const componentCode = await slice.build('CodeVisualizer', {
+         value: `const mySwitch = await slice.build("Switch", ${codeProps});
+
+`,
+         language: 'javascript',
+      });
+
+      const div = document.createElement('div');
+      const switchDiv = document.createElement('div');
+      switchDiv.classList.add('switchs');
+      switchDiv.appendChild(mySwitch);
+      div.classList.add('switchs_container');
+      div.appendChild(switchDiv);
+      div.appendChild(componentCode);
+
+      if (appendTo) {
+         appendTo.appendChild(div);
+      }
+
+      return div;
+   }
+}
+
+customElements.define('slice-switchdocumentation', SwitchDocumentation);

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

@@ -0,0 +1,23 @@
+.slice_team {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 2rem;
+  margin-top: 80px;  /* Ajusta este valor según la altura de tu navbar */
+  width: 100%;
+}
+
+.slice_team_title {
+  font-size: 2rem;
+  color: var(--font-primary-color);
+  margin-bottom: 1rem;
+  text-align: center;
+}
+
+.slice_team_container {
+  display: flex;
+  flex-direction: column; /* Cambiado para que estén en columna */
+  align-items: center; /* Centrar las tarjetas */
+  gap: 1.5rem;
+  width: 100%;
+}

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

@@ -0,0 +1,6 @@
+ <div class="slice_team">
+      <h2 class="slice_team_title">Our Team</h2>
+      <div class="slice_team_container"></div>
+    </div>
+ 
+