@byuhbll/components 7.0.1 → 7.0.3

package/index.d.ts

@@ -943,7 +943,8 @@ interface FieldInputs {
 }
 /**
  * A flexible, reusable field (input) component that supports multiple states
- * and optional icons on left and right.
+ * and optional icons on left and right. Also supports pre-tab and post-tab components
+ * via content projection for enhanced field functionality.
  *
  * @example
  * ```html
@@ -962,6 +963,22 @@ interface FieldInputs {
  *   (iconAfterClick)="togglePasswordVisibility()">
  * </lib-field>
  *
+ * <!-- Field with pre-tab for website -->
+ * <lib-field placeholder="Enter website">
+ *   <lib-pre-tab type="website"></lib-pre-tab>
+ * </lib-field>
+ *
+ * <!-- Field with post-tab for email -->
+ * <lib-field placeholder="Enter email address">
+ *   <lib-post-tab type="email"></lib-post-tab>
+ * </lib-field>
+ *
+ * <!-- Field with both pre-tab and post-tab -->
+ * <lib-field placeholder="Enter phone number">
+ *   <lib-pre-tab type="phone"></lib-pre-tab>
+ *   <lib-post-tab type="phone" [showText]="false"></lib-post-tab>
+ * </lib-field>
+ *
  * <!-- Error state with icon -->
  * <lib-field
  *   placeholder="Email"
@@ -1046,7 +1063,7 @@ declare class FieldComponent implements ControlValueAccessor {
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<FieldComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FieldComponent, "lib-field", never, { "inputType": { "alias": "inputType"; "required": false; }; "inputId": { "alias": "inputId"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "state": { "alias": "state"; "required": false; }; "status": { "alias": "status"; "required": false; }; "iconBefore": { "alias": "iconBefore"; "required": false; }; "iconAfter": { "alias": "iconAfter"; "required": false; }; "iconBeforeClickable": { "alias": "iconBeforeClickable"; "required": false; }; "iconAfterClickable": { "alias": "iconAfterClickable"; "required": false; }; "iconBeforeAction": { "alias": "iconBeforeAction"; "required": false; }; "iconAfterAction": { "alias": "iconAfterAction"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "value": { "alias": "value"; "required": false; }; "isFullText": { "alias": "isFullText"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "minWidth": { "alias": "minWidth"; "required": false; }; "maxWidth": { "alias": "maxWidth"; "required": false; }; "minHeight": { "alias": "minHeight"; "required": false; }; "maxHeight": { "alias": "maxHeight"; "required": false; }; }, { "valueChange": "valueChange"; "iconBeforeClick": "iconBeforeClick"; "iconAfterClick": "iconAfterClick"; "fieldFocus": "fieldFocus"; "fieldBlur": "fieldBlur"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FieldComponent, "lib-field", never, { "inputType": { "alias": "inputType"; "required": false; }; "inputId": { "alias": "inputId"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "state": { "alias": "state"; "required": false; }; "status": { "alias": "status"; "required": false; }; "iconBefore": { "alias": "iconBefore"; "required": false; }; "iconAfter": { "alias": "iconAfter"; "required": false; }; "iconBeforeClickable": { "alias": "iconBeforeClickable"; "required": false; }; "iconAfterClickable": { "alias": "iconAfterClickable"; "required": false; }; "iconBeforeAction": { "alias": "iconBeforeAction"; "required": false; }; "iconAfterAction": { "alias": "iconAfterAction"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "value": { "alias": "value"; "required": false; }; "isFullText": { "alias": "isFullText"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "minWidth": { "alias": "minWidth"; "required": false; }; "maxWidth": { "alias": "maxWidth"; "required": false; }; "minHeight": { "alias": "minHeight"; "required": false; }; "maxHeight": { "alias": "maxHeight"; "required": false; }; }, { "valueChange": "valueChange"; "iconBeforeClick": "iconBeforeClick"; "iconAfterClick": "iconAfterClick"; "fieldFocus": "fieldFocus"; "fieldBlur": "fieldBlur"; }, never, ["lib-pre-tab", "lib-post-tab"], true, never>;
 }
 
 type LabelType = 'none' | 'required' | 'optional';
@@ -1238,6 +1255,157 @@ declare class RadioButtonComponent implements ControlValueAccessor {
     static ngAcceptInputType_disabled: unknown;
 }
 
+type PreTabType = 'website' | 'email' | 'phone' | 'fax' | 'address' | 'social' | 'custom';
+interface PreTabInputs {
+    type?: PreTabType;
+    icon?: string;
+    text?: string;
+    action?: () => void;
+    disabled?: boolean;
+    ariaLabel?: string;
+}
+/**
+ * A prefix tab component that displays an icon and text before an input field.
+ * Provides default presets for common types (website, email, phone) or custom configuration.
+ *
+ * @example
+ * ```html
+ * <!-- Website preset -->
+ * <lib-pre-tab type="website"></lib-pre-tab>
+ *
+ * <!-- Email preset -->
+ * <lib-pre-tab type="email"></lib-pre-tab>
+ *
+ * <!-- Phone preset -->
+ * <lib-pre-tab type="phone"></lib-pre-tab>
+ *
+ * <!-- Fax preset -->
+ * <lib-pre-tab type="fax"></lib-pre-tab>
+ *
+ * <!-- Address preset -->
+ * <lib-pre-tab type="address"></lib-pre-tab>
+ *
+ * <!-- Social media preset -->
+ * <lib-pre-tab type="social"></lib-pre-tab>
+ *
+ * <!-- Custom configuration -->
+ * <lib-pre-tab
+ *   type="custom"
+ *   icon="location_on"
+ *   text="Address">
+ * </lib-pre-tab>
+ *
+ * <!-- Actionable state -->
+ * <lib-pre-tab type="email" [action]="onPreTabAction"></lib-pre-tab>
+ *
+ * <!-- Disabled state -->
+ * <lib-pre-tab type="website" [disabled]="true"></lib-pre-tab>
+ * ```
+ */
+declare class PreTabComponent {
+    type: PreTabType;
+    icon?: string;
+    text?: string;
+    action?: () => void;
+    disabled: boolean;
+    ariaLabel?: string;
+    /**
+     * Default preset configurations
+     */
+    private readonly presets;
+    /**
+     * Gets the icon to display based on type or custom input
+     */
+    get displayIcon(): string;
+    /**
+     * Gets the text to display based on type or custom input
+     */
+    get displayText(): string;
+    /**
+     * Gets the computed aria-label for accessibility
+     */
+    get computedAriaLabel(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PreTabComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PreTabComponent, "lib-pre-tab", never, { "type": { "alias": "type"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "text": { "alias": "text"; "required": false; }; "action": { "alias": "action"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+type PostTabType = 'website' | 'email' | 'phone' | 'fax' | 'address' | 'social' | 'custom';
+interface PostTabInputs {
+    type?: PostTabType;
+    icon?: string;
+    text?: string;
+    showText?: boolean;
+    action?: () => void;
+    disabled?: boolean;
+    ariaLabel?: string;
+}
+/**
+ * A suffix tab component that displays an icon (and optionally text) after an input field.
+ * Provides default presets for common types (website, email, phone) or custom configuration.
+ *
+ * @example
+ * ```html
+ * <!-- Website preset (icon only) -->
+ * <lib-post-tab type="website"></lib-post-tab>
+ *
+ * <!-- Email preset (icon only) -->
+ * <lib-post-tab type="email"></lib-post-tab>
+ *
+ * <!-- Phone preset with text -->
+ * <lib-post-tab type="phone" [showText]="true"></lib-post-tab>
+ *
+ * <!-- Fax preset -->
+ * <lib-post-tab type="fax"></lib-post-tab>
+ *
+ * <!-- Address preset -->
+ * <lib-post-tab type="address"></lib-post-tab>
+ *
+ * <!-- Social media preset -->
+ * <lib-post-tab type="social"></lib-post-tab>
+ *
+ * <!-- Custom configuration -->
+ * <lib-post-tab
+ *   type="custom"
+ *   icon="location_on"
+ *   text="Address"
+ *   [showText]="true">
+ * </lib-post-tab>
+ *
+ * <!-- Actionable state -->
+ * <lib-post-tab type="phone" [action]="onPostTabAction"></lib-post-tab>
+ *
+ * <!-- Disabled state -->
+ * <lib-post-tab type="website" [disabled]="true"></lib-post-tab>
+ * ```
+ */
+declare class PostTabComponent {
+    type: PostTabType;
+    icon?: string;
+    text?: string;
+    showText: boolean;
+    action?: () => void;
+    disabled: boolean;
+    ariaLabel?: string;
+    /**
+     * Default preset configurations
+     */
+    private readonly presets;
+    /**
+     * Gets the icon to display based on type or custom input
+     */
+    get displayIcon(): string;
+    /**
+     * Gets the text to display based on type or custom input
+     */
+    get displayText(): string;
+    /**
+     * Gets the computed aria-label for accessibility
+     */
+    get computedAriaLabel(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PostTabComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PostTabComponent, "lib-post-tab", never, { "type": { "alias": "type"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "text": { "alias": "text"; "required": false; }; "showText": { "alias": "showText"; "required": false; }; "action": { "alias": "action"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; }, {}, never, never, true, never>;
+}
+
 type DropdownState = 'default' | 'hover' | 'focused' | 'error' | 'success' | 'disabled';
 interface DropdownOption {
     value: string;
@@ -1310,12 +1478,14 @@ declare class DropdownComponent implements ControlValueAccessor, OnInit {
     valueChange: EventEmitter<string>;
     helpIconClick: EventEmitter<void>;
     dropdownInput?: FieldComponent;
+    dropdownMenuItems?: ElementRef;
     value: string;
     searchText: string;
     isOpen: boolean;
     selectedIndex: number;
     filteredOptions: DropdownOption[];
     private elementRef;
+    private cdr;
     private onChange;
     private onTouched;
     ngOnInit(): void;
@@ -1335,6 +1505,10 @@ declare class DropdownComponent implements ControlValueAccessor, OnInit {
      * Filters options based on search text
      */
     filterOptions(): void;
+    /**
+     * Scrolls the highlighted item into view
+     */
+    private scrollHighlightedIntoView;
     /**
      * Selects an option from the dropdown
      */
@@ -1363,5 +1537,5 @@ declare class DropdownComponent implements ControlValueAccessor, OnInit {
     static ɵcmp: i0.ɵɵComponentDeclaration<DropdownComponent, "lib-dropdown", never, { "label": { "alias": "label"; "required": false; }; "inputId": { "alias": "inputId"; "required": false; }; "labelType": { "alias": "labelType"; "required": false; }; "showHelpIcon": { "alias": "showHelpIcon"; "required": false; }; "subtext": { "alias": "subtext"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "options": { "alias": "options"; "required": false; }; "state": { "alias": "state"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "searchable": { "alias": "searchable"; "required": false; }; }, { "valueChange": "valueChange"; "helpIconClick": "helpIconClick"; }, never, never, true, never>;
 }
 
-export { ADVANCED_SEARCH_FIELD_MAP, ADVANCED_SEARCH_OPTIONS, ADVANCED_SEARCH_QUALIFIER_MAP, ButtonComponent, ButtonGroupComponent, ButtonGroupItemComponent, CheckboxComponent, DropdownComponent, FieldComponent, HbllFooterComponent, HbllHeaderComponent, HbllItemTypeIconPipe, HeaderWithImpersonationComponent, ImpersonateModalComponent, ImpersonateUserPipe, ImpersonationBannerComponent, LIBRARY_HOURS_API_URL, LabelComponent, LinkComponent, RadioButtonComponent, SnackbarComponent, SnackbarService, SsSearchBarComponent, StatusButtonComponent, TabBarComponent, TabItemComponent, defaultOidcBaseUri, defaultOidcDefaultIdp, getUserStatusFromRoles, isAdvancedSearchExternalFieldOption, isAdvancedSearchFieldOption, isAdvancedSearchLocalFieldOption, isSearchScope };
-export type { AdvancedSearchBooleanOption, AdvancedSearchExternalFieldOption, AdvancedSearchFieldOption, AdvancedSearchLanguageOption, AdvancedSearchLocalFieldOption, AdvancedSearchQualifier, AdvancedSearchQualifierOption, AdvancedSearchQueryRow, AdvancedSearchResultsPerPageOption, ButtonInputs, ButtonType, CheckboxInputs, DropdownInputs, DropdownOption, DropdownState, FieldInputs, FieldState, FieldStatus, ImpersonateSearchResult, InputType, LabelInputs, LabelPosition, LabelType, LinkIconPosition, LinkInputs, LinkState, LinkType, RadioButtonChange, SearchConfig, SearchScope, SnackbarInputs, SnackbarPurpose, Status, StatusButtonInputs };
+export { ADVANCED_SEARCH_FIELD_MAP, ADVANCED_SEARCH_OPTIONS, ADVANCED_SEARCH_QUALIFIER_MAP, ButtonComponent, ButtonGroupComponent, ButtonGroupItemComponent, CheckboxComponent, DropdownComponent, FieldComponent, HbllFooterComponent, HbllHeaderComponent, HbllItemTypeIconPipe, HeaderWithImpersonationComponent, ImpersonateModalComponent, ImpersonateUserPipe, ImpersonationBannerComponent, LIBRARY_HOURS_API_URL, LabelComponent, LinkComponent, PostTabComponent, PreTabComponent, RadioButtonComponent, SnackbarComponent, SnackbarService, SsSearchBarComponent, StatusButtonComponent, TabBarComponent, TabItemComponent, defaultOidcBaseUri, defaultOidcDefaultIdp, getUserStatusFromRoles, isAdvancedSearchExternalFieldOption, isAdvancedSearchFieldOption, isAdvancedSearchLocalFieldOption, isSearchScope };
+export type { AdvancedSearchBooleanOption, AdvancedSearchExternalFieldOption, AdvancedSearchFieldOption, AdvancedSearchLanguageOption, AdvancedSearchLocalFieldOption, AdvancedSearchQualifier, AdvancedSearchQualifierOption, AdvancedSearchQueryRow, AdvancedSearchResultsPerPageOption, ButtonInputs, ButtonType, CheckboxInputs, DropdownInputs, DropdownOption, DropdownState, FieldInputs, FieldState, FieldStatus, ImpersonateSearchResult, InputType, LabelInputs, LabelPosition, LabelType, LinkIconPosition, LinkInputs, LinkState, LinkType, PostTabInputs, PostTabType, PreTabInputs, PreTabType, RadioButtonChange, SearchConfig, SearchScope, SnackbarInputs, SnackbarPurpose, Status, StatusButtonInputs };

package/package.json

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

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;