tailjng 0.1.7 → 0.1.8

package/src/lib/components/checkbox/checkbox-switch/switch-checkbox.component.css

@@ -1,34 +1,9 @@
-.j-switch-root {
+:host {
   display: inline-flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
-  gap: 0.2rem;
-}
-
-.j-switch-title {
-  font-size: 0.6rem;
+  align-self: center;
   line-height: 1;
-  color: var(--color-muted-foreground);
-  user-select: none;
-}
-
-:host-context(.dark) .j-switch-title,
-:host-context(html.dark) .j-switch-title {
-  color: var(--color-dark-muted-foreground);
-}
-
-.j-switch-button {
-  display: inline-flex;
-  padding: 0;
-  border: 0;
-  background: transparent;
-  cursor: pointer;
-  line-height: 0;
-}
-
-.j-switch-button:disabled {
-  cursor: not-allowed;
 }
 
 .j-switch-button:focus-visible .j-switch-track {
@@ -36,13 +11,6 @@
   outline-offset: 2px;
 }
 
-.j-switch-track {
-  position: relative;
-  display: inline-block;
-  border-radius: 9999px;
-  transition: background-color 0.2s ease;
-}
-
 .j-switch-track--md {
   width: 2.5rem;
   height: 1.375rem;
@@ -54,7 +22,7 @@
 }
 
 .j-switch-track--on {
-  background-color: var(--color-primary);
+  background-color: var(--color-dark-primary);
 }
 
 :host-context(.dark) .j-switch-track--on,
@@ -75,16 +43,6 @@
   opacity: 0.5;
 }
 
-.j-switch-thumb {
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  border-radius: 9999px;
-  background-color: #fff;
-  box-shadow: 0 1px 3px rgb(0 0 0 / 0.18);
-  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
 .j-switch-thumb--md {
   width: 1rem;
   height: 1rem;
@@ -102,11 +60,3 @@
 .j-switch-thumb--sm.j-switch-thumb--on {
   transform: translateX(0.9375rem);
 }
-
-.j-switch-loading {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 2.5rem;
-  height: 1.375rem;
-}

package/src/lib/components/checkbox/checkbox-switch/switch-checkbox.component.html

@@ -1,24 +1,35 @@
-<div class="j-switch-root">
+<div class="inline-flex flex-col items-center justify-start gap-1 leading-none">
   @if (title) {
-    <span class="j-switch-title">{{ title }}</span>
+    <span
+      [ngClass]="textClasses"
+      class="block m-0 p-0 text-[0.6rem] leading-none whitespace-nowrap text-muted-foreground dark:text-dark-muted-foreground select-none"
+    >
+      {{ title }}
+    </span>
   }
 
   @if (!isLoading) {
     <button
       type="button"
-      class="j-switch-button"
+      class="j-switch-button inline-flex items-center justify-center p-0 border-0 bg-transparent cursor-pointer leading-none min-h-0 h-auto disabled:cursor-not-allowed"
       role="switch"
       [attr.aria-checked]="isChecked"
       [attr.aria-label]="title || 'Toggle'"
       [disabled]="isDisabled"
       (click)="handleToggle()"
     >
-      <span [ngClass]="trackClasses">
-        <span [ngClass]="thumbClasses"></span>
+      <span
+        [ngClass]="trackClasses"
+        class="relative block shrink-0 rounded-full transition-colors duration-200 ease-in-out"
+      >
+        <span
+          [ngClass]="thumbClasses"
+          class="absolute top-[3px] left-[3px] rounded-full bg-white shadow-[0_1px_3px_rgb(0_0_0/0.18)] transition-transform duration-200 ease-[cubic-bezier(0.4,0,0.2,1)]"
+        ></span>
       </span>
     </button>
   } @else {
-    <span class="j-switch-loading" aria-hidden="true">
+    <span class="inline-flex items-center justify-center min-w-10 h-[1.375rem]" aria-hidden="true">
       <JIcon
         [icon]="Icons.Loader2"
         [size]="20"

package/src/lib/components/checkbox/checkbox-switch/switch-checkbox.component.ts

@@ -23,6 +23,7 @@ export class JSwitchCheckboxComponent {
   @Input() title = '';
   @Input() disabled = false;
   @Input() classes = '';
+  @Input() classesText = '';
   @Input() isLoading: boolean | undefined = false;
   @Input() isChecked = false;
   @Input() size: SwitchCheckboxSize = 'md';
@@ -53,6 +54,12 @@ export class JSwitchCheckboxComponent {
     };
   }
 
+  get textClasses(): Record<string, boolean> {
+    return {
+      [this.classesText]: !!this.classesText,
+    };
+  }
+
   /**
    * Class map for the thumb circle.
    */

package/src/lib/components/coach-mark/coach-mark.component.html

@@ -1,6 +1,6 @@
 @if (spotlight) {
   <div
-    class="j-spotlight fixed pointer-events-none border-2 border-white/90 dark:border-foreground/90 transition-all duration-150 ease-out"
+    class="j-spotlight fixed pointer-events-none border-2 border-white/90 opacity-50 shadow-[0_0_0_9999px_var(--color-foreground)] dark:border-foreground/90 transition-all duration-150 ease-out"
     [ngStyle]="spotlightStyles"
   ></div>
 
@@ -8,7 +8,7 @@
 }
 
 <div
-  class="j-coach-card fixed rounded-2xl border border-foreground/25 dark:border-white/25 bg-white dark:bg-foreground p-3.5 text-black dark:text-white shadow-2xl z-999999"
+  class="j-coach-card fixed z-999999 rounded-2xl border border-foreground/25 bg-white p-3.5 text-black shadow-[0_20px_50px_rgb(0_0_0/0.28)] dark:border-white/25 dark:bg-foreground dark:text-white"
   [ngStyle]="cardStyles"
 >
   @if (contentTemplate) {

package/src/lib/components/coach-mark/coach-mark.component.scss

@@ -1,11 +1,5 @@
-.j-spotlight {
-  box-shadow: 0 0 0 9999px var(--color-foreground); 
-  opacity: 0.5;
-}
-
 .j-coach-card {
   animation: coachIn 0.14s ease-out;
-  box-shadow: 0 20px 50px rgb(0 0 0 / 0.28);
 }
 
 @keyframes coachIn {
@@ -18,4 +12,4 @@
     opacity: 1;
     transform: translateY(0) scale(1);
   }
-}
+}

package/src/lib/components/dialog/dialog.component.css

@@ -6,105 +6,3 @@
   margin: 0 !important;
   border-radius: 0;
 }
-
-.jdialog-header {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  min-height: 3.25rem;
-  padding: 0.625rem 0.75rem 0.625rem 1rem;
-  border-bottom: 1px solid var(--color-border);
-  background: linear-gradient(
-    180deg,
-    color-mix(in srgb, var(--color-muted) 28%, var(--color-background)) 0%,
-    var(--color-background) 100%
-  );
-  user-select: none;
-}
-
-:host-context(.dark) .jdialog-header,
-:host-context(html.dark) .jdialog-header {
-  border-bottom-color: var(--color-dark-border);
-  background: linear-gradient(
-    180deg,
-    color-mix(in srgb, var(--color-dark-muted) 35%, var(--color-dark-background)) 0%,
-    var(--color-dark-background) 100%
-  );
-}
-
-.jdialog-header--draggable {
-  cursor: move;
-}
-
-.jdialog-title {
-  flex: 1;
-  min-width: 0;
-  margin: 0;
-  font-size: 0.9375rem;
-  font-weight: 600;
-  line-height: 1.3;
-  letter-spacing: -0.015em;
-  color: var(--color-foreground);
-}
-
-:host-context(.dark) .jdialog-title,
-:host-context(html.dark) .jdialog-title {
-  color: var(--color-dark-foreground);
-}
-
-.jdialog-close {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 2rem;
-  height: 2rem;
-  flex: 0 0 2rem;
-  margin: 0;
-  padding: 0;
-  border: 0;
-  border-radius: 0.375rem;
-  background-color: transparent;
-  color: var(--color-muted-foreground);
-  line-height: 0;
-  cursor: pointer;
-  transition:
-    color 0.15s ease,
-    background-color 0.15s ease,
-    transform 0.15s ease;
-}
-
-.jdialog-close:hover {
-  color: var(--color-foreground);
-  background-color: color-mix(in srgb, var(--color-muted) 55%, transparent);
-}
-
-.jdialog-close:active {
-  transform: scale(0.94);
-}
-
-.jdialog-close:focus-visible {
-  outline: 2px solid var(--color-ring);
-  outline-offset: 2px;
-}
-
-:host-context(.dark) .jdialog-close,
-:host-context(html.dark) .jdialog-close {
-  color: var(--color-dark-muted-foreground);
-}
-
-:host-context(.dark) .jdialog-close:hover,
-:host-context(html.dark) .jdialog-close:hover {
-  color: var(--color-dark-foreground);
-  background-color: color-mix(in srgb, var(--color-dark-muted) 50%, transparent);
-}
-
-.jdialog-close JIcon,
-.jdialog-close svg {
-  display: block;
-  width: 1.125rem;
-  height: 1.125rem;
-}
-
-.jdialog-content {
-  padding: 1rem;
-}

package/src/lib/components/dialog/dialog.component.html

@@ -1,6 +1,9 @@
 @if (openModal) {
   @if (overlay) {
-    <div class="fixed inset-0 z-[999] bg-black/50 backdrop-blur-[1px]" aria-hidden="true"></div>
+    <div
+      class="fixed inset-0 z-[999] bg-black/50 backdrop-blur-[1px]"
+      aria-hidden="true"
+    ></div>
   }
 
   <div
@@ -21,26 +24,34 @@
       [style.min-height]="!isFullScreen ? '40px' : null"
     >
       <div
-        class="jdialog-header"
+        class="jdialog-header flex min-h-[3.25rem] select-none items-center gap-3 border-b border-border bg-primary py-2.5 pr-3 pl-4 dark:border-dark-border dark:bg-[linear-gradient(180deg,color-mix(in_srgb,var(--color-dark-muted)_35%,var(--color-dark-background))_0%,var(--color-dark-background)_100%)]"
         [class.jdialog-header--draggable]="draggable"
+        [class.cursor-move]="draggable"
         (mousedown)="draggable && startDrag($event)"
       >
-        <h3 class="jdialog-title">
+        <h3
+          class="jdialog-title m-0 min-w-0 flex-1 text-[0.9375rem] font-semibold leading-[1.3] tracking-[-0.015em] text-white dark:text-dark-foreground"
+        >
           {{ title }}
         </h3>
 
         <button
           type="button"
-          class="jdialog-close"
+          class="inline-flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center rounded-md border-0 bg-dark-primary/30 dark:bg-primary/30 p-0 leading-none text-white/70 transition-[color,background-color,transform] duration-150 hover:bg-dark-primary/80 hover:dark:bg-primary/80 hover:text-white active:scale-[0.94] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring dark:hover:text-dark-foreground"
           (click)="$event.stopPropagation(); onClose()"
           aria-label="Cerrar"
         >
-          <JIcon [icon]="Icons.X" [size]="18" [inheritParentColor]="true" [ariaHidden]="true" />
+          <JIcon
+            [icon]="Icons.X"
+            [size]="18"
+            [inheritParentColor]="true"
+            [ariaHidden]="true"
+          />
         </button>
       </div>
 
       <div
-        class="jdialog-content"
+        class="jdialog-content p-4"
         [ngClass]="contentClasses"
         [ngStyle]="{ height: modalHeight }"
       >

package/src/lib/components/filter/filter-complete/complete-filter.component.html

@@ -124,7 +124,7 @@
     (closeModal)="dialogOpen = false"
     [dialogTemplate]="templateDialog"
     position="leftCenter"
-    title="Filtros"
+    title="FILTROS"
     [width]="220"
     height="auto"
     [overlay]="false"
@@ -134,13 +134,13 @@
 </div>
 
 <ng-template #templateDialog>
-  <div class="jfilter-filters-dialog-body">
+  <div class="m-0">
     @if (filtersSelect.length > 0) {
       <div class="flex flex-col gap-2">
         @for (filter of filtersSelect; track $index) {
           @if (filter.isVisible ?? true) {
             @if (filter.type === "dropdown") {
-              <div class="jfilter-filters-dialog-field">
+              <div class="relative">
                 <JDropdownSelect
                   [type]="'dropdown'"
                   [(ngModel)]="filter.selected"
@@ -162,7 +162,7 @@
 
             <!-- Searchable -->
             @if (filter.type === "searchable") {
-              <div class="jfilter-filters-dialog-field">
+              <div class="relative">
                 <JDropdownSelect
                   [type]="'searchable'"
                   [(ngModel)]="filter.selected"
@@ -185,7 +185,7 @@
             }
 
             @if (filter.type === "multi-table") {
-              <div class="jfilter-filters-dialog-field">
+              <div class="relative">
                 <JMultiTableSelect
                   [(ngModel)]="filter.selected"
                   (selectionChange)="

package/src/lib/components/filter/filter-complete/complete-filter.component.scss

@@ -1,5 +1,3 @@
-/* Scoped overrides for the filters JDialog only — does not affect JDialog globally. */
-
 :host ::ng-deep .jfilter-filters-dialog-host .jfilter-filters-dialog.jdialog-panel {
   overflow: hidden;
   border-radius: 0.75rem;
@@ -25,11 +23,3 @@
 :host ::ng-deep .jfilter-filters-dialog-host .jfilter-filters-dialog .jdialog-content {
   padding: 0.5rem 0.625rem 0.625rem;
 }
-
-.jfilter-filters-dialog-body {
-  margin: 0;
-}
-
-.jfilter-filters-dialog-field {
-  position: relative;
-}

package/src/lib/components/form/form-sidebar/sidebar-form.component.css

@@ -2,16 +2,7 @@
   display: contents;
 }
 
-.j-form-sidebar-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 998;
-  background-color: rgb(0 0 0 / 0.5);
-  backdrop-filter: blur(1px);
-  animation: j-form-sidebar-overlay-in 300ms ease-out;
-}
-
-@keyframes j-form-sidebar-overlay-in {
+@keyframes sidebar-overlay-in {
   from {
     opacity: 0;
   }
@@ -21,256 +12,34 @@
   }
 }
 
-.j-form-sidebar {
-  position: fixed;
-  top: 0;
-  z-index: 999;
-  display: flex;
-  flex-direction: column;
-  max-width: 100%;
-  height: 100%;
-  overflow: hidden;
-  border: 1px solid var(--color-border);
-  background-color: var(--color-background);
-}
-
-.j-form-sidebar--right {
-  right: 0;
-  border-right: 0;
-  border-radius: 0.75rem 0 0 0.75rem;
-  box-shadow: -8px 0 32px rgb(0 0 0 / 0.12);
-}
-
-.j-form-sidebar--left {
-  left: 0;
-  border-left: 0;
-  border-radius: 0 0.75rem 0.75rem 0;
-  box-shadow: 8px 0 32px rgb(0 0 0 / 0.12);
-}
-
-:host-context(.dark) .j-form-sidebar,
-:host-context(html.dark) .j-form-sidebar {
-  border-color: var(--color-dark-border);
-  background-color: var(--color-dark-background);
-}
-
-:host-context(.dark) .j-form-sidebar--right,
-:host-context(html.dark) .j-form-sidebar--right {
-  box-shadow: -8px 0 32px rgb(0 0 0 / 0.35);
-}
-
-:host-context(.dark) .j-form-sidebar--left,
-:host-context(html.dark) .j-form-sidebar--left {
-  box-shadow: 8px 0 32px rgb(0 0 0 / 0.35);
-}
-
-.j-form-sidebar--small {
-  width: 22em;
-}
-
-.j-form-sidebar--medium {
-  width: 30em;
-}
-
-.j-form-sidebar--large {
-  width: 47em;
-}
-
-.j-form-sidebar--xlarge {
-  width: 65em;
-}
-
-.j-form-sidebar-header {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  min-height: 3.25rem;
-  padding: 0.625rem 0.75rem 0.625rem 1rem;
-  border-bottom: 1px solid var(--color-border);
-  background: linear-gradient(
-    180deg,
-    color-mix(in srgb, var(--color-muted) 28%, var(--color-background)) 0%,
-    var(--color-background) 100%
-  );
-  flex-shrink: 0;
-}
-
-:host-context(.dark) .j-form-sidebar-header,
-:host-context(html.dark) .j-form-sidebar-header {
-  border-bottom-color: var(--color-dark-border);
-  background: linear-gradient(
-    180deg,
-    color-mix(in srgb, var(--color-dark-muted) 35%, var(--color-dark-background)) 0%,
-    var(--color-dark-background) 100%
-  );
-}
-
-.j-form-sidebar-title-wrap {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.375rem;
-  flex: 1;
-  min-width: 0;
-}
-
-.j-form-sidebar-title {
-  flex: 1;
-  min-width: 0;
-  margin: 0;
-  font-size: 0.9375rem;
-  font-weight: 600;
-  line-height: 1.3;
-  letter-spacing: -0.015em;
-  color: var(--color-foreground);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-:host-context(.dark) .j-form-sidebar-title,
-:host-context(html.dark) .j-form-sidebar-title {
-  color: var(--color-dark-foreground);
-}
-
-.j-form-sidebar-info {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.5rem;
-  height: 1.5rem;
-  flex: 0 0 1.5rem;
-  padding: 0;
-  border: 0;
-  border-radius: 0.375rem;
-  background: transparent;
-  color: var(--color-muted-foreground);
-  cursor: pointer;
-  transition:
-    color 0.15s ease,
-    background-color 0.15s ease;
-}
-
-.j-form-sidebar-info:hover {
-  color: var(--color-foreground);
-  background-color: color-mix(in srgb, var(--color-muted) 55%, transparent);
+.animate-sidebar-overlay-in {
+  animation: sidebar-overlay-in 300ms ease-out;
 }
 
-.j-form-sidebar-info:focus-visible {
-  outline: 2px solid var(--color-ring);
-  outline-offset: 2px;
-}
+.scroll-element {
+  margin-right: 2px;
 
-:host-context(.dark) .j-form-sidebar-info,
-:host-context(html.dark) .j-form-sidebar-info {
-  color: var(--color-dark-muted-foreground);
-}
-
-:host-context(.dark) .j-form-sidebar-info:hover,
-:host-context(html.dark) .j-form-sidebar-info:hover {
-  color: var(--color-dark-foreground);
-  background-color: color-mix(in srgb, var(--color-dark-muted) 50%, transparent);
-}
-
-.j-form-sidebar-header-actions {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  flex-shrink: 0;
-}
-
-.j-form-sidebar-close {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 2rem;
-  height: 2rem;
-  flex: 0 0 2rem;
-  margin: 0;
-  padding: 0;
-  border: 0;
-  border-radius: 0.375rem;
-  background-color: transparent;
-  color: var(--color-muted-foreground);
-  line-height: 0;
-  cursor: pointer;
-  transition:
-    color 0.15s ease,
-    background-color 0.15s ease,
-    transform 0.15s ease;
-}
-
-.j-form-sidebar-close:hover {
-  color: var(--color-foreground);
-  background-color: color-mix(in srgb, var(--color-muted) 55%, transparent);
-}
-
-.j-form-sidebar-close:active {
-  transform: scale(0.94);
-}
-
-.j-form-sidebar-close:focus-visible {
-  outline: 2px solid var(--color-ring);
-  outline-offset: 2px;
-}
-
-:host-context(.dark) .j-form-sidebar-close,
-:host-context(html.dark) .j-form-sidebar-close {
-  color: var(--color-dark-muted-foreground);
-}
-
-:host-context(.dark) .j-form-sidebar-close:hover,
-:host-context(html.dark) .j-form-sidebar-close:hover {
-  color: var(--color-dark-foreground);
-  background-color: color-mix(in srgb, var(--color-dark-muted) 50%, transparent);
-}
-
-.j-form-sidebar-body {
-  flex: 1 1 auto;
-  min-height: 0;
-  padding: 1rem;
-  overflow-x: hidden;
-  overflow-y: auto;
-  color: var(--color-foreground);
-}
-
-:host-context(.dark) .j-form-sidebar-body,
-:host-context(html.dark) .j-form-sidebar-body {
-  color: var(--color-dark-foreground);
-}
-
-.j-form-sidebar-footer {
-  display: flex;
-  justify-content: center;
-  gap: 0.75rem;
-  flex-shrink: 0;
-  padding: 1rem;
-  border-top: 1px solid var(--color-border);
-  background-color: color-mix(in srgb, var(--color-muted) 18%, var(--color-background));
-}
-
-:host-context(.dark) .j-form-sidebar-footer,
-:host-context(html.dark) .j-form-sidebar-footer {
-  border-top-color: var(--color-dark-border);
-  background-color: color-mix(in srgb, var(--color-dark-muted) 22%, var(--color-dark-background));
-}
-
-.j-form-sidebar-coach {
-  font-size: 0.75rem;
-  line-height: 1.25rem;
-}
-
-@media (max-width: 767px) {
-  .j-form-sidebar {
-    width: 100% !important;
-    max-width: 100%;
-    border-radius: 0;
+  &::-webkit-scrollbar {
+    width: 8px !important;
   }
 
-  .j-form-sidebar--right {
-    border-left: 0;
+  &::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    background: color-mix(in srgb, var(--color-primary) 65%, transparent);
+    transition: background-color 0.5s ease;
   }
 
-  .j-form-sidebar--left {
-    border-right: 0;
+  &::-webkit-scrollbar-thumb:hover {
+    background: var(--color-primary);
   }
 }
+
+:host-context(.dark) .scroll-element::-webkit-scrollbar-thumb,
+:host-context(html.dark) .scroll-element::-webkit-scrollbar-thumb {
+  background: color-mix(in srgb, var(--color-dark-primary) 45%, transparent);
+}
+
+:host-context(.dark) .scroll-element::-webkit-scrollbar-thumb:hover,
+:host-context(html.dark) .scroll-element::-webkit-scrollbar-thumb:hover {
+  background: color-mix(in srgb, var(--color-dark-primary) 70%, transparent);
+}