@tekus/design-system 0.0.6 → 0.0.71

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/package.json CHANGED
@@ -1,9 +1,9 @@
1
1
  {
2
2
  "name": "@tekus/design-system",
3
- "version": "0.0.6",
3
+ "version": "0.0.71",
4
4
  "peerDependencies": {
5
- "@angular/common": "^16.2.0",
6
- "@angular/core": "^16.2.0"
5
+ "@angular/core": "^16.2.0",
6
+ "@angular/common": "^16.2.0"
7
7
  },
8
8
  "dependencies": {
9
9
  "tslib": "^2.3.0"
@@ -20,12 +20,6 @@
20
20
  "esm2022": "./esm2022/tekus-design-system.mjs",
21
21
  "esm": "./esm2022/tekus-design-system.mjs",
22
22
  "default": "./fesm2022/tekus-design-system.mjs"
23
- },
24
- "./components/search-bar": {
25
- "types": "./components/search-bar/index.d.ts",
26
- "esm2022": "./esm2022/components/search-bar/tekus-design-system-components-search-bar.mjs",
27
- "esm": "./esm2022/components/search-bar/tekus-design-system-components-search-bar.mjs",
28
- "default": "./fesm2022/tekus-design-system-components-search-bar.mjs"
29
23
  }
30
24
  }
31
25
  }
@@ -1,5 +0,0 @@
1
- /**
2
- * Generated bundle index. Do not edit.
3
- */
4
- /// <amd-module name="@tekus/design-system/components/search-bar" />
5
- export * from './public-api';
@@ -1 +0,0 @@
1
- export * from './search-bar.component';
@@ -1,23 +0,0 @@
1
- import { EventEmitter } from '@angular/core';
2
- import * as i0 from "@angular/core";
3
- export declare class SearchBarComponent {
4
- inputValue: string;
5
- readonly faXmark: import("@fortawesome/fontawesome-common-types").IconDefinition;
6
- readonly faMagnifyingGlass: import("@fortawesome/fontawesome-common-types").IconDefinition;
7
- /**
8
- * Search bar hint label
9
- */
10
- hintLabel: string;
11
- /**
12
- * What background color to use
13
- */
14
- backgroundColor?: string;
15
- /**
16
- * Input changes handler
17
- */
18
- inputValueChange: EventEmitter<string>;
19
- onInputChange(): void;
20
- onClickInputClear(): void;
21
- 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; }; }, { "inputValueChange": "inputValueChange"; }, never, never, true, never>;
23
- }
@@ -1,2 +0,0 @@
1
- export * from './search-bar.component';
2
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2Rlc2lnbi1zeXN0ZW0vY29tcG9uZW50cy9zZWFyY2gtYmFyL3B1YmxpYy1hcGkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYyx3QkFBd0IsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCAqIGZyb20gJy4vc2VhcmNoLWJhci5jb21wb25lbnQnO1xyXG4iXX0=
@@ -1,90 +0,0 @@
1
- import { NgClass, NgStyle, NgIf } from '@angular/common';
2
- import { FormsModule, ReactiveFormsModule } from '@angular/forms';
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.faXmark = faXmark;
13
- this.faMagnifyingGlass = faMagnifyingGlass;
14
- /**
15
- * Search bar hint label
16
- */
17
- this.hintLabel = '';
18
- /**
19
- * Input changes handler
20
- */
21
- this.inputValueChange = new EventEmitter();
22
- }
23
- onInputChange() {
24
- this.inputValueChange.emit(this.inputValue);
25
- }
26
- onClickInputClear() {
27
- this.inputValue = '';
28
- this.inputValueChange.emit(this.inputValue);
29
- }
30
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
31
- 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
32
- [ngClass]="
33
- inputValue === '' ? 'search__bar' : 'search__bar search__bar--opened'
34
- "
35
- [ngStyle]="{ 'background-color': backgroundColor }"
36
- >
37
- <input
38
- class="search__bar__input"
39
- type="text"
40
- [(ngModel)]="inputValue"
41
- [placeholder]="hintLabel"
42
- (input)="onInputChange()"
43
- />
44
- <fa-icon
45
- class="search__bar__clear__mark__icon"
46
- [icon]="faXmark"
47
- *ngIf="inputValue !== ''"
48
- (click)="onClickInputClear()"
49
- ></fa-icon>
50
- <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 .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 .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"] }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
52
- }
53
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchBarComponent, decorators: [{
54
- type: Component,
55
- args: [{ selector: 'lib-tks-search-bar', standalone: true, imports: [
56
- NgIf,
57
- NgClass,
58
- NgStyle,
59
- FormsModule,
60
- FontAwesomeModule,
61
- ReactiveFormsModule,
62
- ], template: `<div
63
- [ngClass]="
64
- inputValue === '' ? 'search__bar' : 'search__bar search__bar--opened'
65
- "
66
- [ngStyle]="{ 'background-color': backgroundColor }"
67
- >
68
- <input
69
- class="search__bar__input"
70
- type="text"
71
- [(ngModel)]="inputValue"
72
- [placeholder]="hintLabel"
73
- (input)="onInputChange()"
74
- />
75
- <fa-icon
76
- class="search__bar__clear__mark__icon"
77
- [icon]="faXmark"
78
- *ngIf="inputValue !== ''"
79
- (click)="onClickInputClear()"
80
- ></fa-icon>
81
- <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 .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 .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
- }], propDecorators: { hintLabel: [{
84
- type: Input
85
- }], backgroundColor: [{
86
- type: Input
87
- }], inputValueChange: [{
88
- type: Output
89
- }] } });
90
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VhcmNoLWJhci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9kZXNpZ24tc3lzdGVtL2NvbXBvbmVudHMvc2VhcmNoLWJhci9zZWFyY2gtYmFyLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsT0FBTyxFQUFFLE9BQU8sRUFBRSxJQUFJLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUN6RCxPQUFPLEVBQUUsV0FBVyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDbEUsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sa0NBQWtDLENBQUM7QUFDckUsT0FBTyxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN2RSxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsT0FBTyxFQUFFLE1BQU0sa0NBQWtDLENBQUM7Ozs7QUFvQzlFLE1BQU0sT0FBTyxrQkFBa0I7SUFsQy9CO1FBbUNTLGVBQVUsR0FBRyxFQUFFLENBQUM7UUFDUCxZQUFPLEdBQUcsT0FBTyxDQUFDO1FBQ2xCLHNCQUFpQixHQUFHLGlCQUFpQixDQUFDO1FBRXREOztXQUVHO1FBRUgsY0FBUyxHQUFHLEVBQUUsQ0FBQztRQVFmOztXQUVHO1FBRUgscUJBQWdCLEdBQUcsSUFBSSxZQUFZLEVBQVUsQ0FBQztLQVUvQztJQVJRLGFBQWE7UUFDbEIsSUFBSSxDQUFDLGdCQUFnQixDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLENBQUM7SUFDOUMsQ0FBQztJQUVNLGlCQUFpQjtRQUN0QixJQUFJLENBQUMsVUFBVSxHQUFHLEVBQUUsQ0FBQztRQUNyQixJQUFJLENBQUMsZ0JBQWdCLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsQ0FBQztJQUM5QyxDQUFDOytHQTlCVSxrQkFBa0I7bUdBQWxCLGtCQUFrQix5TUF2Qm5COzs7Ozs7Ozs7Ozs7Ozs7Ozs7OztTQW9CSCwydUJBM0JMLElBQUksNkZBQ0osT0FBTyxvRkFDUCxPQUFPLDBFQUNQLFdBQVcsOG1CQUNYLGlCQUFpQixrU0FDakIsbUJBQW1COzs0RkF5QlYsa0JBQWtCO2tCQWxDOUIsU0FBUzsrQkFDRSxvQkFBb0IsY0FDbEIsSUFBSSxXQUNQO3dCQUNQLElBQUk7d0JBQ0osT0FBTzt3QkFDUCxPQUFPO3dCQUNQLFdBQVc7d0JBQ1gsaUJBQWlCO3dCQUNqQixtQkFBbUI7cUJBQ3BCLFlBQ1M7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O1NBb0JIOzhCQVlQLFNBQVM7c0JBRFIsS0FBSztnQkFPTixlQUFlO3NCQURkLEtBQUs7Z0JBT04sZ0JBQWdCO3NCQURmLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBOZ0NsYXNzLCBOZ1N0eWxlLCBOZ0lmIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcclxuaW1wb3J0IHsgRm9ybXNNb2R1bGUsIFJlYWN0aXZlRm9ybXNNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XHJcbmltcG9ydCB7IEZvbnRBd2Vzb21lTW9kdWxlIH0gZnJvbSAnQGZvcnRhd2Vzb21lL2FuZ3VsYXItZm9udGF3ZXNvbWUnO1xyXG5pbXBvcnQgeyBJbnB1dCwgT3V0cHV0LCBDb21wb25lbnQsIEV2ZW50RW1pdHRlciB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBmYU1hZ25pZnlpbmdHbGFzcywgZmFYbWFyayB9IGZyb20gJ0Bmb3J0YXdlc29tZS9wcm8tc29saWQtc3ZnLWljb25zJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnbGliLXRrcy1zZWFyY2gtYmFyJyxcclxuICBzdGFuZGFsb25lOiB0cnVlLFxyXG4gIGltcG9ydHM6IFtcclxuICAgIE5nSWYsXHJcbiAgICBOZ0NsYXNzLFxyXG4gICAgTmdTdHlsZSxcclxuICAgIEZvcm1zTW9kdWxlLFxyXG4gICAgRm9udEF3ZXNvbWVNb2R1bGUsXHJcbiAgICBSZWFjdGl2ZUZvcm1zTW9kdWxlLFxyXG4gIF0sXHJcbiAgdGVtcGxhdGU6IGA8ZGl2XHJcbiAgICBbbmdDbGFzc109XCJcclxuICAgICAgaW5wdXRWYWx1ZSA9PT0gJycgPyAnc2VhcmNoX19iYXInIDogJ3NlYXJjaF9fYmFyIHNlYXJjaF9fYmFyLS1vcGVuZWQnXHJcbiAgICBcIlxyXG4gICAgW25nU3R5bGVdPVwieyAnYmFja2dyb3VuZC1jb2xvcic6IGJhY2tncm91bmRDb2xvciB9XCJcclxuICA+XHJcbiAgICA8aW5wdXRcclxuICAgICAgY2xhc3M9XCJzZWFyY2hfX2Jhcl9faW5wdXRcIlxyXG4gICAgICB0eXBlPVwidGV4dFwiXHJcbiAgICAgIFsobmdNb2RlbCldPVwiaW5wdXRWYWx1ZVwiXHJcbiAgICAgIFtwbGFjZWhvbGRlcl09XCJoaW50TGFiZWxcIlxyXG4gICAgICAoaW5wdXQpPVwib25JbnB1dENoYW5nZSgpXCJcclxuICAgIC8+XHJcbiAgICA8ZmEtaWNvblxyXG4gICAgICBjbGFzcz1cInNlYXJjaF9fYmFyX19jbGVhcl9fbWFya19faWNvblwiXHJcbiAgICAgIFtpY29uXT1cImZhWG1hcmtcIlxyXG4gICAgICAqbmdJZj1cImlucHV0VmFsdWUgIT09ICcnXCJcclxuICAgICAgKGNsaWNrKT1cIm9uQ2xpY2tJbnB1dENsZWFyKClcIlxyXG4gICAgPjwvZmEtaWNvbj5cclxuICAgIDxmYS1pY29uIFtpY29uXT1cImZhTWFnbmlmeWluZ0dsYXNzXCI+PC9mYS1pY29uPlxyXG4gIDwvZGl2PmAsXHJcbiAgc3R5bGVVcmxzOiBbJy4vc2VhcmNoLWJhci5jb21wb25lbnQuY3NzJ10sXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBTZWFyY2hCYXJDb21wb25lbnQge1xyXG4gIHB1YmxpYyBpbnB1dFZhbHVlID0gJyc7XHJcbiAgcHVibGljIHJlYWRvbmx5IGZhWG1hcmsgPSBmYVhtYXJrO1xyXG4gIHB1YmxpYyByZWFkb25seSBmYU1hZ25pZnlpbmdHbGFzcyA9IGZhTWFnbmlmeWluZ0dsYXNzO1xyXG5cclxuICAvKipcclxuICAgKiBTZWFyY2ggYmFyIGhpbnQgbGFiZWxcclxuICAgKi9cclxuICBASW5wdXQoKVxyXG4gIGhpbnRMYWJlbCA9ICcnO1xyXG5cclxuICAvKipcclxuICAgKiBXaGF0IGJhY2tncm91bmQgY29sb3IgdG8gdXNlXHJcbiAgICovXHJcbiAgQElucHV0KClcclxuICBiYWNrZ3JvdW5kQ29sb3I/OiBzdHJpbmc7XHJcblxyXG4gIC8qKlxyXG4gICAqIElucHV0IGNoYW5nZXMgaGFuZGxlclxyXG4gICAqL1xyXG4gIEBPdXRwdXQoKVxyXG4gIGlucHV0VmFsdWVDaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyPHN0cmluZz4oKTtcclxuXHJcbiAgcHVibGljIG9uSW5wdXRDaGFuZ2UoKTogdm9pZCB7XHJcbiAgICB0aGlzLmlucHV0VmFsdWVDaGFuZ2UuZW1pdCh0aGlzLmlucHV0VmFsdWUpO1xyXG4gIH1cclxuXHJcbiAgcHVibGljIG9uQ2xpY2tJbnB1dENsZWFyKCk6IHZvaWQge1xyXG4gICAgdGhpcy5pbnB1dFZhbHVlID0gJyc7XHJcbiAgICB0aGlzLmlucHV0VmFsdWVDaGFuZ2UuZW1pdCh0aGlzLmlucHV0VmFsdWUpO1xyXG4gIH1cclxufVxyXG4iXX0=
@@ -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
@@ -1,97 +0,0 @@
1
- import { NgIf, NgClass, NgStyle } from '@angular/common';
2
- import * as i1 from '@angular/forms';
3
- import { FormsModule, ReactiveFormsModule } from '@angular/forms';
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.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
- this.inputValueChange.emit(this.inputValue);
26
- }
27
- onClickInputClear() {
28
- this.inputValue = '';
29
- this.inputValueChange.emit(this.inputValue);
30
- }
31
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
32
- 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
33
- [ngClass]="
34
- inputValue === '' ? 'search__bar' : 'search__bar search__bar--opened'
35
- "
36
- [ngStyle]="{ 'background-color': backgroundColor }"
37
- >
38
- <input
39
- class="search__bar__input"
40
- type="text"
41
- [(ngModel)]="inputValue"
42
- [placeholder]="hintLabel"
43
- (input)="onInputChange()"
44
- />
45
- <fa-icon
46
- class="search__bar__clear__mark__icon"
47
- [icon]="faXmark"
48
- *ngIf="inputValue !== ''"
49
- (click)="onClickInputClear()"
50
- ></fa-icon>
51
- <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 .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 .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"] }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
53
- }
54
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchBarComponent, decorators: [{
55
- type: Component,
56
- args: [{ selector: 'lib-tks-search-bar', standalone: true, imports: [
57
- NgIf,
58
- NgClass,
59
- NgStyle,
60
- FormsModule,
61
- FontAwesomeModule,
62
- ReactiveFormsModule,
63
- ], template: `<div
64
- [ngClass]="
65
- inputValue === '' ? 'search__bar' : 'search__bar search__bar--opened'
66
- "
67
- [ngStyle]="{ 'background-color': backgroundColor }"
68
- >
69
- <input
70
- class="search__bar__input"
71
- type="text"
72
- [(ngModel)]="inputValue"
73
- [placeholder]="hintLabel"
74
- (input)="onInputChange()"
75
- />
76
- <fa-icon
77
- class="search__bar__clear__mark__icon"
78
- [icon]="faXmark"
79
- *ngIf="inputValue !== ''"
80
- (click)="onClickInputClear()"
81
- ></fa-icon>
82
- <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 .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 .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
- }], propDecorators: { hintLabel: [{
85
- type: Input
86
- }], backgroundColor: [{
87
- type: Input
88
- }], inputValueChange: [{
89
- type: Output
90
- }] } });
91
-
92
- /**
93
- * Generated bundle index. Do not edit.
94
- */
95
-
96
- export { SearchBarComponent };
97
- //# 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 { NgClass, NgStyle, NgIf } 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: [\r\n NgIf,\r\n NgClass,\r\n NgStyle,\r\n FormsModule,\r\n FontAwesomeModule,\r\n ReactiveFormsModule,\r\n ],\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)=\"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)=\"onClickInputClear()\"\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<string>();\r\n\r\n public onInputChange(): void {\r\n this.inputValueChange.emit(this.inputValue);\r\n }\r\n\r\n public onClickInputClear(): void {\r\n this.inputValue = '';\r\n this.inputValueChange.emit(this.inputValue);\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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"}