Gathering detailed insights and metrics for @ewc-lib/ewc-dialog
Installations
npm install @ewc-lib/ewc-dialogDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
18.19.0
NPM Version
10.8.2
Score
73
Supply Chain
94.5
Quality
95.5
Maintenance
100
Vulnerability
98.7
License
Releases
Unable to fetch releases
Contributors
4
validate.email 🚀
Verify real, reachable, and deliverable emails with instant MX records, SMTP checks, and disposable email detection.
Download Statistics
Total Downloads
1,410
Last Day
1
Last Week
157
Last Month
191
Last Year
1,410
Bundle Size
8.99 kB
Minified
2.60 kB
Minified + Gzipped
Maintainers
4
Package Meta Information
Latest Version
3.0.2-alpha
Package Id
@ewc-lib/ewc-dialog@3.0.2-alpha
Unpacked Size
125.28 kB
Size
94.48 kB
File Count
15
NPM Version
10.8.2
Node Version
18.19.0
Published on
Mar 17, 2025
Total Downloads
Cumulative downloads
Total Downloads
1,410
Last Day
0%
1
Compared to previous day
Last Week
5,133.3%
157
Compared to previous week
Last Month
46.9%
191
Compared to previous month
Last Year
0%
1,410
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
1
Screenshot
API
There are the following setters:
- visible - true to show modally, false to hide
- width - width of the dialog, preferrably in %. Default = 50%
- title - HTMLTemplateElement containing HTML which is displayed as dialog title
- scrollableContent - HTMLTemplateElement containing HTML which is displayed in dialog's area for scrollable content
- fixedContent - HTMLTemplateElement containing HTML which is displayed in dialog's area for fixed content
And one optional attribute:
- width - is reflected to property w/ same name.
All attribs and props support modification at runtime.
Note: Please see the screenshot above to see where scrollable-content and fixed-content are displayed within the dialog box.
Setting the content
Content can be set in either of two ways:
- via HTML
- at runtime from JS using a setter
There are the following "slots" to set the respective content:
- title
- scrollableContent
- fixedContent
Please see the usage-example/ directory, which contains working examples of setting the 3 different content slots in both ways, via HTML or JS.
Note: The term "slot" used here refers to an alternative implementation of the standard shadow-DOM slot mechanism.
Note: fixedContent can be omitted - the space is taken up by scrollableContent in that case.
Example: set content via HTML
This is done by setting one of the three attributes on a HTMLTemplateElement (which is a child of ewc-dialog) to indicate the content:
- data-title
- data-scrollable-content
- data-fixed-content
Example:
<ewc-dialog>
<template data-title><span>Title appears here</span></template>
<template data-scrollable-content>
<span>This is the where scrollable content appears - e.g. a longer text w/ explaining something.</span>
</template>
<template data-fixed-content>
<span>This is the where fixed content appears. For example, a checkbox or buttons.</span>
</template>
</ewc-dialog>
Example: set content via setter
const scrollableContent = document.createElement('template');
scrollableContent.innerHTML = ...
myDialog.scrollableContent = scrollableContent
// similar for title and fixed content
Tab-focus trap
This component supports a focus trap, with which the tab focus remains within the dialog box, meaning that it cycles through all tab-able elements and doesn't ever leave the dialog box.
If scrollableContent or fixedContent contains elements which should be included in the focus trap - for example links - there's the possibility to set the focus trap's last element (to the last focusable element in either scrollableContent or fixedContent) - after which the first element (the close button) is focussed again, thereby completing a cycle.
This is done by setting the attribute data-last-element approprietly.
Example:
...
const scrollableContent = document.createElement('template');
...
scrollableContent.innerHTML = `<a data-last-element href="https://ec.europa.eu/eurostat" title="Link to Estat">Some Link Text</a>`
...
This way, the focus remains trapped within the dialog - but also includes all tab-focusable elements within scrollableContent and/or fixedContent.
Note: The usage-example/ directory contains a working example of this.
No vulnerabilities found.
No security vulnerabilities found.