@allsorter/ui-components 0.0.367 → 0.0.370

package/src/lib/slide-toggle/slide-toggle.component.scss

@@ -0,0 +1,439 @@
+/* ============================================
+   SLIDE TOGGLE COMPONENT STYLES - ANGULAR 18
+   ============================================ */
+@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
+@import '../styles/colors.scss';
+@import '../styles/typography-classes.scss';
+
+.slide-toggle-container {
+  position: relative;
+  display: inline-block;
+}
+
+/* ============================================
+   ANGULAR 18 MATERIAL DESIGN 3 SIZING
+   ============================================ */
+
+/* Medium size (default) */
+::ng-deep .custom-slide-toggle.slide-toggle-medium .mdc-switch {
+  width: 52px !important;
+  height: 32px !important;
+}
+
+::ng-deep .custom-slide-toggle.slide-toggle-medium .mdc-switch__track {
+  width: 52px !important;
+  height: 32px !important;
+  border-radius: 16px !important;
+}
+
+::ng-deep .custom-slide-toggle.slide-toggle-medium .mdc-switch__handle {
+  width: 22px !important;
+  height: 22px !important;
+  border-radius: 50% !important;
+  top: 16px !important;
+  left: 4px !important;
+}
+
+/* Small size */
+::ng-deep .custom-slide-toggle.slide-toggle-small .mdc-switch {
+  width: 40px !important;
+  height: 24px !important;
+}
+
+::ng-deep .custom-slide-toggle.slide-toggle-small .mdc-switch__track {
+  width: 40px !important;
+  height: 24px !important;
+  border-radius: 12px !important;
+}
+
+::ng-deep .custom-slide-toggle.slide-toggle-small .mdc-switch__handle {
+  width: 18px !important;
+  height: 18px !important;
+  border-radius: 50% !important;
+  top: 12px !important;
+  left: 3px !important;
+}
+
+/* Large size */
+::ng-deep .custom-slide-toggle.slide-toggle-large .mdc-switch {
+  width: 64px !important;
+  height: 40px !important;
+}
+
+::ng-deep .custom-slide-toggle.slide-toggle-large .mdc-switch__track {
+  width: 64px !important;
+  height: 40px !important;
+  border-radius: 20px !important;
+}
+
+::ng-deep .custom-slide-toggle.slide-toggle-large .mdc-switch__handle {
+  width: 28px !important;
+  height: 28px !important;
+  border-radius: 50% !important;
+  top: 20px !important;
+  left: 6px !important;
+}
+
+::ng-deep .custom-slide-toggle.mat-mdc-slide-toggle-checked .mdc-switch__handle {
+  transform: translateX(2px) !important;
+  top: 5px !important;
+}
+
+/* Small size checked state */
+::ng-deep .custom-slide-toggle.slide-toggle-small.mat-mdc-slide-toggle-checked .mdc-switch__handle {
+  transform: translateX(7px) !important;
+  top: 3px !important;
+}
+
+/* Large size checked state */
+::ng-deep .custom-slide-toggle.slide-toggle-large.mat-mdc-slide-toggle-checked .mdc-switch__handle {
+  transform: translateX(-7px) !important;
+  top: 6px !important;
+}
+
+/* ============================================
+   CUSTOM COLOR THEMES
+   ============================================ */
+
+/* Default/Primary Color (Blue) */
+::ng-deep .custom-slide-toggle.mat-mdc-slide-toggle-checked .mdc-switch__track {
+  background-color: $color-blue-300 !important;
+  border-color: $color-blue-300 !important;
+}
+
+::ng-deep .custom-slide-toggle.mat-mdc-slide-toggle-checked .mdc-switch__handle-track {
+  background-color: $color-blue-300 !important;
+  border-radius: 75px;
+  left: -11px;
+  height: 0 !important;
+}
+
+/* Primary Theme (Blue) */
+::ng-deep .custom-slide-toggle.mat-primary.mat-mdc-slide-toggle-checked .mdc-switch__track {
+  background-color: $color-blue-300 !important;
+  border-color: $color-blue-300 !important;
+}
+
+::ng-deep .custom-slide-toggle.mat-primary.mat-mdc-slide-toggle-checked .mdc-switch__handle-track {
+  background-color: $color-blue-300 !important;
+  border-radius: 75px;
+  left: -11px;
+  height: 0 !important;
+}
+
+/* Green Theme (Cyan) */
+::ng-deep .custom-slide-toggle.mat-green.mat-mdc-slide-toggle-checked .mdc-switch__track {
+  background-color: $color-green-500 !important;
+  border-color: $color-green-500 !important;
+}
+
+::ng-deep .custom-slide-toggle.mat-green.mat-mdc-slide-toggle-checked .mdc-switch__handle-track {
+  background-color: $color-green-500 !important;
+  border-radius: 75px;
+  left: -11px;
+  height: 0 !important;
+}
+
+/* Error Theme (Pink) */
+::ng-deep .custom-slide-toggle.mat-error.mat-mdc-slide-toggle-checked .mdc-switch__track {
+  background-color: $color-error-500 !important;
+  border-color: $color-error-500 !important;
+}
+
+::ng-deep .custom-slide-toggle.mat-error.mat-mdc-slide-toggle-checked .mdc-switch__handle-track {
+  background-color: $color-error-500 !important;
+  border-radius: 75px;
+  left: -11px;
+  height: 0 !important;
+}
+
+/* ============================================
+   DISABLED STATE STYLING
+   ============================================ */
+
+/* Disabled - Unchecked State */
+::ng-deep .custom-slide-toggle.mat-mdc-slide-toggle-disabled .mdc-switch__track {
+  background-color: #DEE0E6 !important;
+  border-color: #DEE0E6 !important;
+}
+
+/* Disabled - Checked State */
+::ng-deep .custom-slide-toggle.mat-mdc-slide-toggle-disabled.mat-mdc-slide-toggle-checked .mdc-switch__track {
+  background-color: #DEE0E6 !important;
+  border-color: #DEE0E6 !important;
+}
+
+/* Disabled Handle */
+::ng-deep .custom-slide-toggle.mat-mdc-slide-toggle-disabled .mdc-switch__handle {
+  background-color: #DEE0E6 !important;
+}
+
+/* ============================================
+   UNCHECKED STATE STYLING
+   ============================================ */
+
+/* Unchecked State Border */
+.custom-slide-toggle .mdc-switch__track {
+  border-color: $color-grey-400 !important;
+}
+
+/* Unchecked State Styling */
+::ng-deep .custom-slide-toggle:not(.mat-mdc-slide-toggle-checked) .mdc-switch__track {
+  border: 2px solid $color-grey-400 !important;
+  background-color: #fff !important;
+}
+
+/* ============================================
+   INTERACTIVE STATES (FOCUS & HOVER)
+   ============================================ */
+
+/* Default Focus State */
+.custom-slide-toggle .mdc-switch__ripple {
+  background-color: rgba(84, 115, 232, 0.12) !important;
+}
+
+/* Hover State */
+.custom-slide-toggle:hover .mdc-switch__ripple {
+  background-color: rgba(84, 115, 232, 0.24) !important;
+}
+
+/* ============================================
+   TYPOGRAPHY STYLING
+   ============================================ */
+
+/* Material Design Label Styling */
+.custom-slide-toggle .mdc-form-field>label {
+  @extend .font-label-large;
+  color: $color-grey-700 !important;
+}
+
+/* ============================================
+   CUSTOM LABEL COMPONENTS
+   ============================================ */
+
+/* Main Label Styling */
+.slide-toggle-label-main {
+  @extend .font-label-large;
+  color: $color-grey-700 !important;
+  margin-left: 8px;
+}
+
+/* Helper Text Styling */
+.slide-toggle-label-helper {
+  @extend .font-label-medium;
+  color: $color-grey-500 !important;
+  margin-top: 4px !important;
+  margin-left: 8px;
+}
+
+/* ============================================
+   ANIMATION & TRANSITIONS
+   ============================================ */
+
+.custom-slide-toggle .mdc-switch__handle {
+  transition: transform 0.2s ease !important;
+}
+
+.custom-slide-toggle .mdc-switch__track {
+  transition: background-color 0.2s ease, border-color 0.2s ease !important;
+}
+
+/* ============================================
+   CUSTOM ICON STYLING
+   ============================================ */
+
+/* Style the custom icon inside the handle */
+.slide-toggle-custom-icon {
+  font-size: 18px !important;
+  color: $color-blue-300 !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  width: 24px !important;
+  height: 24px !important;
+  font-family: 'Material Icons' !important;
+  font-weight: normal !important;
+  font-style: normal !important;
+  line-height: 1 !important;
+  letter-spacing: normal !important;
+  text-transform: none !important;
+  white-space: nowrap !important;
+  word-wrap: normal !important;
+  direction: ltr !important;
+  -webkit-font-feature-settings: 'liga' !important;
+  -webkit-font-smoothing: antialiased !important;
+  text-rendering: optimizeLegibility !important;
+  -moz-osx-font-smoothing: grayscale !important;
+}
+
+/* Icon sizes for different toggle sizes */
+::ng-deep .custom-slide-toggle.slide-toggle-small .slide-toggle-custom-icon {
+  font-size: 14px !important;
+  width: 18px !important;
+  height: 18px !important;
+}
+
+::ng-deep .custom-slide-toggle.slide-toggle-medium .slide-toggle-custom-icon {
+  font-size: 18px !important;
+  width: 24px !important;
+  height: 24px !important;
+}
+
+::ng-deep .custom-slide-toggle.slide-toggle-large .slide-toggle-custom-icon {
+  font-size: 22px !important;
+  width: 28px !important;
+  height: 28px !important;
+}
+
+/* Icon hover and ripple effects */
+::ng-deep .custom-slide-toggle .slide-toggle-custom-icon {
+  position: relative !important;
+  border-radius: 50% !important;
+  transition: all 0.2s ease !important;
+  cursor: pointer !important;
+  padding: 4px !important;
+  margin: -4px !important;
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+}
+
+/* Ensure hover works on the handle */
+::ng-deep .custom-slide-toggle .mdc-switch__handle:hover .slide-toggle-custom-icon {
+  background-color: rgba(113, 119, 147, 0.15) !important;
+  border-radius: 50% !important;
+  padding: 4px !important;
+  margin: -4px !important;
+}
+
+::ng-deep .custom-slide-toggle .slide-toggle-custom-icon:hover,
+::ng-deep .custom-slide-toggle .slide-toggle-custom-icon:focus {
+  background-color: rgba(113, 119, 147, 0.15) !important;
+  border-radius: 50% !important;
+  padding: 4px !important;
+  margin: -4px !important;
+}
+
+::ng-deep .custom-slide-toggle .slide-toggle-custom-icon:active {
+  background-color: rgba(113, 119, 147, 0.25) !important;
+  border-radius: 50% !important;
+  padding: 4px !important;
+  margin: -4px !important;
+}
+
+/* Icon ripple effect */
+::ng-deep .custom-slide-toggle .slide-toggle-custom-icon::before {
+  content: '' !important;
+  position: absolute !important;
+  top: 50% !important;
+  left: 50% !important;
+  width: calc(100% + 8px) !important;
+  height: calc(100% + 8px) !important;
+  background-color: rgba(113, 119, 147, 0.15) !important;
+  border-radius: 50% !important;
+  transform: translate(-50%, -50%) scale(0) !important;
+  transition: transform 0.3s ease !important;
+  pointer-events: none !important;
+  z-index: -1 !important;
+}
+
+::ng-deep .custom-slide-toggle .slide-toggle-custom-icon:active::before {
+  transform: translate(-50%, -50%) scale(1) !important;
+}
+
+/* Ensure the icon container is properly styled */
+::ng-deep .mdc-switch__icon {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+}
+
+/* Also style the thumb element */
+::ng-deep .mat-slide-toggle-thumb {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+}
+
+/* Style the handle to center the icon */
+::ng-deep .mdc-switch__handle {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+}
+
+/* Hide default Material Icons */
+::ng-deep .mdc-switch__icon--on,
+::ng-deep .mdc-switch__icon--off {
+  display: none !important;
+}
+
+/* Focus state color when switch is ON */
+::ng-deep .mdc-switch--selected:enabled:focus:not(:active) .mdc-switch__handle::after {
+  background: $color-blue-50 !important;
+}
+
+/* Selected handle background color */
+::ng-deep .mdc-switch--selected:enabled .mdc-switch__handle::after {
+  background: $color-blue-50 !important;
+}
+
+/* Focus state color when switch is OFF */
+::ng-deep .mdc-switch:not(.mdc-switch--selected):enabled:focus:not(:active) .mdc-switch__handle::after {
+  background: $color-grey-600 !important;
+}
+
+/* Track focus background when switch is OFF */
+::ng-deep .mdc-switch:not(.mdc-switch--selected):enabled:focus:not(:active) .mdc-switch__track::before {
+  background: #fff !important;
+}
+
+/* Track focus background for error theme when switch is ON */
+::ng-deep .custom-slide-toggle.mat-error .mdc-switch:enabled:focus:not(:active) .mdc-switch__track::after {
+  background: $color-error-500 !important;
+}
+
+/* Track after pseudo-element background */
+::ng-deep .mdc-switch__track::after {
+  background-color: $color-error-500 !important;
+}
+
+/* Track after pseudo-element background for green theme */
+::ng-deep .custom-slide-toggle.mat-green .mdc-switch__track::after {
+  background-color: $color-green-500 !important;
+}
+
+/* Track after pseudo-element background for primary theme */
+::ng-deep .custom-slide-toggle.mat-primary .mdc-switch__track::after {
+  background-color: $color-blue-300 !important;
+}
+
+/* Track before pseudo-element background */
+::ng-deep .mdc-switch__track::before {
+  background-color: #fff !important;
+}
+
+/* Icon color when toggle is off */
+::ng-deep .custom-slide-toggle:not(.mat-mdc-slide-toggle-checked) .slide-toggle-custom-icon {
+  color: #fff !important;
+}
+
+/* Icon color when toggle is on - Primary/Default */
+::ng-deep .custom-slide-toggle.mat-mdc-slide-toggle-checked .slide-toggle-custom-icon {
+  color: $color-blue-300 !important;
+}
+
+/* Icon color for Primary theme */
+::ng-deep .custom-slide-toggle.mat-primary.mat-mdc-slide-toggle-checked .slide-toggle-custom-icon {
+  color: $color-blue-300 !important;
+}
+
+/* Icon color for Green theme */
+::ng-deep .custom-slide-toggle.mat-green.mat-mdc-slide-toggle-checked .slide-toggle-custom-icon {
+  color: $color-green-500 !important;
+}
+
+/* Icon color for Error theme */
+::ng-deep .custom-slide-toggle.mat-error.mat-mdc-slide-toggle-checked .slide-toggle-custom-icon {
+  color: $color-error-500 !important;
+}

package/src/lib/storybook/testing-strip/testing-strip.component.html

@@ -0,0 +1,12 @@
+<div class="sb-testing-strip">
+ 
+  <code class="token">{{ testId }}</code>
+  <button type="button" class="btn" (click)="onGenerate()">
+    <span class="icon">⟳</span>
+    Generate
+  </button>
+  <button type="button" class="btn" (click)="onCopy()">
+    <span class="icon">⧉</span>
+    Copy
+  </button>
+</div>

package/src/lib/storybook/testing-strip/testing-strip.component.scss

@@ -0,0 +1 @@
+.sb-testing-strip{display:inline-flex;gap:8px;align-items:center;font:12px/1.4 ui-sans-serif,system-ui;color:#47515E}.sb-testing-strip .label{font-weight:600}.sb-testing-strip .token{background:#f3f4f6;padding:2px 6px;border-radius:4px}.sb-testing-strip .btn{display:inline-flex;gap:4px;align-items:center;font-size:12px;padding:4px 8px;border-radius:4px;border:1px solid #e5e7eb;background:#fff;cursor:pointer}.sb-testing-strip .icon{font-size:12px}

package/src/lib/styles/border-radius.scss

@@ -0,0 +1,11 @@
+// Border radius design tokens
+// Aligns with Foundations/Round Corners story: 4px, 8px, 16px
+
+$radius-4: 4px;  // Small
+$radius-8: 8px;  // Medium
+$radius-16: 16px; // Large
+
+// Aliases (optional)
+$radius-sm: $radius-4;
+$radius-md: $radius-8;
+$radius-lg: $radius-16;

package/src/lib/styles/button-mixins.scss

@@ -0,0 +1,41 @@
+@mixin button-theme($bg, $color, $hover, $active) {
+    background-color: $bg;
+    color: $color;
+  
+    &:hover {
+      background-color: $hover;
+    }
+  
+    &:active {
+      background-color: $active;
+    }
+  }
+  
+  @mixin button-outline($color) {
+    background-color: #fff;
+    color: $color;
+    border: 1px solid $color;
+  
+    &:hover {
+      background-color: $color;
+      color: #fff;
+    }
+  
+    &:active {
+      background-color: darken($color, 10%);
+      color: #fff;
+    }
+  }
+  
+  @mixin gradient-button($bg, $hover, $active) {
+    background: $bg;
+    color: #fff;
+  
+    &:hover {
+      background: $hover;
+    }
+  
+    &:active {
+      background: $active;
+    }
+  }

package/src/lib/styles/button.scss

@@ -0,0 +1,117 @@
+@import './colors.scss';
+
+// Base Colors
+$color-blue: #5473E8;
+$color-blue-hover: #6581EA;
+$color-blue-active: #1E46DF;
+
+$color-green: #37C1CE;
+$color-green-hover: #4BC7D3;
+$color-green-active: #299DA8;
+
+$color-grey: $color-grey-600;
+$color-grey-hover: #4B4F62;
+$color-grey-active: #252831;
+
+$color-error: #E854A4;
+$color-error-hover: #EF87BF;
+$color-error-active: #E22A8E;
+
+$color-gradient: linear-gradient(275deg, #5473E8 -36.22%, #37C1CE 100.04%);
+$color-gradient-hover: linear-gradient(0deg, rgba(250, 250, 253, 0.3), rgba(250, 250, 253, 0.3)),
+linear-gradient(275deg, #2BBBAD 9.3%, #4A90E2 115.85%);
+$color-gradient-active: linear-gradient(0deg, rgba(56, 59, 74, 0.5), rgba(56, 59, 74, 0.5)),
+linear-gradient(275deg, #2BBBAD 9.3%, #4A90E2 115.85%);
+
+// Outline variants
+$color-outline-blue: #5473E8;
+$color-outline-green: #37C1CE;
+$color-outline-grey: #383B4A;
+$color-outline-error: #E854A4;
+
+$color-disabled-bg: #D1D3DB;
+$color-disabled-text: #666;
+
+@mixin button-theme($bg, $color, $hover, $active) {
+  background-color: $bg;
+  color: $color;
+
+  &:hover {
+    background-color: $hover;
+  }
+
+  &:active {
+    background-color: $active;
+  }
+}
+
+@mixin button-outline($color) {
+  background-color: #fff;
+  color: $color;
+  border: 1px solid $color;
+
+  &:hover {
+    background-color: $color;
+    color: #fff;
+  }
+
+  &:active {
+    background-color: darken($color, 10%);
+    color: #fff;
+  }
+}
+
+@mixin gradient-button($bg, $hover, $active) {
+  background: $bg;
+  color: #fff;
+
+  &:hover {
+    background: $hover;
+  }
+
+  &:active {
+    background: $active;
+  }
+}
+
+.btn-blue {
+  @include button-theme($color-blue, #fff, $color-blue-hover, $color-blue-active);
+}
+
+.btn-green {
+  @include button-theme($color-green, #fff, $color-green-hover, $color-green-active);
+}
+
+.btn-grey {
+  @include button-theme($color-grey, #fff, $color-grey-hover, $color-grey-active);
+}
+
+.btn-error {
+  @include button-theme($color-error, #fff, $color-error-hover, $color-error-active);
+}
+
+.btn-blue-no-outline {
+  @include button-outline($color-outline-blue);
+}
+
+.btn-green-no-outline {
+  @include button-outline($color-outline-green);
+}
+
+.btn-grey-no-outline {
+  @include button-outline($color-outline-grey);
+}
+
+.btn-error-no-outline {
+  @include button-outline($color-outline-error);
+}
+
+.btn-gradient {
+  @include gradient-button($color-gradient, $color-gradient-hover, $color-gradient-active);
+}
+
+.btn-disabled {
+  background-color: $color-disabled-bg !important;
+  color: $color-disabled-text !important;
+  cursor: not-allowed !important;
+}