@allsorter/ui-components 0.0.367 → 0.0.370

package/src/lib/ai-apply-bar/ai-apply-bar.component.scss

@@ -0,0 +1,182 @@
+@import '../styles/border-radius.scss';
+@import '../styles/spacing.scss';
+@import '../styles/colors.scss';
+
+
+/* Hide down arrow in mat-mdc-select for all selects inside ai-apply-bar */
+:host ::ng-deep .mat-mdc-select-arrow {
+  display: none !important;
+}
+
+/* Outer container to allow floating close button */
+.ai-apply-wrap {
+  position: relative;
+  display: inline-flex;
+  align-items: stretch;
+  width: 100%;
+  overflow: hidden;
+  gap: 8px;
+}
+
+/* Dark rail with rounded corners */
+.ai-apply-rail {
+  background: rgba(113, 119, 147, 0.8);
+  border-radius: $radius-8;
+  padding: $space-8;
+  display: flex;
+  flex-direction: column;
+  gap: $space-4;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+  backdrop-filter: blur(2px);
+}
+
+.ai-apply-row {
+  display: flex;
+  align-items: center;
+  gap: $space-4;
+  height: 40px;
+}
+
+.ai-apply-button {
+  display: flex;
+  align-items: center;
+  gap: $space-4;
+  height: 40px;
+}
+
+.ai-apply-button al-button {
+  height: 40px;
+  min-height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+}
+
+.ai-apply-button al-icon-button {
+  height: 24px !important;
+  min-height: 24px !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+}
+
+.ai-apply-input {
+  flex: 1 1 auto;
+  display: flex;
+  align-items: center;
+
+  /* Stretch inner input and normalize height to 40px */
+  ::ng-deep al-input {
+    width: 100%;
+  }
+
+  ::ng-deep .al-input-size-base .mat-mdc-form-field-infix {
+    min-height: 40px !important;
+  }
+
+  ::ng-deep .al-input-field .mat-mdc-text-field-wrapper {
+    height: 40px;
+  }
+
+  /* Style mat-form-field */
+  ::ng-deep .mat-mdc-form-field {
+    background: #fff;
+    border-radius: $radius-8;
+    border: 0 !important;
+    overflow: hidden;
+  }
+
+  /* Ensure all parts of the notched outline have consistent border-radius */
+  ::ng-deep .al-input-field .mdc-notched-outline {
+    border-radius: $radius-8 !important;
+  }
+
+  ::ng-deep .al-input-field .mdc-notched-outline__leading {
+    border-top-left-radius: $radius-8 !important;
+    border-bottom-left-radius: $radius-8 !important;
+    border-top-right-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+  }
+
+  ::ng-deep .al-input-field .mdc-notched-outline__trailing {
+    border-top-right-radius: $radius-8 !important;
+    border-bottom-right-radius: $radius-8 !important;
+    border-top-left-radius: 0 !important;
+    border-bottom-left-radius: 0 !important;
+  }
+
+  ::ng-deep .al-input-field .mdc-notched-outline__notch {
+    border-radius: 0 !important;
+  }
+
+  /* Ensure placeholder is visible in mat-select */
+  ::ng-deep .mat-mdc-select-placeholder {
+    color: $color-grey-700 !important;
+    opacity: 1 !important;
+  }
+
+  ::ng-deep .mat-mdc-select-value-text {
+    color: $color-grey-700 !important;
+  }
+
+  /* Styles for searchfilter autocomplete input */
+  ::ng-deep input[matInput] {
+    color: $color-grey-700 !important;
+  }
+
+  ::ng-deep input[matInput]::placeholder {
+    color: $color-grey-700 !important;
+    opacity: 1 !important;
+  }
+
+  /* Hide the label when labelText is empty */
+  ::ng-deep .mat-mdc-form-field:has(.mat-mdc-form-field-label:empty) .mat-mdc-form-field-label {
+    display: none !important;
+  }
+
+  /* Ensure no label spacing when labelText is empty */
+  ::ng-deep .mat-mdc-form-field:not(:has(.mat-mdc-form-field-label:not(:empty))) .mat-mdc-form-field-infix {
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+  }
+}
+
+
+
+.ai-apply-helper {
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 12px;
+  line-height: 16px;
+}
+
+/* Floating close button to the right, vertically centered */
+
+.ai-apply-close {
+  position: relative;
+  margin-left: auto;
+  z-index: 2;
+  display: flex;
+  align-items: start;
+  margin-top: 8px;
+
+  ::ng-deep button.icon-circle {
+    width: 40px !important;
+    height: 40px !important;
+    min-width: 40px !important;
+    background-color: none !important;
+    border: none !important;
+    box-shadow: none !important;
+    color: rgba(255, 255, 255, 0.7) !important;
+    cursor: pointer !important;
+
+    &:hover {
+      color: rgba(255, 255, 255, 0.9) !important;
+    }
+
+    &:active {
+      color: rgba(255, 255, 255, 0.9) !important;
+    }
+  }
+}

package/src/lib/app-toolbar/app-toolbar.component.html

@@ -0,0 +1,13 @@
+<div class="toolbar-container">
+  <div class="icon-wrapper"><button type="button" class="toolbar-icon toolbar-icon--handle"
+      [attr.aria-label]="requiredIcon.handle.title" [attr.title]="requiredIcon.handle.title"
+      (click)="$event.stopPropagation()"><mat-icon svgIcon="handle" class="handle-icon"></mat-icon></button></div>
+  <div class="toolbar-icons">
+    <div class="icon-wrapper"><button type="button" class="toolbar-icon toolbar-icon--edit"
+        [attr.aria-label]="requiredIcon.edit.title" [attr.title]="requiredIcon.edit.title"
+        (click)="editSelectedSection()"><mat-icon svgIcon="edit_icon" class="edit-icon"></mat-icon></button></div>
+    <div class="icon-wrapper"><button type="button" class="toolbar-icon toolbar-icon--search"
+        [attr.aria-label]="requiredIcon.search.title" [attr.title]="requiredIcon.search.title"
+        (click)="onSearchClick($event)"><mat-icon svgIcon="search" class="search-icon"></mat-icon></button></div>
+  </div>
+</div>

package/src/lib/app-toolbar/app-toolbar.component.scss

@@ -0,0 +1,141 @@
+.toolbar-container {
+  background-color: transparent;
+  border-radius: 8px;
+  padding: 8px 6px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+
+  transition: background-color 0.2s ease;
+}
+
+.toolbar-container:hover {
+  background-color: #e5e9fc;
+
+}
+
+
+.toolbar-icon {
+  /* Removed custom sizing/alignment to use icon-button's built-in styles */
+  border-radius: 8px;
+  color: #6B7280;
+  background: transparent;
+  transition: background 0.2s, color 0.2s;
+  cursor: pointer;
+}
+
+.toolbar-icon:focus,
+.toolbar-icon:hover,
+.toolbar-icon.active {
+  // background: #F5F7FB;
+  color: #374151;
+}
+
+.toolbar-icon--handle,
+.toolbar-icon--edit,
+.toolbar-icon--search {
+  border: none;
+  background: transparent;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.toolbar-icon--handle {
+  cursor: grab;
+}
+
+.icon-wrapper {
+  position: relative;
+  display: flex;
+  width: 20px;
+  height: 20px;
+  padding: 2px;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+  aspect-ratio: 1/1;
+  background-color: transparent;
+  border-radius: 4px;
+  margin: 0 auto;
+  box-sizing: border-box;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 20px;
+    height: 20px;
+    background-color: transparent;
+    border-radius: 4px;
+    transition: width 0.2s ease, height 0.2s ease, background-color 0.2s ease;
+    z-index: 0;
+    pointer-events: none;
+  }
+
+  &:hover::before {
+    width: 22px;
+    height: 22px;
+    background-color: #BBC7F6;
+  }
+
+  // Ensure icon-button stays above and centered
+  ::ng-deep al-icon-button,
+  button {
+    position: relative;
+    z-index: 1;
+  }
+}
+
+.handle-icon,
+.edit-icon,
+.search-icon {
+  width: 20px;
+  height: 20px;
+  font-size: 20px;
+  color: #6B7280;
+}
+
+.handle-icon mat-icon,
+.edit-icon mat-icon,
+.search-icon mat-icon {
+  width: 20px;
+  height: 20px;
+  font-size: 20px;
+  color: #6B7280;
+  
+  ::ng-deep svg {
+    width: 20px;
+    height: 20px;
+  }
+}
+
+.icon-wrapper .toolbar-icon {
+  width: 20px;
+  height: 20px;
+  margin: 0 auto;
+}
+
+.toolbar-icons {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transform: translateY(-4px);
+  transition: opacity 150ms ease, transform 150ms ease, visibility 0s linear 150ms;
+}
+
+.toolbar-container:hover .toolbar-icons {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+  transform: translateY(0);
+  transition: opacity 150ms ease, transform 150ms ease, visibility 0s;
+}

package/src/lib/app-toolbar-right/app-toolbar-right.component.html

@@ -0,0 +1,15 @@
+<div class="toolbar-right-container">
+  <div class="icon-wrapper"><al-checkbox *ngIf="requiredIcon.checkbox.display" [checked]="checked" [showLabels]="false"
+      (change)="onCheckboxChange($event)" (mouseenter)="onCheckboxHover(true)"
+      (mouseleave)="onCheckboxHover(false)"></al-checkbox></div>
+  <div class="toolbar-right-icons" [ngClass]="{'always-visible': showIcons}">
+    <div class="icon-wrapper"><button *ngIf="requiredIcon.sr.display" type="button"
+        class="toolbar-icon toolbar-icon--subrole" [attr.aria-label]="requiredIcon.sr.title"
+        [attr.title]="requiredIcon.sr.title" (click)="setSubrole()"><mat-icon
+          [svgIcon]="currentObj['subrole'] ? 'subrole_active' : 'subrole'" class="subrole-icon"></mat-icon></button>
+    </div>
+    <div class="icon-wrapper"><button *ngIf="requiredIcon.eye.display" type="button"
+        class="toolbar-icon toolbar-icon--eye eye-icon" [attr.aria-label]="eyeLabel" [attr.title]="eyeTitle"
+        (click)="onToggleVisibility()"><mat-icon [svgIcon]="eyeSvgIcon" class="eye-icon"></mat-icon></button></div>
+  </div>
+</div>

package/src/lib/app-toolbar-right/app-toolbar-right.component.scss

@@ -0,0 +1,294 @@
+.toolbar-right-container {
+  background-color: transparent;
+  border-radius: 8px;
+  padding: 8px 6px !important;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  gap: 12px !important;
+  transition: background-color 0.3s ease-in-out;
+
+  // Disable all ripple effects
+  ::ng-deep .mat-ripple-element {
+    display: none !important;
+    opacity: 0 !important;
+    visibility: hidden !important;
+    pointer-events: none !important;
+    animation: none !important;
+  }
+
+  ::ng-deep .mat-ripple {
+    display: none !important;
+    visibility: hidden !important;
+    pointer-events: none !important;
+  }
+
+  ::ng-deep .mdc-ripple-surface {
+    --mdc-ripple-fg-opacity: 0 !important;
+    --mdc-ripple-hover-opacity: 0 !important;
+    --mdc-ripple-press-opacity: 0 !important;
+    --mdc-ripple-focus-opacity: 0 !important;
+  }
+
+  // Disable MDC checkbox ripple - all states
+  ::ng-deep .mdc-checkbox__ripple,
+  ::ng-deep .mdc-checkbox:hover .mdc-checkbox__ripple,
+  ::ng-deep .mdc-checkbox:focus .mdc-checkbox__ripple,
+  ::ng-deep .mat-mdc-checkbox:hover .mdc-checkbox__ripple,
+  ::ng-deep .mat-mdc-checkbox:focus .mdc-checkbox__ripple,
+  ::ng-deep .mat-mdc-checkbox.mat-focused .mdc-checkbox__ripple {
+    display: none !important;
+    opacity: 0 !important;
+    visibility: hidden !important;
+    background-color: transparent !important;
+    pointer-events: none !important;
+    animation: none !important;
+    transform: scale(0) !important;
+  }
+
+  // Disable all ripple animations and elements
+  ::ng-deep [class*="ripple"],
+  ::ng-deep [class*="Ripple"] {
+    display: none !important;
+    opacity: 0 !important;
+    visibility: hidden !important;
+    pointer-events: none !important;
+    animation: none !important;
+  }
+
+  // Disable state layer (MDC ripple container)
+  ::ng-deep .mdc-checkbox__native-control::before,
+  ::ng-deep .mdc-checkbox__native-control::after {
+    display: none !important;
+  }
+}
+
+.toolbar-right-container:hover {
+  background-color: #e5e9fc;
+
+}
+
+
+al-icon-button {
+  margin: 0 auto !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+
+.icon-wrapper al-checkbox {
+  width: 20px !important;
+  height: 20px !important;
+  margin: 0 auto !important;
+  padding: 0 !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none !important;
+  border-radius: 2px;
+
+  ::ng-deep * {
+    border-radius: 2px !important;
+  }
+
+  // Disable checkbox ripple effect completely
+  ::ng-deep .mdc-checkbox__ripple {
+    display: none !important;
+    opacity: 0 !important;
+    visibility: hidden !important;
+    background-color: transparent !important;
+    pointer-events: none !important;
+    animation: none !important;
+    transform: scale(0) !important;
+  }
+
+  ::ng-deep .mat-ripple-element {
+    display: none !important;
+    opacity: 0 !important;
+    visibility: hidden !important;
+    pointer-events: none !important;
+    animation: none !important;
+  }
+
+  ::ng-deep .mat-ripple {
+    display: none !important;
+    visibility: hidden !important;
+    pointer-events: none !important;
+  }
+
+  ::ng-deep .mdc-ripple-surface {
+    --mdc-ripple-fg-opacity: 0 !important;
+    --mdc-ripple-hover-opacity: 0 !important;
+    --mdc-ripple-press-opacity: 0 !important;
+    --mdc-ripple-focus-opacity: 0 !important;
+  }
+
+  // Disable state layer pseudo-elements
+  ::ng-deep .mdc-checkbox__native-control::before,
+  ::ng-deep .mdc-checkbox__native-control::after {
+    display: none !important;
+    content: none !important;
+  }
+}
+
+
+@import '../styles/colors.scss';
+
+al-icon-button {
+  color: $color-grey-700 !important;
+  background: transparent !important;
+}
+
+:host ::ng-deep al-icon-button:hover,
+:host ::ng-deep al-icon-button:focus {
+  background: transparent !important;
+  color: $color-grey-700 !important;
+}
+
+.toolbar-right-icons {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
+}
+
+.icon-wrapper {
+  position: relative;
+  display: flex;
+  width: 20px;
+  height: 20px;
+  padding: 2px;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+  aspect-ratio: 1/1;
+  background-color: transparent;
+  border-radius: 4px;
+  margin: 0 auto;
+  box-sizing: border-box;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 24px;
+    height: 24px;
+    background-color: transparent;
+    border-radius: 4px;
+    transition: width 0.2s ease, height 0.2s ease, background-color 0.2s ease;
+    z-index: 0;
+    pointer-events: none;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  // Ensure icon-button stays above and centered
+  ::ng-deep al-icon-button,
+  ::ng-deep al-checkbox,
+  button {
+    position: relative;
+    z-index: 1;
+  }
+}
+
+/* Remove hover background from checkbox wrapper (first icon-wrapper) */
+.toolbar-right-container>.icon-wrapper:first-child:hover::before {
+  background-color: transparent;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+}
+
+/* Show background on other icon wrappers (subrole, etc.) on hover with padding */
+.toolbar-right-icons .icon-wrapper:hover::before {
+  width: 24px;
+  height: 24px;
+  background-color: #BBC7F6;
+}
+
+/* Show background on checkbox wrapper only when eye icon is hovered */
+.toolbar-right-container:has(.toolbar-right-icons .icon-wrapper:has(.eye-icon):hover)>.icon-wrapper:first-child::before {
+  width: 24px;
+  height: 24px;
+  background-color: #BBC7F6;
+}
+
+.toolbar-right-container:hover .toolbar-right-icons {
+  visibility: visible;
+  opacity: 1;
+}
+
+/* Always show icons when alwaysShowIcons is true or when hovering checkbox */
+.toolbar-right-icons.always-visible {
+  visibility: visible;
+  opacity: 1;
+}
+
+.toolbar-icon {
+  border: none;
+  background: transparent;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  width: 20px;
+  height: 20px;
+  margin: 0 auto;
+
+  // Disable ripple effect
+  &::after {
+    display: none !important;
+  }
+
+  // Disable Material ripple
+  ::ng-deep .mat-ripple-element {
+    display: none !important;
+  }
+
+  ::ng-deep .mat-ripple {
+    display: none !important;
+  }
+}
+
+.subrole-icon {
+  width: 20px;
+  height: 20px;
+  font-size: 20px;
+  color: #6B7280;
+}
+
+.subrole-icon mat-icon {
+  width: 20px;
+  height: 20px;
+  font-size: 20px;
+  color: #6B7280;
+}
+
+.eye-icon {
+  width: 20px;
+  height: 20px;
+  font-size: 20px;
+  color: #6B7280;
+}
+
+.eye-icon mat-icon {
+  width: 20px;
+  height: 20px;
+  font-size: 20px;
+  color: #6B7280;
+}
+
+.icon-wrapper al-icon-button {
+  width: 20px;
+  height: 20px;
+  margin: 0 auto;
+}