@egose/shadcn-theme-ng 0.0.25 → 0.0.27
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/LICENSE +201 -0
- package/README.md +107 -2
- package/alert/fesm2022/alert.mjs +19 -19
- package/alert/fesm2022/alert.mjs.map +1 -1
- package/badge/fesm2022/badge.mjs +4 -4
- package/badge/fesm2022/badge.mjs.map +1 -1
- package/basic-alert/fesm2022/basic-alert.mjs +4 -4
- package/basic-alert/fesm2022/basic-alert.mjs.map +1 -1
- package/button/fesm2022/button.mjs +8 -8
- package/button/fesm2022/button.mjs.map +1 -1
- package/calendar/fesm2022/calendar.mjs +16 -16
- package/calendar/fesm2022/calendar.mjs.map +1 -1
- package/date-picker/fesm2022/date-picker.mjs +19 -19
- package/date-picker/fesm2022/date-picker.mjs.map +1 -1
- package/form-date-picker/fesm2022/form-date-picker.mjs +4 -4
- package/form-date-picker/fesm2022/form-date-picker.mjs.map +1 -1
- package/form-field/fesm2022/form-field.mjs +16 -16
- package/form-field/fesm2022/form-field.mjs.map +1 -1
- package/form-field-simple/fesm2022/form-field-simple.mjs +4 -4
- package/form-field-simple/fesm2022/form-field-simple.mjs.map +1 -1
- package/form-select/fesm2022/form-select.mjs +5 -5
- package/form-select/fesm2022/form-select.mjs.map +1 -1
- package/form-text-input/fesm2022/form-text-input.mjs +8 -8
- package/form-text-input/fesm2022/form-text-input.mjs.map +1 -1
- package/form-textarea/fesm2022/form-textarea.mjs +4 -4
- package/form-textarea/fesm2022/form-textarea.mjs.map +1 -1
- package/icon/fesm2022/icon.mjs +8 -8
- package/icon/fesm2022/icon.mjs.map +1 -1
- package/input/fesm2022/input.mjs +8 -8
- package/input/fesm2022/input.mjs.map +1 -1
- package/label/fesm2022/label.mjs +8 -8
- package/label/fesm2022/label.mjs.map +1 -1
- package/package.json +7 -57
- package/popover/fesm2022/popover.mjs +12 -12
- package/popover/fesm2022/popover.mjs.map +1 -1
- package/select/fesm2022/select.mjs +40 -40
- package/select/fesm2022/select.mjs.map +1 -1
- package/separator/fesm2022/separator.mjs +8 -8
- package/separator/fesm2022/separator.mjs.map +1 -1
- package/sheet/fesm2022/sheet.mjs +36 -37
- package/sheet/fesm2022/sheet.mjs.map +1 -1
- package/sonner/fesm2022/sonner.mjs +8 -8
- package/sonner/fesm2022/sonner.mjs.map +1 -1
- package/spinner/fesm2022/spinner.mjs +8 -8
- package/spinner/fesm2022/spinner.mjs.map +1 -1
- package/switch/fesm2022/switch.mjs +12 -12
- package/switch/fesm2022/switch.mjs.map +1 -1
- package/accordion/README.md +0 -64
- package/accordion/fesm2022/accordion.mjs +0 -155
- package/accordion/fesm2022/accordion.mjs.map +0 -1
- package/accordion/index.d.ts +0 -49
- package/autocomplete/README.md +0 -64
- package/autocomplete/fesm2022/autocomplete.mjs +0 -543
- package/autocomplete/fesm2022/autocomplete.mjs.map +0 -1
- package/autocomplete/index.d.ts +0 -162
- package/checkbox/README.md +0 -64
- package/checkbox/fesm2022/checkbox.mjs +0 -146
- package/checkbox/fesm2022/checkbox.mjs.map +0 -1
- package/checkbox/index.d.ts +0 -55
- package/confirmation-dialog/README.md +0 -64
- package/confirmation-dialog/fesm2022/confirmation-dialog.mjs +0 -93
- package/confirmation-dialog/fesm2022/confirmation-dialog.mjs.map +0 -1
- package/confirmation-dialog/index.d.ts +0 -24
- package/dialog/README.md +0 -64
- package/dialog/fesm2022/dialog.mjs +0 -278
- package/dialog/fesm2022/dialog.mjs.map +0 -1
- package/dialog/index.d.ts +0 -89
- package/exports.json +0 -1
- package/form-checkbox/README.md +0 -64
- package/form-checkbox/fesm2022/form-checkbox.mjs +0 -137
- package/form-checkbox/fesm2022/form-checkbox.mjs.map +0 -1
- package/form-checkbox/index.d.ts +0 -27
- package/form-searchable-multiselect/README.md +0 -64
- package/form-searchable-multiselect/fesm2022/form-searchable-multiselect.mjs +0 -139
- package/form-searchable-multiselect/fesm2022/form-searchable-multiselect.mjs.map +0 -1
- package/form-searchable-multiselect/index.d.ts +0 -30
- package/layout-simple/README.md +0 -64
- package/layout-simple/fesm2022/layout-simple.mjs +0 -591
- package/layout-simple/fesm2022/layout-simple.mjs.map +0 -1
- package/layout-simple/index.d.ts +0 -140
- package/menu/README.md +0 -64
- package/menu/fesm2022/menu.mjs +0 -449
- package/menu/fesm2022/menu.mjs.map +0 -1
- package/menu/index.d.ts +0 -137
- package/radio-group/README.md +0 -64
- package/radio-group/fesm2022/radio-group.mjs +0 -170
- package/radio-group/fesm2022/radio-group.mjs.map +0 -1
- package/radio-group/index.d.ts +0 -63
- package/searchable-multiselect/README.md +0 -64
- package/searchable-multiselect/fesm2022/searchable-multiselect.mjs +0 -221
- package/searchable-multiselect/fesm2022/searchable-multiselect.mjs.map +0 -1
- package/searchable-multiselect/index.d.ts +0 -50
- package/tabs/README.md +0 -64
- package/tabs/fesm2022/tabs.mjs +0 -258
- package/tabs/fesm2022/tabs.mjs.map +0 -1
- package/tabs/index.d.ts +0 -71
- package/tooltip/README.md +0 -64
- package/tooltip/fesm2022/tooltip.mjs +0 -93
- package/tooltip/fesm2022/tooltip.mjs.map +0 -1
- package/tooltip/index.d.ts +0 -21
|
@@ -1,221 +0,0 @@
|
|
|
1
|
-
import * as i0 from '@angular/core';
|
|
2
|
-
import { viewChild, input, output, signal, computed, effect, forwardRef, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
-
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
4
|
-
import { HlmAutocomplete } from '@egose/shadcn-theme-ng/autocomplete';
|
|
5
|
-
|
|
6
|
-
class EgSearchableMultiselect {
|
|
7
|
-
autoComplete = viewChild(HlmAutocomplete, ...(ngDevMode ? [{ debugName: "autoComplete" }] : []));
|
|
8
|
-
/** Full option list with labels/values */
|
|
9
|
-
options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
|
|
10
|
-
placeholder = input('Start typing to add…', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
|
|
11
|
-
/** Value: array of selected values (string[]) */
|
|
12
|
-
value = input([], ...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
13
|
-
valueChange = output(); // emits string[] of values
|
|
14
|
-
/** Internal state */
|
|
15
|
-
search = signal('', ...(ngDevMode ? [{ debugName: "search" }] : []));
|
|
16
|
-
selectedItems = signal([], ...(ngDevMode ? [{ debugName: "selectedItems" }] : [])); // full objects for display
|
|
17
|
-
isDisabled = false;
|
|
18
|
-
isFormBound = false;
|
|
19
|
-
/** Filtered **labels** for hlm-autocomplete */
|
|
20
|
-
filteredOptionLabels = computed(() => (this.options() || [])
|
|
21
|
-
.filter((opt) => opt.label.toLowerCase().includes(this.search().toLowerCase()) &&
|
|
22
|
-
!this.selectedItems().some((sel) => sel.value === opt.value))
|
|
23
|
-
.map((opt) => opt.label), ...(ngDevMode ? [{ debugName: "filteredOptionLabels" }] : []));
|
|
24
|
-
/** Form callbacks */
|
|
25
|
-
onChange = () => { };
|
|
26
|
-
onTouched = () => { };
|
|
27
|
-
constructor() {
|
|
28
|
-
// Sync `value` input to selectedItems for standalone usage
|
|
29
|
-
effect(() => {
|
|
30
|
-
if (!this.isFormBound) {
|
|
31
|
-
this.updateSelectedFromValues(this.value() || []);
|
|
32
|
-
}
|
|
33
|
-
});
|
|
34
|
-
}
|
|
35
|
-
/** Add by label string (from autocomplete) */
|
|
36
|
-
addItemByLabel(label) {
|
|
37
|
-
const opt = this.options()?.find((o) => o.label === label);
|
|
38
|
-
if (opt) {
|
|
39
|
-
this.addItem(opt.value);
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
/** Add by value string */
|
|
43
|
-
addItem(value) {
|
|
44
|
-
if (!this.selectedItems().some((sel) => sel.value === value)) {
|
|
45
|
-
const opt = this.options()?.find((o) => o.value === value);
|
|
46
|
-
if (!opt)
|
|
47
|
-
return;
|
|
48
|
-
const updatedItems = [...this.selectedItems(), opt];
|
|
49
|
-
this.updateValueFromSelected(updatedItems);
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
/** Remove by value string */
|
|
53
|
-
removeItem(value) {
|
|
54
|
-
const updatedItems = this.selectedItems().filter((i) => i.value !== value);
|
|
55
|
-
this.updateValueFromSelected(updatedItems);
|
|
56
|
-
}
|
|
57
|
-
/** Clear autocomplete text */
|
|
58
|
-
clearAutocompleteText() {
|
|
59
|
-
this.autoComplete()?.clearText();
|
|
60
|
-
if (this.options().length === this.selectedItems().length) {
|
|
61
|
-
this.autoComplete()?.setPopoverState('closed');
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
handleSelect(label) {
|
|
65
|
-
this.clearAutocompleteText();
|
|
66
|
-
}
|
|
67
|
-
/** Map string[] values → full objects */
|
|
68
|
-
updateSelectedFromValues(values) {
|
|
69
|
-
const opts = this.options() || [];
|
|
70
|
-
const matched = opts.filter((o) => values.includes(o.value));
|
|
71
|
-
this.selectedItems.set(matched);
|
|
72
|
-
}
|
|
73
|
-
/** Map full objects → string[] values and emit */
|
|
74
|
-
updateValueFromSelected(items) {
|
|
75
|
-
this.selectedItems.set(items);
|
|
76
|
-
const values = items.map((i) => i.value);
|
|
77
|
-
this.valueChange.emit(values);
|
|
78
|
-
this.onChange(values);
|
|
79
|
-
this.onTouched();
|
|
80
|
-
}
|
|
81
|
-
// --- ControlValueAccessor ---
|
|
82
|
-
writeValue(values) {
|
|
83
|
-
this.isFormBound = true;
|
|
84
|
-
this.updateSelectedFromValues(values || []);
|
|
85
|
-
}
|
|
86
|
-
registerOnChange(fn) {
|
|
87
|
-
this.onChange = fn;
|
|
88
|
-
}
|
|
89
|
-
registerOnTouched(fn) {
|
|
90
|
-
this.onTouched = fn;
|
|
91
|
-
}
|
|
92
|
-
setDisabledState(isDisabled) {
|
|
93
|
-
this.isDisabled = isDisabled;
|
|
94
|
-
}
|
|
95
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: EgSearchableMultiselect, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
96
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: EgSearchableMultiselect, isStandalone: true, selector: "eg-searchable-multiselect", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, providers: [
|
|
97
|
-
{
|
|
98
|
-
provide: NG_VALUE_ACCESSOR,
|
|
99
|
-
useExisting: forwardRef(() => EgSearchableMultiselect),
|
|
100
|
-
multi: true,
|
|
101
|
-
},
|
|
102
|
-
], viewQueries: [{ propertyName: "autoComplete", first: true, predicate: HlmAutocomplete, descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
103
|
-
<div class="flex flex-col gap-2 w-full">
|
|
104
|
-
<!-- Selected items -->
|
|
105
|
-
<div
|
|
106
|
-
class="flex gap-2 overflow-x-auto whitespace-nowrap
|
|
107
|
-
[scrollbar-width:none] [-ms-overflow-style:none]
|
|
108
|
-
[&::-webkit-scrollbar]:hidden"
|
|
109
|
-
>
|
|
110
|
-
@if (selectedItems().length === 0) {
|
|
111
|
-
<span
|
|
112
|
-
class="bg-gray-100 text-gray-400 rounded-full
|
|
113
|
-
px-2 py-1 inline-flex items-center text-xs"
|
|
114
|
-
>
|
|
115
|
-
{{ placeholder() }}
|
|
116
|
-
</span>
|
|
117
|
-
} @else {
|
|
118
|
-
@for (item of selectedItems(); track item.value) {
|
|
119
|
-
<span
|
|
120
|
-
class="bg-gray-200 rounded-full px-2 py-1
|
|
121
|
-
inline-flex items-center gap-2 text-xs"
|
|
122
|
-
>
|
|
123
|
-
{{ item.label }}
|
|
124
|
-
<button
|
|
125
|
-
type="button"
|
|
126
|
-
(click)="removeItem(item.value)"
|
|
127
|
-
class="bg-transparent border-0 text-gray-600
|
|
128
|
-
hover:text-red-500 cursor-pointer"
|
|
129
|
-
>
|
|
130
|
-
✕
|
|
131
|
-
</button>
|
|
132
|
-
</span>
|
|
133
|
-
}
|
|
134
|
-
}
|
|
135
|
-
</div>
|
|
136
|
-
|
|
137
|
-
<!-- Autocomplete -->
|
|
138
|
-
<hlm-autocomplete
|
|
139
|
-
[filteredOptions]="filteredOptionLabels()"
|
|
140
|
-
[(search)]="search"
|
|
141
|
-
(valueChange)="addItemByLabel($event)"
|
|
142
|
-
[searchPlaceholderText]="this.selectedItems().length.toString() + ' of ' + this.options().length + ' selected'"
|
|
143
|
-
[onSelect]="handleSelect.bind(this)"
|
|
144
|
-
[disabled]="isDisabled"
|
|
145
|
-
/>
|
|
146
|
-
</div>
|
|
147
|
-
`, isInline: true, dependencies: [{ kind: "component", type: HlmAutocomplete, selector: "hlm-autocomplete", inputs: ["onSelect", "class", "autocompleteListClass", "autocompleteEmptyClass", "filteredOptions", "value", "search", "transformValueToSearch", "optionTemplate", "loading", "searchPlaceholderText", "loadingText", "emptyText", "ariaLabelToggleButton", "inputId", "disabled"], outputs: ["valueChange", "searchChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
148
|
-
}
|
|
149
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: EgSearchableMultiselect, decorators: [{
|
|
150
|
-
type: Component,
|
|
151
|
-
args: [{
|
|
152
|
-
selector: 'eg-searchable-multiselect',
|
|
153
|
-
standalone: true,
|
|
154
|
-
imports: [HlmAutocomplete],
|
|
155
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
156
|
-
providers: [
|
|
157
|
-
{
|
|
158
|
-
provide: NG_VALUE_ACCESSOR,
|
|
159
|
-
useExisting: forwardRef(() => EgSearchableMultiselect),
|
|
160
|
-
multi: true,
|
|
161
|
-
},
|
|
162
|
-
],
|
|
163
|
-
template: `
|
|
164
|
-
<div class="flex flex-col gap-2 w-full">
|
|
165
|
-
<!-- Selected items -->
|
|
166
|
-
<div
|
|
167
|
-
class="flex gap-2 overflow-x-auto whitespace-nowrap
|
|
168
|
-
[scrollbar-width:none] [-ms-overflow-style:none]
|
|
169
|
-
[&::-webkit-scrollbar]:hidden"
|
|
170
|
-
>
|
|
171
|
-
@if (selectedItems().length === 0) {
|
|
172
|
-
<span
|
|
173
|
-
class="bg-gray-100 text-gray-400 rounded-full
|
|
174
|
-
px-2 py-1 inline-flex items-center text-xs"
|
|
175
|
-
>
|
|
176
|
-
{{ placeholder() }}
|
|
177
|
-
</span>
|
|
178
|
-
} @else {
|
|
179
|
-
@for (item of selectedItems(); track item.value) {
|
|
180
|
-
<span
|
|
181
|
-
class="bg-gray-200 rounded-full px-2 py-1
|
|
182
|
-
inline-flex items-center gap-2 text-xs"
|
|
183
|
-
>
|
|
184
|
-
{{ item.label }}
|
|
185
|
-
<button
|
|
186
|
-
type="button"
|
|
187
|
-
(click)="removeItem(item.value)"
|
|
188
|
-
class="bg-transparent border-0 text-gray-600
|
|
189
|
-
hover:text-red-500 cursor-pointer"
|
|
190
|
-
>
|
|
191
|
-
✕
|
|
192
|
-
</button>
|
|
193
|
-
</span>
|
|
194
|
-
}
|
|
195
|
-
}
|
|
196
|
-
</div>
|
|
197
|
-
|
|
198
|
-
<!-- Autocomplete -->
|
|
199
|
-
<hlm-autocomplete
|
|
200
|
-
[filteredOptions]="filteredOptionLabels()"
|
|
201
|
-
[(search)]="search"
|
|
202
|
-
(valueChange)="addItemByLabel($event)"
|
|
203
|
-
[searchPlaceholderText]="this.selectedItems().length.toString() + ' of ' + this.options().length + ' selected'"
|
|
204
|
-
[onSelect]="handleSelect.bind(this)"
|
|
205
|
-
[disabled]="isDisabled"
|
|
206
|
-
/>
|
|
207
|
-
</div>
|
|
208
|
-
`,
|
|
209
|
-
}]
|
|
210
|
-
}], ctorParameters: () => [] });
|
|
211
|
-
|
|
212
|
-
/*
|
|
213
|
-
* Public API Surface of searchable-multiselect
|
|
214
|
-
*/
|
|
215
|
-
|
|
216
|
-
/**
|
|
217
|
-
* Generated bundle index. Do not edit.
|
|
218
|
-
*/
|
|
219
|
-
|
|
220
|
-
export { EgSearchableMultiselect };
|
|
221
|
-
//# sourceMappingURL=searchable-multiselect.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"searchable-multiselect.mjs","sources":["../../../projects/searchable-multiselect/src/lib/searchable-multiselect.ts","../../../projects/searchable-multiselect/src/public-api.ts","../../../projects/searchable-multiselect/src/searchable-multiselect.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n computed,\n signal,\n input,\n output,\n viewChild,\n effect,\n forwardRef,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { HlmAutocomplete } from '@egose/shadcn-theme-ng/autocomplete';\n\nexport interface SelectOption {\n label: string;\n value: string;\n}\n\n@Component({\n selector: 'eg-searchable-multiselect',\n standalone: true,\n imports: [HlmAutocomplete],\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => EgSearchableMultiselect),\n multi: true,\n },\n ],\n template: `\n <div class=\"tw:flex tw:flex-col tw:gap-2 tw:w-full\">\n <!-- Selected items -->\n <div\n class=\"tw:flex tw:gap-2 tw:overflow-x-auto tw:whitespace-nowrap\n tw:[scrollbar-width:none] tw:[-ms-overflow-style:none]\n tw:[&::-webkit-scrollbar]:hidden\"\n >\n @if (selectedItems().length === 0) {\n <span\n class=\"tw:bg-gray-100 tw:text-gray-400 tw:rounded-full\n tw:px-2 tw:py-1 tw:inline-flex tw:items-center tw:text-xs\"\n >\n {{ placeholder() }}\n </span>\n } @else {\n @for (item of selectedItems(); track item.value) {\n <span\n class=\"tw:bg-gray-200 tw:rounded-full tw:px-2 tw:py-1\n tw:inline-flex tw:items-center tw:gap-2 tw:text-xs\"\n >\n {{ item.label }}\n <button\n type=\"button\"\n (click)=\"removeItem(item.value)\"\n class=\"tw:bg-transparent tw:border-0 tw:text-gray-600\n tw:hover:text-red-500 tw:cursor-pointer\"\n >\n ✕\n </button>\n </span>\n }\n }\n </div>\n\n <!-- Autocomplete -->\n <hlm-autocomplete\n [filteredOptions]=\"filteredOptionLabels()\"\n [(search)]=\"search\"\n (valueChange)=\"addItemByLabel($event)\"\n [searchPlaceholderText]=\"this.selectedItems().length.toString() + ' of ' + this.options().length + ' selected'\"\n [onSelect]=\"handleSelect.bind(this)\"\n [disabled]=\"isDisabled\"\n />\n </div>\n `,\n})\nexport class EgSearchableMultiselect implements ControlValueAccessor {\n autoComplete = viewChild(HlmAutocomplete);\n\n /** Full option list with labels/values */\n options = input<SelectOption[]>([]);\n placeholder = input<string>('Start typing to add…');\n\n /** Value: array of selected values (string[]) */\n value = input<string[]>([]);\n valueChange = output<string[]>(); // emits string[] of values\n\n /** Internal state */\n search = signal<string>('');\n selectedItems = signal<SelectOption[]>([]); // full objects for display\n isDisabled = false;\n private isFormBound = false;\n\n /** Filtered **labels** for hlm-autocomplete */\n filteredOptionLabels = computed(\n () =>\n (this.options() || [])\n .filter(\n (opt) =>\n opt.label.toLowerCase().includes(this.search().toLowerCase()) &&\n !this.selectedItems().some((sel) => sel.value === opt.value),\n )\n .map((opt) => opt.label), // convert to string[] for hlm-autocomplete\n );\n\n /** Form callbacks */\n private onChange: (value: string[]) => void = () => {};\n private onTouched: () => void = () => {};\n\n constructor() {\n // Sync `value` input to selectedItems for standalone usage\n effect(() => {\n if (!this.isFormBound) {\n this.updateSelectedFromValues(this.value() || []);\n }\n });\n }\n\n /** Add by label string (from autocomplete) */\n addItemByLabel(label: string) {\n const opt = this.options()?.find((o) => o.label === label);\n if (opt) {\n this.addItem(opt.value);\n }\n }\n\n /** Add by value string */\n addItem(value: string) {\n if (!this.selectedItems().some((sel) => sel.value === value)) {\n const opt = this.options()?.find((o) => o.value === value);\n if (!opt) return;\n const updatedItems = [...this.selectedItems(), opt];\n this.updateValueFromSelected(updatedItems);\n }\n }\n\n /** Remove by value string */\n removeItem(value: string) {\n const updatedItems = this.selectedItems().filter((i) => i.value !== value);\n this.updateValueFromSelected(updatedItems);\n }\n\n /** Clear autocomplete text */\n clearAutocompleteText() {\n this.autoComplete()?.clearText();\n\n if (this.options().length === this.selectedItems().length) {\n this.autoComplete()?.setPopoverState('closed');\n }\n }\n\n handleSelect(label: string) {\n this.clearAutocompleteText();\n }\n\n /** Map string[] values → full objects */\n private updateSelectedFromValues(values: string[]) {\n const opts = this.options() || [];\n const matched = opts.filter((o) => values.includes(o.value));\n this.selectedItems.set(matched);\n }\n\n /** Map full objects → string[] values and emit */\n private updateValueFromSelected(items: SelectOption[]) {\n this.selectedItems.set(items);\n const values = items.map((i) => i.value);\n this.valueChange.emit(values);\n this.onChange(values);\n this.onTouched();\n }\n\n // --- ControlValueAccessor ---\n writeValue(values: string[] | null): void {\n this.isFormBound = true;\n this.updateSelectedFromValues(values || []);\n }\n\n registerOnChange(fn: (value: string[]) => void): void {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n\n setDisabledState(isDisabled: boolean): void {\n this.isDisabled = isDisabled;\n }\n}\n","/*\n * Public API Surface of searchable-multiselect\n */\n\nexport * from './lib/searchable-multiselect';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
import * as _angular_core from '@angular/core';
|
|
2
|
-
import { ControlValueAccessor } from '@angular/forms';
|
|
3
|
-
import { HlmAutocomplete } from '@egose/shadcn-theme-ng/autocomplete';
|
|
4
|
-
|
|
5
|
-
interface SelectOption {
|
|
6
|
-
label: string;
|
|
7
|
-
value: string;
|
|
8
|
-
}
|
|
9
|
-
declare class EgSearchableMultiselect implements ControlValueAccessor {
|
|
10
|
-
autoComplete: _angular_core.Signal<HlmAutocomplete<any> | undefined>;
|
|
11
|
-
/** Full option list with labels/values */
|
|
12
|
-
options: _angular_core.InputSignal<SelectOption[]>;
|
|
13
|
-
placeholder: _angular_core.InputSignal<string>;
|
|
14
|
-
/** Value: array of selected values (string[]) */
|
|
15
|
-
value: _angular_core.InputSignal<string[]>;
|
|
16
|
-
valueChange: _angular_core.OutputEmitterRef<string[]>;
|
|
17
|
-
/** Internal state */
|
|
18
|
-
search: _angular_core.WritableSignal<string>;
|
|
19
|
-
selectedItems: _angular_core.WritableSignal<SelectOption[]>;
|
|
20
|
-
isDisabled: boolean;
|
|
21
|
-
private isFormBound;
|
|
22
|
-
/** Filtered **labels** for hlm-autocomplete */
|
|
23
|
-
filteredOptionLabels: _angular_core.Signal<string[]>;
|
|
24
|
-
/** Form callbacks */
|
|
25
|
-
private onChange;
|
|
26
|
-
private onTouched;
|
|
27
|
-
constructor();
|
|
28
|
-
/** Add by label string (from autocomplete) */
|
|
29
|
-
addItemByLabel(label: string): void;
|
|
30
|
-
/** Add by value string */
|
|
31
|
-
addItem(value: string): void;
|
|
32
|
-
/** Remove by value string */
|
|
33
|
-
removeItem(value: string): void;
|
|
34
|
-
/** Clear autocomplete text */
|
|
35
|
-
clearAutocompleteText(): void;
|
|
36
|
-
handleSelect(label: string): void;
|
|
37
|
-
/** Map string[] values → full objects */
|
|
38
|
-
private updateSelectedFromValues;
|
|
39
|
-
/** Map full objects → string[] values and emit */
|
|
40
|
-
private updateValueFromSelected;
|
|
41
|
-
writeValue(values: string[] | null): void;
|
|
42
|
-
registerOnChange(fn: (value: string[]) => void): void;
|
|
43
|
-
registerOnTouched(fn: () => void): void;
|
|
44
|
-
setDisabledState(isDisabled: boolean): void;
|
|
45
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<EgSearchableMultiselect, never>;
|
|
46
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<EgSearchableMultiselect, "eg-searchable-multiselect", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
export { EgSearchableMultiselect };
|
|
50
|
-
export type { SelectOption };
|
package/tabs/README.md
DELETED
|
@@ -1,64 +0,0 @@
|
|
|
1
|
-
# Tabs
|
|
2
|
-
|
|
3
|
-
This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.2.0.
|
|
4
|
-
|
|
5
|
-
## Code scaffolding
|
|
6
|
-
|
|
7
|
-
Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
|
|
8
|
-
|
|
9
|
-
```bash
|
|
10
|
-
ng generate component component-name
|
|
11
|
-
```
|
|
12
|
-
|
|
13
|
-
For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
|
|
14
|
-
|
|
15
|
-
```bash
|
|
16
|
-
ng generate --help
|
|
17
|
-
```
|
|
18
|
-
|
|
19
|
-
## Building
|
|
20
|
-
|
|
21
|
-
To build the library, run:
|
|
22
|
-
|
|
23
|
-
```bash
|
|
24
|
-
ng build tabs
|
|
25
|
-
```
|
|
26
|
-
|
|
27
|
-
This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
|
|
28
|
-
|
|
29
|
-
### Publishing the Library
|
|
30
|
-
|
|
31
|
-
Once the project is built, you can publish your library by following these steps:
|
|
32
|
-
|
|
33
|
-
1. Navigate to the `dist` directory:
|
|
34
|
-
|
|
35
|
-
```bash
|
|
36
|
-
cd dist/tabs
|
|
37
|
-
```
|
|
38
|
-
|
|
39
|
-
2. Run the `npm publish` command to publish your library to the npm registry:
|
|
40
|
-
```bash
|
|
41
|
-
npm publish
|
|
42
|
-
```
|
|
43
|
-
|
|
44
|
-
## Running unit tests
|
|
45
|
-
|
|
46
|
-
To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
|
|
47
|
-
|
|
48
|
-
```bash
|
|
49
|
-
ng test
|
|
50
|
-
```
|
|
51
|
-
|
|
52
|
-
## Running end-to-end tests
|
|
53
|
-
|
|
54
|
-
For end-to-end (e2e) testing, run:
|
|
55
|
-
|
|
56
|
-
```bash
|
|
57
|
-
ng e2e
|
|
58
|
-
```
|
|
59
|
-
|
|
60
|
-
Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
|
|
61
|
-
|
|
62
|
-
## Additional Resources
|
|
63
|
-
|
|
64
|
-
For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
|
package/tabs/fesm2022/tabs.mjs
DELETED
|
@@ -1,258 +0,0 @@
|
|
|
1
|
-
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, computed, ChangeDetectionStrategy, Component, Directive, contentChildren, viewChild, NgModule } from '@angular/core';
|
|
3
|
-
import * as i1 from '@spartan-ng/brain/tabs';
|
|
4
|
-
import { BrnTabs, BrnTabsContent, BrnTabsList, BrnTabsPaginatedList, BrnTabsTrigger } from '@spartan-ng/brain/tabs';
|
|
5
|
-
import { hlm } from '@egose/shadcn-theme-ng/utils';
|
|
6
|
-
import { cva } from 'class-variance-authority';
|
|
7
|
-
import { CdkObserveContent } from '@angular/cdk/observers';
|
|
8
|
-
import { toObservable } from '@angular/core/rxjs-interop';
|
|
9
|
-
import { NgIcon, provideIcons } from '@ng-icons/core';
|
|
10
|
-
import { lucideChevronLeft, lucideChevronRight } from '@ng-icons/lucide';
|
|
11
|
-
import { buttonVariants } from '@egose/shadcn-theme-ng/button';
|
|
12
|
-
import { HlmIcon } from '@egose/shadcn-theme-ng/icon';
|
|
13
|
-
|
|
14
|
-
class HlmTabs {
|
|
15
|
-
tab = input.required(...(ngDevMode ? [{ debugName: "tab" }] : []));
|
|
16
|
-
userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
|
|
17
|
-
_computedClass = computed(() => hlm('flex flex-col gap-2', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
|
|
18
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmTabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
19
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.1", type: HlmTabs, isStandalone: true, selector: "hlm-tabs", inputs: { tab: { classPropertyName: "tab", publicName: "tab", isSignal: true, isRequired: true, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, hostDirectives: [{ directive: i1.BrnTabs, inputs: ["orientation", "orientation", "direction", "direction", "activationMode", "activationMode", "brnTabs", "tab"], outputs: ["tabActivated", "tabActivated"] }], ngImport: i0, template: '<ng-content/>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
20
|
-
}
|
|
21
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmTabs, decorators: [{
|
|
22
|
-
type: Component,
|
|
23
|
-
args: [{
|
|
24
|
-
selector: 'hlm-tabs',
|
|
25
|
-
hostDirectives: [
|
|
26
|
-
{
|
|
27
|
-
directive: BrnTabs,
|
|
28
|
-
inputs: ['orientation', 'direction', 'activationMode', 'brnTabs: tab'],
|
|
29
|
-
outputs: ['tabActivated'],
|
|
30
|
-
},
|
|
31
|
-
],
|
|
32
|
-
template: '<ng-content/>',
|
|
33
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
34
|
-
host: {
|
|
35
|
-
'[class]': '_computedClass()',
|
|
36
|
-
},
|
|
37
|
-
}]
|
|
38
|
-
}] });
|
|
39
|
-
|
|
40
|
-
class HlmTabsContent {
|
|
41
|
-
contentFor = input.required(...(ngDevMode ? [{ debugName: "contentFor", alias: 'hlmTabsContent' }] : [{ alias: 'hlmTabsContent' }]));
|
|
42
|
-
userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
|
|
43
|
-
_computedClass = computed(() => hlm('ring-offset-background focus-visible:ring-ring mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
|
|
44
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmTabsContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
45
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.1", type: HlmTabsContent, isStandalone: true, selector: "[hlmTabsContent]", inputs: { contentFor: { classPropertyName: "contentFor", publicName: "hlmTabsContent", isSignal: true, isRequired: true, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, hostDirectives: [{ directive: i1.BrnTabsContent, inputs: ["brnTabsContent", "hlmTabsContent"] }], ngImport: i0 });
|
|
46
|
-
}
|
|
47
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmTabsContent, decorators: [{
|
|
48
|
-
type: Directive,
|
|
49
|
-
args: [{
|
|
50
|
-
selector: '[hlmTabsContent]',
|
|
51
|
-
hostDirectives: [{ directive: BrnTabsContent, inputs: ['brnTabsContent: hlmTabsContent'] }],
|
|
52
|
-
host: {
|
|
53
|
-
'[class]': '_computedClass()',
|
|
54
|
-
},
|
|
55
|
-
}]
|
|
56
|
-
}] });
|
|
57
|
-
|
|
58
|
-
const listVariants = cva('bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]', {
|
|
59
|
-
variants: {
|
|
60
|
-
orientation: {
|
|
61
|
-
horizontal: 'h-10 space-x-1',
|
|
62
|
-
vertical: 'mt-2 h-fit flex-col space-y-1',
|
|
63
|
-
},
|
|
64
|
-
},
|
|
65
|
-
defaultVariants: {
|
|
66
|
-
orientation: 'horizontal',
|
|
67
|
-
},
|
|
68
|
-
});
|
|
69
|
-
class HlmTabsList {
|
|
70
|
-
orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : []));
|
|
71
|
-
userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
|
|
72
|
-
_computedClass = computed(() => hlm(listVariants({ orientation: this.orientation() }), this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
|
|
73
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmTabsList, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
74
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.1", type: HlmTabsList, isStandalone: true, selector: "hlm-tabs-list", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, hostDirectives: [{ directive: i1.BrnTabsList }], ngImport: i0, template: '<ng-content/>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
75
|
-
}
|
|
76
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmTabsList, decorators: [{
|
|
77
|
-
type: Component,
|
|
78
|
-
args: [{
|
|
79
|
-
selector: 'hlm-tabs-list',
|
|
80
|
-
hostDirectives: [BrnTabsList],
|
|
81
|
-
template: '<ng-content/>',
|
|
82
|
-
host: {
|
|
83
|
-
'[class]': '_computedClass()',
|
|
84
|
-
},
|
|
85
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
86
|
-
}]
|
|
87
|
-
}] });
|
|
88
|
-
|
|
89
|
-
class HlmTabsPaginatedList extends BrnTabsPaginatedList {
|
|
90
|
-
items = contentChildren(BrnTabsTrigger, ...(ngDevMode ? [{ debugName: "items", descendants: false }] : [{ descendants: false }]));
|
|
91
|
-
/** Explicitly annotating type to avoid non-portable inferred type */
|
|
92
|
-
itemsChanges = toObservable(this.items);
|
|
93
|
-
tabListContainer = viewChild.required('tabListContainer');
|
|
94
|
-
tabList = viewChild.required('tabList');
|
|
95
|
-
tabListInner = viewChild.required('tabListInner');
|
|
96
|
-
nextPaginator = viewChild.required('nextPaginator');
|
|
97
|
-
previousPaginator = viewChild.required('previousPaginator');
|
|
98
|
-
userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
|
|
99
|
-
_computedClass = computed(() => hlm('relative flex flex-shrink-0 gap-1 overflow-hidden', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
|
|
100
|
-
tabListClass = input('', ...(ngDevMode ? [{ debugName: "tabListClass", alias: 'tabListClass' }] : [{ alias: 'tabListClass' }]));
|
|
101
|
-
_tabListClass = computed(() => hlm(listVariants(), this.tabListClass()), ...(ngDevMode ? [{ debugName: "_tabListClass" }] : []));
|
|
102
|
-
paginationButtonClass = input('', ...(ngDevMode ? [{ debugName: "paginationButtonClass", alias: 'paginationButtonClass' }] : [{ alias: 'paginationButtonClass' }]));
|
|
103
|
-
_paginationButtonClass = computed(() => hlm('relative z-[2] select-none disabled:cursor-default', buttonVariants({ variant: 'ghost', size: 'icon' }), this.paginationButtonClass()), ...(ngDevMode ? [{ debugName: "_paginationButtonClass" }] : []));
|
|
104
|
-
_itemSelected(event) {
|
|
105
|
-
event.preventDefault();
|
|
106
|
-
}
|
|
107
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmTabsPaginatedList, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
108
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.1", type: HlmTabsPaginatedList, isStandalone: true, selector: "hlm-paginated-tabs-list", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, tabListClass: { classPropertyName: "tabListClass", publicName: "tabListClass", isSignal: true, isRequired: false, transformFunction: null }, paginationButtonClass: { classPropertyName: "paginationButtonClass", publicName: "paginationButtonClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, providers: [provideIcons({ lucideChevronRight, lucideChevronLeft })], queries: [{ propertyName: "items", predicate: BrnTabsTrigger, isSignal: true }], viewQueries: [{ propertyName: "tabListContainer", first: true, predicate: ["tabListContainer"], descendants: true, isSignal: true }, { propertyName: "tabList", first: true, predicate: ["tabList"], descendants: true, isSignal: true }, { propertyName: "tabListInner", first: true, predicate: ["tabListInner"], descendants: true, isSignal: true }, { propertyName: "nextPaginator", first: true, predicate: ["nextPaginator"], descendants: true, isSignal: true }, { propertyName: "previousPaginator", first: true, predicate: ["previousPaginator"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
|
|
109
|
-
<button
|
|
110
|
-
#previousPaginator
|
|
111
|
-
data-pagination="previous"
|
|
112
|
-
type="button"
|
|
113
|
-
aria-hidden="true"
|
|
114
|
-
tabindex="-1"
|
|
115
|
-
[class.flex]="showPaginationControls()"
|
|
116
|
-
[class.hidden]="!showPaginationControls()"
|
|
117
|
-
[class]="_paginationButtonClass()"
|
|
118
|
-
[disabled]="disableScrollBefore || null"
|
|
119
|
-
(click)="_handlePaginatorClick('before')"
|
|
120
|
-
(mousedown)="_handlePaginatorPress('before', $event)"
|
|
121
|
-
(touchend)="_stopInterval()"
|
|
122
|
-
>
|
|
123
|
-
<ng-icon hlm size="base" name="lucideChevronLeft" />
|
|
124
|
-
</button>
|
|
125
|
-
|
|
126
|
-
<div #tabListContainer class="z-[1] flex grow overflow-hidden" (keydown)="_handleKeydown($event)">
|
|
127
|
-
<div
|
|
128
|
-
class="relative grow transition-transform"
|
|
129
|
-
#tabList
|
|
130
|
-
role="tablist"
|
|
131
|
-
(cdkObserveContent)="_onContentChanges()"
|
|
132
|
-
>
|
|
133
|
-
<div #tabListInner [class]="_tabListClass()">
|
|
134
|
-
<ng-content></ng-content>
|
|
135
|
-
</div>
|
|
136
|
-
</div>
|
|
137
|
-
</div>
|
|
138
|
-
|
|
139
|
-
<button
|
|
140
|
-
#nextPaginator
|
|
141
|
-
data-pagination="next"
|
|
142
|
-
type="button"
|
|
143
|
-
aria-hidden="true"
|
|
144
|
-
tabindex="-1"
|
|
145
|
-
[class.flex]="showPaginationControls()"
|
|
146
|
-
[class.hidden]="!showPaginationControls()"
|
|
147
|
-
[class]="_paginationButtonClass()"
|
|
148
|
-
[disabled]="disableScrollAfter || null"
|
|
149
|
-
(click)="_handlePaginatorClick('after')"
|
|
150
|
-
(mousedown)="_handlePaginatorPress('after', $event)"
|
|
151
|
-
(touchend)="_stopInterval()"
|
|
152
|
-
>
|
|
153
|
-
<ng-icon hlm size="base" name="lucideChevronRight" />
|
|
154
|
-
</button>
|
|
155
|
-
`, isInline: true, dependencies: [{ kind: "directive", type: CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: HlmIcon, selector: "ng-icon[hlm]", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
156
|
-
}
|
|
157
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmTabsPaginatedList, decorators: [{
|
|
158
|
-
type: Component,
|
|
159
|
-
args: [{
|
|
160
|
-
selector: 'hlm-paginated-tabs-list',
|
|
161
|
-
imports: [CdkObserveContent, NgIcon, HlmIcon],
|
|
162
|
-
providers: [provideIcons({ lucideChevronRight, lucideChevronLeft })],
|
|
163
|
-
template: `
|
|
164
|
-
<button
|
|
165
|
-
#previousPaginator
|
|
166
|
-
data-pagination="previous"
|
|
167
|
-
type="button"
|
|
168
|
-
aria-hidden="true"
|
|
169
|
-
tabindex="-1"
|
|
170
|
-
[class.flex]="showPaginationControls()"
|
|
171
|
-
[class.hidden]="!showPaginationControls()"
|
|
172
|
-
[class]="_paginationButtonClass()"
|
|
173
|
-
[disabled]="disableScrollBefore || null"
|
|
174
|
-
(click)="_handlePaginatorClick('before')"
|
|
175
|
-
(mousedown)="_handlePaginatorPress('before', $event)"
|
|
176
|
-
(touchend)="_stopInterval()"
|
|
177
|
-
>
|
|
178
|
-
<ng-icon hlm size="base" name="lucideChevronLeft" />
|
|
179
|
-
</button>
|
|
180
|
-
|
|
181
|
-
<div #tabListContainer class="z-[1] flex grow overflow-hidden" (keydown)="_handleKeydown($event)">
|
|
182
|
-
<div
|
|
183
|
-
class="relative grow transition-transform"
|
|
184
|
-
#tabList
|
|
185
|
-
role="tablist"
|
|
186
|
-
(cdkObserveContent)="_onContentChanges()"
|
|
187
|
-
>
|
|
188
|
-
<div #tabListInner [class]="_tabListClass()">
|
|
189
|
-
<ng-content></ng-content>
|
|
190
|
-
</div>
|
|
191
|
-
</div>
|
|
192
|
-
</div>
|
|
193
|
-
|
|
194
|
-
<button
|
|
195
|
-
#nextPaginator
|
|
196
|
-
data-pagination="next"
|
|
197
|
-
type="button"
|
|
198
|
-
aria-hidden="true"
|
|
199
|
-
tabindex="-1"
|
|
200
|
-
[class.flex]="showPaginationControls()"
|
|
201
|
-
[class.hidden]="!showPaginationControls()"
|
|
202
|
-
[class]="_paginationButtonClass()"
|
|
203
|
-
[disabled]="disableScrollAfter || null"
|
|
204
|
-
(click)="_handlePaginatorClick('after')"
|
|
205
|
-
(mousedown)="_handlePaginatorPress('after', $event)"
|
|
206
|
-
(touchend)="_stopInterval()"
|
|
207
|
-
>
|
|
208
|
-
<ng-icon hlm size="base" name="lucideChevronRight" />
|
|
209
|
-
</button>
|
|
210
|
-
`,
|
|
211
|
-
host: {
|
|
212
|
-
'[class]': '_computedClass()',
|
|
213
|
-
},
|
|
214
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
215
|
-
}]
|
|
216
|
-
}] });
|
|
217
|
-
|
|
218
|
-
class HlmTabsTrigger {
|
|
219
|
-
triggerFor = input.required(...(ngDevMode ? [{ debugName: "triggerFor", alias: 'hlmTabsTrigger' }] : [{ alias: 'hlmTabsTrigger' }]));
|
|
220
|
-
userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
|
|
221
|
-
_computedClass = computed(() => hlm('data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/10 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent px-2 py-1 text-sm font-medium transition-[color,box-shadow] focus-visible:outline-1 focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0 [&_ng-icon]:text-base', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
|
|
222
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmTabsTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
223
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.1", type: HlmTabsTrigger, isStandalone: true, selector: "[hlmTabsTrigger]", inputs: { triggerFor: { classPropertyName: "triggerFor", publicName: "hlmTabsTrigger", isSignal: true, isRequired: true, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, hostDirectives: [{ directive: i1.BrnTabsTrigger, inputs: ["brnTabsTrigger", "hlmTabsTrigger", "disabled", "disabled"] }], ngImport: i0 });
|
|
224
|
-
}
|
|
225
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmTabsTrigger, decorators: [{
|
|
226
|
-
type: Directive,
|
|
227
|
-
args: [{
|
|
228
|
-
selector: '[hlmTabsTrigger]',
|
|
229
|
-
hostDirectives: [{ directive: BrnTabsTrigger, inputs: ['brnTabsTrigger: hlmTabsTrigger', 'disabled'] }],
|
|
230
|
-
host: {
|
|
231
|
-
'[class]': '_computedClass()',
|
|
232
|
-
},
|
|
233
|
-
}]
|
|
234
|
-
}] });
|
|
235
|
-
|
|
236
|
-
/*
|
|
237
|
-
* Public API Surface of tabs
|
|
238
|
-
*/
|
|
239
|
-
const HlmTabsImports = [HlmTabs, HlmTabsList, HlmTabsTrigger, HlmTabsContent, HlmTabsPaginatedList];
|
|
240
|
-
class HlmTabsModule {
|
|
241
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
242
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.1", ngImport: i0, type: HlmTabsModule, imports: [HlmTabs, HlmTabsList, HlmTabsTrigger, HlmTabsContent, HlmTabsPaginatedList], exports: [HlmTabs, HlmTabsList, HlmTabsTrigger, HlmTabsContent, HlmTabsPaginatedList] });
|
|
243
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmTabsModule, imports: [HlmTabsPaginatedList] });
|
|
244
|
-
}
|
|
245
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmTabsModule, decorators: [{
|
|
246
|
-
type: NgModule,
|
|
247
|
-
args: [{
|
|
248
|
-
imports: [...HlmTabsImports],
|
|
249
|
-
exports: [...HlmTabsImports],
|
|
250
|
-
}]
|
|
251
|
-
}] });
|
|
252
|
-
|
|
253
|
-
/**
|
|
254
|
-
* Generated bundle index. Do not edit.
|
|
255
|
-
*/
|
|
256
|
-
|
|
257
|
-
export { HlmTabs, HlmTabsContent, HlmTabsImports, HlmTabsList, HlmTabsModule, HlmTabsPaginatedList, HlmTabsTrigger, listVariants };
|
|
258
|
-
//# sourceMappingURL=tabs.mjs.map
|