@allsorter/ui-components 0.0.367 → 0.0.370

package/src/lib/loader/loader.component.html

@@ -0,0 +1,15 @@
+<div class="loader-container" [attr.data-testid]="effectiveDataTestId">
+  <!-- Brain Icon -->
+  <mat-icon class="loader-icon font-icon icon-brain" fontSet="material-icons">psychology</mat-icon>
+  <!-- Settings/Gear Icon -->
+  <mat-icon class="loader-icon font-icon icon-cog" fontSet="material-icons-outlined">settings</mat-icon>
+  <!-- Document Icon -->
+  <mat-icon class="loader-icon font-icon icon-document" fontSet="material-icons">article</mat-icon>
+  <!-- Wand Icon -->
+  <mat-icon class="loader-icon font-icon icon-wand" fontSet="material-icons">auto_awesome</mat-icon>
+  <!-- Settings Icon -->
+  <mat-icon class="loader-icon font-icon icon-tick" fontSet="material-icons">build</mat-icon>
+</div>
+<div class="text-container" *ngIf="showText">
+  <span class="loader-text">{{ displayText }}</span>
+</div>

package/src/lib/loader/loader.component.scss

@@ -0,0 +1,493 @@
+@import url("https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined");
+
+:host {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-family: 'Roboto', sans-serif;
+}
+
+.loader-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.loader-icon,
+.loader-text {
+  /* Hide all icons and text by default */
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transition: opacity 0.3s ease-in-out;
+}
+
+.text-container {
+  position: relative;
+  margin-top: 8px;
+}
+
+.loader-text {
+  position: relative;
+  /* Reset position for text */
+  color: #717793;
+  font-weight: 300;
+  font-size: 1.125rem;
+  /* text-lg */
+  text-align: center;
+  opacity: 0;
+  transition: opacity 0.3s ease-in-out;
+}
+
+/* Styles for the mat-icon elements */
+.font-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+mat-icon.loader-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Size variations */
+:host(.size-small) {
+  .loader-container {
+    width: 48px;
+    height: 48px;
+  }
+
+  .font-icon {
+    font-size: 48px;
+  }
+
+  mat-icon.loader-icon {
+    font-size: 48px;
+    width: 48px;
+    height: 48px;
+  }
+
+  .loader-text {
+    font-size: 0.875rem;
+    /* text-sm */
+  }
+}
+
+:host(.size-medium) {
+  .loader-container {
+    width: 80px;
+    height: 80px;
+  }
+
+  .font-icon {
+    font-size: 72px;
+  }
+
+  mat-icon.loader-icon {
+    font-size: 72px;
+    width: 72px;
+    height: 72px;
+  }
+
+  .loader-text {
+    font-size: 1.125rem;
+    /* text-lg */
+  }
+}
+
+:host(.size-large) {
+  .loader-container {
+    width: 120px;
+    height: 120px;
+  }
+
+  .font-icon {
+    font-size: 108px;
+  }
+
+  mat-icon.loader-icon {
+    font-size: 108px;
+    width: 108px;
+    height: 108px;
+  }
+
+  .loader-text {
+    font-size: 1.25rem;
+    /* text-xl */
+  }
+}
+
+/* Icon Colors */
+.icon-brain {
+  color: #EF87BF;
+}
+
+.icon-cog {
+  color: #A2A6B8;
+  position: relative;
+}
+
+.icon-cog::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 20%;
+  height: 20%;
+  border-radius: 50%;
+  background-color: #A2A6B8;
+  z-index: 1;
+}
+
+.icon-document {
+  color: #37C1CE;
+}
+
+.icon-tick {
+  color: #00AD83;
+}
+
+.icon-wand {
+  background: linear-gradient(275deg, #5473E8 -36.22%, #37C1CE 100.04%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+/* --- Enhanced Looping Animations --- */
+/* These animations include enter/exit transitions for smooth looping */
+
+@keyframes animate-brain {
+  0% {
+    opacity: 0;
+    transform: scale(0);
+  }
+
+  12.5% {
+    opacity: 1;
+    transform: scale(1.2);
+  }
+
+  25% {
+    transform: scale(1);
+  }
+
+  37.5% {
+    transform: scale(1.1);
+  }
+
+  50% {
+    transform: scale(1);
+  }
+
+  62.5% {
+    transform: scale(1.1);
+  }
+
+  75% {
+    transform: scale(1);
+  }
+
+  87.5% {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  100% {
+    opacity: 0;
+    transform: scale(0);
+  }
+}
+
+@keyframes animate-cog {
+  0% {
+    opacity: 0;
+    transform: scale(0) rotate(0deg);
+  }
+
+  12.5% {
+    opacity: 1;
+    transform: scale(1.2) rotate(0deg);
+  }
+
+  25% {
+    transform: scale(1) rotate(0deg);
+  }
+
+  87.5% {
+    opacity: 1;
+    transform: scale(1) rotate(180deg);
+  }
+
+  100% {
+    opacity: 0;
+    transform: scale(0) rotate(180deg);
+  }
+}
+
+@keyframes animate-document {
+  0% {
+    opacity: 0;
+    transform: scale(0) translateY(0);
+  }
+
+  12.5% {
+    opacity: 1;
+    transform: scale(1.2) translateY(0);
+  }
+
+  25% {
+    transform: scale(1) translateY(0);
+  }
+
+  37.5% {
+    transform: scale(1) translateY(-10px);
+  }
+
+  50% {
+    transform: scale(1) translateY(0);
+  }
+
+  62.5% {
+    transform: scale(1) translateY(-10px);
+  }
+
+  75% {
+    transform: scale(1) translateY(0);
+  }
+
+  87.5% {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+
+  100% {
+    opacity: 0;
+    transform: scale(0) translateY(0);
+  }
+}
+
+@keyframes animate-wand {
+  0% {
+    opacity: 0;
+    transform: scale(0) rotate(0deg);
+  }
+
+  12.5% {
+    opacity: 1;
+    transform: scale(1.2) rotate(0deg);
+  }
+
+  25% {
+    transform: scale(1) rotate(-20deg);
+  }
+
+  50% {
+    transform: scale(1) rotate(20deg);
+  }
+
+  75% {
+    transform: scale(1) rotate(-20deg);
+  }
+
+  87.5% {
+    opacity: 1;
+    transform: scale(1) rotate(0deg);
+  }
+
+  100% {
+    opacity: 0;
+    transform: scale(0) rotate(0deg);
+  }
+}
+
+@keyframes animate-tick {
+  0% {
+    opacity: 0;
+    transform: scale(0);
+  }
+
+  12.5% {
+    opacity: 1;
+    transform: scale(1.2);
+  }
+
+  25% {
+    transform: scale(1);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes animate-text {
+  0% {
+    opacity: 0;
+    transform: translateX(30px);
+  }
+
+  12.5% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+
+  87.5% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+
+  100% {
+    opacity: 0;
+    transform: translateX(-30px);
+  }
+}
+
+/* Legacy animations for non-looping mode */
+@keyframes pulse {
+
+  0%,
+  100% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(1.1);
+  }
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes hop {
+
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+
+  50% {
+    transform: translateY(-10px);
+  }
+}
+
+@keyframes wave {
+
+  0%,
+  100% {
+    transform: rotate(0deg);
+  }
+
+  25% {
+    transform: rotate(-20deg);
+  }
+
+  75% {
+    transform: rotate(20deg);
+  }
+}
+
+
+/* --- Status-based Visibility and Animation --- */
+/* Standard mode: simple infinite animations */
+:host(.status-analyzing) .icon-brain,
+:host(.status-analyzing) .loader-text {
+  opacity: 1;
+}
+
+:host(.status-analyzing) .icon-brain {
+  animation: pulse 1.5s ease-in-out infinite;
+}
+
+:host(.status-gathering) .icon-cog,
+:host(.status-gathering) .loader-text {
+  opacity: 1;
+}
+
+:host(.status-gathering) .icon-cog {
+  animation: rotate 2s linear infinite;
+}
+
+:host(.status-processing) .icon-document,
+:host(.status-processing) .loader-text {
+  opacity: 1;
+}
+
+:host(.status-processing) .icon-document {
+  animation: hop 1s ease-in-out infinite;
+}
+
+:host(.status-applying) .icon-wand,
+:host(.status-applying) .loader-text {
+  opacity: 1;
+}
+
+:host(.status-applying) .icon-wand {
+  animation: wave 2s ease-in-out infinite;
+}
+
+:host(.status-done) .icon-tick,
+:host(.status-done) .loader-text {
+  opacity: 1;
+}
+
+:host(.status-done) .icon-tick {
+  animation: pulse 0.5s ease-out;
+}
+
+/* --- Looping Mode: Enhanced animations with enter/exit transitions --- */
+/* These are triggered when autoLoop is enabled */
+:host(.auto-loop.status-analyzing) .icon-brain {
+  animation: animate-brain 3s ease-in-out;
+}
+
+:host(.auto-loop.status-analyzing) .loader-text {
+  animation: animate-text 3s ease-in-out;
+}
+
+:host(.auto-loop.status-gathering) .icon-cog {
+  animation: animate-cog 3s ease-in-out;
+}
+
+:host(.auto-loop.status-gathering) .loader-text {
+  animation: animate-text 3s ease-in-out;
+}
+
+:host(.auto-loop.status-processing) .icon-document {
+  animation: animate-document 3s ease-in-out;
+}
+
+:host(.auto-loop.status-processing) .loader-text {
+  animation: animate-text 3s ease-in-out;
+}
+
+:host(.auto-loop.status-applying) .icon-wand {
+  animation: animate-wand 3s ease-in-out;
+}
+
+:host(.auto-loop.status-applying) .loader-text {
+  animation: animate-text 3s ease-in-out;
+}
+
+:host(.auto-loop.status-done) .icon-tick {
+  animation: animate-tick 3s ease-in-out;
+}
+
+:host(.auto-loop.status-done) .loader-text {
+  animation: animate-text 3s ease-in-out;
+}

package/src/lib/new-typography/new-typography.component.html

@@ -0,0 +1,10 @@
+<ng-container [ngSwitch]="tag">
+  <h1 *ngSwitchCase="'h1'" [attr.data-test-id]="dataTestId" [class]="classList">{{ text }}</h1>
+  <h2 *ngSwitchCase="'h2'" [attr.data-test-id]="dataTestId" [class]="classList">{{ text }}</h2>
+  <h3 *ngSwitchCase="'h3'" [attr.data-test-id]="dataTestId" [class]="classList">{{ text }}</h3>
+  <h4 *ngSwitchCase="'h4'" [attr.data-test-id]="dataTestId" [class]="classList">{{ text }}</h4>
+  <h5 *ngSwitchCase="'h5'" [attr.data-test-id]="dataTestId" [class]="classList">{{ text }}</h5>
+  <h6 *ngSwitchCase="'h6'" [attr.data-test-id]="dataTestId" [class]="classList">{{ text }}</h6>
+  <p *ngSwitchCase="'p'" [attr.data-test-id]="dataTestId" [class]="classList">{{ text }}</p>
+  <span *ngSwitchDefault [attr.data-test-id]="dataTestId" [class]="classList">{{ text }}</span>
+</ng-container>

package/src/lib/new-typography/new-typography.component.scss

@@ -0,0 +1,200 @@
+/* Google Fonts import suggestion left to consumer's index.html or global styles. */
+
+// SCSS Variables
+$primary-text-color: #101828;
+
+// Mixins
+@mixin typography-base($size, $line-height, $letter-spacing, $weight: 400) {
+  font-size: $size;
+  line-height: $line-height;
+  letter-spacing: $letter-spacing;
+  font-weight: $weight;
+  color: $primary-text-color;
+}
+
+/* Weight utilities */
+.weight-light {
+  font-weight: 300 !important;
+}
+
+.weight-regular {
+  font-weight: 400 !important;
+}
+
+.weight-medium {
+  font-weight: 500 !important;
+}
+
+.weight-semibold {
+  font-weight: 600 !important;
+}
+
+.weight-bold {
+  font-weight: 700 !important;
+}
+
+/* Line height utilities */
+.line-height-none {
+  line-height: 1 !important;
+}
+
+.line-height-tight {
+  line-height: 1.2 !important;
+}
+
+.line-height-normal {
+  line-height: 1.4 !important;
+}
+
+/* Letter spacing utilities */
+.letter-spacing-normal {
+  letter-spacing: 0 !important;
+}
+
+.letter-spacing-wide {
+  letter-spacing: 0.1em !important;
+}
+
+.letter-spacing-wider {
+  letter-spacing: 0.2em !important;
+}
+
+/* Text decoration utilities */
+.text-decoration-none {
+  text-decoration: none !important;
+  font-style: normal !important;
+}
+
+.text-decoration-underline {
+  text-decoration: underline !important;
+  font-style: normal !important;
+}
+
+.text-decoration-italic {
+  text-decoration: none !important;
+  font-style: italic !important;
+}
+
+.text-decoration-strike {
+  text-decoration: line-through !important;
+  font-style: normal !important;
+}
+
+/* Typography Scale - Based on the design system */
+
+/* Text 5XL */
+.font-text-5xl {
+  @include typography-base(2rem, 1.2, -0.1px, 400);
+}
+
+.font-text-5xl-medium {
+  @include typography-base(2rem, 1.2, -0.1px, 500);
+}
+
+.font-text-5xl-bold {
+  @include typography-base(2rem, 1.2, -0.1px, 700);
+}
+
+/* Text 4XL */
+.font-text-4xl {
+  @include typography-base(1.75rem, 1.2, -0.1px, 400);
+}
+
+.font-text-4xl-medium {
+  @include typography-base(1.75rem, 1.2, -0.1px, 500);
+}
+
+.font-text-4xl-bold {
+  @include typography-base(1.75rem, 1.2, -0.1px, 700);
+}
+
+/* Text 3XL */
+.font-text-3xl {
+  @include typography-base(1.5rem, 1.2, -0.1px, 400);
+}
+
+.font-text-3xl-medium {
+  @include typography-base(1.5rem, 1.2, -0.1px, 500);
+}
+
+.font-text-3xl-bold {
+  @include typography-base(1.5rem, 1.2, -0.1px, 700);
+}
+
+/* Text 2XL */
+.font-text-2xl {
+  @include typography-base(1.375rem, 1.2, -0.1px, 400);
+}
+
+.font-text-2xl-medium {
+  @include typography-base(1.375rem, 1.2, -0.1px, 500);
+}
+
+.font-text-2xl-bold {
+  @include typography-base(1.375rem, 1.2, -0.1px, 700);
+}
+
+/* Text XL */
+.font-text-xl {
+  @include typography-base(1.25rem, 1.2, -0.1px, 400);
+}
+
+.font-text-xl-medium {
+  @include typography-base(1.25rem, 1.2, -0.1px, 500);
+}
+
+.font-text-xl-bold {
+  @include typography-base(1.25rem, 1.2, -0.1px, 700);
+}
+
+/* Text LG */
+.font-text-lg {
+  @include typography-base(1rem, 1.4, 0.25px, 400);
+}
+
+.font-text-lg-medium {
+  @include typography-base(1rem, 1.4, 0.25px, 500);
+}
+
+.font-text-lg-bold {
+  @include typography-base(1rem, 1.4, 0.25px, 700);
+}
+
+/* Text Base */
+.font-text-base {
+  @include typography-base(0.875rem, 1.4, 0.25px, 400);
+}
+
+.font-text-base-medium {
+  @include typography-base(0.875rem, 1.4, 0.25px, 500);
+}
+
+.font-text-base-bold {
+  @include typography-base(0.875rem, 1.4, 0.25px, 700);
+}
+
+/* Text SM */
+.font-text-sm {
+  @include typography-base(0.75rem, 1.4, 0.5px, 400);
+}
+
+.font-text-sm-medium {
+  @include typography-base(0.75rem, 1.4, 0.5px, 500);
+}
+
+.font-text-sm-bold {
+  @include typography-base(0.75rem, 1.4, 0.5px, 700);
+}
+
+/* Text XS */
+.font-text-xs {
+  @include typography-base(0.625rem, 1.4, 0.5px, 400);
+}
+
+.font-text-xs-medium {
+  @include typography-base(0.625rem, 1.4, 0.5px, 500);
+}
+
+.font-text-xs-bold {
+  @include typography-base(0.625rem, 1.4, 0.5px, 700);
+}