@byuhbll/components 7.0.2 → 7.0.4

package/index.d.ts

@@ -183,6 +183,10 @@ declare class ImpersonateModalComponent implements OnDestroy {
         search: _angular_forms.FormControl<string | null>;
     }>;
     protected selectedUsername?: string;
+    protected get searchValue(): string;
+    protected get searchIconAfter(): string | undefined;
+    protected get isIconAfterClickable(): boolean;
+    protected get fieldState(): 'error' | 'default';
     protected loading: boolean;
     protected handleSearchSubject: Subject<boolean>;
     protected results: i0.Signal<ImpersonateSearchResult[] | null | undefined>;
@@ -196,6 +200,7 @@ declare class ImpersonateModalComponent implements OnDestroy {
     protected startImpersonation: (username?: string) => void;
     protected handleSelectUser: (event: Event) => void;
     protected clearSearch: () => void;
+    protected handleIconAfterClick: () => void;
     protected close: () => void;
     protected handleFormSubmit: (event: SubmitEvent) => void;
     protected handleSearchKeyPress: (event: KeyboardEvent) => void;
@@ -1006,6 +1011,7 @@ interface FieldInputs {
  * ```
  */
 declare class FieldComponent implements ControlValueAccessor {
+    private readonly eref;
     inputType: InputType;
     inputId?: string;
     placeholder: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@byuhbll/components",
-  "version": "7.0.2",
+  "version": "7.0.4",
   "peerDependencies": {
     "@angular/common": "^20.3.15",
     "@angular/core": "^20.3.15"

package/styles/scss/_vars.scss

@@ -60,8 +60,8 @@ $primary-blue: #3a6093;
 $primary-green: #207215;
 $success-green: #1dce7b;
 
-$impersonate-purple: #ca7ad1cc;
-$impersonate-purple--hover: #ca7ad1;
+$impersonate-purple: #7040aa;
+$impersonate-purple--hover: #b967c7;
 
 $interactive-blue: #4070b0;
 $interactive-blue--hover: #6892ca;

package/styles/scss/hbll-foundation.scss

@@ -1,10 +1,10 @@
-// ---------------------------------------------------
-// BYU Library Shared Styles
-// ---------------------------------------------------
+/* ---------------------------------------------------
+   BYU Library Shared Styles
+--------------------------------------------------- */
 
-// ---------------------------------------------------
-// Reset / Base
-// ---------------------------------------------------
+/* ---------------------------------------------------
+   Reset / Base
+--------------------------------------------------- */
 
 html {
     border: 0;
@@ -24,16 +24,16 @@ body {
     box-sizing: border-box;
 }
 
-// ---------------------------------------------------
-// Colors (Design Tokens)
-// ---------------------------------------------------
+/* ---------------------------------------------------
+   Colors (Design Tokens)
+--------------------------------------------------- */
 
-// Brand Colors
+/* Brand Colors */
 $color-navy: #00245d;
 $color-royal: #0047ba;
 $color-white: #ffffff;
 
-// Blues / Royal (Primary)
+/* Blues / Royal (Primary) */
 $color-blue-500: #00245d;
 $color-blue-400: #003995;
 $color-blue-300: #0047ba;
@@ -41,7 +41,7 @@ $color-blue-200: #336cc8;
 $color-blue-150: #ccdaf1;
 $color-blue-100: #e5edf8;
 
-// Grays / Neutral
+/* Grays / Neutral */
 $color-gray-500: #141414;
 $color-gray-400: #676767;
 $color-gray-300: #8f8f8f;
@@ -49,40 +49,40 @@ $color-gray-200: #d0d0d0;
 $color-gray-100: #e7e7e7;
 $color-gray-50: #f9f9f9;
 
-// Greens / Success
+/* Greens / Success */
 $color-green-500: #1d562e;
 $color-green-400: #2e8545;
 $color-green-300: #3ba35a;
 $color-green-200: #9dd1ac;
 $color-green-100: #ebf6ee;
 
-// Teals / Info
+/* Teals / Info */
 $color-teal-500: #26485f;
 $color-teal-400: #3e7295;
 $color-teal-300: #457fa6;
 $color-teal-200: #a2bfd3;
 $color-teal-100: #ecf2f6;
 
-// Reds / Error
+/* Reds / Error */
 $color-red-500: #702121;
 $color-red-400: #b33837;
 $color-red-300: #c73e3d;
 $color-red-200: #e39e9e;
 $color-red-100: #f9ecec;
 
-// Yellows / Warning (Mustard)
+/* Yellows / Warning (Mustard) */
 $color-yellow-500: #635f04;
 $color-yellow-400: #928c30;
 $color-yellow-300: #d1c844;
 $color-yellow-200: #e8e3a1;
 $color-yellow-100: #f2f0e9;
 
-// Purple / Focus
+/* Purple / Focus */
 $color-purple-focus: #b967c7;
 
-// ---------------------------------------------------
-// Semantic Tokens (preferred usage across apps)
-// ---------------------------------------------------
+/* ---------------------------------------------------
+   Semantic Tokens (preferred usage across apps)
+--------------------------------------------------- */
 
 $text-heading: #002e5d;
 $text-secondary-heading: #737373;
@@ -93,7 +93,7 @@ $text-on-action: $color-white;
 
 $focus-ring-color: $color-purple-focus;
 
-// State semantics (useful for alerts, badges, etc.)
+/* State semantics (useful for alerts, badges, etc.) */
 $text-success: $color-green-500;
 $text-info: $color-teal-500;
 $text-error: $color-red-500;
@@ -104,9 +104,9 @@ $surface-info: $color-teal-100;
 $surface-error: $color-red-100;
 $surface-warning: $color-yellow-100;
 
-// ---------------------------------------------------
-// Expose CSS Custom Properties (so non-Sass apps can consume)
-// ---------------------------------------------------
+/* ---------------------------------------------------
+   Expose CSS Custom Properties (so non-Sass apps can consume)
+--------------------------------------------------- */
 
 :root {
     /* Brand */
@@ -184,9 +184,9 @@ $surface-warning: $color-yellow-100;
     --focus-ring-color: #{$focus-ring-color};
 }
 
-// ---------------------------------------------------
-// Fonts
-// ---------------------------------------------------
+/* ---------------------------------------------------
+    Fonts
+--------------------------------------------------- */
 
 $sourceSansProVersion: '1.0.0';
 
@@ -262,11 +262,11 @@ $sourceSansProVersion: '1.0.0';
     font-display: swap;
 }
 
-// ---------------------------------------------------
-// Default Styles for Elements
-// ---------------------------------------------------
+/* ---------------------------------------------------
+   Default Styles for Elements
+--------------------------------------------------- */
 
-// Default font-family
+/* Default font-family */
 h1,
 h2,
 h3,
@@ -279,7 +279,7 @@ p {
     font-family: 'Source Sans Pro';
 }
 
-// Headers
+/* Headers */
 h1 {
     font-weight: 300;
     font-style: normal;
@@ -316,7 +316,7 @@ h6 {
     color: var(--text-secondary-heading);
 }
 
-// Paragraph classes
+/* Paragraph classes */
 .hbll-default-body {
     font-weight: 400;
     font-style: normal;
@@ -347,22 +347,22 @@ h6 {
     color: var(--text-body);
 }
 
-// Default link style
+/* Default link style */
 a {
     color: var(--text-link);
     text-decoration: underline;
 }
 
-// Span emphasis class
+/* Span emphasis class */
 .hbll-emphasis {
     font-weight: 600;
 }
 
-// ---------------------------------------------------
-// Breakpoint size changes (mobile-first)
-// ---------------------------------------------------
+/* ---------------------------------------------------
+   Breakpoint size changes (mobile-first)
+--------------------------------------------------- */
 
-// Mobile default sizes (applies to all widths unless overridden)
+/* Mobile default sizes (applies to all widths unless overridden) */
 h1 {
     font-size: 2rem;
     line-height: 2.5rem;
@@ -400,7 +400,7 @@ h6 {
     line-height: 1.5rem;
 }
 
-// Tablet size styles (>834px)
+/* Tablet size styles (>834px) */
 @media screen and (min-width: 52.125em) {
     h1 {
         font-size: 3rem;
@@ -448,7 +448,7 @@ h6 {
     }
 }
 
-// Desktop size styles (>1440px)
+/* Desktop size styles (>1440px) */
 @media screen and (min-width: 90em) {
     h1 {
         font-size: 3.75rem;
@@ -496,9 +496,15 @@ h6 {
     }
 }
 
-// ---------------------------------------------------
-// Accessibility
-// ---------------------------------------------------
+/* ---------------------------------------------------
+   Accessibility
+--------------------------------------------------- */
+
+/* Default focus style */
+:focus-visible {
+    outline: 0.125rem solid var(--focus-ring-color);
+    outline-offset: 0.125rem;
+}
 
 .sr-only {
     position: absolute;