@styloviz/tag-input 0.1.1

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 (6) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +56 -0
  3. package/fesm2022/styloviz-tag-input.mjs +226 -0
  4. package/fesm2022/styloviz-tag-input.mjs.map +1 -0
  5. package/package.json +42 -0
  6. package/types/styloviz-tag-input.d.ts +89 -0
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 StyloViz
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,56 @@
1
+ # @styloviz/tag-input
2
+
3
+ > Tag / chip input for entering multiple tokens with keyboard and paste support.
4
+
5
+ Part of the **StyloViz UI Kit** — a premium Angular 21 + Tailwind CSS 4 dashboard component library. Standalone, `OnPush`, strongly typed, dark-mode ready.
6
+
7
+ ## Installation
8
+
9
+ ```bash
10
+ npm install @styloviz/core @styloviz/tag-input
11
+ ```
12
+
13
+ Requires `@angular/core` and `@angular/common` >= 21. `@styloviz/core` is a peer dependency shared by every component. Prefer everything at once? `@styloviz/all` installs the whole free tier in one command.
14
+
15
+ ## Usage
16
+
17
+ ```ts
18
+ import { SvTagInputComponent } from '@styloviz/tag-input';
19
+
20
+ @Component({
21
+ standalone: true,
22
+ imports: [SvTagInputComponent],
23
+ template: `
24
+ <sv-tag-input />
25
+ `,
26
+ })
27
+ export class DemoComponent {}
28
+ ```
29
+
30
+ ## Inputs
31
+
32
+ | Input | Type | Default | Description |
33
+ | --- | --- | --- | --- |
34
+ | `values` | `string[] (two-way)` | `[]` | Current tags (two-way). |
35
+ | `options` | `TagOption[]` | `[]` | Suggestion options offered as the user types. |
36
+ | `size` | `TagInputSize` | `'md'` | Field size: sm, md or lg. |
37
+ | `label` | `string` | `''` | Field label. |
38
+ | `placeholder` | `string` | `'Add tags…'` | Placeholder shown in the input. |
39
+ | `hint` | `string` | `''` | Helper text shown below the field. |
40
+ | `errorMessage` | `string` | `''` | Error message; sets the field to an error state when present. |
41
+ | `disabled` | `boolean` | `false` | Disable the field. |
42
+ | `required` | `boolean` | `false` | Mark the field as required. |
43
+
44
+ ## Outputs
45
+
46
+ | Output | Type | Description |
47
+ | --- | --- | --- |
48
+ | `tagsChange` | `TagInputChangeEvent` | Emitted with the change (added/removed tag + full list). |
49
+
50
+ ## Documentation
51
+
52
+ Full API reference and live demos: https://styloviz.dev/docs
53
+
54
+ ## License
55
+
56
+ MIT
package/fesm2022/styloviz-tag-input.mjs ADDED
@@ -0,0 +1,226 @@
1
+ import * as i0 from '@angular/core';
2
+ import { model, input, output, signal, computed, inject, ElementRef, HostListener, ViewChild, ChangeDetectionStrategy, Component } from '@angular/core';
3
+
4
+ /** Process-wide counter for generating unique ids per instance. */
5
+ let _svTagInputUid = 0;
6
+ /**
7
+ * SvTagInputComponent (Free) — Default variant only.
8
+ * Upgrade to @styloviz-pro/tag-input for 8 variants including with-avatar,
9
+ * grouped, creatable, with-colors, token-limit, async-search, and inline.
10
+ */
11
+ class SvTagInputComponent {
12
+ /** Current tags (two-way). */
13
+ values = model([], ...(ngDevMode ? [{ debugName: "values" }] : /* istanbul ignore next */ []));
14
+ /** Suggestion options offered as the user types. */
15
+ options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
16
+ /** Field size: sm, md or lg. @default 'md' */
17
+ size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
18
+ /** Field label. */
19
+ label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
20
+ /** Placeholder shown in the input. @default 'Add tags…' */
21
+ placeholder = input('Add tags…', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
22
+ /** Helper text shown below the field. */
23
+ hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
24
+ /** Error message; sets the field to an error state when present. */
25
+ errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
26
+ /** Disable the field. @default false */
27
+ disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
28
+ /** Mark the field as required. @default false */
29
+ required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
30
+ /** Emitted with the change (added/removed tag + full list). */
31
+ tagsChange = output();
32
+ fieldRef;
33
+ inputRef;
34
+ isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
35
+ query = signal('', ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
36
+ activeIndex = signal(-1, ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
37
+ focused = signal(false, ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
38
+ // ── ARIA ids (unique per instance so multiple fields don't collide) ──────────
39
+ _baseId = `sv-tag-${++_svTagInputUid}`;
40
+ /** id of the options listbox (referenced by aria-controls). */
41
+ listboxId = `${this._baseId}-listbox`;
42
+ /** DOM id for an option row at index `i`. */
43
+ optionId(i) { return `${this._baseId}-opt-${i}`; }
44
+ /** id of the active option, or null when nothing is highlighted. */
45
+ activeDescendantId = computed(() => this.isOpen() && this.activeIndex() >= 0 ? this.optionId(this.activeIndex()) : null, ...(ngDevMode ? [{ debugName: "activeDescendantId" }] : /* istanbul ignore next */ []));
46
+ /** Accessible name for the input — label, falling back to the placeholder. */
47
+ accessibleName = computed(() => this.label() || this.placeholder(), ...(ngDevMode ? [{ debugName: "accessibleName" }] : /* istanbul ignore next */ []));
48
+ panelTop = signal(null, ...(ngDevMode ? [{ debugName: "panelTop" }] : /* istanbul ignore next */ []));
49
+ panelBottom = signal(null, ...(ngDevMode ? [{ debugName: "panelBottom" }] : /* istanbul ignore next */ []));
50
+ panelLeft = signal(0, ...(ngDevMode ? [{ debugName: "panelLeft" }] : /* istanbul ignore next */ []));
51
+ panelWidth = signal(0, ...(ngDevMode ? [{ debugName: "panelWidth" }] : /* istanbul ignore next */ []));
52
+ panelMaxHeight = signal(320, ...(ngDevMode ? [{ debugName: "panelMaxHeight" }] : /* istanbul ignore next */ []));
53
+ host = inject((ElementRef));
54
+ selectedTags = computed(() => this.values().map(v => this.options().find(o => o.value === v) ?? { value: v, label: v }), ...(ngDevMode ? [{ debugName: "selectedTags" }] : /* istanbul ignore next */ []));
55
+ filteredOptions = computed(() => {
56
+ const q = this.query().toLowerCase().trim();
57
+ const selected = new Set(this.values());
58
+ return this.options().filter(o => !selected.has(o.value) &&
59
+ (!q || o.label.toLowerCase().includes(q)));
60
+ }, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
61
+ navigableList = computed(() => this.filteredOptions(), ...(ngDevMode ? [{ debugName: "navigableList" }] : /* istanbul ignore next */ []));
62
+ noResults = computed(() => this.filteredOptions().length === 0, ...(ngDevMode ? [{ debugName: "noResults" }] : /* istanbul ignore next */ []));
63
+ chipSizeClass = computed(() => ({
64
+ sm: 'h-5 gap-1 px-1.5 text-[10px]',
65
+ md: 'h-6 gap-1 px-2 text-[11px]',
66
+ lg: 'h-7 gap-1.5 px-2.5 text-xs',
67
+ })[this.size()], ...(ngDevMode ? [{ debugName: "chipSizeClass" }] : /* istanbul ignore next */ []));
68
+ fieldMinHeight = computed(() => ({
69
+ sm: 'min-h-[32px] px-2 py-1 gap-1',
70
+ md: 'min-h-[42px] px-3 py-1.5 gap-1.5',
71
+ lg: 'min-h-[50px] px-3.5 py-2 gap-2',
72
+ })[this.size()], ...(ngDevMode ? [{ debugName: "fieldMinHeight" }] : /* istanbul ignore next */ []));
73
+ inputTextClass = computed(() => ({
74
+ sm: 'text-xs placeholder:text-xs',
75
+ md: 'text-sm placeholder:text-sm',
76
+ lg: 'text-sm placeholder:text-sm',
77
+ })[this.size()], ...(ngDevMode ? [{ debugName: "inputTextClass" }] : /* istanbul ignore next */ []));
78
+ selectOption(opt) {
79
+ if (opt.disabled || this.disabled())
80
+ return;
81
+ this.values.set([...this.values(), opt.value]);
82
+ this.query.set('');
83
+ this.activeIndex.set(-1);
84
+ this._emitChange();
85
+ setTimeout(() => this.inputRef?.nativeElement.focus());
86
+ }
87
+ removeTag(value, event) {
88
+ event?.stopPropagation();
89
+ this.values.set(this.values().filter(v => v !== value));
90
+ this._emitChange();
91
+ }
92
+ clearAll(event) {
93
+ event?.stopPropagation();
94
+ this.values.set([]);
95
+ this._emitChange();
96
+ }
97
+ onInput(event) {
98
+ this.query.set(event.target.value);
99
+ this.activeIndex.set(-1);
100
+ if (!this.isOpen())
101
+ this.open();
102
+ }
103
+ onKeydown(event) {
104
+ const nav = this.navigableList();
105
+ const ai = this.activeIndex();
106
+ switch (event.key) {
107
+ case 'ArrowDown':
108
+ event.preventDefault();
109
+ if (!this.isOpen()) {
110
+ this.open();
111
+ return;
112
+ }
113
+ this.activeIndex.set(Math.min(ai + 1, nav.length - 1));
114
+ break;
115
+ case 'ArrowUp':
116
+ event.preventDefault();
117
+ this.activeIndex.set(Math.max(ai - 1, -1));
118
+ break;
119
+ case 'Enter':
120
+ event.preventDefault();
121
+ if (ai >= 0 && ai < nav.length)
122
+ this.selectOption(nav[ai]);
123
+ break;
124
+ case 'Backspace':
125
+ if (!this.query()) {
126
+ const vals = this.values();
127
+ if (vals.length) {
128
+ this.values.set(vals.slice(0, -1));
129
+ this._emitChange();
130
+ }
131
+ }
132
+ break;
133
+ case 'Escape':
134
+ this.close();
135
+ break;
136
+ case 'Tab':
137
+ this.close();
138
+ break;
139
+ }
140
+ }
141
+ focusInput() {
142
+ if (this.disabled())
143
+ return;
144
+ this.inputRef?.nativeElement.focus();
145
+ if (!this.isOpen())
146
+ this.open();
147
+ }
148
+ onInputFocus() { this.focused.set(true); if (!this.isOpen())
149
+ this.open(); }
150
+ onInputBlur() {
151
+ this.focused.set(false);
152
+ setTimeout(() => {
153
+ if (!this.host.nativeElement.contains(document.activeElement))
154
+ this.close();
155
+ }, 150);
156
+ }
157
+ open() {
158
+ if (this.disabled())
159
+ return;
160
+ this._updatePanelPosition();
161
+ this.isOpen.set(true);
162
+ }
163
+ close() { this.isOpen.set(false); this.activeIndex.set(-1); }
164
+ onDocClick(event) {
165
+ if (!this.isOpen())
166
+ return;
167
+ if (!this.host.nativeElement.contains(event.target))
168
+ this.close();
169
+ }
170
+ onResize() { if (this.isOpen())
171
+ this._updatePanelPosition(); }
172
+ ngOnDestroy() { }
173
+ _updatePanelPosition() {
174
+ const field = this.fieldRef?.nativeElement;
175
+ if (!field)
176
+ return;
177
+ const rect = field.getBoundingClientRect();
178
+ const vh = window.innerHeight;
179
+ const spaceBelow = vh - rect.bottom - 12;
180
+ const spaceAbove = rect.top - 12;
181
+ const openUp = spaceBelow < 240 && spaceAbove > spaceBelow;
182
+ this.panelLeft.set(rect.left);
183
+ this.panelWidth.set(rect.width);
184
+ if (openUp) {
185
+ this.panelTop.set(null);
186
+ this.panelBottom.set(vh - rect.top + 6);
187
+ this.panelMaxHeight.set(Math.max(120, spaceAbove));
188
+ }
189
+ else {
190
+ this.panelTop.set(rect.bottom + 6);
191
+ this.panelBottom.set(null);
192
+ this.panelMaxHeight.set(Math.max(120, spaceBelow));
193
+ }
194
+ }
195
+ _emitChange() {
196
+ this.tagsChange.emit({ values: this.values(), tags: this.selectedTags() });
197
+ }
198
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SvTagInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
199
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SvTagInputComponent, isStandalone: true, selector: "sv-tag-input", inputs: { values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { values: "valuesChange", tagsChange: "tagsChange" }, host: { listeners: { "document:click": "onDocClick($event)", "document:scroll": "onResize()", "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "fieldRef", first: true, predicate: ["fieldEl"], descendants: true }, { propertyName: "inputRef", first: true, predicate: ["inputEl"], descendants: true }], ngImport: i0, template: "<!-- SvTagInputComponent (Free) \u2014 Default variant -->\n<div class=\"relative flex w-full flex-col gap-1.5\">\n @if (label()) {\n <label class=\"text-xs font-semibold text-gray-700 dark:text-gray-200\">\n {{ label() }}\n @if (required()) { <span class=\"ml-0.5 text-rose-500\" aria-hidden=\"true\">*</span> }\n </label>\n }\n <div #fieldEl\n [class]=\"['flex flex-wrap cursor-text rounded-xl border transition-all duration-150', fieldMinHeight(),\n disabled() ? 'cursor-not-allowed opacity-50 bg-gray-50 border-gray-200 dark:bg-gray-800/50 dark:border-gray-700'\n : focused() || isOpen() ? 'border-primary-400 ring-2 ring-primary-400/25 bg-white dark:bg-gray-900 dark:border-primary-500'\n : errorMessage() ? 'border-rose-400 ring-2 ring-rose-400/20 bg-white dark:bg-gray-900'\n : 'border-gray-200 bg-white hover:border-gray-300 dark:border-gray-700 dark:bg-gray-900'].join(' ')\"\n (click)=\"focusInput()\">\n @for (tag of selectedTags(); track tag.value) {\n <span [class]=\"['inline-flex shrink-0 items-center rounded-full font-medium bg-gray-100 text-gray-700 ring-1 ring-gray-200/80 dark:bg-gray-800 dark:text-gray-300 dark:ring-gray-700', chipSizeClass()].join(' ')\">\n <span class=\"truncate max-w-[120px]\">{{ tag.label }}</span>\n @if (!disabled()) {\n <button type=\"button\" [attr.aria-label]=\"'Remove ' + tag.label\"\n class=\"ml-0.5 -mr-0.5 flex h-3.5 w-3.5 shrink-0 items-center justify-center rounded-full opacity-60 transition-opacity hover:opacity-100 focus-visible:outline-none\"\n (click)=\"removeTag(tag.value, $event)\">\n <svg class=\"h-2.5 w-2.5\" viewBox=\"0 0 10 10\" fill=\"currentColor\" aria-hidden=\"true\">\n <path d=\"M6.414 5l2.293-2.293a1 1 0 00-1.414-1.414L5 3.586 2.707 1.293A1 1 0 001.293 2.707L3.586 5 1.293 7.293a1 1 0 001.414 1.414L5 6.414l2.293 2.293a1 1 0 001.414-1.414L6.414 5z\"/>\n </svg>\n </button>\n }\n </span>\n }\n <input #inputEl type=\"text\" autocomplete=\"off\" spellcheck=\"false\"\n role=\"combobox\" aria-haspopup=\"listbox\" aria-autocomplete=\"list\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"isOpen() ? listboxId : null\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n [attr.aria-label]=\"accessibleName()\"\n [placeholder]=\"values().length === 0 ? placeholder() : ''\" [disabled]=\"disabled()\" [value]=\"query()\"\n [class]=\"['flex-1 min-w-[120px] bg-transparent text-gray-900 placeholder-gray-400 outline-none dark:text-gray-100 dark:placeholder-gray-500', inputTextClass()].join(' ')\"\n (input)=\"onInput($event)\" (keydown)=\"onKeydown($event)\" (focus)=\"onInputFocus()\" (blur)=\"onInputBlur()\" />\n <span class=\"ml-auto flex shrink-0 items-center gap-1 self-center pl-1\">\n @if (values().length > 0 && !disabled()) {\n <button type=\"button\" aria-label=\"Clear all\"\n class=\"flex h-5 w-5 items-center justify-center rounded-full text-gray-300 hover:bg-gray-100 hover:text-gray-500 dark:hover:bg-gray-800 dark:hover:text-gray-400 transition-colors\"\n (click)=\"clearAll($event)\">\n <svg class=\"h-3 w-3\" viewBox=\"0 0 12 12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" aria-hidden=\"true\"><path d=\"M1 1l10 10M11 1 1 11\"/></svg>\n </button>\n }\n <span class=\"pointer-events-none\">\n <svg class=\"h-4 w-4 text-gray-400 transition-transform duration-200 dark:text-gray-500\" [class.rotate-180]=\"isOpen()\"\n viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m6 9 6 6 6-6\"/>\n </svg>\n </span>\n </span>\n </div>\n @if (errorMessage()) {\n <p class=\"text-[11px] font-medium text-rose-500 dark:text-rose-400\">{{ errorMessage() }}</p>\n } @else if (hint()) {\n <p class=\"text-[11px] text-gray-500 dark:text-gray-400\">{{ hint() }}</p>\n }\n @if (isOpen()) {\n <div [attr.id]=\"listboxId\" role=\"listbox\" class=\"fixed z-[9999] overflow-hidden rounded-xl border border-gray-200 bg-white shadow-xl dark:border-gray-700 dark:bg-gray-900\"\n [style.top.px]=\"panelTop()\" [style.bottom.px]=\"panelBottom()\"\n [style.left.px]=\"panelLeft()\" [style.width.px]=\"panelWidth()\" [style.max-height.px]=\"panelMaxHeight()\">\n <div role=\"presentation\" class=\"overflow-y-auto overscroll-contain\" style=\"max-height: inherit\">\n @for (opt of filteredOptions(); track opt.value; let i = $index) {\n <div role=\"option\" [attr.id]=\"optionId(i)\" [attr.aria-selected]=\"activeIndex() === i\"\n [class]=\"['flex cursor-pointer items-center gap-2 px-3 py-2 text-sm transition-colors', opt.disabled ? 'opacity-40 cursor-not-allowed pointer-events-none' : '', activeIndex() === i ? 'bg-primary-50 dark:bg-primary-900/30' : 'hover:bg-gray-50 dark:hover:bg-gray-800/60'].join(' ')\"\n (click)=\"selectOption(opt)\" (mouseenter)=\"activeIndex.set(i)\">\n <span class=\"flex-1 truncate font-medium text-gray-800 dark:text-gray-100\">{{ opt.label }}</span>\n @if (activeIndex() === i) {\n <svg class=\"h-3.5 w-3.5 shrink-0 text-primary-500\" viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m2 7 3.5 3.5 6.5-7\"/></svg>\n }\n </div>\n }\n @if (noResults()) {\n <div role=\"presentation\" class=\"px-4 py-5 text-center text-xs text-gray-500 dark:text-gray-400\">No results found</div>\n }\n </div>\n </div>\n }\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
200
+ }
201
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SvTagInputComponent, decorators: [{
202
+ type: Component,
203
+ args: [{ selector: 'sv-tag-input', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- SvTagInputComponent (Free) \u2014 Default variant -->\n<div class=\"relative flex w-full flex-col gap-1.5\">\n @if (label()) {\n <label class=\"text-xs font-semibold text-gray-700 dark:text-gray-200\">\n {{ label() }}\n @if (required()) { <span class=\"ml-0.5 text-rose-500\" aria-hidden=\"true\">*</span> }\n </label>\n }\n <div #fieldEl\n [class]=\"['flex flex-wrap cursor-text rounded-xl border transition-all duration-150', fieldMinHeight(),\n disabled() ? 'cursor-not-allowed opacity-50 bg-gray-50 border-gray-200 dark:bg-gray-800/50 dark:border-gray-700'\n : focused() || isOpen() ? 'border-primary-400 ring-2 ring-primary-400/25 bg-white dark:bg-gray-900 dark:border-primary-500'\n : errorMessage() ? 'border-rose-400 ring-2 ring-rose-400/20 bg-white dark:bg-gray-900'\n : 'border-gray-200 bg-white hover:border-gray-300 dark:border-gray-700 dark:bg-gray-900'].join(' ')\"\n (click)=\"focusInput()\">\n @for (tag of selectedTags(); track tag.value) {\n <span [class]=\"['inline-flex shrink-0 items-center rounded-full font-medium bg-gray-100 text-gray-700 ring-1 ring-gray-200/80 dark:bg-gray-800 dark:text-gray-300 dark:ring-gray-700', chipSizeClass()].join(' ')\">\n <span class=\"truncate max-w-[120px]\">{{ tag.label }}</span>\n @if (!disabled()) {\n <button type=\"button\" [attr.aria-label]=\"'Remove ' + tag.label\"\n class=\"ml-0.5 -mr-0.5 flex h-3.5 w-3.5 shrink-0 items-center justify-center rounded-full opacity-60 transition-opacity hover:opacity-100 focus-visible:outline-none\"\n (click)=\"removeTag(tag.value, $event)\">\n <svg class=\"h-2.5 w-2.5\" viewBox=\"0 0 10 10\" fill=\"currentColor\" aria-hidden=\"true\">\n <path d=\"M6.414 5l2.293-2.293a1 1 0 00-1.414-1.414L5 3.586 2.707 1.293A1 1 0 001.293 2.707L3.586 5 1.293 7.293a1 1 0 001.414 1.414L5 6.414l2.293 2.293a1 1 0 001.414-1.414L6.414 5z\"/>\n </svg>\n </button>\n }\n </span>\n }\n <input #inputEl type=\"text\" autocomplete=\"off\" spellcheck=\"false\"\n role=\"combobox\" aria-haspopup=\"listbox\" aria-autocomplete=\"list\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"isOpen() ? listboxId : null\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n [attr.aria-label]=\"accessibleName()\"\n [placeholder]=\"values().length === 0 ? placeholder() : ''\" [disabled]=\"disabled()\" [value]=\"query()\"\n [class]=\"['flex-1 min-w-[120px] bg-transparent text-gray-900 placeholder-gray-400 outline-none dark:text-gray-100 dark:placeholder-gray-500', inputTextClass()].join(' ')\"\n (input)=\"onInput($event)\" (keydown)=\"onKeydown($event)\" (focus)=\"onInputFocus()\" (blur)=\"onInputBlur()\" />\n <span class=\"ml-auto flex shrink-0 items-center gap-1 self-center pl-1\">\n @if (values().length > 0 && !disabled()) {\n <button type=\"button\" aria-label=\"Clear all\"\n class=\"flex h-5 w-5 items-center justify-center rounded-full text-gray-300 hover:bg-gray-100 hover:text-gray-500 dark:hover:bg-gray-800 dark:hover:text-gray-400 transition-colors\"\n (click)=\"clearAll($event)\">\n <svg class=\"h-3 w-3\" viewBox=\"0 0 12 12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" aria-hidden=\"true\"><path d=\"M1 1l10 10M11 1 1 11\"/></svg>\n </button>\n }\n <span class=\"pointer-events-none\">\n <svg class=\"h-4 w-4 text-gray-400 transition-transform duration-200 dark:text-gray-500\" [class.rotate-180]=\"isOpen()\"\n viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m6 9 6 6 6-6\"/>\n </svg>\n </span>\n </span>\n </div>\n @if (errorMessage()) {\n <p class=\"text-[11px] font-medium text-rose-500 dark:text-rose-400\">{{ errorMessage() }}</p>\n } @else if (hint()) {\n <p class=\"text-[11px] text-gray-500 dark:text-gray-400\">{{ hint() }}</p>\n }\n @if (isOpen()) {\n <div [attr.id]=\"listboxId\" role=\"listbox\" class=\"fixed z-[9999] overflow-hidden rounded-xl border border-gray-200 bg-white shadow-xl dark:border-gray-700 dark:bg-gray-900\"\n [style.top.px]=\"panelTop()\" [style.bottom.px]=\"panelBottom()\"\n [style.left.px]=\"panelLeft()\" [style.width.px]=\"panelWidth()\" [style.max-height.px]=\"panelMaxHeight()\">\n <div role=\"presentation\" class=\"overflow-y-auto overscroll-contain\" style=\"max-height: inherit\">\n @for (opt of filteredOptions(); track opt.value; let i = $index) {\n <div role=\"option\" [attr.id]=\"optionId(i)\" [attr.aria-selected]=\"activeIndex() === i\"\n [class]=\"['flex cursor-pointer items-center gap-2 px-3 py-2 text-sm transition-colors', opt.disabled ? 'opacity-40 cursor-not-allowed pointer-events-none' : '', activeIndex() === i ? 'bg-primary-50 dark:bg-primary-900/30' : 'hover:bg-gray-50 dark:hover:bg-gray-800/60'].join(' ')\"\n (click)=\"selectOption(opt)\" (mouseenter)=\"activeIndex.set(i)\">\n <span class=\"flex-1 truncate font-medium text-gray-800 dark:text-gray-100\">{{ opt.label }}</span>\n @if (activeIndex() === i) {\n <svg class=\"h-3.5 w-3.5 shrink-0 text-primary-500\" viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m2 7 3.5 3.5 6.5-7\"/></svg>\n }\n </div>\n }\n @if (noResults()) {\n <div role=\"presentation\" class=\"px-4 py-5 text-center text-xs text-gray-500 dark:text-gray-400\">No results found</div>\n }\n </div>\n </div>\n }\n</div>\n" }]
204
+ }], propDecorators: { values: [{ type: i0.Input, args: [{ isSignal: true, alias: "values", required: false }] }, { type: i0.Output, args: ["valuesChange"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], tagsChange: [{ type: i0.Output, args: ["tagsChange"] }], fieldRef: [{
205
+ type: ViewChild,
206
+ args: ['fieldEl']
207
+ }], inputRef: [{
208
+ type: ViewChild,
209
+ args: ['inputEl']
210
+ }], onDocClick: [{
211
+ type: HostListener,
212
+ args: ['document:click', ['$event']]
213
+ }], onResize: [{
214
+ type: HostListener,
215
+ args: ['document:scroll']
216
+ }, {
217
+ type: HostListener,
218
+ args: ['window:resize']
219
+ }] } });
220
+
221
+ /**
222
+ * Generated bundle index. Do not edit.
223
+ */
224
+
225
+ export { SvTagInputComponent };
226
+ //# sourceMappingURL=styloviz-tag-input.mjs.map
package/fesm2022/styloviz-tag-input.mjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"styloviz-tag-input.mjs","sources":["../../../../projects/tag-input-free/src/lib/tag-input.component.ts","../../../../projects/tag-input-free/src/lib/tag-input.component.html","../../../../projects/tag-input-free/src/styloviz-tag-input.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n computed,\n ElementRef,\n HostListener,\n inject,\n input,\n model,\n OnDestroy,\n output,\n signal,\n ViewChild,\n} from '@angular/core';\n\n/** Process-wide counter for generating unique ids per instance. */\nlet _svTagInputUid = 0;\n\nexport type TagInputSize = 'sm' | 'md' | 'lg';\n\nexport interface TagOption {\n readonly value: string;\n readonly label: string;\n readonly sublabel?: string;\n readonly disabled?: boolean;\n}\n\nexport interface TagInputChangeEvent {\n readonly values: string[];\n readonly tags: TagOption[];\n}\n\n/**\n * SvTagInputComponent (Free) — Default variant only.\n * Upgrade to @styloviz-pro/tag-input for 8 variants including with-avatar,\n * grouped, creatable, with-colors, token-limit, async-search, and inline.\n */\n@Component({\n selector: 'sv-tag-input',\n standalone: true,\n imports: [],\n changeDetection: ChangeDetectionStrategy.OnPush,\n templateUrl: './tag-input.component.html',\n})\nexport class SvTagInputComponent implements OnDestroy {\n\n /** Current tags (two-way). */\n values = model<string[]>([]);\n /** Suggestion options offered as the user types. */\n options = input<TagOption[]>([]);\n /** Field size: sm, md or lg. @default 'md' */\n size = input<TagInputSize>('md');\n /** Field label. */\n label = input('');\n /** Placeholder shown in the input. @default 'Add tags…' */\n placeholder = input('Add tags…');\n /** Helper text shown below the field. */\n hint = input('');\n /** Error message; sets the field to an error state when present. */\n errorMessage = input('');\n /** Disable the field. @default false */\n disabled = input(false);\n /** Mark the field as required. @default false */\n required = input(false);\n\n /** Emitted with the change (added/removed tag + full list). */\n readonly tagsChange = output<TagInputChangeEvent>();\n\n @ViewChild('fieldEl') private fieldRef!: ElementRef<HTMLElement>;\n @ViewChild('inputEl') private inputRef!: ElementRef<HTMLInputElement>;\n\n readonly isOpen = signal(false);\n readonly query = signal('');\n readonly activeIndex = signal(-1);\n readonly focused = signal(false);\n\n // ── ARIA ids (unique per instance so multiple fields don't collide) ──────────\n private readonly _baseId = `sv-tag-${++_svTagInputUid}`;\n /** id of the options listbox (referenced by aria-controls). */\n readonly listboxId = `${this._baseId}-listbox`;\n /** DOM id for an option row at index `i`. */\n optionId(i: number): string { return `${this._baseId}-opt-${i}`; }\n /** id of the active option, or null when nothing is highlighted. */\n readonly activeDescendantId = computed<string | null>(() =>\n this.isOpen() && this.activeIndex() >= 0 ? this.optionId(this.activeIndex()) : null\n );\n /** Accessible name for the input — label, falling back to the placeholder. */\n readonly accessibleName = computed<string>(() => this.label() || this.placeholder());\n\n readonly panelTop = signal<number | null>(null);\n readonly panelBottom = signal<number | null>(null);\n readonly panelLeft = signal(0);\n readonly panelWidth = signal(0);\n readonly panelMaxHeight = signal(320);\n\n private readonly host = inject(ElementRef<HTMLElement>);\n\n readonly selectedTags = computed<TagOption[]>(() =>\n this.values().map(v => this.options().find(o => o.value === v) ?? { value: v, label: v })\n );\n\n readonly filteredOptions = computed<TagOption[]>(() => {\n const q = this.query().toLowerCase().trim();\n const selected = new Set(this.values());\n return this.options().filter(o =>\n !selected.has(o.value) &&\n (!q || o.label.toLowerCase().includes(q))\n );\n });\n\n readonly navigableList = computed<TagOption[]>(() => this.filteredOptions());\n\n readonly noResults = computed(() => this.filteredOptions().length === 0);\n\n readonly chipSizeClass = computed<string>(() => ({\n sm: 'h-5 gap-1 px-1.5 text-[10px]',\n md: 'h-6 gap-1 px-2 text-[11px]',\n lg: 'h-7 gap-1.5 px-2.5 text-xs',\n })[this.size()]);\n\n readonly fieldMinHeight = computed<string>(() => ({\n sm: 'min-h-[32px] px-2 py-1 gap-1',\n md: 'min-h-[42px] px-3 py-1.5 gap-1.5',\n lg: 'min-h-[50px] px-3.5 py-2 gap-2',\n })[this.size()]);\n\n readonly inputTextClass = computed<string>(() => ({\n sm: 'text-xs placeholder:text-xs',\n md: 'text-sm placeholder:text-sm',\n lg: 'text-sm placeholder:text-sm',\n })[this.size()]);\n\n selectOption(opt: TagOption): void {\n if (opt.disabled || this.disabled()) return;\n this.values.set([...this.values(), opt.value]);\n this.query.set('');\n this.activeIndex.set(-1);\n this._emitChange();\n setTimeout(() => this.inputRef?.nativeElement.focus());\n }\n\n removeTag(value: string, event?: MouseEvent): void {\n event?.stopPropagation();\n this.values.set(this.values().filter(v => v !== value));\n this._emitChange();\n }\n\n clearAll(event?: MouseEvent): void {\n event?.stopPropagation();\n this.values.set([]);\n this._emitChange();\n }\n\n onInput(event: Event): void {\n this.query.set((event.target as HTMLInputElement).value);\n this.activeIndex.set(-1);\n if (!this.isOpen()) this.open();\n }\n\n onKeydown(event: KeyboardEvent): void {\n const nav = this.navigableList();\n const ai = this.activeIndex();\n switch (event.key) {\n case 'ArrowDown':\n event.preventDefault();\n if (!this.isOpen()) { this.open(); return; }\n this.activeIndex.set(Math.min(ai + 1, nav.length - 1));\n break;\n case 'ArrowUp':\n event.preventDefault();\n this.activeIndex.set(Math.max(ai - 1, -1));\n break;\n case 'Enter':\n event.preventDefault();\n if (ai >= 0 && ai < nav.length) this.selectOption(nav[ai]);\n break;\n case 'Backspace':\n if (!this.query()) {\n const vals = this.values();\n if (vals.length) { this.values.set(vals.slice(0, -1)); this._emitChange(); }\n }\n break;\n case 'Escape': this.close(); break;\n case 'Tab': this.close(); break;\n }\n }\n\n focusInput(): void {\n if (this.disabled()) return;\n this.inputRef?.nativeElement.focus();\n if (!this.isOpen()) this.open();\n }\n\n onInputFocus(): void { this.focused.set(true); if (!this.isOpen()) this.open(); }\n\n onInputBlur(): void {\n this.focused.set(false);\n setTimeout(() => {\n if (!this.host.nativeElement.contains(document.activeElement)) this.close();\n }, 150);\n }\n\n open(): void {\n if (this.disabled()) return;\n this._updatePanelPosition();\n this.isOpen.set(true);\n }\n\n close(): void { this.isOpen.set(false); this.activeIndex.set(-1); }\n\n @HostListener('document:click', ['$event'])\n onDocClick(event: MouseEvent): void {\n if (!this.isOpen()) return;\n if (!this.host.nativeElement.contains(event.target as Node)) this.close();\n }\n\n @HostListener('document:scroll')\n @HostListener('window:resize')\n onResize(): void { if (this.isOpen()) this._updatePanelPosition(); }\n\n ngOnDestroy(): void {}\n\n private _updatePanelPosition(): void {\n const field = this.fieldRef?.nativeElement;\n if (!field) return;\n const rect = field.getBoundingClientRect();\n const vh = window.innerHeight;\n const spaceBelow = vh - rect.bottom - 12;\n const spaceAbove = rect.top - 12;\n const openUp = spaceBelow < 240 && spaceAbove > spaceBelow;\n this.panelLeft.set(rect.left);\n this.panelWidth.set(rect.width);\n if (openUp) {\n this.panelTop.set(null);\n this.panelBottom.set(vh - rect.top + 6);\n this.panelMaxHeight.set(Math.max(120, spaceAbove));\n } else {\n this.panelTop.set(rect.bottom + 6);\n this.panelBottom.set(null);\n this.panelMaxHeight.set(Math.max(120, spaceBelow));\n }\n }\n\n private _emitChange(): void {\n this.tagsChange.emit({ values: this.values(), tags: this.selectedTags() });\n }\n}\n","<!-- SvTagInputComponent (Free) — Default variant -->\n<div class=\"relative flex w-full flex-col gap-1.5\">\n @if (label()) {\n <label class=\"text-xs font-semibold text-gray-700 dark:text-gray-200\">\n {{ label() }}\n @if (required()) { <span class=\"ml-0.5 text-rose-500\" aria-hidden=\"true\">*</span> }\n </label>\n }\n <div #fieldEl\n [class]=\"['flex flex-wrap cursor-text rounded-xl border transition-all duration-150', fieldMinHeight(),\n disabled() ? 'cursor-not-allowed opacity-50 bg-gray-50 border-gray-200 dark:bg-gray-800/50 dark:border-gray-700'\n : focused() || isOpen() ? 'border-primary-400 ring-2 ring-primary-400/25 bg-white dark:bg-gray-900 dark:border-primary-500'\n : errorMessage() ? 'border-rose-400 ring-2 ring-rose-400/20 bg-white dark:bg-gray-900'\n : 'border-gray-200 bg-white hover:border-gray-300 dark:border-gray-700 dark:bg-gray-900'].join(' ')\"\n (click)=\"focusInput()\">\n @for (tag of selectedTags(); track tag.value) {\n <span [class]=\"['inline-flex shrink-0 items-center rounded-full font-medium bg-gray-100 text-gray-700 ring-1 ring-gray-200/80 dark:bg-gray-800 dark:text-gray-300 dark:ring-gray-700', chipSizeClass()].join(' ')\">\n <span class=\"truncate max-w-[120px]\">{{ tag.label }}</span>\n @if (!disabled()) {\n <button type=\"button\" [attr.aria-label]=\"'Remove ' + tag.label\"\n class=\"ml-0.5 -mr-0.5 flex h-3.5 w-3.5 shrink-0 items-center justify-center rounded-full opacity-60 transition-opacity hover:opacity-100 focus-visible:outline-none\"\n (click)=\"removeTag(tag.value, $event)\">\n <svg class=\"h-2.5 w-2.5\" viewBox=\"0 0 10 10\" fill=\"currentColor\" aria-hidden=\"true\">\n <path d=\"M6.414 5l2.293-2.293a1 1 0 00-1.414-1.414L5 3.586 2.707 1.293A1 1 0 001.293 2.707L3.586 5 1.293 7.293a1 1 0 001.414 1.414L5 6.414l2.293 2.293a1 1 0 001.414-1.414L6.414 5z\"/>\n </svg>\n </button>\n }\n </span>\n }\n <input #inputEl type=\"text\" autocomplete=\"off\" spellcheck=\"false\"\n role=\"combobox\" aria-haspopup=\"listbox\" aria-autocomplete=\"list\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"isOpen() ? listboxId : null\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n [attr.aria-label]=\"accessibleName()\"\n [placeholder]=\"values().length === 0 ? placeholder() : ''\" [disabled]=\"disabled()\" [value]=\"query()\"\n [class]=\"['flex-1 min-w-[120px] bg-transparent text-gray-900 placeholder-gray-400 outline-none dark:text-gray-100 dark:placeholder-gray-500', inputTextClass()].join(' ')\"\n (input)=\"onInput($event)\" (keydown)=\"onKeydown($event)\" (focus)=\"onInputFocus()\" (blur)=\"onInputBlur()\" />\n <span class=\"ml-auto flex shrink-0 items-center gap-1 self-center pl-1\">\n @if (values().length > 0 && !disabled()) {\n <button type=\"button\" aria-label=\"Clear all\"\n class=\"flex h-5 w-5 items-center justify-center rounded-full text-gray-300 hover:bg-gray-100 hover:text-gray-500 dark:hover:bg-gray-800 dark:hover:text-gray-400 transition-colors\"\n (click)=\"clearAll($event)\">\n <svg class=\"h-3 w-3\" viewBox=\"0 0 12 12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" aria-hidden=\"true\"><path d=\"M1 1l10 10M11 1 1 11\"/></svg>\n </button>\n }\n <span class=\"pointer-events-none\">\n <svg class=\"h-4 w-4 text-gray-400 transition-transform duration-200 dark:text-gray-500\" [class.rotate-180]=\"isOpen()\"\n viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m6 9 6 6 6-6\"/>\n </svg>\n </span>\n </span>\n </div>\n @if (errorMessage()) {\n <p class=\"text-[11px] font-medium text-rose-500 dark:text-rose-400\">{{ errorMessage() }}</p>\n } @else if (hint()) {\n <p class=\"text-[11px] text-gray-500 dark:text-gray-400\">{{ hint() }}</p>\n }\n @if (isOpen()) {\n <div [attr.id]=\"listboxId\" role=\"listbox\" class=\"fixed z-[9999] overflow-hidden rounded-xl border border-gray-200 bg-white shadow-xl dark:border-gray-700 dark:bg-gray-900\"\n [style.top.px]=\"panelTop()\" [style.bottom.px]=\"panelBottom()\"\n [style.left.px]=\"panelLeft()\" [style.width.px]=\"panelWidth()\" [style.max-height.px]=\"panelMaxHeight()\">\n <div role=\"presentation\" class=\"overflow-y-auto overscroll-contain\" style=\"max-height: inherit\">\n @for (opt of filteredOptions(); track opt.value; let i = $index) {\n <div role=\"option\" [attr.id]=\"optionId(i)\" [attr.aria-selected]=\"activeIndex() === i\"\n [class]=\"['flex cursor-pointer items-center gap-2 px-3 py-2 text-sm transition-colors', opt.disabled ? 'opacity-40 cursor-not-allowed pointer-events-none' : '', activeIndex() === i ? 'bg-primary-50 dark:bg-primary-900/30' : 'hover:bg-gray-50 dark:hover:bg-gray-800/60'].join(' ')\"\n (click)=\"selectOption(opt)\" (mouseenter)=\"activeIndex.set(i)\">\n <span class=\"flex-1 truncate font-medium text-gray-800 dark:text-gray-100\">{{ opt.label }}</span>\n @if (activeIndex() === i) {\n <svg class=\"h-3.5 w-3.5 shrink-0 text-primary-500\" viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m2 7 3.5 3.5 6.5-7\"/></svg>\n }\n </div>\n }\n @if (noResults()) {\n <div role=\"presentation\" class=\"px-4 py-5 text-center text-xs text-gray-500 dark:text-gray-400\">No results found</div>\n }\n </div>\n </div>\n }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
package/package.json ADDED
@@ -0,0 +1,42 @@
1
+ {
2
+ "name": "@styloviz/tag-input",
3
+ "version": "0.1.1",
4
+ "description": "Tag / chip input for entering multiple tokens with keyboard and paste support.",
5
+ "license": "MIT",
6
+ "author": "sazzad-bs23",
7
+ "homepage": "https://styloviz.dev",
8
+ "repository": {
9
+ "type": "git",
10
+ "url": "git+https://github.com/rhossain/angular-tailwind-dashboard-components.git",
11
+ "directory": "projects/tag-input-free"
12
+ },
13
+ "bugs": {
14
+ "url": "https://github.com/rhossain/angular-tailwind-dashboard-components/issues"
15
+ },
16
+ "peerDependencies": {
17
+ "@angular/common": ">=21.0.0",
18
+ "@angular/core": ">=21.0.0"
19
+ },
20
+ "publishConfig": {
21
+ "access": "public"
22
+ },
23
+ "engines": {
24
+ "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
25
+ },
26
+ "sideEffects": false,
27
+ "module": "fesm2022/styloviz-tag-input.mjs",
28
+ "typings": "types/styloviz-tag-input.d.ts",
29
+ "exports": {
30
+ "./package.json": {
31
+ "default": "./package.json"
32
+ },
33
+ ".": {
34
+ "types": "./types/styloviz-tag-input.d.ts",
35
+ "default": "./fesm2022/styloviz-tag-input.mjs"
36
+ }
37
+ },
38
+ "type": "module",
39
+ "dependencies": {
40
+ "tslib": "^2.3.0"
41
+ }
42
+ }
package/types/styloviz-tag-input.d.ts ADDED
@@ -0,0 +1,89 @@
1
+ import * as _angular_core from '@angular/core';
2
+ import { OnDestroy } from '@angular/core';
3
+
4
+ type TagInputSize = 'sm' | 'md' | 'lg';
5
+ interface TagOption {
6
+ readonly value: string;
7
+ readonly label: string;
8
+ readonly sublabel?: string;
9
+ readonly disabled?: boolean;
10
+ }
11
+ interface TagInputChangeEvent {
12
+ readonly values: string[];
13
+ readonly tags: TagOption[];
14
+ }
15
+ /**
16
+ * SvTagInputComponent (Free) — Default variant only.
17
+ * Upgrade to @styloviz-pro/tag-input for 8 variants including with-avatar,
18
+ * grouped, creatable, with-colors, token-limit, async-search, and inline.
19
+ */
20
+ declare class SvTagInputComponent implements OnDestroy {
21
+ /** Current tags (two-way). */
22
+ values: _angular_core.ModelSignal<string[]>;
23
+ /** Suggestion options offered as the user types. */
24
+ options: _angular_core.InputSignal<TagOption[]>;
25
+ /** Field size: sm, md or lg. @default 'md' */
26
+ size: _angular_core.InputSignal<TagInputSize>;
27
+ /** Field label. */
28
+ label: _angular_core.InputSignal<string>;
29
+ /** Placeholder shown in the input. @default 'Add tags…' */
30
+ placeholder: _angular_core.InputSignal<string>;
31
+ /** Helper text shown below the field. */
32
+ hint: _angular_core.InputSignal<string>;
33
+ /** Error message; sets the field to an error state when present. */
34
+ errorMessage: _angular_core.InputSignal<string>;
35
+ /** Disable the field. @default false */
36
+ disabled: _angular_core.InputSignal<boolean>;
37
+ /** Mark the field as required. @default false */
38
+ required: _angular_core.InputSignal<boolean>;
39
+ /** Emitted with the change (added/removed tag + full list). */
40
+ readonly tagsChange: _angular_core.OutputEmitterRef<TagInputChangeEvent>;
41
+ private fieldRef;
42
+ private inputRef;
43
+ readonly isOpen: _angular_core.WritableSignal<boolean>;
44
+ readonly query: _angular_core.WritableSignal<string>;
45
+ readonly activeIndex: _angular_core.WritableSignal<number>;
46
+ readonly focused: _angular_core.WritableSignal<boolean>;
47
+ private readonly _baseId;
48
+ /** id of the options listbox (referenced by aria-controls). */
49
+ readonly listboxId: string;
50
+ /** DOM id for an option row at index `i`. */
51
+ optionId(i: number): string;
52
+ /** id of the active option, or null when nothing is highlighted. */
53
+ readonly activeDescendantId: _angular_core.Signal<string | null>;
54
+ /** Accessible name for the input — label, falling back to the placeholder. */
55
+ readonly accessibleName: _angular_core.Signal<string>;
56
+ readonly panelTop: _angular_core.WritableSignal<number | null>;
57
+ readonly panelBottom: _angular_core.WritableSignal<number | null>;
58
+ readonly panelLeft: _angular_core.WritableSignal<number>;
59
+ readonly panelWidth: _angular_core.WritableSignal<number>;
60
+ readonly panelMaxHeight: _angular_core.WritableSignal<number>;
61
+ private readonly host;
62
+ readonly selectedTags: _angular_core.Signal<TagOption[]>;
63
+ readonly filteredOptions: _angular_core.Signal<TagOption[]>;
64
+ readonly navigableList: _angular_core.Signal<TagOption[]>;
65
+ readonly noResults: _angular_core.Signal<boolean>;
66
+ readonly chipSizeClass: _angular_core.Signal<string>;
67
+ readonly fieldMinHeight: _angular_core.Signal<string>;
68
+ readonly inputTextClass: _angular_core.Signal<string>;
69
+ selectOption(opt: TagOption): void;
70
+ removeTag(value: string, event?: MouseEvent): void;
71
+ clearAll(event?: MouseEvent): void;
72
+ onInput(event: Event): void;
73
+ onKeydown(event: KeyboardEvent): void;
74
+ focusInput(): void;
75
+ onInputFocus(): void;
76
+ onInputBlur(): void;
77
+ open(): void;
78
+ close(): void;
79
+ onDocClick(event: MouseEvent): void;
80
+ onResize(): void;
81
+ ngOnDestroy(): void;
82
+ private _updatePanelPosition;
83
+ private _emitChange;
84
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<SvTagInputComponent, never>;
85
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<SvTagInputComponent, "sv-tag-input", never, { "values": { "alias": "values"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; }, { "values": "valuesChange"; "tagsChange": "tagsChange"; }, never, never, true, never>;
86
+ }
87
+
88
+ export { SvTagInputComponent };
89
+ export type { TagInputChangeEvent, TagInputSize, TagOption };