@tekus/design-system 1.0.3 → 1.0.4

package/README.md

@@ -1,24 +1,97 @@
-# DesignSystem
+# Tekus Design System
 
-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.2.0.
+Welcome to the Tekus Design System brought to you by Tekus UX/UI team.
 
-## Code scaffolding
+- Tailored for building Tekus apps: Using the Design System results in UIs that reflect the Tekus look and feel.
+- Continuously updated: As long as you’re using the latest version of the Design System, your pages are always up to date with Tekus UI changes.
 
-Run `ng generate component component-name --project design-system` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project design-system`.
-> Note: Don't forget to add `--project design-system` or else it will be added to the default project in your `angular.json` file. 
+## Getting Started 🚀
 
-## Build
+These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.
 
-Run `ng build design-system` to build the project. The build artifacts will be stored in the `dist/` directory.
+### Prerequisites 📝
 
-## Publishing
+First start by cloning the project into your machine, then you need to run the following command within the source path:
 
-After building your library with `ng build design-system`, go to the dist folder `cd dist/design-system` and run `npm publish`.
+```
+npm install
+```
 
-## Running unit tests
+Finally start the storybook to view and interact with all the available components using the following command:
 
-Run `ng test design-system` to execute the unit tests via [Karma](https://karma-runner.github.io).
+```
+npm run storybook
+```
 
-## Further help
+And you will see something like this running in your local machine:
 
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
+<img src="assets/readme-images/storybook-main-page.png" width="821" alt="Storybook main page">
+
+## Use a component from the library
+
+### Prerequisites 📝
+
+First you have to install the library inside the project where you want to use the component, using the following command:
+
+```
+npm i @tekus/design-system
+```
+
+Then you have to import the library component inside your component if you are working with standalone components or inside the target module of your project. Here you have an example to correctly import the search bar component from the library:
+
+<img src="assets/readme-images/tks-library-import-example.png" width="821" alt="tekus library import example">
+
+<br>
+
+And do not forget to import inside your module or standalone component:
+
+<br>
+
+<img src="assets/readme-images/tks-library-module-import.png" width="400" alt="tekus library import example">
+
+<br>
+
+Once you have selected the component that you want to use and imported to your app, you can go to the storybook docs related with this specific component and click on the "show code" link:
+
+<img src="assets/readme-images/storybook-docs-show-code.png" width="821" alt="Storybook show code">
+
+<br>
+
+Then you will see something like this:
+
+<img src="assets/readme-images/storybook-copy-code.png" width="821" alt="Storybook copy code">
+
+<br>
+
+Now you can copy this code and paste it directly in you html file within the app you want to use the component, as follows:
+
+<img src="assets/readme-images/storybook-use-case.png" width="821" alt="Storybook copy code">
+
+<br>
+
+## Note:
+
+You need to ensure that you have installed all the peer dependencies related with the exact component that you want to use.
+
+## Built with 🏗️
+
+- [NPM](https://www.npmjs.com/)
+- [Angular](https://angular.dev/)
+- [StoryBook](https://storybook.js.org/)
+
+## Contributions 🖇️
+
+If you want to contribute to Tekus Design System, please follow these guidelines:
+
+- Send a pull request from a branch with a meaningful name.
+- Make changes using [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) for easy versioning management. You will get an error message if you don't follow this, so you can either do it manually or use a vscode extension like [Conventional Commits](https://marketplace.visualstudio.com/items?itemName=vivaxy.vscode-conventional-commits)
+
+## Versioning 🔩
+
+We use [SemVer](https://semver.org/) for versioning. For the versions available, see the tags on this repository.
+
+## License
+
+This library does not have an explicit license attached. All rights are reserved and any use or distribution is prohibited without the explicit permission of the copyright holder.
+
+If you are interested in using, modifying, or distributing this library, please contact [Tekus](https://www.tekus.co/contacto/) for more information.

package/components/search-bar/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@tekus/design-system/components/search-bar" />
+export * from './public-api';

package/components/search-bar/search-bar.component.d.ts

@@ -0,0 +1,25 @@
+import { ElementRef, EventEmitter } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class SearchBarComponent {
+    inputValue: string;
+    readonly faXmark: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    readonly faMagnifyingGlass: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    searchInput: ElementRef;
+    /**
+     * Search bar hint label
+     */
+    hintLabel: string;
+    /**
+     * What background color to use
+     */
+    backgroundColor?: string;
+    /**
+     * Input changes handler
+     */
+    inputValueChange: EventEmitter<string>;
+    onInputChange(): void;
+    onMouseEnter(): void;
+    onInputClear(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SearchBarComponent, never>;
+    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>;
+}

package/esm2022/components/search-bar/public-api.mjs

@@ -0,0 +1,2 @@
+export * from './search-bar.component';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2Rlc2lnbi1zeXN0ZW0vY29tcG9uZW50cy9zZWFyY2gtYmFyL3B1YmxpYy1hcGkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYyx3QkFBd0IsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCAqIGZyb20gJy4vc2VhcmNoLWJhci5jb21wb25lbnQnO1xuIl19

package/esm2022/components/search-bar/search-bar.component.mjs

@@ -0,0 +1,83 @@
+import { Input, Output, Component, ViewChild, EventEmitter, } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { NgClass, NgStyle, NgIf } from '@angular/common';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { faMagnifyingGlass, faXmark } from '@fortawesome/pro-solid-svg-icons';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/forms";
+import * as i2 from "@fortawesome/angular-fontawesome";
+export class SearchBarComponent {
+    constructor() {
+        this.inputValue = '';
+        this.faXmark = faXmark;
+        this.faMagnifyingGlass = faMagnifyingGlass;
+        /**
+         * Search bar hint label
+         */
+        this.hintLabel = '';
+        /**
+         * Input changes handler
+         */
+        this.inputValueChange = new EventEmitter();
+    }
+    onInputChange() {
+        this.inputValueChange.emit(this.inputValue);
+    }
+    onMouseEnter() {
+        this.searchInput.nativeElement.focus();
+    }
+    onInputClear() {
+        this.inputValue = '';
+        this.inputValueChange.emit('');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    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" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: `<div
+    class="search__bar"
+    (mouseenter)="onMouseEnter()"
+    [ngStyle]="{ 'background-color': backgroundColor }">
+    <input
+      class="search__bar__input"
+      type="text"
+      #searchInput
+      [(ngModel)]="inputValue"
+      [placeholder]="hintLabel"
+      (input)="onInputChange()" />
+    <fa-icon
+      class="search__bar__clear__mark__icon"
+      [icon]="faXmark"
+      *ngIf="inputValue !== ''"
+      (click)="onInputClear()"></fa-icon>
+    <fa-icon [icon]="faMagnifyingGlass"></fa-icon>
+  </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: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__input:focus{width:13rem}.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: 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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-tks-search-bar', standalone: true, imports: [NgIf, NgClass, NgStyle, FormsModule, FontAwesomeModule], template: `<div
+    class="search__bar"
+    (mouseenter)="onMouseEnter()"
+    [ngStyle]="{ 'background-color': backgroundColor }">
+    <input
+      class="search__bar__input"
+      type="text"
+      #searchInput
+      [(ngModel)]="inputValue"
+      [placeholder]="hintLabel"
+      (input)="onInputChange()" />
+    <fa-icon
+      class="search__bar__clear__mark__icon"
+      [icon]="faXmark"
+      *ngIf="inputValue !== ''"
+      (click)="onInputClear()"></fa-icon>
+    <fa-icon [icon]="faMagnifyingGlass"></fa-icon>
+  </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: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__input:focus{width:13rem}.search__bar__clear__mark__icon{margin:0 .5rem}.search__bar__clear__mark__icon:hover{scale:1.3;transition:all ease-in-out .1s}\n"] }]
+        }], propDecorators: { searchInput: [{
+                type: ViewChild,
+                args: ['searchInput', { static: false }]
+            }], hintLabel: [{
+                type: Input
+            }], backgroundColor: [{
+                type: Input
+            }], inputValueChange: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VhcmNoLWJhci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9kZXNpZ24tc3lzdGVtL2NvbXBvbmVudHMvc2VhcmNoLWJhci9zZWFyY2gtYmFyLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsS0FBSyxFQUNMLE1BQU0sRUFDTixTQUFTLEVBQ1QsU0FBUyxFQUVULFlBQVksR0FDYixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDN0MsT0FBTyxFQUFFLE9BQU8sRUFBRSxPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDekQsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sa0NBQWtDLENBQUM7QUFDckUsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE9BQU8sRUFBRSxNQUFNLGtDQUFrQyxDQUFDOzs7O0FBMEI5RSxNQUFNLE9BQU8sa0JBQWtCO0lBeEIvQjtRQXlCUyxlQUFVLEdBQUcsRUFBRSxDQUFDO1FBQ1AsWUFBTyxHQUFHLE9BQU8sQ0FBQztRQUNsQixzQkFBaUIsR0FBRyxpQkFBaUIsQ0FBQztRQUl0RDs7V0FFRztRQUVILGNBQVMsR0FBRyxFQUFFLENBQUM7UUFRZjs7V0FFRztRQUVILHFCQUFnQixHQUFHLElBQUksWUFBWSxFQUFVLENBQUM7S0FjL0M7SUFaUSxhQUFhO1FBQ2xCLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxDQUFDO0lBQzlDLENBQUM7SUFFTSxZQUFZO1FBQ2pCLElBQUksQ0FBQyxXQUFXLENBQUMsYUFBYSxDQUFDLEtBQUssRUFBRSxDQUFDO0lBQ3pDLENBQUM7SUFFTSxZQUFZO1FBQ2pCLElBQUksQ0FBQyxVQUFVLEdBQUcsRUFBRSxDQUFDO1FBQ3JCLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLENBQUM7SUFDakMsQ0FBQzsrR0FwQ1Usa0JBQWtCO21HQUFsQixrQkFBa0IscVRBcEJuQjs7Ozs7Ozs7Ozs7Ozs7Ozs7U0FpQkgsNHRCQWxCRyxJQUFJLDZGQUFXLE9BQU8sMEVBQUUsV0FBVyw4bUJBQUUsaUJBQWlCOzs0RkFxQnJELGtCQUFrQjtrQkF4QjlCLFNBQVM7K0JBQ0Usb0JBQW9CLGNBQ2xCLElBQUksV0FDUCxDQUFDLElBQUksRUFBRSxPQUFPLEVBQUUsT0FBTyxFQUFFLFdBQVcsRUFBRSxpQkFBaUIsQ0FBQyxZQUN2RDs7Ozs7Ozs7Ozs7Ozs7Ozs7U0FpQkg7OEJBUXNDLFdBQVc7c0JBQXZELFNBQVM7dUJBQUMsYUFBYSxFQUFFLEVBQUUsTUFBTSxFQUFFLEtBQUssRUFBRTtnQkFNM0MsU0FBUztzQkFEUixLQUFLO2dCQU9OLGVBQWU7c0JBRGQsS0FBSztnQkFPTixnQkFBZ0I7c0JBRGYsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIElucHV0LFxuICBPdXRwdXQsXG4gIENvbXBvbmVudCxcbiAgVmlld0NoaWxkLFxuICBFbGVtZW50UmVmLFxuICBFdmVudEVtaXR0ZXIsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgRm9ybXNNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5pbXBvcnQgeyBOZ0NsYXNzLCBOZ1N0eWxlLCBOZ0lmIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IEZvbnRBd2Vzb21lTW9kdWxlIH0gZnJvbSAnQGZvcnRhd2Vzb21lL2FuZ3VsYXItZm9udGF3ZXNvbWUnO1xuaW1wb3J0IHsgZmFNYWduaWZ5aW5nR2xhc3MsIGZhWG1hcmsgfSBmcm9tICdAZm9ydGF3ZXNvbWUvcHJvLXNvbGlkLXN2Zy1pY29ucyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2xpYi10a3Mtc2VhcmNoLWJhcicsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtOZ0lmLCBOZ0NsYXNzLCBOZ1N0eWxlLCBGb3Jtc01vZHVsZSwgRm9udEF3ZXNvbWVNb2R1bGVdLFxuICB0ZW1wbGF0ZTogYDxkaXZcbiAgICBjbGFzcz1cInNlYXJjaF9fYmFyXCJcbiAgICAobW91c2VlbnRlcik9XCJvbk1vdXNlRW50ZXIoKVwiXG4gICAgW25nU3R5bGVdPVwieyAnYmFja2dyb3VuZC1jb2xvcic6IGJhY2tncm91bmRDb2xvciB9XCI+XG4gICAgPGlucHV0XG4gICAgICBjbGFzcz1cInNlYXJjaF9fYmFyX19pbnB1dFwiXG4gICAgICB0eXBlPVwidGV4dFwiXG4gICAgICAjc2VhcmNoSW5wdXRcbiAgICAgIFsobmdNb2RlbCldPVwiaW5wdXRWYWx1ZVwiXG4gICAgICBbcGxhY2Vob2xkZXJdPVwiaGludExhYmVsXCJcbiAgICAgIChpbnB1dCk9XCJvbklucHV0Q2hhbmdlKClcIiAvPlxuICAgIDxmYS1pY29uXG4gICAgICBjbGFzcz1cInNlYXJjaF9fYmFyX19jbGVhcl9fbWFya19faWNvblwiXG4gICAgICBbaWNvbl09XCJmYVhtYXJrXCJcbiAgICAgICpuZ0lmPVwiaW5wdXRWYWx1ZSAhPT0gJydcIlxuICAgICAgKGNsaWNrKT1cIm9uSW5wdXRDbGVhcigpXCI+PC9mYS1pY29uPlxuICAgIDxmYS1pY29uIFtpY29uXT1cImZhTWFnbmlmeWluZ0dsYXNzXCI+PC9mYS1pY29uPlxuICA8L2Rpdj5gLFxuICBzdHlsZVVybHM6IFsnLi9zZWFyY2gtYmFyLmNvbXBvbmVudC5jc3MnXSxcbn0pXG5leHBvcnQgY2xhc3MgU2VhcmNoQmFyQ29tcG9uZW50IHtcbiAgcHVibGljIGlucHV0VmFsdWUgPSAnJztcbiAgcHVibGljIHJlYWRvbmx5IGZhWG1hcmsgPSBmYVhtYXJrO1xuICBwdWJsaWMgcmVhZG9ubHkgZmFNYWduaWZ5aW5nR2xhc3MgPSBmYU1hZ25pZnlpbmdHbGFzcztcblxuICBAVmlld0NoaWxkKCdzZWFyY2hJbnB1dCcsIHsgc3RhdGljOiBmYWxzZSB9KSBzZWFyY2hJbnB1dCE6IEVsZW1lbnRSZWY7XG5cbiAgLyoqXG4gICAqIFNlYXJjaCBiYXIgaGludCBsYWJlbFxuICAgKi9cbiAgQElucHV0KClcbiAgaGludExhYmVsID0gJyc7XG5cbiAgLyoqXG4gICAqIFdoYXQgYmFja2dyb3VuZCBjb2xvciB0byB1c2VcbiAgICovXG4gIEBJbnB1dCgpXG4gIGJhY2tncm91bmRDb2xvcj86IHN0cmluZztcblxuICAvKipcbiAgICogSW5wdXQgY2hhbmdlcyBoYW5kbGVyXG4gICAqL1xuICBAT3V0cHV0KClcbiAgaW5wdXRWYWx1ZUNoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8c3RyaW5nPigpO1xuXG4gIHB1YmxpYyBvbklucHV0Q2hhbmdlKCk6IHZvaWQge1xuICAgIHRoaXMuaW5wdXRWYWx1ZUNoYW5nZS5lbWl0KHRoaXMuaW5wdXRWYWx1ZSk7XG4gIH1cblxuICBwdWJsaWMgb25Nb3VzZUVudGVyKCk6IHZvaWQge1xuICAgIHRoaXMuc2VhcmNoSW5wdXQubmF0aXZlRWxlbWVudC5mb2N1cygpO1xuICB9XG5cbiAgcHVibGljIG9uSW5wdXRDbGVhcigpIHtcbiAgICB0aGlzLmlucHV0VmFsdWUgPSAnJztcbiAgICB0aGlzLmlucHV0VmFsdWVDaGFuZ2UuZW1pdCgnJyk7XG4gIH1cbn1cbiJdfQ==

package/esm2022/components/search-bar/tekus-design-system-components-search-bar.mjs

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './public-api';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGVrdXMtZGVzaWduLXN5c3RlbS1jb21wb25lbnRzLXNlYXJjaC1iYXIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9kZXNpZ24tc3lzdGVtL2NvbXBvbmVudHMvc2VhcmNoLWJhci90ZWt1cy1kZXNpZ24tc3lzdGVtLWNvbXBvbmVudHMtc2VhcmNoLWJhci50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMsY0FBYyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBHZW5lcmF0ZWQgYnVuZGxlIGluZGV4LiBEbyBub3QgZWRpdC5cbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL3B1YmxpYy1hcGknO1xuIl19

package/esm2022/index.mjs

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9wcm9qZWN0cy9kZXNpZ24tc3lzdGVtL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQge307Il19

package/esm2022/tekus-design-system.mjs

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './index';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGVrdXMtZGVzaWduLXN5c3RlbS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL2Rlc2lnbi1zeXN0ZW0vdGVrdXMtZGVzaWduLXN5c3RlbS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMsU0FBUyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBHZW5lcmF0ZWQgYnVuZGxlIGluZGV4LiBEbyBub3QgZWRpdC5cbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL2luZGV4JztcbiJdfQ==

package/fesm2022/tekus-design-system-components-search-bar.mjs

@@ -0,0 +1,90 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, ViewChild, Input, Output } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { NgIf, NgStyle, NgClass } from '@angular/common';
+import * as i2 from '@fortawesome/angular-fontawesome';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { faXmark, faMagnifyingGlass } from '@fortawesome/pro-solid-svg-icons';
+
+class SearchBarComponent {
+    constructor() {
+        this.inputValue = '';
+        this.faXmark = faXmark;
+        this.faMagnifyingGlass = faMagnifyingGlass;
+        /**
+         * Search bar hint label
+         */
+        this.hintLabel = '';
+        /**
+         * Input changes handler
+         */
+        this.inputValueChange = new EventEmitter();
+    }
+    onInputChange() {
+        this.inputValueChange.emit(this.inputValue);
+    }
+    onMouseEnter() {
+        this.searchInput.nativeElement.focus();
+    }
+    onInputClear() {
+        this.inputValue = '';
+        this.inputValueChange.emit('');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    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" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: `<div
+    class="search__bar"
+    (mouseenter)="onMouseEnter()"
+    [ngStyle]="{ 'background-color': backgroundColor }">
+    <input
+      class="search__bar__input"
+      type="text"
+      #searchInput
+      [(ngModel)]="inputValue"
+      [placeholder]="hintLabel"
+      (input)="onInputChange()" />
+    <fa-icon
+      class="search__bar__clear__mark__icon"
+      [icon]="faXmark"
+      *ngIf="inputValue !== ''"
+      (click)="onInputClear()"></fa-icon>
+    <fa-icon [icon]="faMagnifyingGlass"></fa-icon>
+  </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: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__input:focus{width:13rem}.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: 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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-tks-search-bar', standalone: true, imports: [NgIf, NgClass, NgStyle, FormsModule, FontAwesomeModule], template: `<div
+    class="search__bar"
+    (mouseenter)="onMouseEnter()"
+    [ngStyle]="{ 'background-color': backgroundColor }">
+    <input
+      class="search__bar__input"
+      type="text"
+      #searchInput
+      [(ngModel)]="inputValue"
+      [placeholder]="hintLabel"
+      (input)="onInputChange()" />
+    <fa-icon
+      class="search__bar__clear__mark__icon"
+      [icon]="faXmark"
+      *ngIf="inputValue !== ''"
+      (click)="onInputClear()"></fa-icon>
+    <fa-icon [icon]="faMagnifyingGlass"></fa-icon>
+  </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: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__input:focus{width:13rem}.search__bar__clear__mark__icon{margin:0 .5rem}.search__bar__clear__mark__icon:hover{scale:1.3;transition:all ease-in-out .1s}\n"] }]
+        }], propDecorators: { searchInput: [{
+                type: ViewChild,
+                args: ['searchInput', { static: false }]
+            }], hintLabel: [{
+                type: Input
+            }], backgroundColor: [{
+                type: Input
+            }], inputValueChange: [{
+                type: Output
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SearchBarComponent };
+//# sourceMappingURL=tekus-design-system-components-search-bar.mjs.map

package/fesm2022/tekus-design-system-components-search-bar.mjs.map

@@ -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 {\n  Input,\n  Output,\n  Component,\n  ViewChild,\n  ElementRef,\n  EventEmitter,\n} from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { NgClass, NgStyle, NgIf } from '@angular/common';\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\nimport { faMagnifyingGlass, faXmark } from '@fortawesome/pro-solid-svg-icons';\n\n@Component({\n  selector: 'lib-tks-search-bar',\n  standalone: true,\n  imports: [NgIf, NgClass, NgStyle, FormsModule, FontAwesomeModule],\n  template: `<div\n    class=\"search__bar\"\n    (mouseenter)=\"onMouseEnter()\"\n    [ngStyle]=\"{ 'background-color': backgroundColor }\">\n    <input\n      class=\"search__bar__input\"\n      type=\"text\"\n      #searchInput\n      [(ngModel)]=\"inputValue\"\n      [placeholder]=\"hintLabel\"\n      (input)=\"onInputChange()\" />\n    <fa-icon\n      class=\"search__bar__clear__mark__icon\"\n      [icon]=\"faXmark\"\n      *ngIf=\"inputValue !== ''\"\n      (click)=\"onInputClear()\"></fa-icon>\n    <fa-icon [icon]=\"faMagnifyingGlass\"></fa-icon>\n  </div>`,\n  styleUrls: ['./search-bar.component.css'],\n})\nexport class SearchBarComponent {\n  public inputValue = '';\n  public readonly faXmark = faXmark;\n  public readonly faMagnifyingGlass = faMagnifyingGlass;\n\n  @ViewChild('searchInput', { static: false }) searchInput!: ElementRef;\n\n  /**\n   * Search bar hint label\n   */\n  @Input()\n  hintLabel = '';\n\n  /**\n   * What background color to use\n   */\n  @Input()\n  backgroundColor?: string;\n\n  /**\n   * Input changes handler\n   */\n  @Output()\n  inputValueChange = new EventEmitter<string>();\n\n  public onInputChange(): void {\n    this.inputValueChange.emit(this.inputValue);\n  }\n\n  public onMouseEnter(): void {\n    this.searchInput.nativeElement.focus();\n  }\n\n  public onInputClear() {\n    this.inputValue = '';\n    this.inputValueChange.emit('');\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;MAqCa,kBAAkB,CAAA;AAxB/B,IAAA,WAAA,GAAA;QAyBS,IAAU,CAAA,UAAA,GAAG,EAAE,CAAC;QACP,IAAO,CAAA,OAAA,GAAG,OAAO,CAAC;QAClB,IAAiB,CAAA,iBAAA,GAAG,iBAAiB,CAAC;AAItD;;AAEG;QAEH,IAAS,CAAA,SAAA,GAAG,EAAE,CAAC;AAQf;;AAEG;AAEH,QAAA,IAAA,CAAA,gBAAgB,GAAG,IAAI,YAAY,EAAU,CAAC;AAc/C,KAAA;IAZQ,aAAa,GAAA;QAClB,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;KAC7C;IAEM,YAAY,GAAA;AACjB,QAAA,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC;KACxC;IAEM,YAAY,GAAA;AACjB,QAAA,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC;AACrB,QAAA,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;KAChC;+GApCU,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,EApBnB,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,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,aAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,aAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA;;;;;;;;;;;;;;;;;AAiBH,QAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,opBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAlBG,IAAI,EAAW,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,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;;4FAqBrD,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAxB9B,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;;;;;;;;;;;;;;;;;AAiBH,QAAA,CAAA,EAAA,MAAA,EAAA,CAAA,opBAAA,CAAA,EAAA,CAAA;8BAQsC,WAAW,EAAA,CAAA;sBAAvD,SAAS;AAAC,gBAAA,IAAA,EAAA,CAAA,aAAa,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,CAAA;gBAM3C,SAAS,EAAA,CAAA;sBADR,KAAK;gBAON,eAAe,EAAA,CAAA;sBADd,KAAK;gBAON,gBAAgB,EAAA,CAAA;sBADf,MAAM;;;AC3DT;;AAEG;;;;"}

package/fesm2022/tekus-design-system.mjs

@@ -0,0 +1,4 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+//# sourceMappingURL=tekus-design-system.mjs.map

package/fesm2022/tekus-design-system.mjs.map

@@ -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

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tekus/design-system",
   "description": "Tekus design system library",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "license": "UNLICENSED",
   "peerDependencies": {
     "@angular/core": "^16.2.0",
@@ -18,5 +18,24 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "sideEffects": false
+  "sideEffects": false,
+  "module": "fesm2022/tekus-design-system.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "esm2022": "./esm2022/tekus-design-system.mjs",
+      "esm": "./esm2022/tekus-design-system.mjs",
+      "default": "./fesm2022/tekus-design-system.mjs"
+    },
+    "./components/search-bar": {
+      "types": "./components/search-bar/index.d.ts",
+      "esm2022": "./esm2022/components/search-bar/tekus-design-system-components-search-bar.mjs",
+      "esm": "./esm2022/components/search-bar/tekus-design-system-components-search-bar.mjs",
+      "default": "./fesm2022/tekus-design-system-components-search-bar.mjs"
+    }
+  }
 }

package/.eslintrc.json

@@ -1,37 +0,0 @@
-{
-  "extends": "../../.eslintrc.json",
-  "ignorePatterns": [
-    "!**/*"
-  ],
-  "overrides": [
-    {
-      "files": [
-        "*.ts"
-      ],
-      "rules": {
-        "@angular-eslint/directive-selector": [
-          "error",
-          {
-            "type": "attribute",
-            "prefix": "lib",
-            "style": "camelCase"
-          }
-        ],
-        "@angular-eslint/component-selector": [
-          "error",
-          {
-            "type": "element",
-            "prefix": "lib",
-            "style": "kebab-case"
-          }
-        ]
-      }
-    },
-    {
-      "files": [
-        "*.html"
-      ],
-      "rules": {}
-    }
-  ]
-}

package/.storybook/main.ts

@@ -1,19 +0,0 @@
-import type { StorybookConfig } from '@storybook/angular';
-
-const config: StorybookConfig = {
-  stories: ['../**/*.mdx', '../**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: [
-    '@storybook/addon-a11y',
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-interactions',
-  ],
-  framework: {
-    name: '@storybook/angular',
-    options: {},
-  },
-  docs: {
-    autodocs: 'tag',
-  },
-};
-export default config;

package/.storybook/preview.ts

@@ -1,18 +0,0 @@
-import type { Preview } from "@storybook/angular";
-import { setCompodocJson } from "@storybook/addon-docs/angular";
-import docJson from "../documentation.json";
-setCompodocJson(docJson);
-
-const preview: Preview = {
-  parameters: {
-    actions: { argTypesRegex: "^on[A-Z].*" },
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
-    },
-  },
-};
-
-export default preview;

package/.storybook/tsconfig.json

@@ -1,23 +0,0 @@
-{
-  "extends": "../tsconfig.lib.json",
-  "compilerOptions": {
-    "types": [
-      "node"
-    ],
-    "allowSyntheticDefaultImports": true,
-    "resolveJsonModule": true
-  },
-  "exclude": [
-    "../test.ts",
-    "../**/*.spec.ts"
-  ],
-  "include": [
-    "../**/*",
-    "./preview.ts",
-    "../stories/**/*",
-    "../projects/**/*"
-  ],
-  "files": [
-    "./typings.d.ts"
-  ]
-}

package/.storybook/typings.d.ts

@@ -1,4 +0,0 @@
-declare module '*.md' {
-  const content: string;
-  export default content;
-}

package/components/search-bar/index.ts

@@ -1 +0,0 @@
-export * from './public-api';

package/components/search-bar/ng-package.json

@@ -1,5 +0,0 @@
-{
-  "lib": {
-    "entryFile": "public-api.ts"
-  }
-}

package/components/search-bar/search-bar.component.css

@@ -1,46 +0,0 @@
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-.search__bar {
-  display: flex;
-  cursor: pointer;
-  max-width: 15rem;
-  padding: 0.3rem 0;
-  width: fit-content;
-  align-items: center;
-  justify-content: center;
-  background-color: white;
-}
-
-.search__bar:hover {
-  border-bottom: 2px solid black;
-  .search__bar__input {
-    width: 13rem;
-  }
-}
-
-.search__bar__input {
-  width: 0;
-  border: none;
-  outline: none;
-  font-weight: 500;
-  background: transparent;
-  transition: all ease-in-out 0.5s;
-  font-size: clamp(0.8rem, 0.675rem + 0.333vw, 0.975rem);
-}
-
-.search__bar__input:focus {
-  width: 13rem;
-}
-
-.search__bar__clear__mark__icon {
-  margin: 0 0.5rem;
-}
-
-.search__bar__clear__mark__icon:hover {
-  scale: 1.3;
-  transition: all ease-in-out 0.1s;
-}

package/components/search-bar/search-bar.component.spec.ts

@@ -1,54 +0,0 @@
-import { SearchBarComponent } from './search-bar.component';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-describe('SearchBarComponent', () => {
-  let component: SearchBarComponent;
-  let fixture: ComponentFixture<SearchBarComponent>;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      imports: [SearchBarComponent],
-    });
-    fixture = TestBed.createComponent(SearchBarComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should emit inputValueChange event with the input value when onInputChange is called', () => {
-    const inputValue = 'test input';
-    component.inputValue = inputValue;
-    spyOn(component.inputValueChange, 'emit');
-    component.onInputChange();
-    expect(component.inputValueChange.emit).toHaveBeenCalledWith(inputValue);
-  });
-
-  it('should focus on searchInput when onMouseEnter is called', () => {
-    const focusSpy = spyOn(component.searchInput.nativeElement, 'focus');
-    component.onMouseEnter();
-    expect(focusSpy).toHaveBeenCalled();
-  });
-
-  it('should clear inputValue and emit inputValueChange event with empty string when onInputClear is called', () => {
-    component.inputValue = 'test input';
-    spyOn(component.inputValueChange, 'emit');
-    component.onInputClear();
-    expect(component.inputValue).toBe('');
-    expect(component.inputValueChange.emit).toHaveBeenCalledWith('');
-  });
-
-  it('should set hintLabel input correctly', () => {
-    const hintLabel = 'test hint';
-    component.hintLabel = hintLabel;
-    expect(component.hintLabel).toBe(hintLabel);
-  });
-
-  it('should set backgroundColor input correctly', () => {
-    const backgroundColor = 'red';
-    component.backgroundColor = backgroundColor;
-    expect(component.backgroundColor).toBe(backgroundColor);
-  });
-});

package/components/search-bar/search-bar.component.stories.ts

@@ -1,29 +0,0 @@
-import { Meta, StoryObj } from '@storybook/angular';
-import { SearchBarComponent } from './search-bar.component';
-
-const meta: Meta<SearchBarComponent> = {
-  title: 'Components/Search bar',
-  component: SearchBarComponent,
-  tags: ['autodocs'],
-  render: (args: SearchBarComponent) => ({
-    props: {
-      backgroundColor: null,
-      ...args,
-    },
-  }),
-  argTypes: {
-    backgroundColor: {
-      control: 'color',
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<SearchBarComponent>;
-
-export const Default: Story = {
-  args: {
-    hintLabel: 'Search...',
-    backgroundColor: 'white',
-  },
-};

package/components/search-bar/search-bar.component.ts

@@ -1,75 +0,0 @@
-import {
-  Input,
-  Output,
-  Component,
-  ViewChild,
-  ElementRef,
-  EventEmitter,
-} from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { NgClass, NgStyle, NgIf } from '@angular/common';
-import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import { faMagnifyingGlass, faXmark } from '@fortawesome/pro-solid-svg-icons';
-
-@Component({
-  selector: 'lib-tks-search-bar',
-  standalone: true,
-  imports: [NgIf, NgClass, NgStyle, FormsModule, FontAwesomeModule],
-  template: `<div
-    class="search__bar"
-    (mouseenter)="onMouseEnter()"
-    [ngStyle]="{ 'background-color': backgroundColor }">
-    <input
-      class="search__bar__input"
-      type="text"
-      #searchInput
-      [(ngModel)]="inputValue"
-      [placeholder]="hintLabel"
-      (input)="onInputChange()" />
-    <fa-icon
-      class="search__bar__clear__mark__icon"
-      [icon]="faXmark"
-      *ngIf="inputValue !== ''"
-      (click)="onInputClear()"></fa-icon>
-    <fa-icon [icon]="faMagnifyingGlass"></fa-icon>
-  </div>`,
-  styleUrls: ['./search-bar.component.css'],
-})
-export class SearchBarComponent {
-  public inputValue = '';
-  public readonly faXmark = faXmark;
-  public readonly faMagnifyingGlass = faMagnifyingGlass;
-
-  @ViewChild('searchInput', { static: false }) searchInput!: ElementRef;
-
-  /**
-   * Search bar hint label
-   */
-  @Input()
-  hintLabel = '';
-
-  /**
-   * What background color to use
-   */
-  @Input()
-  backgroundColor?: string;
-
-  /**
-   * Input changes handler
-   */
-  @Output()
-  inputValueChange = new EventEmitter<string>();
-
-  public onInputChange(): void {
-    this.inputValueChange.emit(this.inputValue);
-  }
-
-  public onMouseEnter(): void {
-    this.searchInput.nativeElement.focus();
-  }
-
-  public onInputClear() {
-    this.inputValue = '';
-    this.inputValueChange.emit('');
-  }
-}

package/documentation.json

@@ -1,371 +0,0 @@
-{
-    "pipes": [],
-    "interfaces": [],
-    "injectables": [],
-    "guards": [],
-    "interceptors": [],
-    "classes": [],
-    "directives": [],
-    "components": [
-        {
-            "name": "SearchBarComponent",
-            "id": "component-SearchBarComponent-4ee13de11aa08b3cb3fd2d16bf08aacfbb0762a33c8ee74339eb947d2daab9a0bb34821c6028bf478dda6035cb325bb44af1a09ef1589f9e8c18f162e0cedeec",
-            "file": "projects/design-system/components/search-bar/search-bar.component.ts",
-            "encapsulation": [],
-            "entryComponents": [],
-            "inputs": [],
-            "outputs": [],
-            "providers": [],
-            "selector": "lib-tks-search-bar",
-            "styleUrls": [
-                "./search-bar.component.css"
-            ],
-            "styles": [],
-            "template": "<div    class=\"search__bar\"\n    #searchBar\n    (mouseenter)=\"onMouseEnter()\"\n    [ngStyle]=\"{ 'background-color': backgroundColor }\">\n    <input\n      class=\"search__bar__input\"\n      type=\"text\"\n      #searchInput\n      [(ngModel)]=\"inputValue\"\n      [placeholder]=\"hintLabel\"\n      (input)=\"onInputChange()\" />\n    <fa-icon\n      class=\"search__bar__clear__mark__icon\"\n      [icon]=\"faXmark\"\n      *ngIf=\"inputValue !== ''\"\n      (click)=\"onInputClear()\"></fa-icon>\n    <fa-icon [icon]=\"faMagnifyingGlass\"></fa-icon>\n  </div>",
-            "templateUrl": [],
-            "viewProviders": [],
-            "hostDirectives": [],
-            "inputsClass": [
-                {
-                    "name": "backgroundColor",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nWhat background color to use\n",
-                    "description": "<p>What background color to use</p>\n",
-                    "line": 57,
-                    "type": "string",
-                    "decorators": []
-                },
-                {
-                    "name": "hintLabel",
-                    "defaultValue": "''",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nSearch bar hint label\n",
-                    "description": "<p>Search bar hint label</p>\n",
-                    "line": 51,
-                    "type": "string",
-                    "decorators": []
-                }
-            ],
-            "outputsClass": [
-                {
-                    "name": "inputValueChange",
-                    "defaultValue": "new EventEmitter<string>()",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nInput changes handler\n",
-                    "description": "<p>Input changes handler</p>\n",
-                    "line": 63,
-                    "type": "EventEmitter"
-                }
-            ],
-            "propertiesClass": [
-                {
-                    "name": "faMagnifyingGlass",
-                    "defaultValue": "faMagnifyingGlass",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "",
-                    "optional": false,
-                    "description": "",
-                    "line": 42,
-                    "modifierKind": [
-                        125,
-                        148
-                    ]
-                },
-                {
-                    "name": "faXmark",
-                    "defaultValue": "faXmark",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "",
-                    "optional": false,
-                    "description": "",
-                    "line": 41,
-                    "modifierKind": [
-                        125,
-                        148
-                    ]
-                },
-                {
-                    "name": "inputValue",
-                    "defaultValue": "''",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "string",
-                    "optional": false,
-                    "description": "",
-                    "line": 40,
-                    "modifierKind": [
-                        125
-                    ]
-                },
-                {
-                    "name": "searchBar",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "ElementRef",
-                    "optional": false,
-                    "description": "",
-                    "line": 44,
-                    "decorators": [
-                        {
-                            "name": "ViewChild",
-                            "stringifiedArguments": "'searchBar', {static: false}"
-                        }
-                    ],
-                    "modifierKind": [
-                        170
-                    ]
-                },
-                {
-                    "name": "searchInput",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "ElementRef",
-                    "optional": false,
-                    "description": "",
-                    "line": 45,
-                    "decorators": [
-                        {
-                            "name": "ViewChild",
-                            "stringifiedArguments": "'searchInput', {static: false}"
-                        }
-                    ],
-                    "modifierKind": [
-                        170
-                    ]
-                }
-            ],
-            "methodsClass": [
-                {
-                    "name": "onInputChange",
-                    "args": [],
-                    "optional": false,
-                    "returnType": "void",
-                    "typeParameters": [],
-                    "line": 65,
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "modifierKind": [
-                        125
-                    ]
-                },
-                {
-                    "name": "onInputClear",
-                    "args": [],
-                    "optional": false,
-                    "returnType": "void",
-                    "typeParameters": [],
-                    "line": 74,
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "modifierKind": [
-                        125
-                    ]
-                },
-                {
-                    "name": "onMouseEnter",
-                    "args": [],
-                    "optional": false,
-                    "returnType": "void",
-                    "typeParameters": [],
-                    "line": 69,
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "modifierKind": [
-                        125
-                    ]
-                }
-            ],
-            "deprecated": false,
-            "deprecationMessage": "",
-            "hostBindings": [],
-            "hostListeners": [],
-            "standalone": true,
-            "imports": [
-                {
-                    "name": "NgIf"
-                },
-                {
-                    "name": "NgClass"
-                },
-                {
-                    "name": "NgStyle"
-                },
-                {
-                    "name": "FormsModule",
-                    "type": "module"
-                },
-                {
-                    "name": "FontAwesomeModule",
-                    "type": "module"
-                }
-            ],
-            "description": "",
-            "rawdescription": "\n",
-            "type": "component",
-            "sourceCode": "import {\r\n  Input,\r\n  Output,\r\n  Component,\r\n  ViewChild,\r\n  ElementRef,\r\n  EventEmitter,\r\n} from '@angular/core';\r\nimport { FormsModule } from '@angular/forms';\r\nimport { NgClass, NgStyle, NgIf } from '@angular/common';\r\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\r\nimport { faMagnifyingGlass, faXmark } from '@fortawesome/pro-solid-svg-icons';\r\n\r\n@Component({\r\n  selector: 'lib-tks-search-bar',\r\n  standalone: true,\r\n  imports: [NgIf, NgClass, NgStyle, FormsModule, FontAwesomeModule],\r\n  template: `<div\r\n    class=\"search__bar\"\r\n    #searchBar\r\n    (mouseenter)=\"onMouseEnter()\"\r\n    [ngStyle]=\"{ 'background-color': backgroundColor }\">\r\n    <input\r\n      class=\"search__bar__input\"\r\n      type=\"text\"\r\n      #searchInput\r\n      [(ngModel)]=\"inputValue\"\r\n      [placeholder]=\"hintLabel\"\r\n      (input)=\"onInputChange()\" />\r\n    <fa-icon\r\n      class=\"search__bar__clear__mark__icon\"\r\n      [icon]=\"faXmark\"\r\n      *ngIf=\"inputValue !== ''\"\r\n      (click)=\"onInputClear()\"></fa-icon>\r\n    <fa-icon [icon]=\"faMagnifyingGlass\"></fa-icon>\r\n  </div>`,\r\n  styleUrls: ['./search-bar.component.css'],\r\n})\r\nexport class SearchBarComponent {\r\n  public inputValue = '';\r\n  public readonly faXmark = faXmark;\r\n  public readonly faMagnifyingGlass = faMagnifyingGlass;\r\n\r\n  @ViewChild('searchBar', { static: false }) searchBar!: ElementRef;\r\n  @ViewChild('searchInput', { static: false }) searchInput!: ElementRef;\r\n\r\n  /**\r\n   * Search bar hint label\r\n   */\r\n  @Input()\r\n  hintLabel = '';\r\n\r\n  /**\r\n   * What background color to use\r\n   */\r\n  @Input()\r\n  backgroundColor?: string;\r\n\r\n  /**\r\n   * Input changes handler\r\n   */\r\n  @Output()\r\n  inputValueChange = new EventEmitter<string>();\r\n\r\n  public onInputChange(): void {\r\n    this.inputValueChange.emit(this.inputValue);\r\n  }\r\n\r\n  public onMouseEnter(): void {\r\n    this.searchInput.nativeElement.focus();\r\n    this.searchBar.nativeElement.focus();\r\n  }\r\n\r\n  public onInputClear() {\r\n    this.inputValue = '';\r\n    this.inputValueChange.emit('');\r\n  }\r\n}\r\n",
-            "assetsDirs": [],
-            "styleUrlsData": [
-                {
-                    "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",
-                    "styleUrl": "./search-bar.component.css"
-                }
-            ],
-            "stylesData": "",
-            "extends": []
-        }
-    ],
-    "modules": [],
-    "miscellaneous": {
-        "variables": [
-            {
-                "name": "Default",
-                "ctype": "miscellaneous",
-                "subtype": "variable",
-                "file": "projects/design-system/components/search-bar/search-bar.component.stories.ts",
-                "deprecated": false,
-                "deprecationMessage": "",
-                "type": "Story",
-                "defaultValue": "{\r\n  args: {\r\n    hintLabel: 'Search...',\r\n    backgroundColor: 'white',\r\n  },\r\n}"
-            },
-            {
-                "name": "meta",
-                "ctype": "miscellaneous",
-                "subtype": "variable",
-                "file": "projects/design-system/components/search-bar/search-bar.component.stories.ts",
-                "deprecated": false,
-                "deprecationMessage": "",
-                "type": "Meta<SearchBarComponent>",
-                "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}"
-            },
-            {
-                "name": "preview",
-                "ctype": "miscellaneous",
-                "subtype": "variable",
-                "file": "projects/design-system/.storybook/preview.ts",
-                "deprecated": false,
-                "deprecationMessage": "",
-                "type": "Preview",
-                "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}"
-            }
-        ],
-        "functions": [],
-        "typealiases": [
-            {
-                "name": "Story",
-                "ctype": "miscellaneous",
-                "subtype": "typealias",
-                "rawtype": "StoryObj<SearchBarComponent>",
-                "file": "projects/design-system/components/search-bar/search-bar.component.stories.ts",
-                "deprecated": false,
-                "deprecationMessage": "",
-                "description": "",
-                "kind": 183
-            }
-        ],
-        "enumerations": [],
-        "groupedVariables": {
-            "projects/design-system/components/search-bar/search-bar.component.stories.ts": [
-                {
-                    "name": "Default",
-                    "ctype": "miscellaneous",
-                    "subtype": "variable",
-                    "file": "projects/design-system/components/search-bar/search-bar.component.stories.ts",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "Story",
-                    "defaultValue": "{\r\n  args: {\r\n    hintLabel: 'Search...',\r\n    backgroundColor: 'white',\r\n  },\r\n}"
-                },
-                {
-                    "name": "meta",
-                    "ctype": "miscellaneous",
-                    "subtype": "variable",
-                    "file": "projects/design-system/components/search-bar/search-bar.component.stories.ts",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "Meta<SearchBarComponent>",
-                    "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}"
-                }
-            ],
-            "projects/design-system/.storybook/preview.ts": [
-                {
-                    "name": "preview",
-                    "ctype": "miscellaneous",
-                    "subtype": "variable",
-                    "file": "projects/design-system/.storybook/preview.ts",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "Preview",
-                    "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}"
-                }
-            ]
-        },
-        "groupedFunctions": {},
-        "groupedEnumerations": {},
-        "groupedTypeAliases": {
-            "projects/design-system/components/search-bar/search-bar.component.stories.ts": [
-                {
-                    "name": "Story",
-                    "ctype": "miscellaneous",
-                    "subtype": "typealias",
-                    "rawtype": "StoryObj<SearchBarComponent>",
-                    "file": "projects/design-system/components/search-bar/search-bar.component.stories.ts",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "description": "",
-                    "kind": 183
-                }
-            ]
-        }
-    },
-    "routes": [],
-    "coverage": {
-        "count": 6,
-        "status": "low",
-        "files": [
-            {
-                "filePath": "projects/design-system/.storybook/preview.ts",
-                "type": "variable",
-                "linktype": "miscellaneous",
-                "linksubtype": "variable",
-                "name": "preview",
-                "coveragePercent": 0,
-                "coverageCount": "0/1",
-                "status": "low"
-            },
-            {
-                "filePath": "projects/design-system/components/search-bar/search-bar.component.stories.ts",
-                "type": "variable",
-                "linktype": "miscellaneous",
-                "linksubtype": "variable",
-                "name": "Default",
-                "coveragePercent": 0,
-                "coverageCount": "0/1",
-                "status": "low"
-            },
-            {
-                "filePath": "projects/design-system/components/search-bar/search-bar.component.stories.ts",
-                "type": "variable",
-                "linktype": "miscellaneous",
-                "linksubtype": "variable",
-                "name": "meta",
-                "coveragePercent": 0,
-                "coverageCount": "0/1",
-                "status": "low"
-            },
-            {
-                "filePath": "projects/design-system/components/search-bar/search-bar.component.ts",
-                "type": "component",
-                "linktype": "component",
-                "name": "SearchBarComponent",
-                "coveragePercent": 25,
-                "coverageCount": "3/12",
-                "status": "low"
-            }
-        ]
-    }
-}

package/index.ts

@@ -1 +0,0 @@
-export {};

package/karma-ci.conf.js

@@ -1,54 +0,0 @@
-// Karma configuration file, see link for more information
-// https://karma-runner.github.io/1.0/config/configuration-file.html
-
-module.exports = function (config) {
-  config.set({
-    basePath: "",
-    frameworks: ["jasmine", "@angular-devkit/build-angular"],
-    plugins: [
-      require("karma-jasmine"),
-      require("karma-chrome-launcher"),
-      require("karma-jasmine-html-reporter"),
-      require("karma-coverage"),
-      require("@angular-devkit/build-angular/plugins/karma"),
-    ],
-    client: {
-      clearContext: false, // leave Jasmine Spec Runner output visible in browser
-    },
-    jasmineHtmlReporter: {
-      suppressAll: true, // removes the duplicated traces
-    },
-    coverageReporter: {
-      dir: require("path").join(__dirname, "../../coverage/design-system"),
-      subdir: ".",
-      reporters: [{ type: "lcov" }],
-      fixWebpackSourcePaths: true,
-      thresholds: {
-        statements: 50,
-        lines: 50,
-        branches: 50,
-        functions: 50,
-      },
-    },
-    reporters: ["progress", "kjhtml"],
-    port: 9876,
-    colors: true,
-    logLevel: config.LOG_INFO,
-    autoWatch: false,
-    restartOnFileChange: true,
-    browsers: ["ChromeHeadless"],
-    customLaunchers: {
-      ChromeHeadless: {
-        base: "Chrome",
-        flags: [
-          "--headless",
-          "--disable-gpu",
-          "--no-sandbox",
-          "--remote-debugging-port=9222",
-        ],
-      },
-    },
-    singleRun: true,
-    browserNoActivityTimeout: 40000,
-  });
-};

package/karma.conf.js

@@ -1,33 +0,0 @@
-// Karma configuration file, see link for more information
-// https://karma-runner.github.io/1.0/config/configuration-file.html
-
-module.exports = function (config) {
-  config.set({
-    basePath: "",
-    frameworks: ["jasmine", "@angular-devkit/build-angular"],
-    files: [
-      "projects/**/*.ts", // Buscará todos los archivos .ts dentro de la carpeta design-system y sus subdirectorios
-    ],
-    plugins: [
-      require("karma-jasmine"),
-      require("karma-chrome-launcher"),
-      require("karma-jasmine-html-reporter"),
-      require("karma-coverage"),
-      require("@angular-devkit/build-angular/plugins/karma"),
-    ],
-    client: {
-      clearContext: false, // leave Jasmine Spec Runner output visible in browser
-    },
-    jasmineHtmlReporter: {
-      suppressAll: true, // removes the duplicated traces
-    },
-    coverageReporter: {
-      dir: require("path").join(__dirname, "../../coverage/design-system"),
-      subdir: ".",
-      reporters: [{ type: "html" }, { type: "text-summary" }],
-    },
-    reporters: ["progress", "kjhtml"],
-    browsers: ["Chrome"],
-    restartOnFileChange: true,
-  });
-};

package/ng-package.json

@@ -1,7 +0,0 @@
-{
-  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../dist/design-system",
-  "lib": {
-    "entryFile": "./index.ts"
-  }
-}

package/tsconfig.lib.json

@@ -1,14 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../out-tsc/lib",
-    "declaration": true,
-    "declarationMap": true,
-    "inlineSources": true,
-    "types": []
-  },
-  "exclude": [
-    "**/*.spec.ts"
-  ]
-}

package/tsconfig.lib.prod.json

@@ -1,10 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "extends": "./tsconfig.lib.json",
-  "compilerOptions": {
-    "declarationMap": false
-  },
-  "angularCompilerOptions": {
-    "compilationMode": "partial"
-  }
-}

package/tsconfig.spec.json

@@ -1,14 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../out-tsc/spec",
-    "types": [
-      "jasmine"
-    ]
-  },
-  "include": [
-    "**/*.spec.ts",
-    "**/*.d.ts"
-  ]
-}