@byuhbll/components 7.0.0 → 7.0.2

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.0",
+  "version": "7.0.2",
   "peerDependencies": {
     "@angular/common": "^20.3.15",
     "@angular/core": "^20.3.15"

package/styles/scss/hbll-foundation.scss

@@ -43,7 +43,7 @@ $color-blue-100: #e5edf8;
 
 // Grays / Neutral
 $color-gray-500: #141414;
-$color-gray-400: #737373;
+$color-gray-400: #676767;
 $color-gray-300: #8f8f8f;
 $color-gray-200: #d0d0d0;
 $color-gray-100: #e7e7e7;