@forgeroute/ui 0.1.0 → 0.2.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.
|
@@ -1,14 +1,21 @@
|
|
|
1
1
|
import * as i0 from "@angular/core";
|
|
2
|
-
import { ChangeDetectionStrategy, Component,
|
|
3
|
-
import
|
|
4
|
-
import {
|
|
2
|
+
import { ChangeDetectionStrategy, Component, DestroyRef, inject, input, model, output } from "@angular/core";
|
|
3
|
+
import { Subject } from "rxjs";
|
|
4
|
+
import { debounceTime, distinctUntilChanged } from "rxjs/operators";
|
|
5
|
+
import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
|
|
5
6
|
var SearchInputComponent = class SearchInputComponent {
|
|
6
7
|
constructor() {
|
|
7
|
-
this.placeholder = "Search...";
|
|
8
|
-
this.ariaLabel = "";
|
|
9
|
-
this.value = "";
|
|
10
|
-
this.maxlength = 200;
|
|
11
|
-
this.
|
|
8
|
+
this.placeholder = input("Search...", ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
|
|
9
|
+
this.ariaLabel = input("", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
|
|
10
|
+
this.value = model("", ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
|
|
11
|
+
this.maxlength = input(200, ...ngDevMode ? [{ debugName: "maxlength" }] : /* istanbul ignore next */ []);
|
|
12
|
+
this.searchChange = output();
|
|
13
|
+
this.input$ = new Subject();
|
|
14
|
+
this.input$.pipe(debounceTime(300), distinctUntilChanged(), takeUntilDestroyed(inject(DestroyRef))).subscribe((val) => this.searchChange.emit(val));
|
|
15
|
+
}
|
|
16
|
+
onInput(val) {
|
|
17
|
+
this.value.set(val);
|
|
18
|
+
this.input$.next(val);
|
|
12
19
|
}
|
|
13
20
|
static {
|
|
14
21
|
this.ɵfac = i0.ɵɵngDeclareFactory({
|
|
@@ -22,18 +29,45 @@ var SearchInputComponent = class SearchInputComponent {
|
|
|
22
29
|
}
|
|
23
30
|
static {
|
|
24
31
|
this.ɵcmp = i0.ɵɵngDeclareComponent({
|
|
25
|
-
minVersion: "
|
|
32
|
+
minVersion: "17.1.0",
|
|
26
33
|
version: "22.2.2",
|
|
27
34
|
type: SearchInputComponent,
|
|
28
35
|
isStandalone: true,
|
|
29
36
|
selector: "ui-search-input",
|
|
30
37
|
inputs: {
|
|
31
|
-
placeholder:
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
38
|
+
placeholder: {
|
|
39
|
+
classPropertyName: "placeholder",
|
|
40
|
+
publicName: "placeholder",
|
|
41
|
+
isSignal: true,
|
|
42
|
+
isRequired: false,
|
|
43
|
+
transformFunction: null
|
|
44
|
+
},
|
|
45
|
+
ariaLabel: {
|
|
46
|
+
classPropertyName: "ariaLabel",
|
|
47
|
+
publicName: "ariaLabel",
|
|
48
|
+
isSignal: true,
|
|
49
|
+
isRequired: false,
|
|
50
|
+
transformFunction: null
|
|
51
|
+
},
|
|
52
|
+
value: {
|
|
53
|
+
classPropertyName: "value",
|
|
54
|
+
publicName: "value",
|
|
55
|
+
isSignal: true,
|
|
56
|
+
isRequired: false,
|
|
57
|
+
transformFunction: null
|
|
58
|
+
},
|
|
59
|
+
maxlength: {
|
|
60
|
+
classPropertyName: "maxlength",
|
|
61
|
+
publicName: "maxlength",
|
|
62
|
+
isSignal: true,
|
|
63
|
+
isRequired: false,
|
|
64
|
+
transformFunction: null
|
|
65
|
+
}
|
|
66
|
+
},
|
|
67
|
+
outputs: {
|
|
68
|
+
value: "valueChange",
|
|
69
|
+
searchChange: "searchChange"
|
|
35
70
|
},
|
|
36
|
-
outputs: { valueChange: "valueChange" },
|
|
37
71
|
ngImport: i0,
|
|
38
72
|
template: `
|
|
39
73
|
<div class="search-bar" role="search">
|
|
@@ -54,53 +88,18 @@ var SearchInputComponent = class SearchInputComponent {
|
|
|
54
88
|
<input
|
|
55
89
|
class="search-input"
|
|
56
90
|
type="search"
|
|
57
|
-
[placeholder]="placeholder"
|
|
58
|
-
[attr.aria-label]="ariaLabel || placeholder"
|
|
59
|
-
[
|
|
60
|
-
(
|
|
91
|
+
[placeholder]="placeholder()"
|
|
92
|
+
[attr.aria-label]="ariaLabel() || placeholder()"
|
|
93
|
+
[value]="value()"
|
|
94
|
+
(input)="onInput($any($event.target).value)"
|
|
61
95
|
autocomplete="off"
|
|
62
96
|
inputmode="search"
|
|
63
|
-
[maxlength]="maxlength"
|
|
97
|
+
[attr.maxlength]="maxlength()"
|
|
64
98
|
data-testid="search-input" />
|
|
65
99
|
</div>
|
|
66
100
|
`,
|
|
67
101
|
isInline: true,
|
|
68
102
|
styles: [":host{display:block}.search-bar{position:relative;display:flex;align-items:center}.search-icon{position:absolute;left:10px;color:#94a3b8;pointer-events:none}.search-input{width:100%;padding:8px 10px 8px 34px;border:1px solid #e2e8f0;border-radius:6px;font-size:.875rem;background:#fff;color:#1e293b;outline:none;min-width:380px;font-family:inherit;transition:border-color .15s}.search-input:focus{border-color:#1e293b;box-shadow:0 0 0 3px #1e293b14}.search-input::placeholder{color:#94a3b8}@media(max-width:768px){.search-input{min-width:180px}}@media(max-width:480px){.search-input{min-width:0;width:100%;font-size:16px}}\n"],
|
|
69
|
-
dependencies: [
|
|
70
|
-
{
|
|
71
|
-
kind: "ngmodule",
|
|
72
|
-
type: FormsModule
|
|
73
|
-
},
|
|
74
|
-
{
|
|
75
|
-
kind: "directive",
|
|
76
|
-
type: i1.DefaultValueAccessor,
|
|
77
|
-
selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]"
|
|
78
|
-
},
|
|
79
|
-
{
|
|
80
|
-
kind: "directive",
|
|
81
|
-
type: i1.NgControlStatus,
|
|
82
|
-
selector: "[formControlName],[ngModel],[formControl]"
|
|
83
|
-
},
|
|
84
|
-
{
|
|
85
|
-
kind: "directive",
|
|
86
|
-
type: i1.MaxLengthValidator,
|
|
87
|
-
selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]",
|
|
88
|
-
inputs: ["maxlength"]
|
|
89
|
-
},
|
|
90
|
-
{
|
|
91
|
-
kind: "directive",
|
|
92
|
-
type: i1.NgModel,
|
|
93
|
-
selector: "[ngModel]:not([formControlName]):not([formControl])",
|
|
94
|
-
inputs: [
|
|
95
|
-
"name",
|
|
96
|
-
"disabled",
|
|
97
|
-
"ngModel",
|
|
98
|
-
"ngModelOptions"
|
|
99
|
-
],
|
|
100
|
-
outputs: ["ngModelChange"],
|
|
101
|
-
exportAs: ["ngModel"]
|
|
102
|
-
}
|
|
103
|
-
],
|
|
104
103
|
changeDetection: i0.ChangeDetectionStrategy.OnPush
|
|
105
104
|
});
|
|
106
105
|
}
|
|
@@ -115,7 +114,6 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
115
114
|
args: [{
|
|
116
115
|
selector: "ui-search-input",
|
|
117
116
|
standalone: true,
|
|
118
|
-
imports: [FormsModule],
|
|
119
117
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
120
118
|
template: `
|
|
121
119
|
<div class="search-bar" role="search">
|
|
@@ -136,25 +134,60 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
136
134
|
<input
|
|
137
135
|
class="search-input"
|
|
138
136
|
type="search"
|
|
139
|
-
[placeholder]="placeholder"
|
|
140
|
-
[attr.aria-label]="ariaLabel || placeholder"
|
|
141
|
-
[
|
|
142
|
-
(
|
|
137
|
+
[placeholder]="placeholder()"
|
|
138
|
+
[attr.aria-label]="ariaLabel() || placeholder()"
|
|
139
|
+
[value]="value()"
|
|
140
|
+
(input)="onInput($any($event.target).value)"
|
|
143
141
|
autocomplete="off"
|
|
144
142
|
inputmode="search"
|
|
145
|
-
[maxlength]="maxlength"
|
|
143
|
+
[attr.maxlength]="maxlength()"
|
|
146
144
|
data-testid="search-input" />
|
|
147
145
|
</div>
|
|
148
146
|
`,
|
|
149
147
|
styles: [":host{display:block}.search-bar{position:relative;display:flex;align-items:center}.search-icon{position:absolute;left:10px;color:#94a3b8;pointer-events:none}.search-input{width:100%;padding:8px 10px 8px 34px;border:1px solid #e2e8f0;border-radius:6px;font-size:.875rem;background:#fff;color:#1e293b;outline:none;min-width:380px;font-family:inherit;transition:border-color .15s}.search-input:focus{border-color:#1e293b;box-shadow:0 0 0 3px #1e293b14}.search-input::placeholder{color:#94a3b8}@media(max-width:768px){.search-input{min-width:180px}}@media(max-width:480px){.search-input{min-width:0;width:100%;font-size:16px}}\n"]
|
|
150
148
|
}]
|
|
151
149
|
}],
|
|
150
|
+
ctorParameters: () => [],
|
|
152
151
|
propDecorators: {
|
|
153
|
-
placeholder: [{
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
152
|
+
placeholder: [{
|
|
153
|
+
type: i0.Input,
|
|
154
|
+
args: [{
|
|
155
|
+
isSignal: true,
|
|
156
|
+
alias: "placeholder",
|
|
157
|
+
required: false
|
|
158
|
+
}]
|
|
159
|
+
}],
|
|
160
|
+
ariaLabel: [{
|
|
161
|
+
type: i0.Input,
|
|
162
|
+
args: [{
|
|
163
|
+
isSignal: true,
|
|
164
|
+
alias: "ariaLabel",
|
|
165
|
+
required: false
|
|
166
|
+
}]
|
|
167
|
+
}],
|
|
168
|
+
value: [{
|
|
169
|
+
type: i0.Input,
|
|
170
|
+
args: [{
|
|
171
|
+
isSignal: true,
|
|
172
|
+
alias: "value",
|
|
173
|
+
required: false
|
|
174
|
+
}]
|
|
175
|
+
}, {
|
|
176
|
+
type: i0.Output,
|
|
177
|
+
args: ["valueChange"]
|
|
178
|
+
}],
|
|
179
|
+
maxlength: [{
|
|
180
|
+
type: i0.Input,
|
|
181
|
+
args: [{
|
|
182
|
+
isSignal: true,
|
|
183
|
+
alias: "maxlength",
|
|
184
|
+
required: false
|
|
185
|
+
}]
|
|
186
|
+
}],
|
|
187
|
+
searchChange: [{
|
|
188
|
+
type: i0.Output,
|
|
189
|
+
args: ["searchChange"]
|
|
190
|
+
}]
|
|
158
191
|
}
|
|
159
192
|
});
|
|
160
193
|
export { SearchInputComponent };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"forgeroute-ui.mjs","names":[],"sources":["../../../projects/forgeroute-ui/src/lib/search-input/search-input.component.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"forgeroute-ui.mjs","names":[],"sources":["../../../projects/forgeroute-ui/src/lib/search-input/search-input.component.ts"],"sourcesContent":["import {\n Component, input, output, model,\n ChangeDetectionStrategy, inject, DestroyRef,\n} from '@angular/core';\nimport { Subject } from 'rxjs';\nimport { debounceTime, distinctUntilChanged } from 'rxjs/operators';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\n\n@Component({\n selector: 'ui-search-input',\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n <div class=\"search-bar\" role=\"search\">\n <svg\n class=\"search-icon\"\n aria-hidden=\"true\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\">\n <circle cx=\"11\" cy=\"11\" r=\"8\"/>\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/>\n </svg>\n <input\n class=\"search-input\"\n type=\"search\"\n [placeholder]=\"placeholder()\"\n [attr.aria-label]=\"ariaLabel() || placeholder()\"\n [value]=\"value()\"\n (input)=\"onInput($any($event.target).value)\"\n autocomplete=\"off\"\n inputmode=\"search\"\n [attr.maxlength]=\"maxlength()\"\n data-testid=\"search-input\" />\n </div>\n `,\n styles: [`\n :host { display: block; }\n\n .search-bar {\n position: relative;\n display: flex;\n align-items: center;\n }\n\n .search-icon {\n position: absolute;\n left: 10px;\n color: #94a3b8;\n pointer-events: none;\n }\n\n .search-input {\n width: 100%;\n padding: 8px 10px 8px 34px;\n border: 1px solid #e2e8f0;\n border-radius: 6px;\n font-size: 0.875rem;\n background: #fff;\n color: #1e293b;\n outline: none;\n min-width: 380px;\n font-family: inherit;\n transition: border-color 0.15s;\n }\n\n .search-input:focus {\n border-color: #1e293b;\n box-shadow: 0 0 0 3px rgba(30, 41, 59, 0.08);\n }\n\n .search-input::placeholder { color: #94a3b8; }\n\n @media (max-width: 768px) {\n .search-input { min-width: 180px; }\n }\n\n @media (max-width: 480px) {\n .search-input { min-width: 0; width: 100%; font-size: 16px; }\n }\n `],\n})\nexport class SearchInputComponent {\n readonly placeholder = input('Search...');\n readonly ariaLabel = input('');\n readonly value = model('');\n readonly maxlength = input(200);\n\n /** Emits the debounced search value after 300ms of inactivity. Use this to trigger API calls. */\n readonly searchChange = output<string>();\n\n private readonly input$ = new Subject<string>();\n\n constructor() {\n this.input$.pipe(\n debounceTime(300),\n distinctUntilChanged(),\n takeUntilDestroyed(inject(DestroyRef)),\n ).subscribe(val => this.searchChange.emit(val));\n }\n\n onInput(val: string): void {\n this.value.set(val);\n this.input$.next(val);\n }\n}\n"],"mappings":";;;;;AAuFA,IAAa,uBAAb,MAAa,qBAAoB;CAW/B,cAAA;EAVS,KAAA,cAAc,MAAM,aAAY,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;EAChC,KAAA,YAAY,MAAM,IAAG,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;EACrB,KAAA,QAAQ,MAAM,IAAG,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;EACjB,KAAA,YAAY,MAAM,KAAI,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;EAGtB,KAAA,eAAe,OAAM;EAEb,KAAA,SAAS,IAAI,QAAO;EAGnC,KAAK,OAAO,KACV,aAAa,GAAG,GAChB,qBAAoB,GACpB,mBAAmB,OAAO,UAAU,CAAC,CAAC,CACvC,CAAC,WAAU,QAAO,KAAK,aAAa,KAAK,GAAG,CAAC;CAChD;CAEA,QAAQ,KAAW;EACjB,KAAK,MAAM,IAAI,GAAG;EAClB,KAAK,OAAO,KAAK,GAAG;CACtB;CAtBW;EAAA,KAAA,OAAA,GAAA,mBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,UAAA;GAAA,MAAA;GAAoB,MAAA,CAAA;GAAA,QAAA,GAAA,gBAAA;EAAA,CAAA;CAAA;CAApB;EAAA,KAAA,OAAA,GAAA,qBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,MAAA;GAAoB,cAAA;GAAA,UAAA;GAAA,QAAA;IAAA,aAAA;KAAA,mBAAA;KAAA,YAAA;KAAA,UAAA;KAAA,YAAA;KAAA,mBAAA;IAAA;IAAA,WAAA;KAAA,mBAAA;KAAA,YAAA;KAAA,UAAA;KAAA,YAAA;KAAA,mBAAA;IAAA;IAAA,OAAA;KAAA,mBAAA;KAAA,YAAA;KAAA,UAAA;KAAA,YAAA;KAAA,mBAAA;IAAA;IAAA,WAAA;KAAA,mBAAA;KAAA,YAAA;KAAA,UAAA;KAAA,YAAA;KAAA,mBAAA;IAAA;GAAA;GAAA,SAAA;IAAA,OAAA;IAAA,cAAA;GAAA;GAAA,UAAA;GAAA,UA3ErB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BT,UAAA;GAAA,QAAA,CAAA,knBAAA;GAAA,iBAAA,GAAA,wBAAA;EAAA,CAAA;CAAA;;AA+CU,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAoB,YAAA,CAAA;EA/EhC,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAiB,YACf;GAAI,iBACC,wBAAwB;GAAM,UACrC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BT,QAAA,CAAA,knBAAA;EAAA,CAAA"}
|
package/package.json
CHANGED
package/types/forgeroute-ui.d.ts
CHANGED
|
@@ -1,30 +1,38 @@
|
|
|
1
1
|
import * as i0 from "@angular/core";
|
|
2
|
-
import { EventEmitter } from "@angular/core";
|
|
3
2
|
export declare class SearchInputComponent {
|
|
4
|
-
placeholder: string
|
|
5
|
-
ariaLabel: string
|
|
6
|
-
value: string
|
|
7
|
-
maxlength: number
|
|
8
|
-
|
|
3
|
+
readonly placeholder: import("@angular/core").InputSignal<string>;
|
|
4
|
+
readonly ariaLabel: import("@angular/core").InputSignal<string>;
|
|
5
|
+
readonly value: import("@angular/core").ModelSignal<string>;
|
|
6
|
+
readonly maxlength: import("@angular/core").InputSignal<number>;
|
|
7
|
+
/** Emits the debounced search value after 300ms of inactivity. Use this to trigger API calls. */
|
|
8
|
+
readonly searchChange: import("@angular/core").OutputEmitterRef<string>;
|
|
9
|
+
private readonly input$;
|
|
10
|
+
constructor();
|
|
11
|
+
onInput(val: string): void;
|
|
9
12
|
static ɵfac: i0.ɵɵFactoryDeclaration<SearchInputComponent, never>;
|
|
10
13
|
static ɵcmp: i0.ɵɵComponentDeclaration<SearchInputComponent, "ui-search-input", never, {
|
|
11
14
|
"placeholder": {
|
|
12
15
|
"alias": "placeholder";
|
|
13
16
|
"required": false;
|
|
17
|
+
"isSignal": true;
|
|
14
18
|
};
|
|
15
19
|
"ariaLabel": {
|
|
16
20
|
"alias": "ariaLabel";
|
|
17
21
|
"required": false;
|
|
22
|
+
"isSignal": true;
|
|
18
23
|
};
|
|
19
24
|
"value": {
|
|
20
25
|
"alias": "value";
|
|
21
26
|
"required": false;
|
|
27
|
+
"isSignal": true;
|
|
22
28
|
};
|
|
23
29
|
"maxlength": {
|
|
24
30
|
"alias": "maxlength";
|
|
25
31
|
"required": false;
|
|
32
|
+
"isSignal": true;
|
|
26
33
|
};
|
|
27
34
|
}, {
|
|
28
|
-
"
|
|
35
|
+
"value": "valueChange";
|
|
36
|
+
"searchChange": "searchChange";
|
|
29
37
|
}, never, never, true, never>;
|
|
30
38
|
}
|