Skip to content

Commit d3225f4

Browse files
AhsanAyazAhsanAyaz
committed
fix(ci): specify project name in build command for gh-pages deployment
1 parent d2d3893 commit d3225f4

File tree

2 files changed

+206
-7
lines changed

2 files changed

+206
-7
lines changed

‎.github/workflows/deploy-demo.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ jobs:
3131
run: npm ci --legacy-peer-deps
3232

3333
- name: Build Demo
34-
run: npm run build -- --base-href /angular-tags-input/
34+
run: npm run build -- tags-input-demo --base-href /angular-tags-input/
3535

3636
- name: Upload artifact
3737
uses: actions/upload-pages-artifact@v3

‎projects/angular-tags-input/README.md‎

Lines changed: 205 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,16 @@
22

33
A simple tags input library for Angular. Supports nested elements and a lot of flexibility to the developers. (README to be updated)
44

5-
## Usage
5+
## Installation
66

77
Install the package in your project's folder by using npm or yarn:
8+
89
```bash
910
npm install @iomechs/angular-tags-input --save
1011
# OR
1112
yarn add @iomechs/angular-tags-input -S
1213
```
14+
## Getting Started
1315

1416
Import AngularTagsInputModule in your AppModule as below:
1517

@@ -30,16 +32,213 @@ import { AngularTagsInputModule } from '@iomechs/angular-tags-input';
3032
```
3133

3234
Then in your HTML, you can use as:
35+
36+
```html
37+
<ti-angular-tags-input formControlName="locations" [tagsData]="(data$ | async)" (valueChanged)="onTagInputValueChange($event)" [config]="tagsInputConfig"> </ti-angular-tags-input>
38+
```
39+
40+
## Input Properties
41+
42+
These are the available Input properties you can pass to the component.
43+
44+
| Input | Type | Default | Description |
45+
| ------ | ----- | -----| --------------- |
46+
| `tagsData` | `any[]` | `[]` | List of items to be added in dropdown. Must be piped with async to pass an array. |
47+
| `disabled` | `boolean` | `false` | Disables the component interactions. |
48+
| `config` | [`AngularTagsInputConfig`](#angulartagsinputconfig) | (described in Interfaces section) | Component configuration (defined in [`AngularTagsInputConfig`](#angulartagsinputconfig) under [Configuration Interface](#configuration-interface)) |
49+
| [`dropDownTemplate`](#dropdown-template-dropdowntemplate) | `TemplateRef<any>` | Built-in template | Template used for rendering the dropdown content. |
50+
| [`tagItemTemplate`](#tag-item-template-tagitemtemplate)| `TemplateRef<any>` | Built-in template | Template used for rendering the tag item in field.|
51+
52+
## Ouput Events
53+
54+
These events are emitted by the component and can be subscribed to using Angular event binding syntax.
55+
56+
| Output | Payload Type | Description |
57+
| -------------- | ------------- | -----------|
58+
| `tagAdded` | Tag item object (original data + internal metadata) | Emitted when a new tag is added |
59+
| `tagRemoved` | Tag item object (original data + internal metadata) | Emitted when a tag is removed |
60+
| `valueChanged` | `string` d| Emit the value typed in input field |
61+
| `itemClicked` | Tag item object (original data + internal metadata) | Emit when a tag is clicked. |
62+
63+
> **Note**: The emitted item in `tagAdded`, `tagRemoved` and `itemClicked` includes all properties of your original data object, along with additional internal fields used by the library (e.g., tiSelected, tiIdentifier, etc.).
64+
65+
## Configuration Interface
66+
67+
### AngularTagsInputConfig
68+
69+
This interface defines all configurable options available for the tags input component.
70+
71+
| Option | Type | Description |
72+
| ------------------------ | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
73+
| `identifier` | `string` | Unique key used to identify each item in the provided `tagsData`. |
74+
| `displayProperty` | `string` | Key in your `tagsData` whose value will be shown as the label for each dropdown option. |
75+
| `showTooltipOnOptions` | `boolean` | Shows tooltip on hovering the dropdown options. Should be used together with `hoverProperty`. |
76+
| `hoverProperty` | `string` | The value that will be displayed as tooltip. |
77+
| `showTagsSelectedInDD` | `boolean` | Enable it if you want to show a check mark on selected items. |
78+
| `hideAddedTags` | `boolean` | Enable it if you want to hide those tags that have already been selected in dropdown. |
79+
| `placeholder` | `string` | The placeholder value for input field. |
80+
| `additionalClasses` | `string` | Additional classes to style input field. |
81+
| `hideDDOnTagSelect` | `boolean` | Enable it if you want to hide dropdown on every tag selection. |
82+
| `toggleSelectionOnClick` | `boolean` | Allows selecting/deselecting a dropdown item on click; clicking an already-selected item removes it instead of adding again. |
83+
| `clearInputOnFocus` | `boolean` | Allows you to erase the text, when you focus on the input field. |
84+
| `clearTagsOnFocus` | `boolean` | Allows you to erase the tags, when you focus on the input field. |
85+
| `ddHasBackdrop` | `boolean` | Adds a backdrop overlay behind the dropdown |
86+
| `hideDDOnBlur` | `boolean` | Automatically hides the dropdown when the input field loses focus. Works only when ddHasBackdrop is disabled, because the backdrop prevents normal blur events. |
87+
| `maxItems` | `number` | Specify the max number of tags that can be added inside input field. |
88+
| `hideInputOnSelection` | `boolean` | Allows you to insert only one tag, as the input field disappears on tag selection. |
89+
| `hideTags` | `boolean` | Allows you to hide the selected tags from the input field. |
90+
91+
If your data is nested, you may need to use these options as well.
92+
93+
| Option | Type | Description |
94+
| ----------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
95+
| `childrenCountProperty` | `number` | Specifies the number of children an item have. |
96+
| `nestedTagProperty` | `string` | The key in your `tagsData` that have the list of child items. |
97+
| `nestedTagParentProp` | `string` | Speicifies the identifer of parent. |
98+
| `showParentTagsOnly` | `boolean` | Enable it if you want to show only parent tag if all of its child tags are selected. Disable it if you want to show parent tags along with its child tags. |
99+
100+
## Custom Templates
101+
102+
The component allows you to fully customize the dropdown and tag appearance by passing your own Angular templates. If you don't pass `dropDownTemplate` or `tagItemTemplate`, the library would use its own default template.
103+
104+
### Dropdown Template (`dropDownTemplate`)
105+
106+
Example usages of `dropDownTemplate` are as follows:
107+
108+
#### Simple Dropdown Template
109+
110+
```html
111+
<ng-template #simpleDDTemplate let-items="items" let-config="config" let-fns="fns">
112+
<div *ngIf="items.length" style="max-height: 250px; overflow-y: auto; padding-top: 8px;">
113+
<div *ngFor="let item of items">
114+
<div (click)="fns.onItemClicked(item)" style="display: flex; justify-content: space-between;">{{item[config.displayProperty]}}</div>
115+
<div *ngIf="item.tiSelected && config.showTagsSelectedInDD">
116+
<img src="assets/tick.png" alt="tick" width="14" />
117+
</div>
118+
</div>
119+
</div>
120+
</ng-template>
121+
```
122+
123+
> **Note**:
124+
> Always remember to add `(click)="fns.onItemClicked(item)"`, otherwise neither the item will be added in input field nor any event would be emitted on clicking item.
125+
126+
> Don't forget to add `tick.png` in your assets folder.
127+
128+
#### Nested Dropdown Template
129+
33130
```html
34-
<ti-angular-tags-input
35-
formControlName="locations" [tagsData]="(data$ | async)"
36-
(valueChanged)="onTagInputValueChange($event)"
37-
[config]="tagsInputConfig">
38-
</ti-angular-tags-input>
131+
<ng-template #nestedDDTemplate let-items="items" let-config="config" let-fns="fns">
132+
<div *ngIf="items.length" style="max-height: 250px; overflow-y: auto;padding-top: 8px;">
133+
<div *ngFor="let item of items">
134+
<div (click)="fns.onItemClicked(item)" style="display: flex; justify-content: space-between;">
135+
{{item[config.displayProperty]}}
136+
<div *ngIf="item.tiSelected && config.showTagsSelectedInDD">
137+
<img src="/assets/tick.png" alt="tick" width="14" />
138+
</div>
139+
</div>
140+
<ng-container *ngTemplateOutlet="ddNestedChildrenTemplate; context: {items: item[config.nestedTagProperty], config: config, fns: fns}"> </ng-container>
141+
</div>
142+
</div>
143+
</ng-template>
144+
145+
<ng-template #nestedDDChildTemplate let-items="items" let-fns="fns" let-config="config">
146+
<div style="margin-left: 16px;">
147+
<ng-container *ngFor="let item of items">
148+
<div (click)="fns.onItemClicked(item, $event)">
149+
<div>
150+
<div>{{item[config.displayProperty]}}</div>
151+
<div *ngIf="item.tiSelected && config.showTagsSelectedInDD">
152+
<img src="../assets/tick.png" alt="tick" width="14" />
153+
</div>
154+
</div>
155+
<ng-container *ngTemplateOutlet="nestedDDChildTemplate; context: {items: item[config.nestedTagProperty], config: config, fns: fns}"> </ng-container>
156+
</div>
157+
</ng-container>
158+
</div>
159+
</ng-template>
39160
```
40161

162+
#### Dropdown Template with Tooltip
163+
164+
```html
165+
<ng-template #simpleDDWithTooltip let-items="items" let-config="config" let-fns="fns">
166+
<div *ngIf="items.length" style="max-height: 250px; overflow-y: auto;padding-top: 8px;">
167+
<div *ngFor="let item of items">
168+
<div (click)="fns.onItemClicked(item)" style="display: flex; justify-content: space-between;" cdkOverlayOrigin #onHoverTrigger="cdkOverlayOrigin" (mouseenter)="fns.showTooltip(item[config.hoverProperty], onHoverTrigger)" (mouseleave)="fns.hideTooltip()">
169+
{{item[config.displayProperty]}}
170+
<div *ngIf="item.tiSelected && config.showTagsSelectedInDD">
171+
<img src="/assets/tick.png" alt="tick" width="14" />
172+
</div>
173+
</div>
174+
</div>
175+
</div>
176+
</ng-template>
177+
```
178+
### Tag Item Template (`tagItemTemplate`)
179+
Example usage of `tagItemTemplate` is as follows
180+
```html
181+
<ng-template
182+
#customTag
183+
let-item="item"
184+
let-config="config"
185+
let-closeClicked="closeClicked"
186+
>
187+
<div
188+
*ngIf="item"
189+
style="padding: 10px; background-color: black; color: white; display: flex; gap:8px; align-items: center; border-radius: 4px; margin-right: 4px;"
190+
>
191+
<div>
192+
{{ item[config.displayProperty] }}
193+
</div>
194+
<button (click)="closeClicked.emit(item)"
195+
style="background: none; border: none; color: white; cursor: pointer; padding: 2px;">
196+
x
197+
</button>
198+
</div>
199+
</ng-template>
200+
```
201+
> Notice the `(click)="closeClicked.emit(item)"`. If you don't include this in button tag, then the tag won't be removed from input field upon clicking on cross button and you will have to remove the item by clicking on option from dropdown.
202+
>
203+
> If you don't want the cross button functionality, you can simply remove the `button` tag.
204+
205+
41206
## Compatibility
42207

43208
All released versions of this library (up to tag `0.1.16`) are compatible with Angular `^8.2.11`.
44209

45210
Use `1.x.x` for Angular `^15.x.x`
211+
212+
## Development
213+
214+
### Build
215+
216+
Run `npm run build:lib` to build the library. The build artifactsqm will be stored in the `dist/` directory.
217+
218+
### Running unit tests
219+
220+
Run `npm test` to execute the unit tests via [Jest](https://jestjs.io/).
221+
222+
### Release
223+
224+
1. Bump the version in `projects/angular-tags-input/package.json`.
225+
2. Run `npm install` to update `package-lock.json`.
226+
3. Commit the changes.
227+
4. Tag the release: `git tag -a v1.x.x -m "v1.x.x"` (e.g., `v1.1.0`).
228+
5. Push changes and tags: `git push origin master --tags`.
229+
6. Run `npm run release` to build and publish the library to npm.
230+
231+
## Demo
232+
233+
The demo application is located in `projects/tags-input-demo`.
234+
235+
### Running the demo
236+
237+
Run `npm start` to serve the demo application. Navigate to `http://localhost:4200/`.
238+
239+
### Deploying the demo
240+
241+
The demo is deployed to GitHub Pages using GitHub Actions.
242+
To deploy manually:
243+
1. Run `npm run build` to build the demo application.
244+
2. Deploy the contents of `dist/tags-input-demo` to the `gh-pages` branch.

0 commit comments

Comments
 (0)