@allsorter/ui-components 0.0.367 → 0.0.370

package/src/lib/icon-button/icon-button.component.html

@@ -0,0 +1,12 @@
+<button type="button" class="icon-btn" [ngClass]="[
+    'icon-btn',
+    'size-' + size,
+    'color-' + colour,
+    iconOutlined ? 'icon-outlined' : '',
+    disabled ? 'icon-btn-disabled' : ''
+  ]" [disabled]="disabled" (click)="handleClick($event)" [attr.aria-label]="icon"
+  [attr.data-test-id]="effectiveDataTestId">
+  <mat-icon [fontSet]="getEffectiveFontSet()" class="icon-btn-icon"
+    [ngStyle]="customColour ? { color: customColour } : null">{{ getEffectiveIconName()
+    }}</mat-icon>
+</button>

package/src/lib/icon-button/icon-button.component.scss

@@ -0,0 +1,77 @@
+@import url("https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined");
+@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=network_node");
+@import "../styles/typography-classes.scss";
+@import "../styles/colors.scss";
+@import "../styles/border-radius.scss";
+.icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: none;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: background 0.18s, box-shadow 0.18s;
+  outline: none;
+  padding: 0;
+  min-width: 0;
+  min-height: 0;
+}
+
+.icon-btn-disabled {
+  opacity: 0.4;
+  pointer-events: none;
+}
+
+.icon-btn-icon {
+  font-size: 20px;
+  width: 20px;
+  height: 20px;
+}
+
+/* Size variants (match button) */
+.size-xs .icon-btn-icon { font-size: 12px; width: 12px; height: 12px; }
+.size-sm .icon-btn-icon, .size-base .icon-btn-icon { font-size: 16px; width: 16px; height: 16px; }
+.size-l .icon-btn-icon { font-size: 20px; width: 20px; height: 20px; }
+.size-xl .icon-btn-icon { font-size: 24px; width: 24px; height: 24px; }
+.size-header .icon-btn-icon { font-size: 20px; width: 20px; height: 20px; }
+
+/* Color variants (extend as needed) */
+.color-blue { color: $color-blue; }
+.color-blue .icon-btn-icon { color: $color-blue; }
+.color-green { color: $color-green; }
+.color-green .icon-btn-icon { color: $color-green; }
+.color-grey { color: $color-grey; }
+.color-grey .icon-btn-icon { color: $color-grey; }
+.color-error { color: $color-error; }
+.color-error .icon-btn-icon { color: $color-error; }
+.color-success { color: $color-success; }
+.color-success .icon-btn-icon { color: $color-success; }
+.color-gradient {
+  background: linear-gradient(275deg, #5473E8 -36.22%, #37C1CE 100.04%) !important;
+  color: #fff;
+}
+.color-gradient .icon-btn-icon { color: #fff !important; }
+
+.icon-outlined { background: none !important; }
+
+/* Material Symbols font support */
+.material-symbols-outlined {
+  font-family: 'Material Symbols Outlined' !important;
+  font-weight: normal;
+  font-style: normal;
+  font-feature-settings: 'liga';
+  -webkit-font-feature-settings: 'liga';
+  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+}
+
+/* Ensure mat-icon uses Material Symbols font when fontSet is material-symbols-outlined */
+mat-icon.material-symbols-outlined,
+.icon-btn-icon.material-symbols-outlined {
+  font-family: 'Material Symbols Outlined' !important;
+  font-weight: normal !important;
+  font-style: normal !important;
+  font-feature-settings: 'liga' !important;
+  -webkit-font-feature-settings: 'liga' !important;
+  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24 !important;
+}

package/src/lib/input/input.component.html

@@ -0,0 +1,86 @@
+<!-- Standard floating label layout for all inputs including date picker -->
+<mat-form-field appearance="outline" class="al-input-field" [ngClass]="[
+    helperText ? 'has-helper-text' : '',
+    getSizeClass(),
+    getCategoryClass(),
+    noBorder ? 'al-input-no-border' : '',
+    leftIcon ? 'has-left-icon' : ''
+  ]" [attr.data-test-id]="dataTestId" [matTooltip]="tooltip" [matTooltipPosition]="tooltipPosition"
+  [matTooltipDisabled]="!tooltip">
+  <mat-label *ngIf="labelText && !noBorder">{{ labelText }}</mat-label>
+
+  <mat-icon *ngIf="leftIcon?.trim() as leftIconText" [fontSet]="outlined ? 'material-icons-outlined' : 'material-icons'"
+    matPrefix class="left-icon">{{ leftIconText }}</mat-icon>
+
+  <ng-container *ngIf="hasDropDown; else regularInput">
+    <!-- Searchable Dropdown with Autocomplete -->
+    <ng-container *ngIf="isSearchableDropdown; else regularDropdown">
+      <input matInput #searchInput type="text" [placeholder]="placeholder || labelText" [disabled]="isDisabled"
+        [value]="searchValue" (input)="onSearchInputChange($event)" (focus)="onSearchFocus()" (click)="onSearchFocus()"
+        (blur)="onTouched()" [matAutocomplete]="auto" #autocompleteTrigger="matAutocompleteTrigger"
+        autocomplete="off" />
+      <mat-autocomplete #auto="matAutocomplete" (optionSelected)="onOptionSelected($event)" [displayWith]="displayFn"
+        panelClass="al-searchable-dropdown-panel" [autoActiveFirstOption]="false" [panelWidth]="null">
+        <mat-option *ngFor="let option of filteredOptions" [value]="option">
+          {{ option }}
+        </mat-option>
+        <mat-option *ngIf="filteredOptions.length === 0 && searchValue && searchValue.trim()" disabled>
+          <span style="display: flex; align-items: center; gap: 8px;">
+            <mat-icon style="font-size: 18px; width: 18px; height: 18px;">search_off</mat-icon>
+            <span>No results found</span>
+          </span>
+        </mat-option>
+      </mat-autocomplete>
+      <mat-icon matSuffix class="search-icon" *ngIf="!rightIcon?.trim()">search</mat-icon>
+      <mat-icon *ngIf="rightIcon?.trim() && isSearchableDropdown" matSuffix class="right-icon">{{ rightIcon
+        }}</mat-icon>
+    </ng-container>
+
+    <!-- Regular Dropdown (non-searchable) -->
+    <ng-template #regularDropdown>
+      <mat-select [disabled]="isDisabled" [multiple]="multipleSelect"
+        [ngModel]="multipleSelect ? selectedValues : value" (selectionChange)="onSelectionChange($event.value)"
+        [placeholder]="placeholder || labelText">
+        <mat-option *ngFor="let option of options" [value]="option">{{ option }}</mat-option>
+      </mat-select>
+    </ng-template>
+  </ng-container>
+  <ng-template #regularInput>
+    <!-- Color Picker Input -->
+    <ng-container *ngIf="isColorPicker; else datePickerInput">
+      <div class="color-picker-container">
+        <input matInput [placeholder]="placeholder || labelText" [disabled]="isDisabled" [(ngModel)]="value"
+          (input)="onInputChange($any($event.target).value)" (blur)="onTouched()" />
+        <input type="color" class="color-picker-input" [value]="value || '#000000'" [disabled]="isDisabled"
+          (input)="handleColorChange($event)" (blur)="onTouched()" />
+        <mat-icon class="color-picker-icon" matSuffix>palette</mat-icon>
+      </div>
+    </ng-container>
+
+    <!-- Date Picker Input - with floating label animation -->
+    <ng-template #datePickerInput>
+      <ng-container *ngIf="isDatePicker; else standardInput">
+        <input matInput [matDatepicker]="datepickerRef" [placeholder]="placeholder || labelText" [disabled]="isDisabled"
+          [(ngModel)]="selectedDate" (dateChange)="onDateChange($event)" (blur)="onTouched()" />
+        <mat-datepicker-toggle matSuffix [for]="datepickerRef"></mat-datepicker-toggle>
+        <mat-datepicker #dp *ngIf="!matDatepicker" startView="multi-year" (monthSelected)="onMonthSelected($event, dp)"
+          (yearSelected)="onYearSelected($event, dp)" panelClass="example-month-picker">
+        </mat-datepicker>
+      </ng-container>
+
+      <!-- Standard Input -->
+      <ng-template #standardInput>
+        <input matInput [placeholder]="placeholder || labelText" [type]="type" [disabled]="isDisabled"
+          [(ngModel)]="value" (input)="onInputChange($any($event.target).value)" (blur)="onTouched()" />
+      </ng-template>
+    </ng-template>
+  </ng-template>
+
+  <!-- Right icon - only show when not date picker, not color picker, and not searchable dropdown -->
+  <mat-icon *ngIf="!isDatePicker && !isColorPicker && !isSearchableDropdown && rightIcon?.trim() as rightIconText"
+    [fontSet]="outlined ? 'material-icons-outlined' : 'material-icons'" matSuffix class="right-icon">{{ rightIconText
+    }}</mat-icon>
+
+  <mat-error *ngIf="false && helperText">{{ helperText }}</mat-error>
+  <mat-hint *ngIf="helperText">{{ helperText }}</mat-hint>
+</mat-form-field>