crdx-components 1.0.0

package/src/lib/components/form-field/select-field.ts

@@ -0,0 +1,324 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  computed,
+  DestroyRef,
+  forwardRef,
+  inject,
+  Injector,
+  input,
+  OnInit,
+  output,
+  signal,
+} from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
+import { MatFormFieldAppearance, MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule, MatSelectChange } from '@angular/material/select';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { LibCheckboxComponent } from '../checkbox/checkbox';
+import { ScrollingModule } from '@angular/cdk/scrolling';
+
+export interface LibSelectOption<T = string> {
+  value: T;
+  label: string;
+}
+
+type VirtualRow<T> =
+  | { kind: 'selectAll' }
+  | { kind: 'option'; option: LibSelectOption<T> };
+
+export type LibSelectMode = 'single' | 'multiple';
+
+@Component({
+  selector: 'lib-select-field',
+  standalone: true,
+  imports: [MatFormFieldModule, MatSelectModule, ScrollingModule, MatInputModule, MatIconModule, LibCheckboxComponent],
+  templateUrl: './select-field.html',
+  styleUrl: './select-field.css',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => LibSelectFieldComponent),
+      multi: true,
+    },
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class LibSelectFieldComponent<T = string> implements ControlValueAccessor, OnInit {
+  private static readonly PANEL_CONTENT_HEIGHT = 240;
+  private static readonly FILTER_ROW_HEIGHT = 48;
+  private static readonly OPTION_ROW_HEIGHT = 48;
+
+  private readonly cdr = inject(ChangeDetectorRef);
+  private readonly destroyRef = inject(DestroyRef);
+  private readonly injector = inject(Injector);
+  private ngControl: NgControl | null = null;
+
+  readonly label = input('');
+  readonly appearance = input<'outline' | 'filled'>('outline');
+  readonly placeholder = input('Elegir opción');
+  readonly options = input<LibSelectOption<T>[]>([]);
+  readonly mode = input<LibSelectMode>('single');
+  readonly filterable = input(true, { transform: coerceBooleanProperty });
+  readonly filterPlaceholder = input('Buscar...');
+  readonly disabled = input(false, { transform: coerceBooleanProperty });
+  readonly required = input(false, { transform: coerceBooleanProperty });
+  readonly width = input<string | number | null>(null);
+  readonly selectAllLabel = input('Seleccionar todos');
+  readonly widthStyle = computed(() => {
+    const v = this.width();
+    return v == null || v === '' ? null : typeof v === 'number' ? `${v}px` : String(v);
+  });
+  readonly matAppearance = computed<MatFormFieldAppearance>(() =>
+    this.appearance() === 'filled' ? 'fill' : 'outline'
+  );
+
+  readonly valueChange = output<T | T[]>();
+
+  readonly panelOpen = signal(false);
+  readonly filterTerm = signal('');
+  readonly disabledByControl = signal(false);
+
+  readonly isMultiple = computed(() => this.mode() === 'multiple');
+  readonly virtualViewportMaxHeight = computed(() =>
+    this.filterable()
+      ? LibSelectFieldComponent.PANEL_CONTENT_HEIGHT - LibSelectFieldComponent.FILTER_ROW_HEIGHT
+      : LibSelectFieldComponent.PANEL_CONTENT_HEIGHT
+  );
+
+  readonly filteredOptions = computed(() => {
+    const opts = this.options();
+    const term = this.filterTerm().trim().toLowerCase();
+    if (!term) return opts;
+    return opts.filter(
+      (o) => o.label.toLowerCase().includes(term)
+    );
+  });
+
+  readonly virtualRows = computed<VirtualRow<T>[]>(() => {
+    const rows: VirtualRow<T>[] = this.filteredOptions().map((option) => ({
+      kind: 'option',
+      option,
+    }));
+
+    if (this.isMultiple()) {
+      rows.unshift({ kind: 'selectAll' });
+    }
+
+    return rows;
+  });
+
+  readonly virtualViewportHeight = computed(() => {
+    const rowsCount = this.virtualRows().length;
+    const contentHeight = rowsCount * LibSelectFieldComponent.OPTION_ROW_HEIGHT;
+    const maxHeight = this.virtualViewportMaxHeight();
+    const minHeight = rowsCount > 0 ? LibSelectFieldComponent.OPTION_ROW_HEIGHT : 0;
+
+    return Math.max(minHeight, Math.min(contentHeight, maxHeight));
+  });
+
+  readonly allSelected = computed(() => {
+    if (!this.isMultiple()) {
+      return false;
+    }
+    const opts = this.options();
+    const current = this.value();
+    if (!Array.isArray(current) || !opts.length) {
+      return false;
+    }
+    const values = opts.map((o) => o.value);
+    return values.every((v) => current.includes(v));
+  });
+
+  readonly selectedLabels = computed(() => {
+    const current = this.value();
+    if (!Array.isArray(current) || !current.length) {
+      return [] as string[];
+    }
+    const selectedSet = new Set(current);
+    return this.options()
+      .filter((o) => selectedSet.has(o.value))
+      .map((o) => o.label);
+  });
+
+  readonly multiTriggerLabel = computed(() => {
+    const labels = this.selectedLabels();
+    if (!labels.length) {
+      return '';
+    }
+    if (labels.length === 1) {
+      return labels[0];
+    }
+    return `${labels[0]} (+${labels.length - 1} items)`;
+  });
+
+  readonly selectAllIndeterminate = computed(() => {
+    if (!this.isMultiple()) {
+      return false;
+    }
+    const opts = this.options();
+    const current = this.value();
+    if (!Array.isArray(current) || !opts.length) {
+      return false;
+    }
+    const selectedCount = opts.filter((o) => current.includes(o.value)).length;
+    return selectedCount > 0 && selectedCount < opts.length;
+  });
+
+  private readonly value = signal<T | T[] | null>(null);
+  private onChange: (v: T | T[] | null) => void = () => {
+    /* assigned by registerOnChange */
+  };
+  private onTouched: () => void = () => {
+    /* assigned by registerOnTouched */
+  };
+
+  ngOnInit(): void {
+    this.ngControl = this.injector.get(NgControl, null);
+    if (this.ngControl) {
+      this.ngControl.valueAccessor = this;
+    }
+    if (this.ngControl?.valueChanges) {
+      this.ngControl.valueChanges
+        .pipe(takeUntilDestroyed(this.destroyRef))
+        .subscribe(() => this.cdr.markForCheck());
+    }
+  }
+
+  onPanelOpenChange(open: boolean): void {
+    this.panelOpen.set(open);
+    if (!open) this.filterTerm.set('');
+    this.cdr.markForCheck();
+  }
+
+  onFilterInput(event: Event): void {
+    const el = event.target as HTMLInputElement;
+    this.filterTerm.set(el?.value ?? '');
+  }
+
+  onFilterKeydown(event: KeyboardEvent): void {
+    event.stopPropagation();
+  }
+
+  onSelectionChange(change: MatSelectChange): void {
+    if (this.isMultiple()) {
+      const incoming = Array.isArray(change.value) ? (change.value as T[]) : [];
+      const options = this.options().map((o) => o.value);
+      const optionSet = new Set(options);
+      const hasUnknownValues = incoming.some((v) => !optionSet.has(v));
+
+      // Ignore synthetic values emitted by the auxiliary "select all" option.
+      if (hasUnknownValues) {
+        this.cdr.markForCheck();
+        return;
+      }
+
+      const incomingSet = new Set(incoming);
+      const normalized = options.filter((v) => incomingSet.has(v)) as T[];
+      this.value.set(normalized);
+      this.onChange(normalized);
+      this.valueChange.emit(normalized);
+      this.cdr.markForCheck();
+      return;
+    }
+
+    this.value.set(change.value);
+    this.onChange(change.value);
+    this.valueChange.emit(change.value);
+    this.cdr.markForCheck();
+  }
+
+  onToggleSelectAll(checked: boolean): void {
+    if (!this.isMultiple()) {
+      return;
+    }
+    const options = this.options();
+    const currentValue = this.value();
+    const current = Array.isArray(currentValue) ? [...currentValue] : [];
+    if (checked) {
+      const toAdd = options.map((o) => o.value);
+      const set = new Set(current);
+      for (const v of toAdd) {
+        set.add(v);
+      }
+      this.value.set(Array.from(set) as T[]);
+    } else {
+      const toRemove = new Set(options.map((o) => o.value));
+      this.value.set(current.filter((v) => !toRemove.has(v as T)) as T[]);
+    }
+    const updated = this.value();
+    this.onChange(updated);
+    this.valueChange.emit(updated as T | T[]);
+    this.cdr.markForCheck();
+  }
+
+  onSelectAllCheckedChange(checked: boolean): void {
+    this.onToggleSelectAll(checked);
+  }
+
+  onOptionCheckedChange(value: T, checked: boolean): void {
+    if (!this.isMultiple()) {
+      return;
+    }
+    const currentValue = this.value();
+    const current = Array.isArray(currentValue) ? [...currentValue] : [];
+    const set = new Set(current);
+    if (checked) {
+      set.add(value);
+    } else {
+      set.delete(value);
+    }
+    this.value.set(Array.from(set) as T[]);
+    const updated = this.value();
+    this.onChange(updated);
+    this.valueChange.emit(updated as T | T[]);
+    this.cdr.markForCheck();
+  }
+
+  writeValue(value: T | T[] | null): void {
+    this.value.set(value);
+    this.cdr.markForCheck();
+  }
+
+  registerOnChange(fn: (v: T | T[] | null) => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.disabledByControl.set(isDisabled);
+    this.cdr.markForCheck();
+  }
+
+  get displayValue(): T | T[] | null {
+    return this.value();
+  }
+
+  toggledAllSelection(){
+    if (this.allSelected()) {
+      this.onToggleSelectAll(false);
+      return;
+    }
+    this.onToggleSelectAll(true);
+  }
+
+
+  isSelected(value: T): boolean {
+    const current = this.value();
+    if (!Array.isArray(current)) {
+      return false;
+    }
+    return current.includes(value);
+  }
+
+  trackByVirtualRow(_index: number, row: VirtualRow<T>): string {
+    return row.kind === 'selectAll' ? '__select-all__' : String(row.option.value);
+  }
+}

package/src/lib/components/form-field/text-field.css

@@ -0,0 +1,41 @@
+:host {
+	display: block;
+}
+
+.lib-text-field__field {
+	width: 100%;
+}
+
+.lib-text-field__prefix-image {
+	width: 24px;
+	height: 24px;
+	font-size: 24px;
+	overflow: visible;
+}
+
+.lib-text-field__prefix-image svg {
+	width: 24px;
+	height: 24px;
+}
+
+:host[data-state='error'] ::ng-deep .mat-mdc-form-field,
+:host[data-state='error-hover'] ::ng-deep .mat-mdc-form-field,
+:host[data-state='error-focus'] ::ng-deep .mat-mdc-form-field {
+	--mdc-outlined-text-field-outline-color: var(--text-fields-outlined-error-outline-outlined-text-field-error-outline-color, #ba1a1a);
+	--mdc-outlined-text-field-hover-outline-color: var(--text-fields-outlined-error-hover-outlined-text-field-error-hover-outline-color, #ba1a1a);
+	--mdc-outlined-text-field-focus-outline-color: var(--text-fields-outlined-error-focus-outlined-text-field-error-focus-outline-color, #ba1a1a);
+	--mdc-outlined-text-field-label-text-color: var(--text-fields-outlined-error-outline-outlined-text-field-error-outline-color, #ba1a1a);
+	--mdc-filled-text-field-active-indicator-color: var(--text-fields-outlined-error-outline-outlined-text-field-error-outline-color, #ba1a1a);
+	--mdc-filled-text-field-focus-active-indicator-color: var(--text-fields-outlined-error-focus-outlined-text-field-error-focus-outline-color, #ba1a1a);
+	--mdc-filled-text-field-label-text-color: var(--text-fields-outlined-error-outline-outlined-text-field-error-outline-color, #ba1a1a);
+}
+
+.lib-text-field__field textarea.mat-mdc-input-element {
+	resize: none;
+}
+
+/* Hide browser-provided password reveal/clear controls to avoid duplicate icons. */
+:host ::ng-deep input[type='password']::-ms-reveal,
+:host ::ng-deep input[type='password']::-ms-clear {
+	display: none;
+}

package/src/lib/components/form-field/text-field.html

@@ -0,0 +1,38 @@
+<mat-form-field [appearance]="resolvedAppearance()" [style.width]="widthStyle() ?? null" [hideRequiredMarker]="hideRequiredMarker()">
+  @if(prefixIconSrc()){
+    <mat-icon
+      matPrefix
+      class="lib-text-field__prefix-image"
+      [svgIcon]="prefixIconSrc()"
+      (click)="pressSuffixEvent()"
+    >
+      {{ prefixIconSrc() }}
+    </mat-icon>
+  } @else if(resolvedPrefixIcon()){
+    <mat-icon matPrefix>
+      {{ resolvedPrefixIcon() }}
+    </mat-icon>
+  }
+
+  <mat-label>{{ label() }}</mat-label>
+  <input matInput [type]="type()" [formControl]="control()" [placeholder]="placeholder()" [attr.autocomplete]="autocomplete()" />
+
+  @if(shouldShowError() && error()) {
+    <mat-error>{{ error() }}</mat-error>
+  }
+
+  @if(hint()) {
+    <mat-hint>{{ hint() }}</mat-hint>
+  }
+
+  @if(shouldShowSuffix()) {
+    <mat-icon
+      matSuffix
+      class="lib-text-field__icon lib-text-field__icon--suffix"
+      [svgIcon]="suffixIcon()"
+      (click)="pressSuffixEvent()"
+    >
+      {{ suffixTextIcon() }}
+    </mat-icon>
+  }
+</mat-form-field>

package/src/lib/components/form-field/text-field.ts

@@ -0,0 +1,102 @@
+import { ChangeDetectionStrategy, Component, computed, effect, input, output } from '@angular/core';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { MatFormFieldAppearance, MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatIconModule } from '@angular/material/icon';
+
+type LibTextFieldAppearance = MatFormFieldAppearance | 'outlined' | 'filled';
+
+@Component({
+  selector: 'lib-text-field',
+  standalone: true,
+  imports: [MatFormFieldModule, MatInputModule, ReactiveFormsModule, MatIconModule],
+  templateUrl: './text-field.html',
+  styleUrl: './text-field.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class LibTextFieldComponent {
+  private disabledAppliedByInput = false;
+
+  readonly label = input.required<string>();
+  readonly control = input.required<FormControl>();
+  readonly appearance = input<LibTextFieldAppearance>('outline');
+  /**
+   * @deprecated Use `appearance`. Kept for compatibility.
+   */
+  readonly apperance = input<LibTextFieldAppearance | null>(null);
+  readonly suffixIcon = input<string>('');
+  readonly suffixTextIcon = input<string>('');
+  readonly prefixIcon = input<string>('');
+  readonly prefixIconSrc = input<string>('');
+  /**
+   * @deprecated Use `prefixIcon`. Kept for compatibility.
+   */
+  readonly preffixIcon = input<string | null>(null);
+  readonly error = input<string | null>(null);
+  readonly errorState = input<boolean | null>(null);
+  readonly hint = input<string>('');
+  readonly suffixEvent = output<void>();
+  readonly showSuffix = input(false, { transform: coerceBooleanProperty });
+  readonly suffixIconBand = input(false, { transform: coerceBooleanProperty });
+  readonly placeholder = input<string>('');
+  readonly autocomplete = input<string>('off');
+  readonly fullWidth = input(false, { transform: coerceBooleanProperty });
+  readonly width = input<string | null, string | number | null>(null, {
+    transform: (value) => {
+      if (value == null || value === '') {
+        return null;
+      }
+      return typeof value === 'number' ? `${value}px` : String(value);
+    },
+  });
+  readonly disabled = input(false, { transform: coerceBooleanProperty });
+  readonly type = input<string>('text');
+  readonly hideRequiredMarker = input(false, { transform: coerceBooleanProperty });
+
+  readonly resolvedAppearance = computed<MatFormFieldAppearance>(() => {
+    const raw = this.apperance() ?? this.appearance();
+    if (raw === 'outlined') return 'outline';
+    if (raw === 'filled') return 'fill';
+    return raw;
+  });
+  readonly resolvedPrefixIcon = computed(() => this.preffixIcon() ?? this.prefixIcon());
+  readonly widthStyle = computed(() => (this.fullWidth() ? '100%' : this.width()));
+  readonly shouldShowSuffix = computed(
+    () => this.showSuffix() || (this.suffixIconBand() && (!!this.suffixIcon() || !!this.suffixTextIcon()))
+  );
+  readonly shouldShowError = computed(() => {
+    const forcedError = this.errorState();
+    if (forcedError !== null) {
+      return forcedError;
+    }
+
+    const control = this.control();
+    return control.invalid && (control.dirty || control.touched);
+  });
+
+  constructor() {
+    effect(() => {
+      const control = this.control();
+      const shouldDisable = this.disabled();
+
+      if (shouldDisable) {
+        if (control.enabled) {
+          control.disable({ emitEvent: false });
+        }
+        this.disabledAppliedByInput = true;
+        return;
+      }
+
+      if (this.disabledAppliedByInput && control.disabled) {
+        control.enable({ emitEvent: false });
+      }
+
+      this.disabledAppliedByInput = false;
+    });
+  }
+
+  pressSuffixEvent(): void {
+    this.suffixEvent.emit();
+  }
+}

package/src/lib/components/header/header.css

@@ -0,0 +1,142 @@
+:host {
+  display: block;
+  width: 100%;
+  --bars-common-app-bar-brand-width: 47;
+  --bars-common-app-bar-brand-height: 25;
+}
+
+.app-bar {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  width: 100%;
+  flex-shrink: 0;
+  align-self: stretch;
+  height: calc(var(--bars-size-small-app-bar-small-container-height, 64) * 1px);
+  padding: 0.5rem calc(var(--bars-common-app-bar-right-padding, 4) * 1px) 0.5rem calc(var(--bars-common-app-bar-left-padding, 4) * 1px);
+  background-color: var(--bars-common-app-bar-container-color, #ebeef0);
+  border-radius: calc(var(--bars-common-app-bar-container-shape, 0) * 1px);
+  box-sizing: border-box;
+  column-gap: calc(var(--bars-common-app-bar-icon-spacing, 0) * 1px);
+}
+
+.app-bar__leading,
+.app-bar__actions {
+  display: flex;
+  align-items: center;
+}
+
+.app-bar__leading {
+  justify-self: start;
+  width: calc(var(--bars-common-app-bar-icon-touch-target-size, 48) * 1px);
+}
+
+.app-bar__actions {
+  justify-self: end;
+  justify-content: flex-end;
+  gap: calc(var(--bars-common-app-bar-icon-spacing, 0) * 1px);
+  min-width: calc(var(--bars-common-app-bar-icon-touch-target-size, 48) * 1px);
+}
+
+.app-bar__actions:empty {
+  min-width: 0;
+}
+
+.app-bar__brand {
+  justify-self: center;
+  position: relative;
+  width: calc(var(--bars-common-app-bar-brand-width, 47) * 1px);
+  height: calc(var(--bars-common-app-bar-brand-height, 25) * 1px);
+  aspect-ratio: 47 / 25;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  color: var(--bars-common-app-bar-central-icon, #e42313);
+}
+
+.app-bar__brand-icon {
+  width: 100%;
+  height: 100%;
+  aspect-ratio: 47 / 25;
+  display: block;
+  object-fit: contain;
+}
+
+.app-bar__brand-icon use {
+  width: 100% !important;
+  height: 100% !important;
+}
+
+.app-bar__brand-dot {
+  position: absolute;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+}
+
+.app-bar__brand-dot--primary {
+  top: 6px;
+  left: 6px;
+}
+
+.app-bar__brand-dot--secondary {
+  top: 3px;
+  left: 16px;
+}
+
+.app-bar__brand-dot--tertiary {
+  top: 8px;
+  left: 26px;
+}
+
+.app-bar__brand-curve {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 32px;
+  height: 18px;
+  border-bottom: 4px solid var(--bars-common-app-bar-central-icon, #e42313);
+  border-right: 4px solid var(--bars-common-app-bar-central-icon, #e42313);
+  border-left: 0;
+  border-top: 0;
+  border-radius: 0 0 24px 24px;
+}
+
+.app-bar__icon-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  flex: 0 0 auto;
+  border: 0;
+  border-radius: calc(var(--icon-buttons-size-small-icon-button-small-container-shape-round, 1000) * 1px);
+  background: transparent;
+  color: var(--bars-common-app-bar-leading-icon, #181c1e);
+  cursor: pointer;
+  transition: background-color 150ms ease, color 150ms ease;
+}
+
+.app-bar__icon-button--trailing {
+  color: var(--bars-common-app-bar-trailing-icon, #434749);
+}
+
+.app-bar__icon-button:hover,
+.app-bar__icon-button:focus-visible {
+  background-color: rgba(0, 0, 0, 0.08);
+}
+
+.app-bar__icon-button:focus-visible {
+  outline: 2px solid rgba(0, 0, 0, 0.24);
+  outline-offset: 2px;
+}
+
+.app-bar__icon {
+  font-size: calc(var(--bars-common-app-bar-icon-size, 24) * 1px);
+  width: 1em;
+  height: 1em;
+  line-height: 1;
+  display: block;
+  object-fit: contain;
+}

package/src/lib/components/header/header.html

@@ -0,0 +1,36 @@
+<header class="app-bar" role="banner">
+  <div class="app-bar__leading">
+    @if(showLeading()) {
+    <button type="button" class="app-bar__icon-button app-bar__icon-button--leading" (click)="onLeadingClick()"
+      [attr.aria-label]="leadingActionLabel()">
+      @if (leadingIconUrl(); as leadingIconSrc) {
+      <img class="app-bar__icon" [src]="leadingIconSrc" alt="" aria-hidden="true" />
+      }
+    </button>
+    }
+  </div>
+  <div class="app-bar__brand" role="img" [attr.aria-label]="brandLabel()">
+    <svg xmlns="http://www.w3.org/2000/svg" width="47" height="25" viewBox="0 0 47 25" fill="none">
+      <path
+        d="M34.0017 2.67521e-05C30.6579 -0.00672338 27.4427 1.26417 25.0377 3.54336C22.6327 5.82255 21.2268 8.93092 21.1179 12.2097C21.1179 12.3304 21.0564 12.5274 21.0564 12.6959C21.0564 14.8068 20.2017 16.8311 18.6803 18.3237C17.1589 19.8163 15.0955 20.6548 12.9439 20.6548C10.7923 20.6548 8.72889 19.8163 7.2075 18.3237C5.68612 16.8311 4.83141 14.8068 4.83141 12.6959C4.83073 12.0678 4.57609 11.4656 4.12335 11.0214C3.67061 10.5773 3.05676 10.3274 2.4165 10.3268C2.09598 10.3218 1.77774 10.3805 1.48091 10.4992C1.18407 10.6179 0.914746 10.7943 0.689116 11.0177C0.463486 11.2411 0.286201 11.5069 0.167908 11.7992C0.0496149 12.0915 -0.00724651 12.4042 0.000738184 12.7186C0.114789 15.972 1.49612 19.0588 3.86027 21.3431C6.22441 23.6274 9.39139 24.9353 12.709 24.9977C16.0266 25.06 19.2423 23.8719 21.6939 21.678C24.1454 19.4842 25.6462 16.4516 25.8871 13.2048C25.9417 13.0487 25.9626 12.8831 25.9486 12.7186C25.9486 10.6078 26.8033 8.58341 28.3247 7.09083C29.8461 5.59826 31.9095 4.75974 34.0611 4.75974C36.2127 4.75974 38.2761 5.59826 39.7975 7.09083C41.3189 8.58341 42.1736 10.6078 42.1736 12.7186C42.1562 13.0399 42.2056 13.3613 42.3189 13.6632C42.4322 13.9651 42.607 14.2412 42.8327 14.4747C43.0583 14.7082 43.3301 14.8941 43.6313 15.0212C43.9326 15.1482 44.2571 15.2138 44.5851 15.2138C44.913 15.2138 45.2375 15.1482 45.5388 15.0212C45.8401 14.8941 46.1119 14.7082 46.3375 14.4747C46.5632 14.2412 46.738 13.9651 46.8513 13.6632C46.9646 13.3613 47.014 13.0399 46.9966 12.7186C46.99 9.34216 45.6178 6.10632 43.1814 3.72165C40.7449 1.33699 37.4433 -0.00153433 34.0017 2.67521e-05Z"
+        fill="#E42313" />
+      <path
+        d="M10.5943 6.75042C10.5937 7.32697 10.4188 7.89037 10.0918 8.36943C9.76482 8.84848 9.30041 9.22168 8.75728 9.44185C8.21414 9.66203 7.61667 9.71929 7.04037 9.60641C6.46407 9.49352 5.93482 9.21556 5.51951 8.80765C5.1042 8.39974 4.82148 7.88019 4.70708 7.31468C4.59268 6.74917 4.65174 6.16307 4.87678 5.63048C5.10183 5.09789 5.48277 4.64271 5.97145 4.32247C6.46013 4.00222 7.03461 3.8313 7.62228 3.8313C8.40773 3.84195 9.15792 4.15302 9.71305 4.69826C10.2682 5.24351 10.5844 5.97984 10.5943 6.75042Z"
+        fill="#E42313" />
+      <path
+        d="M19.3841 6.75044C19.3841 7.52375 19.0709 8.26539 18.5136 8.8122C17.9562 9.35901 17.2003 9.66621 16.412 9.66621C15.6238 9.66621 14.8678 9.35901 14.3104 8.8122C13.7531 8.26539 13.44 7.52375 13.44 6.75044C13.4347 6.36594 13.5079 5.9843 13.6554 5.62802C13.8028 5.27174 14.0215 4.94802 14.2985 4.67596C14.5755 4.4039 14.9052 4.18901 15.2682 4.04394C15.6312 3.89888 16.0201 3.82658 16.412 3.83132C17.1975 3.84196 17.9476 4.15303 18.5028 4.69828C19.0579 5.24352 19.3741 5.97985 19.3841 6.75044Z"
+        fill="#E42313" />
+    </svg>
+  </div>
+
+  <div class="app-bar__actions">
+    @for (action of trailingActions(); track trackByAction($index, action)) {
+    <button type="button" class="app-bar__icon-button app-bar__icon-button--trailing" (click)="onActionClick(action)"
+      [attr.aria-label]="action.ariaLabel">
+      @if (actionIconUrl(action); as actionIconSrc) {
+      <img class="app-bar__icon" [src]="actionIconSrc" alt="" aria-hidden="true" />
+      }
+    </button>
+    }
+  </div>
+</header>