@tekus/design-system 1.0.0 → 1.0.3
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,6 +1,5 @@
|
|
|
1
|
-
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
|
2
|
-
|
|
3
1
|
import { SearchBarComponent } from './search-bar.component';
|
|
2
|
+
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
|
4
3
|
|
|
5
4
|
describe('SearchBarComponent', () => {
|
|
6
5
|
let component: SearchBarComponent;
|
|
@@ -8,7 +7,7 @@ describe('SearchBarComponent', () => {
|
|
|
8
7
|
|
|
9
8
|
beforeEach(() => {
|
|
10
9
|
TestBed.configureTestingModule({
|
|
11
|
-
imports: [SearchBarComponent]
|
|
10
|
+
imports: [SearchBarComponent],
|
|
12
11
|
});
|
|
13
12
|
fixture = TestBed.createComponent(SearchBarComponent);
|
|
14
13
|
component = fixture.componentInstance;
|
|
@@ -18,4 +17,38 @@ describe('SearchBarComponent', () => {
|
|
|
18
17
|
it('should create', () => {
|
|
19
18
|
expect(component).toBeTruthy();
|
|
20
19
|
});
|
|
20
|
+
|
|
21
|
+
it('should emit inputValueChange event with the input value when onInputChange is called', () => {
|
|
22
|
+
const inputValue = 'test input';
|
|
23
|
+
component.inputValue = inputValue;
|
|
24
|
+
spyOn(component.inputValueChange, 'emit');
|
|
25
|
+
component.onInputChange();
|
|
26
|
+
expect(component.inputValueChange.emit).toHaveBeenCalledWith(inputValue);
|
|
27
|
+
});
|
|
28
|
+
|
|
29
|
+
it('should focus on searchInput when onMouseEnter is called', () => {
|
|
30
|
+
const focusSpy = spyOn(component.searchInput.nativeElement, 'focus');
|
|
31
|
+
component.onMouseEnter();
|
|
32
|
+
expect(focusSpy).toHaveBeenCalled();
|
|
33
|
+
});
|
|
34
|
+
|
|
35
|
+
it('should clear inputValue and emit inputValueChange event with empty string when onInputClear is called', () => {
|
|
36
|
+
component.inputValue = 'test input';
|
|
37
|
+
spyOn(component.inputValueChange, 'emit');
|
|
38
|
+
component.onInputClear();
|
|
39
|
+
expect(component.inputValue).toBe('');
|
|
40
|
+
expect(component.inputValueChange.emit).toHaveBeenCalledWith('');
|
|
41
|
+
});
|
|
42
|
+
|
|
43
|
+
it('should set hintLabel input correctly', () => {
|
|
44
|
+
const hintLabel = 'test hint';
|
|
45
|
+
component.hintLabel = hintLabel;
|
|
46
|
+
expect(component.hintLabel).toBe(hintLabel);
|
|
47
|
+
});
|
|
48
|
+
|
|
49
|
+
it('should set backgroundColor input correctly', () => {
|
|
50
|
+
const backgroundColor = 'red';
|
|
51
|
+
component.backgroundColor = backgroundColor;
|
|
52
|
+
expect(component.backgroundColor).toBe(backgroundColor);
|
|
53
|
+
});
|
|
21
54
|
});
|
|
@@ -18,22 +18,19 @@ import { faMagnifyingGlass, faXmark } from '@fortawesome/pro-solid-svg-icons';
|
|
|
18
18
|
template: `<div
|
|
19
19
|
class="search__bar"
|
|
20
20
|
(mouseenter)="onMouseEnter()"
|
|
21
|
-
[ngStyle]="{ 'background-color': backgroundColor }"
|
|
22
|
-
>
|
|
21
|
+
[ngStyle]="{ 'background-color': backgroundColor }">
|
|
23
22
|
<input
|
|
24
23
|
class="search__bar__input"
|
|
25
24
|
type="text"
|
|
26
25
|
#searchInput
|
|
27
26
|
[(ngModel)]="inputValue"
|
|
28
27
|
[placeholder]="hintLabel"
|
|
29
|
-
(input)="onInputChange()"
|
|
30
|
-
/>
|
|
28
|
+
(input)="onInputChange()" />
|
|
31
29
|
<fa-icon
|
|
32
30
|
class="search__bar__clear__mark__icon"
|
|
33
31
|
[icon]="faXmark"
|
|
34
32
|
*ngIf="inputValue !== ''"
|
|
35
|
-
(click)="onInputClear()"
|
|
36
|
-
></fa-icon>
|
|
33
|
+
(click)="onInputClear()"></fa-icon>
|
|
37
34
|
<fa-icon [icon]="faMagnifyingGlass"></fa-icon>
|
|
38
35
|
</div>`,
|
|
39
36
|
styleUrls: ['./search-bar.component.css'],
|
package/documentation.json
CHANGED
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
"components": [
|
|
10
10
|
{
|
|
11
11
|
"name": "SearchBarComponent",
|
|
12
|
-
"id": "component-SearchBarComponent-
|
|
12
|
+
"id": "component-SearchBarComponent-4ee13de11aa08b3cb3fd2d16bf08aacfbb0762a33c8ee74339eb947d2daab9a0bb34821c6028bf478dda6035cb325bb44af1a09ef1589f9e8c18f162e0cedeec",
|
|
13
13
|
"file": "projects/design-system/components/search-bar/search-bar.component.ts",
|
|
14
14
|
"encapsulation": [],
|
|
15
15
|
"entryComponents": [],
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
"./search-bar.component.css"
|
|
22
22
|
],
|
|
23
23
|
"styles": [],
|
|
24
|
-
"template": "<div class=\"search__bar\"\n (mouseenter)=\"onMouseEnter()\"\n [ngStyle]=\"{ 'background-color': backgroundColor }\"
|
|
24
|
+
"template": "<div class=\"search__bar\"\n #searchBar\n (mouseenter)=\"onMouseEnter()\"\n [ngStyle]=\"{ 'background-color': backgroundColor }\">\n <input\n class=\"search__bar__input\"\n type=\"text\"\n #searchInput\n [(ngModel)]=\"inputValue\"\n [placeholder]=\"hintLabel\"\n (input)=\"onInputChange()\" />\n <fa-icon\n class=\"search__bar__clear__mark__icon\"\n [icon]=\"faXmark\"\n *ngIf=\"inputValue !== ''\"\n (click)=\"onInputClear()\"></fa-icon>\n <fa-icon [icon]=\"faMagnifyingGlass\"></fa-icon>\n </div>",
|
|
25
25
|
"templateUrl": [],
|
|
26
26
|
"viewProviders": [],
|
|
27
27
|
"hostDirectives": [],
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
"deprecationMessage": "",
|
|
33
33
|
"rawdescription": "\n\nWhat background color to use\n",
|
|
34
34
|
"description": "<p>What background color to use</p>\n",
|
|
35
|
-
"line":
|
|
35
|
+
"line": 57,
|
|
36
36
|
"type": "string",
|
|
37
37
|
"decorators": []
|
|
38
38
|
},
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
"deprecationMessage": "",
|
|
44
44
|
"rawdescription": "\n\nSearch bar hint label\n",
|
|
45
45
|
"description": "<p>Search bar hint label</p>\n",
|
|
46
|
-
"line":
|
|
46
|
+
"line": 51,
|
|
47
47
|
"type": "string",
|
|
48
48
|
"decorators": []
|
|
49
49
|
}
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
"deprecationMessage": "",
|
|
57
57
|
"rawdescription": "\n\nInput changes handler\n",
|
|
58
58
|
"description": "<p>Input changes handler</p>\n",
|
|
59
|
-
"line":
|
|
59
|
+
"line": 63,
|
|
60
60
|
"type": "EventEmitter"
|
|
61
61
|
}
|
|
62
62
|
],
|
|
@@ -69,7 +69,7 @@
|
|
|
69
69
|
"type": "",
|
|
70
70
|
"optional": false,
|
|
71
71
|
"description": "",
|
|
72
|
-
"line":
|
|
72
|
+
"line": 42,
|
|
73
73
|
"modifierKind": [
|
|
74
74
|
125,
|
|
75
75
|
148
|
|
@@ -83,7 +83,7 @@
|
|
|
83
83
|
"type": "",
|
|
84
84
|
"optional": false,
|
|
85
85
|
"description": "",
|
|
86
|
-
"line":
|
|
86
|
+
"line": 41,
|
|
87
87
|
"modifierKind": [
|
|
88
88
|
125,
|
|
89
89
|
148
|
|
@@ -97,11 +97,29 @@
|
|
|
97
97
|
"type": "string",
|
|
98
98
|
"optional": false,
|
|
99
99
|
"description": "",
|
|
100
|
-
"line":
|
|
100
|
+
"line": 40,
|
|
101
101
|
"modifierKind": [
|
|
102
102
|
125
|
|
103
103
|
]
|
|
104
104
|
},
|
|
105
|
+
{
|
|
106
|
+
"name": "searchBar",
|
|
107
|
+
"deprecated": false,
|
|
108
|
+
"deprecationMessage": "",
|
|
109
|
+
"type": "ElementRef",
|
|
110
|
+
"optional": false,
|
|
111
|
+
"description": "",
|
|
112
|
+
"line": 44,
|
|
113
|
+
"decorators": [
|
|
114
|
+
{
|
|
115
|
+
"name": "ViewChild",
|
|
116
|
+
"stringifiedArguments": "'searchBar', {static: false}"
|
|
117
|
+
}
|
|
118
|
+
],
|
|
119
|
+
"modifierKind": [
|
|
120
|
+
170
|
|
121
|
+
]
|
|
122
|
+
},
|
|
105
123
|
{
|
|
106
124
|
"name": "searchInput",
|
|
107
125
|
"deprecated": false,
|
|
@@ -109,7 +127,7 @@
|
|
|
109
127
|
"type": "ElementRef",
|
|
110
128
|
"optional": false,
|
|
111
129
|
"description": "",
|
|
112
|
-
"line":
|
|
130
|
+
"line": 45,
|
|
113
131
|
"decorators": [
|
|
114
132
|
{
|
|
115
133
|
"name": "ViewChild",
|
|
@@ -128,7 +146,7 @@
|
|
|
128
146
|
"optional": false,
|
|
129
147
|
"returnType": "void",
|
|
130
148
|
"typeParameters": [],
|
|
131
|
-
"line":
|
|
149
|
+
"line": 65,
|
|
132
150
|
"deprecated": false,
|
|
133
151
|
"deprecationMessage": "",
|
|
134
152
|
"modifierKind": [
|
|
@@ -154,7 +172,7 @@
|
|
|
154
172
|
"optional": false,
|
|
155
173
|
"returnType": "void",
|
|
156
174
|
"typeParameters": [],
|
|
157
|
-
"line":
|
|
175
|
+
"line": 69,
|
|
158
176
|
"deprecated": false,
|
|
159
177
|
"deprecationMessage": "",
|
|
160
178
|
"modifierKind": [
|
|
@@ -189,7 +207,7 @@
|
|
|
189
207
|
"description": "",
|
|
190
208
|
"rawdescription": "\n",
|
|
191
209
|
"type": "component",
|
|
192
|
-
"sourceCode": "import {\r\n Input,\r\n Output,\r\n Component,\r\n ViewChild,\r\n ElementRef,\r\n EventEmitter,\r\n} from '@angular/core';\r\nimport { FormsModule } from '@angular/forms';\r\nimport { NgClass, NgStyle, NgIf } from '@angular/common';\r\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\r\nimport { faMagnifyingGlass, faXmark } from '@fortawesome/pro-solid-svg-icons';\r\n\r\n@Component({\r\n selector: 'lib-tks-search-bar',\r\n standalone: true,\r\n imports: [NgIf, NgClass, NgStyle, FormsModule, FontAwesomeModule],\r\n template: `<div\r\n class=\"search__bar\"\r\n (mouseenter)=\"onMouseEnter()\"\r\n [ngStyle]=\"{ 'background-color': backgroundColor }\"
|
|
210
|
+
"sourceCode": "import {\r\n Input,\r\n Output,\r\n Component,\r\n ViewChild,\r\n ElementRef,\r\n EventEmitter,\r\n} from '@angular/core';\r\nimport { FormsModule } from '@angular/forms';\r\nimport { NgClass, NgStyle, NgIf } from '@angular/common';\r\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\r\nimport { faMagnifyingGlass, faXmark } from '@fortawesome/pro-solid-svg-icons';\r\n\r\n@Component({\r\n selector: 'lib-tks-search-bar',\r\n standalone: true,\r\n imports: [NgIf, NgClass, NgStyle, FormsModule, FontAwesomeModule],\r\n template: `<div\r\n class=\"search__bar\"\r\n #searchBar\r\n (mouseenter)=\"onMouseEnter()\"\r\n [ngStyle]=\"{ 'background-color': backgroundColor }\">\r\n <input\r\n class=\"search__bar__input\"\r\n type=\"text\"\r\n #searchInput\r\n [(ngModel)]=\"inputValue\"\r\n [placeholder]=\"hintLabel\"\r\n (input)=\"onInputChange()\" />\r\n <fa-icon\r\n class=\"search__bar__clear__mark__icon\"\r\n [icon]=\"faXmark\"\r\n *ngIf=\"inputValue !== ''\"\r\n (click)=\"onInputClear()\"></fa-icon>\r\n <fa-icon [icon]=\"faMagnifyingGlass\"></fa-icon>\r\n </div>`,\r\n styleUrls: ['./search-bar.component.css'],\r\n})\r\nexport class SearchBarComponent {\r\n public inputValue = '';\r\n public readonly faXmark = faXmark;\r\n public readonly faMagnifyingGlass = faMagnifyingGlass;\r\n\r\n @ViewChild('searchBar', { static: false }) searchBar!: ElementRef;\r\n @ViewChild('searchInput', { static: false }) searchInput!: ElementRef;\r\n\r\n /**\r\n * Search bar hint label\r\n */\r\n @Input()\r\n hintLabel = '';\r\n\r\n /**\r\n * What background color to use\r\n */\r\n @Input()\r\n backgroundColor?: string;\r\n\r\n /**\r\n * Input changes handler\r\n */\r\n @Output()\r\n inputValueChange = new EventEmitter<string>();\r\n\r\n public onInputChange(): void {\r\n this.inputValueChange.emit(this.inputValue);\r\n }\r\n\r\n public onMouseEnter(): void {\r\n this.searchInput.nativeElement.focus();\r\n this.searchBar.nativeElement.focus();\r\n }\r\n\r\n public onInputClear() {\r\n this.inputValue = '';\r\n this.inputValueChange.emit('');\r\n }\r\n}\r\n",
|
|
193
211
|
"assetsDirs": [],
|
|
194
212
|
"styleUrlsData": [
|
|
195
213
|
{
|
|
@@ -212,7 +230,7 @@
|
|
|
212
230
|
"deprecated": false,
|
|
213
231
|
"deprecationMessage": "",
|
|
214
232
|
"type": "Story",
|
|
215
|
-
"defaultValue": "{\r\n args: {\r\n hintLabel: 'Search...',\r\n },\r\n}"
|
|
233
|
+
"defaultValue": "{\r\n args: {\r\n hintLabel: 'Search...',\r\n backgroundColor: 'white',\r\n },\r\n}"
|
|
216
234
|
},
|
|
217
235
|
{
|
|
218
236
|
"name": "meta",
|
|
@@ -260,7 +278,7 @@
|
|
|
260
278
|
"deprecated": false,
|
|
261
279
|
"deprecationMessage": "",
|
|
262
280
|
"type": "Story",
|
|
263
|
-
"defaultValue": "{\r\n args: {\r\n hintLabel: 'Search...',\r\n },\r\n}"
|
|
281
|
+
"defaultValue": "{\r\n args: {\r\n hintLabel: 'Search...',\r\n backgroundColor: 'white',\r\n },\r\n}"
|
|
264
282
|
},
|
|
265
283
|
{
|
|
266
284
|
"name": "meta",
|
|
@@ -344,9 +362,9 @@
|
|
|
344
362
|
"type": "component",
|
|
345
363
|
"linktype": "component",
|
|
346
364
|
"name": "SearchBarComponent",
|
|
347
|
-
"coveragePercent":
|
|
348
|
-
"coverageCount": "3/
|
|
349
|
-
"status": "
|
|
365
|
+
"coveragePercent": 25,
|
|
366
|
+
"coverageCount": "3/12",
|
|
367
|
+
"status": "low"
|
|
350
368
|
}
|
|
351
369
|
]
|
|
352
370
|
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tekus/design-system",
|
|
3
3
|
"description": "Tekus design system library",
|
|
4
|
-
"version": "1.0.
|
|
4
|
+
"version": "1.0.3",
|
|
5
5
|
"license": "UNLICENSED",
|
|
6
6
|
"peerDependencies": {
|
|
7
7
|
"@angular/core": "^16.2.0",
|
|
@@ -13,19 +13,10 @@
|
|
|
13
13
|
"dependencies": {
|
|
14
14
|
"tslib": "^2.3.0"
|
|
15
15
|
},
|
|
16
|
-
"release": {
|
|
17
|
-
"branches": [
|
|
18
|
-
"master",
|
|
19
|
-
"develop"
|
|
20
|
-
],
|
|
21
|
-
"plugins": [
|
|
22
|
-
"@semantic-release/commit-analyzer",
|
|
23
|
-
"@semantic-release/release-notes-generator",
|
|
24
|
-
"@semantic-release/npm"
|
|
25
|
-
]
|
|
26
|
-
},
|
|
27
16
|
"publishConfig": {
|
|
28
|
-
"
|
|
17
|
+
"tag": "latest",
|
|
18
|
+
"access": "public",
|
|
19
|
+
"registry": "https://registry.npmjs.org/"
|
|
29
20
|
},
|
|
30
21
|
"sideEffects": false
|
|
31
22
|
}
|
package/.releaserc.json
DELETED
|
@@ -1,70 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"release": {
|
|
3
|
-
"branches": [
|
|
4
|
-
"master",
|
|
5
|
-
"develop"
|
|
6
|
-
],
|
|
7
|
-
"plugins": [
|
|
8
|
-
[
|
|
9
|
-
"@semantic-release/commit-analyzer",
|
|
10
|
-
{
|
|
11
|
-
"preset": "angular",
|
|
12
|
-
"releaseRules": [
|
|
13
|
-
{
|
|
14
|
-
"type": "breaking",
|
|
15
|
-
"release": "major"
|
|
16
|
-
},
|
|
17
|
-
{
|
|
18
|
-
"type": "refactor",
|
|
19
|
-
"release": "patch"
|
|
20
|
-
},
|
|
21
|
-
{
|
|
22
|
-
"type": "config",
|
|
23
|
-
"release": "patch"
|
|
24
|
-
},
|
|
25
|
-
{
|
|
26
|
-
"scope": "no-release",
|
|
27
|
-
"release": false
|
|
28
|
-
},
|
|
29
|
-
{
|
|
30
|
-
"scope": "test",
|
|
31
|
-
"release": false
|
|
32
|
-
}
|
|
33
|
-
],
|
|
34
|
-
"parserOpts": {
|
|
35
|
-
"noteKeywords": [
|
|
36
|
-
"BREAKING CHANGE",
|
|
37
|
-
"BREAKING CHANGES",
|
|
38
|
-
"BREAKING"
|
|
39
|
-
]
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
],
|
|
43
|
-
[
|
|
44
|
-
"@semantic-release/release-notes-generator",
|
|
45
|
-
{
|
|
46
|
-
"preset": "angular",
|
|
47
|
-
"parserOpts": {
|
|
48
|
-
"noteKeywords": [
|
|
49
|
-
"BREAKING CHANGE",
|
|
50
|
-
"BREAKING CHANGES",
|
|
51
|
-
"BREAKING"
|
|
52
|
-
]
|
|
53
|
-
},
|
|
54
|
-
"writerOpts": {
|
|
55
|
-
"commitsSort": [
|
|
56
|
-
"subject",
|
|
57
|
-
"scope"
|
|
58
|
-
]
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
],
|
|
62
|
-
[
|
|
63
|
-
"@semantic-release/npm",
|
|
64
|
-
{
|
|
65
|
-
"pkgRoot": "dist/design-system"
|
|
66
|
-
}
|
|
67
|
-
]
|
|
68
|
-
]
|
|
69
|
-
}
|
|
70
|
-
}
|