slicejs-web-framework 1.0.19 → 1.0.21

package/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/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/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/src/Components/AppComponents/StructuralDocumentation/StructuralDocumentation.css

@@ -1,72 +0,0 @@
-slice-structuraldocumentation {
-  color: var(--font-primary-color);
-  font-family: var(--font-family);
-}
-
-slice-structuraldocumentation h1,
-slice-structuraldocumentation h2,
-slice-structuraldocumentation h3 {
-  margin-top: 1.5em;
-  margin-bottom: 0.5em;
-}
-
-slice-structuraldocumentation p {
-  line-height: 1.6;
-  margin: 1em 0;
-}
-
-slice-structuraldocumentation ul,
-slice-structuraldocumentation ol {
-  margin: 1em 0;
-  padding-left: 2em;
-}
-
-slice-structuraldocumentation li {
-  margin-bottom: 0.5em;
-}
-
-slice-structuraldocumentation code {
-  font-family: monospace;
-  background-color: var(--secondary-background-color);
-  padding: 0.2em 0.4em;
-  border-radius: 3px;
-  font-size: 0.9em;
-}
-
-slice-structuraldocumentation .controller-example,
-slice-structuraldocumentation .router-example,
-slice-structuraldocumentation .styles-manager-example,
-slice-structuraldocumentation .logger-example,
-slice-structuraldocumentation .debugger-example {
-  margin: 1.5em 0;
-}
-
-slice-structuraldocumentation strong {
-  color: var(--primary-color);
-}
-
-slice-structuraldocumentation .faq-section {
-  margin: 2em 0;
-}
-
-slice-structuraldocumentation .faq-section slice-details {
-  margin-bottom: 1em;
-}
-
-slice-structuraldocumentation h2 {
-  border-bottom: 1px solid var(--primary-color-shade);
-  padding-bottom: 0.3em;
-}
-
-slice-structuraldocumentation h3 {
-  color: var(--primary-color);
-}
-
-slice-structuraldocumentation .structural-component {
-  border-left: 3px solid var(--primary-color);
-  padding-left: 1em;
-  margin: 2em 0;
-  background-color: var(--secondary-background-color);
-  border-radius: 0 var(--border-radius-slice) var(--border-radius-slice) 0;
-  padding: 0.5em 1em;
-}

package/src/Components/AppComponents/StructuralDocumentation/StructuralDocumentation.html

@@ -1,98 +0,0 @@
-<h1 id="structuralComponents">Structural Components</h1>
-
-<p>
-  Structural components form the backbone of the Slice.js framework. They provide core functionality like component management, routing, styling, logging, and debugging. Unlike Visual or Service components, Structural components are typically pre-initialized by the framework and accessed through the global <code>slice</code> object.
-</p>
-
-<h2 id="controllerComponent">Controller</h2>
-<p>
-  The Controller manages all component instances, handles component registration, and provides the <code>build()</code> method for creating new components.
-</p>
-
-<h3>Key responsibilities:</h3>
-<ul>
-  <li>Component registration and lifecycle management</li>
-  <li>Template and class loading</li>
-  <li>Component construction and property management</li>
-  <li>Component caching and referencing</li>
-</ul>
-
-<h3>Developer usage:</h3>
-<div class="controller-example"></div>
-
-<h2 id="routerComponent">Router</h2>
-<p>
-  The Router handles navigation between different views in your application, supporting both history-based navigation and route parameters.
-</p>
-
-<h3>Key responsibilities:</h3>
-<ul>
-  <li>Route registration and matching</li>
-  <li>History management and navigation</li>
-  <li>Dynamic route parameters</li>
-  <li>Integration with Route and MultiRoute components</li>
-</ul>
-
-<h3>Developer usage:</h3>
-<div class="router-example"></div>
-
-<h2 id="stylesManagerComponent">StylesManager</h2>
-<p>
-  The StylesManager handles global styles and themes, allowing for dynamic theme switching and consistent styling across the application.
-</p>
-
-<h3>Key responsibilities:</h3>
-<ul>
-  <li>Theme loading and application</li>
-  <li>Component style registration</li>
-  <li>Global style management</li>
-  <li>Theme persistence</li>
-</ul>
-
-<h3>Developer usage:</h3>
-<div class="styles-manager-example"></div>
-
-<h2 id="loggerComponent">Logger</h2>
-<p>
-  The Logger provides a consistent way to log information, warnings, and errors throughout your application.
-</p>
-
-<h3>Key responsibilities:</h3>
-<ul>
-  <li>Error, warning, and info logging</li>
-  <li>Log filtering and retrieval</li>
-  <li>Structured logging with component context</li>
-  <li>Configurable output channels</li>
-</ul>
-
-<h3>Developer usage:</h3>
-<div class="logger-example"></div>
-
-<h2 id="debuggerComponent">Debugger</h2>
-<p>
-  The Debugger provides development tools for inspecting and manipulating components at runtime.
-</p>
-
-<h3>Key responsibilities:</h3>
-<ul>
-  <li>Component property inspection</li>
-  <li>Live property editing</li>
-  <li>Debugging interface</li>
-</ul>
-
-<h3>Developer usage:</h3>
-<div class="debugger-example"></div>
-
-<h2 id="structuralComponentsConfig">Configuration</h2>
-<p>
-  Structural components are primarily configured through the <code>sliceConfig.json</code> file at the root of your project. This allows you to:
-</p>
-<ul>
-  <li>Enable or disable specific features</li>
-  <li>Set default options and behaviors</li>
-  <li>Configure paths and resource locations</li>
-  <li>Control logging, debugging, and theming behavior</li>
-</ul>
-
-<h2 id="structuralComponentsFaq">Frequently Asked Questions</h2>
-<div class="faq-section"></div>

package/src/Components/AppComponents/StructuralDocumentation/StructuralDocumentation.js

@@ -1,219 +0,0 @@
-export default class StructuralDocumentation extends HTMLElement {
-   constructor(props) {
-      super();
-      slice.attachTemplate(this);
-
-      slice.controller.setComponentProps(this, props);
-      this.debuggerProps = [];
-   }
-
-   async init() {
-      // Controller documentation section
-      const controllerExample = await slice.build("CodeVisualizer", {
-         value: `// Accessing components through the Controller
-// Get a reference to a component by its sliceId
-const navbar = slice.controller.getComponent("main-navbar");
-
-// Check if a component is registered
-if (slice.controller.activeComponents.has("user-profile")) {
-   // Component exists
-}
-
-// Get all active components
-const allComponents = slice.controller.activeComponents;
-
-// Register a component manually (rarely needed)
-slice.controller.registerComponent(myComponent);
-
-// Build a component with Controller
-const myButton = await slice.build("Button", {
-   value: "Click Me",
-   sliceId: "my-unique-button-id"
-});`,
-         language: "javascript"
-      });
-      
-      this.querySelector(".controller-example").appendChild(controllerExample);
-
-      // Router documentation section
-      const routerExample = await slice.build("CodeVisualizer", {
-         value: `// Declaring routes in routes.js
-const routes = [
-   { path: "/", component: "LandingPage" },
-   { path: "/documentation", component: "DocumentationPage" },
-   { 
-      path: "/user/$id", // Dynamic route parameter
-      component: "UserProfile" 
-   },
-   { path: "/404", component: "NotFound" }
-];
-
-export default routes;
-
-// Navigating with Router in your components
-// Navigate programmatically
-await slice.router.navigate("/documentation");
-
-// Get current route information
-const currentRoute = slice.router.activeRoute;
-
-// Create a Route component in your HTML
-const routeComponent = await slice.build("Route", {
-   path: "/documentation",
-   component: "DocumentationPage"
-});
-
-// Create a MultiRoute component for multiple routes
-const multiRouteComponent = await slice.build("MultiRoute", {
-   routes: [
-      { path: "/docs/visual", component: "VisualDocumentation" },
-      { path: "/docs/service", component: "ServiceDocumentation" }
-   ]
-});`,
-         language: "javascript"
-      });
-      
-      this.querySelector(".router-example").appendChild(routerExample);
-
-      // StylesManager documentation section
-      const stylesManagerExample = await slice.build("CodeVisualizer", {
-         value: `// Configuring themes in sliceConfig.json
-{
-   "themeManager": {
-      "enabled": true,
-      "defaultTheme": "Light",
-      "saveThemeLocally": true,
-      "useBrowserTheme": false
-   }
-}
-
-// Theme file structure (e.g., Light.css)
-:root {
-   --font-primary-color: #000;
-   --primary-color: #0066ff;
-   --primary-background-color: #fff;
-   // ...more theme variables
-}
-
-// Switching themes in your components
-// Change the current theme
-await slice.setTheme("Dark");
-
-// Get the current theme
-const currentTheme = slice.theme;
-
-// Access StylesManager directly (rarely needed)
-slice.stylesManager.appendComponentStyles(".my-custom-style { color: red; }");`,
-         language: "javascript"
-      });
-      
-      this.querySelector(".styles-manager-example").appendChild(stylesManagerExample);
-
-      // Logger documentation section
-      const loggerExample = await slice.build("CodeVisualizer", {
-         value: `// Configuring logger in sliceConfig.json
-{
-   "logger": {
-      "enabled": true,
-      "showLogs": {
-         "console": {
-            "error": true,
-            "warning": true,
-            "info": false
-         }
-      }
-   }
-}
-
-// Using Logger in your components
-// Log an error
-slice.logger.logError("MyComponent", "Failed to load data", error);
-
-// Log a warning
-slice.logger.logWarning("MyComponent", "Data partially loaded");
-
-// Log information
-slice.logger.logInfo("MyComponent", "Component initialized");
-
-// Get all logs
-const allLogs = slice.logger.getLogs();
-
-// Get logs by type
-const errorLogs = slice.logger.getLogsByLogType("error");
-
-// Get logs for a specific component
-const componentLogs = slice.logger.getLogsByComponent("my-component");
-
-// Clear logs
-slice.logger.clearLogs();`,
-         language: "javascript"
-      });
-      
-      this.querySelector(".logger-example").appendChild(loggerExample);
-
-      // Debugger documentation section
-      const debuggerExample = await slice.build("CodeVisualizer", {
-         value: `// Configuring debugger in sliceConfig.json
-{
-   "debugger": {
-      "enabled": true,
-      "click": "right" // "right" for right-click, "left" for left-click
-   }
-}
-
-// Defining debug properties in components
-export default class MyComponent extends HTMLElement {
-   constructor(props) {
-      super();
-      slice.attachTemplate(this);
-      
-      slice.controller.setComponentProps(this, props);
-      // Specify which properties can be inspected in the debugger
-      this.debuggerProps = ["value", "color", "isActive", "items"];
-   }
-   
-   // ...rest of component code
-}`,
-         language: "javascript"
-      });
-      
-      this.querySelector(".debugger-example").appendChild(debuggerExample);
-
-      // FAQ section
-      const faqQuestions = [
-         {
-            title: "Can I create my own structural components?",
-            text: "No. Structural components are part of the core Slice.js framework and are not meant to be created or modified by users."
-         },
-         {
-            title: "How do I configure structural components?",
-            text: "Most structural components are configured through the sliceConfig.json file in your project root. This file allows you to enable/disable features and set various configuration options for each structural component."
-         },
-         {
-            title: "How are structural components initialized?",
-            text: "Structural components are automatically initialized during the Slice.js bootstrap process in Slice.js. The initialization sequence is controlled by the Slice.js core and ensures components are loaded in the correct order to resolve dependencies."
-         },
-         {
-            title: "Can I access structural components directly?",
-            text: "Yes, most structural components are accessible through the global slice object, such as slice.controller, slice.router, slice.logger, etc. However, direct manipulation should be done carefully and only when necessary."
-         },
-         {
-            title: "How do I extend the Router for advanced functionality?",
-            text: "For advanced routing needs, you can implement route guards or middleware by extending the existing Router through service components. Create a custom RouterService that wraps the structural Router and adds your custom logic for route authorization, data prefetching, or analytics tracking."
-         }
-      ];
-
-      const faqContainer = this.querySelector(".faq-section");
-      
-      for (const question of faqQuestions) {
-         const detailsComponent = await slice.build("Details", {
-            title: question.title,
-            text: question.text
-         });
-         
-         faqContainer.appendChild(detailsComponent);
-      }
-   }
-}
-
-customElements.define("slice-structuraldocumentation", StructuralDocumentation);

package/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/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>