# irisa-offcanvas

Latest version **20.1.1** (published 2026-06-30) · 0 weekly downloads

## Install

```sh
npm install irisa-offcanvas
pnpm add irisa-offcanvas
yarn add irisa-offcanvas
bun add irisa-offcanvas
```

## Health

**Score 55/100 (C)** — status: active.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 20.1.1 |
| Published | 2026-06-30 |
| First published | 2025-07-12 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 20.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | ali.pournemat |

## Links

- npm: https://www.npmjs.com/package/irisa-offcanvas
- npm.io page: https://npm.io/package/irisa-offcanvas

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) 2.8.1

## Recent versions

- 20.1.1 (latest) — 2026-06-30
- 20.1.0 — 2026-06-13
- 20.0.0 — 2025-07-12
- 17.0.0 — 2025-07-12
- 0.0.0 — 2025-07-12

## README

<!-- html -->

<button class="btn btn-primary"
              (click)="toggleOffcanvas()">toggle</button>


<offcanvas [(isOpen)]="isOffcanvasOpen"
           position="end"
           backdrop="static">
  <div offcanvas-header>
    <div class="d-flex justify-content-between align-items-center">
      <div class="d-flex align-items-center">
        <i class="fal fa-sliders-h text-gray-90 fs-24 me-6px"></i>
        <span class="text-black-100 fs-14"
              [innerText]="'ListLabels.AdvancedSearch' | translate"></span>
      </div>
      <button (click)="isOffcanvasOpen = false"
              class="btn-close text-gray-90 fs-10">
      </button>
    </div>
  </div>
  <div offcanvas-body>
    <div class="form-group">
      <label [innerText]="'ListLabels.ProduceDate' | translate"></label>
      <div class="d-flex align-items-center">
        <span class="me-4px"
              [innerText]="'ListLabels.From' | translate"></span>
        <datepicker [(ngModel)]="sharedService.searchModel.produceDateFrom"
                    autocomplete="off"
                    name="produceDateFrom"
                    id="produceDateFrom">
        </datepicker>
        <span class="mx-4px"
              [innerText]="'ListLabels.To' | translate"></span>
        <datepicker [(ngModel)]="sharedService.searchModel.produceDateTo"
                    autocomplete="off"
                    name="produceDateFrom"
                    id="transactionDateTo">
        </datepicker>
      </div>
    </div>
  </div>
  <div offcanvas-footer
       class="form-group d-flex d-flex justify-content-between py-12px px-16px">
    <button class="btn btn-primary fs-12 font-regular"
            [disabled]="sharedService.searchState.IsWait"
            (click)="onApplyFilterClick()"
            [innerText]="'ListLabels.ApplyFilter' | translate"></button>
    <button class="btn btn-outline-dark fs-12 font-regular ms-16px"
            [disabled]="sharedService.searchState.IsWait"
            (click)="onResetFilterClick()"
            [innerText]="'ListLabels.CancelFilter' | translate"></button>
  </div>
</offcanvas>


<!-- ts -->

 isOffcanvasOpen = false;

 toggleOffcanvas() {
   this.isOffcanvasOpen = !this.isOffcanvasOpen;
 }

 onApplyFilterClick() {
   this.sharedService.refresh(true);
   this.isOffcanvasOpen = false;
 }

---
_Source: https://npm.io/package/irisa-offcanvas · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._