@brickclay-org/ui 0.0.36 → 0.0.37

package/index.d.ts

@@ -704,6 +704,7 @@ type BkInputType = 'text' | 'email' | 'password' | 'number' | 'url' | 'tel';
 type BkInputAutoComplete = 'on' | 'off' | 'name' | 'honorific-prefix' | 'given-name' | 'additional-name' | 'family-name' | 'honorific-suffix' | 'nickname' | 'email' | 'username' | 'new-password' | 'current-password' | 'organization-title' | 'organization' | 'street-address' | 'address-line1' | 'address-line2' | 'address-line3' | 'address-level4' | 'address-level3' | 'address-level2' | 'address-level1' | 'country' | 'country-name' | 'postal-code' | 'cc-name' | 'cc-given-name' | 'cc-additional-name' | 'cc-family-name' | 'cc-number' | 'cc-exp' | 'cc-exp-month' | 'cc-exp-year' | 'cc-csc' | 'cc-type' | 'transaction-currency' | 'transaction-amount' | 'language' | 'bday' | 'bday-day' | 'bday-month' | 'bday-year' | 'sex' | 'tel' | 'tel-country-code' | 'tel-national' | 'tel-area-code' | 'tel-local' | 'tel-extension' | 'impp' | 'url' | 'photo';
 type BkInputAutoCapitalize = 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters';
 type BkInputMode = 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
+type IconOrientation = 'left' | 'right';
 interface CountryOption {
     code: string;
     name: string;
@@ -723,22 +724,23 @@ declare class BkInput implements OnInit, OnDestroy, ControlValueAccessor {
     type: BkInputType;
     value: string;
     hasError: boolean;
+    showErrorIcon: boolean;
     errorMessage: string;
     disabled: boolean;
     tabIndex: number | null;
     readOnly: boolean;
     autoCapitalize: BkInputAutoComplete | null;
     inputMode: BkInputMode | null;
-    icon: boolean;
     iconSrc?: string;
     iconAlt: string;
+    showIcon: boolean;
     phone: boolean;
     countryCode: string;
     countryOptions: CountryOption[];
     selectedCountry: CountryOption;
-    searchLeft: boolean;
-    searchRight: boolean;
+    iconOrientation: IconOrientation;
     password: boolean;
+    showPassword: boolean;
     pattern?: string | null;
     max: number | null;
     min: number | null;
@@ -751,11 +753,11 @@ declare class BkInput implements OnInit, OnDestroy, ControlValueAccessor {
     isFocused: boolean;
     inputValue: string;
     isDropdownOpen: boolean;
-    showPassword: boolean;
     input: EventEmitter<Event>;
     change: EventEmitter<Event>;
     focus: EventEmitter<Event>;
     blur: EventEmitter<Event>;
+    clicked: EventEmitter<boolean>;
     get placeHolderText(): string;
     get maskValue(): string;
     get maskPrefixValue(): string;
@@ -772,15 +774,17 @@ declare class BkInput implements OnInit, OnDestroy, ControlValueAccessor {
     handleFocus(event: Event): void;
     handleBlur(event: Event): void;
     handleInput(event: Event): void;
+    handleClicked(): void;
     handleChange(event: Event): void;
     toggleDropdown(event?: Event): void;
     selectCountry(country: CountryOption): void;
     togglePasswordVisibility(event: Event): void;
+    handleIconClick(event: Event): void;
     get isFilled(): boolean;
     get inputState(): 'default' | 'focused' | 'filled' | 'error' | 'disabled';
     get currentInputType(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<BkInput, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<BkInput, "bk-input", never, { "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "mask": { "alias": "mask"; "required": false; }; "autoComplete": { "alias": "autoComplete"; "required": false; }; "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "required": { "alias": "required"; "required": false; }; "type": { "alias": "type"; "required": false; }; "value": { "alias": "value"; "required": false; }; "hasError": { "alias": "hasError"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "readOnly": { "alias": "readOnly"; "required": false; }; "autoCapitalize": { "alias": "autoCapitalize"; "required": false; }; "inputMode": { "alias": "inputMode"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconSrc": { "alias": "iconSrc"; "required": false; }; "iconAlt": { "alias": "iconAlt"; "required": false; }; "phone": { "alias": "phone"; "required": false; }; "countryCode": { "alias": "countryCode"; "required": false; }; "countryOptions": { "alias": "countryOptions"; "required": false; }; "searchLeft": { "alias": "searchLeft"; "required": false; }; "searchRight": { "alias": "searchRight"; "required": false; }; "password": { "alias": "password"; "required": false; }; "pattern": { "alias": "pattern"; "required": false; }; "max": { "alias": "max"; "required": false; }; "min": { "alias": "min"; "required": false; }; "step": { "alias": "step"; "required": false; }; "maxlength": { "alias": "maxlength"; "required": false; }; "minlength": { "alias": "minlength"; "required": false; }; }, { "input": "input"; "change": "change"; "focus": "focus"; "blur": "blur"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BkInput, "bk-input", never, { "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "mask": { "alias": "mask"; "required": false; }; "autoComplete": { "alias": "autoComplete"; "required": false; }; "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "required": { "alias": "required"; "required": false; }; "type": { "alias": "type"; "required": false; }; "value": { "alias": "value"; "required": false; }; "hasError": { "alias": "hasError"; "required": false; }; "showErrorIcon": { "alias": "showErrorIcon"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "readOnly": { "alias": "readOnly"; "required": false; }; "autoCapitalize": { "alias": "autoCapitalize"; "required": false; }; "inputMode": { "alias": "inputMode"; "required": false; }; "iconSrc": { "alias": "iconSrc"; "required": false; }; "iconAlt": { "alias": "iconAlt"; "required": false; }; "showIcon": { "alias": "showIcon"; "required": false; }; "phone": { "alias": "phone"; "required": false; }; "countryCode": { "alias": "countryCode"; "required": false; }; "countryOptions": { "alias": "countryOptions"; "required": false; }; "iconOrientation": { "alias": "iconOrientation"; "required": false; }; "password": { "alias": "password"; "required": false; }; "showPassword": { "alias": "showPassword"; "required": false; }; "pattern": { "alias": "pattern"; "required": false; }; "max": { "alias": "max"; "required": false; }; "min": { "alias": "min"; "required": false; }; "step": { "alias": "step"; "required": false; }; "maxlength": { "alias": "maxlength"; "required": false; }; "minlength": { "alias": "minlength"; "required": false; }; }, { "input": "input"; "change": "change"; "focus": "focus"; "blur": "blur"; "clicked": "clicked"; }, never, never, true, never>;
 }
 
 declare class BkChips implements ControlValueAccessor, AfterViewInit {
@@ -830,4 +834,4 @@ declare class BkChips implements ControlValueAccessor, AfterViewInit {
 }
 
 export { BkBadge, BkButton, BkButtonGroup, BkCheckbox, BkChips, BkCustomCalendar, BkGrid, BkIconButton, BkInput, BkPill, BkRadioButton, BkScheduledDatePicker, BkSelect, BkSpinner, BkTextarea, BkTimePicker, BkToggle, BrickclayIcons, BrickclayLib, CalendarManagerService, CalendarModule };
-export type { BadgeColor, BadgeSize, BadgeVariant, BkInputAutoCapitalize, BkInputAutoComplete, BkInputMode, BkInputType, BkTextAreaAutoCapitalize, BkTextAreaAutoComplete, BkTextAreaInputMode, ButtonSize, ButtonVariant, CalendarRange, CalendarSelection, CountryOption, GroupItem, GroupMode, IconButtonSize, IconButtonVariant, PillColor, PillSize, PillVariant, ScheduledDateSelection, SortDirection, SpinnerSize, TableAction, TableColumn, TimeConfiguration };
+export type { BadgeColor, BadgeSize, BadgeVariant, BkInputAutoCapitalize, BkInputAutoComplete, BkInputMode, BkInputType, BkTextAreaAutoCapitalize, BkTextAreaAutoComplete, BkTextAreaInputMode, ButtonSize, ButtonVariant, CalendarRange, CalendarSelection, CountryOption, GroupItem, GroupMode, IconButtonSize, IconButtonVariant, IconOrientation, PillColor, PillSize, PillVariant, ScheduledDateSelection, SortDirection, SpinnerSize, TableAction, TableColumn, TimeConfiguration };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brickclay-org/ui",
-  "version": "0.0.36",
+  "version": "0.0.37",
   "peerDependencies": {
     "@angular/common": ">=17.0.0 <=21.0.0",
     "@angular/core": ">=17.0.0 <=21.0.0",

package/src/lib/input/input.css

@@ -64,13 +64,13 @@
   @apply pl-[72px];
 }
 
-/* Search Left - Add padding-left for search icon space */
-.input-field--search-left {
+/* Icon Left - Add padding-left for icon space */
+.input-field--icon-left {
   @apply pl-[48px];
 }
 
-/* Search Right - Add padding-right for search icon space */
-.input-field--search-right {
+/* Icon Right - Add padding-right for icon space */
+.input-field--icon-right {
   @apply pr-[48px];
 }
 
@@ -157,7 +157,7 @@
 
 /* Search Icon - Absolute Positioned Inside Input */
 .input-search-icon {
-  @apply absolute top-1/2 -translate-y-1/2 w-5 h-5 pointer-events-none;
+  @apply absolute top-1/2 -translate-y-1/2 w-5 h-5;
 }
 
 /* Search Icon Left */