@tekus/design-system 0.0.72 → 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.eslintrc.json +37 -0
- package/.releaserc.json +70 -0
- package/.storybook/main.ts +19 -0
- package/.storybook/preview.ts +18 -0
- package/.storybook/tsconfig.json +23 -0
- package/.storybook/typings.d.ts +4 -0
- package/components/search-bar/index.ts +1 -0
- package/components/search-bar/ng-package.json +5 -0
- package/components/search-bar/search-bar.component.css +46 -0
- package/components/search-bar/search-bar.component.spec.ts +21 -0
- package/components/search-bar/search-bar.component.stories.ts +28 -0
- package/components/search-bar/search-bar.component.ts +78 -0
- package/documentation.json +353 -0
- package/index.ts +1 -0
- package/karma-ci.conf.js +54 -0
- package/karma.conf.js +33 -0
- package/ng-package.json +7 -0
- package/package.json +23 -23
- package/tsconfig.lib.json +14 -0
- package/tsconfig.lib.prod.json +10 -0
- package/tsconfig.spec.json +14 -0
- package/components/search-bar/index.d.ts +0 -5
- package/components/search-bar/search-bar.component.d.ts +0 -26
- package/esm2022/components/search-bar/public-api.mjs +0 -2
- package/esm2022/components/search-bar/search-bar.component.mjs +0 -102
- package/esm2022/components/search-bar/tekus-design-system-components-search-bar.mjs +0 -5
- package/esm2022/index.mjs +0 -2
- package/esm2022/tekus-design-system.mjs +0 -5
- package/fesm2022/tekus-design-system-components-search-bar.mjs +0 -109
- package/fesm2022/tekus-design-system-components-search-bar.mjs.map +0 -1
- package/fesm2022/tekus-design-system.mjs +0 -4
- package/fesm2022/tekus-design-system.mjs.map +0 -1
- package/index.d.ts +0 -1
- /package/components/search-bar/{public-api.d.ts → public-api.ts} +0 -0
package/.eslintrc.json
ADDED
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
{
|
|
2
|
+
"extends": "../../.eslintrc.json",
|
|
3
|
+
"ignorePatterns": [
|
|
4
|
+
"!**/*"
|
|
5
|
+
],
|
|
6
|
+
"overrides": [
|
|
7
|
+
{
|
|
8
|
+
"files": [
|
|
9
|
+
"*.ts"
|
|
10
|
+
],
|
|
11
|
+
"rules": {
|
|
12
|
+
"@angular-eslint/directive-selector": [
|
|
13
|
+
"error",
|
|
14
|
+
{
|
|
15
|
+
"type": "attribute",
|
|
16
|
+
"prefix": "lib",
|
|
17
|
+
"style": "camelCase"
|
|
18
|
+
}
|
|
19
|
+
],
|
|
20
|
+
"@angular-eslint/component-selector": [
|
|
21
|
+
"error",
|
|
22
|
+
{
|
|
23
|
+
"type": "element",
|
|
24
|
+
"prefix": "lib",
|
|
25
|
+
"style": "kebab-case"
|
|
26
|
+
}
|
|
27
|
+
]
|
|
28
|
+
}
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
"files": [
|
|
32
|
+
"*.html"
|
|
33
|
+
],
|
|
34
|
+
"rules": {}
|
|
35
|
+
}
|
|
36
|
+
]
|
|
37
|
+
}
|
package/.releaserc.json
ADDED
|
@@ -0,0 +1,70 @@
|
|
|
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
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import type { StorybookConfig } from '@storybook/angular';
|
|
2
|
+
|
|
3
|
+
const config: StorybookConfig = {
|
|
4
|
+
stories: ['../**/*.mdx', '../**/*.stories.@(js|jsx|mjs|ts|tsx)'],
|
|
5
|
+
addons: [
|
|
6
|
+
'@storybook/addon-a11y',
|
|
7
|
+
'@storybook/addon-links',
|
|
8
|
+
'@storybook/addon-essentials',
|
|
9
|
+
'@storybook/addon-interactions',
|
|
10
|
+
],
|
|
11
|
+
framework: {
|
|
12
|
+
name: '@storybook/angular',
|
|
13
|
+
options: {},
|
|
14
|
+
},
|
|
15
|
+
docs: {
|
|
16
|
+
autodocs: 'tag',
|
|
17
|
+
},
|
|
18
|
+
};
|
|
19
|
+
export default config;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import type { Preview } from "@storybook/angular";
|
|
2
|
+
import { setCompodocJson } from "@storybook/addon-docs/angular";
|
|
3
|
+
import docJson from "../documentation.json";
|
|
4
|
+
setCompodocJson(docJson);
|
|
5
|
+
|
|
6
|
+
const preview: Preview = {
|
|
7
|
+
parameters: {
|
|
8
|
+
actions: { argTypesRegex: "^on[A-Z].*" },
|
|
9
|
+
controls: {
|
|
10
|
+
matchers: {
|
|
11
|
+
color: /(background|color)$/i,
|
|
12
|
+
date: /Date$/i,
|
|
13
|
+
},
|
|
14
|
+
},
|
|
15
|
+
},
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
export default preview;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
{
|
|
2
|
+
"extends": "../tsconfig.lib.json",
|
|
3
|
+
"compilerOptions": {
|
|
4
|
+
"types": [
|
|
5
|
+
"node"
|
|
6
|
+
],
|
|
7
|
+
"allowSyntheticDefaultImports": true,
|
|
8
|
+
"resolveJsonModule": true
|
|
9
|
+
},
|
|
10
|
+
"exclude": [
|
|
11
|
+
"../test.ts",
|
|
12
|
+
"../**/*.spec.ts"
|
|
13
|
+
],
|
|
14
|
+
"include": [
|
|
15
|
+
"../**/*",
|
|
16
|
+
"./preview.ts",
|
|
17
|
+
"../stories/**/*",
|
|
18
|
+
"../projects/**/*"
|
|
19
|
+
],
|
|
20
|
+
"files": [
|
|
21
|
+
"./typings.d.ts"
|
|
22
|
+
]
|
|
23
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './public-api';
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
* {
|
|
2
|
+
margin: 0;
|
|
3
|
+
padding: 0;
|
|
4
|
+
box-sizing: border-box;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
.search__bar {
|
|
8
|
+
display: flex;
|
|
9
|
+
cursor: pointer;
|
|
10
|
+
max-width: 15rem;
|
|
11
|
+
padding: 0.3rem 0;
|
|
12
|
+
width: fit-content;
|
|
13
|
+
align-items: center;
|
|
14
|
+
justify-content: center;
|
|
15
|
+
background-color: white;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.search__bar:hover {
|
|
19
|
+
border-bottom: 2px solid black;
|
|
20
|
+
.search__bar__input {
|
|
21
|
+
width: 13rem;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.search__bar__input {
|
|
26
|
+
width: 0;
|
|
27
|
+
border: none;
|
|
28
|
+
outline: none;
|
|
29
|
+
font-weight: 500;
|
|
30
|
+
background: transparent;
|
|
31
|
+
transition: all ease-in-out 0.5s;
|
|
32
|
+
font-size: clamp(0.8rem, 0.675rem + 0.333vw, 0.975rem);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.search__bar__input:focus {
|
|
36
|
+
width: 13rem;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.search__bar__clear__mark__icon {
|
|
40
|
+
margin: 0 0.5rem;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.search__bar__clear__mark__icon:hover {
|
|
44
|
+
scale: 1.3;
|
|
45
|
+
transition: all ease-in-out 0.1s;
|
|
46
|
+
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
|
2
|
+
|
|
3
|
+
import { SearchBarComponent } from './search-bar.component';
|
|
4
|
+
|
|
5
|
+
describe('SearchBarComponent', () => {
|
|
6
|
+
let component: SearchBarComponent;
|
|
7
|
+
let fixture: ComponentFixture<SearchBarComponent>;
|
|
8
|
+
|
|
9
|
+
beforeEach(() => {
|
|
10
|
+
TestBed.configureTestingModule({
|
|
11
|
+
imports: [SearchBarComponent]
|
|
12
|
+
});
|
|
13
|
+
fixture = TestBed.createComponent(SearchBarComponent);
|
|
14
|
+
component = fixture.componentInstance;
|
|
15
|
+
fixture.detectChanges();
|
|
16
|
+
});
|
|
17
|
+
|
|
18
|
+
it('should create', () => {
|
|
19
|
+
expect(component).toBeTruthy();
|
|
20
|
+
});
|
|
21
|
+
});
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/angular';
|
|
2
|
+
import { SearchBarComponent } from './search-bar.component';
|
|
3
|
+
|
|
4
|
+
const meta: Meta<SearchBarComponent> = {
|
|
5
|
+
title: 'Components/Search bar',
|
|
6
|
+
component: SearchBarComponent,
|
|
7
|
+
tags: ['autodocs'],
|
|
8
|
+
render: (args: SearchBarComponent) => ({
|
|
9
|
+
props: {
|
|
10
|
+
backgroundColor: null,
|
|
11
|
+
...args,
|
|
12
|
+
},
|
|
13
|
+
}),
|
|
14
|
+
argTypes: {
|
|
15
|
+
backgroundColor: {
|
|
16
|
+
control: 'color',
|
|
17
|
+
},
|
|
18
|
+
},
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
export default meta;
|
|
22
|
+
type Story = StoryObj<SearchBarComponent>;
|
|
23
|
+
|
|
24
|
+
export const Default: Story = {
|
|
25
|
+
args: {
|
|
26
|
+
hintLabel: 'Search...',
|
|
27
|
+
},
|
|
28
|
+
};
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
import {
|
|
2
|
+
Input,
|
|
3
|
+
Output,
|
|
4
|
+
Component,
|
|
5
|
+
ViewChild,
|
|
6
|
+
ElementRef,
|
|
7
|
+
EventEmitter,
|
|
8
|
+
} from '@angular/core';
|
|
9
|
+
import { FormsModule } from '@angular/forms';
|
|
10
|
+
import { NgClass, NgStyle, NgIf } from '@angular/common';
|
|
11
|
+
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
|
|
12
|
+
import { faMagnifyingGlass, faXmark } from '@fortawesome/pro-solid-svg-icons';
|
|
13
|
+
|
|
14
|
+
@Component({
|
|
15
|
+
selector: 'lib-tks-search-bar',
|
|
16
|
+
standalone: true,
|
|
17
|
+
imports: [NgIf, NgClass, NgStyle, FormsModule, FontAwesomeModule],
|
|
18
|
+
template: `<div
|
|
19
|
+
class="search__bar"
|
|
20
|
+
(mouseenter)="onMouseEnter()"
|
|
21
|
+
[ngStyle]="{ 'background-color': backgroundColor }"
|
|
22
|
+
>
|
|
23
|
+
<input
|
|
24
|
+
class="search__bar__input"
|
|
25
|
+
type="text"
|
|
26
|
+
#searchInput
|
|
27
|
+
[(ngModel)]="inputValue"
|
|
28
|
+
[placeholder]="hintLabel"
|
|
29
|
+
(input)="onInputChange()"
|
|
30
|
+
/>
|
|
31
|
+
<fa-icon
|
|
32
|
+
class="search__bar__clear__mark__icon"
|
|
33
|
+
[icon]="faXmark"
|
|
34
|
+
*ngIf="inputValue !== ''"
|
|
35
|
+
(click)="onInputClear()"
|
|
36
|
+
></fa-icon>
|
|
37
|
+
<fa-icon [icon]="faMagnifyingGlass"></fa-icon>
|
|
38
|
+
</div>`,
|
|
39
|
+
styleUrls: ['./search-bar.component.css'],
|
|
40
|
+
})
|
|
41
|
+
export class SearchBarComponent {
|
|
42
|
+
public inputValue = '';
|
|
43
|
+
public readonly faXmark = faXmark;
|
|
44
|
+
public readonly faMagnifyingGlass = faMagnifyingGlass;
|
|
45
|
+
|
|
46
|
+
@ViewChild('searchInput', { static: false }) searchInput!: ElementRef;
|
|
47
|
+
|
|
48
|
+
/**
|
|
49
|
+
* Search bar hint label
|
|
50
|
+
*/
|
|
51
|
+
@Input()
|
|
52
|
+
hintLabel = '';
|
|
53
|
+
|
|
54
|
+
/**
|
|
55
|
+
* What background color to use
|
|
56
|
+
*/
|
|
57
|
+
@Input()
|
|
58
|
+
backgroundColor?: string;
|
|
59
|
+
|
|
60
|
+
/**
|
|
61
|
+
* Input changes handler
|
|
62
|
+
*/
|
|
63
|
+
@Output()
|
|
64
|
+
inputValueChange = new EventEmitter<string>();
|
|
65
|
+
|
|
66
|
+
public onInputChange(): void {
|
|
67
|
+
this.inputValueChange.emit(this.inputValue);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
public onMouseEnter(): void {
|
|
71
|
+
this.searchInput.nativeElement.focus();
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
public onInputClear() {
|
|
75
|
+
this.inputValue = '';
|
|
76
|
+
this.inputValueChange.emit('');
|
|
77
|
+
}
|
|
78
|
+
}
|
|
@@ -0,0 +1,353 @@
|
|
|
1
|
+
{
|
|
2
|
+
"pipes": [],
|
|
3
|
+
"interfaces": [],
|
|
4
|
+
"injectables": [],
|
|
5
|
+
"guards": [],
|
|
6
|
+
"interceptors": [],
|
|
7
|
+
"classes": [],
|
|
8
|
+
"directives": [],
|
|
9
|
+
"components": [
|
|
10
|
+
{
|
|
11
|
+
"name": "SearchBarComponent",
|
|
12
|
+
"id": "component-SearchBarComponent-156c4af21a25c48d8e250fbc16afa094a51bca6928ab043169ccde6bdbe7f4f454ea3d4227dbcdcedae5f2248272488deb1fbe87782b500473a684e3318701d3",
|
|
13
|
+
"file": "projects/design-system/components/search-bar/search-bar.component.ts",
|
|
14
|
+
"encapsulation": [],
|
|
15
|
+
"entryComponents": [],
|
|
16
|
+
"inputs": [],
|
|
17
|
+
"outputs": [],
|
|
18
|
+
"providers": [],
|
|
19
|
+
"selector": "lib-tks-search-bar",
|
|
20
|
+
"styleUrls": [
|
|
21
|
+
"./search-bar.component.css"
|
|
22
|
+
],
|
|
23
|
+
"styles": [],
|
|
24
|
+
"template": "<div class=\"search__bar\"\n (mouseenter)=\"onMouseEnter()\"\n [ngStyle]=\"{ 'background-color': backgroundColor }\"\n >\n <input\n class=\"search__bar__input\"\n type=\"text\"\n #searchInput\n [(ngModel)]=\"inputValue\"\n [placeholder]=\"hintLabel\"\n (input)=\"onInputChange()\"\n />\n <fa-icon\n class=\"search__bar__clear__mark__icon\"\n [icon]=\"faXmark\"\n *ngIf=\"inputValue !== ''\"\n (click)=\"onInputClear()\"\n ></fa-icon>\n <fa-icon [icon]=\"faMagnifyingGlass\"></fa-icon>\n </div>",
|
|
25
|
+
"templateUrl": [],
|
|
26
|
+
"viewProviders": [],
|
|
27
|
+
"hostDirectives": [],
|
|
28
|
+
"inputsClass": [
|
|
29
|
+
{
|
|
30
|
+
"name": "backgroundColor",
|
|
31
|
+
"deprecated": false,
|
|
32
|
+
"deprecationMessage": "",
|
|
33
|
+
"rawdescription": "\n\nWhat background color to use\n",
|
|
34
|
+
"description": "<p>What background color to use</p>\n",
|
|
35
|
+
"line": 58,
|
|
36
|
+
"type": "string",
|
|
37
|
+
"decorators": []
|
|
38
|
+
},
|
|
39
|
+
{
|
|
40
|
+
"name": "hintLabel",
|
|
41
|
+
"defaultValue": "''",
|
|
42
|
+
"deprecated": false,
|
|
43
|
+
"deprecationMessage": "",
|
|
44
|
+
"rawdescription": "\n\nSearch bar hint label\n",
|
|
45
|
+
"description": "<p>Search bar hint label</p>\n",
|
|
46
|
+
"line": 52,
|
|
47
|
+
"type": "string",
|
|
48
|
+
"decorators": []
|
|
49
|
+
}
|
|
50
|
+
],
|
|
51
|
+
"outputsClass": [
|
|
52
|
+
{
|
|
53
|
+
"name": "inputValueChange",
|
|
54
|
+
"defaultValue": "new EventEmitter<string>()",
|
|
55
|
+
"deprecated": false,
|
|
56
|
+
"deprecationMessage": "",
|
|
57
|
+
"rawdescription": "\n\nInput changes handler\n",
|
|
58
|
+
"description": "<p>Input changes handler</p>\n",
|
|
59
|
+
"line": 64,
|
|
60
|
+
"type": "EventEmitter"
|
|
61
|
+
}
|
|
62
|
+
],
|
|
63
|
+
"propertiesClass": [
|
|
64
|
+
{
|
|
65
|
+
"name": "faMagnifyingGlass",
|
|
66
|
+
"defaultValue": "faMagnifyingGlass",
|
|
67
|
+
"deprecated": false,
|
|
68
|
+
"deprecationMessage": "",
|
|
69
|
+
"type": "",
|
|
70
|
+
"optional": false,
|
|
71
|
+
"description": "",
|
|
72
|
+
"line": 44,
|
|
73
|
+
"modifierKind": [
|
|
74
|
+
125,
|
|
75
|
+
148
|
|
76
|
+
]
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
"name": "faXmark",
|
|
80
|
+
"defaultValue": "faXmark",
|
|
81
|
+
"deprecated": false,
|
|
82
|
+
"deprecationMessage": "",
|
|
83
|
+
"type": "",
|
|
84
|
+
"optional": false,
|
|
85
|
+
"description": "",
|
|
86
|
+
"line": 43,
|
|
87
|
+
"modifierKind": [
|
|
88
|
+
125,
|
|
89
|
+
148
|
|
90
|
+
]
|
|
91
|
+
},
|
|
92
|
+
{
|
|
93
|
+
"name": "inputValue",
|
|
94
|
+
"defaultValue": "''",
|
|
95
|
+
"deprecated": false,
|
|
96
|
+
"deprecationMessage": "",
|
|
97
|
+
"type": "string",
|
|
98
|
+
"optional": false,
|
|
99
|
+
"description": "",
|
|
100
|
+
"line": 42,
|
|
101
|
+
"modifierKind": [
|
|
102
|
+
125
|
|
103
|
+
]
|
|
104
|
+
},
|
|
105
|
+
{
|
|
106
|
+
"name": "searchInput",
|
|
107
|
+
"deprecated": false,
|
|
108
|
+
"deprecationMessage": "",
|
|
109
|
+
"type": "ElementRef",
|
|
110
|
+
"optional": false,
|
|
111
|
+
"description": "",
|
|
112
|
+
"line": 46,
|
|
113
|
+
"decorators": [
|
|
114
|
+
{
|
|
115
|
+
"name": "ViewChild",
|
|
116
|
+
"stringifiedArguments": "'searchInput', {static: false}"
|
|
117
|
+
}
|
|
118
|
+
],
|
|
119
|
+
"modifierKind": [
|
|
120
|
+
170
|
|
121
|
+
]
|
|
122
|
+
}
|
|
123
|
+
],
|
|
124
|
+
"methodsClass": [
|
|
125
|
+
{
|
|
126
|
+
"name": "onInputChange",
|
|
127
|
+
"args": [],
|
|
128
|
+
"optional": false,
|
|
129
|
+
"returnType": "void",
|
|
130
|
+
"typeParameters": [],
|
|
131
|
+
"line": 66,
|
|
132
|
+
"deprecated": false,
|
|
133
|
+
"deprecationMessage": "",
|
|
134
|
+
"modifierKind": [
|
|
135
|
+
125
|
|
136
|
+
]
|
|
137
|
+
},
|
|
138
|
+
{
|
|
139
|
+
"name": "onInputClear",
|
|
140
|
+
"args": [],
|
|
141
|
+
"optional": false,
|
|
142
|
+
"returnType": "void",
|
|
143
|
+
"typeParameters": [],
|
|
144
|
+
"line": 74,
|
|
145
|
+
"deprecated": false,
|
|
146
|
+
"deprecationMessage": "",
|
|
147
|
+
"modifierKind": [
|
|
148
|
+
125
|
|
149
|
+
]
|
|
150
|
+
},
|
|
151
|
+
{
|
|
152
|
+
"name": "onMouseEnter",
|
|
153
|
+
"args": [],
|
|
154
|
+
"optional": false,
|
|
155
|
+
"returnType": "void",
|
|
156
|
+
"typeParameters": [],
|
|
157
|
+
"line": 70,
|
|
158
|
+
"deprecated": false,
|
|
159
|
+
"deprecationMessage": "",
|
|
160
|
+
"modifierKind": [
|
|
161
|
+
125
|
|
162
|
+
]
|
|
163
|
+
}
|
|
164
|
+
],
|
|
165
|
+
"deprecated": false,
|
|
166
|
+
"deprecationMessage": "",
|
|
167
|
+
"hostBindings": [],
|
|
168
|
+
"hostListeners": [],
|
|
169
|
+
"standalone": true,
|
|
170
|
+
"imports": [
|
|
171
|
+
{
|
|
172
|
+
"name": "NgIf"
|
|
173
|
+
},
|
|
174
|
+
{
|
|
175
|
+
"name": "NgClass"
|
|
176
|
+
},
|
|
177
|
+
{
|
|
178
|
+
"name": "NgStyle"
|
|
179
|
+
},
|
|
180
|
+
{
|
|
181
|
+
"name": "FormsModule",
|
|
182
|
+
"type": "module"
|
|
183
|
+
},
|
|
184
|
+
{
|
|
185
|
+
"name": "FontAwesomeModule",
|
|
186
|
+
"type": "module"
|
|
187
|
+
}
|
|
188
|
+
],
|
|
189
|
+
"description": "",
|
|
190
|
+
"rawdescription": "\n",
|
|
191
|
+
"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 }\"\r\n >\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 />\r\n <fa-icon\r\n class=\"search__bar__clear__mark__icon\"\r\n [icon]=\"faXmark\"\r\n *ngIf=\"inputValue !== ''\"\r\n (click)=\"onInputClear()\"\r\n ></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('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 }\r\n\r\n public onInputClear() {\r\n this.inputValue = '';\r\n this.inputValueChange.emit('');\r\n }\r\n}\r\n",
|
|
193
|
+
"assetsDirs": [],
|
|
194
|
+
"styleUrlsData": [
|
|
195
|
+
{
|
|
196
|
+
"data": "* {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n}\r\n\r\n.search__bar {\r\n display: flex;\r\n cursor: pointer;\r\n max-width: 15rem;\r\n padding: 0.3rem 0;\r\n width: fit-content;\r\n align-items: center;\r\n justify-content: center;\r\n background-color: white;\r\n}\r\n\r\n.search__bar:hover {\r\n border-bottom: 2px solid black;\r\n .search__bar__input {\r\n width: 13rem;\r\n }\r\n}\r\n\r\n.search__bar__input {\r\n width: 0;\r\n border: none;\r\n outline: none;\r\n font-weight: 500;\r\n background: transparent;\r\n transition: all ease-in-out 0.5s;\r\n font-size: clamp(0.8rem, 0.675rem + 0.333vw, 0.975rem);\r\n}\r\n\r\n.search__bar__input:focus {\r\n width: 13rem;\r\n}\r\n\r\n.search__bar__clear__mark__icon {\r\n margin: 0 0.5rem;\r\n}\r\n\r\n.search__bar__clear__mark__icon:hover {\r\n scale: 1.3;\r\n transition: all ease-in-out 0.1s;\r\n}\r\n",
|
|
197
|
+
"styleUrl": "./search-bar.component.css"
|
|
198
|
+
}
|
|
199
|
+
],
|
|
200
|
+
"stylesData": "",
|
|
201
|
+
"extends": []
|
|
202
|
+
}
|
|
203
|
+
],
|
|
204
|
+
"modules": [],
|
|
205
|
+
"miscellaneous": {
|
|
206
|
+
"variables": [
|
|
207
|
+
{
|
|
208
|
+
"name": "Default",
|
|
209
|
+
"ctype": "miscellaneous",
|
|
210
|
+
"subtype": "variable",
|
|
211
|
+
"file": "projects/design-system/components/search-bar/search-bar.component.stories.ts",
|
|
212
|
+
"deprecated": false,
|
|
213
|
+
"deprecationMessage": "",
|
|
214
|
+
"type": "Story",
|
|
215
|
+
"defaultValue": "{\r\n args: {\r\n hintLabel: 'Search...',\r\n },\r\n}"
|
|
216
|
+
},
|
|
217
|
+
{
|
|
218
|
+
"name": "meta",
|
|
219
|
+
"ctype": "miscellaneous",
|
|
220
|
+
"subtype": "variable",
|
|
221
|
+
"file": "projects/design-system/components/search-bar/search-bar.component.stories.ts",
|
|
222
|
+
"deprecated": false,
|
|
223
|
+
"deprecationMessage": "",
|
|
224
|
+
"type": "Meta<SearchBarComponent>",
|
|
225
|
+
"defaultValue": "{\r\n title: 'Components/Search bar',\r\n component: SearchBarComponent,\r\n tags: ['autodocs'],\r\n render: (args: SearchBarComponent) => ({\r\n props: {\r\n backgroundColor: null,\r\n ...args,\r\n },\r\n }),\r\n argTypes: {\r\n backgroundColor: {\r\n control: 'color',\r\n },\r\n },\r\n}"
|
|
226
|
+
},
|
|
227
|
+
{
|
|
228
|
+
"name": "preview",
|
|
229
|
+
"ctype": "miscellaneous",
|
|
230
|
+
"subtype": "variable",
|
|
231
|
+
"file": "projects/design-system/.storybook/preview.ts",
|
|
232
|
+
"deprecated": false,
|
|
233
|
+
"deprecationMessage": "",
|
|
234
|
+
"type": "Preview",
|
|
235
|
+
"defaultValue": "{\n parameters: {\n actions: { argTypesRegex: \"^on[A-Z].*\" },\n controls: {\n matchers: {\n color: /(background|color)$/i,\n date: /Date$/i,\n },\n },\n },\n}"
|
|
236
|
+
}
|
|
237
|
+
],
|
|
238
|
+
"functions": [],
|
|
239
|
+
"typealiases": [
|
|
240
|
+
{
|
|
241
|
+
"name": "Story",
|
|
242
|
+
"ctype": "miscellaneous",
|
|
243
|
+
"subtype": "typealias",
|
|
244
|
+
"rawtype": "StoryObj<SearchBarComponent>",
|
|
245
|
+
"file": "projects/design-system/components/search-bar/search-bar.component.stories.ts",
|
|
246
|
+
"deprecated": false,
|
|
247
|
+
"deprecationMessage": "",
|
|
248
|
+
"description": "",
|
|
249
|
+
"kind": 183
|
|
250
|
+
}
|
|
251
|
+
],
|
|
252
|
+
"enumerations": [],
|
|
253
|
+
"groupedVariables": {
|
|
254
|
+
"projects/design-system/components/search-bar/search-bar.component.stories.ts": [
|
|
255
|
+
{
|
|
256
|
+
"name": "Default",
|
|
257
|
+
"ctype": "miscellaneous",
|
|
258
|
+
"subtype": "variable",
|
|
259
|
+
"file": "projects/design-system/components/search-bar/search-bar.component.stories.ts",
|
|
260
|
+
"deprecated": false,
|
|
261
|
+
"deprecationMessage": "",
|
|
262
|
+
"type": "Story",
|
|
263
|
+
"defaultValue": "{\r\n args: {\r\n hintLabel: 'Search...',\r\n },\r\n}"
|
|
264
|
+
},
|
|
265
|
+
{
|
|
266
|
+
"name": "meta",
|
|
267
|
+
"ctype": "miscellaneous",
|
|
268
|
+
"subtype": "variable",
|
|
269
|
+
"file": "projects/design-system/components/search-bar/search-bar.component.stories.ts",
|
|
270
|
+
"deprecated": false,
|
|
271
|
+
"deprecationMessage": "",
|
|
272
|
+
"type": "Meta<SearchBarComponent>",
|
|
273
|
+
"defaultValue": "{\r\n title: 'Components/Search bar',\r\n component: SearchBarComponent,\r\n tags: ['autodocs'],\r\n render: (args: SearchBarComponent) => ({\r\n props: {\r\n backgroundColor: null,\r\n ...args,\r\n },\r\n }),\r\n argTypes: {\r\n backgroundColor: {\r\n control: 'color',\r\n },\r\n },\r\n}"
|
|
274
|
+
}
|
|
275
|
+
],
|
|
276
|
+
"projects/design-system/.storybook/preview.ts": [
|
|
277
|
+
{
|
|
278
|
+
"name": "preview",
|
|
279
|
+
"ctype": "miscellaneous",
|
|
280
|
+
"subtype": "variable",
|
|
281
|
+
"file": "projects/design-system/.storybook/preview.ts",
|
|
282
|
+
"deprecated": false,
|
|
283
|
+
"deprecationMessage": "",
|
|
284
|
+
"type": "Preview",
|
|
285
|
+
"defaultValue": "{\n parameters: {\n actions: { argTypesRegex: \"^on[A-Z].*\" },\n controls: {\n matchers: {\n color: /(background|color)$/i,\n date: /Date$/i,\n },\n },\n },\n}"
|
|
286
|
+
}
|
|
287
|
+
]
|
|
288
|
+
},
|
|
289
|
+
"groupedFunctions": {},
|
|
290
|
+
"groupedEnumerations": {},
|
|
291
|
+
"groupedTypeAliases": {
|
|
292
|
+
"projects/design-system/components/search-bar/search-bar.component.stories.ts": [
|
|
293
|
+
{
|
|
294
|
+
"name": "Story",
|
|
295
|
+
"ctype": "miscellaneous",
|
|
296
|
+
"subtype": "typealias",
|
|
297
|
+
"rawtype": "StoryObj<SearchBarComponent>",
|
|
298
|
+
"file": "projects/design-system/components/search-bar/search-bar.component.stories.ts",
|
|
299
|
+
"deprecated": false,
|
|
300
|
+
"deprecationMessage": "",
|
|
301
|
+
"description": "",
|
|
302
|
+
"kind": 183
|
|
303
|
+
}
|
|
304
|
+
]
|
|
305
|
+
}
|
|
306
|
+
},
|
|
307
|
+
"routes": [],
|
|
308
|
+
"coverage": {
|
|
309
|
+
"count": 6,
|
|
310
|
+
"status": "low",
|
|
311
|
+
"files": [
|
|
312
|
+
{
|
|
313
|
+
"filePath": "projects/design-system/.storybook/preview.ts",
|
|
314
|
+
"type": "variable",
|
|
315
|
+
"linktype": "miscellaneous",
|
|
316
|
+
"linksubtype": "variable",
|
|
317
|
+
"name": "preview",
|
|
318
|
+
"coveragePercent": 0,
|
|
319
|
+
"coverageCount": "0/1",
|
|
320
|
+
"status": "low"
|
|
321
|
+
},
|
|
322
|
+
{
|
|
323
|
+
"filePath": "projects/design-system/components/search-bar/search-bar.component.stories.ts",
|
|
324
|
+
"type": "variable",
|
|
325
|
+
"linktype": "miscellaneous",
|
|
326
|
+
"linksubtype": "variable",
|
|
327
|
+
"name": "Default",
|
|
328
|
+
"coveragePercent": 0,
|
|
329
|
+
"coverageCount": "0/1",
|
|
330
|
+
"status": "low"
|
|
331
|
+
},
|
|
332
|
+
{
|
|
333
|
+
"filePath": "projects/design-system/components/search-bar/search-bar.component.stories.ts",
|
|
334
|
+
"type": "variable",
|
|
335
|
+
"linktype": "miscellaneous",
|
|
336
|
+
"linksubtype": "variable",
|
|
337
|
+
"name": "meta",
|
|
338
|
+
"coveragePercent": 0,
|
|
339
|
+
"coverageCount": "0/1",
|
|
340
|
+
"status": "low"
|
|
341
|
+
},
|
|
342
|
+
{
|
|
343
|
+
"filePath": "projects/design-system/components/search-bar/search-bar.component.ts",
|
|
344
|
+
"type": "component",
|
|
345
|
+
"linktype": "component",
|
|
346
|
+
"name": "SearchBarComponent",
|
|
347
|
+
"coveragePercent": 27,
|
|
348
|
+
"coverageCount": "3/11",
|
|
349
|
+
"status": "medium"
|
|
350
|
+
}
|
|
351
|
+
]
|
|
352
|
+
}
|
|
353
|
+
}
|
package/index.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/karma-ci.conf.js
ADDED
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
// Karma configuration file, see link for more information
|
|
2
|
+
// https://karma-runner.github.io/1.0/config/configuration-file.html
|
|
3
|
+
|
|
4
|
+
module.exports = function (config) {
|
|
5
|
+
config.set({
|
|
6
|
+
basePath: "",
|
|
7
|
+
frameworks: ["jasmine", "@angular-devkit/build-angular"],
|
|
8
|
+
plugins: [
|
|
9
|
+
require("karma-jasmine"),
|
|
10
|
+
require("karma-chrome-launcher"),
|
|
11
|
+
require("karma-jasmine-html-reporter"),
|
|
12
|
+
require("karma-coverage"),
|
|
13
|
+
require("@angular-devkit/build-angular/plugins/karma"),
|
|
14
|
+
],
|
|
15
|
+
client: {
|
|
16
|
+
clearContext: false, // leave Jasmine Spec Runner output visible in browser
|
|
17
|
+
},
|
|
18
|
+
jasmineHtmlReporter: {
|
|
19
|
+
suppressAll: true, // removes the duplicated traces
|
|
20
|
+
},
|
|
21
|
+
coverageReporter: {
|
|
22
|
+
dir: require("path").join(__dirname, "../../coverage/design-system"),
|
|
23
|
+
subdir: ".",
|
|
24
|
+
reporters: [{ type: "lcov" }],
|
|
25
|
+
fixWebpackSourcePaths: true,
|
|
26
|
+
thresholds: {
|
|
27
|
+
statements: 50,
|
|
28
|
+
lines: 50,
|
|
29
|
+
branches: 50,
|
|
30
|
+
functions: 50,
|
|
31
|
+
},
|
|
32
|
+
},
|
|
33
|
+
reporters: ["progress", "kjhtml"],
|
|
34
|
+
port: 9876,
|
|
35
|
+
colors: true,
|
|
36
|
+
logLevel: config.LOG_INFO,
|
|
37
|
+
autoWatch: false,
|
|
38
|
+
restartOnFileChange: true,
|
|
39
|
+
browsers: ["ChromeHeadless"],
|
|
40
|
+
customLaunchers: {
|
|
41
|
+
ChromeHeadless: {
|
|
42
|
+
base: "Chrome",
|
|
43
|
+
flags: [
|
|
44
|
+
"--headless",
|
|
45
|
+
"--disable-gpu",
|
|
46
|
+
"--no-sandbox",
|
|
47
|
+
"--remote-debugging-port=9222",
|
|
48
|
+
],
|
|
49
|
+
},
|
|
50
|
+
},
|
|
51
|
+
singleRun: true,
|
|
52
|
+
browserNoActivityTimeout: 40000,
|
|
53
|
+
});
|
|
54
|
+
};
|
package/karma.conf.js
ADDED
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
// Karma configuration file, see link for more information
|
|
2
|
+
// https://karma-runner.github.io/1.0/config/configuration-file.html
|
|
3
|
+
|
|
4
|
+
module.exports = function (config) {
|
|
5
|
+
config.set({
|
|
6
|
+
basePath: "",
|
|
7
|
+
frameworks: ["jasmine", "@angular-devkit/build-angular"],
|
|
8
|
+
files: [
|
|
9
|
+
"projects/**/*.ts", // Buscará todos los archivos .ts dentro de la carpeta design-system y sus subdirectorios
|
|
10
|
+
],
|
|
11
|
+
plugins: [
|
|
12
|
+
require("karma-jasmine"),
|
|
13
|
+
require("karma-chrome-launcher"),
|
|
14
|
+
require("karma-jasmine-html-reporter"),
|
|
15
|
+
require("karma-coverage"),
|
|
16
|
+
require("@angular-devkit/build-angular/plugins/karma"),
|
|
17
|
+
],
|
|
18
|
+
client: {
|
|
19
|
+
clearContext: false, // leave Jasmine Spec Runner output visible in browser
|
|
20
|
+
},
|
|
21
|
+
jasmineHtmlReporter: {
|
|
22
|
+
suppressAll: true, // removes the duplicated traces
|
|
23
|
+
},
|
|
24
|
+
coverageReporter: {
|
|
25
|
+
dir: require("path").join(__dirname, "../../coverage/design-system"),
|
|
26
|
+
subdir: ".",
|
|
27
|
+
reporters: [{ type: "html" }, { type: "text-summary" }],
|
|
28
|
+
},
|
|
29
|
+
reporters: ["progress", "kjhtml"],
|
|
30
|
+
browsers: ["Chrome"],
|
|
31
|
+
restartOnFileChange: true,
|
|
32
|
+
});
|
|
33
|
+
};
|
package/ng-package.json
ADDED
package/package.json
CHANGED
|
@@ -1,31 +1,31 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tekus/design-system",
|
|
3
|
-
"
|
|
3
|
+
"description": "Tekus design system library",
|
|
4
|
+
"version": "1.0.0",
|
|
5
|
+
"license": "UNLICENSED",
|
|
4
6
|
"peerDependencies": {
|
|
5
7
|
"@angular/core": "^16.2.0",
|
|
6
|
-
"@angular/common": "^16.2.0"
|
|
8
|
+
"@angular/common": "^16.2.0",
|
|
9
|
+
"@fortawesome/pro-solid-svg-icons": "^6.4.2",
|
|
10
|
+
"@fortawesome/angular-fontawesome": "^0.13.0",
|
|
11
|
+
"@fortawesome/fontawesome-svg-core": "^6.4.2"
|
|
7
12
|
},
|
|
8
13
|
"dependencies": {
|
|
9
14
|
"tslib": "^2.3.0"
|
|
10
15
|
},
|
|
11
|
-
"
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
"
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
"esm": "./esm2022/components/search-bar/tekus-design-system-components-search-bar.mjs",
|
|
28
|
-
"default": "./fesm2022/tekus-design-system-components-search-bar.mjs"
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
}
|
|
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
|
+
"publishConfig": {
|
|
28
|
+
"access": "public"
|
|
29
|
+
},
|
|
30
|
+
"sideEffects": false
|
|
31
|
+
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/* To learn more about this file see: https://angular.io/config/tsconfig. */
|
|
2
|
+
{
|
|
3
|
+
"extends": "../../tsconfig.json",
|
|
4
|
+
"compilerOptions": {
|
|
5
|
+
"outDir": "../../out-tsc/lib",
|
|
6
|
+
"declaration": true,
|
|
7
|
+
"declarationMap": true,
|
|
8
|
+
"inlineSources": true,
|
|
9
|
+
"types": []
|
|
10
|
+
},
|
|
11
|
+
"exclude": [
|
|
12
|
+
"**/*.spec.ts"
|
|
13
|
+
]
|
|
14
|
+
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/* To learn more about this file see: https://angular.io/config/tsconfig. */
|
|
2
|
+
{
|
|
3
|
+
"extends": "../../tsconfig.json",
|
|
4
|
+
"compilerOptions": {
|
|
5
|
+
"outDir": "../../out-tsc/spec",
|
|
6
|
+
"types": [
|
|
7
|
+
"jasmine"
|
|
8
|
+
]
|
|
9
|
+
},
|
|
10
|
+
"include": [
|
|
11
|
+
"**/*.spec.ts",
|
|
12
|
+
"**/*.d.ts"
|
|
13
|
+
]
|
|
14
|
+
}
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import { EventEmitter } from '@angular/core';
|
|
2
|
-
import * as i0 from "@angular/core";
|
|
3
|
-
export declare class SearchBarComponent {
|
|
4
|
-
inputValue: string;
|
|
5
|
-
isSearchBarExpanded: boolean;
|
|
6
|
-
readonly faXmark: import("@fortawesome/fontawesome-common-types").IconDefinition;
|
|
7
|
-
readonly faMagnifyingGlass: import("@fortawesome/fontawesome-common-types").IconDefinition;
|
|
8
|
-
/**
|
|
9
|
-
* Search bar hint label
|
|
10
|
-
*/
|
|
11
|
-
hintLabel: string;
|
|
12
|
-
/**
|
|
13
|
-
* What background color to use
|
|
14
|
-
*/
|
|
15
|
-
backgroundColor?: string;
|
|
16
|
-
/**
|
|
17
|
-
* Input changes handler
|
|
18
|
-
*/
|
|
19
|
-
inputValueChange: EventEmitter<string>;
|
|
20
|
-
onInputChange(): void;
|
|
21
|
-
onClickClearInput(): void;
|
|
22
|
-
onMouseEnter(): void;
|
|
23
|
-
onMouseLeave(): void;
|
|
24
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<SearchBarComponent, never>;
|
|
25
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<SearchBarComponent, "lib-tks-search-bar", never, { "hintLabel": { "alias": "hintLabel"; "required": false; }; "backgroundColor": { "alias": "backgroundColor"; "required": false; }; }, { "inputValueChange": "inputValueChange"; }, never, never, true, never>;
|
|
26
|
-
}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
export * from './search-bar.component';
|
|
2
|
-
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2Rlc2lnbi1zeXN0ZW0vY29tcG9uZW50cy9zZWFyY2gtYmFyL3B1YmxpYy1hcGkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYyx3QkFBd0IsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCAqIGZyb20gJy4vc2VhcmNoLWJhci5jb21wb25lbnQnO1xyXG4iXX0=
|
|
@@ -1,102 +0,0 @@
|
|
|
1
|
-
import { FormsModule } from '@angular/forms';
|
|
2
|
-
import { NgClass, NgStyle, NgIf } from '@angular/common';
|
|
3
|
-
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
|
|
4
|
-
import { Input, Output, Component, EventEmitter } from '@angular/core';
|
|
5
|
-
import { faMagnifyingGlass, faXmark } from '@fortawesome/pro-solid-svg-icons';
|
|
6
|
-
import * as i0 from "@angular/core";
|
|
7
|
-
import * as i1 from "@angular/forms";
|
|
8
|
-
import * as i2 from "@fortawesome/angular-fontawesome";
|
|
9
|
-
export class SearchBarComponent {
|
|
10
|
-
constructor() {
|
|
11
|
-
this.inputValue = '';
|
|
12
|
-
this.isSearchBarExpanded = false;
|
|
13
|
-
this.faXmark = faXmark;
|
|
14
|
-
this.faMagnifyingGlass = faMagnifyingGlass;
|
|
15
|
-
/**
|
|
16
|
-
* Search bar hint label
|
|
17
|
-
*/
|
|
18
|
-
this.hintLabel = '';
|
|
19
|
-
/**
|
|
20
|
-
* Input changes handler
|
|
21
|
-
*/
|
|
22
|
-
this.inputValueChange = new EventEmitter();
|
|
23
|
-
}
|
|
24
|
-
onInputChange() {
|
|
25
|
-
console.log('Input value has changed');
|
|
26
|
-
this.inputValueChange.emit(this.inputValue);
|
|
27
|
-
}
|
|
28
|
-
onClickClearInput() {
|
|
29
|
-
console.log('Input has been cleared');
|
|
30
|
-
this.inputValue = '';
|
|
31
|
-
this.inputValueChange.emit(this.inputValue);
|
|
32
|
-
}
|
|
33
|
-
onMouseEnter() {
|
|
34
|
-
console.log('Mouse has entered');
|
|
35
|
-
if (this.isSearchBarExpanded === false) {
|
|
36
|
-
this.isSearchBarExpanded = true;
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
onMouseLeave() {
|
|
40
|
-
console.log('Mouse has left');
|
|
41
|
-
if (this.inputValue === '') {
|
|
42
|
-
this.isSearchBarExpanded = false;
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
46
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SearchBarComponent, isStandalone: true, selector: "lib-tks-search-bar", inputs: { hintLabel: "hintLabel", backgroundColor: "backgroundColor" }, outputs: { inputValueChange: "inputValueChange" }, ngImport: i0, template: `<div
|
|
47
|
-
(mouseenter)="onMouseEnter()"
|
|
48
|
-
(mouseleave)="onMouseLeave()"
|
|
49
|
-
[ngStyle]="{ 'background-color': backgroundColor }"
|
|
50
|
-
[ngClass]="
|
|
51
|
-
isSearchBarExpanded ? 'search__bar search__bar--opened' : 'search__bar'
|
|
52
|
-
"
|
|
53
|
-
>
|
|
54
|
-
<input
|
|
55
|
-
class="search__bar__input"
|
|
56
|
-
type="text"
|
|
57
|
-
[(ngModel)]="inputValue"
|
|
58
|
-
[placeholder]="hintLabel"
|
|
59
|
-
(input)="onInputChange()"
|
|
60
|
-
/>
|
|
61
|
-
<fa-icon
|
|
62
|
-
class="search__bar__clear__mark__icon"
|
|
63
|
-
[icon]="faXmark"
|
|
64
|
-
*ngIf="inputValue !== ''"
|
|
65
|
-
(click)="onClickClearInput()"
|
|
66
|
-
></fa-icon>
|
|
67
|
-
<fa-icon [icon]="faMagnifyingGlass"></fa-icon>
|
|
68
|
-
</div>`, isInline: true, styles: ["*{margin:0;padding:0;box-sizing:border-box}.search__bar{display:flex;cursor:pointer;max-width:15rem;padding:.3rem 0;width:-moz-fit-content;width:fit-content;align-items:center;justify-content:center;background-color:#fff}.search__bar--opened{width:13rem;border-bottom:2px solid black;background-color:#0ff}.search__bar__input{width:0;border:none;outline:none;font-weight:500;background:transparent;transition:all ease-in-out .5s;font-size:clamp(.8rem,.675rem + .333vw,.975rem)}.search__bar__clear__mark__icon{margin:0 .5rem}.search__bar__clear__mark__icon:hover{scale:1.3;transition:all ease-in-out .1s}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] }); }
|
|
69
|
-
}
|
|
70
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchBarComponent, decorators: [{
|
|
71
|
-
type: Component,
|
|
72
|
-
args: [{ selector: 'lib-tks-search-bar', standalone: true, imports: [NgIf, NgClass, NgStyle, FormsModule, FontAwesomeModule], template: `<div
|
|
73
|
-
(mouseenter)="onMouseEnter()"
|
|
74
|
-
(mouseleave)="onMouseLeave()"
|
|
75
|
-
[ngStyle]="{ 'background-color': backgroundColor }"
|
|
76
|
-
[ngClass]="
|
|
77
|
-
isSearchBarExpanded ? 'search__bar search__bar--opened' : 'search__bar'
|
|
78
|
-
"
|
|
79
|
-
>
|
|
80
|
-
<input
|
|
81
|
-
class="search__bar__input"
|
|
82
|
-
type="text"
|
|
83
|
-
[(ngModel)]="inputValue"
|
|
84
|
-
[placeholder]="hintLabel"
|
|
85
|
-
(input)="onInputChange()"
|
|
86
|
-
/>
|
|
87
|
-
<fa-icon
|
|
88
|
-
class="search__bar__clear__mark__icon"
|
|
89
|
-
[icon]="faXmark"
|
|
90
|
-
*ngIf="inputValue !== ''"
|
|
91
|
-
(click)="onClickClearInput()"
|
|
92
|
-
></fa-icon>
|
|
93
|
-
<fa-icon [icon]="faMagnifyingGlass"></fa-icon>
|
|
94
|
-
</div>`, styles: ["*{margin:0;padding:0;box-sizing:border-box}.search__bar{display:flex;cursor:pointer;max-width:15rem;padding:.3rem 0;width:-moz-fit-content;width:fit-content;align-items:center;justify-content:center;background-color:#fff}.search__bar--opened{width:13rem;border-bottom:2px solid black;background-color:#0ff}.search__bar__input{width:0;border:none;outline:none;font-weight:500;background:transparent;transition:all ease-in-out .5s;font-size:clamp(.8rem,.675rem + .333vw,.975rem)}.search__bar__clear__mark__icon{margin:0 .5rem}.search__bar__clear__mark__icon:hover{scale:1.3;transition:all ease-in-out .1s}\n"] }]
|
|
95
|
-
}], propDecorators: { hintLabel: [{
|
|
96
|
-
type: Input
|
|
97
|
-
}], backgroundColor: [{
|
|
98
|
-
type: Input
|
|
99
|
-
}], inputValueChange: [{
|
|
100
|
-
type: Output
|
|
101
|
-
}] } });
|
|
102
|
-
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VhcmNoLWJhci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9kZXNpZ24tc3lzdGVtL2NvbXBvbmVudHMvc2VhcmNoLWJhci9zZWFyY2gtYmFyLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDN0MsT0FBTyxFQUFFLE9BQU8sRUFBRSxPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDekQsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sa0NBQWtDLENBQUM7QUFDckUsT0FBTyxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN2RSxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsT0FBTyxFQUFFLE1BQU0sa0NBQWtDLENBQUM7Ozs7QUErQjlFLE1BQU0sT0FBTyxrQkFBa0I7SUE3Qi9CO1FBOEJTLGVBQVUsR0FBRyxFQUFFLENBQUM7UUFDaEIsd0JBQW1CLEdBQUcsS0FBSyxDQUFDO1FBQ25CLFlBQU8sR0FBRyxPQUFPLENBQUM7UUFDbEIsc0JBQWlCLEdBQUcsaUJBQWlCLENBQUM7UUFFdEQ7O1dBRUc7UUFFSCxjQUFTLEdBQUcsRUFBRSxDQUFDO1FBUWY7O1dBRUc7UUFFSCxxQkFBZ0IsR0FBRyxJQUFJLFlBQVksRUFBVSxDQUFDO0tBMEIvQztJQXhCUSxhQUFhO1FBQ2xCLE9BQU8sQ0FBQyxHQUFHLENBQUMseUJBQXlCLENBQUMsQ0FBQztRQUN2QyxJQUFJLENBQUMsZ0JBQWdCLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsQ0FBQztJQUM5QyxDQUFDO0lBRU0saUJBQWlCO1FBQ3RCLE9BQU8sQ0FBQyxHQUFHLENBQUMsd0JBQXdCLENBQUMsQ0FBQztRQUN0QyxJQUFJLENBQUMsVUFBVSxHQUFHLEVBQUUsQ0FBQztRQUNyQixJQUFJLENBQUMsZ0JBQWdCLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsQ0FBQztJQUM5QyxDQUFDO0lBRU0sWUFBWTtRQUNqQixPQUFPLENBQUMsR0FBRyxDQUFDLG1CQUFtQixDQUFDLENBQUM7UUFDakMsSUFBSSxJQUFJLENBQUMsbUJBQW1CLEtBQUssS0FBSyxFQUFFO1lBQ3RDLElBQUksQ0FBQyxtQkFBbUIsR0FBRyxJQUFJLENBQUM7U0FDakM7SUFDSCxDQUFDO0lBRU0sWUFBWTtRQUNqQixPQUFPLENBQUMsR0FBRyxDQUFDLGdCQUFnQixDQUFDLENBQUM7UUFDOUIsSUFBSSxJQUFJLENBQUMsVUFBVSxLQUFLLEVBQUUsRUFBRTtZQUMxQixJQUFJLENBQUMsbUJBQW1CLEdBQUcsS0FBSyxDQUFDO1NBQ2xDO0lBQ0gsQ0FBQzsrR0EvQ1Usa0JBQWtCO21HQUFsQixrQkFBa0IseU1BekJuQjs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztTQXNCSCx1cUJBdkJHLElBQUksNkZBQUUsT0FBTyxvRkFBRSxPQUFPLDBFQUFFLFdBQVcsOG1CQUFFLGlCQUFpQjs7NEZBMEJyRCxrQkFBa0I7a0JBN0I5QixTQUFTOytCQUNFLG9CQUFvQixjQUNsQixJQUFJLFdBQ1AsQ0FBQyxJQUFJLEVBQUUsT0FBTyxFQUFFLE9BQU8sRUFBRSxXQUFXLEVBQUUsaUJBQWlCLENBQUMsWUFDdkQ7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7U0FzQkg7OEJBYVAsU0FBUztzQkFEUixLQUFLO2dCQU9OLGVBQWU7c0JBRGQsS0FBSztnQkFPTixnQkFBZ0I7c0JBRGYsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEZvcm1zTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xyXG5pbXBvcnQgeyBOZ0NsYXNzLCBOZ1N0eWxlLCBOZ0lmIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcclxuaW1wb3J0IHsgRm9udEF3ZXNvbWVNb2R1bGUgfSBmcm9tICdAZm9ydGF3ZXNvbWUvYW5ndWxhci1mb250YXdlc29tZSc7XHJcbmltcG9ydCB7IElucHV0LCBPdXRwdXQsIENvbXBvbmVudCwgRXZlbnRFbWl0dGVyIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IGZhTWFnbmlmeWluZ0dsYXNzLCBmYVhtYXJrIH0gZnJvbSAnQGZvcnRhd2Vzb21lL3Byby1zb2xpZC1zdmctaWNvbnMnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdsaWItdGtzLXNlYXJjaC1iYXInLFxyXG4gIHN0YW5kYWxvbmU6IHRydWUsXHJcbiAgaW1wb3J0czogW05nSWYsIE5nQ2xhc3MsIE5nU3R5bGUsIEZvcm1zTW9kdWxlLCBGb250QXdlc29tZU1vZHVsZV0sXHJcbiAgdGVtcGxhdGU6IGA8ZGl2XHJcbiAgICAobW91c2VlbnRlcik9XCJvbk1vdXNlRW50ZXIoKVwiXHJcbiAgICAobW91c2VsZWF2ZSk9XCJvbk1vdXNlTGVhdmUoKVwiXHJcbiAgICBbbmdTdHlsZV09XCJ7ICdiYWNrZ3JvdW5kLWNvbG9yJzogYmFja2dyb3VuZENvbG9yIH1cIlxyXG4gICAgW25nQ2xhc3NdPVwiXHJcbiAgICAgIGlzU2VhcmNoQmFyRXhwYW5kZWQgPyAnc2VhcmNoX19iYXIgc2VhcmNoX19iYXItLW9wZW5lZCcgOiAnc2VhcmNoX19iYXInXHJcbiAgICBcIlxyXG4gID5cclxuICAgIDxpbnB1dFxyXG4gICAgICBjbGFzcz1cInNlYXJjaF9fYmFyX19pbnB1dFwiXHJcbiAgICAgIHR5cGU9XCJ0ZXh0XCJcclxuICAgICAgWyhuZ01vZGVsKV09XCJpbnB1dFZhbHVlXCJcclxuICAgICAgW3BsYWNlaG9sZGVyXT1cImhpbnRMYWJlbFwiXHJcbiAgICAgIChpbnB1dCk9XCJvbklucHV0Q2hhbmdlKClcIlxyXG4gICAgLz5cclxuICAgIDxmYS1pY29uXHJcbiAgICAgIGNsYXNzPVwic2VhcmNoX19iYXJfX2NsZWFyX19tYXJrX19pY29uXCJcclxuICAgICAgW2ljb25dPVwiZmFYbWFya1wiXHJcbiAgICAgICpuZ0lmPVwiaW5wdXRWYWx1ZSAhPT0gJydcIlxyXG4gICAgICAoY2xpY2spPVwib25DbGlja0NsZWFySW5wdXQoKVwiXHJcbiAgICA+PC9mYS1pY29uPlxyXG4gICAgPGZhLWljb24gW2ljb25dPVwiZmFNYWduaWZ5aW5nR2xhc3NcIj48L2ZhLWljb24+XHJcbiAgPC9kaXY+YCxcclxuICBzdHlsZVVybHM6IFsnLi9zZWFyY2gtYmFyLmNvbXBvbmVudC5jc3MnXSxcclxufSlcclxuZXhwb3J0IGNsYXNzIFNlYXJjaEJhckNvbXBvbmVudCB7XHJcbiAgcHVibGljIGlucHV0VmFsdWUgPSAnJztcclxuICBwdWJsaWMgaXNTZWFyY2hCYXJFeHBhbmRlZCA9IGZhbHNlO1xyXG4gIHB1YmxpYyByZWFkb25seSBmYVhtYXJrID0gZmFYbWFyaztcclxuICBwdWJsaWMgcmVhZG9ubHkgZmFNYWduaWZ5aW5nR2xhc3MgPSBmYU1hZ25pZnlpbmdHbGFzcztcclxuXHJcbiAgLyoqXHJcbiAgICogU2VhcmNoIGJhciBoaW50IGxhYmVsXHJcbiAgICovXHJcbiAgQElucHV0KClcclxuICBoaW50TGFiZWwgPSAnJztcclxuXHJcbiAgLyoqXHJcbiAgICogV2hhdCBiYWNrZ3JvdW5kIGNvbG9yIHRvIHVzZVxyXG4gICAqL1xyXG4gIEBJbnB1dCgpXHJcbiAgYmFja2dyb3VuZENvbG9yPzogc3RyaW5nO1xyXG5cclxuICAvKipcclxuICAgKiBJbnB1dCBjaGFuZ2VzIGhhbmRsZXJcclxuICAgKi9cclxuICBAT3V0cHV0KClcclxuICBpbnB1dFZhbHVlQ2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcjxzdHJpbmc+KCk7XHJcblxyXG4gIHB1YmxpYyBvbklucHV0Q2hhbmdlKCk6IHZvaWQge1xyXG4gICAgY29uc29sZS5sb2coJ0lucHV0IHZhbHVlIGhhcyBjaGFuZ2VkJyk7XHJcbiAgICB0aGlzLmlucHV0VmFsdWVDaGFuZ2UuZW1pdCh0aGlzLmlucHV0VmFsdWUpO1xyXG4gIH1cclxuXHJcbiAgcHVibGljIG9uQ2xpY2tDbGVhcklucHV0KCk6IHZvaWQge1xyXG4gICAgY29uc29sZS5sb2coJ0lucHV0IGhhcyBiZWVuIGNsZWFyZWQnKTtcclxuICAgIHRoaXMuaW5wdXRWYWx1ZSA9ICcnO1xyXG4gICAgdGhpcy5pbnB1dFZhbHVlQ2hhbmdlLmVtaXQodGhpcy5pbnB1dFZhbHVlKTtcclxuICB9XHJcblxyXG4gIHB1YmxpYyBvbk1vdXNlRW50ZXIoKTogdm9pZCB7XHJcbiAgICBjb25zb2xlLmxvZygnTW91c2UgaGFzIGVudGVyZWQnKTtcclxuICAgIGlmICh0aGlzLmlzU2VhcmNoQmFyRXhwYW5kZWQgPT09IGZhbHNlKSB7XHJcbiAgICAgIHRoaXMuaXNTZWFyY2hCYXJFeHBhbmRlZCA9IHRydWU7XHJcbiAgICB9XHJcbiAgfVxyXG5cclxuICBwdWJsaWMgb25Nb3VzZUxlYXZlKCk6IHZvaWQge1xyXG4gICAgY29uc29sZS5sb2coJ01vdXNlIGhhcyBsZWZ0Jyk7XHJcbiAgICBpZiAodGhpcy5pbnB1dFZhbHVlID09PSAnJykge1xyXG4gICAgICB0aGlzLmlzU2VhcmNoQmFyRXhwYW5kZWQgPSBmYWxzZTtcclxuICAgIH1cclxuICB9XHJcbn1cclxuIl19
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Generated bundle index. Do not edit.
|
|
3
|
-
*/
|
|
4
|
-
export * from './public-api';
|
|
5
|
-
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGVrdXMtZGVzaWduLXN5c3RlbS1jb21wb25lbnRzLXNlYXJjaC1iYXIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9kZXNpZ24tc3lzdGVtL2NvbXBvbmVudHMvc2VhcmNoLWJhci90ZWt1cy1kZXNpZ24tc3lzdGVtLWNvbXBvbmVudHMtc2VhcmNoLWJhci50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMsY0FBYyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBHZW5lcmF0ZWQgYnVuZGxlIGluZGV4LiBEbyBub3QgZWRpdC5cbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL3B1YmxpYy1hcGknO1xuIl19
|
package/esm2022/index.mjs
DELETED
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Generated bundle index. Do not edit.
|
|
3
|
-
*/
|
|
4
|
-
export * from './index';
|
|
5
|
-
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGVrdXMtZGVzaWduLXN5c3RlbS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL2Rlc2lnbi1zeXN0ZW0vdGVrdXMtZGVzaWduLXN5c3RlbS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMsU0FBUyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBHZW5lcmF0ZWQgYnVuZGxlIGluZGV4LiBEbyBub3QgZWRpdC5cbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL2luZGV4JztcbiJdfQ==
|
|
@@ -1,109 +0,0 @@
|
|
|
1
|
-
import * as i1 from '@angular/forms';
|
|
2
|
-
import { FormsModule } from '@angular/forms';
|
|
3
|
-
import { NgIf, NgClass, NgStyle } from '@angular/common';
|
|
4
|
-
import * as i2 from '@fortawesome/angular-fontawesome';
|
|
5
|
-
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
|
|
6
|
-
import * as i0 from '@angular/core';
|
|
7
|
-
import { EventEmitter, Component, Input, Output } from '@angular/core';
|
|
8
|
-
import { faXmark, faMagnifyingGlass } from '@fortawesome/pro-solid-svg-icons';
|
|
9
|
-
|
|
10
|
-
class SearchBarComponent {
|
|
11
|
-
constructor() {
|
|
12
|
-
this.inputValue = '';
|
|
13
|
-
this.isSearchBarExpanded = false;
|
|
14
|
-
this.faXmark = faXmark;
|
|
15
|
-
this.faMagnifyingGlass = faMagnifyingGlass;
|
|
16
|
-
/**
|
|
17
|
-
* Search bar hint label
|
|
18
|
-
*/
|
|
19
|
-
this.hintLabel = '';
|
|
20
|
-
/**
|
|
21
|
-
* Input changes handler
|
|
22
|
-
*/
|
|
23
|
-
this.inputValueChange = new EventEmitter();
|
|
24
|
-
}
|
|
25
|
-
onInputChange() {
|
|
26
|
-
console.log('Input value has changed');
|
|
27
|
-
this.inputValueChange.emit(this.inputValue);
|
|
28
|
-
}
|
|
29
|
-
onClickClearInput() {
|
|
30
|
-
console.log('Input has been cleared');
|
|
31
|
-
this.inputValue = '';
|
|
32
|
-
this.inputValueChange.emit(this.inputValue);
|
|
33
|
-
}
|
|
34
|
-
onMouseEnter() {
|
|
35
|
-
console.log('Mouse has entered');
|
|
36
|
-
if (this.isSearchBarExpanded === false) {
|
|
37
|
-
this.isSearchBarExpanded = true;
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
onMouseLeave() {
|
|
41
|
-
console.log('Mouse has left');
|
|
42
|
-
if (this.inputValue === '') {
|
|
43
|
-
this.isSearchBarExpanded = false;
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
47
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SearchBarComponent, isStandalone: true, selector: "lib-tks-search-bar", inputs: { hintLabel: "hintLabel", backgroundColor: "backgroundColor" }, outputs: { inputValueChange: "inputValueChange" }, ngImport: i0, template: `<div
|
|
48
|
-
(mouseenter)="onMouseEnter()"
|
|
49
|
-
(mouseleave)="onMouseLeave()"
|
|
50
|
-
[ngStyle]="{ 'background-color': backgroundColor }"
|
|
51
|
-
[ngClass]="
|
|
52
|
-
isSearchBarExpanded ? 'search__bar search__bar--opened' : 'search__bar'
|
|
53
|
-
"
|
|
54
|
-
>
|
|
55
|
-
<input
|
|
56
|
-
class="search__bar__input"
|
|
57
|
-
type="text"
|
|
58
|
-
[(ngModel)]="inputValue"
|
|
59
|
-
[placeholder]="hintLabel"
|
|
60
|
-
(input)="onInputChange()"
|
|
61
|
-
/>
|
|
62
|
-
<fa-icon
|
|
63
|
-
class="search__bar__clear__mark__icon"
|
|
64
|
-
[icon]="faXmark"
|
|
65
|
-
*ngIf="inputValue !== ''"
|
|
66
|
-
(click)="onClickClearInput()"
|
|
67
|
-
></fa-icon>
|
|
68
|
-
<fa-icon [icon]="faMagnifyingGlass"></fa-icon>
|
|
69
|
-
</div>`, isInline: true, styles: ["*{margin:0;padding:0;box-sizing:border-box}.search__bar{display:flex;cursor:pointer;max-width:15rem;padding:.3rem 0;width:-moz-fit-content;width:fit-content;align-items:center;justify-content:center;background-color:#fff}.search__bar--opened{width:13rem;border-bottom:2px solid black;background-color:#0ff}.search__bar__input{width:0;border:none;outline:none;font-weight:500;background:transparent;transition:all ease-in-out .5s;font-size:clamp(.8rem,.675rem + .333vw,.975rem)}.search__bar__clear__mark__icon{margin:0 .5rem}.search__bar__clear__mark__icon:hover{scale:1.3;transition:all ease-in-out .1s}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] }); }
|
|
70
|
-
}
|
|
71
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchBarComponent, decorators: [{
|
|
72
|
-
type: Component,
|
|
73
|
-
args: [{ selector: 'lib-tks-search-bar', standalone: true, imports: [NgIf, NgClass, NgStyle, FormsModule, FontAwesomeModule], template: `<div
|
|
74
|
-
(mouseenter)="onMouseEnter()"
|
|
75
|
-
(mouseleave)="onMouseLeave()"
|
|
76
|
-
[ngStyle]="{ 'background-color': backgroundColor }"
|
|
77
|
-
[ngClass]="
|
|
78
|
-
isSearchBarExpanded ? 'search__bar search__bar--opened' : 'search__bar'
|
|
79
|
-
"
|
|
80
|
-
>
|
|
81
|
-
<input
|
|
82
|
-
class="search__bar__input"
|
|
83
|
-
type="text"
|
|
84
|
-
[(ngModel)]="inputValue"
|
|
85
|
-
[placeholder]="hintLabel"
|
|
86
|
-
(input)="onInputChange()"
|
|
87
|
-
/>
|
|
88
|
-
<fa-icon
|
|
89
|
-
class="search__bar__clear__mark__icon"
|
|
90
|
-
[icon]="faXmark"
|
|
91
|
-
*ngIf="inputValue !== ''"
|
|
92
|
-
(click)="onClickClearInput()"
|
|
93
|
-
></fa-icon>
|
|
94
|
-
<fa-icon [icon]="faMagnifyingGlass"></fa-icon>
|
|
95
|
-
</div>`, styles: ["*{margin:0;padding:0;box-sizing:border-box}.search__bar{display:flex;cursor:pointer;max-width:15rem;padding:.3rem 0;width:-moz-fit-content;width:fit-content;align-items:center;justify-content:center;background-color:#fff}.search__bar--opened{width:13rem;border-bottom:2px solid black;background-color:#0ff}.search__bar__input{width:0;border:none;outline:none;font-weight:500;background:transparent;transition:all ease-in-out .5s;font-size:clamp(.8rem,.675rem + .333vw,.975rem)}.search__bar__clear__mark__icon{margin:0 .5rem}.search__bar__clear__mark__icon:hover{scale:1.3;transition:all ease-in-out .1s}\n"] }]
|
|
96
|
-
}], propDecorators: { hintLabel: [{
|
|
97
|
-
type: Input
|
|
98
|
-
}], backgroundColor: [{
|
|
99
|
-
type: Input
|
|
100
|
-
}], inputValueChange: [{
|
|
101
|
-
type: Output
|
|
102
|
-
}] } });
|
|
103
|
-
|
|
104
|
-
/**
|
|
105
|
-
* Generated bundle index. Do not edit.
|
|
106
|
-
*/
|
|
107
|
-
|
|
108
|
-
export { SearchBarComponent };
|
|
109
|
-
//# sourceMappingURL=tekus-design-system-components-search-bar.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"tekus-design-system-components-search-bar.mjs","sources":["../../../projects/design-system/components/search-bar/search-bar.component.ts","../../../projects/design-system/components/search-bar/tekus-design-system-components-search-bar.ts"],"sourcesContent":["import { FormsModule } from '@angular/forms';\r\nimport { NgClass, NgStyle, NgIf } from '@angular/common';\r\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\r\nimport { Input, Output, Component, EventEmitter } from '@angular/core';\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 (mouseenter)=\"onMouseEnter()\"\r\n (mouseleave)=\"onMouseLeave()\"\r\n [ngStyle]=\"{ 'background-color': backgroundColor }\"\r\n [ngClass]=\"\r\n isSearchBarExpanded ? 'search__bar search__bar--opened' : 'search__bar'\r\n \"\r\n >\r\n <input\r\n class=\"search__bar__input\"\r\n type=\"text\"\r\n [(ngModel)]=\"inputValue\"\r\n [placeholder]=\"hintLabel\"\r\n (input)=\"onInputChange()\"\r\n />\r\n <fa-icon\r\n class=\"search__bar__clear__mark__icon\"\r\n [icon]=\"faXmark\"\r\n *ngIf=\"inputValue !== ''\"\r\n (click)=\"onClickClearInput()\"\r\n ></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 isSearchBarExpanded = false;\r\n public readonly faXmark = faXmark;\r\n public readonly faMagnifyingGlass = faMagnifyingGlass;\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 console.log('Input value has changed');\r\n this.inputValueChange.emit(this.inputValue);\r\n }\r\n\r\n public onClickClearInput(): void {\r\n console.log('Input has been cleared');\r\n this.inputValue = '';\r\n this.inputValueChange.emit(this.inputValue);\r\n }\r\n\r\n public onMouseEnter(): void {\r\n console.log('Mouse has entered');\r\n if (this.isSearchBarExpanded === false) {\r\n this.isSearchBarExpanded = true;\r\n }\r\n }\r\n\r\n public onMouseLeave(): void {\r\n console.log('Mouse has left');\r\n if (this.inputValue === '') {\r\n this.isSearchBarExpanded = false;\r\n }\r\n }\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"tekus-design-system.mjs","sources":["../../../projects/design-system/tekus-design-system.ts"],"sourcesContent":["/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"AAAA;;AAEG"}
|
package/index.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
File without changes
|