@brickclay-org/ui 0.0.28 → 0.0.30

package/index.d.ts

@@ -693,5 +693,82 @@ declare class BkSelect implements ControlValueAccessor {
     static ɵcmp: i0.ɵɵComponentDeclaration<BkSelect, "bk-select", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "bindLabel": { "alias": "bindLabel"; "required": false; "isSignal": true; }; "bindValue": { "alias": "bindValue"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "notFoundText": { "alias": "notFoundText"; "required": false; "isSignal": true; }; "loadingText": { "alias": "loadingText"; "required": false; "isSignal": true; }; "clearAllText": { "alias": "clearAllText"; "required": false; "isSignal": true; }; "iconAlt": { "alias": "iconAlt"; "required": false; }; "label": { "alias": "label"; "required": false; }; "required": { "alias": "required"; "required": false; }; "iconSrc": { "alias": "iconSrc"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "maxLabels": { "alias": "maxLabels"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "closeOnSelect": { "alias": "closeOnSelect"; "required": false; "isSignal": true; }; "dropdownPosition": { "alias": "dropdownPosition"; "required": false; "isSignal": true; }; "appendToBody": { "alias": "appendToBody"; "required": false; "isSignal": true; }; "compareWith": { "alias": "compareWith"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; "open": "open"; "close": "close"; "focus": "focus"; "blur": "blur"; "search": "search"; "clear": "clear"; "change": "change"; "scrollToEnd": "scrollToEnd"; }, never, never, true, never>;
 }
 
-export { BkBadge, BkButton, BkButtonGroup, BkCheckbox, BkCustomCalendar, BkGrid, BkIconButton, BkPill, BkRadioButton, BkScheduledDatePicker, BkSelect, BkSpinner, BkTextarea, BkTimePicker, BkToggle, BrickclayIcons, BrickclayLib, CalendarManagerService, CalendarModule };
-export type { BadgeColor, BadgeSize, BadgeVariant, ButtonSize, ButtonVariant, CalendarRange, CalendarSelection, GroupItem, GroupMode, IconButtonSize, IconButtonVariant, PillColor, PillSize, PillVariant, ScheduledDateSelection, SortDirection, SpinnerSize, TableAction, TableColumn, TimeConfiguration };
+type InputType = 'text' | 'email' | 'password' | 'number' | 'url' | 'tel';
+type AutoComplete = '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';
+interface CountryOption {
+    code: string;
+    name: string;
+    mask: string;
+    prefix: string;
+    placeholder: string;
+}
+declare class BkInput implements OnInit, OnDestroy, ControlValueAccessor {
+    id: string;
+    name: string;
+    mask: string | null;
+    autoComplete: AutoComplete;
+    label: string;
+    placeholder: string;
+    hint: string;
+    required: boolean;
+    type: InputType;
+    value: string;
+    hasError: boolean;
+    errorMessage: string;
+    disabled: boolean;
+    icon: boolean;
+    iconSrc?: string;
+    iconAlt: string;
+    phone: boolean;
+    countryCode: string;
+    countryOptions: CountryOption[];
+    selectedCountry: CountryOption;
+    searchLeft: boolean;
+    searchRight: boolean;
+    password: boolean;
+    pattern?: string | null;
+    max: number | null;
+    min: number | null;
+    step: number | null;
+    maxlength: number | null;
+    minlength: number | null;
+    dropdownRef?: ElementRef;
+    selectRef?: ElementRef;
+    inputField?: ElementRef<HTMLInputElement>;
+    isFocused: boolean;
+    inputValue: string;
+    isDropdownOpen: boolean;
+    showPassword: boolean;
+    input: EventEmitter<Event>;
+    change: EventEmitter<Event>;
+    focus: EventEmitter<Event>;
+    blur: EventEmitter<Event>;
+    get placeHolderText(): string;
+    get maskValue(): string;
+    get maskPrefixValue(): string;
+    private onChange;
+    private onTouched;
+    writeValue(value: any): void;
+    registerOnChange(fn: any): void;
+    registerOnTouched(fn: any): void;
+    setDisabledState(isDisabled: boolean): void;
+    private closeAllDropdownsHandler;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    onDocumentClick(event: MouseEvent): void;
+    handleFocus(event: Event): void;
+    handleBlur(event: Event): void;
+    handleInput(event: Event): void;
+    handleChange(event: Event): void;
+    toggleDropdown(event?: Event): void;
+    selectCountry(country: CountryOption): void;
+    togglePasswordVisibility(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; }; "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>;
+}
+
+export { BkBadge, BkButton, BkButtonGroup, BkCheckbox, BkCustomCalendar, BkGrid, BkIconButton, BkInput, BkPill, BkRadioButton, BkScheduledDatePicker, BkSelect, BkSpinner, BkTextarea, BkTimePicker, BkToggle, BrickclayIcons, BrickclayLib, CalendarManagerService, CalendarModule };
+export type { AutoComplete, BadgeColor, BadgeSize, BadgeVariant, ButtonSize, ButtonVariant, CalendarRange, CalendarSelection, CountryOption, GroupItem, GroupMode, IconButtonSize, IconButtonVariant, InputType, PillColor, PillSize, PillVariant, ScheduledDateSelection, SortDirection, SpinnerSize, TableAction, TableColumn, TimeConfiguration };

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@brickclay-org/ui",
-  "version": "0.0.28",
+  "version": "0.0.30",
   "peerDependencies": {
     "@angular/common": ">=17.0.0 <=21.0.0",
     "@angular/core": ">=17.0.0 <=21.0.0",
     "moment": "^2.29.0",
-    "@angular/cdk": "^20.2.14"
+    "@angular/cdk": "^20.2.14",
+    "ngx-mask": "^20.0.3"
   },
   "dependencies": {
     "tslib": "^2.3.0"

package/src/lib/input/input.css

@@ -0,0 +1,231 @@
+/* Input container */
+.input-container {
+  @apply flex flex-col gap-1.5;
+}
+
+/* Label */
+.input-label {
+  @apply text-sm font-medium text-[#141414];
+}
+
+.input-label-required {
+  @apply text-[#E7000B] ml-0.5;
+}
+
+/* Input Wrapper */
+.input-wrapper {
+  @apply relative;
+}
+
+/* Input field base styles */
+.input-field {
+  @apply w-full py-2.5 px-3 text-sm border rounded-[4px] outline-none transition-all duration-200 bg-white;
+  height: 40px;
+  box-sizing: border-box;
+}
+
+/* Default/Initial State */
+.input-field--default {
+  @apply border-[#E3E3E7] text-[#141414] placeholder:text-[#6B7080];
+}
+
+/* Focused/Active State */
+.input-field--focused {
+  @apply border-[#6B7080] text-[#141414];
+}
+
+/* Filled State */
+.input-field--filled {
+  @apply border-[#E3E3E7] text-[#141414] bg-white;
+}
+
+/* Error State */
+.input-field--error {
+  @apply border-[#E7000B] text-[#141414];
+}
+
+/* Disabled State */
+.input-field--disabled {
+  @apply border-[#E3E3E7] bg-[#F4F4F6] text-[#A1A3AE] cursor-not-allowed;
+}
+
+/* Icon Input Field - Add padding-left for icon space */
+.input-field--icon {
+  @apply pl-[48px];
+}
+
+/* Phone Input Field - Add padding-left for selector space */
+.input-field--phone {
+  @apply pl-[80px];
+}
+
+/* URL Input Field - Add padding-left for prefix space */
+.input-field--url {
+  @apply pl-[72px];
+}
+
+/* Search Left - Add padding-left for search icon space */
+.input-field--search-left {
+  @apply pl-[48px];
+}
+
+/* Search Right - Add padding-right for search icon space */
+.input-field--search-right {
+  @apply pr-[48px];
+}
+
+/* Password - Add padding-right for password toggle icon space */
+.input-field--password {
+  @apply pr-[48px];
+}
+
+/* When both icon and URL are present, adjust padding */
+.input-field--icon.input-field--url {
+  @apply pl-[120px];
+}
+
+/* When phone and icon are present */
+.input-field--phone.input-field--icon {
+  @apply pl-[128px];
+}
+
+/* Phone Country Selector - Absolute Positioned */
+.input-phone-selector {
+  @apply absolute left-0 top-0 bottom-0 px-3 flex items-center gap-2 cursor-pointer border transition-colors duration-200;
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+
+.input-phone-selector-text {
+  @apply text-xs leading-[18px] text-[#A1A3AE] font-normal;
+}
+
+.input-phone-selector-arrow {
+  @apply w-4 h-4 transition-transform duration-200;
+}
+
+.input-phone-selector-arrow--open {
+  @apply rotate-180;
+}
+
+/* Phone Selector - State Specific Border Colors */
+.input-phone-selector--default {
+  @apply bg-white border-[#E3E3E7];
+}
+
+.input-phone-selector--focused {
+  @apply bg-white border-[#6B7080];
+}
+
+.input-phone-selector--filled {
+  @apply bg-white border-[#E3E3E7];
+}
+
+.input-phone-selector--error {
+  @apply bg-white border-[#E7000B];
+}
+
+.input-phone-selector--disabled {
+  @apply bg-[#F4F4F6] border-[#E3E3E7] cursor-not-allowed;
+}
+
+.input-phone-selector--disabled .input-phone-selector-text {
+  @apply text-[#A1A3AE];
+}
+
+/* Phone Dropdown Menu */
+.input-phone-dropdown {
+  @apply absolute left-0 top-full mt-1 w-[80px] bg-white border border-[#E3E3E7] rounded-[4px] shadow-lg z-50 max-h-48 overflow-y-auto;
+}
+
+.input-phone-dropdown-item {
+  @apply w-full px-5 py-2.5 text-center text-xs leading-[18px] text-[#6B7080] hover:bg-[#F9FAFA] transition-colors duration-200 border-none bg-transparent;
+}
+
+.input-phone-dropdown-item--active {
+  @apply bg-[#F9FAFA] text-[#141414];
+}
+
+/* Icon - Absolute Positioned Inside Input */
+.input-icon {
+  @apply absolute left-3 top-1/2 -translate-y-1/2 w-6 h-6 pointer-events-none size-6;
+}
+/* When phone selector is present, adjust icon position */
+.input-wrapper--phone .input-icon {
+  @apply left-[80px];
+}
+
+/* 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;
+}
+
+/* Search Icon Left */
+.input-search-icon--left {
+  @apply left-3;
+}
+
+/* Search Icon Right */
+.input-search-icon--right {
+  @apply right-3;
+}
+
+/* Password Toggle Button */
+.input-password-toggle {
+  @apply absolute right-3 top-1/2 -translate-y-1/2 w-5 h-5 p-0 border-0 bg-transparent cursor-pointer outline-none flex items-center justify-center;
+}
+
+.input-password-toggle:disabled {
+  @apply cursor-not-allowed opacity-50;
+}
+
+.input-password-toggle:hover:not(:disabled) {
+  @apply opacity-70;
+}
+
+/* Password Icon */
+.input-password-icon {
+  @apply w-5 h-5 pointer-events-none;
+}
+/* URL Prefix - Absolute Positioned Inside Input */
+.input-url-prefix {
+  @apply absolute left-0 top-0 bottom-0 py-2.5 px-3 text-sm text-[#6B7080] bg-white border flex items-center transition-colors duration-200 pointer-events-none;
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+
+/* When icon is present, adjust URL prefix position */
+.input-wrapper--icon .input-url-prefix {
+  @apply left-[48px];
+}
+
+/* URL Prefix - State Specific Border Colors (matches input border) */
+.input-url-prefix--default {
+  @apply border-[#E3E3E7];
+}
+
+.input-url-prefix--focused {
+  @apply border-[#6B7080];
+}
+
+.input-url-prefix--filled {
+  @apply border-[#E3E3E7];
+}
+
+.input-url-prefix--error {
+  @apply border-[#E7000B];
+}
+
+.input-url-prefix--disabled {
+  @apply bg-[#F4F4F6] text-[#A1A3AE] border-r-[#E3E3E7];
+}
+
+/* Hint text */
+.input-hint {
+  @apply text-xs text-[#868997] font-normal;
+}
+
+/* Error message */
+.input-error {
+  @apply text-xs text-[#E7000B] font-normal;
+}

package/src/styles.css

@@ -11,4 +11,5 @@
 @import './lib/textarea/textarea.css';
 @import './lib/grid/components/grid/grid.css';
 @import './lib/select/select.css';
+@import './lib/input/input.css';