ywana-core8 0.1.83 → 0.1.85

package/dist/index.css

@@ -815,6 +815,212 @@ td.actions {
         color: black !important;
     }
 }
+.menu-icon {
+  position: relative;
+}
+
+/* Solución simple: z-index muy alto para que aparezca por encima de todo */
+
+.menu-icon > .overlay {
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  width: 100vw;
+  height: 100vh;
+  z-index: 9998;
+  background-color: transparent;
+}
+
+.menu-icon > menu {
+  z-index: 9999;
+  position: absolute;
+  top: 3rem;
+  left: 0px;
+  margin: 0;
+  border: solid 1px var(--divider-color);
+  background-color: var(--paper-color);
+  padding: 0;
+  min-width: 7rem;
+  max-width: 14rem;
+  max-height: 50vh;
+  overflow: auto;
+  box-shadow: var(--shadow1);
+}
+
+.menu-icon > menu.alignRight {
+  left: unset;
+  right: 0px;
+}
+
+.menu-icon > menu.alignLeft {
+  left: 0px;
+  right: unset;
+}
+
+.menu-icon > menu ul {
+  list-style: none;
+  margin: 0;
+  padding: 0.5rem 0;
+  cursor: pointer;
+}
+
+.menu-icon > menu li {
+  min-height: 3rem;
+  padding: 0 0.5rem;
+  display: flex;
+  align-items: center;
+}
+
+.menu-icon > menu li:hover {
+  background-color: var(--primary-color-lighter);
+}
+
+.menu-item {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.menu-item > .icon {
+  color: var(--text-color-light);
+  cursor: pointer;
+}
+
+.menu-item > label {
+  flex: 1;
+  white-space: nowrap;
+  padding: 0 0.5rem 0 0;
+  color: var(--text-color);
+  font-size: 0.9rem;
+  cursor: pointer;
+}
+
+.menu-item.disabled > label,
+.menu-item.disabled > .icon {
+  color: var(--text-color-lighter);
+  cursor: initial;
+}
+
+.menu-item > .meta {
+  color: var(--text-color-lighter);
+}
+
+.menu-separator {
+  min-height: 0px !important;
+  height: 1px;
+  border-top: solid 1px var(--divider-color);
+}
+
+/* ActionsCell Component Styles */
+
+.actions-cell {
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-end;
+    position: relative;
+}
+
+/* Modo directo - acciones visibles */
+.actions-cell--direct {
+    overflow: hidden;
+}
+
+.actions-cell__content {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+/* Modo menú - icono de menú */
+.actions-cell--menu {
+    /* Los estilos del menú se heredan de menu.css */
+}
+
+/* Integración con List */
+.list__item-actions .actions-cell {
+    opacity: 0;
+    transition: opacity 0.2s ease;
+}
+
+.list__item:hover .list__item-actions .actions-cell,
+.list__item-actions--visible .actions-cell {
+    opacity: 1;
+}
+
+/* Integración con Accordion */
+.accordion__actions .actions-cell {
+    /* Siempre visible en accordions */
+    opacity: 1;
+}
+
+/* Integración con Header */
+.header .actions-cell {
+    /* Siempre visible en headers */
+    opacity: 1;
+}
+
+/* Responsive behavior */
+@media (max-width: 768px) {
+    .actions-cell--direct {
+        /* En móviles, forzar modo menú más agresivamente */
+        max-width: 100px;
+    }
+    
+    .actions-cell__content {
+        gap: 2px;
+    }
+}
+
+/* Estados de botones dentro de ActionsCell */
+.actions-cell .button {
+    flex-shrink: 0;
+}
+
+.actions-cell .button--small {
+    min-width: auto;
+    padding: 4px 8px;
+}
+
+.actions-cell .button--icon-only {
+    min-width: 32px;
+    width: 32px;
+    height: 32px;
+    padding: 4px;
+}
+
+/* Animaciones suaves */
+.actions-cell {
+    transition: all 0.2s ease;
+}
+
+.actions-cell__content {
+    transition: transform 0.2s ease;
+}
+
+/* Estados de hover para mejor UX */
+.actions-cell:hover .actions-cell__content {
+    transform: translateX(-2px);
+}
+
+/* Alineación del menú */
+.actions-cell--menu .menu-icon menu.left {
+    right: auto;
+    left: 0;
+}
+
+.actions-cell--menu .menu-icon menu.right {
+    left: auto;
+    right: 0;
+}
+
+.actions-cell--menu .menu-icon menu.center {
+    left: 50%;
+    transform: translateX(-50%);
+}
+
 .btn {
   position: relative;
   padding: .2rem .5rem;
@@ -2713,13 +2919,18 @@ input:checked~.checkmark:after {
 
 .textfield>.icon {
   position: absolute;
-  top: 1.5rem;
+  top: 50%;
   right: .2rem;
+  transform: translateY(-50%);
   color: rgba(150,150,150,1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .textfield-outlined.no-label > .icon {
-  top: .5rem;
+  top: 50%;
+  transform: translateY(-50%);
 }
 
 .textfield-date>.icon,
@@ -2829,8 +3040,12 @@ input:read-only ~ label,
 
 .dropdown>.icon {
   position: absolute;
-  top: 1.7rem;
+  top: 50%;
   right: .2rem;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .dropdown>.decorator {
@@ -2843,9 +3058,13 @@ input:read-only ~ label,
 .dropdown>.textfield>.icon,
 .dropdown>.textfield-outlined>.icon {
   position: absolute;
-  top: 1.7rem;
+  top: 50%;
   right: 2rem;
+  transform: translateY(-50%);
   color: rgba(150,150,150,1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .dropdown>menu {
@@ -3548,96 +3767,6 @@ textarea:read-only ~ label,
   }
 }
 
-.menu-icon {
-  position: relative;
-}
-
-.menu-icon > .overlay {
-  position: fixed;
-  top: 0px;
-  left: 0px;
-  width: 100vw;
-  height: 100vh;
-  z-index: 5;
-  background-color: transparent;
-}
-
-.menu-icon > menu {
-  z-index: 6;
-  position: absolute;
-  top: 3rem;
-  left: 0px;
-  margin: 0;
-  border: solid 1px var(--divider-color);
-  background-color: var(--paper-color);
-  padding: 0;
-  min-width: 7rem;
-  max-width: 14rem;
-  max-height: 50vh;
-  overflow: auto;
-  box-shadow: var(--shadow1);
-}
-
-.menu-icon > menu.alignRight {
-  left: unset;
-  right: 0px;
-}
-
-.menu-icon > menu ul {
-  list-style: none;
-  margin: 0;
-  padding: 0.5rem 0;
-  cursor: pointer;
-}
-
-.menu-icon > menu li {
-  min-height: 3rem;
-  padding: 0 0.5rem;
-  display: flex;
-  align-items: center;
-}
-
-.menu-icon > menu li:hover {
-  background-color: var(--primary-color-lighter);
-}
-
-.menu-item {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-}
-
-.menu-item > .icon {
-  color: var(--text-color-light);
-  cursor: pointer;
-}
-
-.menu-item > label {
-  flex: 1;
-  white-space: nowrap;
-  padding: 0 0.5rem 0 0;
-  color: var(--text-color);
-  font-size: 0.9rem;
-  cursor: pointer;
-}
-
-.menu-item.disabled > label,
-.menu-item.disabled > .icon {
-  color: var(--text-color-lighter);
-  cursor: initial;
-}
-
-.menu-item > .meta {
-  color: var(--text-color-lighter);
-}
-
-.menu-separator {
-  min-height: 0px !important;
-  height: 1px;
-  border-top: solid 1px var(--divider-color);
-}
-
 /* Original Property styles (preserved for compatibility) */
 .property {
     flex:1;
@@ -4718,6 +4847,7 @@ textarea:read-only ~ label,
 
 .datatable8 table {
     width: 100%;
+    table-layout: auto;
 }
 
 .datatable8 thead  {
@@ -4772,7 +4902,26 @@ textarea:read-only ~ label,
     white-space: nowrap;
     max-width: 10rem;
     color: var(--text-color-light);
-}   
+}
+
+/* Columna de acciones - ajuste automático al contenido */
+.datatable8 tbody td.actions {
+    max-width: none !important;
+    width: auto;
+    min-width: auto;
+    white-space: nowrap;
+    padding: 0 0.25rem;
+    text-align: right;
+    overflow: visible;
+    text-overflow: unset;
+}
+
+/* Header de columna de acciones */
+.datatable8 thead th.actions {
+    width: auto;
+    min-width: auto;
+    padding: 0 0.25rem;
+}
 
 .datatable8 tbody td.index {
     width: 3rem;
@@ -4790,6 +4939,17 @@ textarea:read-only ~ label,
     border-color: var(--text-color-lighter) !important;
 }
 
+.datatable8 tbody td.actions>div {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 0.25rem;
+    overflow: visible;
+    min-width: -moz-max-content;
+    min-width: max-content;
+}
+
 .datatable8 .string-viewer img {
     height: 5rem;
 }
@@ -4798,6 +4958,22 @@ textarea:read-only ~ label,
     resize: horizontal;
     overflow: hidden;
 }
+
+/* Columna de info - ancho mínimo para el icono de expansión */
+.datatable8 thead th[style*="width: 3rem"] {
+    width: 3rem !important;
+    min-width: 3rem;
+    max-width: 3rem;
+    padding: 0 0.5rem;
+}
+
+.datatable8 tbody td:last-child {
+    width: 3rem;
+    min-width: 3rem;
+    max-width: 3rem;
+    padding: 0 0.5rem;
+    text-align: center;
+}
 /* DataTable2 - Reimplemented with minimal, elegant styles */
 
 /* Base table styles */
@@ -4819,6 +4995,8 @@ textarea:read-only ~ label,
     width: 100%;
     border-collapse: collapse;
     table-layout: auto;
+    overflow: visible !important;
+
 }
 
 /* Header styles */
@@ -6179,13 +6357,48 @@ body.datatable2-resizing {
 }
 
 /* Special cell types */
-.datatable2__select-cell,
-.datatable2__actions-cell {
-    width: 48px;
+.datatable2__select-cell {
+    width: auto;
+    min-width: 48px;
     text-align: center;
     padding: 8px;
 }
 
+.datatable2__actions-cell {
+    width: 1%;
+    white-space: nowrap;
+    text-align: right;
+    padding: 8px;
+    vertical-align: middle;
+}
+
+.datatable2__actions-header {
+    width: 1%;
+    white-space: nowrap;
+    text-align: right;
+    padding: 8px;
+}
+
+/* Actions container and items */
+.datatable2__actions-container {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 4px;
+    flex-wrap: nowrap;
+}
+
+.datatable2__action-item {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+}
+
+.datatable2__expand-icon {
+    margin-left: 4px;
+}
+
 .datatable2__row-number {
     width: 60px;
     text-align: center;
@@ -7907,13 +8120,16 @@ body.datatable2-resizing {
     align-items: center;
     font: 1rem;
     color: var(--text-color-light);
+    cursor: pointer;
+    width: 100%;
+    min-height: 2rem;
+    padding: 0.25rem 0;
 }
 
 .tree-item:hover {
-    cursor: pointer;
     background-color: var(--background-color);
     font-weight: 500;
-} 
+}
 
 .tree-item.final {
     margin-left: 1rem;
@@ -7928,6 +8144,7 @@ body.datatable2-resizing {
 
 .tree-item>i {
     padding-left: .3rem;
+    pointer-events: none;
 }
 
 .tree-item>.label {
@@ -7936,10 +8153,10 @@ body.datatable2-resizing {
     display: flex;
     align-items: center;
     justify-content: space-between;
+    pointer-events: none;
 }
 
 .tree-item>.label.clickable:hover {
-    cursor: pointer;
     color: var(--accent-color);
 }
 
@@ -7949,11 +8166,13 @@ body.datatable2-resizing {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    pointer-events: none;
 }
 
 .tree-item>.actions {
     padding: 0 .5rem;
     color: var(--text-color-lighter);
+    pointer-events: auto;
 }
 
 .tree-item>.actions .rmwc-icon {
@@ -7988,14 +8207,42 @@ body.datatable2-resizing {
     padding-left: 2rem;
 }
 
-/* Tree search */
-.tree__search {
-    padding: 1rem;
+/* Tree header */
+.tree__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.5rem;
     border-bottom: 1px solid var(--divider-color, #e0e0e0);
     background-color: var(--background-color-light, #fafafa);
+    gap: 0.5rem;
     margin-bottom: 0.5rem;
 }
 
+/* When only expand icon is present, align to right */
+.tree__header:has(.tree__expand-control):not(:has(.tree__search)) {
+    justify-content: flex-end;
+}
+
+/* Alternative for browsers that don't support :has() */
+.tree__header--expand-only {
+    justify-content: flex-end;
+}
+
+/* Tree search */
+.tree__search {
+    flex: 1;
+}
+
+/* Tree expand control */
+.tree__expand-control {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 2rem;
+    height: 2rem;
+}
+
 /* Tree controls */
 .tree__controls {
     display: flex;
@@ -8096,6 +8343,7 @@ body.datatable2-resizing {
     display: flex;
     align-items: center;
     margin-right: 0.5rem;
+    pointer-events: none;
 }
 
 /* TreeNode loading */
@@ -8126,7 +8374,7 @@ body.datatable2-resizing {
 
 /* TreeNode children */
 .tree-node__children {
-    margin-left: 1.5rem;
+    margin-left: .8rem;
     border-left: 1px solid var(--divider-color, #e0e0e0);
     padding-left: 0.5rem;
 }