@uxland/primary-shell 3.0.0 → 3.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxland/primary-shell",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "Primaria Shell",
   "author": "UXLand <dev@uxland.es>",
   "homepage": "https://github.com/uxland/harmonix/tree/app#readme",
@@ -26,7 +26,8 @@
   },
   "dependencies": {
     "@uxland/harmonix": "^1.0.0",
-    "axios": "^1.7.2"
+    "axios": "^1.7.2",
+    "@material/web": "^2.1.0"
   },
   "devDependencies": {
     "lit": "^3.1.0",

package/src/UI/components/primaria-shell/primaria-shell.ts

@@ -1,7 +1,7 @@
 import { IRegion, region } from "@uxland/regions";
 import { LitElement, css, html, unsafeCSS } from "lit";
 import { PrimariaRegionHost } from "../../../api/api";
-import { customElement } from "lit/decorators.js";
+import { customElement, state } from "lit/decorators.js";
 import { shellRegions } from "../../../api/region-manager/regions";
 import styles from "./styles.scss?inline";
 import { template } from "./template";
@@ -34,4 +34,11 @@ export class PrimariaShell extends PrimariaRegionHost(LitElement) {
 
   @region({ targetId: "floating-region-container", name: shellRegions.floating })
   floatingRegion: IRegion | undefined;
+
+  @state()
+  sidebarExpanded = false;
+
+  _toggleSidebar() {
+    this.sidebarExpanded = !this.sidebarExpanded;
+  }
 }

package/src/UI/components/primaria-shell/styles.scss

@@ -36,12 +36,87 @@
   height: 100%;
   display: flex;
   .sidebar {
+    // padding: 24px 16px 24px 16px;
     @include layout-vertical;
     @include layout-justified;
+    @include layout-center;
     background: var(--color-primary-800);
-    width: 15%;
+    width: 72px;
     height: 100%;
     color: white;
+    #menu-region-container {
+      min-height: 1px;
+      height: 100%;
+      width: 100%;
+    }
+    #quick-actions-region-container {
+      // min-height: 1px;
+      width: 100%;
+      // padding: 8px;
+    }
+    &[expanded] {
+      width: 252px;
+      @include layout-start;
+    }
+    primaria-menu {
+      margin-top: 24px;
+    }
+    md-menu {
+      cursor: pointer;
+      --md-menu-container-color: white;
+      min-width: 239px;
+      .menu-item {
+        @include layout-horizontal;
+        @include layout-center;
+        @include layout-justified;
+        padding: 1rem;
+        gap: 50px;
+        &:hover {
+          background-color: #f0f0f0;
+        }
+      }
+      color: var(--color-neutral-900);
+    }
+    .create-button-closed {
+      cursor: pointer;
+      background-color: #f0f0f0;
+      border-radius: 8px;
+      width: 40px;
+      height: 40px;
+      @include layout;
+      @include layout-horizontal;
+      @include layout-center;
+      @include layout-center-justified;
+      // &:hover {
+      //   background-color: var(--color-primary-900);
+      //   color: white;
+
+      //   .dss-icon {
+      //     color: white;
+      //   }
+      // }
+    }
+    .create-button-opened {
+      padding: 1px;
+      cursor: pointer;
+      background-color: #f0f0f0;
+      border-radius: 8px;
+      gap: 8px;
+      font-weight: 600;
+      width: 220px;
+      height: 40px;
+      @include layout;
+      @include layout-horizontal;
+      @include layout-center;
+      // &:hover {
+      //   background-color: var(--color-primary-900);
+      //   color: white;
+
+      //   .dss-icon {
+      //     color: white;
+      //   }
+      // }
+    }
   }
   .content {
     display: flex;
@@ -66,3 +141,43 @@
     align-self: center;
   }
 }
+.divider-opened {
+  width: 220px;
+}
+.divider-closed {
+  width: 40px;
+}
+.actions-bottom {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+primaria-menu {
+  padding: 8px;
+  border-radius: 8px;
+  color: var(--color-primary-700);
+}
+.toggle-opened,
+.toggle-closed {
+  cursor: pointer;
+  display: flex;
+  margin-bottom: 24px;
+  padding: 12px;
+  gap: 8px;
+  border-radius: 8px;
+  border: 1px;
+  transition: background-color 0.3s ease;
+  &:hover {
+    background-color: var(--color-primary-900);
+  }
+}
+.toggle-opened {
+  justify-content: flex-start;
+}
+.toggle-closed {
+  justify-content: center;
+}
+.close-menu {
+  @include layout-horizontal-reverse;
+  @include layout-center;
+}

package/src/UI/components/primaria-shell/template.ts

@@ -2,10 +2,13 @@ import "@salut/design-system-salut";
 import "@salut/design-system-salut/css/main.css";
 import "../../fonts/fonts.css";
 import "../../styles/index.css";
-import { html } from "lit";
+import { html, nothing } from "lit";
 import gencatLogo from "../../../UI/images/Gencat_Logotip.svg";
 import salutLogo from "../../../UI/images/Salut_Logotip.svg";
 import { PrimariaShell } from "./primaria-shell";
+import "@material/web/menu/menu.js";
+import "@material/web/menu/menu-item.js";
+import "@material/web/button/filled-button.js";
 
 export const template = (props: PrimariaShell) => html`
 <div class="container">
@@ -23,9 +26,40 @@ export const template = (props: PrimariaShell) => html`
     </div>
   </div>
   <div class="main-container">
-    <div class="sidebar">
+    <div class="sidebar" ?expanded=${props.sidebarExpanded}>
+      <primaria-menu>
+        <div class="${props.sidebarExpanded ? "create-button-opened" : "create-button-closed"} " slot="anchor" id="usage-anchor">
+          <dss-container><span class="dss-icon dss-icon-button--md">add_circle_outline</span></dss-container>${props.sidebarExpanded ? "Crear" : nothing}
+        </div>
+        <md-menu slot="content" id="content" anchor="usage-anchor">
+          <div id="quick-actions-region-container"></div>
+        </md-menu>
+      </primaria-menu>
       <div id="menu-region-container"></div>
-      <div id="quick-actions-region-container"></div>
+      <hr class="dss-divider--bold ${props.sidebarExpanded ? "divider-opened" : "divider-closed"}" />
+      <div class="actions-bottom">
+          <div>
+            <primaria-menu-item
+              icon="add_box"
+              label="Menu Item"
+            ></primaria-menu-item>
+            <primaria-menu-item
+              icon="add_box"
+              label="Menu Item"
+            ></primaria-menu-item>
+            <primaria-menu-item
+              icon="add_box"
+              label="Menu Item"
+            ></primaria-menu-item>
+            <primaria-menu-item
+              icon="add_box"
+              label="Menu Item"
+            ></primaria-menu-item>
+          </div>
+          <div @click=${() => props._toggleSidebar()} class="${props.sidebarExpanded ? "toggle-opened" : "toggle-closed"}">
+            ${!props.sidebarExpanded ? html`<dss-container><span class="dss-icon white dss-icon--fill dss-icon-button--md">expand_circle_right</span></dss-container>` : html`<dss-container class="close-menu"><span class="dss-icon white dss-icon--fill dss-icon-button--md" style="transform: rotate(180deg);">expand_circle_right</span>Tancar Menu</dss-container>`}
+          </div>
+        </div>
     </div>
     <div class="content">
       <div id="floating-region-container"></div>

package/src/UI/shared-components/index.ts

@@ -1,5 +1,6 @@
 import "./primaria-content-switcher/primaria-content-switcher";
 import "./primaria-menu-item/primaria-menu-item";
+import "./primaria-menu/primaria-menu";
 import "./primaria-text-editor/primaria-rich-text-editor";
 export * from "./primaria-interaction";
 import "./dss-container/dss-container";

package/src/UI/shared-components/primaria-menu/primaria-menu.ts

@@ -0,0 +1,51 @@
+import { LitElement, html, css, unsafeCSS } from "lit";
+import { template } from "./template";
+import styles from "./styles.scss?inline";
+import { customElement, property, state } from "lit/decorators.js";
+
+@customElement("primaria-menu")
+export class PrimariaMenu extends LitElement {
+  render() {
+    return html`${template(this)}`;
+  }
+
+  static styles = css`
+    ${unsafeCSS(styles)}
+  `;
+
+  firstUpdated(p) {
+    super.firstUpdated(p);
+    // Escuchar por cambios en el contenido del slot
+    const slot = this.shadowRoot?.querySelector('slot[name="anchor"]');
+    slot?.addEventListener("slotchange", this.handleSlotChange.bind(this));
+  }
+
+  handleSlotChange(event) {
+    const slot = event.target;
+    const assignedElements = slot.assignedElements();
+
+    // Si hay algún elemento asignado al slot
+    if (assignedElements.length > 0) {
+      const element = assignedElements[0]; // Asumimos que el primer elemento es el botón
+      if (element.id === "usage-anchor") {
+        // Añadir el listener de evento
+        element.addEventListener("click", this._handleOpenMenu.bind(this));
+      }
+    }
+  }
+
+  _handleOpenMenu(e) {
+    // Obtener el otro slot (target-slot)
+    const targetSlot = this.shadowRoot?.querySelector('slot[name="content"]');
+
+    // Obtener los elementos asignados al otro slot
+    const assignedElements = targetSlot?.assignedElements();
+
+    // Hacer target al elemento que deseas (por ejemplo, un <p>)
+    const targetElement = assignedElements.find((el) => el.id === "content");
+    if (targetElement) {
+      // Modificar el contenido o estilo del elemento
+      targetElement.show();
+    }
+  }
+}

package/src/UI/shared-components/primaria-menu/template.ts

@@ -0,0 +1,9 @@
+import { html } from "lit";
+import { PrimariaMenu } from "./primaria-menu";
+
+export const template = (props: PrimariaMenu) => html`
+<span style="position: relative">
+  <slot name="anchor"></slot>
+  <slot name="content"></slot>
+</span>
+`;

package/src/UI/shared-components/primaria-menu-item/primaria-menu-item.ts

@@ -1,7 +1,7 @@
 import { LitElement, html, css, unsafeCSS } from "lit";
 import { template } from "./template";
 import styles from "./styles.scss?inline";
-import { customElement } from "lit/decorators.js";
+import { customElement, property, state } from "lit/decorators.js";
 
 @customElement("primaria-menu-item")
 export class PrimariaMenuItem extends LitElement {
@@ -11,6 +11,7 @@ export class PrimariaMenuItem extends LitElement {
     this.label = label;
     this.callbackFn = callbackFn;
   }
+
   render() {
     return html`${template(this)}`;
   }
@@ -19,7 +20,28 @@ export class PrimariaMenuItem extends LitElement {
     ${unsafeCSS(styles)}
   `;
 
-  icon: string;
-  label: string;
-  callbackFn: () => void;
+  firstUpdated(p) {
+    super.firstUpdated(p);
+    this.observeHostResize();
+  }
+
+  observeHostResize() {
+    const parentElement = this.parentElement;
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const width = entry.target.clientWidth; // Obtenemos el ancho del host
+        this.showText = width > 100; // Mostrar texto si el ancho del host es mayor que 150px
+      }
+    });
+
+    // Observamos el tamaño del padre host del componente
+    observer.observe(parentElement as HTMLElement);
+  }
+
+  @property({ type: Number }) containerWidth = 0;
+  @state() showText = false;
+
+  @property({ type: String }) icon = "";
+  @property({ type: String }) label = "";
+  @property({ type: Function }) callbackFn = () => {};
 }

package/src/UI/shared-components/primaria-menu-item/styles.scss

@@ -1,10 +1,19 @@
 .item {
-  display:flex;
-  flex-direction:row;
+  display: flex;
+  flex-direction: row;
   cursor: pointer;
   border-radius: 8px;
   border: 1px;
   border-color: white;
-  padding: 8px;
+  padding: 12px;
   gap: 8px;
+  box-sizing: border-box;
+  justify-content: center;
+  transition: background-color 0.3s ease;
+  &[expanded] {
+    justify-content: flex-start;
+  }
+  &:hover {
+    background-color: var(--color-primary-900);
+  }
 }

package/src/UI/shared-components/primaria-menu-item/template.ts

@@ -2,7 +2,17 @@ import { html } from "lit";
 import { PrimariaMenuItem } from "./primaria-menu-item";
 
 export const template = (props: PrimariaMenuItem) => html`
-<div class="item" @click=${props.callbackFn}>
+<div class="item" @click=${props.callbackFn} ?expanded=${props.showText}>
     <dss-container><i class="dss-icon dss-icon--md">${props.icon}</i></dss-container>
-    <span>${props.label}</span>
+    ${props.showText ? html`<span>${props.label}</span>` : ""}
+    
+
+    <!-- <dss-container class="menu-item-container">
+        <i class="dss-icon dss-icon--md">${props.icon}</i>
+        ${props.showText ? html`<span>${props.label}</span>` : ""}
+        
+        <dss-tooltip class="tooltip" position="right">
+          <span>${props.label} info</span>
+        </dss-tooltip>
+    </dss-container> -->
 </div>`;