@allsorter/ui-components 0.0.367 → 0.0.370

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

@@ -0,0 +1,127 @@
+<!-- Regular button types -->
+<ng-container *ngIf="!(hasDropDown || buttonType === 'dropdown'); else dropdownTpl">
+  <button mat-flat-button class="btn custom-button" [class]="effectiveFontClass" [attr.data-test-id]="dataTestId"
+    [ngClass]="{
+      'size-header': size === 'header' && !fontClass,
+      'size-xs': size === 'xs' && !fontClass,
+      'size-sm': size === 'sm' && !fontClass,
+      'size-base': size === 'base' && !fontClass,
+      'size-l': size === 'l' && !fontClass,
+      'size-xl': size === 'xl' && !fontClass,
+      'mat-raised-button': variant === 'raised',
+      'mat-flat-button': variant === 'flat',
+
+      'mat-stroked-button': variant === 'stroked',
+      'mat-fab': variant === 'fab',
+      'mat-icon-button': variant === 'icon',
+      'icon-circle': buttonType === 'icon-circle',
+      'blue': color === 'blue',
+      'green': color === 'green',
+      'grey': color === 'grey',
+      'error': color === 'error',
+      'success': color === 'success',
+      'gradient': color === 'gradient',
+      'white': color === 'white',
+      'btn-outlined': outline,
+      'btn-default': effectiveState === 'default',
+      'btn-hover': effectiveState === 'hover',
+      'btn-pressed': effectiveState === 'pressed',
+      'btn-disabled': effectiveState === 'disabled'
+    }" [disabled]="isDisabled" [matTooltip]="hasTooltip ? tooltip : null" [matTooltipPosition]="tooltipPosition"
+    [matTooltipDisabled]="!hasTooltip" (click)="onClick.emit($event)" (mouseenter)="onHover.emit($event)"
+    (mouseleave)="onMouseLeave.emit($event)" [style.display]="'inline-flex'" [style.align-items]="'center'"
+    [style.gap.px]="computeGap()">
+
+    <!-- Left Icon (only if provided; for icon-circle prefer `icon` over `leftIcon`) -->
+    <ng-container *ngIf="(buttonType === 'icon-circle' ? (icon || leftIcon) : leftIcon)?.trim() as leftIconText">
+      <ng-container *ngIf="getLeftSvgIconName() as svgIconName; else leftIconFont">
+        <mat-icon [svgIcon]="svgIconName" class="left-icon"></mat-icon>
+      </ng-container>
+      <ng-template #leftIconFont>
+        <mat-icon [fontSet]="getLeftIconFontSet()" class="left-icon">
+          {{ getLeftIconName() }}
+        </mat-icon>
+      </ng-template>
+    </ng-container>
+
+    <!-- Label (hidden when iconOnly is true) -->
+    <span *ngIf="!iconOnly && buttonType !== 'icon-circle'" class="button-label">
+      {{ labelText || '' }}
+    </span>
+
+    <!-- Right icon (only if provided) -->
+    <ng-container *ngIf="rightIcon?.trim() as rightIconText">
+      <ng-container *ngIf="getRightSvgIconName() as svgIconName; else rightIconFont">
+        <mat-icon [svgIcon]="svgIconName" class="right-icon"></mat-icon>
+      </ng-container>
+      <ng-template #rightIconFont>
+        <mat-icon [fontSet]="getRightIconFontSet()" class="right-icon">
+          {{ getRightIconName() }}
+        </mat-icon>
+      </ng-template>
+    </ng-container>
+  </button>
+</ng-container>
+
+<!-- Dropdown button template -->
+<ng-template #dropdownTpl>
+  <button mat-flat-button class="btn custom-button" [class]="effectiveFontClass" [attr.data-test-id]="dataTestId"
+    [ngClass]="{
+      'size-header': size === 'header' && !fontClass,
+      'size-xs': size === 'xs' && !fontClass,
+      'size-sm': size === 'sm' && !fontClass,
+      'size-base': size === 'base' && !fontClass,
+      'size-l': size === 'l' && !fontClass,
+      'size-xl': size === 'xl' && !fontClass,
+      'mat-raised-button': variant === 'raised',
+      'mat-flat-button': variant === 'flat',
+      'mat-stroked-button': variant === 'stroked',
+      'mat-fab': variant === 'fab',
+      'mat-icon-button': variant === 'icon',
+      'icon-label': true,
+      'blue': color === 'blue',
+      'green': color === 'green',
+      'grey': color === 'grey',
+      'error': color === 'error',
+      'success': color === 'success',
+      'gradient': color === 'gradient',
+      'white': color === 'white',
+      'btn-outlined': outline,
+      'btn-default': effectiveState === 'default',
+      'btn-hover': effectiveState === 'hover',
+      'btn-pressed': effectiveState === 'pressed',
+      'btn-disabled': effectiveState === 'disabled'
+    }" [disabled]="isDisabled" [matTooltip]="hasTooltip ? tooltip : null" [matTooltipPosition]="tooltipPosition"
+    [matTooltipDisabled]="!hasTooltip" (mouseenter)="onHover.emit($event)" (mouseleave)="onMouseLeave.emit($event)"
+    [style.display]="'inline-flex'" [style.align-items]="'center'" [style.gap.px]="computeGap()"
+    [matMenuTriggerFor]="menu">
+
+    <!-- Left Icon (optional) -->
+    <ng-container *ngIf="leftIcon?.trim() as leftIconText">
+      <ng-container *ngIf="getSvgIconName(leftIcon) as svgIconName; else leftIconFontDropdown">
+        <mat-icon [svgIcon]="svgIconName" class="left-icon"></mat-icon>
+      </ng-container>
+      <ng-template #leftIconFontDropdown>
+        <mat-icon [fontSet]="getLeftIconFontSet()" class="left-icon">
+          {{ getLeftIconName() }}
+        </mat-icon>
+      </ng-template>
+    </ng-container>
+
+    <!-- Label -->
+    <span *ngIf="!iconOnly" class="button-label">
+      {{ labelText || '' }}
+    </span>
+
+    <!-- Dropdown arrow icon -->
+    <mat-icon class="right-icon">arrow_drop_down</mat-icon>
+  </button>
+</ng-template>
+
+<!-- Mat Menu kept outside conditional to avoid portal reattachment across toggles -->
+<mat-menu #menu="matMenu" panelClass="custom-dropdown-menu">
+  <button mat-menu-item *ngFor="let opt of dropdownItems" (click)="selectOption(opt)" [ngClass]="effectiveFontClass">
+    {{ opt.label || opt }}
+  </button>
+</mat-menu>
+