@brickclay-org/ui 0.1.79 → 0.1.80

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/fesm2022/brickclay-org-ui.mjs +74 -12
  2. package/fesm2022/brickclay-org-ui.mjs.map +1 -1
  3. package/index.d.ts +17 -3
  4. package/package.json +1 -1
  5. package/src/assets/icons/dollar-icon.svg +5 -0
  6. package/src/lib/badge/badge.css +8 -4
  7. package/src/lib/input/input.css +49 -0
package/index.d.ts CHANGED
@@ -748,7 +748,7 @@ declare class BkPill {
748
748
  }
749
749
 
750
750
  type BadgeVariant = 'Light' | 'Solid' | 'Outline' | 'Transparent';
751
- type BadgeColor = 'Gray' | 'Primary' | 'Error' | 'Warning' | 'Success' | 'Purple' | 'Cyan';
751
+ type BadgeColor = 'Gray' | 'Primary' | 'Error' | 'Warning' | 'Orange' | 'Success' | 'Purple' | 'Cyan';
752
752
  type BadgeSize = 'xsm' | 'sm' | 'md' | 'lg';
753
753
  declare class BkBadge {
754
754
  label: string;
@@ -758,11 +758,17 @@ declare class BkBadge {
758
758
  dot: 'left' | 'right' | 'none';
759
759
  removable: boolean;
760
760
  customClass: string;
761
+ /** Overrides `color`/`variant` with exact CSS colors — any valid CSS color value. */
762
+ customBg?: string;
763
+ customBorder?: string;
764
+ customText?: string;
761
765
  clicked: EventEmitter<string>;
766
+ get hasCustomColor(): boolean;
762
767
  get containerClasses(): string;
768
+ get customStyle(): Record<string, string>;
763
769
  onRemove(e: Event): void;
764
770
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<BkBadge, never>;
765
- static ɵcmp: _angular_core.ɵɵComponentDeclaration<BkBadge, "bk-badge", never, { "label": { "alias": "label"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "color": { "alias": "color"; "required": false; }; "size": { "alias": "size"; "required": false; }; "dot": { "alias": "dot"; "required": false; }; "removable": { "alias": "removable"; "required": false; }; "customClass": { "alias": "customClass"; "required": false; }; }, { "clicked": "clicked"; }, never, never, true, never>;
771
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<BkBadge, "bk-badge", never, { "label": { "alias": "label"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "color": { "alias": "color"; "required": false; }; "size": { "alias": "size"; "required": false; }; "dot": { "alias": "dot"; "required": false; }; "removable": { "alias": "removable"; "required": false; }; "customClass": { "alias": "customClass"; "required": false; }; "customBg": { "alias": "customBg"; "required": false; }; "customBorder": { "alias": "customBorder"; "required": false; }; "customText": { "alias": "customText"; "required": false; }; }, { "clicked": "clicked"; }, never, never, true, never>;
766
772
  }
767
773
 
768
774
  type SpinnerSize = 'xsm' | 'sm' | 'md' | 'lg' | 'xl';
@@ -1277,6 +1283,9 @@ declare class BkInput implements OnInit, OnDestroy, AfterViewInit, ControlValueA
1277
1283
  iconAlt: string;
1278
1284
  showIcon: boolean;
1279
1285
  phone: boolean;
1286
+ currency: boolean;
1287
+ currencyDecimals: number;
1288
+ allowNegative: boolean;
1280
1289
  countryCode: string;
1281
1290
  countryOptions: CountryOption[];
1282
1291
  selectedCountry: CountryOption;
@@ -1306,9 +1315,14 @@ declare class BkInput implements OnInit, OnDestroy, AfterViewInit, ControlValueA
1306
1315
  get placeHolderText(): string;
1307
1316
  get maskValue(): string;
1308
1317
  get maskPrefixValue(): string;
1318
+ private readonly defaultDecimalMarker;
1319
+ get maskThousandSeparator(): string;
1320
+ get maskDecimalMarker(): '.' | ',' | ['.', ','];
1321
+ get maskAllowNegativeNumbers(): boolean;
1309
1322
  private onChange;
1310
1323
  private onTouched;
1311
1324
  private applyDropSpecialCharacters;
1325
+ private parseCurrencyValue;
1312
1326
  writeValue(value: any): void;
1313
1327
  registerOnChange(fn: any): void;
1314
1328
  registerOnTouched(fn: any): void;
@@ -1332,7 +1346,7 @@ declare class BkInput implements OnInit, OnDestroy, AfterViewInit, ControlValueA
1332
1346
  get currentInputType(): string;
1333
1347
  private writeMaskedViewValue;
1334
1348
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<BkInput, never>;
1335
- static ɵcmp: _angular_core.ɵɵComponentDeclaration<BkInput, "bk-input", never, { "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "mask": { "alias": "mask"; "required": false; }; "dropSpecialCharacters": { "alias": "dropSpecialCharacters"; "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; }; "size": { "alias": "size"; "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>;
1349
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<BkInput, "bk-input", never, { "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "mask": { "alias": "mask"; "required": false; }; "dropSpecialCharacters": { "alias": "dropSpecialCharacters"; "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; }; "size": { "alias": "size"; "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; }; "currency": { "alias": "currency"; "required": false; }; "currencyDecimals": { "alias": "currencyDecimals"; "required": false; }; "allowNegative": { "alias": "allowNegative"; "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>;
1336
1350
  }
1337
1351
 
1338
1352
  declare class BkInputChips implements ControlValueAccessor, AfterViewInit {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brickclay-org/ui",
3
- "version": "0.1.79",
3
+ "version": "0.1.80",
4
4
  "schematics": "./schematics/collection.json",
5
5
  "ng-add": {
6
6
  "save": "dependencies"
package/src/assets/icons/dollar-icon.svg ADDED
@@ -0,0 +1,5 @@
1
+ <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M10 1.66666C5.39763 1.66666 1.66667 5.39762 1.66667 10C1.66667 14.6024 5.39763 18.3333 10 18.3333C14.6024 18.3333 18.3333 14.6024 18.3333 10C18.3333 5.39762 14.6024 1.66666 10 1.66666Z" stroke="#A1A3AE" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
3
+ <path d="M10 5.83334V14.1667" stroke="#A1A3AE" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
4
+ <path d="M12.5 7.91666C12.5 6.85609 11.3807 5.99999 10 5.99999C8.61931 5.99999 7.5 6.85609 7.5 7.91666C7.5 8.97723 8.61931 9.83332 10 9.83332C11.3807 9.83332 12.5 10.6894 12.5 11.75C12.5 12.8106 11.3807 13.6667 10 13.6667C8.61931 13.6667 7.5 12.8106 7.5 11.75" stroke="#A1A3AE" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
5
+ </svg>
package/src/lib/badge/badge.css CHANGED
@@ -36,7 +36,8 @@
36
36
  .Gray-Solid { @apply bg-[#6B7080] border-[#6B7080] text-white; }
37
37
  .Primary-Solid { @apply bg-[#294FFF] border-[#294FFF] text-white; }
38
38
  .Error-Solid { @apply bg-[#FA727A] border-[#FA727A] text-[#4C0513]; }
39
- .Warning-Solid { @apply bg-[#FA9E3A] border-[#FA9E3A] text-[#461C04]; }
39
+ .Orange-Solid { @apply bg-[#FA9E3A] border-[#FA9E3A] text-[#461C04]; }
40
+ .Warning-Solid { @apply bg-[#FACC15] border-[#FACC15] text-[#713F12]; }
40
41
  /* Fixed Custom Dot color for Success Solid if you want it darker than text, otherwise remove next line */
41
42
  .Success-Solid { @apply bg-[#57D175] border-[#57D175] text-[#461C04]; }
42
43
  .Success-Solid .dot { @apply bg-[#082B13]; } /* Override bg-current only here */
@@ -49,7 +50,8 @@
49
50
  .Gray-Light { @apply bg-[#F4F4F6] border-transparent text-[#363C51]; }
50
51
  .Primary-Light { @apply bg-[#E5F3FF] border-transparent text-[#1434CB]; }
51
52
  .Error-Light { @apply bg-[#FFF1F1] border-transparent text-[#CB1432]; }
52
- .Warning-Light { @apply bg-[#FFEED7] border-transparent text-[#A04C02]; }
53
+ .Orange-Light { @apply bg-[#FFEED7] border-transparent text-[#A04C02]; }
54
+ .Warning-Light { @apply bg-[#FEFCE8] border-transparent text-[#A16207]; }
53
55
  .Success-Light { @apply bg-[#F1FCF3] border-transparent text-[#1E7735]; }
54
56
  .Purple-Light { @apply bg-[#F6EAFD] border-transparent text-[#9130C0]; }
55
57
  .Cyan-Light { @apply bg-[#F1FAFE] border-transparent text-[#096E9B]; }
@@ -59,7 +61,8 @@
59
61
  .Gray-Outline { @apply bg-[#F4F4F6] border-[#BBBDC5] text-[#363C51]; }
60
62
  .Primary-Outline { @apply bg-[#E5F3FF] border-[#3F71FF] text-[#1434CB]; }
61
63
  .Error-Outline { @apply bg-[#FFF1F1] border-[#FA727A] text-[#CB1432]; }
62
- .Warning-Outline { @apply bg-[#FFEED7] border-[#FBAE58] text-[#A04C02]; }
64
+ .Orange-Outline { @apply bg-[#FFEED7] border-[#FBAE58] text-[#A04C02]; }
65
+ .Warning-Outline { @apply bg-[#FEFCE8] border-[#FACC15] text-[#A16207]; }
63
66
  .Success-Outline { @apply bg-[#F1FCF3] border-[#57D175] text-[#1E7735]; }
64
67
  .Purple-Outline { @apply bg-[#F6EAFD] border-[#CE8EF2] text-[#9130C0]; }
65
68
  .Cyan-Outline { @apply bg-[#F1FAFE] border-[#3FC2F1] text-[#096E9B]; }
@@ -69,7 +72,8 @@
69
72
  .Gray-Transparent { @apply bg-transparent border-[#BBBDC5] text-[#363C51]; }
70
73
  .Primary-Transparent { @apply bg-transparent border-[#3F71FF] text-[#1434CB]; }
71
74
  .Error-Transparent { @apply bg-transparent border-[#FA727A] text-[#CB1432]; }
72
- .Warning-Transparent { @apply bg-transparent border-[#FBAE58] text-[#A04C02]; }
75
+ .Orange-Transparent { @apply bg-transparent border-[#FBAE58] text-[#A04C02]; }
76
+ .Warning-Transparent { @apply bg-transparent border-[#FACC15] text-[#A16207]; }
73
77
  .Success-Transparent { @apply bg-transparent border-[#57D175] text-[#1E7735]; }
74
78
  .Purple-Transparent { @apply bg-transparent border-[#CE8EF2] text-[#9130C0]; }
75
79
  .Cyan-Transparent { @apply bg-transparent border-[#3FC2F1] text-[#096E9B]; }
package/src/lib/input/input.css CHANGED
@@ -66,6 +66,11 @@
66
66
  @apply pl-[72px];
67
67
  }
68
68
 
69
+ /* Currency Input Field - Add padding-left for the dollar icon box */
70
+ .input-field--currency {
71
+ @apply pl-[3.5rem];
72
+ }
73
+
69
74
  /* Icon Left - Add padding-left for icon space */
70
75
  .input-field--icon-left {
71
76
  @apply pl-[48px];
@@ -224,6 +229,38 @@
224
229
  @apply bg-[#F4F4F6] text-[#A1A3AE] border-r-[#E3E3E7];
225
230
  }
226
231
 
232
+ /* Currency Icon - Bordered box like the URL prefix, holds the dollar icon */
233
+ .input-currency-icon {
234
+ @apply absolute left-0 top-0 bottom-0 w-11 flex items-center justify-center bg-white border transition-colors duration-200 pointer-events-none;
235
+ border-top-left-radius: 4px;
236
+ border-bottom-left-radius: 4px;
237
+ }
238
+
239
+ .input-currency-icon img {
240
+ @apply w-5 h-5;
241
+ }
242
+
243
+ /* Currency Icon - State Specific Border Colors (matches input border) */
244
+ .input-currency-icon--default {
245
+ @apply border-[#E3E3E7];
246
+ }
247
+
248
+ .input-currency-icon--focused {
249
+ @apply border-[#6B7080];
250
+ }
251
+
252
+ .input-currency-icon--filled {
253
+ @apply border-[#E3E3E7];
254
+ }
255
+
256
+ .input-currency-icon--error {
257
+ @apply border-[#E7000B];
258
+ }
259
+
260
+ .input-currency-icon--disabled {
261
+ @apply bg-[#F4F4F6] border-[#E3E3E7];
262
+ }
263
+
227
264
  /* Hint text */
228
265
  .input-hint {
229
266
  @apply text-xs text-[#868997] font-normal;
@@ -295,6 +332,18 @@
295
332
  @apply pl-16;
296
333
  }
297
334
 
335
+ .input-container--sm .input-field--currency {
336
+ @apply pl-9;
337
+ }
338
+
339
+ .input-container--sm .input-currency-icon {
340
+ @apply w-8;
341
+ }
342
+
343
+ .input-container--sm .input-currency-icon img {
344
+ @apply w-4 h-4;
345
+ }
346
+
298
347
  .input-container--sm .input-field--icon.input-field--url {
299
348
  @apply pl-24;
300
349
  }