@solcre-org/core-ui 2.12.42 → 2.12.44

package/assets/css/inc/components/table.css

@@ -2,16 +2,20 @@
 /** COMPONENT: TABLE
 /* ******************************************** */
 
-.c-table{
+.c-table {
     --_color-base: var(--color-neutral-800);
     --_color-main: var(--color-primary-400);
+    --_color-new: color-mix(in srgb, hsl(var(--color-context-success-hsl)) 10%, white 30%);
+    --_color-editable: color-mix(in srgb, hsl(var(--color-context-waiting-hsl)) 10%, white 30%);
 
     /* General */
     --_fz: var(--fz-000);
     --_fw: 500;
     --_va: middle;
-    --_gap-x: calc( var(--_fz) * 1.231 ); /* 16px based on 13px from --fz-000 */
-    --_padd-y: calc( var(--_fz) * 0.615 ); /* 8px based on 13px from --fz-000 */
+    --_gap-x: calc(var(--_fz) * 1.231);
+    /* 16px based on 13px from --fz-000 */
+    --_padd-y: calc(var(--_fz) * 0.615);
+    /* 8px based on 13px from --fz-000 */
     --_color: var(--_color-base);
     --_bc: var(--color-alternative-100-hsl);
     --_bg: var(--color-neutral-100);
@@ -30,85 +34,201 @@
     width: 100%;
     color: var(--_color);
 }
-.c-table table{
+
+.c-table__order-btn--asc {
+    transform: rotate(180deg);
+}
+
+.c-table__order-btn--desc {
+    transform: rotate(0deg);
+}
+
+.c-table table {
     width: 100%;
     border-collapse: collapse;
     font-size: var(--_fz);
     font-weight: var(--_fw);
     text-align: left;
 }
-.c-table :is(td, th){
+
+.c-table :is(td, th) {
     vertical-align: var(--_va);
     padding-block: var(--_padd-y);
 }
-.c-table thead th{
+
+.c-table thead th {
     padding-top: 0;
 }
-:is(td, th) a{
+
+:is(td, th) a {
     overflow-wrap: break-word;
 }
-.c-table tr > *:not(:first-child){
+
+.c-table tr>*:not(:first-child) {
     padding-left: var(--_gap-x);
 }
 
-.c-table tr> *:first-child{
+.c-table tr>*:first-child {
     padding-left: calc(var(--_gap-x)*.5);
 }
 
-.c-table tr> *:last-child{
+.c-table tr>*:last-child {
     padding-right: calc(var(--_gap-x)*.5);
 }
 
+
 /* Head */
-.c-table thead *{
+.c-table thead * {
     font-size: var(--_head-fz);
     font-weight: var(--_head-fw);
 }
 
 /* Body */
-.c-table td{
+
+/* Is new! */
+
+.c-table tbody tr.is-new {
+    background-color: inherit;
+    animation: showNewEntryTable 1.2s ease-out forwards;
+}
+
+.c-table tbody tr.is-new td:first-child {
+    position: relative;
+}
+
+.c-table tbody tr.is-new td:first-child::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: .3rem;
+    background-color: var(--color-context-success);
+    border-radius: 0 .3rem .3rem 0;
+}
+
+/* Is editable! */
+
+.c-table tbody tr.is-editable {
+    background-color: inherit;
+    animation: editableEntryTable 1.2s ease-out forwards;
+}
+
+.c-table tbody tr.is-editable td:first-child {
+    position: relative;
+}
+
+.c-table tbody tr.is-editable td:first-child::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: .3rem;
+    background-color: var(--color-context-waiting);
+    border-radius: 0 .3rem .3rem 0;
+}
+
+
+
+@keyframes showNewEntryTable {
+    0% {
+        transform: translateY(15px);
+        background-color: var(--_color-new);
+    }
+
+    40% {
+        transform: translateY(0);
+        background-color: var(--_color-new);
+    }
+
+    55% {
+        background-color: hsl(var(--color-neutral-200-hsl)/40%);
+        ;
+    }
+
+    70% {
+        background-color: var(--_color-new);
+    }
+
+    85% {
+        background-color: hsl(var(--color-neutral-200-hsl)/40%);
+        ;
+    }
+
+    100% {
+        background-color: hsl(var(--color-neutral-200-hsl)/40%);
+    }
+}
+
+@keyframes editableEntryTable {
+    0% {
+        opacity: 0;
+        background-color: var(--_color-editable);
+    }
+
+    40% {
+        opacity: 1;
+        background-color: var(--_color-editable);
+    }
+
+    55% {
+        background-color: hsl(var(--color-neutral-200-hsl)/40%);
+        ;
+    }
+
+    100% {
+        background-color: var(--_color-editable);
+    }
+}
+
+
+
+
+.c-table td {
     height: var(--_cell-h);
     border-top: 1px solid hsl(var(--_bc));
 }
-.c-table tbody .is-disabled .c-table__content{
+
+.c-table tbody .is-disabled .c-table__content {
     opacity: 0.4;
 }
-.c-table__content{
+
+.c-table__content {
     padding-bottom: var(--font-visual-correction-t);
 }
 
 /* Actions */
-.c-table__actions{
+.c-table__actions {
     display: flex;
     flex-wrap: nowrap;
     justify-content: inherit;
     gap: var(--_act-gap);
 }
-.u-align-right .c-table__actions{
+
+.u-align-right .c-table__actions {
     justify-content: flex-end;
 }
 
 /* ! Stick cell right */
 
-.c-table .u-stick-right{
+.c-table .u-stick-right {
     position: sticky;
     right: 0;
-    background: linear-gradient(
-        90deg,
-        transparent,
-        var(--_bg) calc( var(--_scroll-w) * 0.5)
-    );
+    background: linear-gradient(90deg,
+            transparent,
+            var(--_bg) calc(var(--_scroll-w) * 0.5));
 }
 
 /* Fixed layout */
 
-.c-table.c-table--fixed{
+.c-table.c-table--fixed {
     table-layout: fixed;
 }
 
 /* ! Scroll trick */
 
-.c-table--scroll{
+.c-table--scroll {
     --fix-hidden-tooltip-height: 70px;
     --fix-hidden-tooltip-width: 70px;
     overflow: hidden;
@@ -133,36 +253,36 @@
     z-index: 1;
 } */
 
-.c-table--scroll table{
+.c-table--scroll table {
     box-shadow: 2px 0 0 var(--_bg);
-    background: linear-gradient(
-        90deg,
-        transparent calc( 100% - var(--_scroll-w) * 3 ),
-        var(--_bg) calc( 100% - var(--_scroll-w) * 2 )
-    );
+    background: linear-gradient(90deg,
+            transparent calc(100% - var(--_scroll-w) * 3),
+            var(--_bg) calc(100% - var(--_scroll-w) * 2));
 }
 
 
 /* Order */
 
-.c-table__order{
+.c-table__order {
     display: inline-flex;
     align-items: center;
     gap: 0.5em;
 }
-.c-table__order [class*="icon-"]{
+
+.c-table__order [class*="icon-"] {
     font-size: max(0.667em, 8px);
     transition: transform var(--trs-duration-700) ease-out;
-    top: max( var(--font-visual-correction-b), 2px );
+    top: max(var(--font-visual-correction-b), 2px);
 }
-.c-table__order.is-active [class*="icon-"]{
+
+.c-table__order.is-active [class*="icon-"] {
     transform: rotate(180deg);
 }
 
 
 /* Order V2 */
 
-.c-table-order{
+.c-table-order {
     --_op: 0.3;
     --_op-current: var(--_op);
 
@@ -172,63 +292,75 @@
     border-radius: 4px;
     white-space: nowrap;
 }
-.c-table-order__controls{
+
+.c-table-order__controls {
     display: flex;
     flex-direction: column;
     /* align-self: stretch; */
 }
-[class*="c-table-order__arrow"]{
+
+[class*="c-table-order__arrow"] {
     opacity: var(--_op-current);
     transition: opacity var(--trs-duration-400) ease-out;
 }
-:root:root:root [class*="c-table-order__arrow"]{
+
+:root:root:root [class*="c-table-order__arrow"] {
     font-size: 8px;
 }
 
 .is-asc .c-table-order__arrow--desc,
-.is-desc .c-table-order__arrow--asc{
+.is-desc .c-table-order__arrow--asc {
     --_op-current: 0.15;
 }
-.is-asc .c-table-order__arrow--asc{ --_op-current: 0.8 }
-.is-desc .c-table-order__arrow--desc{ --_op-current: 0.8 }
 
-@media (hover: hover){
-    .c-table-order:not([disabled],.is-disabled):hover{
-        --_op-current: calc( var(--_op) + 0.1);
+.is-asc .c-table-order__arrow--asc {
+    --_op-current: 0.8
+}
 
-        color: hsl( from var(--_color) h s calc( l - 8 ) );
+.is-desc .c-table-order__arrow--desc {
+    --_op-current: 0.8
+}
+
+@media (hover: hover) {
+    .c-table-order:not([disabled], .is-disabled):hover {
+        --_op-current: calc(var(--_op) + 0.1);
+
+        color: hsl(from var(--_color) h s calc(l - 8));
     }
 }
 
 .c-table-order:is([disabled], .is-disabled),
-.c-table-order:is([disabled], .is-disabled) [class*="c-table-order__arrow"]{
+.c-table-order:is([disabled], .is-disabled) [class*="c-table-order__arrow"] {
     --_op-current: 0.2;
 }
 
 
 /* Context */
 
-.c-table tr[class*="context:error"]{
+.c-table tr[class*="context:error"] {
     background-color: hsl(var(--color-context-error-hsl)/5%);
 }
-.c-table tr[class*="context:success"]{
+
+.c-table tr[class*="context:success"] {
     background-color: hsl(var(--color-context-success-hsl)/5%);
 }
-.c-table tr[class*="context:highlight"]{
+
+.c-table tr[class*="context:highlight"] {
     background-color: hsl(var(--color-context-highlight-hsl)/5%);
 }
-.c-table tr[class*="context:waiting"]{
+
+.c-table tr[class*="context:waiting"] {
     background-color: hsl(var(--color-context-waiting-hsl)/5%);
 }
 
 
 /* BTN */
 
-.c-table .c-btn.c-btn--stroke{
+.c-table .c-btn.c-btn--stroke {
     border-color: var(--color-alternative-100);
 }
 
-.c-table .c-btn.c-btn--stroke:hover{
+.c-table .c-btn.c-btn--stroke:hover {
     --_bg: hsl(from hsl(var(--_color-main-hsl)) h s l / 0.05);
     --_current-color-hsl: from hsl(var(--_color-main-hsl)) h s calc(l - 12);
 }
@@ -236,16 +368,25 @@
 
 /* Mobile title */
 
-.c-table__mobile-heading{
+.c-table__mobile-heading {
     display: none;
 }
 
+/* In modal */
+
+.in-modal .c-table thead th:last-child,
+.c-table tbody td:last-child {
+    text-align: left;
+}
+
 
 /* ********************** MOBILE & TABLET ********************** */
 
-@media (max-width: 61.1875rem) /* up to 979px */ { 
+@media (max-width: 61.1875rem)
+/* up to 979px */
+    {
 
-    .c-table{
+    .c-table {
         --_cell-h: auto;
         --_padd-y: 0;
         --_gap-x: 0;
@@ -258,43 +399,44 @@
     .c-table table,
     .c-table tfoot,
     .c-table tr,
-    .c-table th, td{
+    .c-table th,
+    td {
         display: block;
     }
 
-    .c-table thead{
+    .c-table thead {
         display: none;
     }
 
-    .c-table tbody{
+    .c-table tbody {
         display: flex;
         flex-direction: column;
         gap: var(--_gap-y) 0;
     }
 
-    .c-table tr{
+    .c-table tr {
         border-radius: var(--app-br);
         padding: var(--_card-padding-y) var(--_card-padding-x);
         border: 1px solid hsl(var(--_bc));
     }
 
-    .c-table td{
+    .c-table td {
         border: none;
     }
 
-    .c-table td:first-child{
+    .c-table td:first-child {
         font-weight: 600;
     }
 
-    .c-table td:not(:first-child){
+    .c-table td:not(:first-child) {
         margin-top: .4em;
     }
 
-    .c-table__mobile-heading{
+    .c-table__mobile-heading {
         display: inline-block;
     }
 
-    .c-table__actions{
+    .c-table__actions {
         margin-top: var(--_card-padding-y);
     }
 

package/assets/css/inc/components/tabs.css

@@ -51,12 +51,12 @@
     opacity: .4;
 }
 /* SOLCRE: Estilos de error en TABS */
-.c-tabs__link.has-error{
+.c-tabs__link[class*="context:error"]{
     color: var(--color-context-error);
     border-color: var(--color-context-error);
 }
 
-.c-tabs__link.has-error.is-active{
+.c-tabs__link[class*="context:error"].is-active{
     color: var(--color-context-error);
     box-shadow: 0 var(--_line-w) 0 0 var(--color-context-error);
 }

package/assets/css/main.css

@@ -3,83 +3,86 @@
 /* ******************************************** */
 
 /* Settings */
-/* ✅ */ @import url(inc/settings/sizes.css); 
-/* ✅ */ @import url(inc/settings/colors.css); 
-/* ✅ */ @import url(inc/settings/font-face.css); 
-/* ✅ */ @import url(inc/settings/font.css); 
-/* ✅ */ @import url(inc/settings/transitions.css); 
+ @import url(inc/settings/sizes.css); 
+ @import url(inc/settings/colors.css); 
+ @import url(inc/settings/font-face.css); 
+ @import url(inc/settings/font.css); 
+ @import url(inc/settings/transitions.css); 
 
 /* Generic */
-/* ✅ */ @import url(inc/generic/reset.css);
-/* ✅ */ @import url(inc/generic/screen.css);
-/* ✅ */ @import url(inc/generic/focus.css);
+ @import url(inc/generic/reset.css);
+ @import url(inc/generic/screen.css);
+ @import url(inc/generic/focus.css);
 
 /* Objects */
-/* ✅ */ @import url(inc/objects/section.css);
-/* ✅ */ @import url(inc/objects/layout.css);
-/* ✅ */ @import url(inc/objects/layout.grid.css);
-/* ✅ */ @import url(inc/objects/layout.styles.css);
-/* ✅ */ @import url(inc/objects/grid.css);
+ @import url(inc/objects/section.css);
+ @import url(inc/objects/layout.css);
+ @import url(inc/objects/layout.grid.css);
+ @import url(inc/objects/layout.styles.css);
+ @import url(inc/objects/grid.css);
 
 /* Components */
-/* ✅ */ @import url(inc/components/btn.css);
-/* ✅ */ @import url(inc/components/btn.icon.css);
-/* ✅ */ @import url(inc/components/links.css);
-/* ✅ */ @import url(inc/components/pic.css);
-/* ✅ */ @import url(inc/components/main-nav.css);
-/* ✅ */ @import url(inc/components/main-nav.brand.css);
-/* ✅ */ @import url(inc/components/main-nav.toggle.css);
-/* ✅ */ @import url(inc/components/main-nav.nav.css);
-/* ✅ */ @import url(inc/components/table.css);
-/* ✅ */ @import url(inc/components/header.css);
-/* ✅ */ @import url(inc/components/data-entry.general.css);
-/* ✅ */ @import url(inc/components/data-entry.layout.css);
-/* ✅ */ @import url(inc/components/data-entry.labels.css);
-/* ✅ */ @import url(inc/components/data-entry.input.css);
-/* ✅ */ @import url(inc/components/data-entry.input.numeric.css);
-/* ✅ */ @import url(inc/components/data-entry.toggle.css);
-/* ✅ */ @import url(inc/components/data-entry.select.css);
-/* ✅ */ @import url(inc/components/data-entry.input.datetime.css);
-/* ✅ */ @import url(inc/components/tooltip.css); /* !(new) */
-/* ✅ */ @import url(inc/components/rating.css); /* !(new) */
-/* ✅ */ @import url(inc/components/active-filters.css); /* !(new) */
-/* ✅ */ @import url(inc/components/ticket-list.css); /* !(new) */
-/* ✅ */ @import url(inc/components/steps.css); /* !(new) */
-/* ✅ */ @import url(inc/components/image-preview.css); /* !(new) */
-/* ❌ */ @import url(inc/components/data-entry.input.file.css);/* !(improvisado) */
-/* ❌ */ @import url(inc/components/tag.css); /* !(revisado) */
-/* ❌ */ @import url(inc/components/sidenav.css); /* !(revisado) */
-/* ❌ */ @import url(inc/components/data-list.css); /* !(revisado) */
-/* ❌ */ @import url(inc/components/tabs.css); /* !(revisado) */
-/* ❌ */ @import url(inc/components/bulleted-text.css); /* !(lo armé con estilos muy basicos) */
-/* ❌ */ @import url(inc/components/alert.css); /* !(revisado) */
-/* ❌ */ @import url(inc/components/bottom-alert.css); 
-/* ❌ */ @import url(inc/components/timeline.css);
-/* ❌ */ @import url(inc/components/attachments.css);
-/* ❌ */ @import url(inc/components/hint.css);
-/* ❌ */ @import url(inc/components/doc.css);
-/* ❌ */ @import url(inc/components/pagination.css);
-/* ❌ */ @import url(inc/components/submenu-options.css);
-/* ❌ */ @import url(inc/components/modal.css);
-/* ❌ */ @import url(inc/components/popup.css);
-/* ❌ */ @import url(inc/components/breadcrumb.css);
-/* ❌ */ @import url(inc/components/placeholder.css); /* !(provisorio) */
-/* ❌ */ @import url(inc/components/bottom-nav.css); /* !(test) */
-/* ⭐️ */ @import url(inc/components/calendar.css);
-/* ⭐️ */ @import url(inc/components/progressbar.css);
-/* ✅ */ @import url(inc/components/image-carousel.css); /* !(new) */
-/* ✅ */ @import url(inc/components/skeleton.css); /* !(new) */
-/* ✅ */ @import url(inc/components/chat-layout.css); 
-/* ✅ */ @import url(inc/components/chat-input.css); 
-/* ✅ */ @import url(inc/components/gallery.css); /* !(new) */
+ @import url(inc/components/btn.css);
+ @import url(inc/components/btn.icon.css);
+ @import url(inc/components/links.css);
+ @import url(inc/components/pic.css);
+ @import url(inc/components/main-nav.css);
+ @import url(inc/components/main-nav.brand.css);
+ @import url(inc/components/main-nav.toggle.css);
+ @import url(inc/components/main-nav.nav.css);
+ @import url(inc/components/table.css);
+ @import url(inc/components/header.css);
+ @import url(inc/components/data-entry.general.css);
+ @import url(inc/components/data-entry.layout.css);
+ @import url(inc/components/data-entry.labels.css);
+ @import url(inc/components/data-entry.input.css);
+ @import url(inc/components/data-entry.input.numeric.css);
+ @import url(inc/components/data-entry.toggle.css);
+ @import url(inc/components/data-entry.select.css);
+ @import url(inc/components/data-entry.input.datetime.css);
+ @import url(inc/components/tooltip.css); 
+ @import url(inc/components/rating.css); 
+ @import url(inc/components/active-filters.css); 
+ @import url(inc/components/ticket-list.css); 
+ @import url(inc/components/steps.css); 
+ @import url(inc/components/image-preview.css); 
+ @import url(inc/components/data-entry.input.file.css);
+ @import url(inc/components/tag.css); 
+ @import url(inc/components/sidenav.css); 
+ @import url(inc/components/data-list.css); 
+ @import url(inc/components/tabs.css); 
+ @import url(inc/components/bulleted-text.css); 
+ @import url(inc/components/alert.css);
+ @import url(inc/components/bottom-alert.css); 
+ @import url(inc/components/timeline.css);
+ @import url(inc/components/attachments.css);
+ @import url(inc/components/hint.css);
+ @import url(inc/components/doc.css);
+ @import url(inc/components/pagination.css);
+ @import url(inc/components/submenu-options.css);
+ @import url(inc/components/modal.css);
+ @import url(inc/components/popup.css);
+ @import url(inc/components/breadcrumb.css);
+ @import url(inc/components/placeholder.css); 
+ @import url(inc/components/bottom-nav.css); 
+ @import url(inc/components/calendar.css);
+ @import url(inc/components/progressbar.css);
+ @import url(inc/components/image-carousel.css); 
+ @import url(inc/components/skeleton.css);
+ @import url(inc/components/chat-layout.css); 
+ @import url(inc/components/chat-input.css); 
+ @import url(inc/components/gallery.css); 
+ @import url(inc/components/refresh.css); /* !(new) */
+ @import url(inc/components/area-code.css); /* !(new) */
+ 
 /* Utilities */
-/* ✅ */ @import url(inc/utilities/headings.css);
-/* ✅ */ @import url(inc/utilities/subtitles.css);
-/* ✅ */ @import url(inc/utilities/general.css);
-/* ✅ */ @import url(inc/utilities/type.css);
-/* ✅ */ @import url(inc/utilities/layout.css);
-/* ❌ */ @import url(inc/utilities/media-visibility.css); /* !(test) */
-/* ⭐️ */ @import url(inc/utilities/card.css);
+ @import url(inc/utilities/headings.css);
+ @import url(inc/utilities/subtitles.css);
+ @import url(inc/utilities/general.css);
+ @import url(inc/utilities/type.css);
+ @import url(inc/utilities/layout.css);
+ @import url(inc/utilities/media-visibility.css);
+ @import url(inc/utilities/card.css);
 
 /* Overrides */
-/* ✅ */ @import url(inc/overrides/angular-fixes.css);
+ @import url(inc/overrides/angular-fixes.css);

package/assets/i18n/en/common.json

@@ -104,6 +104,9 @@
     "createTitle": "Create",
     "next": "Next",
     "previous": "Previous",
+    "validation": {
+      "tabSwitchError": "Please fix the validation errors before switching tabs."
+    },
     "field": {
       "serverSelect": {
         "noResults": "No se encontraron resultados",
@@ -1091,5 +1094,9 @@
   "manual-refresh": {
     "refresh": "Refresh",
     "lastUpdated": "Last updated at {{time}}"
+  },
+  "phoneField": {
+    "defaultPlaceholder": "Enter phone number",
+    "selectCountry": "Select country"
   }
 }

package/assets/i18n/es/common.json

@@ -104,6 +104,9 @@
     "createTitle": "Agregar",
     "next": "Siguiente",
     "previous": "Anterior",
+    "validation": {
+      "tabSwitchError": "Por favor, corrige los errores de validación antes de cambiar de pestaña."
+    },
     "field": {
       "serverSelect": {
         "noResults": "No se encontraron resultados",
@@ -1089,5 +1092,9 @@
     "forbidden": "Acceso denegado.",
     "notFound": "Recurso no encontrado.",
     "validationError": "Datos inválidos. Verifica la información ingresada."
+  },
+  "phoneField": {
+    "defaultPlaceholder": "Ingrese su número de teléfono",
+    "selectCountry": "Seleccione el país"
   }
 }