@allsorter/ui-components 0.0.367 → 0.0.370

package/src/lib/shared-popup-modal/shared-popup-modal.component.scss

@@ -0,0 +1,223 @@
+.modal-container {
+  padding: 0;
+
+  background: white;
+  border-radius: 16px;
+  // box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+  //   0 2px 4px -1px rgbbox-shadow: 0 6px 10px 4px rgba(113, 119, 147, 0.15);a(0, 0, 0, 0.06);
+  box-shadow: 0 6px 10px 4px rgba(113, 119, 147, 0.15);
+  display: flex;
+  flex-direction: column;
+  max-height: 90vh;
+  overflow: auto;
+
+}
+
+// Dialog title styling
+.modal-title {
+  color: #ffffff;
+  margin: 0;
+  padding: 12px 24px;
+  font-family: 'Roboto', sans-serif;
+  background-color: #4B4F62;
+  border-radius: 8px 8px 0 0;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .title-content {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex: 1;
+  }
+
+  .title-icon {
+    font-size: 16px;
+    width: 16px;
+    height: 16px;
+    color: #ffffff;
+  }
+}
+
+// Custom header styling
+.custom-header {
+  background-color: #4B4F62;
+  border-radius: 16px 16px 0 0;
+  padding: 36px 64px;
+  min-height: auto;
+  gap: 24px;
+  display: flex;
+  align-items: end;
+  justify-content: space-between;
+  position: relative;
+}
+
+.custom-header-left {
+  flex: 1 1 auto;
+  max-width: calc(100% - 260px);
+}
+
+.custom-header-title-section {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.custom-header-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 12px;
+
+  mat-icon {
+    color: #ffffff;
+    font-size: 32px;
+    width: 32px;
+    height: 32px;
+  }
+
+  span {
+    color: white;
+    font-weight: bold;
+    font-size: 16px;
+  }
+}
+
+.custom-header-title {
+  color: #ffffff;
+  margin: 0;
+  font-size: 32px;
+  font-family: 'Roboto', sans-serif;
+  font-size: 32px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 120%;
+  /* 38.4px */
+  letter-spacing: -0.032px;
+}
+
+.custom-header-description {
+  color: rgba(255, 255, 255, 0.85);
+  margin: 0 0 4px 0;
+  font-size: 18px;
+  line-height: 1.5;
+  font-family: 'Roboto', sans-serif;
+}
+
+.templating-guide-link {
+  display: inline;
+  margin-top: 4px;
+  color: #37C1CE;
+  text-decoration: underline;
+}
+
+.templating-guide-prefix {
+  color: #ffffff;
+}
+
+.templating-guide-suffix {
+  color: #ffffff;
+}
+
+.custom-header-right {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: end;
+  gap: 46px;
+  // min-width: 240px;
+}
+
+// Absolutely position the close button in the top-right of the custom header
+.custom-header-right .custom-close {
+  position: absolute;
+  top: 24px;
+  right: 24px;
+}
+
+// Dialog content styling
+.modal-body {
+  padding: 24px;
+  flex: 1;
+  overflow-y: auto;
+}
+
+// When using custom header, increase body padding to 32px TB and 64px LR
+.custom-header+.modal-body {
+  padding: 32px 64px;
+}
+
+.modal-message {
+  font-size: 16px;
+  color: #4b5563;
+  margin: 0 0 16px 0;
+  line-height: 1.5;
+  font-family: 'Roboto', sans-serif;
+}
+
+// Dialog actions styling
+.modal-actions {
+  display: flex;
+  gap: 8px;
+  justify-content: center;
+  align-items: center;
+  margin: 24px 0 0 0;
+  /* ensure 24px gap above buttons */
+  box-sizing: border-box;
+
+}
+
+/* Feedback icon sizes and colors */
+.feedback-icon {
+  font-size: 72px;
+  width: 72px;
+  height: 72px;
+}
+
+.feedback-icon.success {
+  color: #4caf50;
+}
+
+.feedback-icon.warning {
+  color: #f6c000;
+}
+
+.feedback-icon.error {
+  color: #f44336;
+}
+
+/* Image icons for warning and error */
+.feedback-icon-image {
+  width: 72px;
+  height: 72px;
+  object-fit: contain;
+}
+
+// @media (max-width: 768px) {
+//   .custom-header {
+//     padding: 24px;
+//     flex-direction: column;
+//     align-items: flex-start;
+//   }
+
+//   .custom-header-left {
+//     max-width: 100%;
+//     margin-right: 0;
+//   }
+
+//   .custom-header-right {
+//     width: 100%;
+//     min-width: 0;
+//     align-items: flex-start;
+//     margin-top: 12px;
+//   }
+
+//   .custom-header-right .custom-close {
+//     top: 16px;
+//     right: 16px;
+//   }
+// }

package/src/lib/side-action-bar-wrapper/side-action-bar-wrapper.component.html

@@ -0,0 +1,17 @@
+<div class="al-side-action-bar-wrap" [ngClass]="'position-' + position">
+  <!-- Visible bar -->
+  <ng-container *ngIf="visible">
+    <div class="al-side-action-bar">
+      <div class="al-side-action-bar__close" *ngIf="showClose">
+        <al-button [buttonType]="'icon-circle'" [color]="'grey'" [outline]="false" [size]="'base'" [iconOnly]="true"
+          [iconOutlined]="iconOutlined" [icon]="'close'" [tooltip]="closeButtonTooltip"
+          [tooltipPosition]="closeButtonTooltipPosition" aria-label="Close" (onClick)="closeClick.emit()"></al-button>
+      </div>
+
+      <!-- Buttons rail -->
+      <div class="al-side-action-bar__rail">
+        <ng-content></ng-content>
+      </div>
+    </div>
+  </ng-container>
+</div>

package/src/lib/side-action-bar-wrapper/side-action-bar-wrapper.component.scss

@@ -0,0 +1,58 @@
+@import "../styles/colors.scss";
+@import "../styles/border-radius.scss";
+@import "../styles/spacing.scss";
+
+/* Outer container for side action bar */
+.al-side-action-bar-wrap {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+
+  &.position-left {
+    justify-content: flex-start;
+  }
+
+  &.position-right {
+    justify-content: flex-end;
+  }
+}
+
+.al-side-action-bar {
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  gap: $space-8;
+  padding: 12px 8px;
+
+  .al-side-action-bar__rail {
+    // Rail matches dark desaturated indigo-grey from Figma
+    background: rgba(113, 119, 147, 0.8);
+    border-radius: $radius-8;
+    padding: 12px $space-8;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: $space-8; // spacing between action buttons
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+    backdrop-filter: blur(2px);
+
+    // White button hover styling
+    ::ng-deep al-button button.white.btn-outlined:hover {
+      background-color: #4B4F62 !important;
+      box-shadow: none !important;
+      border: none !important;
+    }
+  }
+
+  .al-side-action-bar__close {
+
+
+    // White button hover styling for close button
+    ::ng-deep al-button button.white.btn-outlined:hover {
+      background-color: #4B4F62 !important;
+      box-shadow: none !important;
+      border: none !important;
+    }
+  }
+}

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

@@ -0,0 +1,17 @@
+<div class="slide-toggle-container" [matTooltip]="tooltip" [matTooltipPosition]="tooltipPosition">
+  <mat-slide-toggle #slideToggle [checked]="checked" [disabled]="disabled" [name]="name" [required]="required"
+    [color]="color" (change)="handleChange($event)" (focus)="handleFocus($event)" (blur)="handleBlur($event)"
+    class="custom-slide-toggle" [class.slide-toggle-small]="size === 'small'"
+    [class.slide-toggle-medium]="size === 'medium'" [class.slide-toggle-large]="size === 'large'"
+    [attr.data-testid]="dataTestId">
+    <div *ngIf="showLabels" class="slide-toggle-labels">
+      <div *ngIf="labelText" class="slide-toggle-label-main">
+        {{ labelText }}
+      </div>
+      <div *ngIf="helperText" class="slide-toggle-label-helper">
+        {{ helperText }}
+      </div>
+    </div>
+    <ng-content></ng-content>
+  </mat-slide-toggle>
+</div>