open-index/open-npm huggingface dataset:
npm package: @lukana/alerts
Description: Alerts.
Latest version: 2.0.1

# Lukana alerts

Alerts.

# Usage

1. Add `@lukana/alerts/scss/alerts` to Your `style.scss` file or use Your own styles.
1. Import `AlertsModule` as dependency.
1. Use somewhere in template

    ```html
    <lukana-alerts></lukana-alerts>
    ```

    You can provide `[position]` attribute which is of type AlertsPosition. Default is `top-right`
1. To print alert use `AlertsService` with one of these
    ```typescript
    AlertsService.addSuccess('Success');
    AlertsService.addError('Error', 0);
    AlertsService.addInfo('Info');
    AlertsService.addWarning('Warning', 2000);
    ```
    As second param You can provide `closeTime` in miliseconds - default: 4000. If You give 0 it won't be closed automagically.

# Positions

```typescript
export enum AlertsPosition {
  TopRight = 'top-right',
  BottomRight = 'bottom-right',
  BottomLeft = 'bottom-left',
  TopLeft = 'top-left',
  TopFullWidth = 'top-full-width',
  BottomFullWidth = 'bottom-full-width',
}
```
npm package: @lukana/dropdowns
Description: Simple dropdown using only `@angular/cdk` as dependencies.
Latest version: 2.0.0

# Lukana dropdowns

Simple dropdown using only `@angular/cdk` as dependencies.

# Usage

`DropdownsModule`

```html
<div class="dropdown" lukanaDropdown>
    <button lukanaDropdownToggle class="btn btn-secondary dropdown-toggle" type="button">
        Dropdown button
    </button>
    <div *lukanaDropdownBody class="dropdown-menu">
        <a class="dropdown-item">Action</a>
        <a class="dropdown-item">Another action</a>
        <a class="dropdown-item">Something else here</a>
    </div>
</div>
```

# Options

## hideOnClick: boolean - default `true`

If You don't want to hide dropdown with every click on dropdown's body use `[hideOnClick]="false"` attribute. Then You have to hide it manually like this:

```typescript
<div class="dropdown" lukanaDropdown [hideOnClick]="false" #ld="lukanaDropdown">
    <button lukanaDropdownToggle class="btn btn-secondary dropdown-toggle" type="button">
        Don't close on click
    </button>
    <div *lukanaDropdownBody [@dropdownAnimation] class="dropdown-menu"
         style="position: static; display:block">
        <a class="dropdown-item" (click)="chosen=1; ld.hide()">Click and hide</a>
        <a class="dropdown-item" (click)="chosen=2">Click and don't hide</a>
    </div>
</div>
```


# Animations

To use animation add `[@dropdownAnimation]`  with propper animation in Your component example

```typescript
import {dropdownAnimation} from "@lukana/dropdowns";
@Component({
  ...
  animations: [dropdownAnimation]
})
export class ...
```

```html
<div class="dropdown" lukanaDropdown #d="lukanaDropdown">
    <button lukanaDropdownToggle class="btn btn-secondary dropdown-toggle" type="button">
        Dropdown button
    </button>
    <div *lukanaDropdownBody [@dropdownAnimation] class="dropdown-menu">
        <a class="dropdown-item">Action</a>
        <a class="dropdown-item">Another action</a>
        <a class="dropdown-item">Something else here</a>
    </div>
</div>

<button class="btn btn-secondary" (click)="d.show()">Show</button>
```
npm package: @lukana/loading-indicator
Description: ```html     <lukana-global-loading></lukana-global-loading>     <div [lukanaLoadingOverlay]="loading"></div> ```
Latest version: 2.0.1

```html
    <lukana-global-loading></lukana-global-loading>
    <div [lukanaLoadingOverlay]="loading"></div>
```

Css spinners from: https://projects.lukehaas.me/css-loaders/
npm package: @lukana/modals
Description: Modals using only `@angular/cdk` as dependencies.
Latest version: 2.0.2

# Lukana modals

Modals using only `@angular/cdk` as dependencies.

# Usage

1. Add `@lukana/modals/scss/modal` to Your `style.scss` file or use Your own styles.
1. Import `ModalsModule` as dependency.
1. Add modals content component to `entryComponents`
1. Inject `ModalService` as dependency in You component, and open modal with command `ModalService.open(YourComponent)`:

    ```typescript
    @Component({
      selector: 'app-page',
      templateUrl: './app-page.component.html'
    })
    export class AppPageComponent implements OnInit {

      constructor(private modalService: ModalService) {
      }

      ngOnInit() {
      }

      onOpenModal() {
        const dataPassedDoComponent = {name: 'Hello'};
        this.modalService.open(ModalContentComponent, dataPassedDoComponent)
          .subscribe(resp => console.log('returned', resp));
      }
    }
    ```

1. In modal component You can Inject `ModalService` and close modal with return value like this:

    ```typescript

    @Component({
      selector: 'lukana-modal-content',
      templateUrl: './modal-content.component.html',
      styleUrls: ['./modal-content.component.css']
    })
    export class ModalContentComponent implements OnInit {
      name: string;
      constructor(private modalService: ModalService) {
      }

      ngOnInit() {
      }

      onClose() {
        this.modalService.close('returnValue');
      }
    }
    ```
npm package: @lukana/tooltips
Description: Modals using only `@angular/cdk` as dependencies.
Latest version: 2.0.0

# Lukana tooltips

Modals using only `@angular/cdk` as dependencies.

# Usage

1. Add `@lukana/tooltips/scss/modal` to Your `style.scss` file or use Your own styles.
1. Import `TooltipsModule` as dependency.
1. Use in template

    ```html
    <div [lukanaTooltip]="'Hello world!'">Tooltips</div>

    <button class="btn btn-primary" lukanaTooltip="Hello" [position]="'left'">Left</button>
    ```