@tekus/design-system 0.0.6 → 0.0.72
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/components/search-bar/search-bar.component.d.ts +4 -1
- package/esm2022/components/search-bar/search-bar.component.mjs +31 -19
- package/fesm2022/tekus-design-system-components-search-bar.mjs +31 -19
- package/fesm2022/tekus-design-system-components-search-bar.mjs.map +1 -1
- package/package.json +3 -3
|
@@ -2,6 +2,7 @@ import { EventEmitter } from '@angular/core';
|
|
|
2
2
|
import * as i0 from "@angular/core";
|
|
3
3
|
export declare class SearchBarComponent {
|
|
4
4
|
inputValue: string;
|
|
5
|
+
isSearchBarExpanded: boolean;
|
|
5
6
|
readonly faXmark: import("@fortawesome/fontawesome-common-types").IconDefinition;
|
|
6
7
|
readonly faMagnifyingGlass: import("@fortawesome/fontawesome-common-types").IconDefinition;
|
|
7
8
|
/**
|
|
@@ -17,7 +18,9 @@ export declare class SearchBarComponent {
|
|
|
17
18
|
*/
|
|
18
19
|
inputValueChange: EventEmitter<string>;
|
|
19
20
|
onInputChange(): void;
|
|
20
|
-
|
|
21
|
+
onClickClearInput(): void;
|
|
22
|
+
onMouseEnter(): void;
|
|
23
|
+
onMouseLeave(): void;
|
|
21
24
|
static ɵfac: i0.ɵɵFactoryDeclaration<SearchBarComponent, never>;
|
|
22
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>;
|
|
23
26
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
+
import { FormsModule } from '@angular/forms';
|
|
1
2
|
import { NgClass, NgStyle, NgIf } from '@angular/common';
|
|
2
|
-
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
3
3
|
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
|
|
4
4
|
import { Input, Output, Component, EventEmitter } from '@angular/core';
|
|
5
5
|
import { faMagnifyingGlass, faXmark } from '@fortawesome/pro-solid-svg-icons';
|
|
@@ -9,6 +9,7 @@ import * as i2 from "@fortawesome/angular-fontawesome";
|
|
|
9
9
|
export class SearchBarComponent {
|
|
10
10
|
constructor() {
|
|
11
11
|
this.inputValue = '';
|
|
12
|
+
this.isSearchBarExpanded = false;
|
|
12
13
|
this.faXmark = faXmark;
|
|
13
14
|
this.faMagnifyingGlass = faMagnifyingGlass;
|
|
14
15
|
/**
|
|
@@ -21,18 +22,34 @@ export class SearchBarComponent {
|
|
|
21
22
|
this.inputValueChange = new EventEmitter();
|
|
22
23
|
}
|
|
23
24
|
onInputChange() {
|
|
25
|
+
console.log('Input value has changed');
|
|
24
26
|
this.inputValueChange.emit(this.inputValue);
|
|
25
27
|
}
|
|
26
|
-
|
|
28
|
+
onClickClearInput() {
|
|
29
|
+
console.log('Input has been cleared');
|
|
27
30
|
this.inputValue = '';
|
|
28
31
|
this.inputValueChange.emit(this.inputValue);
|
|
29
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
|
+
}
|
|
30
45
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
31
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 }"
|
|
32
50
|
[ngClass]="
|
|
33
|
-
|
|
51
|
+
isSearchBarExpanded ? 'search__bar search__bar--opened' : 'search__bar'
|
|
34
52
|
"
|
|
35
|
-
[ngStyle]="{ 'background-color': backgroundColor }"
|
|
36
53
|
>
|
|
37
54
|
<input
|
|
38
55
|
class="search__bar__input"
|
|
@@ -45,25 +62,20 @@ export class SearchBarComponent {
|
|
|
45
62
|
class="search__bar__clear__mark__icon"
|
|
46
63
|
[icon]="faXmark"
|
|
47
64
|
*ngIf="inputValue !== ''"
|
|
48
|
-
(click)="
|
|
65
|
+
(click)="onClickClearInput()"
|
|
49
66
|
></fa-icon>
|
|
50
67
|
<fa-icon [icon]="faMagnifyingGlass"></fa-icon>
|
|
51
|
-
</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
|
|
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"] }] }); }
|
|
52
69
|
}
|
|
53
70
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchBarComponent, decorators: [{
|
|
54
71
|
type: Component,
|
|
55
|
-
args: [{ selector: 'lib-tks-search-bar', standalone: true, imports: [
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
FormsModule,
|
|
60
|
-
FontAwesomeModule,
|
|
61
|
-
ReactiveFormsModule,
|
|
62
|
-
], template: `<div
|
|
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 }"
|
|
63
76
|
[ngClass]="
|
|
64
|
-
|
|
77
|
+
isSearchBarExpanded ? 'search__bar search__bar--opened' : 'search__bar'
|
|
65
78
|
"
|
|
66
|
-
[ngStyle]="{ 'background-color': backgroundColor }"
|
|
67
79
|
>
|
|
68
80
|
<input
|
|
69
81
|
class="search__bar__input"
|
|
@@ -76,10 +88,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
76
88
|
class="search__bar__clear__mark__icon"
|
|
77
89
|
[icon]="faXmark"
|
|
78
90
|
*ngIf="inputValue !== ''"
|
|
79
|
-
(click)="
|
|
91
|
+
(click)="onClickClearInput()"
|
|
80
92
|
></fa-icon>
|
|
81
93
|
<fa-icon [icon]="faMagnifyingGlass"></fa-icon>
|
|
82
|
-
</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
|
|
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"] }]
|
|
83
95
|
}], propDecorators: { hintLabel: [{
|
|
84
96
|
type: Input
|
|
85
97
|
}], backgroundColor: [{
|
|
@@ -87,4 +99,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
87
99
|
}], inputValueChange: [{
|
|
88
100
|
type: Output
|
|
89
101
|
}] } });
|
|
90
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
102
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VhcmNoLWJhci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9kZXNpZ24tc3lzdGVtL2NvbXBvbmVudHMvc2VhcmNoLWJhci9zZWFyY2gtYmFyLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDN0MsT0FBTyxFQUFFLE9BQU8sRUFBRSxPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDekQsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sa0NBQWtDLENBQUM7QUFDckUsT0FBTyxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN2RSxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsT0FBTyxFQUFFLE1BQU0sa0NBQWtDLENBQUM7Ozs7QUErQjlFLE1BQU0sT0FBTyxrQkFBa0I7SUE3Qi9CO1FBOEJTLGVBQVUsR0FBRyxFQUFFLENBQUM7UUFDaEIsd0JBQW1CLEdBQUcsS0FBSyxDQUFDO1FBQ25CLFlBQU8sR0FBRyxPQUFPLENBQUM7UUFDbEIsc0JBQWlCLEdBQUcsaUJBQWlCLENBQUM7UUFFdEQ7O1dBRUc7UUFFSCxjQUFTLEdBQUcsRUFBRSxDQUFDO1FBUWY7O1dBRUc7UUFFSCxxQkFBZ0IsR0FBRyxJQUFJLFlBQVksRUFBVSxDQUFDO0tBMEIvQztJQXhCUSxhQUFhO1FBQ2xCLE9BQU8sQ0FBQyxHQUFHLENBQUMseUJBQXlCLENBQUMsQ0FBQztRQUN2QyxJQUFJLENBQUMsZ0JBQWdCLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsQ0FBQztJQUM5QyxDQUFDO0lBRU0saUJBQWlCO1FBQ3RCLE9BQU8sQ0FBQyxHQUFHLENBQUMsd0JBQXdCLENBQUMsQ0FBQztRQUN0QyxJQUFJLENBQUMsVUFBVSxHQUFHLEVBQUUsQ0FBQztRQUNyQixJQUFJLENBQUMsZ0JBQWdCLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsQ0FBQztJQUM5QyxDQUFDO0lBRU0sWUFBWTtRQUNqQixPQUFPLENBQUMsR0FBRyxDQUFDLG1CQUFtQixDQUFDLENBQUM7UUFDakMsSUFBSSxJQUFJLENBQUMsbUJBQW1CLEtBQUssS0FBSyxFQUFFO1lBQ3RDLElBQUksQ0FBQyxtQkFBbUIsR0FBRyxJQUFJLENBQUM7U0FDakM7SUFDSCxDQUFDO0lBRU0sWUFBWTtRQUNqQixPQUFPLENBQUMsR0FBRyxDQUFDLGdCQUFnQixDQUFDLENBQUM7UUFDOUIsSUFBSSxJQUFJLENBQUMsVUFBVSxLQUFLLEVBQUUsRUFBRTtZQUMxQixJQUFJLENBQUMsbUJBQW1CLEdBQUcsS0FBSyxDQUFDO1NBQ2xDO0lBQ0gsQ0FBQzsrR0EvQ1Usa0JBQWtCO21HQUFsQixrQkFBa0IseU1BekJuQjs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztTQXNCSCx1cUJBdkJHLElBQUksNkZBQUUsT0FBTyxvRkFBRSxPQUFPLDBFQUFFLFdBQVcsOG1CQUFFLGlCQUFpQjs7NEZBMEJyRCxrQkFBa0I7a0JBN0I5QixTQUFTOytCQUNFLG9CQUFvQixjQUNsQixJQUFJLFdBQ1AsQ0FBQyxJQUFJLEVBQUUsT0FBTyxFQUFFLE9BQU8sRUFBRSxXQUFXLEVBQUUsaUJBQWlCLENBQUMsWUFDdkQ7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7U0FzQkg7OEJBYVAsU0FBUztzQkFEUixLQUFLO2dCQU9OLGVBQWU7c0JBRGQsS0FBSztnQkFPTixnQkFBZ0I7c0JBRGYsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEZvcm1zTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xyXG5pbXBvcnQgeyBOZ0NsYXNzLCBOZ1N0eWxlLCBOZ0lmIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcclxuaW1wb3J0IHsgRm9udEF3ZXNvbWVNb2R1bGUgfSBmcm9tICdAZm9ydGF3ZXNvbWUvYW5ndWxhci1mb250YXdlc29tZSc7XHJcbmltcG9ydCB7IElucHV0LCBPdXRwdXQsIENvbXBvbmVudCwgRXZlbnRFbWl0dGVyIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IGZhTWFnbmlmeWluZ0dsYXNzLCBmYVhtYXJrIH0gZnJvbSAnQGZvcnRhd2Vzb21lL3Byby1zb2xpZC1zdmctaWNvbnMnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdsaWItdGtzLXNlYXJjaC1iYXInLFxyXG4gIHN0YW5kYWxvbmU6IHRydWUsXHJcbiAgaW1wb3J0czogW05nSWYsIE5nQ2xhc3MsIE5nU3R5bGUsIEZvcm1zTW9kdWxlLCBGb250QXdlc29tZU1vZHVsZV0sXHJcbiAgdGVtcGxhdGU6IGA8ZGl2XHJcbiAgICAobW91c2VlbnRlcik9XCJvbk1vdXNlRW50ZXIoKVwiXHJcbiAgICAobW91c2VsZWF2ZSk9XCJvbk1vdXNlTGVhdmUoKVwiXHJcbiAgICBbbmdTdHlsZV09XCJ7ICdiYWNrZ3JvdW5kLWNvbG9yJzogYmFja2dyb3VuZENvbG9yIH1cIlxyXG4gICAgW25nQ2xhc3NdPVwiXHJcbiAgICAgIGlzU2VhcmNoQmFyRXhwYW5kZWQgPyAnc2VhcmNoX19iYXIgc2VhcmNoX19iYXItLW9wZW5lZCcgOiAnc2VhcmNoX19iYXInXHJcbiAgICBcIlxyXG4gID5cclxuICAgIDxpbnB1dFxyXG4gICAgICBjbGFzcz1cInNlYXJjaF9fYmFyX19pbnB1dFwiXHJcbiAgICAgIHR5cGU9XCJ0ZXh0XCJcclxuICAgICAgWyhuZ01vZGVsKV09XCJpbnB1dFZhbHVlXCJcclxuICAgICAgW3BsYWNlaG9sZGVyXT1cImhpbnRMYWJlbFwiXHJcbiAgICAgIChpbnB1dCk9XCJvbklucHV0Q2hhbmdlKClcIlxyXG4gICAgLz5cclxuICAgIDxmYS1pY29uXHJcbiAgICAgIGNsYXNzPVwic2VhcmNoX19iYXJfX2NsZWFyX19tYXJrX19pY29uXCJcclxuICAgICAgW2ljb25dPVwiZmFYbWFya1wiXHJcbiAgICAgICpuZ0lmPVwiaW5wdXRWYWx1ZSAhPT0gJydcIlxyXG4gICAgICAoY2xpY2spPVwib25DbGlja0NsZWFySW5wdXQoKVwiXHJcbiAgICA+PC9mYS1pY29uPlxyXG4gICAgPGZhLWljb24gW2ljb25dPVwiZmFNYWduaWZ5aW5nR2xhc3NcIj48L2ZhLWljb24+XHJcbiAgPC9kaXY+YCxcclxuICBzdHlsZVVybHM6IFsnLi9zZWFyY2gtYmFyLmNvbXBvbmVudC5jc3MnXSxcclxufSlcclxuZXhwb3J0IGNsYXNzIFNlYXJjaEJhckNvbXBvbmVudCB7XHJcbiAgcHVibGljIGlucHV0VmFsdWUgPSAnJztcclxuICBwdWJsaWMgaXNTZWFyY2hCYXJFeHBhbmRlZCA9IGZhbHNlO1xyXG4gIHB1YmxpYyByZWFkb25seSBmYVhtYXJrID0gZmFYbWFyaztcclxuICBwdWJsaWMgcmVhZG9ubHkgZmFNYWduaWZ5aW5nR2xhc3MgPSBmYU1hZ25pZnlpbmdHbGFzcztcclxuXHJcbiAgLyoqXHJcbiAgICogU2VhcmNoIGJhciBoaW50IGxhYmVsXHJcbiAgICovXHJcbiAgQElucHV0KClcclxuICBoaW50TGFiZWwgPSAnJztcclxuXHJcbiAgLyoqXHJcbiAgICogV2hhdCBiYWNrZ3JvdW5kIGNvbG9yIHRvIHVzZVxyXG4gICAqL1xyXG4gIEBJbnB1dCgpXHJcbiAgYmFja2dyb3VuZENvbG9yPzogc3RyaW5nO1xyXG5cclxuICAvKipcclxuICAgKiBJbnB1dCBjaGFuZ2VzIGhhbmRsZXJcclxuICAgKi9cclxuICBAT3V0cHV0KClcclxuICBpbnB1dFZhbHVlQ2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcjxzdHJpbmc+KCk7XHJcblxyXG4gIHB1YmxpYyBvbklucHV0Q2hhbmdlKCk6IHZvaWQge1xyXG4gICAgY29uc29sZS5sb2coJ0lucHV0IHZhbHVlIGhhcyBjaGFuZ2VkJyk7XHJcbiAgICB0aGlzLmlucHV0VmFsdWVDaGFuZ2UuZW1pdCh0aGlzLmlucHV0VmFsdWUpO1xyXG4gIH1cclxuXHJcbiAgcHVibGljIG9uQ2xpY2tDbGVhcklucHV0KCk6IHZvaWQge1xyXG4gICAgY29uc29sZS5sb2coJ0lucHV0IGhhcyBiZWVuIGNsZWFyZWQnKTtcclxuICAgIHRoaXMuaW5wdXRWYWx1ZSA9ICcnO1xyXG4gICAgdGhpcy5pbnB1dFZhbHVlQ2hhbmdlLmVtaXQodGhpcy5pbnB1dFZhbHVlKTtcclxuICB9XHJcblxyXG4gIHB1YmxpYyBvbk1vdXNlRW50ZXIoKTogdm9pZCB7XHJcbiAgICBjb25zb2xlLmxvZygnTW91c2UgaGFzIGVudGVyZWQnKTtcclxuICAgIGlmICh0aGlzLmlzU2VhcmNoQmFyRXhwYW5kZWQgPT09IGZhbHNlKSB7XHJcbiAgICAgIHRoaXMuaXNTZWFyY2hCYXJFeHBhbmRlZCA9IHRydWU7XHJcbiAgICB9XHJcbiAgfVxyXG5cclxuICBwdWJsaWMgb25Nb3VzZUxlYXZlKCk6IHZvaWQge1xyXG4gICAgY29uc29sZS5sb2coJ01vdXNlIGhhcyBsZWZ0Jyk7XHJcbiAgICBpZiAodGhpcy5pbnB1dFZhbHVlID09PSAnJykge1xyXG4gICAgICB0aGlzLmlzU2VhcmNoQmFyRXhwYW5kZWQgPSBmYWxzZTtcclxuICAgIH1cclxuICB9XHJcbn1cclxuIl19
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { NgIf, NgClass, NgStyle } from '@angular/common';
|
|
2
1
|
import * as i1 from '@angular/forms';
|
|
3
|
-
import { FormsModule
|
|
2
|
+
import { FormsModule } from '@angular/forms';
|
|
3
|
+
import { NgIf, NgClass, NgStyle } from '@angular/common';
|
|
4
4
|
import * as i2 from '@fortawesome/angular-fontawesome';
|
|
5
5
|
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
|
|
6
6
|
import * as i0 from '@angular/core';
|
|
@@ -10,6 +10,7 @@ import { faXmark, faMagnifyingGlass } from '@fortawesome/pro-solid-svg-icons';
|
|
|
10
10
|
class SearchBarComponent {
|
|
11
11
|
constructor() {
|
|
12
12
|
this.inputValue = '';
|
|
13
|
+
this.isSearchBarExpanded = false;
|
|
13
14
|
this.faXmark = faXmark;
|
|
14
15
|
this.faMagnifyingGlass = faMagnifyingGlass;
|
|
15
16
|
/**
|
|
@@ -22,18 +23,34 @@ class SearchBarComponent {
|
|
|
22
23
|
this.inputValueChange = new EventEmitter();
|
|
23
24
|
}
|
|
24
25
|
onInputChange() {
|
|
26
|
+
console.log('Input value has changed');
|
|
25
27
|
this.inputValueChange.emit(this.inputValue);
|
|
26
28
|
}
|
|
27
|
-
|
|
29
|
+
onClickClearInput() {
|
|
30
|
+
console.log('Input has been cleared');
|
|
28
31
|
this.inputValue = '';
|
|
29
32
|
this.inputValueChange.emit(this.inputValue);
|
|
30
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
|
+
}
|
|
31
46
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
32
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 }"
|
|
33
51
|
[ngClass]="
|
|
34
|
-
|
|
52
|
+
isSearchBarExpanded ? 'search__bar search__bar--opened' : 'search__bar'
|
|
35
53
|
"
|
|
36
|
-
[ngStyle]="{ 'background-color': backgroundColor }"
|
|
37
54
|
>
|
|
38
55
|
<input
|
|
39
56
|
class="search__bar__input"
|
|
@@ -46,25 +63,20 @@ class SearchBarComponent {
|
|
|
46
63
|
class="search__bar__clear__mark__icon"
|
|
47
64
|
[icon]="faXmark"
|
|
48
65
|
*ngIf="inputValue !== ''"
|
|
49
|
-
(click)="
|
|
66
|
+
(click)="onClickClearInput()"
|
|
50
67
|
></fa-icon>
|
|
51
68
|
<fa-icon [icon]="faMagnifyingGlass"></fa-icon>
|
|
52
|
-
</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
|
|
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"] }] }); }
|
|
53
70
|
}
|
|
54
71
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchBarComponent, decorators: [{
|
|
55
72
|
type: Component,
|
|
56
|
-
args: [{ selector: 'lib-tks-search-bar', standalone: true, imports: [
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
FormsModule,
|
|
61
|
-
FontAwesomeModule,
|
|
62
|
-
ReactiveFormsModule,
|
|
63
|
-
], template: `<div
|
|
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 }"
|
|
64
77
|
[ngClass]="
|
|
65
|
-
|
|
78
|
+
isSearchBarExpanded ? 'search__bar search__bar--opened' : 'search__bar'
|
|
66
79
|
"
|
|
67
|
-
[ngStyle]="{ 'background-color': backgroundColor }"
|
|
68
80
|
>
|
|
69
81
|
<input
|
|
70
82
|
class="search__bar__input"
|
|
@@ -77,10 +89,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
77
89
|
class="search__bar__clear__mark__icon"
|
|
78
90
|
[icon]="faXmark"
|
|
79
91
|
*ngIf="inputValue !== ''"
|
|
80
|
-
(click)="
|
|
92
|
+
(click)="onClickClearInput()"
|
|
81
93
|
></fa-icon>
|
|
82
94
|
<fa-icon [icon]="faMagnifyingGlass"></fa-icon>
|
|
83
|
-
</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
|
|
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"] }]
|
|
84
96
|
}], propDecorators: { hintLabel: [{
|
|
85
97
|
type: Input
|
|
86
98
|
}], backgroundColor: [{
|
|
@@ -1 +1 @@
|
|
|
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 {
|
|
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":";;;;;;;;;MAmCa,kBAAkB,CAAA;AA7B/B,IAAA,WAAA,GAAA;QA8BS,IAAU,CAAA,UAAA,GAAG,EAAE,CAAC;QAChB,IAAmB,CAAA,mBAAA,GAAG,KAAK,CAAC;QACnB,IAAO,CAAA,OAAA,GAAG,OAAO,CAAC;QAClB,IAAiB,CAAA,iBAAA,GAAG,iBAAiB,CAAC;AAEtD;;AAEG;QAEH,IAAS,CAAA,SAAA,GAAG,EAAE,CAAC;AAQf;;AAEG;AAEH,QAAA,IAAA,CAAA,gBAAgB,GAAG,IAAI,YAAY,EAAU,CAAC;AA0B/C,KAAA;IAxBQ,aAAa,GAAA;AAClB,QAAA,OAAO,CAAC,GAAG,CAAC,yBAAyB,CAAC,CAAC;QACvC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;KAC7C;IAEM,iBAAiB,GAAA;AACtB,QAAA,OAAO,CAAC,GAAG,CAAC,wBAAwB,CAAC,CAAC;AACtC,QAAA,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC;QACrB,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;KAC7C;IAEM,YAAY,GAAA;AACjB,QAAA,OAAO,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;AACjC,QAAA,IAAI,IAAI,CAAC,mBAAmB,KAAK,KAAK,EAAE;AACtC,YAAA,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC;AACjC,SAAA;KACF;IAEM,YAAY,GAAA;AACjB,QAAA,OAAO,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;AAC9B,QAAA,IAAI,IAAI,CAAC,UAAU,KAAK,EAAE,EAAE;AAC1B,YAAA,IAAI,CAAC,mBAAmB,GAAG,KAAK,CAAC;AAClC,SAAA;KACF;+GA/CU,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAlB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,kBAAkB,EAzBnB,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,EAAA,SAAA,EAAA,WAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,EAAA,OAAA,EAAA,EAAA,gBAAA,EAAA,kBAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;SAsBH,EAvBG,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,+lBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,IAAI,6FAAE,OAAO,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,OAAO,EAAE,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,WAAW,8mBAAE,iBAAiB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,OAAA,EAAA,WAAA,EAAA,MAAA,EAAA,OAAA,EAAA,MAAA,EAAA,QAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,QAAA,EAAA,SAAA,EAAA,QAAA,EAAA,QAAA,EAAA,YAAA,EAAA,SAAA,EAAA,WAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA,EAAA;;4FA0BrD,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBA7B9B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,oBAAoB,EAClB,UAAA,EAAA,IAAI,EACP,OAAA,EAAA,CAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,iBAAiB,CAAC,EACvD,QAAA,EAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;AAsBH,QAAA,CAAA,EAAA,MAAA,EAAA,CAAA,+lBAAA,CAAA,EAAA,CAAA;8BAaP,SAAS,EAAA,CAAA;sBADR,KAAK;gBAON,eAAe,EAAA,CAAA;sBADd,KAAK;gBAON,gBAAgB,EAAA,CAAA;sBADf,MAAM;;;ACxDT;;AAEG;;;;"}
|
package/package.json
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tekus/design-system",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.72",
|
|
4
4
|
"peerDependencies": {
|
|
5
|
-
"@angular/
|
|
6
|
-
"@angular/
|
|
5
|
+
"@angular/core": "^16.2.0",
|
|
6
|
+
"@angular/common": "^16.2.0"
|
|
7
7
|
},
|
|
8
8
|
"dependencies": {
|
|
9
9
|
"tslib": "^2.3.0"
|