@memberjunction/ng-ui-components 0.0.1 → 5.24.0
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.
- package/dist/lib/accordion/accordion.component.d.ts +58 -0
- package/dist/lib/accordion/accordion.component.d.ts.map +1 -0
- package/dist/lib/accordion/accordion.component.js +163 -0
- package/dist/lib/accordion/accordion.component.js.map +1 -0
- package/dist/lib/accordion/accordion.scss +45 -0
- package/dist/lib/button/button.directive.d.ts +45 -0
- package/dist/lib/button/button.directive.d.ts.map +1 -0
- package/dist/lib/button/button.directive.js +114 -0
- package/dist/lib/button/button.directive.js.map +1 -0
- package/dist/lib/button/button.scss +250 -0
- package/dist/lib/calendar/calendar-utils.d.ts +16 -0
- package/dist/lib/calendar/calendar-utils.d.ts.map +1 -0
- package/dist/lib/calendar/calendar-utils.js +41 -0
- package/dist/lib/calendar/calendar-utils.js.map +1 -0
- package/dist/lib/combobox/combobox.component.d.ts +83 -0
- package/dist/lib/combobox/combobox.component.d.ts.map +1 -0
- package/dist/lib/combobox/combobox.component.js +483 -0
- package/dist/lib/combobox/combobox.component.js.map +1 -0
- package/dist/lib/combobox/combobox.scss +86 -0
- package/dist/lib/datepicker/datepicker.component.d.ts +50 -0
- package/dist/lib/datepicker/datepicker.component.d.ts.map +1 -0
- package/dist/lib/datepicker/datepicker.component.js +279 -0
- package/dist/lib/datepicker/datepicker.component.js.map +1 -0
- package/dist/lib/datepicker/datepicker.scss +60 -0
- package/dist/lib/dialog/dialog.component.d.ts +84 -0
- package/dist/lib/dialog/dialog.component.d.ts.map +1 -0
- package/dist/lib/dialog/dialog.component.js +285 -0
- package/dist/lib/dialog/dialog.component.js.map +1 -0
- package/dist/lib/dialog/dialog.scss +134 -0
- package/dist/lib/dialog/dialog.service.d.ts +114 -0
- package/dist/lib/dialog/dialog.service.d.ts.map +1 -0
- package/dist/lib/dialog/dialog.service.js +282 -0
- package/dist/lib/dialog/dialog.service.js.map +1 -0
- package/dist/lib/dropdown/dropdown.component.d.ts +75 -0
- package/dist/lib/dropdown/dropdown.component.d.ts.map +1 -0
- package/dist/lib/dropdown/dropdown.component.js +445 -0
- package/dist/lib/dropdown/dropdown.component.js.map +1 -0
- package/dist/lib/dropdown/dropdown.scss +68 -0
- package/dist/lib/input/chip.scss +64 -0
- package/dist/lib/input/input-switch-progress.scss +57 -0
- package/dist/lib/input/input.scss +77 -0
- package/dist/lib/numeric-input/numeric-input.component.d.ts +31 -0
- package/dist/lib/numeric-input/numeric-input.component.d.ts.map +1 -0
- package/dist/lib/numeric-input/numeric-input.component.js +103 -0
- package/dist/lib/numeric-input/numeric-input.component.js.map +1 -0
- package/dist/lib/progress-bar/progress-bar.component.d.ts +14 -0
- package/dist/lib/progress-bar/progress-bar.component.d.ts.map +1 -0
- package/dist/lib/progress-bar/progress-bar.component.js +62 -0
- package/dist/lib/progress-bar/progress-bar.component.js.map +1 -0
- package/dist/lib/splitter/splitter.component.d.ts +23 -0
- package/dist/lib/splitter/splitter.component.d.ts.map +1 -0
- package/dist/lib/splitter/splitter.component.js +24 -0
- package/dist/lib/splitter/splitter.component.js.map +1 -0
- package/dist/lib/splitter/splitter.scss +29 -0
- package/dist/lib/switch/switch.component.d.ts +24 -0
- package/dist/lib/switch/switch.component.d.ts.map +1 -0
- package/dist/lib/switch/switch.component.js +82 -0
- package/dist/lib/switch/switch.component.js.map +1 -0
- package/dist/lib/window/window.component.d.ts +115 -0
- package/dist/lib/window/window.component.d.ts.map +1 -0
- package/dist/lib/window/window.component.js +502 -0
- package/dist/lib/window/window.component.js.map +1 -0
- package/dist/lib/window/window.scss +97 -0
- package/dist/public-api.d.ts +14 -0
- package/dist/public-api.d.ts.map +1 -0
- package/dist/public-api.js +16 -0
- package/dist/public-api.js.map +1 -0
- package/package.json +39 -6
- package/README.md +0 -45
|
@@ -0,0 +1,250 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* mjButton Styles
|
|
3
|
+
*
|
|
4
|
+
* Consolidates three legacy button systems (.mj-btn-*, .action-btn*, .control-btn*)
|
|
5
|
+
* into a single BEM-based system using --mj-* semantic design tokens.
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
/* ========== Base ========== */
|
|
9
|
+
.mj-btn {
|
|
10
|
+
display: inline-flex;
|
|
11
|
+
align-items: center;
|
|
12
|
+
justify-content: center;
|
|
13
|
+
gap: 8px;
|
|
14
|
+
padding: 10px 20px;
|
|
15
|
+
border: 1px solid transparent;
|
|
16
|
+
border-radius: var(--mj-radius-md);
|
|
17
|
+
font-family: var(--mj-font-family);
|
|
18
|
+
font-size: var(--mj-text-sm);
|
|
19
|
+
font-weight: var(--mj-font-semibold);
|
|
20
|
+
line-height: 1.5;
|
|
21
|
+
cursor: pointer;
|
|
22
|
+
transition: var(--mj-transition-colors), box-shadow var(--mj-transition-base), transform var(--mj-transition-base);
|
|
23
|
+
text-decoration: none;
|
|
24
|
+
white-space: nowrap;
|
|
25
|
+
min-height: 44px;
|
|
26
|
+
user-select: none;
|
|
27
|
+
-webkit-user-select: none;
|
|
28
|
+
|
|
29
|
+
&:hover:not(:disabled):not(.mj-btn--flat):not(.mj-btn--icon):not(.mj-btn--outline):not(.mj-btn--sm) {
|
|
30
|
+
transform: translateY(-2px);
|
|
31
|
+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
&:active:not(:disabled):not(.mj-btn--flat):not(.mj-btn--icon):not(.mj-btn--outline):not(.mj-btn--sm) {
|
|
35
|
+
transform: translateY(0);
|
|
36
|
+
box-shadow: none;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
&:focus-visible {
|
|
41
|
+
outline: none;
|
|
42
|
+
box-shadow: var(--mj-focus-ring);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
&:disabled,
|
|
46
|
+
&[disabled] {
|
|
47
|
+
opacity: 0.5;
|
|
48
|
+
cursor: not-allowed;
|
|
49
|
+
pointer-events: none;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
i,
|
|
53
|
+
.fa-solid,
|
|
54
|
+
.fa-regular,
|
|
55
|
+
.fa-light {
|
|
56
|
+
font-size: 1rem;
|
|
57
|
+
line-height: 1;
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
/* Suppress lift inside toggle groups */
|
|
62
|
+
.view-toggle .mj-btn:hover,
|
|
63
|
+
.mj-btn-group .mj-btn:hover {
|
|
64
|
+
transform: none !important;
|
|
65
|
+
box-shadow: none !important;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
/* ========== Variants ========== */
|
|
69
|
+
|
|
70
|
+
.mj-btn--primary {
|
|
71
|
+
background: var(--mj-brand-primary);
|
|
72
|
+
color: var(--mj-brand-on-primary);
|
|
73
|
+
border-color: var(--mj-brand-primary);
|
|
74
|
+
|
|
75
|
+
&:hover:not(:disabled) {
|
|
76
|
+
background: var(--mj-brand-primary-hover);
|
|
77
|
+
border-color: var(--mj-brand-primary-hover);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
&:active:not(:disabled) {
|
|
81
|
+
background: var(--mj-brand-primary-active);
|
|
82
|
+
border-color: var(--mj-brand-primary-active);
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.mj-btn--secondary {
|
|
87
|
+
background: var(--mj-bg-surface);
|
|
88
|
+
color: var(--mj-text-primary);
|
|
89
|
+
border-color: var(--mj-border-default);
|
|
90
|
+
|
|
91
|
+
&:hover:not(:disabled) {
|
|
92
|
+
background: var(--mj-bg-surface-hover);
|
|
93
|
+
border-color: var(--mj-border-strong);
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
&:active:not(:disabled) {
|
|
97
|
+
background: var(--mj-bg-surface-active);
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.mj-btn--outline {
|
|
102
|
+
background: transparent;
|
|
103
|
+
color: var(--mj-brand-primary);
|
|
104
|
+
border-color: var(--mj-brand-primary);
|
|
105
|
+
|
|
106
|
+
&:hover:not(:disabled) {
|
|
107
|
+
background: var(--mj-brand-primary);
|
|
108
|
+
color: var(--mj-brand-on-primary);
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
&:active:not(:disabled) {
|
|
112
|
+
background: var(--mj-brand-primary-active);
|
|
113
|
+
color: var(--mj-brand-on-primary);
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.mj-btn--flat {
|
|
118
|
+
background: transparent;
|
|
119
|
+
color: var(--mj-text-secondary);
|
|
120
|
+
border-color: transparent;
|
|
121
|
+
padding: 8px 12px;
|
|
122
|
+
|
|
123
|
+
&:hover:not(:disabled) {
|
|
124
|
+
background: var(--mj-bg-surface-hover);
|
|
125
|
+
color: var(--mj-text-primary);
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
&:active:not(:disabled) {
|
|
129
|
+
background: var(--mj-bg-surface-active);
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.mj-btn--danger {
|
|
134
|
+
background: var(--mj-status-error);
|
|
135
|
+
color: var(--mj-text-inverse);
|
|
136
|
+
border-color: var(--mj-status-error);
|
|
137
|
+
|
|
138
|
+
&:hover:not(:disabled) {
|
|
139
|
+
background: var(--mj-status-error-text);
|
|
140
|
+
border-color: var(--mj-status-error-text);
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
&:active:not(:disabled) {
|
|
144
|
+
opacity: 0.9;
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.mj-btn--success {
|
|
149
|
+
background: var(--mj-status-success);
|
|
150
|
+
color: var(--mj-text-inverse);
|
|
151
|
+
border-color: var(--mj-status-success);
|
|
152
|
+
|
|
153
|
+
&:hover:not(:disabled) {
|
|
154
|
+
background: var(--mj-status-success-text);
|
|
155
|
+
border-color: var(--mj-status-success-text);
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
&:active:not(:disabled) {
|
|
159
|
+
opacity: 0.9;
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
.mj-btn--warning {
|
|
164
|
+
background: var(--mj-status-warning);
|
|
165
|
+
color: var(--mj-text-inverse);
|
|
166
|
+
border-color: var(--mj-status-warning);
|
|
167
|
+
|
|
168
|
+
&:hover:not(:disabled) {
|
|
169
|
+
background: var(--mj-status-warning-text);
|
|
170
|
+
border-color: var(--mj-status-warning-text);
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
&:active:not(:disabled) {
|
|
174
|
+
opacity: 0.9;
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.mj-btn--icon {
|
|
179
|
+
background: transparent;
|
|
180
|
+
color: var(--mj-text-muted);
|
|
181
|
+
border-color: transparent;
|
|
182
|
+
padding: 8px;
|
|
183
|
+
min-width: 44px;
|
|
184
|
+
min-height: 44px;
|
|
185
|
+
|
|
186
|
+
&:hover:not(:disabled) {
|
|
187
|
+
background: var(--mj-bg-surface-hover);
|
|
188
|
+
color: var(--mj-brand-primary);
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
&:active:not(:disabled) {
|
|
192
|
+
background: var(--mj-bg-surface-active);
|
|
193
|
+
}
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
/* ========== Sizes ========== */
|
|
197
|
+
.mj-btn--sm {
|
|
198
|
+
padding: 6px 12px;
|
|
199
|
+
font-size: 0.8125rem;
|
|
200
|
+
min-height: 32px;
|
|
201
|
+
gap: 6px;
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
.mj-btn--lg {
|
|
205
|
+
padding: 14px 28px;
|
|
206
|
+
font-size: 1rem;
|
|
207
|
+
min-height: 52px;
|
|
208
|
+
gap: 10px;
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
/* ========== Toggleable ========== */
|
|
212
|
+
.mj-btn--selected {
|
|
213
|
+
background: var(--mj-brand-primary);
|
|
214
|
+
color: var(--mj-brand-on-primary);
|
|
215
|
+
border-color: var(--mj-brand-primary);
|
|
216
|
+
|
|
217
|
+
&:hover:not(:disabled) {
|
|
218
|
+
background: var(--mj-brand-primary-hover);
|
|
219
|
+
border-color: var(--mj-brand-primary-hover);
|
|
220
|
+
}
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
/* ========== Button Group ========== */
|
|
224
|
+
.mj-btn-group {
|
|
225
|
+
display: inline-flex;
|
|
226
|
+
|
|
227
|
+
.mj-btn {
|
|
228
|
+
border-radius: 0;
|
|
229
|
+
|
|
230
|
+
&:first-child {
|
|
231
|
+
border-radius: var(--mj-radius-md) 0 0 var(--mj-radius-md);
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
&:last-child {
|
|
235
|
+
border-radius: 0 var(--mj-radius-md) var(--mj-radius-md) 0;
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
&:not(:first-child) {
|
|
239
|
+
margin-left: -1px;
|
|
240
|
+
}
|
|
241
|
+
}
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
/* ========== Touch targets ========== */
|
|
245
|
+
@media (pointer: coarse) {
|
|
246
|
+
.mj-btn--sm {
|
|
247
|
+
min-height: 44px;
|
|
248
|
+
padding: 10px 12px;
|
|
249
|
+
}
|
|
250
|
+
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Shared calendar utilities for mj-datepicker and mj-datetime-picker.
|
|
3
|
+
*/
|
|
4
|
+
export interface CalendarDay {
|
|
5
|
+
date: Date;
|
|
6
|
+
dayNumber: number;
|
|
7
|
+
isCurrentMonth: boolean;
|
|
8
|
+
isToday: boolean;
|
|
9
|
+
}
|
|
10
|
+
export declare const WEEK_DAYS: string[];
|
|
11
|
+
export declare const MONTH_NAMES: string[];
|
|
12
|
+
export declare function BuildCalendarWeeks(viewDate: Date): CalendarDay[][];
|
|
13
|
+
export declare function FormatDate(date: Date): string;
|
|
14
|
+
export declare function FormatDateTime(date: Date): string;
|
|
15
|
+
export declare function GetMonthYearLabel(date: Date): string;
|
|
16
|
+
//# sourceMappingURL=calendar-utils.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"calendar-utils.d.ts","sourceRoot":"","sources":["../../../src/lib/calendar/calendar-utils.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,IAAI,CAAC;IACX,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,OAAO,CAAC;IACxB,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,SAAS,UAA6C,CAAC;AACpE,eAAO,MAAM,WAAW,UAGvB,CAAC;AAEF,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,IAAI,GAAG,WAAW,EAAE,EAAE,CAmBlE;AAED,wBAAgB,UAAU,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,CAE7C;AAED,wBAAgB,cAAc,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,CAEjD;AAED,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,CAEpD"}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Shared calendar utilities for mj-datepicker and mj-datetime-picker.
|
|
3
|
+
*/
|
|
4
|
+
export const WEEK_DAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
|
|
5
|
+
export const MONTH_NAMES = [
|
|
6
|
+
'January', 'February', 'March', 'April', 'May', 'June',
|
|
7
|
+
'July', 'August', 'September', 'October', 'November', 'December'
|
|
8
|
+
];
|
|
9
|
+
export function BuildCalendarWeeks(viewDate) {
|
|
10
|
+
const year = viewDate.getFullYear();
|
|
11
|
+
const month = viewDate.getMonth();
|
|
12
|
+
const today = new Date();
|
|
13
|
+
today.setHours(0, 0, 0, 0);
|
|
14
|
+
const startDate = new Date(year, month, 1);
|
|
15
|
+
startDate.setDate(startDate.getDate() - startDate.getDay());
|
|
16
|
+
const weeks = [];
|
|
17
|
+
const current = new Date(startDate);
|
|
18
|
+
for (let w = 0; w < 6; w++) {
|
|
19
|
+
const week = [];
|
|
20
|
+
for (let d = 0; d < 7; d++) {
|
|
21
|
+
const date = new Date(current);
|
|
22
|
+
date.setHours(0, 0, 0, 0);
|
|
23
|
+
week.push({ date, dayNumber: date.getDate(), isCurrentMonth: date.getMonth() === month, isToday: date.getTime() === today.getTime() });
|
|
24
|
+
current.setDate(current.getDate() + 1);
|
|
25
|
+
}
|
|
26
|
+
weeks.push(week);
|
|
27
|
+
if (current.getMonth() !== month && current.getDay() === 0)
|
|
28
|
+
break;
|
|
29
|
+
}
|
|
30
|
+
return weeks;
|
|
31
|
+
}
|
|
32
|
+
export function FormatDate(date) {
|
|
33
|
+
return `${String(date.getMonth() + 1).padStart(2, '0')}/${String(date.getDate()).padStart(2, '0')}/${date.getFullYear()}`;
|
|
34
|
+
}
|
|
35
|
+
export function FormatDateTime(date) {
|
|
36
|
+
return `${FormatDate(date)} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
|
|
37
|
+
}
|
|
38
|
+
export function GetMonthYearLabel(date) {
|
|
39
|
+
return `${MONTH_NAMES[date.getMonth()]} ${date.getFullYear()}`;
|
|
40
|
+
}
|
|
41
|
+
//# sourceMappingURL=calendar-utils.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"calendar-utils.js","sourceRoot":"","sources":["../../../src/lib/calendar/calendar-utils.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Shared calendar utilities for mj-datepicker and mj-datetime-picker.\n */\n\nexport interface CalendarDay {\n date: Date;\n dayNumber: number;\n isCurrentMonth: boolean;\n isToday: boolean;\n}\n\nexport const WEEK_DAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];\nexport const MONTH_NAMES = [\n 'January', 'February', 'March', 'April', 'May', 'June',\n 'July', 'August', 'September', 'October', 'November', 'December'\n];\n\nexport function BuildCalendarWeeks(viewDate: Date): CalendarDay[][] {\n const year = viewDate.getFullYear();\n const month = viewDate.getMonth();\n const today = new Date(); today.setHours(0, 0, 0, 0);\n const startDate = new Date(year, month, 1);\n startDate.setDate(startDate.getDate() - startDate.getDay());\n const weeks: CalendarDay[][] = [];\n const current = new Date(startDate);\n for (let w = 0; w < 6; w++) {\n const week: CalendarDay[] = [];\n for (let d = 0; d < 7; d++) {\n const date = new Date(current); date.setHours(0, 0, 0, 0);\n week.push({ date, dayNumber: date.getDate(), isCurrentMonth: date.getMonth() === month, isToday: date.getTime() === today.getTime() });\n current.setDate(current.getDate() + 1);\n }\n weeks.push(week);\n if (current.getMonth() !== month && current.getDay() === 0) break;\n }\n return weeks;\n}\n\nexport function FormatDate(date: Date): string {\n return `${String(date.getMonth() + 1).padStart(2, '0')}/${String(date.getDate()).padStart(2, '0')}/${date.getFullYear()}`;\n}\n\nexport function FormatDateTime(date: Date): string {\n return `${FormatDate(date)} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;\n}\n\nexport function GetMonthYearLabel(date: Date): string {\n return `${MONTH_NAMES[date.getMonth()]} ${date.getFullYear()}`;\n}\n"]}
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
import { EventEmitter, ElementRef, TemplateRef, OnDestroy } from '@angular/core';
|
|
2
|
+
import { ControlValueAccessor } from '@angular/forms';
|
|
3
|
+
import { ConnectedPosition } from '@angular/cdk/overlay';
|
|
4
|
+
import * as i0 from "@angular/core";
|
|
5
|
+
/**
|
|
6
|
+
* mj-combobox — Editable dropdown with filtering and optional custom values.
|
|
7
|
+
*
|
|
8
|
+
* Replaces `<kendo-combobox>`. Unlike mj-dropdown, the trigger is a text input
|
|
9
|
+
* that filters the list as you type. When AllowCustom is true, typed text that
|
|
10
|
+
* doesn't match any item is emitted as the value.
|
|
11
|
+
*
|
|
12
|
+
* @example
|
|
13
|
+
* ```html
|
|
14
|
+
* <mj-combobox
|
|
15
|
+
* [Data]="categories"
|
|
16
|
+
* TextField="text"
|
|
17
|
+
* ValueField="value"
|
|
18
|
+
* [(ngModel)]="selectedCategory"
|
|
19
|
+
* [ValuePrimitive]="true"
|
|
20
|
+
* [AllowCustom]="true"
|
|
21
|
+
* [Filterable]="true"
|
|
22
|
+
* Placeholder="Select or enter new...">
|
|
23
|
+
* </mj-combobox>
|
|
24
|
+
* ```
|
|
25
|
+
*/
|
|
26
|
+
export declare class MJComboboxComponent implements ControlValueAccessor, OnDestroy {
|
|
27
|
+
set Data(value: Record<string, unknown>[] | string[] | readonly unknown[] | null);
|
|
28
|
+
get Data(): Record<string, unknown>[] | string[] | readonly unknown[] | null;
|
|
29
|
+
private _data;
|
|
30
|
+
TextField: string;
|
|
31
|
+
ValueField: string;
|
|
32
|
+
Filterable: boolean;
|
|
33
|
+
ValuePrimitive: boolean;
|
|
34
|
+
Disabled: boolean;
|
|
35
|
+
Placeholder: string;
|
|
36
|
+
AllowCustom: boolean;
|
|
37
|
+
ValueChange: EventEmitter<unknown>;
|
|
38
|
+
FilterChange: EventEmitter<string>;
|
|
39
|
+
ItemTemplate: TemplateRef<{
|
|
40
|
+
$implicit: unknown;
|
|
41
|
+
}> | null;
|
|
42
|
+
private triggerEl;
|
|
43
|
+
ComboInput: ElementRef<HTMLInputElement>;
|
|
44
|
+
readonly hostClass = true;
|
|
45
|
+
private cdr;
|
|
46
|
+
IsOpen: boolean;
|
|
47
|
+
IsDisabled: boolean;
|
|
48
|
+
HighlightedIndex: number;
|
|
49
|
+
SelectedValue: unknown;
|
|
50
|
+
TriggerWidth: number;
|
|
51
|
+
InputText: string;
|
|
52
|
+
Positions: ConnectedPosition[];
|
|
53
|
+
private onChange;
|
|
54
|
+
private onTouched;
|
|
55
|
+
private isBlurring;
|
|
56
|
+
get FilteredItems(): unknown[];
|
|
57
|
+
OnInput(event: Event): void;
|
|
58
|
+
OnFocus(): void;
|
|
59
|
+
OnToggleMouseDown(event: Event): void;
|
|
60
|
+
OnClear(event: Event): void;
|
|
61
|
+
OnInputBlur(): void;
|
|
62
|
+
Toggle(): void;
|
|
63
|
+
Open(): void;
|
|
64
|
+
Close(): void;
|
|
65
|
+
SelectItem(item: unknown, event?: Event): void;
|
|
66
|
+
/** Commit the current input text as a value (for AllowCustom or matching item) */
|
|
67
|
+
private CommitValue;
|
|
68
|
+
IsItemSelected(item: unknown): boolean;
|
|
69
|
+
OnKeyDown(event: KeyboardEvent): void;
|
|
70
|
+
GetItemText(item: unknown): string;
|
|
71
|
+
GetItemValue(item: unknown): unknown;
|
|
72
|
+
TrackByIndex(index: number): number;
|
|
73
|
+
writeValue(value: unknown): void;
|
|
74
|
+
registerOnChange(fn: (value: unknown) => void): void;
|
|
75
|
+
registerOnTouched(fn: () => void): void;
|
|
76
|
+
setDisabledState(isDisabled: boolean): void;
|
|
77
|
+
ngOnDestroy(): void;
|
|
78
|
+
private getDisplayText;
|
|
79
|
+
private getSelectedIndex;
|
|
80
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<MJComboboxComponent, never>;
|
|
81
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<MJComboboxComponent, "mj-combobox", never, { "Data": { "alias": "Data"; "required": false; }; "TextField": { "alias": "TextField"; "required": false; }; "ValueField": { "alias": "ValueField"; "required": false; }; "Filterable": { "alias": "Filterable"; "required": false; }; "ValuePrimitive": { "alias": "ValuePrimitive"; "required": false; }; "Disabled": { "alias": "Disabled"; "required": false; }; "Placeholder": { "alias": "Placeholder"; "required": false; }; "AllowCustom": { "alias": "AllowCustom"; "required": false; }; }, { "ValueChange": "ValueChange"; "FilterChange": "FilterChange"; }, ["ItemTemplate"], never, true, never>;
|
|
82
|
+
}
|
|
83
|
+
//# sourceMappingURL=combobox.component.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"combobox.component.d.ts","sourceRoot":"","sources":["../../../src/lib/combobox/combobox.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,YAAY,EAGZ,UAAU,EAGV,WAAW,EACX,SAAS,EAGV,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAqB,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AACzE,OAAO,EAAiB,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;;AAExE;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBAqFa,mBAAoB,YAAW,oBAAoB,EAAE,SAAS;IACzE,IACI,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,GAAG,MAAM,EAAE,GAAG,SAAS,OAAO,EAAE,GAAG,IAAI,EAM/E;IACD,IAAI,IAAI,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,GAAG,MAAM,EAAE,GAAG,SAAS,OAAO,EAAE,GAAG,IAAI,CAAuB;IACnG,OAAO,CAAC,KAAK,CAAwE;IAC5E,SAAS,SAAM;IACf,UAAU,SAAM;IAChB,UAAU,UAAQ;IAClB,cAAc,UAAS;IACvB,QAAQ,UAAS;IACjB,WAAW,SAAM;IACjB,WAAW,UAAS;IAEnB,WAAW,wBAA+B;IAC1C,YAAY,uBAA8B;IAEpB,YAAY,EAAE,WAAW,CAAC;QAAE,SAAS,EAAE,OAAO,CAAA;KAAE,CAAC,GAAG,IAAI,CAAQ;IAE1E,OAAO,CAAC,SAAS,CAA2B;IACzC,UAAU,EAAG,UAAU,CAAC,gBAAgB,CAAC,CAAC;IAE5B,QAAQ,CAAC,SAAS,QAAQ;IAEjE,OAAO,CAAC,GAAG,CAA6B;IAExC,MAAM,UAAS;IACf,UAAU,UAAS;IACnB,gBAAgB,SAAM;IACtB,aAAa,EAAE,OAAO,CAAQ;IAC9B,YAAY,SAAK;IACjB,SAAS,SAAM;IAEf,SAAS,EAAE,iBAAiB,EAAE,CAG5B;IAEF,OAAO,CAAC,QAAQ,CAAsC;IACtD,OAAO,CAAC,SAAS,CAAwB;IACzC,OAAO,CAAC,UAAU,CAAS;IAE3B,IAAI,aAAa,IAAI,OAAO,EAAE,CAK7B;IAED,OAAO,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAQ3B,OAAO,IAAI,IAAI;IAIf,iBAAiB,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAKrC,OAAO,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAY3B,WAAW,IAAI,IAAI;IAWnB,MAAM,IAAI,IAAI;IAKd,IAAI,IAAI,IAAI;IAQZ,KAAK,IAAI,IAAI;IAOb,UAAU,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,EAAE,KAAK,GAAG,IAAI;IAc9C,kFAAkF;IAClF,OAAO,CAAC,WAAW;IAiCnB,cAAc,CAAC,IAAI,EAAE,OAAO,GAAG,OAAO;IAQtC,SAAS,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IA6BrC,WAAW,CAAC,IAAI,EAAE,OAAO,GAAG,MAAM;IAOlC,YAAY,CAAC,IAAI,EAAE,OAAO,GAAG,OAAO;IAMpC,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM;IAEnC,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAKhC,gBAAgB,CAAC,EAAE,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,GAAG,IAAI;IACpD,iBAAiB,CAAC,EAAE,EAAE,MAAM,IAAI,GAAG,IAAI;IACvC,gBAAgB,CAAC,UAAU,EAAE,OAAO,GAAG,IAAI;IAC3C,WAAW,IAAI,IAAI;IAEnB,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,gBAAgB;yCA1Ob,mBAAmB;2CAAnB,mBAAmB;CA8O/B"}
|