@tekus/design-system 0.0.3 → 0.0.5
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 +2 -4
- package/esm2022/components/search-bar/search-bar.component.mjs +14 -12
- package/fesm2022/tekus-design-system-components-search-bar.mjs +13 -11
- package/fesm2022/tekus-design-system-components-search-bar.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -6,8 +6,6 @@ export declare class SearchBarComponent {
|
|
|
6
6
|
readonly faMagnifyingGlass: import("@fortawesome/fontawesome-common-types").IconDefinition;
|
|
7
7
|
/**
|
|
8
8
|
* Search bar hint label
|
|
9
|
-
*
|
|
10
|
-
* @required
|
|
11
9
|
*/
|
|
12
10
|
hintLabel: string;
|
|
13
11
|
/**
|
|
@@ -17,7 +15,7 @@ export declare class SearchBarComponent {
|
|
|
17
15
|
/**
|
|
18
16
|
* Input changes handler
|
|
19
17
|
*/
|
|
20
|
-
|
|
18
|
+
inputValueChange: EventEmitter<Event>;
|
|
21
19
|
static ɵfac: i0.ɵɵFactoryDeclaration<SearchBarComponent, never>;
|
|
22
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<SearchBarComponent, "lib-tks-search-bar", never, { "hintLabel": { "alias": "hintLabel"; "required": false; }; "backgroundColor": { "alias": "backgroundColor"; "required": false; }; }, { "
|
|
20
|
+
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
21
|
}
|
|
@@ -14,18 +14,18 @@ export class SearchBarComponent {
|
|
|
14
14
|
this.faMagnifyingGlass = faMagnifyingGlass;
|
|
15
15
|
/**
|
|
16
16
|
* Search bar hint label
|
|
17
|
-
*
|
|
18
|
-
* @required
|
|
19
17
|
*/
|
|
20
18
|
this.hintLabel = '';
|
|
21
19
|
/**
|
|
22
20
|
* Input changes handler
|
|
23
21
|
*/
|
|
24
|
-
this.
|
|
22
|
+
this.inputValueChange = new EventEmitter();
|
|
25
23
|
}
|
|
26
24
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
27
|
-
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: {
|
|
28
|
-
|
|
25
|
+
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
|
|
26
|
+
[ngClass]="
|
|
27
|
+
inputValue === '' ? 'search__bar' : 'search__bar search__bar--opened'
|
|
28
|
+
"
|
|
29
29
|
[ngStyle]="{ 'background-color': backgroundColor }"
|
|
30
30
|
>
|
|
31
31
|
<input
|
|
@@ -33,7 +33,7 @@ export class SearchBarComponent {
|
|
|
33
33
|
type="text"
|
|
34
34
|
[(ngModel)]="inputValue"
|
|
35
35
|
[placeholder]="hintLabel"
|
|
36
|
-
(
|
|
36
|
+
(input)="inputValueChange.emit($event)"
|
|
37
37
|
/>
|
|
38
38
|
<fa-icon
|
|
39
39
|
class="search__bar__clear__mark__icon"
|
|
@@ -42,12 +42,14 @@ export class SearchBarComponent {
|
|
|
42
42
|
(click)="inputValue = ''"
|
|
43
43
|
></fa-icon>
|
|
44
44
|
<fa-icon [icon]="faMagnifyingGlass"></fa-icon>
|
|
45
|
-
</div>`, isInline: true, styles: ["*{margin:0;padding:0;box-sizing:border-box}.search__bar{width:-moz-fit-content;width:fit-content;
|
|
45
|
+
</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 .search__bar__input{width:13rem}.search__bar:hover{border-bottom:2px solid black}.search__bar:hover .search__bar__input{width:13rem}.search__bar__input{width:0;border:none;outline:none;font-weight:500;background:transparent;transition:all ease-in-out .8s;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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
|
|
46
46
|
}
|
|
47
47
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchBarComponent, decorators: [{
|
|
48
48
|
type: Component,
|
|
49
49
|
args: [{ selector: 'lib-tks-search-bar', standalone: true, imports: [CommonModule, FontAwesomeModule, FormsModule, ReactiveFormsModule], template: `<div
|
|
50
|
-
|
|
50
|
+
[ngClass]="
|
|
51
|
+
inputValue === '' ? 'search__bar' : 'search__bar search__bar--opened'
|
|
52
|
+
"
|
|
51
53
|
[ngStyle]="{ 'background-color': backgroundColor }"
|
|
52
54
|
>
|
|
53
55
|
<input
|
|
@@ -55,7 +57,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
55
57
|
type="text"
|
|
56
58
|
[(ngModel)]="inputValue"
|
|
57
59
|
[placeholder]="hintLabel"
|
|
58
|
-
(
|
|
60
|
+
(input)="inputValueChange.emit($event)"
|
|
59
61
|
/>
|
|
60
62
|
<fa-icon
|
|
61
63
|
class="search__bar__clear__mark__icon"
|
|
@@ -64,12 +66,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
64
66
|
(click)="inputValue = ''"
|
|
65
67
|
></fa-icon>
|
|
66
68
|
<fa-icon [icon]="faMagnifyingGlass"></fa-icon>
|
|
67
|
-
</div>`, styles: ["*{margin:0;padding:0;box-sizing:border-box}.search__bar{width:-moz-fit-content;width:fit-content;
|
|
69
|
+
</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 .search__bar__input{width:13rem}.search__bar:hover{border-bottom:2px solid black}.search__bar:hover .search__bar__input{width:13rem}.search__bar__input{width:0;border:none;outline:none;font-weight:500;background:transparent;transition:all ease-in-out .8s;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"] }]
|
|
68
70
|
}], propDecorators: { hintLabel: [{
|
|
69
71
|
type: Input
|
|
70
72
|
}], backgroundColor: [{
|
|
71
73
|
type: Input
|
|
72
|
-
}],
|
|
74
|
+
}], inputValueChange: [{
|
|
73
75
|
type: Output
|
|
74
76
|
}] } });
|
|
75
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
77
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VhcmNoLWJhci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9kZXNpZ24tc3lzdGVtL2NvbXBvbmVudHMvc2VhcmNoLWJhci9zZWFyY2gtYmFyLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLFdBQVcsRUFBRSxtQkFBbUIsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQ2xFLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGtDQUFrQyxDQUFDO0FBQ3JFLE9BQU8sRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDdkUsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE9BQU8sRUFBRSxNQUFNLGtDQUFrQyxDQUFDOzs7OztBQTZCOUUsTUFBTSxPQUFPLGtCQUFrQjtJQTNCL0I7UUE0QlMsZUFBVSxHQUFHLEVBQUUsQ0FBQztRQUNQLFlBQU8sR0FBRyxPQUFPLENBQUM7UUFDbEIsc0JBQWlCLEdBQUcsaUJBQWlCLENBQUM7UUFFdEQ7O1dBRUc7UUFFSCxjQUFTLEdBQUcsRUFBRSxDQUFDO1FBUWY7O1dBRUc7UUFFSCxxQkFBZ0IsR0FBRyxJQUFJLFlBQVksRUFBUyxDQUFDO0tBQzlDOytHQXRCWSxrQkFBa0I7bUdBQWxCLGtCQUFrQix5TUF2Qm5COzs7Ozs7Ozs7Ozs7Ozs7Ozs7OztTQW9CSCwwdUJBckJHLFlBQVkscVRBQUUsaUJBQWlCLGtTQUFFLFdBQVcsOG1CQUFFLG1CQUFtQjs7NEZBd0JoRSxrQkFBa0I7a0JBM0I5QixTQUFTOytCQUNFLG9CQUFvQixjQUNsQixJQUFJLFdBQ1AsQ0FBQyxZQUFZLEVBQUUsaUJBQWlCLEVBQUUsV0FBVyxFQUFFLG1CQUFtQixDQUFDLFlBQ2xFOzs7Ozs7Ozs7Ozs7Ozs7Ozs7OztTQW9CSDs4QkFZUCxTQUFTO3NCQURSLEtBQUs7Z0JBT04sZUFBZTtzQkFEZCxLQUFLO2dCQU9OLGdCQUFnQjtzQkFEZixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcclxuaW1wb3J0IHsgRm9ybXNNb2R1bGUsIFJlYWN0aXZlRm9ybXNNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XHJcbmltcG9ydCB7IEZvbnRBd2Vzb21lTW9kdWxlIH0gZnJvbSAnQGZvcnRhd2Vzb21lL2FuZ3VsYXItZm9udGF3ZXNvbWUnO1xyXG5pbXBvcnQgeyBJbnB1dCwgT3V0cHV0LCBDb21wb25lbnQsIEV2ZW50RW1pdHRlciB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBmYU1hZ25pZnlpbmdHbGFzcywgZmFYbWFyayB9IGZyb20gJ0Bmb3J0YXdlc29tZS9wcm8tc29saWQtc3ZnLWljb25zJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnbGliLXRrcy1zZWFyY2gtYmFyJyxcclxuICBzdGFuZGFsb25lOiB0cnVlLFxyXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGUsIEZvbnRBd2Vzb21lTW9kdWxlLCBGb3Jtc01vZHVsZSwgUmVhY3RpdmVGb3Jtc01vZHVsZV0sXHJcbiAgdGVtcGxhdGU6IGA8ZGl2XHJcbiAgICBbbmdDbGFzc109XCJcclxuICAgICAgaW5wdXRWYWx1ZSA9PT0gJycgPyAnc2VhcmNoX19iYXInIDogJ3NlYXJjaF9fYmFyIHNlYXJjaF9fYmFyLS1vcGVuZWQnXHJcbiAgICBcIlxyXG4gICAgW25nU3R5bGVdPVwieyAnYmFja2dyb3VuZC1jb2xvcic6IGJhY2tncm91bmRDb2xvciB9XCJcclxuICA+XHJcbiAgICA8aW5wdXRcclxuICAgICAgY2xhc3M9XCJzZWFyY2hfX2Jhcl9faW5wdXRcIlxyXG4gICAgICB0eXBlPVwidGV4dFwiXHJcbiAgICAgIFsobmdNb2RlbCldPVwiaW5wdXRWYWx1ZVwiXHJcbiAgICAgIFtwbGFjZWhvbGRlcl09XCJoaW50TGFiZWxcIlxyXG4gICAgICAoaW5wdXQpPVwiaW5wdXRWYWx1ZUNoYW5nZS5lbWl0KCRldmVudClcIlxyXG4gICAgLz5cclxuICAgIDxmYS1pY29uXHJcbiAgICAgIGNsYXNzPVwic2VhcmNoX19iYXJfX2NsZWFyX19tYXJrX19pY29uXCJcclxuICAgICAgW2ljb25dPVwiZmFYbWFya1wiXHJcbiAgICAgICpuZ0lmPVwiaW5wdXRWYWx1ZSAhPT0gJydcIlxyXG4gICAgICAoY2xpY2spPVwiaW5wdXRWYWx1ZSA9ICcnXCJcclxuICAgID48L2ZhLWljb24+XHJcbiAgICA8ZmEtaWNvbiBbaWNvbl09XCJmYU1hZ25pZnlpbmdHbGFzc1wiPjwvZmEtaWNvbj5cclxuICA8L2Rpdj5gLFxyXG4gIHN0eWxlVXJsczogWycuL3NlYXJjaC1iYXIuY29tcG9uZW50LmNzcyddLFxyXG59KVxyXG5leHBvcnQgY2xhc3MgU2VhcmNoQmFyQ29tcG9uZW50IHtcclxuICBwdWJsaWMgaW5wdXRWYWx1ZSA9ICcnO1xyXG4gIHB1YmxpYyByZWFkb25seSBmYVhtYXJrID0gZmFYbWFyaztcclxuICBwdWJsaWMgcmVhZG9ubHkgZmFNYWduaWZ5aW5nR2xhc3MgPSBmYU1hZ25pZnlpbmdHbGFzcztcclxuXHJcbiAgLyoqXHJcbiAgICogU2VhcmNoIGJhciBoaW50IGxhYmVsXHJcbiAgICovXHJcbiAgQElucHV0KClcclxuICBoaW50TGFiZWwgPSAnJztcclxuXHJcbiAgLyoqXHJcbiAgICogV2hhdCBiYWNrZ3JvdW5kIGNvbG9yIHRvIHVzZVxyXG4gICAqL1xyXG4gIEBJbnB1dCgpXHJcbiAgYmFja2dyb3VuZENvbG9yPzogc3RyaW5nO1xyXG5cclxuICAvKipcclxuICAgKiBJbnB1dCBjaGFuZ2VzIGhhbmRsZXJcclxuICAgKi9cclxuICBAT3V0cHV0KClcclxuICBpbnB1dFZhbHVlQ2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcjxFdmVudD4oKTtcclxufVxyXG4iXX0=
|
|
@@ -15,18 +15,18 @@ class SearchBarComponent {
|
|
|
15
15
|
this.faMagnifyingGlass = faMagnifyingGlass;
|
|
16
16
|
/**
|
|
17
17
|
* Search bar hint label
|
|
18
|
-
*
|
|
19
|
-
* @required
|
|
20
18
|
*/
|
|
21
19
|
this.hintLabel = '';
|
|
22
20
|
/**
|
|
23
21
|
* Input changes handler
|
|
24
22
|
*/
|
|
25
|
-
this.
|
|
23
|
+
this.inputValueChange = new EventEmitter();
|
|
26
24
|
}
|
|
27
25
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
28
|
-
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: {
|
|
29
|
-
|
|
26
|
+
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
|
|
27
|
+
[ngClass]="
|
|
28
|
+
inputValue === '' ? 'search__bar' : 'search__bar search__bar--opened'
|
|
29
|
+
"
|
|
30
30
|
[ngStyle]="{ 'background-color': backgroundColor }"
|
|
31
31
|
>
|
|
32
32
|
<input
|
|
@@ -34,7 +34,7 @@ class SearchBarComponent {
|
|
|
34
34
|
type="text"
|
|
35
35
|
[(ngModel)]="inputValue"
|
|
36
36
|
[placeholder]="hintLabel"
|
|
37
|
-
(
|
|
37
|
+
(input)="inputValueChange.emit($event)"
|
|
38
38
|
/>
|
|
39
39
|
<fa-icon
|
|
40
40
|
class="search__bar__clear__mark__icon"
|
|
@@ -43,12 +43,14 @@ class SearchBarComponent {
|
|
|
43
43
|
(click)="inputValue = ''"
|
|
44
44
|
></fa-icon>
|
|
45
45
|
<fa-icon [icon]="faMagnifyingGlass"></fa-icon>
|
|
46
|
-
</div>`, isInline: true, styles: ["*{margin:0;padding:0;box-sizing:border-box}.search__bar{width:-moz-fit-content;width:fit-content;
|
|
46
|
+
</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 .search__bar__input{width:13rem}.search__bar:hover{border-bottom:2px solid black}.search__bar:hover .search__bar__input{width:13rem}.search__bar__input{width:0;border:none;outline:none;font-weight:500;background:transparent;transition:all ease-in-out .8s;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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
|
|
47
47
|
}
|
|
48
48
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchBarComponent, decorators: [{
|
|
49
49
|
type: Component,
|
|
50
50
|
args: [{ selector: 'lib-tks-search-bar', standalone: true, imports: [CommonModule, FontAwesomeModule, FormsModule, ReactiveFormsModule], template: `<div
|
|
51
|
-
|
|
51
|
+
[ngClass]="
|
|
52
|
+
inputValue === '' ? 'search__bar' : 'search__bar search__bar--opened'
|
|
53
|
+
"
|
|
52
54
|
[ngStyle]="{ 'background-color': backgroundColor }"
|
|
53
55
|
>
|
|
54
56
|
<input
|
|
@@ -56,7 +58,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
56
58
|
type="text"
|
|
57
59
|
[(ngModel)]="inputValue"
|
|
58
60
|
[placeholder]="hintLabel"
|
|
59
|
-
(
|
|
61
|
+
(input)="inputValueChange.emit($event)"
|
|
60
62
|
/>
|
|
61
63
|
<fa-icon
|
|
62
64
|
class="search__bar__clear__mark__icon"
|
|
@@ -65,12 +67,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
65
67
|
(click)="inputValue = ''"
|
|
66
68
|
></fa-icon>
|
|
67
69
|
<fa-icon [icon]="faMagnifyingGlass"></fa-icon>
|
|
68
|
-
</div>`, styles: ["*{margin:0;padding:0;box-sizing:border-box}.search__bar{width:-moz-fit-content;width:fit-content;
|
|
70
|
+
</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 .search__bar__input{width:13rem}.search__bar:hover{border-bottom:2px solid black}.search__bar:hover .search__bar__input{width:13rem}.search__bar__input{width:0;border:none;outline:none;font-weight:500;background:transparent;transition:all ease-in-out .8s;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"] }]
|
|
69
71
|
}], propDecorators: { hintLabel: [{
|
|
70
72
|
type: Input
|
|
71
73
|
}], backgroundColor: [{
|
|
72
74
|
type: Input
|
|
73
|
-
}],
|
|
75
|
+
}], inputValueChange: [{
|
|
74
76
|
type: Output
|
|
75
77
|
}] } });
|
|
76
78
|
|
|
@@ -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 { CommonModule } from '@angular/common';\r\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\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: [CommonModule, FontAwesomeModule, FormsModule, ReactiveFormsModule],\r\n template: `<div\r\n
|
|
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 { CommonModule } from '@angular/common';\r\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\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: [CommonModule, FontAwesomeModule, FormsModule, ReactiveFormsModule],\r\n template: `<div\r\n [ngClass]=\"\r\n inputValue === '' ? 'search__bar' : 'search__bar search__bar--opened'\r\n \"\r\n [ngStyle]=\"{ 'background-color': backgroundColor }\"\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)=\"inputValueChange.emit($event)\"\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)=\"inputValue = ''\"\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 /**\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<Event>();\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|