@brickclay-org/ui 0.0.55 → 0.0.56

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 (4) hide show
  1. package/fesm2022/brickclay-org-ui.mjs +2 -2
  2. package/fesm2022/brickclay-org-ui.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/src/lib/select/select.css +36 -41
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brickclay-org/ui",
3
- "version": "0.0.55",
3
+ "version": "0.0.56",
4
4
  "schematics": "./schematics/collection.json",
5
5
  "ng-add": {
6
6
  "save": "dependencies"
package/src/lib/select/select.css CHANGED
@@ -1,87 +1,87 @@
1
1
  /* Container */
2
- .ng-select-container {
2
+ .bk-select-container {
3
3
  @apply relative w-full box-border flex flex-col gap-1.5;;
4
4
  }
5
5
 
6
6
  /* Control */
7
- .ng-select-control {
7
+ .bk-select-control {
8
8
  @apply flex items-center justify-between gap-2 w-full bg-white border border-[#E3E3E7] rounded transition-all duration-200 px-3 py-2.5 cursor-pointer;
9
9
 
10
- &.focused { @apply border-[#6B7080] shadow-none z-10; }
11
- &.disabled { @apply bg-[#F4F4F6] cursor-not-allowed opacity-60; }
10
+ &.bk-focused { @apply border-[#6B7080] shadow-none z-10; }
11
+ &.bk-disabled { @apply bg-[#F4F4F6] cursor-not-allowed opacity-60; }
12
12
  }
13
13
 
14
- .ng-select-control.has-error {
14
+ .bk-select-control.bk-has-error {
15
15
  @apply border-[#d11e14];
16
16
  }
17
17
 
18
18
 
19
19
  /* Value Container */
20
- .ng-value-container {
20
+ .bk-value-container {
21
21
  @apply flex flex-1 items-center flex-wrap gap-1 relative overflow-hidden h-full;
22
22
  }
23
23
 
24
- .ng-placeholder {
24
+ .bk-placeholder {
25
25
  @apply text-[#6B7080] font-normal text-sm truncate w-full pointer-events-none;
26
26
  }
27
27
 
28
28
 
29
29
  /* --- NEW: Single Value --- */
30
- .ng-value-label-single {
30
+ .bk-value-label-single {
31
31
  @apply font-normal text-sm leading-[18px] text-[#141414] truncate w-full;
32
32
  }
33
33
  /* --- NEW: Multi Select Chips --- */
34
34
 
35
35
  /* Badge Item */
36
- .multi-badge-item {
36
+ .bk-multi-badge-item {
37
37
  @apply inline-flex items-center gap-1.5 px-1.5 py-0.5 bg-white border border-[#E3E3E7] rounded-[4px];
38
38
  }
39
39
 
40
- .multi-badge-item-text {
40
+ .bk-multi-badge-item-text {
41
41
  @apply text-[10px] leading-[14px] font-normal text-[#6B7080];
42
42
  }
43
43
 
44
44
  /* Badge Close Button */
45
- .multi-badge-close {
45
+ .bk-multi-badge-close {
46
46
  @apply cursor-pointer outline-none w-3 h-3;
47
47
  }
48
48
 
49
49
  /* Actions */
50
- .ng-actions {
50
+ .bk-actions {
51
51
  @apply flex items-center gap-0.5 flex-shrink-0;
52
52
  }
53
- .ng-clear-wrapper { @apply text-gray-400 hover:text-red-500 cursor-pointer; }
54
- .ng-arrow-wrapper { @apply text-gray-400 transition-transform duration-200; &.open { @apply rotate-180; }}
53
+ .bk-clear-wrapper { @apply text-gray-400 hover:text-red-500 cursor-pointer; }
54
+ .bk-arrow-wrapper { @apply text-gray-400 transition-transform duration-200; &.bk-open { @apply rotate-180; }}
55
55
 
56
56
  /* Dropdown */
57
- .custom-ng-dropdown-panel {
57
+ .bk-dropdown-panel {
58
58
  @apply absolute left-0 w-full bg-white border border-[#E3E3E7] rounded-xl shadow-lg z-[99] overflow-hidden cursor-default p-2.5;
59
59
  }
60
60
 
61
- .ng-dropdown-search { @apply px-2 pt-2;}
62
- .ng-search-wrapper { @apply flex items-center border border-[#E3E3E7] rounded-md px-3 py-[7px] bg-white transition-colors focus-within:border-[#E3E3E7]; }
63
- .ng-search-input { @apply w-full outline-none font-normal text-sm text-[#141414] placeholder-[#A1A3AE] bg-transparent;}
61
+ .bk-dropdown-search { @apply px-2 pt-2;}
62
+ .bk-search-wrapper { @apply flex items-center border border-[#E3E3E7] rounded-md px-3 py-[7px] bg-white transition-colors focus-within:border-[#E3E3E7]; }
63
+ .bk-search-input { @apply w-full outline-none font-normal text-sm text-[#141414] placeholder-[#A1A3AE] bg-transparent;}
64
64
 
65
- .ng-options-list { @apply max-h-60 overflow-auto relative flex flex-col gap-0.5; }
65
+ .bk-options-list { @apply max-h-60 overflow-auto relative flex flex-col gap-0.5; }
66
66
 
67
67
  /* Options */
68
- .ng-option {
68
+ .bk-option {
69
69
  @apply flex items-center p-2.5 cursor-pointer transition-colors font-normal text-sm text-[#141414];
70
- &:hover, &.marked { @apply bg-[#F8F8F8] rounded-md;}
71
- &.selected { @apply bg-[#F8F8F8] rounded-md; }
70
+ &:hover, &.bk-marked { @apply bg-[#F8F8F8] rounded-md;}
71
+ &.bk-selected { @apply bg-[#F8F8F8] rounded-md; }
72
72
  }
73
- .grouped .ng-option {
73
+ .bk-grouped .bk-option {
74
74
  @apply ps-5;
75
75
  }
76
76
 
77
- .ng-option-disabled { @apply px-3 py-2 text-gray-400 cursor-default; }
77
+ .bk-option-disabled { @apply px-3 py-2 text-gray-400 cursor-default; }
78
78
 
79
79
 
80
80
 
81
81
  /* ... Previous styles ... */
82
82
 
83
83
  /* Select All Row (Sticky Top) */
84
- .select-all-option {
84
+ .bk-select-all-option {
85
85
  @apply sticky top-0 z-20 flex items-center px-3 py-2 cursor-pointer border-b border-[#E3E6EE] bg-gray-50 text-[#15191E];
86
86
 
87
87
  &:hover {
@@ -89,34 +89,34 @@
89
89
  }
90
90
  }
91
91
 
92
- .custom-ng-dropdown-panel[data-position="top"] {
92
+ .bk-dropdown-panel[data-position="top"] {
93
93
  margin-top: 0;
94
94
  margin-bottom: 4px;
95
95
  }
96
96
 
97
- .select-label {
97
+ .bk-select-label {
98
98
  @apply text-sm font-medium text-[#141414] tracking-[-0.28px] inline-block;
99
99
  }
100
100
 
101
- .select-label-required {
101
+ .bk-select-label-required {
102
102
  @apply text-[#E7000B];
103
103
  }
104
104
 
105
105
 
106
106
  /* width */
107
- .ng-options-list ::-webkit-scrollbar {
107
+ .bk-options-list ::-webkit-scrollbar {
108
108
  width: 10px;
109
109
  }
110
110
 
111
111
  /* Track */
112
- .ng-options-list ::-webkit-scrollbar-track {
112
+ .bk-options-list ::-webkit-scrollbar-track {
113
113
  background: transparent;
114
114
  border-radius: 8px;
115
115
  width: 8px;
116
116
  }
117
117
 
118
118
  /* Handle */
119
- .ng-options-list ::-webkit-scrollbar-thumb {
119
+ .bk-options-list ::-webkit-scrollbar-thumb {
120
120
  background: #D6D7DC;
121
121
  border-radius: 8px;
122
122
  transition: 0.3s ease-in-out;
@@ -124,30 +124,25 @@
124
124
  }
125
125
 
126
126
  /* Handle on hover */
127
- .ng-options-list ::-webkit-scrollbar-thumb:hover {
127
+ .bk-options-list ::-webkit-scrollbar-thumb:hover {
128
128
  background: #909090;
129
129
  }
130
130
 
131
131
 
132
- .ng-option-group {
132
+ .bk-option-group {
133
133
  @apply px-2.5 py-1 font-bold text-[13px] leading-5 text-[#141414];
134
134
  }
135
135
 
136
- .ng-option-group:not(:first-child) {
136
+ .bk-option-group:not(:first-child) {
137
137
  @apply mt-4;
138
138
  }
139
139
 
140
140
  /* Error message */
141
- .select-error {
141
+ .bk-select-error {
142
142
  @apply text-xs text-[#E7000B] font-normal;
143
143
  }
144
144
 
145
145
  /* Hint text */
146
- .select-hint {
146
+ .bk-select-hint {
147
147
  @apply text-xs text-[#868997] font-normal;
148
148
  }
149
-
150
- /* Error message */
151
- .select-error {
152
- @apply text-xs text-[#E7000B] font-normal;
153
- }