stenc-alert

An alert/notification web component built with Stencil.

Installation

npm install stenc-alert

Usage

Import the Component

import 'stenc-alert';

Using with Script Tag

<script type="module" src="https://unpkg.com/stenc-alert/dist/stenc-alert/stenc-alert.esm.js"></script>

Examples

<!-- Info alert (default) -->
<poc-alert>This is an informational message</poc-alert>

<!-- Success alert -->
<poc-alert type="success">Operation completed successfully!</poc-alert>

<!-- Warning alert -->
<poc-alert type="warning">Please proceed with caution</poc-alert>

<!-- Error alert -->
<poc-alert type="error">An error occurred</poc-alert>

<!-- Dismissible alert -->
<poc-alert type="info" dismissible>You can close this alert</poc-alert>

<!-- Auto-close after 5 seconds (5000ms) -->
<poc-alert type="success" auto-close="5000">This will auto-close in 5 seconds</poc-alert>

<!-- Dismissible + Auto-close -->
<poc-alert type="warning" dismissible auto-close="10000">
  Dismissible and auto-closes in 10 seconds
</poc-alert>

Props

| Property | Attribute | Type | Default | Description | |----------|-----------|------|---------|-------------| | type | type | 'info' \| 'success' \| 'warning' \| 'error' | 'info' | Alert type/style | | dismissible | dismissible | boolean | false | Whether the alert can be dismissed by user | | autoClose | auto-close | number | 0 | Auto-close after milliseconds (0 = no auto-close) |

Events

| Event | Description | Detail | |-------|-------------|--------| | alertDismissed | Emitted when alert is dismissed (either by user clicking dismiss button or auto-close) | { type: AlertType } |

JavaScript Usage

const alert = document.querySelector('poc-alert');

// Listen to dismiss event
alert.addEventListener('alertDismissed', (event) => {
  console.log('Alert dismissed. Type was:', event.detail.type);
});

// Programmatically trigger dismiss (if you added a public method)
// This would require exposing a dismiss() method in the component

CSS Custom Properties

The alert component uses Shadow DOM and includes default styling for all alert types:

• Info: Blue color scheme with info icon (ℹ)
• Success: Green color scheme with checkmark icon (✓)
• Warning: Orange/yellow color scheme with warning icon (⚠)
• Error: Red color scheme with error icon (✕)

Framework Integration

React

import { defineCustomElements } from 'stenc-alert/loader';

// Call this once in your app entry point
defineCustomElements();

function App() {
  const handleDismiss = (e) => {
    console.log('Alert dismissed:', e.detail);
  };

  return (
    <poc-alert
      type="success"
      dismissible
      auto-close={5000}
      onAlertDismissed={handleDismiss}
    >
      Success message!
    </poc-alert>
  );
}

Vue

<template>
  <poc-alert
    type="success"
    dismissible
    :auto-close="5000"
    @alertDismissed="handleDismiss"
  >
    Success message!
  </poc-alert>
</template>

<script>
import { defineCustomElements } from 'stenc-alert/loader';
defineCustomElements();

export default {
  methods: {
    handleDismiss(event) {
      console.log('Alert dismissed:', event.detail);
    }
  }
};
</script>

Angular

In your main.ts:

import { defineCustomElements } from 'stenc-alert/loader';
defineCustomElements();

Add to your module:

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

Then in your component template:

<poc-alert
  type="success"
  [attr.dismissible]="true"
  [attr.auto-close]="5000"
  (alertDismissed)="onDismiss($event)"
>
  Success message!
</poc-alert>

License

MIT