open-index/open-npm huggingface dataset:
npm package: @lesfabricants/ngx-flex-limitter
Description: A library for limiting the number of lines in a flex container, complete with customizable expand and collapse.
Latest version: 21.0.0

# ngx-flex-limitter

A library for limiting the number of lines in a flex container, complete with customizable expand and collapse.

![Flex limitter preview](./flex-limitter.gif)

```html
<ngx-flex-limitter [items]="items" [totalLines]="3">
  <ng-template ngxFlexLimitterItem let-item>
    <div class="item">{{ item.value }}</div>
  </ng-template>
  <ng-template ngxFlexLimitterExpand let-amount>
    <button (click)="expand()">+{{ amount }}</button>
  </ng-template>
  <ng-template ngxFlexLimitterCollapse>
    <button (click)="collapse()">-</button>
  </ng-template>
</ngx-flex-limitter>
```

```ts
items = [
  { value: "Leo" },
  { value: "Paul" },
  { value: "Marie" },
  { value: "Nathan" },
  { value: "Camilla" },
  { value: "Jeanne" },
  { value: "Raz" },
  { value: "Matt" },
  { value: "Laureen" },
  { value: "Augustin" },
  { value: "Katie" },
  { value: "Liam" },
  { value: "Emma" },
  { value: "Noah" },
  { value: "Olivia" },
  { value: "William" },
  { value: "Ava" },
  { value: "James" },
  { value: "Isabella" },
  { value: "Logan" },
  { value: "Sophia" },
];

baseTotalLines = 3;
totalLines = this.baseTotalLines;

expand() {
  this.totalLines += 1;
}

collapse() {
  this.totalLines = this.baseTotalLines;
}
```

## How to use

The library documentation is available over at
<https://lesfabricants.github.io/libraries/#/flex-limitter>

&nbsp;

_This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.1.0._
npm package: @lesfabricants/ngx-progress
Description: A small utility directive to create progress bars without having to hack your way through css overwrites
Latest version: 21.0.0

# ngx-progress

A small utility directive to create progress bars without having to hack your way through css overwrites

![Progress preview](./progress.png)

```html
<ng-template
  class="horizontal-progress-bar"
  *ngxProgress="
    let percentages of ['reviewed', 'pending'];
    in: answers;
    key: 'status'
  "
>
  <div class="progress-item dark-blue" [style.width.%]="percentages[0]"></div>
  <div class="progress-item cyan" [style.width.%]="percentages[1]"></div>
</div>
<div
  class="horizontal-progress-bar"
  *ngxProgress="
    let percentages of ['reviewed', 'pending'];
    in: answers;
    key: 'status'
  "
>
  <div class="progress-item dark-blue" [style.width.%]="percentages[0]"></div>
  <div class="progress-item cyan" [style.width.%]="percentages[1]"></div>
</div>
```

```ts
answers = [
  {
    status: 'pending',
    comment: 'answer 1',
  },
  {
    status: 'pending',
    comment: 'answer 2',
  },
  {
    status: 'reviewed',
    comment: 'answer 3',
  },
];
```

## How to use

The library documentation is available over at
<https://lesfabricants.github.io/libraries/#/progress>

&nbsp;

_This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.1.0._