npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

@kit-ng-ui/modal

v0.1.0

Published

Kit UI Modal — declarative <kit-modal> + imperative KitModalService for dialogs and confirms.

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Maintainers

hoangns832hoangns832

Keywords

Readme

@kit-ng-ui/modal

Modal dialog — both declarative <kit-modal> and imperative KitModalService (with confirm / info / success / warning / error shortcuts).

pnpm add @kit-ng-ui/modal

In your global stylesheet:

@use '@kit-ng-ui/modal/styles' as modal;

Declarative

import { KitModalComponent } from '@kit-ng-ui/modal';
<kit-modal
  [(open)]="open"
  title="Delete this item?"
  okText="Delete"
  okDanger
  (okClick)="save()"
  (afterClose)="onClosed()"
>
  <p>This action cannot be undone.</p>
</kit-modal>

Custom footer:

<kit-modal [(open)]="open" title="Custom footer">
  Body…
  <ng-template #footerTpl>
    <kit-button (click)="open.set(false)">Maybe later</kit-button>
    <kit-button type="primary" (click)="run()">Run</kit-button>
  </ng-template>
</kit-modal>

Imperative

private readonly modal = inject(KitModalService);

deleteItem(item: Item) {
  this.modal.confirm({
    title: 'Delete this item?',
    content: `${item.name} will be removed.`,
    okDanger: true,
    okText: 'Delete',
    onOk: () => this.api.delete(item.id),   // Promise; rejection keeps the modal open
  });
}

savedToast() {
  this.modal.success({ title: 'Saved!', content: 'Your changes have been saved.' });
}

The handle returned by every method is a KitModalRef:

  • close(result?) — close and resolve afterClosed() with result
  • destroy() — synchronous teardown
  • afterClosed() — Promise resolving with the close result
  • updateConfig(patch) — change inputs while the modal is open

Content sources

options.content accepts:

  • string — plain text rendered as the body
  • TemplateRef<unknown> — projected template
  • Type<T> — a component class; pass componentInputs to set inputs

onOk / onCancel

Either may return:

  • void — close immediately
  • boolean — false keeps the modal open
  • Promise<boolean | void> — resolution gates the close (rejection keeps it open)

API — <kit-modal> inputs

| Input | Description | Type | Default | | ----------------- | ------------------------------------------------------------------------ | ------------------------------------- | ------------ | | cancelText | Cancel button label. | string | 'Cancel' | | centered | Vertically center the dialog in the viewport. | boolean | false | | className | Extra class on the dialog wrapper. | string \| null | null | | closable | Render the close (×) button. | boolean | true | | confirmLoading | Show a loading spinner on OK and disable Cancel. | boolean | false | | keyboard | Close on Escape. | boolean | true | | mask | Render the backdrop. | boolean | true | | maskClosable | Close when the backdrop is clicked. | boolean | true | | okDanger | Style the OK button as danger. | boolean | false | | okOnly | Hide the cancel button entirely. | boolean | false | | okText | OK button label. | string | 'OK' | | open | Two-way bound open state. | boolean | false | | title | Header text. Falls back to [titleTpl]. | string \| null | null | | titleTpl | Header template. Overrides [title]. | TemplateRef \| null | null | | width | Dialog width (px or any CSS length). | number \| string | 520 |

Outputs

| Output | Description | | -------------- | ----------------------------------------------------------------- | | okClick | OK button clicked. Fires before onOk resolves. | | cancelClick | Cancel button clicked / Escape / mask click. | | afterClose | Fired after the leave animation finishes and the DOM is detached. |

Notes

  • The declarative <kit-modal> renders inline in your template, using position: fixed. If an ancestor has transform, filter, or will-change set, the dialog inherits that as its containing block — switch to KitModalService.create() to escape it (those modals are mounted directly under <body>).
  • Body scroll is locked while any modal is open and restored on destroy.
  • Escape closes the modal unless [keyboard]="false".