open-index/open-npm huggingface dataset:
npm package: @nghacks/overflow-carousel
Description: Show overflowing content as carousel.
Author: Abdun Nahid
Latest version: 1.0.0

# Overflow carousel

Show overflowing content as carousel.

[Live Preview](https://ng-hack.web.app/overflow-carousel)

## How to use

> Install package

```bash
npm install @nghacks/overflow-carousel
```

> Import `OverflowCarouselModule` to your consumer module.

```typescript
import { NgModule } from '@angular/core';
...
...
import { OverflowCarouselModule } from '@nghacks/overflow-carousel';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
    OverflowCarouselModule
  ]
})
export class ConsumerModule { }
```

> Use Component in template

```html
<overflow-carousel>

  <button slide-left-button>
    <mat-icon>navigate_before</mat-icon>
  </button>

  <carousel-item *ngFor="let img of images" class="image-card">
    <img [src]="img" width="100%" height="100%">
  </carousel-item>

  <button slide-right-button>
    <mat-icon>navigate_next</mat-icon>
  </button>

</overflow-carousel>

<!-- Or -->
<!-- To Use custom slider buttons position, use component reference on the template -->
<div>
  <button [disabled]="!imageCarousel.sliderButtonsVisibility.showLeftSlider" (click)="imageCarousel.previous()">
    Previous
  </button>
  <button [disabled]="!imageCarousel.sliderButtonsVisibility.showRightSlider" (click)="imageCarousel.next()">
    Next
  </button>
</div>

<overflow-carousel #imageCarousel="overflowCarousel">
  <carousel-item *ngFor="let img of images" class="image-card">
    <img [src]="img" width="100%" height="100%">
  </carousel-item>
</overflow-carousel>

```

## Styles

```css
.image-card {
  width: 300px;
  height: 300px;
  margin: 0 20px 20px 0;

  &:last-of-type {
    margin-right: 0;
  }
}

```

## Inputs

```typescript

  /**
   * Sliding animation time
   * @type number
   * @default .4
   */
  @Input() transitionDuration = .4;

  /**
   * Percentage of the content to move on each slide
   * @type number
   * @field value between 0.1 - 1 with the aspect of container width
   */
  @Input() slidePercentage = .8;

```


## Types

```typescript

class SliderButtonVisibilty {
  showLeftSlider: boolean;
  showRightSlider: boolean;

  updateSliderButtonVisibilty(
    containerWidth: number,
    contentWidth: number,
    translatedPosition: number
  );
}

```
npm package: @nghacks/quantity-input
Description: Quantity input for shopping cart
Author: Abdun Nahid
Latest version: 1.0.1

# Quantity Input

Quantity input for shopping cart.

[Live Preview](https://ng-hack.web.app/quantity-input)

## How to use

> Install package

```bash
npm install @nghacks/quantity-input
```

> Import `QuantityInputModule` to your consumer module.

```typescript
import { NgModule } from '@angular/core';
...
...
import { QuantityInputModule } from '@nghacks/quantity-input';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
    QuantityInputModule
  ]
})
export class ConsumerModule { }
```

> Use with reactive form or template driven form

```html
<!-- Basic -->
<quantity-input></quantity-input>

<!-- Reactive Form -->
<quantity-input formControlName="quantity"></quantity-input>

<!-- Template Driven Form -->
<quantity-input [(ngModel)]="quantity"></quantity-input>

```

## Inputs

```typescript

  /**
   * @description Use Mat Color `color='accent' / color='primary`
   */
  @Input() color: string;

  /**
   * @description Max limit of quantity
   */
  @Input() limit = 10000000;

  /**
   * @description Disables quantity input
   * @note Can be used with reactive for api
   */
  @Input() disabled: boolean;

```
## Outputs

```typescript

  /**
   * @description Emits on input change
   */
  @Output() quantityChange: number;

```
npm package: @nghacks/rating-input
Description: Rating input for products/services.
Author: Abdun Nahid
Latest version: 1.0.0

# Rating Input

Rating input for shopping cart.

[Live Preview](https://ng-hack.web.app/rating-input)

## How to use

> Install package

```bash
npm install @nghacks/rating-input
```

> Import `RatingInputModule` to your consumer module.

```typescript
import { NgModule } from '@angular/core';
...
...
import { RatingInputModule } from '@nghacks/rating-input';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
    RatingInputModule
  ]
})
export class ConsumerModule { }
```

> Use with reactive form or template driven form

```html
<!-- Basic -->
<rating-input></rating-input>

<!-- Reactive Form -->
<rating-input formControlName="rating"></rating-input>

<!-- Template Driven Form -->
<rating-input [(ngModel)]="rating"></rating-input>

```

## Inputs

```typescript

  /**
   * @description Use MatIcons
   */
  @Input() ratedIcon = 'star';
 
  /**
   * @description Use MatIcons
   */
  @Input() notRatedIcon = 'star_outline';

  /**
   * @description Rated icon color
   */
  @Input() ratedIconColor = '#faca51';

  /**
   * @description Enable/Disable animation
   */
  @Input() animation = true;

  /**
   * @description Count of rating
   */
  @Input() ratingCount = 5;

  /**
   * @description Disables rating input
   * @note Can be used with reactive for api
   */
  @Input() disabled: boolean;

```

## Outputs

```typescript

  /**
   * @description Emits on input change
   */
  @Output() ratingChange: number;

```
npm package: @nghacks/uploader
Description: Image and file uploader for angular
Author: Abdun Nahid
Latest version: 0.1.1

# Uploader

Picks image or file.

[Live Preview](https://ng-hack.web.app/uploader)

## How to use

> Install package

```bash
npm install @nghacks/uploader
```

> Import `UploaderModule` to your consumer module like `ConsumerModule`

```typescript
import { NgModule } from '@angular/core';
...
...
import { UploaderModule } from '@nghacks/uploader';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
    UploaderModule
  ]
})
export class ConsumerModule { }
```

> Use component on html template

```html
<img-uploader (fileInputChange)="imageInputChange($event)"></img-uploader>

<file-uploader (fileInputChange)="fileInputChange($event)"></file-uploader>
```

## Inputs

```typescript
/**
 * @description Picker label
 * @default 'Drag image, or Choose' for image uploader
 * @default 'Drag file, or Choose' for file uploader
 * @example 'Drag your funny video, or Choose'
 */
@Input() pickerLabel: string;

/**
 * @description Hint is used to guide user
 * @example 'Max file size: 5mb'
 */
@Input() hint: string;

/**
 * @description acceptable file types
 * @default ['.jpg', '.png', '.jpeg'] for image uploader
 * @default ['.pdf', '.csv', '.doc', '.docx','.docx', '.xlsx', '.cer'] for file uploader
 * @example ['.gif'] for only gif files
 */
@Input() accept: string[];

/**
 * @description maximum file size in kb (kilobyte)
 * @default 5000 (5mb)
 */
@Input() maxSize = 5000;

/**
 * @description disables the picker
 */
@Input() disabled: boolean;

/**
 * @description min-height of the picker
 * @default 48 (in pixel)
 */
@Input() minHeight = 48;

/**
 * @description max-height of the image previewer
 * @memberof ImgUploaderComponent only
 * @default 250 (in pixel)
 */
@Input() maxHeight = 250;
```

## Inputs

```typescript
@Output() fileInputChange = new EventEmitter<FileInputChange>();
```

## Types

```typescript
export interface UploaderError {
  maxSizeExceeded: boolean;
  wrongFileType: boolean;
}

export interface FileInputChange {
  hasFile: boolean;
  fileName: string;
  base64Image: string[];
  errors: UploaderError;
}

```