Showing preview only (281K chars total). Download the full file or copy to clipboard to get everything.
Repository: mdbootstrap/TW-Elements
Branch: master
Commit: 6616b67d7e1c
Files: 50
Total size: 266.1 KB
Directory structure:
gitextract_jks9prp9/
├── .clabot
├── .github/
│ └── ISSUE_TEMPLATE/
│ └── bug_report.md
├── .gitignore
├── CODE_OF_CONDUCT.md
├── LICENSE
├── README.md
├── README.txt
├── index.html
├── package.json
├── plugin.cjs
├── src/
│ ├── css/
│ │ └── tailwind.scss
│ └── js/
│ ├── autoinit/
│ │ ├── Register.js
│ │ ├── callbacks/
│ │ │ └── free.js
│ │ ├── index.free.js
│ │ ├── index.js
│ │ ├── initSelectors/
│ │ │ └── free.js
│ │ └── jqueryInit.js
│ ├── base-component.js
│ ├── dom/
│ │ ├── data.js
│ │ ├── event-handler.js
│ │ ├── manipulator.js
│ │ └── selector-engine.js
│ ├── free/
│ │ ├── components/
│ │ │ ├── button.js
│ │ │ ├── carousel.js
│ │ │ ├── collapse.js
│ │ │ ├── dropdown.js
│ │ │ ├── modal.js
│ │ │ ├── offcanvas.js
│ │ │ ├── popover.js
│ │ │ └── tooltip.js
│ │ ├── forms/
│ │ │ └── input.js
│ │ ├── methods/
│ │ │ └── ripple.js
│ │ └── navigation/
│ │ ├── scrollspy.js
│ │ └── tab.js
│ ├── tw-elements.free.es.js
│ ├── tw-elements.free.umd.js
│ └── util/
│ ├── add-perfect-scrollbar-styles.js
│ ├── backdrop.js
│ ├── component-functions.js
│ ├── focusTrap.js
│ ├── getStyle.js
│ ├── index.js
│ ├── keycodes.js
│ ├── sanitizer.js
│ ├── scrollbar.js
│ ├── stack.js
│ └── touch/
│ ├── index.js
│ ├── swipe.js
│ └── touchUtil.js
└── types/
└── tw-elements.d.ts
================================================
FILE CONTENTS
================================================
================================================
FILE: .clabot
================================================
{
"contributors": "https://cla.tailwind-elements.com/users",
"message": "Thank you for your pull request and welcome to our community! We require contributors to sign a [Contributor License Agreement](https://cla.tailwind-elements.com/) and we don't seem to have CLAs on file for these contributors to the Pull Request: ({{usersWithoutCLA}}). In order for your PR to be reviewed and merged, please sign our CLA first.\n\nIf there are any questions, please don't hesitate to [get in touch with our team](https://github.com/mdbootstrap/Tailwind-Elements/discussions)."
}
================================================
FILE: .github/ISSUE_TEMPLATE/bug_report.md
================================================
---
name: Bug report
about: Create a report to help us improve
title: "[Component name] [description of the issue]"
labels: ""
assignees: ""
---
**Describe the bug**
A clear and concise description of what the bug is.
**To Reproduce**
Steps to reproduce the behavior:
1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error
**Expected behavior**
A clear and concise description of what you expected to happen.
**Actual behavior**
A clear and concise description of what is happening instead.
**Show your code**
It will be easier for us to help you if you [create a snippet using TE playground](https://tailwind-elements.com/snippets/) and include a link to it in your issue.
**Desktop (please complete the following information):**
- OS: [e.g. iOS]
- Browser [e.g. chrome, safari]
- Version [e.g. 22]
**Smartphone (please complete the following information):**
- Device: [e.g. iPhone6]
- OS: [e.g. iOS8.1]
- Browser [e.g. stock browser, safari]
- Version [e.g. 22]
**Additional context**
Add any other context about the problem here.
**Make sure it is indeed an issue/bug report**
- If it's a general support question (you just can't figure out how something works), but not an issue with the UI Kit or documentation itself it's better to ask here:
https://github.com/mdbootstrap/Tailwind-Elements/discussions/categories/support-from-community
- If it's an idea for a new feature, but you cannot write the code for it yourself, it's better to ask here:
https://github.com/mdbootstrap/Tailwind-Elements/discussions/categories/share-ideas-request-features
- If it's general feedback, it's better to post it here:
https://github.com/mdbootstrap/Tailwind-Elements/discussions/categories/kind-words-general-feedback
================================================
FILE: .gitignore
================================================
node_modules
================================================
FILE: CODE_OF_CONDUCT.md
================================================
# Contributor Covenant Code of Conduct
## Our Pledge
In the interest of fostering an open and welcoming environment, we as
contributors and maintainers pledge to making participation in our project and
our community a harassment-free experience for everyone, regardless of age, body
size, disability, ethnicity, gender identity and expression, level of experience,
education, socio-economic status, nationality, personal appearance, race,
religion, or sexual identity and orientation.
## Our Standards
Examples of behavior that contributes to creating a positive environment
include:
- Using welcoming and inclusive language
- Being respectful of differing viewpoints and experiences
- Gracefully accepting constructive criticism
- Focusing on what is best for the community
- Showing empathy towards other community members
Examples of unacceptable behavior by participants include:
- The use of sexualized language or imagery and unwelcome sexual attention or
advances
- Trolling, insulting/derogatory comments, and personal or political attacks
- Public or private harassment
- Publishing others' private information, such as a physical or electronic
address, without explicit permission
- Other conduct which could reasonably be considered inappropriate in a
professional setting
## Our Responsibilities
Project maintainers are responsible for clarifying the standards of acceptable
behavior and are expected to take appropriate and fair corrective action in
response to any instances of unacceptable behavior.
Project maintainers have the right and responsibility to remove, edit, or
reject comments, commits, code, wiki edits, issues, and other contributions
that are not aligned to this Code of Conduct, or to ban temporarily or
permanently any contributor for other behaviors that they deem inappropriate,
threatening, offensive, or harmful.
## Scope
This Code of Conduct applies both within project spaces and in public spaces
when an individual is representing the project or its community. Examples of
representing a project or community include using an official project e-mail
address, posting via an official social media account, or acting as an appointed
representative at an online or offline event. Representation of a project may be
further defined and clarified by project maintainers.
## Enforcement
Instances of abusive, harassing, or otherwise unacceptable behavior may be
reported by contacting the project team at contact@mdbootstrap.com.
All complaints will be reviewed and investigated and will result in a response that
is deemed necessary and appropriate to the circumstances. The project team is
obligated to maintain confidentiality with regard to the reporter of an incident.
Further details of specific enforcement policies may be posted separately.
Project maintainers who do not follow or enforce the Code of Conduct in good
faith may face temporary or permanent repercussions as determined by other
members of the project's leadership.
## Attribution
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
[homepage]: https://www.contributor-covenant.org
================================================
FILE: LICENSE
================================================
MIT License
Copyright (c) 2024 MDBootstrap
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
# TW Elements [<img src="https://tecdn.b-cdn.net/img/logo/te-transparent-noshadows.webp" width="45" align="right" alt="tw-elements">](https://tw-elements.com/)<a href="https://www.npmjs.com/package/tw-elements"><img src="https://img.shields.io/npm/dt/tw-elements.svg" alt="Total Downloads"></a> <a href="https://github.com/mdbootstrap/TW-Elements/releases"><img src="https://img.shields.io/npm/v/tw-elements.svg" alt="Latest Release"></a> <a href="https://twitter.com/intent/tweet/?text=Thanks+@TWElement+for+creating+an+amazing+collection+of+open+source+components+for+@tailwindcss%20https://tw-elements.com/&hashtags=tailwindCSS,bootstrap,webdesign,javascript,100DaysOfCode,DevCommunity"><img src="https://img.shields.io/twitter/url/http/shields.io.svg?style=social&label=Let%20us%20know%20you%20were%20here%21&"></a>
TW Elements is a huge collection of free, interactive components for Tailwind CSS.
<table>
<tbody>
<tr>
<td>
<a href="https://tw-elements.com/" alt="TW Elements tutorials" rel="dofollow">
<img width="600" src="https://tecdn.b-cdn.net/img/components-big.jpg">
</a>
</td>
<td>
<ul>
<li>500+ UI components</li>
<li>117+ design blocks</li>
<li>Dark mode support</li>
<li>Easy theming & customization</li>
<li>Simple, 1 minute install</li>
<li>Free for personal & commercial use</li>
</ul>
<p><b><a href="https://tw-elements.com/docs/standard/getting-started/quick-start/">Get started with TW Elements now!</a></b></p>
</td>
</tr>
</tbody>
</table>
---
## Table of Contents
- [Table of Contents](#table-of-contents)
- [Community](#community)
- [Coming soon](#coming-soon)
- [Components](#components)
- [Design blocks](#design-blocks)
- [Installation](#installation)
---
## Community
- Motivate us with some [words of encouragament ❤️](https://github.com/mdbootstrap/TW-Elements/discussions/categories/kind-words-general-feedback)
- Share your [ideas & feature requests 💡](https://github.com/mdbootstrap/TW-Elements/discussions/categories/share-ideas-request-features)
- Aks for help & help others in our [community support 🙏](https://github.com/mdbootstrap/TW-Elements/discussions/categories/support-from-community)
- **Engage, discuss & have fun in our [community 💬](https://github.com/mdbootstrap/TW-Elements/discussions)**
**If you want to help the project grow, start by simply sharing it with your peers!**
- [Share via Dev.to](<https://dev.to/new?prefill=---%0Atitle%3A%20500+%20open-source%20components%20for%20TailwindCSS%20%0Apublished%3A%20true%0Atags%3Atailwindcss%0A---%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20[](https://tw-elements.com/)%20%20%20%20%20%20%20%20\n%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20I%27d%20like%20to%20share%20my%20latest%20discovery%20with%20you.%20\n%20%20%20%20%20%20%20%20[Tailwind%20Elements](https://tw-elements.com/)%20is%20currently,%20the%20most%20popular%203rd%20party%20UI%20kit%20for%20TailwindCSS%20with%20over%2010k%20Github%20stars.%20%20%20%20%20%20%20%20[](https://github.com/mdbootstrap/TW-Elements/)%20%20%20%20%20%20%20%20It%27s%20a%20**huge%20collection%20of%20stunning%20components**%20made%20with%20attention%20to%20the%20smallest%20detail.%20%20%20%20%20%20%20%20%20Forms,%20cards,%20buttons,%20and%20hundreds%20of%20others.%20%20%20%20%20%20%20%20%20All%20components%20have%20**dark%20mode**%20and%20very%20intuitive%20**theming%20options**.%20%20%20%20%20%20%20%20The%20project%20is%20supported%20by%20an%20[engaged%20community%20on%20GitHub](https://github.com/mdbootstrap/TW-Elements/discussions),%20I%20recommend%20you%20check%20it%20out%20and%20join%20one%20of%20the%20many%20discussions.%20%20%20%20%20%20%20%20\n%20%20%20%20%20%20%20%20You%20will%20find%20installation%20instructions%20[here](https://tw-elements.com/docs/getting-started/installation),%20and%20you%20can%20track%20the%20progress%20of%20the%20project%20live%20%20%20%20%20%20%20%20%20[here](https://tw-elements.com/docs/standard/getting-started/changelog/).%20%20%20%20%20%20%20%20\n%20%20%20%20%20%20%20%20The%20project%20was%20kickstarted%20by%20@MDBootstrap,%20a%20group%20of%20open-source%20developers%20behind%20[MDB%20UI%20Kit](https://github.com/mdbootstrap/mdb-ui-kit)%20-%20a%20high-quality%20UI%20kit%20for%20Bootstrap,%20and%20also%20behind%20[MDB%20GO](https://mdbgo.com/)%20-%20hosting%20and%20deployment%20platform.%20%20%20%20%20%20%20%20\n%20%20%20%20%20%20%20%20I%20highly%20recommend%20you%20to%20check%20it%20out!%20%20%20%20%20%20%20%20\n%20%20%20%20%20%20%20%20%7B%25%20link%20mdbootstrap/tw-elements-breakthrough-version-is-here-59hh%20%25%7D%20%20%20%20%20%20%20%20\n>)
- [Share via Twitter](https://twitter.com/intent/tweet?text=500%2B%20open-source%20components%20for%20%23TailwindCSS%20%F0%9F%A4%A9%0Ahttps%3A//tw-elements.com/%0A%0ACongrats%20%40MDBootstrap%20%40ascensus_mdb%20%40dawidadach%20for%20this%20awesome%20design%20collection!%0A%0AI%20will%20keep%20using%20it%20in%20my%20projects%20for%20sure!%0A%0A%23uiux%20%23webdevelopment%20%23HTML%20%23CSS%20%23design%20%23Webdesign%20%23programming%20)
- [Share via Facebook](https://www.facebook.com/sharer/sharer.php?u=https%3A//tw-elements.com)
- [Share via LinkedIn](http://www.linkedin.com/shareArticle?url=https%3A%2F%2Ftw-elements.com%2F&title=500%2B%20open-source%20components%20for%20TailwindCSS)
- [Share via Pinterest](https://www.pinterest.com/pin/create/button?url=https://tw-elements.com/&media=https://tw-elements.com/img/components-big.jpg&description=TailwindElements)
- [Share via Reddit](https://reddit.com/submit?url=https://tw-elements.com/&title=500+%20open-source%20components%20for%20TailwindCSS)
- [Share via StumbleUpon](https://www.stumbleupon.com/submit?url=https://tw-elements.com/&title=500+%20open-source%20components%20for%20TailwindCSS)
- [Share via Vkontakte](https://vk.com/share.php?url=https://tw-elements.com/)
- [Share via Weibo](https://service.weibo.com/share/share.php?url=https://tw-elements.com/&title=500+%20open-source%20components%20for%20TailwindCSS)
- [Share via Hackernews](https://news.ycombinator.com/submitlink?u=https://tw-elements.com/&t=500+%20open-source%20components%20for%20TailwindCSS)
- [Share via Gmail](https://mail.google.com/mail/?view=cm&to=%7Bemail_address%7D&su=Check%20out%20this%20project&body=Hello,%0AI%27m%20reaching%20out%20to%20recommend%20my%20latest%20discovery.%0A%0AIt%27s%20over%20500+%20open-source%20components%20for%20TailwindCSS%20with%20excellent%20support%20and%20an%20awesome%20community:%0Ahttps://tw-elements.com/%0A%0AI%20hope%20you%20will%20find%20it%20useful.%0ABest%20regards,&bcc=%7Bemail_address%7D&cc=%7Bemail_address%7D)
- [Share via email](mailto:?subject=Check%20out%20this%20project&body=Hello%2C%0AI'm%20reaching%20out%20to%20recommend%20my%20latest%20discovery.%0A%0AIt's%20over%20500%20%20open-source%20components%20for%20Tailwind%20CSS%20with%20excellent%20support%20and%20an%20awesome%20community%3A%0Ahttps%3A%2F%2Ftw-elements.com%2F%0A%0AI%20hope%20you%20will%20find%20it%20useful.%0ABest%20regards%2C)
Thank you!
---
## Coming soon
Check out the upcoming features - make sure to **join the waiting list** in order to **get early access**!
<table>
<tr>
<td>
<a href="https://tw-elements.com/docs/standard/builder/">
<img alt="Design blocks" src="https://mdbootstrap.com/img/tw-demo/drag-and-drop.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/templates/">
<img alt="Templates" src="https://mdbootstrap.com/img/tw-demo/templates.webp">
</a>
</td>
</tr>
<tr>
<td align="center"><b>Drag & drop builder</b></td>
<td align="center"><b>Templates</b></td>
</tr>
</table>
---
## Components
A collection of stunning components made with attention to the smallest details. Forms, cards, buttons, and hundreds of others – in TW Elements you will find all the essential elements necessary for every project.
<table>
<tr>
<td>
<a href="https://tw-elements.com/docs/standard/forms/datepicker/">
<img alt="Datepicker" src="https://mdbootstrap.com/img/tw-demo/datepicker.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/components/dropdown/">
<img alt="Dropdown" src="https://mdbootstrap.com/img/tw-demo/dropdown.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/components/modal/">
<img alt="Modal" src="https://mdbootstrap.com/img/tw-demo/modal.webp">
</a>
</td>
</tr>
<tr>
<td align="center"><b>Datepicker</b></td>
<td align="center"><b>Dropdown</b></td>
<td align="center"><b>Modal</b></td>
</tr>
<tr>
<td>
<a href="https://tw-elements.com/docs/standard/data/charts/">
<img alt="Charts" src="https://mdbootstrap.com/img/tw-demo/charts.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/components/tooltip/">
<img alt="Tooltips" src="https://mdbootstrap.com/img/tw-demo/tooltips-1.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/components/carousel/">
<img alt="Carousel" src="https://mdbootstrap.com/img/tw-demo/carousel.webp">
</a>
</td>
</tr>
<tr>
<td align="center"><b>Charts</b></td>
<td align="center"><b>Tooltips</b></td>
<td align="center"><b>Carousel</b></td>
</tr>
<tr>
<td>
<a href="https://tw-elements.com/docs/standard/components/accordion/">
<img alt="Accordion" src="https://mdbootstrap.com/img/tw-demo/accordion.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/navigation/tabs/">
<img alt="Tabs" src="https://mdbootstrap.com/img/tw-demo/tabs.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/components/stepper/">
<img alt="Stepper" src="https://mdbootstrap.com/img/tw-demo/stepper.webp">
</a>
</td>
</tr>
<tr>
<td align="center"><b>Accordion</b></td>
<td align="center"><b>Tabs</b></td>
<td align="center"><b>Stepper</b></td>
</tr>
<tr>
<td>
<a href="https://tw-elements.com/docs/standard/forms/timepicker/">
<img alt="Tailwind CSS Time picker" src="https://mdbootstrap.com/img/tw-demo/timepicker.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/navigation/footer/">
<img alt="Tailwind CSS Tables" src="https://mdbootstrap.com/img/tw-demo/footer.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/navigation/navbar/">
<img alt="Tailwind CSS Navbar" src="https://mdbootstrap.com/img/tw-demo/navbar.webp">
</a>
</td>
</tr>
<tr>
<td align="center"><b>Timepicker</b></td>
<td align="center"><b>Footer</b></td>
<td align="center"><b>Navbar</b></td>
</tr>
<!--New row-->
<tr>
<td>
<a href="https://tw-elements.com/docs/standard/components/alerts/">
<img alt="Tailwind CSS Time picker" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-pro/alert-1.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/components/avatar/">
<img alt="Tailwind CSS Tables" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/avatar.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/components/badges/">
<img alt="Tailwind CSS Navbar" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/badge-1.webp">
</a>
</td>
</tr>
<tr>
<td align="center"><b>Alerts</b></td>
<td align="center"><b>Avatar</b></td>
<td align="center"><b>Badges</b></td>
</tr>
<!--New row-->
<tr>
<td>
<a href="https://tw-elements.com/docs/standard/components/button-group/">
<img alt="Tailwind CSS Time picker" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/button-group-1.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/components/buttons/">
<img alt="Tailwind CSS Tables" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/button-2.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/components/cards/">
<img alt="Tailwind CSS Navbar" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/card-1.webp">
</a>
</td>
</tr>
<tr>
<td align="center"><b>Button group</b></td>
<td align="center"><b>Buttons</b></td>
<td align="center"><b>Cards</b></td>
</tr>
<!--New row-->
<tr>
<td>
<a href="https://tw-elements.com/docs/standard/components/chips/">
<img alt="Tailwind CSS Time picker" src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/pro/demo-new/assets/images/chips.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/components/collapse/">
<img alt="Tailwind CSS Tables" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/collapse-1.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/components/gallery/">
<img alt="Tailwind CSS Navbar" src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/pro/demo-new/assets/images/lightbox.webp">
</a>
</td>
</tr>
<tr>
<td align="center"><b>Chips</b></td>
<td align="center"><b>Collapse</b></td>
<td align="center"><b>Gallery</b></td>
</tr>
<!--New row-->
<tr>
<td>
<a href="https://tw-elements.com/docs/standard/components/jumbotron/">
<img alt="Tailwind CSS Time picker" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/header-1.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/components/link/">
<img alt="Tailwind CSS Tables" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/link.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/components/listgroup/">
<img alt="Tailwind CSS Navbar" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/list-group-1.webp">
</a>
</td>
</tr>
<tr>
<td align="center"><b>Jumbotron</b></td>
<td align="center"><b>Link</b></td>
<td align="center"><b>List group</b></td>
</tr>
<!--New row-->
<tr>
<td>
<a href="https://tw-elements.com/docs/standard/components/notifications/">
<img alt="Tailwind CSS Time picker" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/notification.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/components/paragraphs/">
<img alt="Tailwind CSS Tables" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/paragraphs.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/components/placeholders/">
<img alt="Tailwind CSS Navbar" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/placeholder-1.webp">
</a>
</td>
</tr>
<tr>
<td align="center"><b>Notifications</b></td>
<td align="center"><b>Paragraphs</b></td>
<td align="center"><b>Placeholders</b></td>
</tr>
<!--New row-->
<tr>
<td>
<a href="https://tw-elements.com/docs/standard/components/popover/">
<img alt="Tailwind CSS Time picker" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/popover-1.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/components/progress/">
<img alt="Tailwind CSS Tables" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/progress-1.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/components/rating/">
<img alt="Tailwind CSS Navbar" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-pro/rating-1.webp">
</a>
</td>
</tr>
<tr>
<td align="center"><b>Popover</b></td>
<td align="center"><b>Progress</b></td>
<td align="center"><b>Rating</b></td>
</tr>
<!--New row-->
<tr>
<td>
<a href="https://tw-elements.com/docs/standard/components/scroll-back-to-top-button/">
<img alt="Tailwind Component" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/scroll-back-to-top.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/components/social-buttons/">
<img alt="Tailwind Component" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/social-media.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/components/spinners/">
<img alt="Tailwind Component" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/spinner-1.webp">
</a>
</td>
</tr>
<tr>
<td align="center"><b>Scroll to top</b></td>
<td align="center"><b>Social buttons</b></td>
<td align="center"><b>Spinners</b></td>
</tr>
<!--New row-->
<tr>
<td>
<a href="https://tw-elements.com/docs/standard/components/timeline/">
<img alt="Tailwind Component" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/timeline.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/components/toast/">
<img alt="Tailwind Component" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-pro/toast-1.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/components/tooltip/">
<img alt="Tailwind Component" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/tooltip-1.webp">
</a>
</td>
</tr>
<tr>
<td align="center"><b>Timeline</b></td>
<td align="center"><b>Toast</b></td>
<td align="center"><b>Tooltip</b></td>
</tr>
<!--New row-->
<tr>
<td>
<a href="https://tw-elements.com/docs/standard/components/video/">
<img alt="Tailwind Component" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/video.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/components/video-carousel/">
<img alt="Tailwind Component" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/video-carousel.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/forms/checkbox/">
<img alt="Tailwind Component" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/checkbox-1.webp">
</a>
</td>
</tr>
<tr>
<td align="center"><b>Video</b></td>
<td align="center"><b>Video carousel</b></td>
<td align="center"><b>Checkbox</b></td>
</tr>
<!--New row-->
<tr>
<td>
<a href="https://tw-elements.com/docs/standard/forms/file-input/">
<img alt="Tailwind Component" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/file-upload.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/forms/input-group/">
<img alt="Tailwind Component" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/input-group.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/forms/login-form/">
<img alt="Tailwind Component" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/login-form.webp">
</a>
</td>
</tr>
<tr>
<td align="center"><b>File input</b></td>
<td align="center"><b>Input group</b></td>
<td align="center"><b>Login form</b></td>
</tr>
<!--New row-->
<tr>
<td>
<a href="https://tw-elements.com/docs/standard/forms/radio/">
<img alt="Tailwind Component" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/radio-1.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/forms/range/">
<img alt="Tailwind Component" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/range-1.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/forms/registration-form/">
<img alt="Tailwind Component" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/registration-form.webp">
</a>
</td>
</tr>
<tr>
<td align="center"><b>Radio</b></td>
<td align="center"><b>Range</b></td>
<td align="center"><b>Registration form</b></td>
</tr>
<!--New row-->
<tr>
<td>
<a href="https://tw-elements.com/docs/standard/forms/search/">
<img alt="Tailwind Component" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/search-1.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/forms/select/">
<img alt="Tailwind Component" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-pro/select-1.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/forms/switch/">
<img alt="Tailwind Component" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/switch.webp">
</a>
</td>
</tr>
<tr>
<td align="center"><b>Search</b></td>
<td align="center"><b>Select</b></td>
<td align="center"><b>Switch</b></td>
</tr>
<!--New row-->
<tr>
<td>
<a href="https://tw-elements.com/docs/standard/forms/textarea/">
<img alt="Tailwind Component" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/textarea.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/data/tables/">
<img alt="Tailwind Component" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/table-1.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/methods/ripple/">
<img alt="Tailwind Component" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/ripple.webp">
</a>
</td>
</tr>
<tr>
<td align="center"><b>Textarea</b></td>
<td align="center"><b>Tables</b></td>
<td align="center"><b>Ripple</b></td>
</tr>
<!--New row-->
<tr>
<td>
<a href="https://tw-elements.com/docs/standard/content-styles/animations/">
<img alt="Tailwind Component" src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/pro/demo-new/assets/images/animations2.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/content-styles/mask/">
<img alt="Tailwind Component" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/mask-1.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/content-styles/shadows/">
<img alt="Tailwind Component" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/shadow-1.webp">
</a>
</td>
</tr>
<tr>
<td align="center"><b>Animations</b></td>
<td align="center"><b>Masks</b></td>
<td align="center"><b>Shadows</b></td>
</tr>
<!--New row-->
<tr>
<td>
<a href="https://tw-elements.com/docs/standard/data/datatables/">
<img alt="Tailwind Component" src="https://mdbcdn.b-cdn.net/docs/standard/pro/demo/assets/images/datatable.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/components/lightbox/">
<img alt="Tailwind Component" src="https://mdbcdn.b-cdn.net/docs/standard/pro/demo/assets/images/lightbox.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/components/rating/">
<img alt="Tailwind Component" src="https://mdbcdn.b-cdn.net/docs/standard/pro/demo/assets/images/rating.webp">
</a>
</td>
</tr>
<tr>
<td align="center"><b>Datatables</b></td>
<td align="center"><b>Lightbox</b></td>
<td align="center"><b>Rating</b></td>
</tr>
<!--New row-->
<tr>
<td>
<a href="https://tw-elements.com/docs/standard/methods/scrollbar/">
<img alt="Tailwind Component" src="https://mdbcdn.b-cdn.net/docs/standard/pro/demo/assets/images/scrollbar.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/components/popconfirm/">
<img alt="Tailwind Component" src="https://mdbcdn.b-cdn.net/docs/standard/pro/demo/assets/images/popconfirm.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/">
<img alt="Logo Clouds" src="https://mdbootstrap.com/img/tw-demo/design-blocks.webp">
</a>
</td>
</tr>
<tr>
<td align="center"><b>Scrollbar</b></td>
<td align="center"><b>Popconfirm</b></td>
<td align="center"><b>More coming soon</b></td>
</tr>
</table>
---
## Design blocks
Responsive Landing page blocks built with Tailwind CSS. Plenty of design blocks examples such as Teams, services, projects, faq, and many more.
<table>
<tr>
<td>
<a href="https://tw-elements.com/docs/standard/designblocks/hero-sections/">
<img alt="Hero" src="https://mdbootstrap.com/img/tw-demo/hero.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/designblocks/pricing/">
<img alt="Pricing" src="https://mdbootstrap.com/img/tw-demo/pricing.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/designblocks/cta/">
<img alt="Call to action" src="https://mdbootstrap.com/img/tw-demo/cta.webp">
</a>
</td>
</tr>
<tr>
<td align="center"><b>Hero</b></td>
<td align="center"><b>Pricing</b></td>
<td align="center"><b>Call to action</b></td>
</tr>
<tr>
<td>
<a href="https://tw-elements.com/docs/standard/designblocks/features/">
<img alt="Features" src="https://mdbootstrap.com/img/tw-demo/features.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/designblocks/contact/">
<img alt="Contact" src="https://mdbootstrap.com/img/tw-demo/contact.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/designblocks/news/">
<img alt="News/blog" src="https://mdbootstrap.com/img/tw-demo/news.webp">
</a>
</td>
</tr>
<tr>
<td align="center"><b>Features</b></td>
<td align="center"><b>Contact</b></td>
<td align="center"><b>News/blog</b></td>
</tr>
<tr>
<td>
<a href="https://tw-elements.com/docs/standard/designblocks/team/">
<img alt="Team" src="https://mdbootstrap.com/img/tw-demo/team.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/designblocks/stats/">
<img alt="Tabs" src="https://mdbootstrap.com/img/tw-demo/stats.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/designblocks/testimonials/">
<img alt="Stepper" src="https://mdbootstrap.com/img/tw-demo/testimonials.webp">
</a>
</td>
</tr>
<tr>
<td align="center"><b>Team</b></td>
<td align="center"><b>Stats</b></td>
<td align="center"><b>Testimonials</b></td>
</tr>
<tr>
<td>
<a href="https://tw-elements.com/docs/standard/designblocks/content/">
<img alt="Content" src="https://mdbootstrap.com/img/tw-demo/content.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/designblocks/newsletter/">
<img alt="Newsletter" src="https://mdbootstrap.com/img/tw-demo/newsletter.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/designblocks/project-sections/">
<img alt="Projects" src="https://mdbootstrap.com/img/tw-demo/projects.webp">
</a>
</td>
</tr>
<tr>
<td align="center"><b>Content</b></td>
<td align="center"><b>Newsletter</b></td>
<td align="center"><b>Projects</b></td>
</tr>
<tr>
<td>
<a href="https://tw-elements.com/docs/standard/designblocks/headers/">
<img alt="Headers" src="https://mdbootstrap.com/img/tw-demo/headers.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/designblocks/faq/">
<img alt="FAQ" src="https://mdbootstrap.com/img/tw-demo/faq.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/designblocks/logo-clouds/">
<img alt="Logo Clouds" src="https://mdbootstrap.com/img/tw-demo/logo-clouds.webp">
</a>
</td>
</tr>
<tr>
<td align="center"><b>Headers</b></td>
<td align="center"><b>FAQ</b></td>
<td align="center"><b>Logo Clouds</b></td>
</tr>
<tr>
<td>
<a href="https://tw-elements.com/docs/standard/designblocks/banners/">
<img alt="Headers" src="https://mdbootstrap.com/img/tw-demo/banners.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/designblocks/mega-menu/">
<img alt="FAQ" src="https://mdbootstrap.com/img/tw-demo/mega-menu.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/">
<img alt="Logo Clouds" src="https://mdbootstrap.com/img/tw-demo/design-blocks.webp">
</a>
</td>
</tr>
<tr>
<td align="center"><b>Banners</b></td>
<td align="center"><b>Mega Menu</b></td>
<td align="center"><b>More coming soon</b></td>
</tr>
</table>
---
## Integrations
TW Elements integrations with popular technologies.
- [Django Integration](https://tw-elements.com/docs/standard/integrations/django-integration/)
- [Angular Integration](https://tw-elements.com/docs/standard/integrations/angular-integration/)
- [Express Integration](https://tw-elements.com/docs/standard/integrations/express-integration/)
- [Laravel Integration](https://tw-elements.com/docs/standard/integrations/laravel-integration/)
- [Next Integration](https://tw-elements.com/docs/standard/integrations/next-integration/)
- [Nuxt Integration](https://tw-elements.com/docs/standard/integrations/nuxt-integration/)
- [Django Integration](https://tw-elements.com/docs/standard/integrations/react-integration/)
- [Remix Integration](https://tw-elements.com/docs/standard/integrations/remix-integration/)
- [Solid Integration](https://tw-elements.com/docs/standard/integrations/solid-integration/)
- [Svelte Integration](https://tw-elements.com/docs/standard/integrations/svelte-integration/)
- [Sveltekit Integration](https://tw-elements.com/docs/standard/integrations/sveltekit-integration/)
- [Vue Integration](https://tw-elements.com/docs/standard/integrations/vue-integration/)
---
## Installation
##### NPM
1. Before starting the project make sure to install [Node.js (LTS)](https://nodejs.org/en/ "Node.js (LTS)") and [TailwindCSS](https://tailwindcss.com/ "TailwindCSS").
2. Run the following command to install the package via NPM:
```
npm install tw-elements
```
3. TW Elements is a plugin and should be included inside the **tailwind.config.js** file. It is also recommended to extend the content array with a js file that loads dynamic component classes:
```javascript
module.exports = {
content: ["./src/**/*.{html,js}", "./node_modules/tw-elements/js/**/*.js"],
plugins: [require("tw-elements/plugin.cjs")],
darkMode: "class",
};
```
4. Dynamic components will work after adding the js file:
```
<script src="./TW-ELEMENTS-PATH/js/tw-elements.umd.min.js"></script>
```
Alternatively, you can import it in the following way (bundler version):
```
import 'tw-elements';
```
##### MDB GO / CLI
Create, deploy and host anything with a single command.
1. To start using MDB GO / CLI install it with one command:
```
npm install -g mdb-cli
```
2. Log into the CLI using your MDB account:
```
mdb login
```
3. Initialize a project and choose **Tailwind Elements** from the list:
```
mdb init tailwind-elements-free
```
4. Install the dependencies (inside the project directory):
```
npm install
```
5. Run the app:
```
npm start
```
6. Publish when you're ready:
```
mdb publish
```
##### CDN
You can easily test TW Elements by adding CDN scripts to your classic HTML template without the need for installing any packages.
Add the stylesheet files below in the _head_ section:
```
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tw-elements/css/tw-elements.min.css" />
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: "class",
theme: {
fontFamily: {
sans: ["Roboto", "sans-serif"],
body: ["Roboto", "sans-serif"],
mono: ["ui-monospace", "monospace"],
},
},
corePlugins: {
preflight: false,
},
};
</script>
```
Require the js bundled file right before the _body_ closing tag:
```
<script src="https://cdn.jsdelivr.net/npm/tw-elements/js/tw-elements.umd.min.js"></script>
```
================================================
FILE: README.txt
================================================
TW Elements Standard
Version: 2.0.0
Documentation:
https://tw-elements.com/
Contact:
tailwind@mdbootstrap.com
================================================
FILE: index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>TW Elements</title>
<!-- Favicon -->
<link rel="icon" href="img/favicon.ico" type="image/x-icon" />
<!-- Roboto font -->
<link
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap"
rel="stylesheet" />
<!-- Tailwind -->
<script src="https://cdn.tailwindcss.com/3.3.0"></script>
<script>
tailwind.config = {
darkMode: "class",
theme: {
fontFamily: {
sans: ["Roboto", "sans-serif"],
body: ["Roboto", "sans-serif"],
mono: ["ui-monospace", "monospace"],
},
},
corePlugins: {
preflight: false,
},
};
</script>
<!-- TW Elements CSS -->
<link rel="stylesheet" href="css/tw-elements.min.css" />
<!-- Custom styles -->
<style></style>
</head>
<body class="dark:bg-neutral-800">
<!-- Start your project here-->
<div class="flex flex-col items-center justify-center lg:h-screen">
<div
class="mx-auto max-w-[540px] sm:max-w-[604px] md:max-w-[720px] lg:max-w-[972px] xl:max-w-full xl:px-12 2xl:max-w-[1400px]">
<div class="mt-[50px] text-center lg:mt-0">
<div
class="mb-4 flex items-center justify-center text-[40px] font-medium dark:text-neutral-100">
<picture>
<source
srcset="
https://tecdn.b-cdn.net/img/logo/te-transparent-noshadows.webp
"
type="image/webp" />
<img
src="https://tecdn.b-cdn.net/img/logo/te-transparent-noshadows.png"
class="mb-1 h-24"
alt="logo" />
</picture>
</div>
<div>
<h5 class="mb-4 text-xl font-medium dark:text-neutral-200">
Thank you for using our product. We're glad you're with us.
</h5>
<p class="mb-4">TW Elements Team</p>
<a
class="inline-block rounded bg-primary px-7 pb-2.5 pt-3 text-sm font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
data-twe-ripple-init
data-twe-ripple-color="white"
href="https://tw-elements.com/docs/standard/getting-started/quick-start/"
target="_blank"
role="button"
>Start TWE tutorial</a
>
</div>
</div>
</div>
</div>
<!-- End your project here-->
</body>
<!-- TW Elements JS -->
<script type="text/javascript" src="js/tw-elements.umd.min.js"></script>
<!-- Custom scripts -->
<script type="text/javascript"></script>
</html>
================================================
FILE: package.json
================================================
{
"name": "tw-elements",
"version": "2.0.0",
"type": "module",
"homepage": "https://tw-elements.com/",
"repository": "https://github.com/mdbootstrap/TW-Elements",
"author": "MDBootstrap",
"license": "SEE LICENSE IN <License.txt>",
"style": "./css/tw-elements.min.css",
"sass": "./src/css/tailwind.scss",
"main": "./js/tw-elements.umd.min.js",
"module": "./js/tw-elements.es.min.js",
"types": "./types/tw-elements.d.ts"
}
================================================
FILE: plugin.cjs
================================================
const plugin = require("tailwindcss/plugin");
const defaultTheme = require("tailwindcss/defaultTheme");
const { spacing, borderRadius } = defaultTheme;
module.exports = plugin(
({ addBase, theme }) => {
addBase({
[['input[type="range"]::-webkit-slider-thumb']]: {
height: spacing[4],
width: spacing[4],
background: theme("colors.primary.DEFAULT"),
"border-radius": borderRadius.full,
border: 0,
appearance: "none",
"-moz-appearance": "none",
"-webkit-appearance": "none",
cursor: "pointer",
},
[['.dark input[type="range"]::-webkit-slider-thumb']]: {
background: theme("colors.primary.400"),
},
[['input[type="range"]:disabled::-webkit-slider-thumb']]: {
background: theme("colors.neutral.400"),
},
[['input[type="range"]:disabled:focus::-webkit-slider-thumb']]: {
background: theme("colors.neutral.400"),
},
[['input[type="range"]:disabled:active::-webkit-slider-thumb']]: {
background: theme("colors.neutral.400"),
},
[['.dark input[type="range"]:disabled::-webkit-slider-thumb']]: {
background: theme("colors.neutral.500"),
},
[['.dark input[type="range"]:disabled:focus::-webkit-slider-thumb']]: {
background: theme("colors.neutral.500"),
},
[['.dark input[type="range"]:disabled:active::-webkit-slider-thumb']]: {
background: theme("colors.neutral.500"),
},
[['input[type="range"]::-moz-range-thumb']]: {
height: spacing[4],
width: spacing[4],
background: theme("colors.primary.DEFAULT"),
"border-radius": borderRadius.full,
border: 0,
appearance: "none",
"-moz-appearance": "none",
"-webkit-appearance": "none",
cursor: "pointer",
},
[['.dark input[type="range"]::-moz-range-thumb']]: {
background: theme("colors.primary.400"),
},
[['input[type="range"]:disabled::-moz-range-thumb']]: {
background: theme("colors.neutral.400"),
},
[['.dark input[type="range"]:disabled::-moz-range-thumb']]: {
background: theme("colors.neutral.500"),
},
[['input[type="range"]::-moz-range-progress']]: {
background: theme("colors.primary.600"),
},
[['input[type="range"]::-ms-fill-lower']]: {
background: theme("colors.primary.600"),
},
[['.dark input[type="range"]::-moz-range-progress']]: {
background: theme("colors.primary.500"),
},
[['.dark input[type="range"]::-ms-fill-lower']]: {
background: theme("colors.primary.500"),
},
[['input[type="range"]:focus']]: {
outline: "none",
},
[['input[type="range"]:focus::-webkit-slider-thumb']]: {
background: theme("colors.primary.600"),
},
[['input[type="range"]:active::-webkit-slider-thumb']]: {
background: theme("colors.primary.700"),
},
[['.dark input[type="range"]:focus::-webkit-slider-thumb']]: {
background: theme("colors.primary.500"),
},
[['.dark input[type="range"]:active::-webkit-slider-thumb']]: {
background: theme("colors.primary.600"),
},
});
},
{
theme: {
screens: {
xs: "320px",
...defaultTheme.screens,
},
extend: {
fontFamily: {
sans: ["Roboto", "sans-serif"],
body: ["Roboto", "sans-serif"],
mono: ["ui-monospace", "monospace"],
},
boxShadow: {
"twe-primary": "0 0 0 1px rgb(59, 113, 202)",
1: "0 0 2px 0 rgba(0,0,0,.07),0 1px 1px 0 rgba(0,0,0,.04)",
"1-strong": "0 0 2px 0 rgba(0,0,0,.16),0 1px 1px 0 rgba(0,0,0,.1)",
2: "0 0 3px 0 rgba(0,0,0,.07),0 2px 2px 0 rgba(0,0,0,.04)",
"2-strong": "0 0 3px 0 rgba(0,0,0,.16),0 2px 2px 0 rgba(0,0,0,.1)",
3: "0 2px 6px -1px rgba(0,0,0,.07),0 6px 18px -1px rgba(0,0,0,.04)",
"3-strong":
"0 2px 6px -1px rgba(0,0,0,.16),0 6px 18px -1px rgba(0,0,0,.1)",
4: "0 2px 15px -3px rgba(0,0,0,.07),0 10px 20px -2px rgba(0,0,0,.04)",
"4-strong":
"0 2px 15px -3px rgba(0,0,0,.16),0 10px 20px -2px rgba(0,0,0,.1)",
5: "0 2px 25px -5px rgba(0,0,0,.07),0 25px 21px -5px rgba(0,0,0,.04)",
"5-strong":
" 0 2px 25px -5px rgba(0,0,0,.16),0 25px 21px -5px rgba(0,0,0,.1)",
"twe-inner": "inset 0 2px 4px 0 #0000000d",
"primary-1":
"0 8px 9px -4px rgba(59,113,202,0.2),0 4px 18px 0 rgba(59,113,202,0.1)",
"primary-2":
"0 8px 9px -4px rgba(59,113,202,0.3),0 4px 18px 0 rgba(59,113,202,0.2)",
"primary-3": "0 4px 9px -4px #3b71ca",
"success-1":
"0 8px 9px -4px rgba(20,164,77,0.2),0 4px 18px 0 rgba(20,164,77,0.1)",
"success-2":
"0 8px 9px -4px rgba(20,164,77,0.3),0 4px 18px 0 rgba(20,164,77,0.2)",
"success-3": "0 4px 9px -4px #14a44d",
"danger-1":
"0 8px 9px -4px rgba(220,76,100,0.1),0 4px 18px 0 rgba(220,76,100,0.2)",
"danger-2":
"0 8px 9px -4px rgba(220,76,100,0.2),0 4px 18px 0 rgba(220,76,100,0.3)",
"danger-3": "0 4px 9px -4px #dc4c64",
"warning-1":
"0 8px 9px -4px rgba(228,161,27,0.1),0 4px 18px 0 rgba(228,161,27,0.2)",
"warning-2":
"0 8px 9px -4px rgba(228,161,27,0.2),0 4px 18px 0 rgba(228,161,27,0.3)",
"warning-3": "0 4px 9px -4px #e4a11b",
"info-1":
"0 8px 9px -4px rgba(84,180,211,0.1),0 4px 18px 0 rgba(84,180,211,0.2)",
"info-2":
"0 8px 9px -4px rgba(84,180,211,0.2),0 4px 18px 0 rgba(84,180,211,0.3)",
"info-3": "0 4px 9px -4px #54b4d3",
"light-1":
"0 8px 9px -4px rgba(251,251,251,0.05),0 4px 18px 0 rgba(251,251,251,0.1)",
"light-2":
"0 8px 9px -4px rgba(203,203,203,0.2),0 4px 18px 0 rgba(203,203,203,0.3)",
"light-3": "0 4px 9px -4px #cbcbcb",
"dark-1":
"0 8px 9px -4px rgba( 0, 0, 0 , 0.15), 0 4px 18px 0 rgba( 0, 0, 0 , 0.1)",
"dark-2":
"0 8px 9px -4px rgba(51,45,45,0.1),0 4px 18px 0 rgba(51,45,45,0.2)",
"dark-3": "0 4px 9px -4px rgba(51,45,45,0.7)",
"dark-strong": "0 4px 18px -2px rgba(0,0,0,.7)",
"dark-mild":
"0 4px 12px 0 rgba(0,0,0,0.07),0 2px 4px rgba(0,0,0,0.05)",
"secondary-1":
"0 2px 15px -3px rgba(0,0,0,0.04),0 10px 20px -2px rgba(0,0,0,0.07)",
"secondary-2":
"0 8px 9px -4px rgba(227,235,247,0.2),0 4px 18px 0 rgba(227,235,247,0.3)",
"secondary-3": "0 4px 9px -4px #e3ebf7",
"primary-5": "0 4px 9px -4px rgba(59,113,202,0.5)",
checkbox: "0 0 0 13px #3b71ca",
inset: "inset 0 0 0 1px rgb(59,113,202)",
select: "0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12)",
"switch-1":
"0 3px 1px -2px rgba(0,0,0,0.2), 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12)",
"switch-2":
"0 0px 3px 0 rgba(0,0,0,0.07), 0 2px 2px 0 rgba(0,0,0,0.04)",
"switch-3": "3px -1px 0px 13px #3b71ca",
"notch-1": "-1px 0 0 #3b71ca, 0 1px 0 0 #3b71ca, 0 -1px 0 0 #3b71ca",
"notch-2": "0 1px 0 0 #3b71ca",
"notch-3": "1px 0 0 #3b71ca, 0 -1px 0 0 #3b71ca, 0 1px 0 0 #3b71ca",
"border-b": "inset 0 -1px 0 rgba(229,231,235)",
autofill: "inset 0 0 0px 1000px rgb(62,62,62)",
},
keyframes: {
"fade-in": {
"0%": { opacity: 0 },
"100%": { opacity: 1 },
},
"fade-out": {
"0%": { opacity: 1 },
"100%": { opacity: 0 },
},
"fade-in-down": {
"0%": {
opacity: 0,
transform: "translate3d(0, -100%, 0)",
},
"100%": {
opacity: 1,
transform: "translate3d(0, 0, 0)",
},
},
"fade-in-left": {
"0%": {
opacity: 0,
transform: "translate3d(-100%, 0, 0)",
},
"100%": {
opacity: 1,
transform: "translate3d(0, 0, 0)",
},
},
"fade-in-right": {
"0%": {
opacity: 0,
transform: "translate3d(100%, 0, 0)",
},
"100%": {
opacity: 1,
transform: "translate3d(0, 0, 0)",
},
},
"fade-in-up": {
"0%": {
opacity: 0,
transform: "translate3d(0, 100%, 0)",
},
"100%": {
opacity: 1,
transform: "translate3d(0, 0, 0)",
},
},
"fade-out-down": {
"0%": {
opacity: 1,
},
"100%": {
opacity: 0,
transform: "translate3d(0, 100%, 0)",
},
},
"fade-out-left": {
"0%": {
opacity: 1,
},
"100%": {
opacity: 0,
transform: "translate3d(-100%, 0, 0)",
},
},
"fade-out-right": {
"0%": {
opacity: 1,
},
"100%": {
opacity: 0,
transform: "translate3d(100%, 0, 0)",
},
},
"fade-out-up": {
"0%": {
opacity: 1,
},
"100%": {
opacity: 0,
transform: "translate3d(0, -100%, 0)",
},
},
"slide-in-down": {
"0%": {
visibility: "visible",
transform: "translate3d(0, -100%, 0)",
},
"100%": {
transform: "translate3d(0, 0, 0)",
},
},
"slide-in-left": {
"0%": {
visibility: "visible",
transform: "translate3d(-100%, 0, 0)",
},
"100%": {
transform: "translate3d(0, 0, 0)",
},
},
"slide-in-right": {
"0%": {
visibility: "visible",
transform: "translate3d(100%, 0, 0)",
},
"100%": {
transform: "translate3d(0, 0, 0)",
},
},
"slide-in-up": {
"0%": {
visibility: "visible",
transform: "translate3d(0, 100%, 0)",
},
"100%": {
transform: "translate3d(0, 0, 0)",
},
},
"slide-out-down": {
"0%": {
transform: "translate3d(0, 0, 0)",
},
"100%": {
visibility: "hidden",
transform: "translate3d(0, 100%, 0)",
},
},
"slide-out-left": {
"0%": {
transform: "translate3d(0, 0, 0)",
},
"100%": {
visibility: "hidden",
transform: "translate3d(-100%, 0, 0)",
},
},
"slide-out-right": {
"0%": {
transform: "translate3d(0, 0, 0)",
},
"100%": {
visibility: "hidden",
transform: "translate3d(100%, 0, 0)",
},
},
"slide-out-up": {
"0%": {
transform: "translate3d(0, 0, 0)",
},
"100%": {
visibility: "hidden",
transform: "translate3d(0, -100%, 0)",
},
},
"slide-down": {
"0%": {
transform: "translate3d(0, 0, 0)",
},
"100%": {
transform: "translate3d(0, 100%, 0)",
},
},
"slide-left": {
"0%": {
transform: "translate3d(0, 0, 0)",
},
"100%": {
transform: "translate3d(-100%, 0, 0)",
},
},
"slide-right": {
"0%": {
transform: "translate3d(0, 0, 0)",
},
"100%": {
transform: "translate3d(100%, 0, 0)",
},
},
"slide-up": {
"0%": {
transform: "translate3d(0, 0, 0)",
},
"100%": {
transform: "translate3d(0, -100%, 0)",
},
},
"zoom-in": {
"0%": {
opacity: 0,
transform: "scale3d(0.3, 0.3, 0.3)",
},
"50%": {
opacity: 1,
},
},
"zoom-out": {
"0%": {
opacity: 1,
},
"50%": {
opacity: 0,
transform: "scale3d(0.3, 0.3, 0.3)",
},
"100%": {
opacity: 0,
},
},
tada: {
"0%": {
transform: "scale3d(1, 1, 1)",
},
"10%, 20%": {
transform: "scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg)",
},
"30%, 50%, 70%, 90%": {
transform: "scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)",
},
"40%, 60%, 80%": {
transform: "scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)",
},
"100%": {
transform: "scale3d(1, 1, 1)",
},
},
"spinner-grow": {
"0%": {
transform: "scale(0)",
},
"50%": {
transform: "none",
opacity: "1",
},
},
"placeholder-wave": {
"100%": { maskPosition: "-200% 0%" },
},
"show-up-clock": {
"0%": {
opacity: "0",
transform: "scale(0.7)",
},
"100%": {
opacity: "1",
transform: "scale(1)",
},
},
progress: {
"0%": { transform: "translateX(-45%)" },
"100%": { transform: "translateX(100%)" },
},
"drop-in": {
"0%": {
opacity: "0",
transform: "scale(0)",
animationTimingFunction: "cubic-bezier(0.34, 1.61, 0.7, 1)",
},
"100%": {
opacity: "1",
transform: "scale(1)",
},
},
"drop-out": {
"0%": {
opacity: "1",
transform: "scale(1)",
animationTimingFunction: "cubic-bezier(0.34, 1.61, 0.7, 1)",
},
"100%": { opacity: "0", transform: "scale(0)" },
},
"fly-in": {
"0%": {
opacity: "0",
transform: "scale3d(0.3, 0.3, 0.3)",
transitionTimingFunction: "cubic-bezier(0.215, 0.61, 0.355, 1)",
},
"20%": { transform: "scale3d(1.1, 1.1, 1.1)" },
"40%": { transform: "scale3d(0.9, 0.9, 0.9)" },
"60%": { opacity: "1", transform: "scale3d(1.03, 1.03, 1.03)" },
"80%": { transform: "scale3d(0.97, 0.97, 0.97)" },
"100%": { opacity: "1", transform: "scale3d(1, 1, 1)" },
},
"fly-in-up": {
"0%": {
opacity: "0",
transform: "translate3d(0, 1500px, 0)",
transitionTimingFunction: "cubic-bezier(0.215, 0.61, 0.355, 1)",
},
"60%": { opacity: "1", transform: "translate3d(0, -20px, 0)" },
"75%": { transform: "translate3d(0, 10px, 0)" },
"90%": { transform: "translate3d(0, -5px, 0)" },
"100%": { transform: "translate3d(0, 0, 0)" },
},
"fly-in-down": {
"0%": {
opacity: "0",
transform: "translate3d(0, -1500px, 0)",
transitionTimingFunction: "cubic-bezier(0.215, 0.61, 0.355, 1)",
},
"60%": { opacity: "1", transform: "translate3d(0, 25px, 0)" },
"75%": { transform: "translate3d(0, -10px, 0)" },
"90%": { transform: "translate3d(0, 5px, 0)" },
"100%": { transform: "none" },
},
"fly-in-left": {
"0%": {
opacity: "0",
transform: "translate3d(1500px, 0, 0)",
transitionTimingFunction: "cubic-bezier(0.215, 0.61, 0.355, 1)",
},
"60%": { opacity: "1", transform: "translate3d(-25px, 0, 0)" },
"75%": { transform: "translate3d(10px, 0, 0)" },
"90%": { transform: "translate3d(-5px, 0, 0)" },
"100%": { transform: "none" },
},
"fly-in-right": {
"0%": {
opacity: "0",
transform: "translate3d(-1500px, 0, 0)",
transitionTimingFunction: "cubic-bezier(0.215, 0.61, 0.355, 1)",
},
"60%": { opacity: "1", transform: "translate3d(25px, 0, 0)" },
"75%": { transform: "translate3d(-10px, 0, 0)" },
"90%": { transform: "translate3d(5px, 0, 0)" },
"100%": { transform: "none" },
},
"fly-out": {
"0%": {
transitionTimingFunction: "cubic-bezier(0.215, 0.61, 0.355, 1)",
},
"20%": {
transform: "scale3d(0.9, 0.9, 0.9)",
},
"50%, 55%": {
opacity: "1",
transform: "scale3d(1.1, 1.1, 1.1)",
},
"100%": {
opacity: "0",
transform: "scale3d(0.3, 0.3, 0.3)",
},
},
"fly-out-up": {
"0%": {
transitionTimingFunction: "cubic-bezier(0.215, 0.61, 0.355, 1)",
},
"20%": {
transform: "translate3d(0, 10px, 0)",
},
"40%, 45%": {
opacity: "1",
transform: "translate3d(0, -20px, 0)",
},
"100%": {
opacity: "0",
transform: "translate3d(0, 2000px, 0)",
},
},
"fly-out-down": {
"0%": {
transitionTimingFunction: "cubic-bezier(0.215, 0.61, 0.355, 1)",
},
"20%": {
transform: "translate3d(0, -10px, 0)",
},
"40%, 45%": {
opacity: "1",
transform: "translate3d(0, 20px, 0)",
},
"100%": {
opacity: "0",
transform: "translate3d(0, -2000px, 0)",
},
},
"fly-out-left": {
"0%": {
transitionTimingFunction: "cubic-bezier(0.215, 0.61, 0.355, 1)",
},
"20%": {
opacity: "1",
transform: "translate3d(-20px, 0, 0)",
},
"100%": {
opacity: "0",
transform: "translate3d(2000px, 0, 0)",
},
},
"fly-out-right": {
"0%": {
transitionTimingFunction: "cubic-bezier(0.215, 0.61, 0.355, 1)",
},
"20%": {
opacity: "1",
transform: "translate3d(20px, 0, 0)",
},
"100%": {
opacity: "0",
transform: "translate3d(-2000px, 0, 0)",
},
},
"browse-in": {
"0%": { transform: "scale(0.8) translateZ(0px)", zIndex: "-1" },
"10%": {
transform: "scale(0.8) translateZ(0px)",
zIndex: "-1",
opacity: "0.7",
},
"80%": {
transform: "scale(1.05) translateZ(0px)",
zIndex: "999",
opacity: "1",
},
"100%": { transform: "scale(1) translateZ(0px)", zIndex: "999" },
},
"browse-out": {
"0%": {
transform: "translateX(0%) rotateY(0deg) rotateX(0deg)",
zIndex: "999",
},
"50%": {
transform:
"translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px)",
zIndex: "-1",
},
"80%": { opacity: "1" },
"100%": {
zIndex: "-1",
opacity: "0",
transform:
"translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px)",
},
},
"browse-out-left": {
"0%": {
transform: "translateX(0%) rotateY(0deg) rotateX(0deg)",
zIndex: "999",
},
"50%": {
transform:
"translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px)",
zIndex: "-1",
},
"80%": { opacity: "1" },
"100%": {
zIndex: "-1",
opacity: "0",
transform:
"translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px)",
},
},
"browse-out-right": {
"0%": {
transform: "translateX(0%) rotateY(0deg) rotateX(0deg)",
zIndex: "999",
},
"50%": {
transform:
"translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px)",
zIndex: "1",
},
"80%": { opacity: "1" },
"100%": {
zIndex: "1",
opacity: "0",
transform:
"translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px)",
},
},
jiggle: {
"0%": { transform: "scale3d(1, 1, 1)" },
"30%": { transform: "scale3d(1.25, 0.75, 1)" },
"40%": { transform: "scale3d(0.75, 1.25, 1)" },
"50%": { transform: "scale3d(1.15, 0.85, 1)" },
"65%": { transform: "scale3d(0.95, 1.05, 1)" },
"75%": { transform: "scale3d(1.05, 0.95, 1)" },
"100%": { transform: "scale3d(1, 1, 1)" },
},
flash: {
"0%, 50%, 100%": { opacity: "1" },
"25%, 75%": { opacity: "0" },
},
shake: {
"0%, 100%": {
transform: "translateX(0)",
},
"10%, 30%, 50%, 70%, 90%": {
transform: "translateX(-10px)",
},
"20%, 40%, 60%, 80%": {
transform: "translateX(10px)",
},
},
glow: {
"0%": { backgroundColor: "#fcfcfd" },
"30%": { backgroundColor: "#fff6cd" },
"100%": { backgroundColor: "#fcfcfd" },
},
},
colors: {
primary: {
DEFAULT: "#3B71CA",
50: "#F1F5FB",
100: "#E3EBF7",
200: "#C7D7F0",
300: "#ABC2E8",
400: "#8FAEE0",
500: "#6590D5",
600: "#3061AF",
700: "#285192",
800: "#204075",
900: "#183058",
"accent-100": "#d9e4f3",
"accent-200": "#cedbee",
"accent-300": "#386bc0",
},
secondary: {
DEFAULT: "#9FA6B2",
50: "#F8F9F9",
100: "#F1F2F4",
200: "#E4E6E9",
300: "#D6D9DE",
400: "#C8CCD3",
500: "#B3B9C2",
600: "#848D9C",
700: "#6B7585",
800: "#565D6B",
900: "#404650",
"accent-300": "#979ea9",
},
success: {
DEFAULT: "#14A44D",
50: "#EAFCF2",
100: "#D6FAE4",
200: "#ACF5C9",
300: "#83F0AE",
400: "#59EA93",
500: "#1CE26B",
600: "#118C42",
700: "#0E7537",
800: "#0C5D2C",
900: "#094621",
"accent-300": "#139c49",
},
danger: {
DEFAULT: "#DC4C64",
50: "#FCF2F4",
100: "#FAE5E9",
200: "#F5CCD3",
300: "#F0B2BD",
400: "#EB99A6",
500: "#E37285",
600: "#D42A46",
700: "#B0233A",
800: "#8D1C2F",
900: "#6A1523",
"accent-300": "#d1485f",
},
warning: {
DEFAULT: "#E4A11B",
50: "#FDF8EF",
100: "#FBF2DE",
200: "#F7E4BE",
300: "#F4D79D",
400: "#F0C97D",
500: "#EAB54C",
600: "#C48A17",
700: "#A37313",
800: "#825C0F",
900: "#62450B",
"accent-300": "#d9991a",
},
info: {
DEFAULT: "#54B4D3",
50: "#F3FAFC",
100: "#E7F4F9",
200: "#CEE9F2",
300: "#B6DFEC",
400: "#9ED4E6",
500: "#79C4DC",
600: "#34A4CA",
700: "#2B89A8",
800: "#236D86",
900: "#1A5265",
"accent-300": "#50abc8",
},
surface: {
DEFAULT: "#4f4f4f",
dark: "#424242",
},
body: {
DEFAULT: "#fff",
dark: "#303030",
},
},
},
},
}
);
================================================
FILE: src/css/tailwind.scss
================================================
@tailwind base;
@layer base {
html {
@apply text-surface;
@apply bg-white;
}
html.dark {
@apply text-neutral-50;
@apply bg-body-dark;
}
}
@tailwind components;
@tailwind utilities;
p {
@apply leading-[1.6];
}
================================================
FILE: src/js/autoinit/Register.js
================================================
class InitRegister {
constructor() {
this.inits = [];
}
get initialized() {
return this.inits;
}
isInited(componentName) {
return this.inits.includes(componentName);
}
add(componentName) {
if (!this.isInited(componentName)) {
this.inits.push(componentName);
}
}
}
export default InitRegister;
================================================
FILE: src/js/autoinit/callbacks/free.js
================================================
import EventHandler from "../../dom/event-handler";
import SelectorEngine from "../../dom/selector-engine";
import {
isDisabled,
getElementFromSelector,
isVisible,
getSelectorFromElement,
} from "../../util";
const dropdownCallback = (component, initSelector) => {
EventHandler.on(
document,
`click.twe.${component.NAME}`,
initSelector,
function (event) {
event.preventDefault();
component.getOrCreateInstance(this).toggle();
}
);
};
const tabCallback = (component, initSelector) => {
EventHandler.on(
document,
`click.twe.${component.NAME}.data-api`,
initSelector,
function (event) {
if (["A", "AREA"].includes(this.tagName)) {
event.preventDefault();
}
if (isDisabled(this)) {
return;
}
const data = component.getOrCreateInstance(this);
data.show();
}
);
};
const offcanvasCallback = (component, initSelector) => {
EventHandler.on(
document,
`click.twe.${component.NAME}.data-api`,
initSelector,
function (event) {
const target = getElementFromSelector(this);
if (["A", "AREA"].includes(this.tagName)) {
event.preventDefault();
}
if (isDisabled(this)) {
return;
}
EventHandler.one(target, component.EVENT_HIDDEN, () => {
// focus on trigger when it is closed
if (isVisible(this)) {
this.focus();
}
});
// avoid conflict when clicking a toggler of an offcanvas, while another is open
const allReadyOpen = SelectorEngine.findOne(component.OPEN_SELECTOR);
if (allReadyOpen && allReadyOpen !== target) {
component.getInstance(allReadyOpen).hide();
}
const data = component.getOrCreateInstance(target);
data.toggle(this);
}
);
};
const buttonCallback = (component, initSelector) => {
EventHandler.on(
document,
`click.twe.${component.NAME}`,
initSelector,
(event) => {
event.preventDefault();
const button = event.target.closest(initSelector);
const data = component.getOrCreateInstance(button);
data.toggle();
}
);
};
const rippleCallback = (component, initSelector) => {
EventHandler.one(
document,
"mousedown",
initSelector,
component.autoInitial(new component())
);
};
const collapseCallback = (component, initSelector) => {
EventHandler.on(
document,
`click.twe.${component.NAME}.data-api`,
initSelector,
function (event) {
// preventDefault only for <a> elements (which change the URL) not inside the collapsible element
if (
event.target.tagName === "A" ||
(event.delegateTarget && event.delegateTarget.tagName === "A")
) {
event.preventDefault();
}
const selector = getSelectorFromElement(this);
const selectorElements = SelectorEngine.find(selector);
selectorElements.forEach((element) => {
component.getOrCreateInstance(element, { toggle: false }).toggle();
});
}
);
};
const tooltipsCallback = (component, initSelector) => {
const tooltipTriggerList = [].slice.call(
document.querySelectorAll(initSelector)
);
tooltipTriggerList.map(function (tooltipTriggerEl) {
return new component(tooltipTriggerEl);
});
};
const popoverCallback = (component, initSelector) => {
const popoverTriggerList = [].slice.call(
document.querySelectorAll(initSelector)
);
popoverTriggerList.map(function (popoverTriggerEl) {
return new component(popoverTriggerEl);
});
};
const modalCallback = (component, initSelector) => {
EventHandler.on(
document,
`click.twe.${component.NAME}`,
initSelector,
function (event) {
const target = getElementFromSelector(this);
if (["A", "AREA"].includes(this.tagName)) {
event.preventDefault();
}
EventHandler.one(target, component.EVENT_SHOW, (showEvent) => {
if (showEvent.defaultPrevented) {
// only register focus restorer if modal will actually get shown
return;
}
EventHandler.one(target, component.EVENT_HIDDEN, () => {
if (isVisible(this)) {
this.focus();
}
});
});
// avoid conflict when clicking moddal toggler while another one is open
const allReadyOpen = SelectorEngine.findOne(
`[${component.OPEN_SELECTOR}="true"]`
);
if (allReadyOpen) {
component.getInstance(allReadyOpen).hide();
}
const data = component.getOrCreateInstance(target);
data.toggle(this);
}
);
};
export {
dropdownCallback,
tabCallback,
offcanvasCallback,
buttonCallback,
rippleCallback,
collapseCallback,
tooltipsCallback,
popoverCallback,
modalCallback,
};
================================================
FILE: src/js/autoinit/index.free.js
================================================
import defaultInitSelectors from "./initSelectors/free";
import { InitTWE } from "./index";
const initTWEInstance = new InitTWE(defaultInitSelectors);
const initTWE = initTWEInstance.initTWE;
export default initTWE;
================================================
FILE: src/js/autoinit/index.js
================================================
import SelectorEngine from "../dom/selector-engine";
import jqueryInit from "./jqueryInit";
// key => component NAME constant
// name => component exported by name
import InitRegister from "./Register";
const register = new InitRegister();
let _defaultInitSelectors;
const getComponentData = (component) => {
return _defaultInitSelectors[component.NAME] || null;
};
const initComponent = (component, options) => {
if (
!component ||
(!options.allowReinits && register.isInited(component.NAME))
) {
return;
}
register.add(component.NAME);
const thisComponent = getComponentData(component);
const isToggler = thisComponent?.isToggler || false;
jqueryInit(component);
if (thisComponent?.advanced) {
thisComponent?.advanced(component, thisComponent?.selector);
return;
}
if (isToggler) {
thisComponent?.callback(component, thisComponent?.selector);
return;
}
SelectorEngine.find(thisComponent?.selector).forEach((element) => {
let instance = component.getInstance(element);
if (!instance) {
instance = new component(element);
if (thisComponent?.onInit) {
instance[thisComponent.onInit]();
}
}
});
};
// const init = (components, options) => {
// components.forEach((component) => initComponent(component, options));
// };
const defaultOptions = {
allowReinits: false,
checkOtherImports: false,
};
export class InitTWE {
constructor(defaultInitSelectors) {
_defaultInitSelectors = defaultInitSelectors;
}
init = (components, options) => {
components.forEach((component) => initComponent(component, options));
};
initTWE = (components, options) => {
const initOptions = { ...defaultOptions, ...options };
const componentList = Object.keys(_defaultInitSelectors).map((element) => {
const requireAutoinit = Boolean(
document.querySelector(_defaultInitSelectors[element].selector)
);
if (requireAutoinit) {
const component = components[_defaultInitSelectors[element].name];
if (
!component &&
!register.isInited(element) &&
initOptions.checkOtherImports
) {
console.warn(
`Please import ${_defaultInitSelectors[element].name} from "tw-elements" package and add it to a object parameter inside "initTWE" function`
);
}
return component;
}
});
this.init(componentList, initOptions);
};
}
export default InitTWE;
================================================
FILE: src/js/autoinit/initSelectors/free.js
================================================
import {
dropdownCallback,
offcanvasCallback,
tabCallback,
buttonCallback,
rippleCallback,
collapseCallback,
tooltipsCallback,
popoverCallback,
modalCallback,
} from "../callbacks/free";
const defaultInitSelectors = {
carousel: {
name: "Carousel",
selector: "[data-twe-carousel-init]",
isToggler: false,
},
input: {
name: "Input",
selector: "[data-twe-input-wrapper-init]",
isToggler: false,
},
scrollspy: {
name: "ScrollSpy",
selector: "[data-twe-spy='scroll']",
isToggler: false,
},
// togglers
button: {
name: "Button",
selector: "[data-twe-toggle='button']",
isToggler: true,
callback: buttonCallback,
},
collapse: {
name: "Collapse",
selector: "[data-twe-collapse-init]",
isToggler: true,
callback: collapseCallback,
},
dropdown: {
name: "Dropdown",
selector: "[data-twe-dropdown-toggle-ref]",
isToggler: true,
callback: dropdownCallback,
},
ripple: {
name: "Ripple",
selector: "[data-twe-ripple-init]",
isToggler: true,
callback: rippleCallback,
},
offcanvas: {
name: "Offcanvas",
selector: "[data-twe-offcanvas-toggle]",
isToggler: true,
callback: offcanvasCallback,
},
tab: {
name: "Tab",
selector:
"[data-twe-toggle='tab'], [data-twe-toggle='pill'], [data-twe-toggle='list']",
isToggler: true,
callback: tabCallback,
},
tooltip: {
name: "Tooltip",
selector: "[data-twe-toggle='tooltip']",
isToggler: false,
callback: tooltipsCallback,
},
popover: {
name: "Popover",
selector: "[data-twe-toggle='popover']",
isToggler: true,
callback: popoverCallback,
},
modal: {
name: "Modal",
selector: "[data-twe-toggle='modal']",
isToggler: true,
callback: modalCallback,
},
};
export default defaultInitSelectors;
================================================
FILE: src/js/autoinit/jqueryInit.js
================================================
import { getjQuery, onDOMContentLoaded } from "../util/index";
const jqueryInit = (plugin) => {
onDOMContentLoaded(() => {
const $ = getjQuery();
if ($) {
const name = plugin.NAME;
const JQUERY_NO_CONFLICT = $.fn[name];
$.fn[name] = plugin.jQueryInterface;
$.fn[name].Constructor = plugin;
$.fn[name].noConflict = () => {
$.fn[name] = JQUERY_NO_CONFLICT;
return plugin.jQueryInterface;
};
}
});
};
export default jqueryInit;
================================================
FILE: src/js/base-component.js
================================================
import Data from "./dom/data";
import { executeAfterTransition, getElement } from "./util/index";
import EventHandler from "./dom/event-handler";
/*
------------------------------------------------------------------------
Constants
------------------------------------------------------------------------
*/
const VERSION = "5.1.3";
class BaseComponent {
constructor(element) {
element = getElement(element);
if (!element) {
return;
}
this._element = element;
Data.setData(this._element, this.constructor.DATA_KEY, this);
}
dispose() {
Data.removeData(this._element, this.constructor.DATA_KEY);
EventHandler.off(this._element, this.constructor.EVENT_KEY);
Object.getOwnPropertyNames(this).forEach((propertyName) => {
this[propertyName] = null;
});
}
_queueCallback(callback, element, isAnimated = true) {
executeAfterTransition(callback, element, isAnimated);
}
/** Static */
static getInstance(element) {
return Data.getData(getElement(element), this.DATA_KEY);
}
static getOrCreateInstance(element, config = {}) {
return (
this.getInstance(element) ||
new this(element, typeof config === "object" ? config : null)
);
}
static get VERSION() {
return VERSION;
}
static get NAME() {
throw new Error(
'You have to implement the static method "NAME", for each component!'
);
}
static get DATA_KEY() {
return `twe.${this.NAME}`;
}
static get EVENT_KEY() {
return `.${this.DATA_KEY}`;
}
}
export default BaseComponent;
================================================
FILE: src/js/dom/data.js
================================================
/*
------------------------------------------------------------------------
Constants
------------------------------------------------------------------------
*/
const mapData = (() => {
const storeData = {};
let id = 1;
return {
set(element, key, data) {
if (typeof element[key] === "undefined") {
element[key] = {
key,
id,
};
id++;
}
storeData[element[key].id] = data;
},
get(element, key) {
if (!element || typeof element[key] === "undefined") {
return null;
}
const keyProperties = element[key];
if (keyProperties.key === key) {
return storeData[keyProperties.id];
}
return null;
},
delete(element, key) {
if (typeof element[key] === "undefined") {
return;
}
const keyProperties = element[key];
if (keyProperties.key === key) {
delete storeData[keyProperties.id];
delete element[key];
}
},
};
})();
const Data = {
setData(instance, key, data) {
mapData.set(instance, key, data);
},
getData(instance, key) {
return mapData.get(instance, key);
},
removeData(instance, key) {
mapData.delete(instance, key);
},
};
export default Data;
================================================
FILE: src/js/dom/event-handler.js
================================================
import { getjQuery } from "../util/index";
/*
------------------------------------------------------------------------
Constants
------------------------------------------------------------------------
*/
const namespaceRegex = /[^.]*(?=\..*)\.|.*/;
const stripNameRegex = /\..*/;
const stripUidRegex = /::\d+$/;
const eventRegistry = {}; // Events storage
let uidEvent = 1;
const customEvents = {
mouseenter: "mouseover",
mouseleave: "mouseout",
};
const customEventsRegex = /^(mouseenter|mouseleave)/i;
const nativeEvents = new Set([
"click",
"dblclick",
"mouseup",
"mousedown",
"contextmenu",
"mousewheel",
"DOMMouseScroll",
"mouseover",
"mouseout",
"mousemove",
"selectstart",
"selectend",
"keydown",
"keypress",
"keyup",
"orientationchange",
"touchstart",
"touchmove",
"touchend",
"touchcancel",
"pointerdown",
"pointermove",
"pointerup",
"pointerleave",
"pointercancel",
"gesturestart",
"gesturechange",
"gestureend",
"focus",
"blur",
"change",
"reset",
"select",
"submit",
"focusin",
"focusout",
"load",
"unload",
"beforeunload",
"resize",
"move",
"DOMContentLoaded",
"readystatechange",
"error",
"abort",
"scroll",
]);
/**
* ------------------------------------------------------------------------
* Private methods
* ------------------------------------------------------------------------
*/
function getUidEvent(element, uid) {
return (uid && `${uid}::${uidEvent++}`) || element.uidEvent || uidEvent++;
}
function getEvent(element) {
const uid = getUidEvent(element);
element.uidEvent = uid;
eventRegistry[uid] = eventRegistry[uid] || {};
return eventRegistry[uid];
}
function bootstrapHandler(element, fn) {
return function handler(event) {
event.delegateTarget = element;
if (handler.oneOff) {
EventHandler.off(element, event.type, fn);
}
return fn.apply(element, [event]);
};
}
function bootstrapDelegationHandler(element, selector, fn) {
return function handler(event) {
const domElements = element.querySelectorAll(selector);
for (
let { target } = event;
target && target !== this;
target = target.parentNode
) {
for (let i = domElements.length; i--; "") {
if (domElements[i] === target) {
event.delegateTarget = target;
if (handler.oneOff) {
EventHandler.off(element, event.type, fn);
}
return fn.apply(target, [event]);
}
}
}
// To please ESLint
return null;
};
}
function findHandler(events, handler, delegationSelector = null) {
const uidEventList = Object.keys(events);
for (let i = 0, len = uidEventList.length; i < len; i++) {
const event = events[uidEventList[i]];
if (
event.originalHandler === handler &&
event.delegationSelector === delegationSelector
) {
return event;
}
}
return null;
}
function normalizeParams(originalTypeEvent, handler, delegationFn) {
const delegation = typeof handler === "string";
const originalHandler = delegation ? delegationFn : handler;
let typeEvent = getTypeEvent(originalTypeEvent);
const isNative = nativeEvents.has(typeEvent);
if (!isNative) {
typeEvent = originalTypeEvent;
}
return [delegation, originalHandler, typeEvent];
}
function addHandler(element, originalTypeEvent, handler, delegationFn, oneOff) {
if (typeof originalTypeEvent !== "string" || !element) {
return;
}
if (!handler) {
handler = delegationFn;
delegationFn = null;
}
// in case of mouseenter or mouseleave wrap the handler within a function that checks for its DOM position
// this prevents the handler from being dispatched the same way as mouseover or mouseout does
if (customEventsRegex.test(originalTypeEvent)) {
const wrapFn = (fn) => {
return function (event) {
if (
!event.relatedTarget ||
(event.relatedTarget !== event.delegateTarget &&
!event.delegateTarget.contains(event.relatedTarget))
) {
return fn.call(this, event);
}
};
};
if (delegationFn) {
delegationFn = wrapFn(delegationFn);
} else {
handler = wrapFn(handler);
}
}
const [delegation, originalHandler, typeEvent] = normalizeParams(
originalTypeEvent,
handler,
delegationFn
);
const events = getEvent(element);
const handlers = events[typeEvent] || (events[typeEvent] = {});
const previousFn = findHandler(
handlers,
originalHandler,
delegation ? handler : null
);
if (previousFn) {
previousFn.oneOff = previousFn.oneOff && oneOff;
return;
}
const uid = getUidEvent(
originalHandler,
originalTypeEvent.replace(namespaceRegex, "")
);
const fn = delegation
? bootstrapDelegationHandler(element, handler, delegationFn)
: bootstrapHandler(element, handler);
fn.delegationSelector = delegation ? handler : null;
fn.originalHandler = originalHandler;
fn.oneOff = oneOff;
fn.uidEvent = uid;
handlers[uid] = fn;
element.addEventListener(typeEvent, fn, delegation);
}
function removeHandler(
element,
events,
typeEvent,
handler,
delegationSelector
) {
const fn = findHandler(events[typeEvent], handler, delegationSelector);
if (!fn) {
return;
}
element.removeEventListener(typeEvent, fn, Boolean(delegationSelector));
delete events[typeEvent][fn.uidEvent];
}
function removeNamespacedHandlers(element, events, typeEvent, namespace) {
const storeElementEvent = events[typeEvent] || {};
Object.keys(storeElementEvent).forEach((handlerKey) => {
if (handlerKey.includes(namespace)) {
const event = storeElementEvent[handlerKey];
removeHandler(
element,
events,
typeEvent,
event.originalHandler,
event.delegationSelector
);
}
});
}
function getTypeEvent(event) {
// allow to get the native events from namespaced events ('click.twe.button' --> 'click')
event = event.replace(stripNameRegex, "");
return customEvents[event] || event;
}
const EventHandler = {
on(element, event, handler, delegationFn) {
addHandler(element, event, handler, delegationFn, false);
},
one(element, event, handler, delegationFn) {
addHandler(element, event, handler, delegationFn, true);
},
off(element, originalTypeEvent, handler, delegationFn) {
if (typeof originalTypeEvent !== "string" || !element) {
return;
}
const [delegation, originalHandler, typeEvent] = normalizeParams(
originalTypeEvent,
handler,
delegationFn
);
const inNamespace = typeEvent !== originalTypeEvent;
const events = getEvent(element);
const isNamespace = originalTypeEvent.startsWith(".");
if (typeof originalHandler !== "undefined") {
// Simplest case: handler is passed, remove that listener ONLY.
if (!events || !events[typeEvent]) {
return;
}
removeHandler(
element,
events,
typeEvent,
originalHandler,
delegation ? handler : null
);
return;
}
if (isNamespace) {
Object.keys(events).forEach((elementEvent) => {
removeNamespacedHandlers(
element,
events,
elementEvent,
originalTypeEvent.slice(1)
);
});
}
const storeElementEvent = events[typeEvent] || {};
Object.keys(storeElementEvent).forEach((keyHandlers) => {
const handlerKey = keyHandlers.replace(stripUidRegex, "");
if (!inNamespace || originalTypeEvent.includes(handlerKey)) {
const event = storeElementEvent[keyHandlers];
removeHandler(
element,
events,
typeEvent,
event.originalHandler,
event.delegationSelector
);
}
});
},
trigger(element, event, args) {
if (typeof event !== "string" || !element) {
return null;
}
const $ = getjQuery();
const typeEvent = getTypeEvent(event);
const inNamespace = event !== typeEvent;
const isNative = nativeEvents.has(typeEvent);
let jQueryEvent;
let bubbles = true;
let nativeDispatch = true;
let defaultPrevented = false;
let evt = null;
if (inNamespace && $) {
jQueryEvent = $.Event(event, args);
$(element).trigger(jQueryEvent);
bubbles = !jQueryEvent.isPropagationStopped();
nativeDispatch = !jQueryEvent.isImmediatePropagationStopped();
defaultPrevented = jQueryEvent.isDefaultPrevented();
}
if (isNative) {
evt = document.createEvent("HTMLEvents");
evt.initEvent(typeEvent, bubbles, true);
} else {
evt = new CustomEvent(event, {
bubbles,
cancelable: true,
});
}
// merge custom information in our event
if (typeof args !== "undefined") {
Object.keys(args).forEach((key) => {
Object.defineProperty(evt, key, {
get() {
return args[key];
},
});
});
}
if (defaultPrevented) {
evt.preventDefault();
}
if (nativeDispatch) {
element.dispatchEvent(evt);
}
if (evt.defaultPrevented && typeof jQueryEvent !== "undefined") {
jQueryEvent.preventDefault();
}
return evt;
},
};
export const EventHandlerMulti = {
on(element, eventsName, handler, delegationFn) {
const events = eventsName.split(" ");
for (let i = 0; i < events.length; i++) {
EventHandler.on(element, events[i], handler, delegationFn);
}
},
off(element, originalTypeEvent, handler, delegationFn) {
const events = originalTypeEvent.split(" ");
for (let i = 0; i < events.length; i++) {
EventHandler.off(element, events[i], handler, delegationFn);
}
},
};
export default EventHandler;
================================================
FILE: src/js/dom/manipulator.js
================================================
function normalizeData(val) {
if (val === "true") {
return true;
}
if (val === "false") {
return false;
}
if (val === Number(val).toString()) {
return Number(val);
}
if (val === "" || val === "null") {
return null;
}
return val;
}
function normalizeDataKey(key) {
return key.replace(/[A-Z]/g, (chr) => `-${chr.toLowerCase()}`);
}
const Manipulator = {
setDataAttribute(element, key, value) {
element.setAttribute(`data-twe-${normalizeDataKey(key)}`, value);
},
removeDataAttribute(element, key) {
element.removeAttribute(`data-twe-${normalizeDataKey(key)}`);
},
getDataAttributes(element) {
if (!element) {
return {};
}
const attributes = {};
Object.keys(element.dataset)
.filter((key) => key.startsWith("twe"))
.forEach((key) => {
if (key.startsWith("tweClass")) {
return;
}
let pureKey = key.replace(/^twe/, "");
pureKey =
pureKey.charAt(0).toLowerCase() + pureKey.slice(1, pureKey.length);
attributes[pureKey] = normalizeData(element.dataset[key]);
});
return attributes;
},
getDataClassAttributes(element) {
if (!element) {
return {};
}
const attributes = {
...element.dataset,
};
Object.keys(attributes)
.filter((key) => key.startsWith("tweClass"))
.forEach((key) => {
let pureKey = key.replace(/^tweClass/, "");
pureKey =
pureKey.charAt(0).toLowerCase() + pureKey.slice(1, pureKey.length);
attributes[pureKey] = normalizeData(attributes[key]);
});
return attributes;
},
getDataAttribute(element, key) {
return normalizeData(
element.getAttribute(`data-twe-${normalizeDataKey(key)}`)
);
},
offset(element) {
const rect = element.getBoundingClientRect();
return {
top: rect.top + document.body.scrollTop,
left: rect.left + document.body.scrollLeft,
};
},
position(element) {
return {
top: element.offsetTop,
left: element.offsetLeft,
};
},
style(element, style) {
Object.assign(element.style, style);
},
toggleClass(element, classNameOrList) {
if (!element) {
return;
}
_classNameOrListToArray(classNameOrList).forEach((className) => {
if (element.classList.contains(className)) {
element.classList.remove(className);
} else {
element.classList.add(className);
}
});
},
addClass(element, classNameOrList) {
_classNameOrListToArray(classNameOrList).forEach(
(className) =>
!element.classList.contains(className) &&
element.classList.add(className)
);
},
addStyle(element, style) {
Object.keys(style).forEach((property) => {
element.style[property] = style[property];
});
},
removeClass(element, classNameOrList) {
_classNameOrListToArray(classNameOrList).forEach(
(className) =>
element.classList.contains(className) &&
element.classList.remove(className)
);
},
hasClass(element, className) {
return element.classList.contains(className);
},
maxOffset(element) {
const rect = element.getBoundingClientRect();
return {
top:
rect.top +
Math.max(
document.body.scrollTop,
document.documentElement.scrollTop,
window.scrollY
),
left:
rect.left +
Math.max(
document.body.scrollLeft,
document.documentElement.scrollLeft,
window.scrollX
),
};
},
};
function _classNameOrListToArray(classNameOrList) {
if (typeof classNameOrList === "string") {
return classNameOrList.split(" ");
} else if (Array.isArray(classNameOrList)) {
return classNameOrList;
}
return false;
}
export default Manipulator;
================================================
FILE: src/js/dom/selector-engine.js
================================================
/*
------------------------------------------------------------------------
Constants
------------------------------------------------------------------------
*/
import { isDisabled, isVisible } from "../util/index";
const NODE_TEXT = 3;
const SelectorEngine = {
closest(element, selector) {
return element.closest(selector);
},
matches(element, selector) {
return element.matches(selector);
},
find(selector, element = document.documentElement) {
return [].concat(
...Element.prototype.querySelectorAll.call(element, selector)
);
},
findOne(selector, element = document.documentElement) {
return Element.prototype.querySelector.call(element, selector);
},
children(element, selector) {
const children = [].concat(...element.children);
return children.filter((child) => child.matches(selector));
},
parents(element, selector) {
const parents = [];
let ancestor = element.parentNode;
while (
ancestor &&
ancestor.nodeType === Node.ELEMENT_NODE &&
ancestor.nodeType !== NODE_TEXT
) {
if (this.matches(ancestor, selector)) {
parents.push(ancestor);
}
ancestor = ancestor.parentNode;
}
return parents;
},
prev(element, selector) {
let previous = element.previousElementSibling;
while (previous) {
if (previous.matches(selector)) {
return [previous];
}
previous = previous.previousElementSibling;
}
return [];
},
next(element, selector) {
let next = element.nextElementSibling;
while (next) {
if (this.matches(next, selector)) {
return [next];
}
next = next.nextElementSibling;
}
return [];
},
focusableChildren(element) {
const focusables = [
"a",
"button",
"input",
"textarea",
"select",
"details",
"[tabindex]",
'[contenteditable="true"]',
]
.map((selector) => `${selector}:not([tabindex^="-"])`)
.join(", ");
return this.find(focusables, element).filter(
(el) => !isDisabled(el) && isVisible(el)
);
},
};
export default SelectorEngine;
================================================
FILE: src/js/free/components/button.js
================================================
import BaseComponent from "../../base-component";
/*
------------------------------------------------------------------------
Constants
------------------------------------------------------------------------
*/
const NAME = "button";
const CLASS_NAME_ACTIVE = "active";
/*
------------------------------------------------------------------------
Class Definition
------------------------------------------------------------------------
*/
class Button extends BaseComponent {
// Getters
static get NAME() {
return NAME;
}
// Public
toggle() {
// Toggle class and sync the `aria-pressed` attribute with the return value of the `.toggle()` method
this._element.setAttribute(
"aria-pressed",
this._element.classList.toggle(CLASS_NAME_ACTIVE)
);
}
// Static
static jQueryInterface(config) {
return this.each(function () {
const data = Button.getOrCreateInstance(this);
if (config === "toggle") {
data[config]();
}
});
}
}
export default Button;
================================================
FILE: src/js/free/components/carousel.js
================================================
import {
getElementFromSelector,
isRTL,
isVisible,
getNextActiveElement,
reflow,
triggerTransitionEnd,
typeCheckConfig,
} from "../../util/index";
import EventHandler from "../../dom/event-handler";
import Manipulator from "../../dom/manipulator";
import SelectorEngine from "../../dom/selector-engine";
import BaseComponent from "../../base-component";
/*
------------------------------------------------------------------------
Constants
------------------------------------------------------------------------
*/
const NAME = "carousel";
const DATA_KEY = "twe.carousel";
const EVENT_KEY = `.${DATA_KEY}`;
const DATA_API_KEY = ".data-api";
const ARROW_LEFT_KEY = "ArrowLeft";
const ARROW_RIGHT_KEY = "ArrowRight";
const TOUCHEVENT_COMPAT_WAIT = 500; // Time for mouse compat events to fire after touch
const SWIPE_THRESHOLD = 40;
const Default = {
interval: 5000,
keyboard: true,
ride: false,
pause: "hover",
wrap: true,
touch: true,
};
const DefaultType = {
interval: "(number|boolean)",
keyboard: "boolean",
ride: "(boolean|string)",
pause: "(string|boolean)",
wrap: "boolean",
touch: "boolean",
};
const DefaultClasses = {
pointer: "touch-pan-y",
block: "!block",
visible:
"data-[twe-carousel-fade]:opacity-100 data-[twe-carousel-fade]:z-[1]",
invisible:
"data-[twe-carousel-fade]:z-0 data-[twe-carousel-fade]:opacity-0 data-[twe-carousel-fade]:duration-[600ms] data-[twe-carousel-fade]:delay-600",
slideRight: "translate-x-full",
slideLeft: "-translate-x-full",
};
const DefaultClassesType = {
pointer: "string",
block: "string",
visible: "string",
invisible: "string",
slideRight: "string",
slideLeft: "string",
};
const ORDER_NEXT = "next";
const ORDER_PREV = "prev";
const DIRECTION_LEFT = "left";
const DIRECTION_RIGHT = "right";
const KEY_TO_DIRECTION = {
[ARROW_LEFT_KEY]: DIRECTION_RIGHT,
[ARROW_RIGHT_KEY]: DIRECTION_LEFT,
};
const EVENT_SLIDE = `slide${EVENT_KEY}`;
const EVENT_SLID = `slid${EVENT_KEY}`;
const EVENT_KEYDOWN = `keydown${EVENT_KEY}`;
const EVENT_MOUSEENTER = `mouseenter${EVENT_KEY}`;
const EVENT_MOUSELEAVE = `mouseleave${EVENT_KEY}`;
const EVENT_TOUCHSTART = `touchstart${EVENT_KEY}`;
const EVENT_TOUCHMOVE = `touchmove${EVENT_KEY}`;
const EVENT_TOUCHEND = `touchend${EVENT_KEY}`;
const EVENT_POINTERDOWN = `pointerdown${EVENT_KEY}`;
const EVENT_POINTERUP = `pointerup${EVENT_KEY}`;
const EVENT_DRAG_START = `dragstart${EVENT_KEY}`;
const EVENT_LOAD_DATA_API = `load${EVENT_KEY}${DATA_API_KEY}`;
const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`;
const ATTR_ACTIVE = "data-twe-carousel-active";
const ATTR_END = "data-twe-carousel-item-end";
const ATTR_START = "data-twe-carousel-item-start";
const ATTR_NEXT = "data-twe-carousel-item-next";
const ATTR_PREV = "data-twe-carousel-item-prev";
const ATTR_POINTER_EVENT = "data-twe-carousel-pointer-event";
const SELECTOR_DATA_CAROUSEL_INIT = "[data-twe-carousel-init]";
const SELECTOR_DATA_ACTIVE = "[data-twe-carousel-active]";
const SELECTOR_DATA_ITEM = "[data-twe-carousel-item]";
const SELECTOR_DATA_ACTIVE_ITEM = `${SELECTOR_DATA_ACTIVE}${SELECTOR_DATA_ITEM}`;
const SELECTOR_DATA_ITEM_IMG = `${SELECTOR_DATA_ITEM} img`;
const SELECTOR_DATA_NEXT_PREV =
"[data-twe-carousel-item-next], [data-twe-carousel-item-prev]";
const SELECTOR_DATA_INDICATORS = "[data-twe-carousel-indicators]";
const SELECTOR_INDICATOR = "[data-twe-target]";
const SELECTOR_DATA_SLIDE = "[data-twe-slide], [data-twe-slide-to]";
const POINTER_TYPE_TOUCH = "touch";
const POINTER_TYPE_PEN = "pen";
/*
------------------------------------------------------------------------
Class Definition
------------------------------------------------------------------------
*/
class Carousel extends BaseComponent {
constructor(element, config, classes) {
super(element);
this._items = null;
this._interval = null;
this._activeElement = null;
this._isPaused = false;
this._isSliding = false;
this.touchTimeout = null;
this.touchStartX = 0;
this.touchDeltaX = 0;
this._config = this._getConfig(config);
this._classes = this._getClasses(classes);
this._indicatorsElement = SelectorEngine.findOne(
SELECTOR_DATA_INDICATORS,
this._element
);
this._touchSupported =
"ontouchstart" in document.documentElement ||
navigator.maxTouchPoints > 0;
this._pointerEvent = Boolean(window.PointerEvent);
this._setActiveElementClass();
this._addEventListeners();
this._didInit = false;
this._init();
if (this._config.ride === "carousel") {
this.cycle();
}
}
// Getters
static get Default() {
return Default;
}
static get NAME() {
return NAME;
}
// Public
next() {
this._slide(ORDER_NEXT);
}
nextWhenVisible() {
// Don't call next when the page isn't visible
// or the carousel or its parent isn't visible
if (!document.hidden && isVisible(this._element)) {
this.next();
}
}
prev() {
this._slide(ORDER_PREV);
}
pause(event) {
if (!event) {
this._isPaused = true;
}
if (SelectorEngine.findOne(SELECTOR_DATA_NEXT_PREV, this._element)) {
triggerTransitionEnd(this._element);
this.cycle(true);
}
clearInterval(this._interval);
this._interval = null;
}
cycle(event) {
if (!event) {
this._isPaused = false;
}
if (this._interval) {
clearInterval(this._interval);
this._interval = null;
}
if (this._config && this._config.interval && !this._isPaused) {
this._updateInterval();
this._interval = setInterval(
(document.visibilityState ? this.nextWhenVisible : this.next).bind(
this
),
this._config.interval
);
}
}
to(index) {
this._activeElement = SelectorEngine.findOne(
SELECTOR_DATA_ACTIVE_ITEM,
this._element
);
const activeIndex = this._getItemIndex(this._activeElement);
if (index > this._items.length - 1 || index < 0) {
return;
}
if (this._isSliding) {
EventHandler.one(this._element, EVENT_SLID, () => this.to(index));
return;
}
if (activeIndex === index) {
this.pause();
this.cycle();
return;
}
const order = index > activeIndex ? ORDER_NEXT : ORDER_PREV;
this._slide(order, this._items[index]);
}
dispose() {
EventHandler.off(
document,
EVENT_CLICK_DATA_API,
SELECTOR_DATA_SLIDE,
Carousel.dataApiClickHandler
);
EventHandler.off(window, EVENT_LOAD_DATA_API);
super.dispose();
}
// Private
_init() {
if (this._didInit) {
return;
}
EventHandler.on(
document,
EVENT_CLICK_DATA_API,
SELECTOR_DATA_SLIDE,
Carousel.dataApiClickHandler
);
EventHandler.on(window, EVENT_LOAD_DATA_API, () => {
const carousels = SelectorEngine.find(SELECTOR_DATA_CAROUSEL_INIT);
for (let i = 0, len = carousels.length; i < len; i++) {
Carousel.carouselInterface(
carousels[i],
Carousel.getInstance(carousels[i])
);
}
});
this._didInit = true;
}
_getConfig(config) {
config = {
...Default,
...Manipulator.getDataAttributes(this._element),
...(typeof config === "object" ? config : {}),
};
typeCheckConfig(NAME, config, DefaultType);
return config;
}
_getClasses(classes) {
const dataAttributes = Manipulator.getDataClassAttributes(this._element);
classes = {
...DefaultClasses,
...dataAttributes,
...classes,
};
typeCheckConfig(NAME, classes, DefaultClassesType);
return classes;
}
_enableCycle() {
if (!this._config.ride) {
return;
}
if (this._isSliding) {
EventHandler.one(this._element, EVENT_SLID, () => this.cycle());
return;
}
this.cycle();
}
_applyInitialClasses() {
const activeElement = SelectorEngine.findOne(
SELECTOR_DATA_ACTIVE_ITEM,
this._element
);
activeElement.classList.add(
this._classes.block,
...this._classes.visible.split(" ")
);
this._setActiveIndicatorElement(activeElement);
}
_handleSwipe() {
const absDeltax = Math.abs(this.touchDeltaX);
if (absDeltax <= SWIPE_THRESHOLD) {
return;
}
const direction = absDeltax / this.touchDeltaX;
this.touchDeltaX = 0;
if (!direction) {
return;
}
this._slide(direction > 0 ? DIRECTION_RIGHT : DIRECTION_LEFT);
}
_setActiveElementClass() {
this._activeElement = SelectorEngine.findOne(
SELECTOR_DATA_ACTIVE_ITEM,
this._element
);
Manipulator.addClass(this._activeElement, "hidden");
}
_addEventListeners() {
if (this._config.keyboard) {
EventHandler.on(this._element, EVENT_KEYDOWN, (event) =>
this._keydown(event)
);
}
if (this._config.pause === "hover") {
EventHandler.on(this._element, EVENT_MOUSEENTER, (event) =>
this.pause(event)
);
EventHandler.on(this._element, EVENT_MOUSELEAVE, (event) =>
this._enableCycle(event)
);
}
if (this._config.touch && this._touchSupported) {
this._addTouchEventListeners();
}
this._applyInitialClasses();
}
_addTouchEventListeners() {
const hasPointerPenTouch = (event) => {
return (
this._pointerEvent &&
(event.pointerType === POINTER_TYPE_PEN ||
event.pointerType === POINTER_TYPE_TOUCH)
);
};
const start = (event) => {
if (hasPointerPenTouch(event)) {
this.touchStartX = event.clientX;
} else if (!this._pointerEvent) {
this.touchStartX = event.touches[0].clientX;
}
};
const move = (event) => {
// ensure swiping with one touch and not pinching
this.touchDeltaX =
event.touches && event.touches.length > 1
? 0
: event.touches[0].clientX - this.touchStartX;
};
const end = (event) => {
if (hasPointerPenTouch(event)) {
this.touchDeltaX = event.clientX - this.touchStartX;
}
this._handleSwipe();
if (this._config.pause === "hover") {
// If it's a touch-enabled device, mouseenter/leave are fired as
// part of the mouse compatibility events on first tap - the carousel
// would stop cycling until user tapped out of it;
// here, we listen for touchend, explicitly pause the carousel
// (as if it's the second time we tap on it, mouseenter compat event
// is NOT fired) and after a timeout (to allow for mouse compatibility
// events to fire) we explicitly restart cycling
this.pause();
if (this.touchTimeout) {
clearTimeout(this.touchTimeout);
}
this.touchTimeout = setTimeout(
(event) => this._enableCycle(event),
TOUCHEVENT_COMPAT_WAIT + this._config.interval
);
}
};
SelectorEngine.find(SELECTOR_DATA_ITEM_IMG, this._element).forEach(
(itemImg) => {
EventHandler.on(itemImg, EVENT_DRAG_START, (event) =>
event.preventDefault()
);
}
);
if (this._pointerEvent) {
EventHandler.on(this._element, EVENT_POINTERDOWN, (event) =>
start(event)
);
EventHandler.on(this._element, EVENT_POINTERUP, (event) => end(event));
this._element.classList.add(this._classes.pointer);
this._element.setAttribute(`${ATTR_POINTER_EVENT}`, "");
} else {
EventHandler.on(this._element, EVENT_TOUCHSTART, (event) => start(event));
EventHandler.on(this._element, EVENT_TOUCHMOVE, (event) => move(event));
EventHandler.on(this._element, EVENT_TOUCHEND, (event) => end(event));
}
}
_keydown(event) {
if (/input|textarea/i.test(event.target.tagName)) {
return;
}
const direction = KEY_TO_DIRECTION[event.key];
if (direction) {
event.preventDefault();
this._slide(direction);
}
}
_getItemIndex(element) {
this._items =
element && element.parentNode
? SelectorEngine.find(SELECTOR_DATA_ITEM, element.parentNode)
: [];
return this._items.indexOf(element);
}
_getItemByOrder(order, activeElement) {
const isNext = order === ORDER_NEXT;
return getNextActiveElement(
this._items,
activeElement,
isNext,
this._config.wrap
);
}
_triggerSlideEvent(relatedTarget, eventDirectionName) {
const targetIndex = this._getItemIndex(relatedTarget);
const fromIndex = this._getItemIndex(
SelectorEngine.findOne(SELECTOR_DATA_ACTIVE_ITEM, this._element)
);
return EventHandler.trigger(this._element, EVENT_SLIDE, {
relatedTarget,
direction: eventDirectionName,
from: fromIndex,
to: targetIndex,
});
}
_setActiveIndicatorElement(element) {
if (this._indicatorsElement) {
const activeIndicator = SelectorEngine.findOne(
SELECTOR_DATA_ACTIVE,
this._indicatorsElement
);
activeIndicator.removeAttribute(ATTR_ACTIVE);
activeIndicator.removeAttribute("aria-current");
activeIndicator.classList.remove("!opacity-100");
const indicators = SelectorEngine.find(
SELECTOR_INDICATOR,
this._indicatorsElement
);
for (let i = 0; i < indicators.length; i++) {
if (
Number.parseInt(
indicators[i].getAttribute("data-twe-slide-to"),
10
) === this._getItemIndex(element)
) {
indicators[i].setAttribute(`${ATTR_ACTIVE}`, "");
indicators[i].setAttribute("aria-current", "true");
indicators[i].classList.add("!opacity-100");
break;
}
}
}
}
_updateInterval() {
const element =
this._activeElement ||
SelectorEngine.findOne(SELECTOR_DATA_ACTIVE_ITEM, this._element);
if (!element) {
return;
}
const elementInterval = Number.parseInt(
element.getAttribute("data-twe-interval"),
10
);
if (elementInterval) {
this._config.defaultInterval =
this._config.defaultInterval || this._config.interval;
this._config.interval = elementInterval;
} else {
this._config.interval =
this._config.defaultInterval || this._config.interval;
}
}
_slide(directionOrOrder, element) {
const order = this._directionToOrder(directionOrOrder);
const activeElement = SelectorEngine.findOne(
SELECTOR_DATA_ACTIVE_ITEM,
this._element
);
const activeElementIndex = this._getItemIndex(activeElement);
const nextElement = element || this._getItemByOrder(order, activeElement);
const nextElementIndex = this._getItemIndex(nextElement);
const isCycling = Boolean(this._interval);
const isNext = order === ORDER_NEXT;
const directionalAttr = isNext ? ATTR_START : ATTR_END;
const orderAttr = isNext ? ATTR_NEXT : ATTR_PREV;
const eventDirectionName = this._orderToDirection(order);
const activeClass =
directionalAttr === ATTR_START
? this._classes.slideLeft
: this._classes.slideRight;
const nextClass =
directionalAttr !== ATTR_START
? this._classes.slideLeft
: this._classes.slideRight;
if (nextElement && nextElement.hasAttribute(ATTR_ACTIVE)) {
this._isSliding = false;
return;
}
if (this._isSliding) {
return;
}
const slideEvent = this._triggerSlideEvent(nextElement, eventDirectionName);
if (slideEvent.defaultPrevented) {
return;
}
if (!activeElement || !nextElement) {
// Some weirdness is happening, so we bail
return;
}
this._isSliding = true;
if (isCycling) {
this.pause();
}
this._setActiveIndicatorElement(nextElement);
this._activeElement = nextElement;
const triggerSlidEvent = () => {
EventHandler.trigger(this._element, EVENT_SLID, {
relatedTarget: nextElement,
direction: eventDirectionName,
from: activeElementIndex,
to: nextElementIndex,
});
};
nextElement.setAttribute(`${orderAttr}`, "");
nextElement.classList.add(this._classes.block, nextClass);
reflow(nextElement);
activeElement.setAttribute(`${directionalAttr}`, "");
activeElement.classList.add(
activeClass,
...this._classes.invisible.split(" ")
);
activeElement.classList.remove(...this._classes.visible.split(" "));
nextElement.setAttribute(`${directionalAttr}`, "");
nextElement.classList.add(...this._classes.visible.split(" "));
nextElement.classList.remove(
this._classes.slideRight,
this._classes.slideLeft
);
const completeCallBack = () => {
nextElement.removeAttribute(directionalAttr);
nextElement.removeAttribute(orderAttr);
nextElement.setAttribute(`${ATTR_ACTIVE}`, "");
activeElement.removeAttribute(ATTR_ACTIVE);
activeElement.classList.remove(
activeClass,
...this._classes.invisible.split(" "),
this._classes.block
);
activeElement.removeAttribute(orderAttr);
activeElement.removeAttribute(directionalAttr);
this._isSliding = false;
setTimeout(triggerSlidEvent, 0);
};
this._queueCallback(completeCallBack, activeElement, true);
if (isCycling || this._config.ride === true) {
this.cycle();
}
}
_directionToOrder(direction) {
if (![DIRECTION_RIGHT, DIRECTION_LEFT].includes(direction)) {
return direction;
}
if (isRTL()) {
return direction === DIRECTION_LEFT ? ORDER_PREV : ORDER_NEXT;
}
return direction === DIRECTION_LEFT ? ORDER_NEXT : ORDER_PREV;
}
_orderToDirection(order) {
if (![ORDER_NEXT, ORDER_PREV].includes(order)) {
return order;
}
if (isRTL()) {
return order === ORDER_PREV ? DIRECTION_LEFT : DIRECTION_RIGHT;
}
return order === ORDER_PREV ? DIRECTION_RIGHT : DIRECTION_LEFT;
}
// Static
static carouselInterface(element, config) {
const data = Carousel.getOrCreateInstance(element, config);
let { _config } = data;
if (typeof config === "object") {
_config = {
..._config,
...config,
};
}
const action = typeof config === "string" ? config : config.slide;
if (typeof config === "number") {
data.to(config);
return;
}
if (typeof action === "string") {
if (typeof data[action] === "undefined") {
throw new TypeError(`No method named "${action}"`);
}
data[action]();
} else if (_config.interval && _config.ride === true) {
data.pause();
}
}
static jQueryInterface(config) {
return this.each(function () {
let data = Carousel.getOrCreateInstance(this);
if (typeof config === "number") {
data.to(config);
return;
}
if (typeof config === "string") {
if (typeof data[config] === "undefined") {
throw new TypeError(`No method named "${config}"`);
}
data[config]();
}
});
}
static dataApiClickHandler(event) {
const target = getElementFromSelector(this);
if (!target) {
return;
}
const config = {
...Manipulator.getDataAttributes(target),
...Manipulator.getDataAttributes(this),
};
const slideIndex = this.getAttribute("data-twe-slide-to");
if (slideIndex) {
config.interval = false;
}
Carousel.carouselInterface(target, config);
if (slideIndex) {
Carousel.getInstance(target).to(slideIndex);
}
event.preventDefault();
}
}
export default Carousel;
================================================
FILE: src/js/free/components/collapse.js
================================================
import {
getElement,
getSelectorFromElement,
getElementFromSelector,
reflow,
typeCheckConfig,
} from "../../util/index";
import Data from "../../dom/data";
import EventHandler from "../../dom/event-handler";
import Manipulator from "../../dom/manipulator";
import SelectorEngine from "../../dom/selector-engine";
import BaseComponent from "../../base-component";
/*
------------------------------------------------------------------------
Constants
------------------------------------------------------------------------
*/
const NAME = "collapse";
const DATA_KEY = "twe.collapse";
const EVENT_KEY = `.${DATA_KEY}`;
const Default = {
toggle: true,
parent: null,
};
const DefaultType = {
toggle: "boolean",
parent: "(null|element)",
};
const EVENT_SHOW = `show${EVENT_KEY}`;
const EVENT_SHOWN = `shown${EVENT_KEY}`;
const EVENT_HIDE = `hide${EVENT_KEY}`;
const EVENT_HIDDEN = `hidden${EVENT_KEY}`;
const ATTR_SHOW = "data-twe-collapse-show";
const ATTR_COLLAPSED = "data-twe-collapse-collapsed";
const ATTR_COLLAPSING = "data-twe-collapse-collapsing";
const ATTR_HORIZONTAL = "data-twe-collapse-horizontal";
const ATTR_COLLAPSE_ITEM = "data-twe-collapse-item";
const ATTR_COLLAPSE_DEEPER_CHILDREN = `:scope [${ATTR_COLLAPSE_ITEM}] [${ATTR_COLLAPSE_ITEM}]`;
const WIDTH = "width";
const HEIGHT = "height";
const SELECTOR_DATA_ACTIVES =
"[data-twe-collapse-item][data-twe-collapse-show], [data-twe-collapse-item][data-twe-collapse-collapsing]";
const SELECTOR_DATA_COLLAPSE_INIT = "[data-twe-collapse-init]";
const DefaultClasses = {
visible: "!visible",
hidden: "hidden",
baseTransition:
"overflow-hidden duration-[350ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none",
collapsing:
"h-0 transition-[height] overflow-hidden duration-[350ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none",
collapsingHorizontal:
"w-0 h-auto transition-[width] overflow-hidden duration-[350ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none",
};
const DefaultClassesType = {
visible: "string",
hidden: "string",
baseTransition: "string",
collapsing: "string",
collapsingHorizontal: "string",
};
/*
------------------------------------------------------------------------
Class Definition
------------------------------------------------------------------------
*/
class Collapse extends BaseComponent {
constructor(element, config, classes) {
super(element);
this._isTransitioning = false;
this._config = this._getConfig(config);
this._classes = this._getClasses(classes);
this._triggerArray = [];
const toggleList = SelectorEngine.find(SELECTOR_DATA_COLLAPSE_INIT);
for (let i = 0, len = toggleList.length; i < len; i++) {
const elem = toggleList[i];
const selector = getSelectorFromElement(elem);
const filterElement = SelectorEngine.find(selector).filter(
(foundElem) => foundElem === this._element
);
if (selector !== null && filterElement.length) {
this._selector = selector;
this._triggerArray.push(elem);
}
}
this._initializeChildren();
if (!this._config.parent) {
this._addAriaAndCollapsedClass(this._triggerArray, this._isShown());
}
if (this._config.toggle) {
this.toggle();
}
}
// Getters
static get Default() {
return Default;
}
static get NAME() {
return NAME;
}
// Public
toggle() {
if (this._isShown()) {
this.hide();
} else {
this.show();
}
}
show() {
if (this._isTransitioning || this._isShown()) {
return;
}
let actives = [];
let activesData;
if (this._config.parent) {
const children = SelectorEngine.find(
ATTR_COLLAPSE_DEEPER_CHILDREN,
this._config.parent
);
actives = SelectorEngine.find(
SELECTOR_DATA_ACTIVES,
this._config.parent
).filter((elem) => !children.includes(elem)); // remove children if greater depth
}
const container = SelectorEngine.findOne(this._selector);
if (actives.length) {
const tempActiveData = actives.find((elem) => container !== elem);
activesData = tempActiveData
? Collapse.getInstance(tempActiveData)
: null;
if (activesData && activesData._isTransitioning) {
return;
}
}
const startEvent = EventHandler.trigger(this._element, EVENT_SHOW);
if (startEvent.defaultPrevented) {
return;
}
actives.forEach((elemActive) => {
if (container !== elemActive) {
Collapse.getOrCreateInstance(elemActive, { toggle: false }).hide();
}
if (!activesData) {
Data.setData(elemActive, DATA_KEY, null);
}
});
const dimension = this._getDimension();
const CLASS_NAME_TRANSITION =
dimension === "height"
? this._classes.collapsing
: this._classes.collapsingHorizontal;
Manipulator.removeClass(this._element, this._classes.visible);
Manipulator.removeClass(this._element, this._classes.hidden);
Manipulator.addClass(this._element, CLASS_NAME_TRANSITION);
this._element.removeAttribute(ATTR_COLLAPSE_ITEM);
this._element.setAttribute(ATTR_COLLAPSING, "");
this._element.style[dimension] = 0;
this._addAriaAndCollapsedClass(this._triggerArray, true);
this._isTransitioning = true;
const complete = () => {
this._isTransitioning = false;
Manipulator.removeClass(this._element, this._classes.hidden);
Manipulator.removeClass(this._element, CLASS_NAME_TRANSITION);
Manipulator.addClass(this._element, this._classes.visible);
this._element.removeAttribute(ATTR_COLLAPSING);
this._element.setAttribute(ATTR_COLLAPSE_ITEM, "");
this._element.setAttribute(ATTR_SHOW, "");
this._element.style[dimension] = "";
EventHandler.trigger(this._element, EVENT_SHOWN);
};
const capitalizedDimension =
dimension[0].toUpperCase() + dimension.slice(1);
const scrollSize = `scroll${capitalizedDimension}`;
this._queueCallback(complete, this._element, true);
this._element.style[dimension] = `${this._element[scrollSize]}px`;
}
hide() {
if (this._isTransitioning || !this._isShown()) {
return;
}
const startEvent = EventHandler.trigger(this._element, EVENT_HIDE);
if (startEvent.defaultPrevented) {
return;
}
const dimension = this._getDimension();
const CLASS_NAME_TRANSITION =
dimension === "height"
? this._classes.collapsing
: this._classes.collapsingHorizontal;
this._element.style[dimension] = `${
this._element.getBoundingClientRect()[dimension]
}px`;
reflow(this._element);
Manipulator.addClass(this._element, CLASS_NAME_TRANSITION);
Manipulator.removeClass(this._element, this._classes.visible);
Manipulator.removeClass(this._element, this._classes.hidden);
this._element.setAttribute(ATTR_COLLAPSING, "");
this._element.removeAttribute(ATTR_COLLAPSE_ITEM);
this._element.removeAttribute(ATTR_SHOW);
const triggerArrayLength = this._triggerArray.length;
for (let i = 0; i < triggerArrayLength; i++) {
const trigger = this._triggerArray[i];
const elem = getElementFromSelector(trigger);
if (elem && !this._isShown(elem)) {
this._addAriaAndCollapsedClass([trigger], false);
}
}
this._isTransitioning = true;
const complete = () => {
this._isTransitioning = false;
Manipulator.removeClass(this._element, CLASS_NAME_TRANSITION);
Manipulator.addClass(this._element, this._classes.visible);
Manipulator.addClass(this._element, this._classes.hidden);
this._element.removeAttribute(ATTR_COLLAPSING);
this._element.setAttribute(ATTR_COLLAPSE_ITEM, "");
EventHandler.trigger(this._element, EVENT_HIDDEN);
};
this._element.style[dimension] = "";
this._queueCallback(complete, this._element, true);
}
_isShown(element = this._element) {
return element.hasAttribute(ATTR_SHOW);
}
// Private
_getConfig(config) {
config = {
...Default,
...Manipulator.getDataAttributes(this._element),
...config,
};
config.toggle = Boolean(config.toggle); // Coerce string values
config.parent = getElement(config.parent);
typeCheckConfig(NAME, config, DefaultType);
return config;
}
_getClasses(classes) {
const dataAttributes = Manipulator.getDataClassAttributes(this._element);
classes = {
...DefaultClasses,
...dataAttributes,
...classes,
};
typeCheckConfig(NAME, classes, DefaultClassesType);
return classes;
}
_getDimension() {
return this._element.hasAttribute(ATTR_HORIZONTAL) ? WIDTH : HEIGHT;
}
_initializeChildren() {
if (!this._config.parent) {
return;
}
const children = SelectorEngine.find(
ATTR_COLLAPSE_DEEPER_CHILDREN,
this._config.parent
);
SelectorEngine.find(SELECTOR_DATA_COLLAPSE_INIT, this._config.parent)
.filter((elem) => !children.includes(elem))
.forEach((element) => {
const selected = getElementFromSelector(element);
if (selected) {
this._addAriaAndCollapsedClass([element], this._isShown(selected));
}
});
}
_addAriaAndCollapsedClass(triggerArray, isOpen) {
if (!triggerArray.length) {
return;
}
triggerArray.forEach((elem) => {
if (isOpen) {
elem.removeAttribute(ATTR_COLLAPSED);
} else {
elem.setAttribute(`${ATTR_COLLAPSED}`, "");
}
elem.setAttribute("aria-expanded", isOpen);
});
}
// Static
static jQueryInterface(config) {
return this.each(function () {
const _config = {};
if (typeof config === "string" && /show|hide/.test(config)) {
_config.toggle = false;
}
const data = Collapse.getOrCreateInstance(this, _config);
if (typeof config === "string") {
if (typeof data[config] === "undefined") {
throw new TypeError(`No method named "${config}"`);
}
data[config]();
}
});
}
}
export default Collapse;
================================================
FILE: src/js/free/components/dropdown.js
================================================
import * as Popper from "@popperjs/core";
import {
getElement,
getElementFromSelector,
getNextActiveElement,
isDisabled,
isElement,
isRTL,
isVisible,
noop,
typeCheckConfig,
} from "../../util/index";
import EventHandler from "../../dom/event-handler";
import Manipulator from "../../dom/manipulator";
import SelectorEngine from "../../dom/selector-engine";
import BaseComponent from "../../base-component";
/*
------------------------------------------------------------------------
Constants
------------------------------------------------------------------------
*/
const NAME = "dropdown";
const DATA_KEY = "twe.dropdown";
const EVENT_KEY = `.${DATA_KEY}`;
const DATA_API_KEY = ".data-api";
const ESCAPE_KEY = "Escape";
const SPACE_KEY = "Space";
const TAB_KEY = "Tab";
const ARROW_UP_KEY = "ArrowUp";
const ARROW_DOWN_KEY = "ArrowDown";
const RIGHT_MOUSE_BUTTON = 2; // MouseEvent.button value for the secondary button, usually the right button
const REGEXP_KEYDOWN = new RegExp(
`${ARROW_UP_KEY}|${ARROW_DOWN_KEY}|${ESCAPE_KEY}`
);
const EVENT_HIDE = `hide${EVENT_KEY}`;
const EVENT_HIDDEN = `hidden${EVENT_KEY}`;
const EVENT_SHOW = `show${EVENT_KEY}`;
const EVENT_SHOWN = `shown${EVENT_KEY}`;
const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`;
const EVENT_KEYDOWN_DATA_API = `keydown${EVENT_KEY}${DATA_API_KEY}`;
const EVENT_KEYUP_DATA_API = `keyup${EVENT_KEY}${DATA_API_KEY}`;
const CLASS_NAME_SHOW = "show";
const CLASS_NAME_DROPUP = "dropup";
const CLASS_NAME_DROPEND = "dropend";
const CLASS_NAME_DROPSTART = "dropstart";
const SELECTOR_NAVBAR = "[data-twe-navbar-ref]";
const SELECTOR_DATA_TOGGLE = "[data-twe-dropdown-toggle-ref]";
const SELECTOR_MENU = "[data-twe-dropdown-menu-ref]";
const SELECTOR_NAVBAR_NAV = "[data-twe-navbar-nav-ref]";
const SELECTOR_VISIBLE_ITEMS =
"[data-twe-dropdown-menu-ref] [data-twe-dropdown-item-ref]:not(.disabled):not(:disabled)";
const PLACEMENT_TOP = isRTL() ? "top-end" : "top-start";
const PLACEMENT_TOPEND = isRTL() ? "top-start" : "top-end";
const PLACEMENT_BOTTOM = isRTL() ? "bottom-end" : "bottom-start";
const PLACEMENT_BOTTOMEND = isRTL() ? "bottom-start" : "bottom-end";
const PLACEMENT_RIGHT = isRTL() ? "left-start" : "right-start";
const PLACEMENT_LEFT = isRTL() ? "right-start" : "left-start";
const ANIMATION_FADE_IN = [{ opacity: "0" }, { opacity: "1" }];
const ANIMATION_FADE_OUT = [{ opacity: "1" }, { opacity: "0" }];
const ANIMATION_TIMING = {
iterations: 1,
easing: "ease",
fill: "both",
};
const Default = {
offset: [0, 2],
boundary: "clippingParents",
reference: "toggle",
display: "dynamic",
popperConfig: null,
autoClose: true,
dropdownAnimation: "on",
animationDuration: 550,
};
const DefaultType = {
offset: "(array|string|function)",
boundary: "(string|element)",
reference: "(string|element|object)",
display: "string",
popperConfig: "(null|object|function)",
autoClose: "(boolean|string)",
dropdownAnimation: "string",
animationDuration: "number",
};
/*
------------------------------------------------------------------------
Class Definition
------------------------------------------------------------------------
*/
class Dropdown extends BaseComponent {
constructor(element, config) {
super(element);
this._popper = null;
this._config = this._getConfig(config);
this._menu = this._getMenuElement();
this._inNavbar = this._detectNavbar();
this._fadeOutAnimate = null;
//* prevents dropdown close issue when system animation is turned off
const isPrefersReducedMotionSet = window.matchMedia(
"(prefers-reduced-motion: reduce)"
).matches;
this._animationCanPlay =
this._config.dropdownAnimation === "on" && !isPrefersReducedMotionSet;
this._didInit = false;
this._init();
}
// Getters
static get Default() {
return Default;
}
static get DefaultType() {
return DefaultType;
}
static get NAME() {
return NAME;
}
// Public
toggle() {
return this._isShown() ? this.hide() : this.show();
}
show() {
if (isDisabled(this._element) || this._isShown(this._menu)) {
return;
}
const relatedTarget = {
relatedTarget: this._element,
};
const showEvent = EventHandler.trigger(
this._element,
EVENT_SHOW,
relatedTarget
);
if (showEvent.defaultPrevented) {
return;
}
const parent = Dropdown.getParentFromElement(this._element);
// Totally disable Popper for Dropdowns in Navbar
if (this._inNavbar) {
Manipulator.setDataAttribute(this._menu, "popper", "none");
} else {
this._createPopper(parent);
}
// If this is a touch-enabled device we add extra
// empty mouseover listeners to the body's immediate children;
// only needed because of broken event delegation on iOS
// https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html
if (
"ontouchstart" in document.documentElement &&
!parent.closest(SELECTOR_NAVBAR_NAV)
) {
[]
.concat(...document.body.children)
.forEach((elem) => EventHandler.on(elem, "mouseover", noop));
}
this._element.focus();
this._element.setAttribute("aria-expanded", true);
this._menu.setAttribute(`data-twe-dropdown-${CLASS_NAME_SHOW}`, "");
this._animationCanPlay &&
this._menu.animate(ANIMATION_FADE_IN, {
...ANIMATION_TIMING,
duration: this._config.animationDuration,
});
this._element.setAttribute(`data-twe-dropdown-${CLASS_NAME_SHOW}`, "");
setTimeout(
() => {
EventHandler.trigger(this._element, EVENT_SHOWN, relatedTarget);
},
this._animationCanPlay ? this._config.animationDuration : 0
);
}
hide() {
if (isDisabled(this._element) || !this._isShown(this._menu)) {
return;
}
const relatedTarget = {
relatedTarget: this._element,
};
this._completeHide(relatedTarget);
}
dispose() {
if (this._popper) {
this._popper.destroy();
}
super.dispose();
}
update() {
this._inNavbar = this._detectNavbar();
if (this._popper) {
this._popper.update();
}
}
// Private
_init() {
if (this._didInit) {
return;
}
EventHandler.on(
document,
EVENT_KEYDOWN_DATA_API,
SELECTOR_DATA_TOGGLE,
Dropdown.dataApiKeydownHandler
);
EventHandler.on(
document,
EVENT_KEYDOWN_DATA_API,
SELECTOR_MENU,
Dropdown.dataApiKeydownHandler
);
EventHandler.on(document, EVENT_CLICK_DATA_API, Dropdown.clearMenus);
EventHandler.on(document, EVENT_KEYUP_DATA_API, Dropdown.clearMenus);
this._didInit = true;
}
_completeHide(relatedTarget) {
if (this._fadeOutAnimate && this._fadeOutAnimate.playState === "running") {
return;
}
const hideEvent = EventHandler.trigger(
this._element,
EVENT_HIDE,
relatedTarget
);
if (hideEvent.defaultPrevented) {
return;
}
// If this is a touch-enabled device we remove the extra
// empty mouseover listeners we added for iOS support
if ("ontouchstart" in document.documentElement) {
[]
.concat(...document.body.children)
.forEach((elem) => EventHandler.off(elem, "mouseover", noop));
}
if (this._animationCanPlay) {
this._fadeOutAnimate = this._menu.animate(ANIMATION_FADE_OUT, {
...ANIMATION_TIMING,
duration: this._config.animationDuration,
});
}
setTimeout(
() => {
if (this._popper) {
this._popper.destroy();
}
this._menu.removeAttribute(`data-twe-dropdown-${CLASS_NAME_SHOW}`);
this._element.removeAttribute(`data-twe-dropdown-${CLASS_NAME_SHOW}`);
this._element.setAttribute("aria-expanded", "false");
Manipulator.removeDataAttribute(this._menu, "popper");
EventHandler.trigger(this._element, EVENT_HIDDEN, relatedTarget);
},
this._animationCanPlay ? this._config.animationDuration : 0
);
}
_getConfig(config) {
config = {
...this.constructor.Default,
...Manipulator.getDataAttributes(this._element),
...config,
};
typeCheckConfig(NAME, config, this.constructor.DefaultType);
if (
typeof config.reference === "object" &&
!isElement(config.reference) &&
typeof config.reference.getBoundingClientRect !== "function"
) {
// Popper virtual elements require a getBoundingClientRect method
throw new TypeError(
`${NAME.toUpperCase()}: Option "reference" provided type "object" without a required "getBoundingClientRect" method.`
);
}
return config;
}
_createPopper(parent) {
if (typeof Popper === "undefined") {
throw new TypeError(
"Bootstrap's dropdowns require Popper (https://popper.js.org)"
);
}
let referenceElement = this._element;
if (this._config.reference === "parent") {
referenceElement = parent;
} else if (isElement(this._config.reference)) {
referenceElement = getElement(this._config.reference);
} else if (typeof this._config.reference === "object") {
referenceElement = this._config.reference;
}
const popperConfig = this._getPopperConfig();
const isDisplayStatic = popperConfig.modifiers.find(
(modifier) =>
modifier.name === "applyStyles" && modifier.enabled === false
);
this._popper = Popper.createPopper(
referenceElement,
this._menu,
popperConfig
);
if (isDisplayStatic) {
Manipulator.setDataAttribute(this._menu, "popper", "static");
}
}
_isShown(element = this._element) {
return (
element.dataset[
`tweDropdown${
CLASS_NAME_SHOW.charAt(0).toUpperCase() + CLASS_NAME_SHOW.slice(1)
}`
] === ""
);
}
_getMenuElement() {
return SelectorEngine.next(this._element, SELECTOR_MENU)[0];
}
_getPlacement() {
const parentDropdown = this._element.parentNode;
if (parentDropdown.dataset.tweDropdownPosition === CLASS_NAME_DROPEND) {
return PLACEMENT_RIGHT;
}
if (parentDropdown.dataset.tweDropdownPosition === CLASS_NAME_DROPSTART) {
return PLACEMENT_LEFT;
}
// We need to trim the value because custom properties can also include spaces
const isEnd = parentDropdown.dataset.tweDropdownAlignment === "end";
if (parentDropdown.dataset.tweDropdownPosition === CLASS_NAME_DROPUP) {
return isEnd ? PLACEMENT_TOPEND : PLACEMENT_TOP;
}
return isEnd ? PLACEMENT_BOTTOMEND : PLACEMENT_BOTTOM;
}
_detectNavbar() {
return this._element.closest(SELECTOR_NAVBAR) !== null;
}
_getOffset() {
const { offset } = this._config;
if (typeof offset === "string") {
return offset.split(",").map((val) => Number.parseInt(val, 10));
}
if (typeof offset === "function") {
return (popperData) => offset(popperData, this._element);
}
return offset;
}
_getPopperConfig() {
const defaultBsPopperConfig = {
placement: this._getPlacement(),
modifiers: [
{
name: "preventOverflow",
options: {
boundary: this._config.boundary,
},
},
{
name: "offset",
options: {
offset: this._getOffset(),
},
},
],
};
// Disable Popper if we have a static display
if (this._config.display === "static") {
defaultBsPopperConfig.modifiers = [
{
name: "applyStyles",
enabled: false,
},
];
}
return {
...defaultBsPopperConfig,
...(typeof this._config.popperConfig === "function"
? this._config.popperConfig(defaultBsPopperConfig)
: this._config.popperConfig),
};
}
_selectMenuItem({ key, target }) {
const items = SelectorEngine.find(
SELECTOR_VISIBLE_ITEMS,
this._menu
).filter(isVisible);
if (!items.length) {
return;
}
// if target isn't included in items (e.g. when expanding the dropdown)
// allow cycling to get the last item in case key equals ARROW_UP_KEY
getNextActiveElement(
items,
target,
key === ARROW_DOWN_KEY,
!items.includes(target)
).focus();
}
// Static
static jQueryInterface(config) {
return this.each(function () {
const data = Dropdown.getOrCreateInstance(this, config);
if (typeof config !== "string") {
return;
}
if (typeof data[config] === "undefined") {
throw new TypeError(`No method named "${config}"`);
}
data[config]();
});
}
static clearMenus(event) {
if (
event &&
(event.button === RIGHT_MOUSE_BUTTON ||
(event.type === "keyup" && event.key !== TAB_KEY))
) {
return;
}
const toggles = SelectorEngine.find(SELECTOR_DATA_TOGGLE);
for (let i = 0, len = toggles.length; i < len; i++) {
const context = Dropdown.getInstance(toggles[i]);
if (!context || context._config.autoClose === false) {
continue;
}
if (!context._isShown()) {
continue;
}
const relatedTarget = {
relatedTarget: context._element,
};
if (event) {
const composedPath = event.composedPath();
const isMenuTarget = composedPath.includes(context._menu);
if (
composedPath.includes(context._element) ||
(context._config.autoClose === "inside" && !isMenuTarget) ||
(context._config.autoClose === "outside" && isMenuTarget)
) {
continue;
}
// Tab navigation through the dropdown menu or events from contained inputs shouldn't close the menu
if (
context._menu.contains(event.target) &&
((event.type === "keyup" && event.key === TAB_KEY) ||
/input|select|option|textarea|form/i.test(event.target.tagName))
) {
continue;
}
if (event.type === "click") {
relatedTarget.clickEvent = event;
}
}
context._completeHide(relatedTarget);
}
}
static getParentFromElement(element) {
return getElementFromSelector(element) || element.parentNode;
}
static dataApiKeydownHandler(event) {
// If not input/textarea:
// - And not a key in REGEXP_KEYDOWN => not a dropdown command
// If input/textarea:
// - If space key => not a dropdown command
// - If key is other than escape
// - If key is not up or down => not a dropdown command
// - If trigger inside the menu => not a dropdown command
if (
/input|textarea/i.test(event.target.tagName)
? event.key === SPACE_KEY ||
(event.key !== ESCAPE_KEY &&
((event.key !== ARROW_DOWN_KEY && event.key !== ARROW_UP_KEY) ||
event.target.closest(SELECTOR_MENU)))
: !REGEXP_KEYDOWN.test(event.key)
) {
return;
}
const isActive =
this.dataset[
`tweDropdown${
CLASS_NAME_SHOW.charAt(0).toUpperCase() + CLASS_NAME_SHOW.slice(1)
}`
] === "";
if (!isActive && event.key === ESCAPE_KEY) {
return;
}
event.preventDefault();
event.stopPropagation();
if (isDisabled(this)) {
return;
}
const getToggleButton = this.matches(SELECTOR_DATA_TOGGLE)
? this
: SelectorEngine.prev(this, SELECTOR_DATA_TOGGLE)[0];
const instance = Dropdown.getOrCreateInstance(getToggleButton);
if (event.key === ESCAPE_KEY) {
instance.hide();
return;
}
if (event.key === ARROW_UP_KEY || event.key === ARROW_DOWN_KEY) {
if (!isActive) {
instance.show();
}
instance._selectMenuItem(event);
return;
}
if (!isActive || event.key === SPACE_KEY) {
Dropdown.clearMenus();
}
}
}
export default Dropdown;
================================================
FILE: src/js/free/components/modal.js
================================================
import { isRTL, reflow, typeCheckConfig } from "../../util/index";
import EventHandler from "../../dom/event-handler";
import Manipulator from "../../dom/manipulator";
import SelectorEngine from "../../dom/selector-engine";
import ScrollBarHelper from "../../util/scrollbar";
import BaseComponent from "../../base-component";
import Backdrop from "../../util/backdrop";
import FocusTrap from "../../util/focusTrap";
import { enableDismissTrigger } from "../../util/component-functions";
import { getTransitionDurationFromElement } from "../../util/index";
/*
------------------------------------------------------------------------
Constants
------------------------------------------------------------------------
*/
const NAME = "modal";
const DATA_KEY = "twe.modal";
const EVENT_KEY = `.${DATA_KEY}`;
const ESCAPE_KEY = "Escape";
const Default = {
backdrop: true,
keyboard: true,
focus: true,
};
const DefaultType = {
backdrop: "(boolean|string)",
keyboard: "boolean",
focus: "boolean",
};
const DefaultClasses = {
show: "transform-none",
static: "scale-[1.02]",
staticProperties: "transition-scale duration-300 ease-in-out",
backdrop:
"opacity-50 transition-all duration-300 ease-in-out fixed top-0 left-0 z-[1040] bg-black w-screen h-screen",
};
const DefaultClassesType = {
show: "string",
static: "string",
staticProperties: "string",
backdrop: "string",
};
const EVENT_HIDE = `hide${EVENT_KEY}`;
const EVENT_HIDE_PREVENTED = `hidePrevented${EVENT_KEY}`;
const EVENT_HIDDEN = `hidden${EVENT_KEY}`;
const EVENT_SHOW = `show${EVENT_KEY}`;
const EVENT_SHOWN = `shown${EVENT_KEY}`;
const EVENT_RESIZE = `resize${EVENT_KEY}`;
const EVENT_CLICK_DISMISS = `click.dismiss${EVENT_KEY}`;
const EVENT_KEYDOWN_DISMISS = `keydown.dismiss${EVENT_KEY}`;
const EVENT_MOUSEUP_DISMISS = `mouseup.dismiss${EVENT_KEY}`;
const EVENT_MOUSEDOWN_DISMISS = `mousedown.dismiss${EVENT_KEY}`;
const OPEN_SELECTOR_BODY = "data-twe-modal-open";
const OPEN_SELECTOR = "data-twe-open";
const SELECTOR_DIALOG = "[data-twe-modal-dialog-ref]";
const SELECTOR_MODAL_BODY = "[data-twe-modal-body-ref]";
/*
------------------------------------------------------------------------
Class Definition
------------------------------------------------------------------------
*/
class Modal extends BaseComponent {
constructor(element, config, classes) {
super(element);
this._config = this._getConfig(config);
this._classes = this._getClasses(classes);
this._backdrop = this._initializeBackDrop();
this._focustrap = this._initializeFocusTrap();
this._scrollBar = new ScrollBarHelper();
this._dialog = SelectorEngine.findOne(SELECTOR_DIALOG, this._element);
this._isShown = false;
this._ignoreBackdropClick = false;
this._isTransitioning = false;
this._didInit = false;
this._init();
}
// Getters
static get NAME() {
return NAME;
}
static get Default() {
return Default;
}
static get getDefaultType() {
return DefaultType;
}
// Public
toggle(relatedTarget) {
return this._isShown ? this.hide() : this.show(relatedTarget);
}
show(relatedTarget) {
if (this._isShown || this._isTransitioning) {
return;
}
const showEvent = EventHandler.trigger(this._element, EVENT_SHOW, {
relatedTarget,
});
if (showEvent.defaultPrevented) {
return;
}
this._isShown = true;
if (this._isAnimated()) {
this._isTransitioning = true;
}
this._scrollBar.hide();
document.body.setAttribute(OPEN_SELECTOR_BODY, "true");
this._adjustDialog();
this._setEscapeEvent();
this._setResizeEvent();
EventHandler.on(this._dialog, EVENT_MOUSEDOWN_DISMISS, () => {
EventHandler.one(this._element, EVENT_MOUSEUP_DISMISS, (event) => {
if (event.target === this._element) {
this._ignoreBackdropClick = true;
}
});
});
this._showElement(relatedTarget);
this._showBackdrop();
}
hide() {
if (!this._isShown || this._isTransitioning) {
return;
}
const hideEvent = EventHandler.trigger(this._element, EVENT_HIDE);
if (hideEvent.defaultPrevented) {
return;
}
this._isShown = false;
const isAnimated = this._isAnimated();
if (isAnimated) {
this._isTransitioning = true;
}
this._setEscapeEvent();
this._setResizeEvent();
this._focustrap.disable();
const modalDialog = SelectorEngine.findOne(SELECTOR_DIALOG, this._element);
modalDialog.classList.remove(this._classes.show);
EventHandler.off(this._element, EVENT_CLICK_DISMISS);
EventHandler.off(this._dialog, EVENT_MOUSEDOWN_DISMISS);
this._queueCallback(() => this._hideModal(), this._element, isAnimated);
this._element.removeAttribute(OPEN_SELECTOR);
}
dispose() {
[window, document, this._dialog].forEach((htmlElement) =>
EventHandler.off(htmlElement, EVENT_KEY)
);
this._backdrop.dispose();
this._focustrap.disable();
super.dispose();
}
handleUpdate() {
this._adjustDialog();
}
// Private
_init() {
if (this._didInit) {
return;
}
enableDismissTrigger(Modal);
this._didInit = true;
}
_initializeBackDrop() {
return new Backdrop({
isVisible: Boolean(this._config.backdrop), // 'static' option will be translated to true, and booleans will keep their value
isAnimated: this._isAnimated(),
backdropClasses: this._classes.backdrop,
});
}
_initializeFocusTrap() {
return new FocusTrap(this._element, {
event: "keydown",
condition: (event) => event.key === "Tab",
});
}
_showElement(relatedTarget) {
const isAnimated = this._isAnimated();
const modalBody = SelectorEngine.findOne(SELECTOR_MODAL_BODY, this._dialog);
if (
!this._element.parentNode ||
this._element.parentNode.nodeType !== Node.ELEMENT_NODE
) {
// Don't move modal's DOM position
document.body.append(this._element);
}
this._element.style.display = "block";
this._element.classList.remove("hidden");
this._element.removeAttribute("aria-hidden");
this._element.setAttribute("aria-modal", true);
this._element.setAttribute("role", "dialog");
this._element.setAttribute(`${OPEN_SELECTOR}`, "true");
this._element.scrollTop = 0;
const modalDialog = SelectorEngine.findOne(SELECTOR_DIALOG, this._element);
modalDialog.classList.add(this._classes.show);
modalDialog.classList.remove("opacity-0");
modalDialog.classList.add("opacity-100");
if (modalBody) {
modalBody.scrollTop = 0;
}
if (isAnimated) {
reflow(this._element);
}
const transitionComplete = () => {
if (this._config.focus) {
this._focustrap.trap();
}
this._isTransitioning = false;
EventHandler.trigger(this._element, EVENT_SHOWN, {
relatedTarget,
});
};
this._queueCallback(transitionComplete, this._dialog, isAnimated);
}
_setEscapeEvent() {
if (this._isShown) {
EventHandler.on(document, EVENT_KEYDOWN_DISMISS, (event) => {
if (this._config.keyboard && event.key === ESCAPE_KEY) {
event.preventDefault();
this.hide();
} else if (!this._config.keyboard && event.key === ESCAPE_KEY) {
this._triggerBackdropTransition();
}
});
} else {
EventHandler.off(this._element, EVENT_KEYDOWN_DISMISS);
}
}
_setResizeEvent() {
if (this._isShown) {
EventHandler.on(window, EVENT_RESIZE, () => this._adjustDialog());
} else {
EventHandler.off(window, EVENT_RESIZE);
}
}
_hideModal() {
const modalDialog = SelectorEngine.findOne(SELECTOR_DIALOG, this._element);
modalDialog.classList.remove(this._classes.show);
modalDialog.classList.remove("opacity-100");
modalDialog.classList.add("opacity-0");
const transitionTime = getTransitionDurationFromElement(modalDialog);
setTimeout(() => {
this._element.style.display = "none";
}, transitionTime);
this._element.setAttribute("aria-hidden", true);
this._element.removeAttribute("aria-modal");
this._element.removeAttribute("role");
this._isTransitioning = false;
this._backdrop.hide(() => {
document.body.removeAttribute(OPEN_SELECTOR_BODY);
this._resetAdjustments();
this._scrollBar.reset();
EventHandler.trigger(this._element, EVENT_HIDDEN);
});
}
_showBackdrop(callback) {
EventHandler.on(this._element, EVENT_CLICK_DISMISS, (event) => {
if (this._ignoreBackdropClick) {
this._ignoreBackdropClick = false;
return;
}
if (event.target !== event.currentTarget) {
return;
}
if (this._config.backdrop === true) {
this.hide();
} else if (this._config.backdrop === "static") {
this._triggerBackdropTransition();
}
});
this._backdrop.show(callback);
}
_isAnimated() {
const animate = SelectorEngine.findOne(SELECTOR_DIALOG, this._element);
return !!animate;
}
_triggerBackdropTransition() {
const hideEvent = EventHandler.trigger(this._element, EVENT_HIDE_PREVENTED);
if (hideEvent.defaultPrevented) {
return;
}
const { classList, scrollHeight, style } = this._element;
const isModalOverflowing =
scrollHeight > document.documentElement.clientHeight;
// return if the following background transition hasn't yet completed
if (
(!isModalOverflowing && style.overflowY === "hidden") ||
classList.contains(this._classes.static)
) {
return;
}
if (!isModalOverflowing) {
style.overflowY = "hidden";
}
classList.add(...this._classes.static.split(" "));
classList.add(...this._classes.staticProperties.split(" "));
const transisitionTime = getTransitionDurationFromElement(this._element);
this._queueCallback(() => {
classList.remove(this._classes.static);
setTimeout(() => {
classList.remove(...this._classes.staticProperties.split(" "));
}, transisitionTime);
if (!isModalOverflowing) {
this._queueCallback(() => {
style.overflowY = "";
}, this._dialog);
}
}, this._dialog);
this._element.focus();
}
_getConfig(config) {
config = {
...Default,
...Manipulator.getDataAttributes(this._element),
...(typeof config === "object" ? config : {}),
};
typeCheckConfig(NAME, config, DefaultType);
return config;
}
_getClasses(classes) {
const dataAttributes = Manipulator.getDataClassAttributes(this._element);
classes = {
...DefaultClasses,
...dataAttributes,
...classes,
};
typeCheckConfig(NAME, classes, DefaultClassesType);
return classes;
}
// ----------------------------------------------------------------------
// the following methods are used to handle overflowing modals
// ----------------------------------------------------------------------
_adjustDialog() {
const isModalOverflowing =
this._element.scrollHeight > document.documentElement.clientHeight;
const scrollbarWidth = this._scrollBar.getWidth();
const isBodyOverflowing = scrollbarWidth > 0;
if (
(!isBodyOverflowing && isModalOverflowing && !isRTL()) ||
(isBodyOverflowing && !isModalOverflowing && isRTL())
) {
this._element.style.paddingLeft = `${scrollbarWidth}px`;
}
if (
(isBodyOverflowing && !isModalOverflowing && !isRTL()) ||
(!isBodyOverflowing && isModalOverflowing && isRTL())
) {
this._element.style.paddingRight = `${scrollbarWidth}px`;
}
}
_resetAdjustments() {
this._element.style.paddingLeft = "";
this._element.style.paddingRight = "";
}
// Static
static jQueryInterface(config, relatedTarget) {
return this.each(function () {
const data = Modal.getOrCreateInstance(this, config);
if (typeof config !== "string") {
return;
}
if (typeof data[config] === "undefined") {
throw new TypeError(`No method named "${config}"`);
}
data[config](relatedTarget);
});
}
}
export default Modal;
================================================
FILE: src/js/free/components/offcanvas.js
================================================
import { typeCheckConfig } from "../../util/index";
import ScrollBarHelper from "../../util/scrollbar";
import EventHandler from "../../dom/event-handler";
import BaseComponent from "../../base-component";
import SelectorEngine from "../../dom/selector-engine";
import Manipulator from "../../dom/manipulator";
import Backdrop from "../../util/backdrop";
import FocusTrap from "../../util/focusTrap";
import { enableDismissTrigger } from "../../util/component-functions";
import { TAB } from "../../util/keycodes";
/*
------------------------------------------------------------------------
Constants
------------------------------------------------------------------------
*/
const NAME = "offcanvas";
const DATA_KEY = "twe.offcanvas";
const EVENT_KEY = `.${DATA_KEY}`;
const DATA_API_KEY = ".data-api";
const EVENT_LOAD_DATA_API = `load${EVENT_KEY}${DATA_API_KEY}`;
const ESCAPE_KEY = "Escape";
const Default = {
backdrop: true,
keyboard: true,
scroll: false,
};
const DefaultType = {
backdrop: "boolean",
keyboard: "boolean",
scroll: "boolean",
};
const CLASS_NAME_SHOW = "show";
const OPEN_SELECTOR = "[data-twe-offcanvas-init][data-twe-offcanvas-show]";
const EVENT_SHOW = `show${EVENT_KEY}`;
const EVENT_SHOWN = `shown${EVENT_KEY}`;
const EVENT_HIDE = `hide${EVENT_KEY}`;
const EVENT_HIDDEN = `hidden${EVENT_KEY}`;
const EVENT_KEYDOWN_DISMISS = `keydown.dismiss${EVENT_KEY}`;
/*
------------------------------------------------------------------------
Class Definition
------------------------------------------------------------------------
*/
class Offcanvas extends BaseComponent {
constructor(element, config) {
super(element);
this._config = this._getConfig(config);
this._isShown = false;
this._backdrop = this._initializeBackDrop();
this._focustrap = this._initializeFocusTrap();
this._addEventListeners();
this._didInit = false;
this._init();
}
// Getters
static get NAME() {
return NAME;
}
static get Default() {
return Default;
}
// Public
toggle(relatedTarget) {
return this._isShown ? this.hide() : this.show(relatedTarget);
}
show(relatedTarget) {
if (this._isShown) {
return;
}
const showEvent = EventHandler.trigger(this._element, EVENT_SHOW, {
relatedTarget,
});
if (showEvent.defaultPrevented) {
return;
}
this._isShown = true;
this._element.style.visibility = "visible";
this._backdrop.show();
if (!this._config.scroll) {
new ScrollBarHelper().hide();
}
this._element.removeAttribute("aria-hidden");
this._element.setAttribute("aria-modal", true);
this._element.setAttribute("role", "dialog");
this._element.setAttribute(`data-twe-offcanvas-${CLASS_NAME_SHOW}`, "");
const completeCallBack = () => {
if (!this._config.scroll) {
this._focustrap.trap();
}
EventHandler.trigger(this._element, EVENT_SHOWN, { relatedTarget });
};
this._queueCallback(completeCallBack, this._element, true);
}
hide() {
if (!this._isShown) {
return;
}
const hideEvent = EventHandler.trigger(this._element, EVENT_HIDE);
if (hideEvent.defaultPrevented) {
return;
}
this._focustrap.disable();
this._element.blur();
this._isShown = false;
this._element.removeAttribute(`data-twe-offcanvas-${CLASS_NAME_SHOW}`);
this._backdrop.hide();
const completeCallback = () => {
this._element.setAttribute("aria-hidden", true);
this._element.removeAttribute("aria-modal");
this._element.removeAttribute("role");
this._element.style.visibility = "hidden";
if (!this._config.scroll) {
new ScrollBarHelper().reset();
}
EventHandler.trigger(this._element, EVENT_HIDDEN);
};
this._queueCallback(completeCallback, this._element, true);
}
dispose() {
this._backdrop.dispose();
this._focustrap.disable();
super.dispose();
}
// Private
_init() {
if (this._didInit) {
return;
}
EventHandler.on(window, EVENT_LOAD_DATA_API, () =>
SelectorEngine.find(OPEN_SELECTOR).forEach((el) =>
Offcanvas.getOrCreateInstance(el).show()
)
);
this._didInit = true;
enableDismissTrigger(Offcanvas);
}
_getConfig(config) {
config = {
...Default,
...Manipulator.getDataAttributes(this._element),
...(typeof config === "object" ? config : {}),
};
typeCheckConfig(NAME, config, DefaultType);
return config;
}
_initializeBackDrop() {
return new Backdrop({
isVisible: this._config.backdrop,
isAnimated: true,
rootElement: this._element.parentNode,
clickCallback: () => this.hide(),
});
}
_initializeFocusTrap() {
return new FocusTrap(this._element, {
event: "keydown",
condition: (e) => e.keyCode === TAB,
onlyVisible: true,
});
}
_addEventListeners() {
EventHandler.on(this._element, EVENT_KEYDOWN_DISMISS, (event) => {
if (this._config.keyboard && event.key === ESCAPE_KEY) {
this.hide();
}
});
}
// Static
static jQueryInterface(config) {
return this.each(function () {
const data = Offcanvas.getOrCreateInstance(this, config);
if (typeof config !== "string") {
return;
}
if (
data[config] === undefined ||
config.startsWith("_") ||
config === "constructor"
) {
throw new TypeError(`No method named "${config}"`);
}
data[config](this);
});
}
}
export default Offcanvas;
================================================
FILE: src/js/free/components/popover.js
================================================
import Tooltip from "./tooltip";
/*
------------------------------------------------------------------------
Constants
------------------------------------------------------------------------
*/
const NAME = "popover";
const DATA_KEY = "twe.popover";
const EVENT_KEY = `.${DATA_KEY}`;
const CLASS_PREFIX = "te-popover";
const Default = {
...Tooltip.Default,
placement: "right",
offset: [0, 8],
trigger: "click",
content: "",
template: `
<div class="opacity-0 transition-opacity duration-150 ease-in-out absolute top-0 left-0 z-[1070] block max-w-[267px] break-words bg-white bg-clip-padding border border-neutral-100 rounded-lg shadow-2 text-sm not-italic font-normal text-left no-underline underline-offset-auto normal-case leading-6 tracking-normal break-normal whitespace-normal dark:border-white/10 dark:bg-surface-dark dark:text-white data-[popper-reference-hidden]:hidden" role="tooltip">
<h3 data-twe-popover-header-ref class="py-2 px-4 mb-0 border-b-2 border-neutral-100 rounded-t-lg font-medium empty:hidden dark:border-white/10"></h3>
<div data-twe-popover-body-ref class="p-4 text-surface dark:text-white"></div>
</div>
`,
};
const DefaultType = {
...Tooltip.DefaultType,
content: "(string|element|function)",
};
const Event = {
HIDE: `hide${EVENT_KEY}`,
HIDDEN: `hidden${EVENT_KEY}`,
SHOW: `show${EVENT_KEY}`,
SHOWN: `shown${EVENT_KEY}`,
INSERTED: `inserted${EVENT_KEY}`,
CLICK: `click${EVENT_KEY}`,
FOCUSIN: `focusin${EVENT_KEY}`,
FOCUSOUT: `focusout${EVENT_KEY}`,
MOUSEENTER: `mouseenter${EVENT_KEY}`,
MOUSELEAVE: `mouseleave${EVENT_KEY}`,
};
const SELECTOR_TITLE = "[data-twe-popover-header-ref]";
const SELECTOR_CONTENT = "[data-twe-popover-body-ref]";
/*
------------------------------------------------------------------------
Class Definition
------------------------------------------------------------------------
*/
class Popover extends Tooltip {
// Getters
static get Default() {
return Default;
}
static get NAME() {
return NAME;
}
static get Event() {
return Event;
}
static get DefaultType() {
return DefaultType;
}
// Overrides
isWithContent() {
return this.getTitle() || this._getContent();
}
setContent(tip) {
this._sanitizeAndSetContent(tip, this.getTitle(), SELECTOR_TITLE);
this._sanitizeAndSetContent(tip, this._getContent(), SELECTOR_CONTENT);
}
// Private
_getContent() {
return this._resolvePossibleFunction(this._config.content);
}
_getBasicClassPrefix() {
return CLASS_PREFIX;
}
// Static
static jQueryInterface(config) {
return this.each(function () {
const data = Popover.getOrCreateInstance(this, config);
if (typeof config === "string") {
if (typeof data[config] === "undefined") {
throw new TypeError(`No method named "${config}"`);
}
data[config]();
}
});
}
}
export default Popover;
================================================
FILE: src/js/free/components/tooltip.js
================================================
import * as Popper from "@popperjs/core";
import {
findShadowRoot,
getElement,
getUID,
isElement,
isRTL,
noop,
typeCheckConfig,
} from "../../util/index";
import { DefaultAllowlist, sanitizeHtml } from "../../util/sanitizer";
import Data from "../../dom/data";
import EventHandler from "../../dom/event-handler";
import Manipulator from "../../dom/manipulator";
import SelectorEngine from "../../dom/selector-engine";
import BaseComponent from "../../base-component";
/*
------------------------------------------------------------------------
Constants
------------------------------------------------------------------------
*/
const NAME = "tooltip";
const DATA_KEY = "twe.tooltip";
const EVENT_KEY = `.${DATA_KEY}`;
const CLASS_PREFIX = "te-tooltip";
const DISALLOWED_ATTRIBUTES = new Set(["sanitize", "allowList", "sanitizeFn"]);
const DefaultType = {
animation: "boolean",
template: "string",
title: "(string|element|function)",
trigger: "string",
delay: "(number|object)",
html: "boolean",
selector: "(string|boolean)",
placement: "(string|function)",
offset: "(array|string|function)",
container: "(string|element|boolean)",
fallbackPlacements: "array",
boundary: "(string|element)",
customClass: "(string|function)",
sanitize: "boolean",
sanitizeFn: "(null|function)",
allowList: "object",
popperConfig: "(null|object|function)",
};
const AttachmentMap = {
AUTO: "auto",
TOP: "top",
RIGHT: isRTL() ? "left" : "right",
BOTTOM: "bottom",
LEFT: isRTL() ? "right" : "left",
};
const Default = {
animation: true,
template: `
<div class="opacity-0 transition-opacity duration-300 ease-in-out absolute z-[1080] block m-0 text-sm not-italic font-normal text-left no-underline underline-offset-auto normal-case leading-6 tracking-normal break-normal whitespace-normal" role="tooltip">
<div data-twe-tooltip-inner-ref class="max-w-[200px] text-sm py-1.5 px-4 text-white text-center bg-[#6d6d6d] rounded"></div>
</div>
`,
trigger: "hover focus",
title: "",
delay: 0,
html: false,
selector: false,
placement: "top",
offset: [0, 0],
container: false,
fallbackPlacements: ["top", "right", "bottom", "left"],
boundary: "clippingParents",
customClass: "",
sanitize: true,
sanitizeFn: null,
allowList: DefaultAllowlist,
popperConfig: { hide: true },
};
const Event = {
HIDE: `hide${EVENT_KEY}`,
HIDDEN: `hidden${EVENT_KEY}`,
SHOW: `show${EVENT_KEY}`,
SHOWN: `shown${EVENT_KEY}`,
INSERTED: `inserted${EVENT_KEY}`,
CLICK: `click${EVENT_KEY}`,
FOCUSIN: `focusin${EVENT_KEY}`,
FOCUSOUT: `focusout${EVENT_KEY}`,
MOUSEENTER: `mouseenter${EVENT_KEY}`,
MOUSELEAVE: `mouseleave${EVENT_KEY}`,
};
const CLASS_NAME_FADE = "fade";
const CLASS_NAME_MODAL = "modal";
const CLASS_NAME_SHOW = "show";
const HOVER_STATE_SHOW = "show";
const HOVER_STATE_OUT = "out";
const SELECTOR_TOOLTIP_INNER = "[data-twe-tooltip-inner-ref]";
const SELECTOR_MODAL = `.${CLASS_NAME_MODAL}`;
const EVENT_MODAL_HIDE = "hide.twe.modal";
const TRIGGER_HOVER = "hover";
const TRIGGER_FOCUS = "focus";
const TRIGGER_CLICK = "click";
const TRIGGER_MANUAL = "manual";
/*
------------------------------------------------------------------------
Class Definition
------------------------------------------------------------------------
*/
class Tooltip extends BaseComponent {
constructor(element, config) {
if (typeof Popper === "undefined") {
throw new TypeError(
"Bootstrap's tooltips require Popper (https://popper.js.org)"
);
}
super(element);
// private
this._isEnabled = true;
this._timeout = 0;
this._hoverState = "";
this._activeTrigger = {};
this._popper = null;
// Protected
this._config = this._getConfig(config);
this.tip = null;
this._setListeners();
}
// Getters
static get Default() {
return Default;
}
static get NAME() {
return NAME;
}
static get Event() {
return Event;
}
static get DefaultType() {
return DefaultType;
}
// Public
enable() {
this._isEnabled = true;
}
disable() {
this._isEnabled = false;
}
toggleEnabled() {
this._isEnabled = !this._isEnabled;
}
toggle(event) {
if (!this._isEnabled) {
return;
}
if (event) {
const context = this._initializeOnDelegatedTarget(event);
context._activeTrigger.click = !context._activeTrigger.click;
if (context._isWithActiveTrigger()) {
context._enter(null, context);
} else {
context._leave(null, context);
}
} else {
if (this.getTipElement().classList.contains(CLASS_NAME_SHOW)) {
this._leave(null, this);
return;
}
this._enter(null, this);
}
}
dispose() {
clearTimeout(this._timeout);
EventHandler.off(
this._element.closest(SELECTOR_MODAL),
EVENT_MODAL_HIDE,
this._hideModalHandler
);
if (this.tip) {
this.tip.remove();
}
this._disposePopper();
super.dispose();
}
show() {
if (this._element.style.display === "none") {
throw new Error("Please use show on visible elements");
}
if (!(this.isWithContent() && this._isEnabled)) {
return;
}
const showEvent = EventHandler.trigger(
this._element,
this.constructor.Event.SHOW
);
const shadowRoot = findShadowRoot(this._element);
const isInTheDom =
shadowRoot === null
? this._element.ownerDocument.documentElement.contains(this._element)
: shadowRoot.contains(this._element);
if (showEvent.defaultPrevented || !isInTheDom) {
return;
}
// A trick to recreate a tooltip in case a new title is given by using the NOT documented `data-twe-original-title`
// This will be removed later in favor of a `setContent` method
if (
this.constructor.NAME === "tooltip" &&
this.tip &&
this.getTitle() !==
this.tip.querySelector(SELECTOR_TOOLTIP_INNER).innerHTML
) {
this._disposePopper();
this.tip.remove();
this.tip = null;
}
const tip = this.getTipElement();
const tipId = getUID(this.constructor.NAME);
tip.setAttribute("id", tipId);
this._element.setAttribute("aria-describedby", tipId);
if (this._config.animation) {
setTimeout(() => {
this.tip.classList.add("opacity-100");
this.tip.classList.remove("opacity-0");
}, 100);
}
const placement =
typeof this._config.placement === "function"
? this._config.placement.call(this, tip, this._element)
: this._config.placement;
const attachment = this._getAttachment(placement);
this._addAttachmentClass(attachment);
const { container } = this._config;
Data.setData(tip, this.constructor.DATA_KEY, this);
if (!this._element.ownerDocument.documentElement.contains(this.tip)) {
container.append(tip);
EventHandler.trigger(this._element, this.constructor.Event.INSERTED);
}
if (this._popper) {
this._popper.update();
} else {
this._popper = Popper.createPopper(
this._element,
tip,
this._getPopperConfig(attachment)
);
}
const notPopover = tip.getAttribute("id").includes("tooltip");
if (notPopover) {
switch (placement) {
case "bottom":
tip.classList.add("py-[0.4rem]");
break;
case "left":
tip.classList.add("px-[0.4rem]");
break;
case "right":
tip.classList.add("px-[0.4rem]");
break;
default:
tip.classList.add("py-[0.4rem]");
break;
}
}
const customClass = this._resolvePossibleFunction(this._config.customClass);
if (customClass) {
tip.classList.add(...customClass.split(" "));
}
// If this is a touch-enabled device we add extra
// empty mouseover listeners to the body's immediate children;
// only needed because of broken event delegation on iOS
// https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html
if ("ontouchstart" in document.documentElement) {
[].concat(...document.body.children).forEach((element) => {
EventHandler.on(element, "mouseover", noop);
});
}
const complete = () => {
const prevHoverState = this._hoverState;
this._hoverState = null;
EventHandler.trigger(this._element, this.constructor.Event.SHOWN);
if (prevHoverState === HOVER_STATE_OUT) {
this._leave(null, this);
}
};
const isAnimated = this.tip.classList.contains("transition-opacity");
this._queueCallback(complete, this.tip, isAnimated);
}
hide() {
if (!this._popper) {
return;
}
const tip = this.getTipElement();
const complete = () => {
if (this._isWithActiveTrigger()) {
return;
}
if (this._hoverState !== HOVER_STATE_SHOW) {
tip.remove();
}
this._cleanTipClass();
this._element.removeAttribute("aria-describedby");
EventHandler.trigger(this._element, this.constructor.Event.HIDDEN);
this._disposePopper();
};
const hideEvent = EventHandler.trigger(
this._element,
this.constructor.Event.HIDE
);
if (hideEvent.defaultPrevented) {
return;
}
tip.classList.add("opacity-0");
tip.classList.remove("opacity-100");
// If this is a touch-enabled device we remove the extra
// empty mouseover listeners we added for iOS support
if ("ontouchstart" in document.documentElement) {
[]
.concat(...document.body.children)
.forEach((element) => EventHandler.off(element, "mouseover", noop));
}
this._activeTrigger[TRIGGER_CLICK] = false;
this._activeTrigger[TRIGGER_FOCUS] = false;
this._activeTrigger[TRIGGER_HOVER] = false;
const isAnimated = this.tip.classList.contains("opacity-0");
this._queueCallback(complete, this.tip, isAnimated);
this._hoverState = "";
}
update() {
if (this._popper !== null) {
this._popper.update();
}
}
// Protected
isWithContent() {
return Boolean(this.getTitle());
}
getTipElement() {
if (this.tip) {
return this.tip;
}
const element = document.createElement("div");
element.innerHTML = this._config.template;
const tip = element.children[0];
this.setContent(tip);
tip.classList.remove(CLASS_NAME_FADE, CLASS_NAME_SHOW);
this.tip = tip;
return this.tip;
}
setContent(tip) {
this._sanitizeAndSetContent(tip, this.getTitle(), SELECTOR_TOOLTIP_INNER);
}
_sanitizeAndSetContent(template, content, selector) {
const templateElement = SelectorEngine.findOne(selector, template);
if (!content && templateElement) {
templateElement.remove();
return;
}
// we use append for html objects to maintain js events
this.setElementContent(templateElement, content);
}
setElementContent(element, content) {
if (element === null) {
return;
}
if (isElement(content)) {
content = getElement(content);
// content is a DOM node or a jQuery
if (this._config.html) {
if (content.parentNode !== element) {
element.innerHTML = "";
element.append(content);
}
} else {
element.textContent = content.textContent;
}
return;
}
if (this._config.html) {
if (this._config.sanitize) {
content = sanitizeHtml(
content,
this._config.allowList,
this._config.sanitizeFn
);
}
element.innerHTML = content;
} else {
element.textContent = content;
}
}
getTitle() {
const title =
this._element.getAttribute("data-twe-original-title") ||
this._config.title;
return this._resolvePossibleFunction(title);
}
updateAttachment(attachment) {
if (attachment === "right") {
return "end";
}
if (attachment === "left") {
return "start";
}
return attachment;
}
// Private
_initializeOnDelegatedTarget(event, context) {
return (
context ||
this.constructor.getOrCreateInstance(
event.delegateTarget,
this._getDelegateConfig()
)
);
}
_getOffset() {
const { offset } = this._config;
if (typeof offset === "string") {
return offset.split(",").map((val) => Number.parseInt(val, 10));
}
if (typeof offset === "function") {
return (popperData) => offset(popperData, this._element);
}
return offset;
}
_resolvePossibleFunction(content) {
return typeof content === "function"
? content.call(this._element)
: content;
}
_getPopperConfig(attachment) {
const defaultBsPopperConfig = {
placement: attachment,
modifiers: [
{
name: "flip",
options: {
fallbackPlacements: this._config.fallbackPlacements,
},
},
{
name: "offset",
options: {
offset: this._getOffset(),
},
},
{
name: "preventOverflow",
options: {
boundary: this._config.boundary,
},
},
{
name: "arrow",
options: {
element: `.${this.constructor.NAME}-arrow`,
},
},
{
name: "onChange",
enabled: true,
phase: "afterWrite",
fn: (data) => this._handlePopperPlacementChange(data),
},
],
onFirstUpdate: (data) => {
if (data.options.placement !== data.placement) {
this._handlePopperPlacementChange(data);
}
},
};
return {
...defaultBsPopperConfig,
...(typeof this._config.popperConfig === "function"
? this._config.popperConfig(defaultBsPopperConfig)
: this._config.popperConfig),
};
}
_addAttachmentClass(attachment) {
this.getTipElement().classList.add(
`${this._getBasicClassPrefix()}-${this.updateAttachment(attachment)}`
);
}
_getAttachment(placement) {
return AttachmentMap[placement.toUpperCase()];
}
_setListeners() {
const triggers = this._config.trigger.split(" ");
triggers.forEach((trigger) => {
if (trigger === "click") {
EventHandler.on(
this._element,
this.constructor.Event.CLICK,
this._config.selector,
(event) => this.toggle(event)
);
} else if (trigger !== TRIGGER_MANUAL) {
const eventIn =
trigger === TRIGGER_HOVER
? this.constructor.Event.MOUSEENTER
: this.constructor.Event.FOCUSIN;
const eventOut =
trigger === TRIGGER_HOVER
? this.constructor.Event.MOUSELEAVE
: this.constructor.Event.FOCUSOUT;
EventHandler.on(
this._element,
eventIn,
this._config.selector,
(event) => this._enter(event)
);
EventHandler.on(
this._element,
eventOut,
this._config.selector,
(event) => this._leave(event)
);
}
});
this._hideModalHandler = () => {
if (this._element) {
this.hide();
}
};
EventHandler.on(
this._element.closest(SELECTOR_MODAL),
EVENT_MODAL_HIDE,
this._hideModalHandler
);
if (this._config.selector) {
this._config = {
...this._config,
trigger: "manual",
selector: "",
};
} else {
this._fixTitle();
}
}
_fixTitle() {
const title = this._element.getAttribute("title");
const originalTitleType = typeof this._element.getAttribute(
"data-twe-original-title"
);
if (title || originalTitleType !== "string") {
this._element.setAttribute("data-twe-original-title", title || "");
if (
title &&
!this._element.getAttribute("aria-label") &&
!this._element.textContent
) {
this._element.setAttribute("aria-label", title);
}
this._element.setAttribute("title", "");
}
}
_enter(event, context) {
context = this._initializeOnDelegatedTarget(event, context);
if (event) {
context._activeTrigger[
event.type === "focusin" ? TRIGGER_FOCUS : TRIGGER_HOVER
] = true;
}
if (
context.getTipElement().classList.contains(CLASS_NAME_SHOW) ||
context._hoverState === HOVER_STATE_SHOW
) {
context._hoverState = HOVER_STATE_SHOW;
return;
}
clearTimeout(context._timeout);
context._hoverState = HOVER_STATE_SHOW;
if (!context._config.delay || !context._config.delay.show) {
context.show();
return;
}
context._timeout = setTimeout(() => {
if (context._hoverState === HOVER_STATE_SHOW) {
context.show();
}
}, context._config.delay.show);
}
_leave(event, context) {
context = this._initializeOnDelegatedTarget(event, context);
if (event) {
context._activeTrigger[
event.type === "focusout" ? TRIGGER_FOCUS : TRIGGER_HOVER
] = context._element.contains(event.relatedTarget);
}
if (context._isWithActiveTrigger()) {
return;
}
clearTimeout(context._timeout);
context._hoverState = HOVER_STATE_OUT;
if (!context._config.delay || !context._config.delay.hide) {
context.hide();
return;
}
context._timeout = setTimeout(() => {
if (context._hoverState === HOVER_STATE_OUT) {
context.hide();
}
}, context._config.delay.hide);
}
_isWithActiveTrigger() {
for (const trigger in this._activeTrigger) {
if (this._activeTrigger[trigger]) {
return true;
}
}
return false;
}
_getConfig(config) {
const dataAttributes = Manipulator.getDataAttributes(this._element);
Object.keys(dataAttributes).forEach((dataAttr) => {
if (DISALLOWED_ATTRIBUTES.has(dataAttr)) {
delete dataAttributes[dataAttr];
}
});
config = {
...this.constructor.Default,
...dataAttributes,
...(typeof config === "object" && config ? config : {}),
};
config.container =
config.container === false ? document.body : getElement(config.container);
if (typeof config.delay === "number") {
config.delay = {
show: config.delay,
hide: config.delay,
};
}
if (typeof config.title === "number") {
config.title = config.title.toString();
}
if (typeof config.content === "number") {
config.content = config.content.toString();
}
typeCheckConfig(NAME, config, this.constructor.DefaultType);
if (config.sanitize) {
config.template = sanitizeHtml(
config.template,
config.allowList,
config.sanitizeFn
);
}
return config;
}
_getDelegateConfig() {
const config = {};
for (const key in this._config) {
if (this.constructor.Default[key] !== this._config[key]) {
config[key] = this._config[key];
}
}
// In the future can be replaced with:
// const keysWithDifferentValues = Object.entries(this._config).filter(entry => this.constructor.Default[entry[0]] !== this._config[entry[0]])
// `Object.fromEntries(keysWithDifferentValues)`
return config;
}
_cleanTipClass() {
const tip = this.getTipElement();
const basicClassPrefixRegex = new RegExp(
`(^|\\s)${this._getBasicClassPrefix()}\\S+`,
"g"
);
const tabClass = tip.getAttribute("class").match(basicClassPrefixRegex);
if (tabClass !== null && tabClass.length > 0) {
tabClass
.map((token) => token.trim())
.forEach((tClass) => tip.classList.remove(tClass));
}
}
_getBasicClassPrefix() {
return CLASS_PREFIX;
}
_handlePopperPlacementChange(popperData) {
const { state } = popperData;
if (!state) {
return;
}
this.tip = state.elements.popper;
this._cleanTipClass();
this._addAttachmentClass(this._getAttachment(state.placement));
}
_disposePopper() {
if (this._popper) {
this._popper.destroy();
this._popper = null;
}
}
// Static
static jQueryInterface(config) {
return this.each(function () {
const data = Tooltip.getOrCreateInstance(this, config);
if (typeof config === "string") {
if (typeof data[config] === "undefined") {
throw new TypeError(`No method named "${config}"`);
}
data[config]();
}
});
}
}
export default Tooltip;
================================================
FILE: src/js/free/forms/input.js
================================================
import { element, onDOMContentLoaded, typeCheckConfig } from "../../util/index";
import Data from "../../dom/data";
import EventHandler from "../../dom/event-handler";
import Manipulator from "../../dom/manipulator";
import SelectorEngine from "../../dom/selector-engine";
import "detect-autofill";
/*
------------------------------------------------------------------------
Constants
------------------------------------------------------------------------
*/
const NAME = "input";
const DATA_KEY = "twe.input";
const DATA_WRAPPER = "data-twe-input-wrapper-init";
const DATA_NOTCH = "data-twe-input-notch-ref";
const DATA_NOTCH_LEADING = "data-twe-input-notch-leading-ref";
const DATA_NOTCH_MIDDLE = "data-twe-input-notch-middle-ref";
const DATA_NOTCH_TRAILING = "data-twe-input-notch-trailing-ref";
const DATA_HELPER = "data-twe-input-helper-ref";
const DATA_PLACEHOLDER_ACTIVE = "data-twe-input-placeholder-active";
const DATA_ACTIVE = "data-twe-input-state-active";
const DATA_FOCUSED = "data-twe-input-focused";
const DATA_FORM_COUNTER = "data-twe-input-form-counter";
const SELECTOR_OUTLINE_INPUT = `[${DATA_WRAPPER}] input`;
const SELECTOR_OUTLINE_TEXTAREA = `[${DATA_WRAPPER}] textarea`;
const SELECTOR_NOTCH = `[${DATA_NOTCH}]`;
const SELECTOR_NOTCH_LEADING = `[${DATA_NOTCH_LEADING}]`;
const SELECTOR_NOTCH_MIDDLE = `[${DATA_NOTCH_MIDDLE}]`;
const SELECTOR_HELPER = `[${DATA_HELPER}]`;
const Default = {
inputFormWhite: false,
};
const DefaultType = {
inputFormWhite: "(boolean)",
};
export const DefaultClasses = {
notch:
"group flex absolute left-0 top-0 w-full max-w-full h-full text-left pointer-events-none",
notchLeading:
"pointer-events-none border border-solid box-border bg-transparent transition-all duration-200 ease-linear motion-reduce:transition-none left-0 top-0 h-full w-2 border-e-0 rounded-s-[0.25rem] group-data-[twe-input-focused]:border-e-0 group-data-[twe-input-state-active]:border-e-0",
notchLeadingNormal:
"border-secondary-500 dark:border-neutral-400 group-data-[twe-input-focused]:shadow-notch-1 group-data-[twe-input-focused]:border-primary",
notchLeadingWhite:
"border-neutral-200 group-data-[twe-input-focused]:shadow-notch-1 group-data-[twe-input-focused]:shadow-white group-data-[twe-input-focused]:border-white",
notchMiddle:
"pointer-events-none border border-solid box-border bg-transparent transition-all duration-200 ease-linear motion-reduce:transition-none grow-0 shrink-0 basis-auto w-auto max-w-[calc(100%-1rem)] h-full border-e-0 border-s-0 group-data-[twe-input-focused]:border-x-0 group-data-[twe-input-state-active]:border-x-0 group-data-[twe-input-focused]:border-t group-data-[twe-input-state-active]:border-t group-data-[twe-input-focused]:border-solid group-data-[twe-input-state-active]:border-solid group-data-[twe-input-focused]:border-t-transparent group-data-[twe-input-state-active]:border-t-transparent",
notchMiddleNormal:
"border-secondary-500 dark:border-neutral-400 group-data-[twe-input-focused]:shadow-notch-2 group-data-[twe-input-focused]:border-primary",
notchMiddleWhite:
"border-neutral-200 group-data-[twe-input-focused]:shadow-notch-2 group-data-[twe-input-focused]:shadow-white group-data-[twe-input-focused]:border-white",
notchTrailing:
"pointer-events-none border border-solid box-border bg-transparent transition-all duration-200 ease-linear motion-reduce:transition-none grow h-full border-s-0 rounded-e-[0.25rem] group-data-[twe-input-focused]:border-s-0 group-data-[twe-input-state-active]:border-s-0",
notchTrailingNormal:
"border-secondary-500 dark:border-neutral-400 group-data-[twe-input-focused]:shadow-notch-3 group-data-[twe-input-focused]:border-primary",
notchTrailingWhite:
"border-neutral-200 group-data-[twe-input-focused]:shadow-notch-3 group-data-[twe-input-focused]:shadow-white group-data-[twe-input-focused]:border-white",
counter: "text-right leading-[1.6]",
};
const DefaultClassesType = {
notch: "string",
notchLeading: "string",
notchLeadingNormal: "string",
notchLeadingWhite: "string",
notchMiddle: "string",
notchMiddleNormal: "string",
notchMiddleWhite: "string",
notchTrailing: "string",
notchTrailingNormal: "string",
notchTrailingWhite: "string",
counter: "string",
};
/*
------------------------------------------------------------------------
Class Definition
------------------------------------------------------------------------
*/
class Input {
constructor(element, config, classes) {
this._config = this._getConfig(config, element);
this._element = element;
this._classes = this._getClasses(classes);
this._label = null;
this._labelWidth = 0;
this._labelMarginLeft = 0;
this._notchLeading = null;
this._notchMiddle = null;
this._notchTrailing = null;
this._initiated = false;
this._helper = null;
this._counter = false;
this._counterElement = null;
this._maxLength = 0;
this._leadingIcon = null;
if (this._element) {
Data.setData(element, DATA_KEY, this);
this.init();
}
}
// Getters
static get NAME() {
return NAME;
}
get input() {
const inputElement =
SelectorEngine.findOne("input", this._element) ||
SelectorEngine.findOne("textarea", this._element);
return inputElement;
}
// Public
init() {
if (this._initiated) {
return;
}
this._getLabelData();
this._applyDivs();
this._applyNotch();
this._activate();
this._getHelper();
this._getCounter();
this._getEvents();
this._initiated = true;
}
update() {
this._getLabelData();
this._getNotchData();
this._applyNotch();
this._activate();
this._getHelper();
this._getCounter();
}
forceActive() {
this.input.setAttribute(DATA_ACTIVE, "");
SelectorEngine.findOne(SELECTOR_NOTCH, this.input.parentNode).setAttribute(
DATA_ACTIVE,
""
);
}
forceInactive() {
this.input.removeAttribute(DATA_ACTIVE);
SelectorEngine.findOne(
SELECTOR_NOTCH,
this.input.parentNode
).removeAttribute(DATA_ACTIVE);
}
dispose() {
this._removeBorder();
Data.removeData(this._element, DATA_KEY);
this._element = null;
}
// Private
_getConfig(config, element) {
config = {
...Default,
...Manipulator.getDataAttributes(element),
...(typeof config === "object" ? config : {}),
};
typeCheckConfig(NAME, config, DefaultType);
return config;
}
_getClasses(classes) {
const dataAttributes = Manipulator.getDataClassAttributes(this._element);
classes = {
...DefaultClasses,
...dataAttributes,
...classes,
};
typeCheckConfig(NAME, classes, DefaultClassesType);
return classes;
}
_getLabelData() {
this._label = SelectorEngine.findOne("label", this._element);
if (this._label === null) {
this._showPlaceholder();
} else {
this._getLabelWidth();
this._getLabelPositionInInputGroup();
this._toggleDefaultDatePlaceholder();
}
}
_getHelper() {
this._helper = SelectorEngine.findOne(SELECTOR_HELPER, this._element);
}
_getCounter() {
this._counter = Manipulator.getDataAttribute(
this.input,
"inputShowcounter"
);
if (this._counter) {
this._maxLength = this.input.maxLength;
this._showCounter();
}
}
_getEvents() {
EventHandler.on(
this._element,
"focus",
"input",
Input.activate(new Input())
);
EventHandler.on(
this._element,
"input",
"input",
Input.activate(new Input())
);
EventHandler.on(
this._element,
"blur",
"input",
Input.deactivate(new Input())
);
EventHandler.on(
this._element,
"focus",
"textarea",
Input.activate(new Input())
);
EventHandler.on(
this._element,
"input",
"textarea",
Input.activate(new Input())
);
EventHandler.on(
this._element,
"blur",
"textarea",
Input.deactivate(new Input())
);
EventHandler.on(window, "shown.twe.modal", (e) => {
SelectorEngine.find(SELECTOR_OUTLINE_INPUT, e.target).forEach(
(el
gitextract_jks9prp9/
├── .clabot
├── .github/
│ └── ISSUE_TEMPLATE/
│ └── bug_report.md
├── .gitignore
├── CODE_OF_CONDUCT.md
├── LICENSE
├── README.md
├── README.txt
├── index.html
├── package.json
├── plugin.cjs
├── src/
│ ├── css/
│ │ └── tailwind.scss
│ └── js/
│ ├── autoinit/
│ │ ├── Register.js
│ │ ├── callbacks/
│ │ │ └── free.js
│ │ ├── index.free.js
│ │ ├── index.js
│ │ ├── initSelectors/
│ │ │ └── free.js
│ │ └── jqueryInit.js
│ ├── base-component.js
│ ├── dom/
│ │ ├── data.js
│ │ ├── event-handler.js
│ │ ├── manipulator.js
│ │ └── selector-engine.js
│ ├── free/
│ │ ├── components/
│ │ │ ├── button.js
│ │ │ ├── carousel.js
│ │ │ ├── collapse.js
│ │ │ ├── dropdown.js
│ │ │ ├── modal.js
│ │ │ ├── offcanvas.js
│ │ │ ├── popover.js
│ │ │ └── tooltip.js
│ │ ├── forms/
│ │ │ └── input.js
│ │ ├── methods/
│ │ │ └── ripple.js
│ │ └── navigation/
│ │ ├── scrollspy.js
│ │ └── tab.js
│ ├── tw-elements.free.es.js
│ ├── tw-elements.free.umd.js
│ └── util/
│ ├── add-perfect-scrollbar-styles.js
│ ├── backdrop.js
│ ├── component-functions.js
│ ├── focusTrap.js
│ ├── getStyle.js
│ ├── index.js
│ ├── keycodes.js
│ ├── sanitizer.js
│ ├── scrollbar.js
│ ├── stack.js
│ └── touch/
│ ├── index.js
│ ├── swipe.js
│ └── touchUtil.js
└── types/
└── tw-elements.d.ts
SYMBOL INDEX (614 symbols across 29 files)
FILE: src/js/autoinit/Register.js
class InitRegister (line 1) | class InitRegister {
method constructor (line 2) | constructor() {
method initialized (line 6) | get initialized() {
method isInited (line 10) | isInited(componentName) {
method add (line 14) | add(componentName) {
FILE: src/js/autoinit/index.js
class InitTWE (line 61) | class InitTWE {
method constructor (line 62) | constructor(defaultInitSelectors) {
FILE: src/js/base-component.js
constant VERSION (line 11) | const VERSION = "5.1.3";
class BaseComponent (line 13) | class BaseComponent {
method constructor (line 14) | constructor(element) {
method dispose (line 25) | dispose() {
method _queueCallback (line 34) | _queueCallback(callback, element, isAnimated = true) {
method getInstance (line 40) | static getInstance(element) {
method getOrCreateInstance (line 44) | static getOrCreateInstance(element, config = {}) {
method VERSION (line 51) | static get VERSION() {
method NAME (line 55) | static get NAME() {
method DATA_KEY (line 61) | static get DATA_KEY() {
method EVENT_KEY (line 65) | static get EVENT_KEY() {
FILE: src/js/dom/data.js
method set (line 11) | set(element, key, data) {
method get (line 22) | get(element, key) {
method delete (line 34) | delete(element, key) {
method setData (line 49) | setData(instance, key, data) {
method getData (line 52) | getData(instance, key) {
method removeData (line 55) | removeData(instance, key) {
FILE: src/js/dom/event-handler.js
function getUidEvent (line 74) | function getUidEvent(element, uid) {
function getEvent (line 78) | function getEvent(element) {
function bootstrapHandler (line 87) | function bootstrapHandler(element, fn) {
function bootstrapDelegationHandler (line 99) | function bootstrapDelegationHandler(element, selector, fn) {
function findHandler (line 126) | function findHandler(events, handler, delegationSelector = null) {
function normalizeParams (line 143) | function normalizeParams(originalTypeEvent, handler, delegationFn) {
function addHandler (line 157) | function addHandler(element, originalTypeEvent, handler, delegationFn, o...
function removeHandler (line 225) | function removeHandler(
function removeNamespacedHandlers (line 242) | function removeNamespacedHandlers(element, events, typeEvent, namespace) {
function getTypeEvent (line 260) | function getTypeEvent(event) {
method on (line 267) | on(element, event, handler, delegationFn) {
method one (line 271) | one(element, event, handler, delegationFn) {
method off (line 275) | off(element, originalTypeEvent, handler, delegationFn) {
method trigger (line 334) | trigger(element, event, args) {
method on (line 397) | on(element, eventsName, handler, delegationFn) {
method off (line 404) | off(element, originalTypeEvent, handler, delegationFn) {
FILE: src/js/dom/manipulator.js
function normalizeData (line 1) | function normalizeData(val) {
function normalizeDataKey (line 21) | function normalizeDataKey(key) {
method setDataAttribute (line 26) | setDataAttribute(element, key, value) {
method removeDataAttribute (line 30) | removeDataAttribute(element, key) {
method getDataAttributes (line 34) | getDataAttributes(element) {
method getDataClassAttributes (line 57) | getDataClassAttributes(element) {
method getDataAttribute (line 78) | getDataAttribute(element, key) {
method offset (line 84) | offset(element) {
method position (line 93) | position(element) {
method style (line 100) | style(element, style) {
method toggleClass (line 104) | toggleClass(element, classNameOrList) {
method addClass (line 118) | addClass(element, classNameOrList) {
method addStyle (line 126) | addStyle(element, style) {
method removeClass (line 132) | removeClass(element, classNameOrList) {
method hasClass (line 140) | hasClass(element, className) {
method maxOffset (line 144) | maxOffset(element) {
function _classNameOrListToArray (line 166) | function _classNameOrListToArray(classNameOrList) {
FILE: src/js/dom/selector-engine.js
constant NODE_TEXT (line 9) | const NODE_TEXT = 3;
method closest (line 12) | closest(element, selector) {
method matches (line 16) | matches(element, selector) {
method find (line 20) | find(selector, element = document.documentElement) {
method findOne (line 26) | findOne(selector, element = document.documentElement) {
method children (line 30) | children(element, selector) {
method parents (line 36) | parents(element, selector) {
method prev (line 56) | prev(element, selector) {
method next (line 70) | next(element, selector) {
method focusableChildren (line 84) | focusableChildren(element) {
FILE: src/js/free/components/button.js
constant NAME (line 9) | const NAME = "button";
constant CLASS_NAME_ACTIVE (line 11) | const CLASS_NAME_ACTIVE = "active";
class Button (line 19) | class Button extends BaseComponent {
method NAME (line 22) | static get NAME() {
method toggle (line 28) | toggle() {
method jQueryInterface (line 38) | static jQueryInterface(config) {
FILE: src/js/free/components/carousel.js
constant NAME (line 21) | const NAME = "carousel";
constant DATA_KEY (line 22) | const DATA_KEY = "twe.carousel";
constant EVENT_KEY (line 23) | const EVENT_KEY = `.${DATA_KEY}`;
constant DATA_API_KEY (line 24) | const DATA_API_KEY = ".data-api";
constant ARROW_LEFT_KEY (line 26) | const ARROW_LEFT_KEY = "ArrowLeft";
constant ARROW_RIGHT_KEY (line 27) | const ARROW_RIGHT_KEY = "ArrowRight";
constant TOUCHEVENT_COMPAT_WAIT (line 28) | const TOUCHEVENT_COMPAT_WAIT = 500;
constant SWIPE_THRESHOLD (line 29) | const SWIPE_THRESHOLD = 40;
constant ORDER_NEXT (line 69) | const ORDER_NEXT = "next";
constant ORDER_PREV (line 70) | const ORDER_PREV = "prev";
constant DIRECTION_LEFT (line 71) | const DIRECTION_LEFT = "left";
constant DIRECTION_RIGHT (line 72) | const DIRECTION_RIGHT = "right";
constant KEY_TO_DIRECTION (line 74) | const KEY_TO_DIRECTION = {
constant EVENT_SLIDE (line 79) | const EVENT_SLIDE = `slide${EVENT_KEY}`;
constant EVENT_SLID (line 80) | const EVENT_SLID = `slid${EVENT_KEY}`;
constant EVENT_KEYDOWN (line 81) | const EVENT_KEYDOWN = `keydown${EVENT_KEY}`;
constant EVENT_MOUSEENTER (line 82) | const EVENT_MOUSEENTER = `mouseenter${EVENT_KEY}`;
constant EVENT_MOUSELEAVE (line 83) | const EVENT_MOUSELEAVE = `mouseleave${EVENT_KEY}`;
constant EVENT_TOUCHSTART (line 84) | const EVENT_TOUCHSTART = `touchstart${EVENT_KEY}`;
constant EVENT_TOUCHMOVE (line 85) | const EVENT_TOUCHMOVE = `touchmove${EVENT_KEY}`;
constant EVENT_TOUCHEND (line 86) | const EVENT_TOUCHEND = `touchend${EVENT_KEY}`;
constant EVENT_POINTERDOWN (line 87) | const EVENT_POINTERDOWN = `pointerdown${EVENT_KEY}`;
constant EVENT_POINTERUP (line 88) | const EVENT_POINTERUP = `pointerup${EVENT_KEY}`;
constant EVENT_DRAG_START (line 89) | const EVENT_DRAG_START = `dragstart${EVENT_KEY}`;
constant EVENT_LOAD_DATA_API (line 90) | const EVENT_LOAD_DATA_API = `load${EVENT_KEY}${DATA_API_KEY}`;
constant EVENT_CLICK_DATA_API (line 91) | const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`;
constant ATTR_ACTIVE (line 93) | const ATTR_ACTIVE = "data-twe-carousel-active";
constant ATTR_END (line 94) | const ATTR_END = "data-twe-carousel-item-end";
constant ATTR_START (line 95) | const ATTR_START = "data-twe-carousel-item-start";
constant ATTR_NEXT (line 96) | const ATTR_NEXT = "data-twe-carousel-item-next";
constant ATTR_PREV (line 97) | const ATTR_PREV = "data-twe-carousel-item-prev";
constant ATTR_POINTER_EVENT (line 98) | const ATTR_POINTER_EVENT = "data-twe-carousel-pointer-event";
constant SELECTOR_DATA_CAROUSEL_INIT (line 100) | const SELECTOR_DATA_CAROUSEL_INIT = "[data-twe-carousel-init]";
constant SELECTOR_DATA_ACTIVE (line 101) | const SELECTOR_DATA_ACTIVE = "[data-twe-carousel-active]";
constant SELECTOR_DATA_ITEM (line 102) | const SELECTOR_DATA_ITEM = "[data-twe-carousel-item]";
constant SELECTOR_DATA_ACTIVE_ITEM (line 103) | const SELECTOR_DATA_ACTIVE_ITEM = `${SELECTOR_DATA_ACTIVE}${SELECTOR_DAT...
constant SELECTOR_DATA_ITEM_IMG (line 104) | const SELECTOR_DATA_ITEM_IMG = `${SELECTOR_DATA_ITEM} img`;
constant SELECTOR_DATA_NEXT_PREV (line 105) | const SELECTOR_DATA_NEXT_PREV =
constant SELECTOR_DATA_INDICATORS (line 107) | const SELECTOR_DATA_INDICATORS = "[data-twe-carousel-indicators]";
constant SELECTOR_INDICATOR (line 108) | const SELECTOR_INDICATOR = "[data-twe-target]";
constant SELECTOR_DATA_SLIDE (line 109) | const SELECTOR_DATA_SLIDE = "[data-twe-slide], [data-twe-slide-to]";
constant POINTER_TYPE_TOUCH (line 111) | const POINTER_TYPE_TOUCH = "touch";
constant POINTER_TYPE_PEN (line 112) | const POINTER_TYPE_PEN = "pen";
class Carousel (line 119) | class Carousel extends BaseComponent {
method constructor (line 120) | constructor(element, config, classes) {
method Default (line 154) | static get Default() {
method NAME (line 158) | static get NAME() {
method next (line 164) | next() {
method nextWhenVisible (line 168) | nextWhenVisible() {
method prev (line 176) | prev() {
method pause (line 180) | pause(event) {
method cycle (line 194) | cycle(event) {
method to (line 216) | to(index) {
method dispose (line 243) | dispose() {
method _init (line 256) | _init() {
method _getConfig (line 281) | _getConfig(config) {
method _getClasses (line 291) | _getClasses(classes) {
method _enableCycle (line 305) | _enableCycle() {
method _applyInitialClasses (line 318) | _applyInitialClasses() {
method _handleSwipe (line 331) | _handleSwipe() {
method _setActiveElementClass (line 349) | _setActiveElementClass() {
method _addEventListeners (line 357) | _addEventListeners() {
method _addTouchEventListeners (line 380) | _addTouchEventListeners() {
method _keydown (line 455) | _keydown(event) {
method _getItemIndex (line 467) | _getItemIndex(element) {
method _getItemByOrder (line 476) | _getItemByOrder(order, activeElement) {
method _triggerSlideEvent (line 486) | _triggerSlideEvent(relatedTarget, eventDirectionName) {
method _setActiveIndicatorElement (line 500) | _setActiveIndicatorElement(element) {
method _updateInterval (line 532) | _updateInterval() {
method _slide (line 556) | _slide(directionOrOrder, element) {
method _directionToOrder (line 666) | _directionToOrder(direction) {
method _orderToDirection (line 678) | _orderToDirection(order) {
method carouselInterface (line 692) | static carouselInterface(element, config) {
method jQueryInterface (line 719) | static jQueryInterface(config) {
method dataApiClickHandler (line 738) | static dataApiClickHandler(event) {
FILE: src/js/free/components/collapse.js
constant NAME (line 20) | const NAME = "collapse";
constant DATA_KEY (line 21) | const DATA_KEY = "twe.collapse";
constant EVENT_KEY (line 22) | const EVENT_KEY = `.${DATA_KEY}`;
constant EVENT_SHOW (line 34) | const EVENT_SHOW = `show${EVENT_KEY}`;
constant EVENT_SHOWN (line 35) | const EVENT_SHOWN = `shown${EVENT_KEY}`;
constant EVENT_HIDE (line 36) | const EVENT_HIDE = `hide${EVENT_KEY}`;
constant EVENT_HIDDEN (line 37) | const EVENT_HIDDEN = `hidden${EVENT_KEY}`;
constant ATTR_SHOW (line 39) | const ATTR_SHOW = "data-twe-collapse-show";
constant ATTR_COLLAPSED (line 40) | const ATTR_COLLAPSED = "data-twe-collapse-collapsed";
constant ATTR_COLLAPSING (line 41) | const ATTR_COLLAPSING = "data-twe-collapse-collapsing";
constant ATTR_HORIZONTAL (line 42) | const ATTR_HORIZONTAL = "data-twe-collapse-horizontal";
constant ATTR_COLLAPSE_ITEM (line 43) | const ATTR_COLLAPSE_ITEM = "data-twe-collapse-item";
constant ATTR_COLLAPSE_DEEPER_CHILDREN (line 44) | const ATTR_COLLAPSE_DEEPER_CHILDREN = `:scope [${ATTR_COLLAPSE_ITEM}] [$...
constant WIDTH (line 46) | const WIDTH = "width";
constant HEIGHT (line 47) | const HEIGHT = "height";
constant SELECTOR_DATA_ACTIVES (line 49) | const SELECTOR_DATA_ACTIVES =
constant SELECTOR_DATA_COLLAPSE_INIT (line 51) | const SELECTOR_DATA_COLLAPSE_INIT = "[data-twe-collapse-init]";
class Collapse (line 78) | class Collapse extends BaseComponent {
method constructor (line 79) | constructor(element, config, classes) {
method Default (line 115) | static get Default() {
method NAME (line 119) | static get NAME() {
method toggle (line 125) | toggle() {
method show (line 133) | show() {
method hide (line 219) | hide() {
method _isShown (line 278) | _isShown(element = this._element) {
method _getConfig (line 283) | _getConfig(config) {
method _getClasses (line 295) | _getClasses(classes) {
method _getDimension (line 308) | _getDimension() {
method _initializeChildren (line 312) | _initializeChildren() {
method _addAriaAndCollapsedClass (line 332) | _addAriaAndCollapsedClass(triggerArray, isOpen) {
method jQueryInterface (line 350) | static jQueryInterface(config) {
FILE: src/js/free/components/dropdown.js
constant NAME (line 25) | const NAME = "dropdown";
constant DATA_KEY (line 26) | const DATA_KEY = "twe.dropdown";
constant EVENT_KEY (line 27) | const EVENT_KEY = `.${DATA_KEY}`;
constant DATA_API_KEY (line 28) | const DATA_API_KEY = ".data-api";
constant ESCAPE_KEY (line 30) | const ESCAPE_KEY = "Escape";
constant SPACE_KEY (line 31) | const SPACE_KEY = "Space";
constant TAB_KEY (line 32) | const TAB_KEY = "Tab";
constant ARROW_UP_KEY (line 33) | const ARROW_UP_KEY = "ArrowUp";
constant ARROW_DOWN_KEY (line 34) | const ARROW_DOWN_KEY = "ArrowDown";
constant RIGHT_MOUSE_BUTTON (line 35) | const RIGHT_MOUSE_BUTTON = 2;
constant REGEXP_KEYDOWN (line 37) | const REGEXP_KEYDOWN = new RegExp(
constant EVENT_HIDE (line 41) | const EVENT_HIDE = `hide${EVENT_KEY}`;
constant EVENT_HIDDEN (line 42) | const EVENT_HIDDEN = `hidden${EVENT_KEY}`;
constant EVENT_SHOW (line 43) | const EVENT_SHOW = `show${EVENT_KEY}`;
constant EVENT_SHOWN (line 44) | const EVENT_SHOWN = `shown${EVENT_KEY}`;
constant EVENT_CLICK_DATA_API (line 45) | const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`;
constant EVENT_KEYDOWN_DATA_API (line 46) | const EVENT_KEYDOWN_DATA_API = `keydown${EVENT_KEY}${DATA_API_KEY}`;
constant EVENT_KEYUP_DATA_API (line 47) | const EVENT_KEYUP_DATA_API = `keyup${EVENT_KEY}${DATA_API_KEY}`;
constant CLASS_NAME_SHOW (line 49) | const CLASS_NAME_SHOW = "show";
constant CLASS_NAME_DROPUP (line 50) | const CLASS_NAME_DROPUP = "dropup";
constant CLASS_NAME_DROPEND (line 51) | const CLASS_NAME_DROPEND = "dropend";
constant CLASS_NAME_DROPSTART (line 52) | const CLASS_NAME_DROPSTART = "dropstart";
constant SELECTOR_NAVBAR (line 54) | const SELECTOR_NAVBAR = "[data-twe-navbar-ref]";
constant SELECTOR_DATA_TOGGLE (line 55) | const SELECTOR_DATA_TOGGLE = "[data-twe-dropdown-toggle-ref]";
constant SELECTOR_MENU (line 56) | const SELECTOR_MENU = "[data-twe-dropdown-menu-ref]";
constant SELECTOR_NAVBAR_NAV (line 57) | const SELECTOR_NAVBAR_NAV = "[data-twe-navbar-nav-ref]";
constant SELECTOR_VISIBLE_ITEMS (line 58) | const SELECTOR_VISIBLE_ITEMS =
constant PLACEMENT_TOP (line 61) | const PLACEMENT_TOP = isRTL() ? "top-end" : "top-start";
constant PLACEMENT_TOPEND (line 62) | const PLACEMENT_TOPEND = isRTL() ? "top-start" : "top-end";
constant PLACEMENT_BOTTOM (line 63) | const PLACEMENT_BOTTOM = isRTL() ? "bottom-end" : "bottom-start";
constant PLACEMENT_BOTTOMEND (line 64) | const PLACEMENT_BOTTOMEND = isRTL() ? "bottom-start" : "bottom-end";
constant PLACEMENT_RIGHT (line 65) | const PLACEMENT_RIGHT = isRTL() ? "left-start" : "right-start";
constant PLACEMENT_LEFT (line 66) | const PLACEMENT_LEFT = isRTL() ? "right-start" : "left-start";
constant ANIMATION_FADE_IN (line 68) | const ANIMATION_FADE_IN = [{ opacity: "0" }, { opacity: "1" }];
constant ANIMATION_FADE_OUT (line 69) | const ANIMATION_FADE_OUT = [{ opacity: "1" }, { opacity: "0" }];
constant ANIMATION_TIMING (line 71) | const ANIMATION_TIMING = {
class Dropdown (line 105) | class Dropdown extends BaseComponent {
method constructor (line 106) | constructor(element, config) {
method Default (line 128) | static get Default() {
method DefaultType (line 132) | static get DefaultType() {
method NAME (line 136) | static get NAME() {
method toggle (line 142) | toggle() {
method show (line 146) | show() {
method hide (line 205) | hide() {
method dispose (line 217) | dispose() {
method update (line 225) | update() {
method _init (line 233) | _init() {
method _completeHide (line 256) | _completeHide(relatedTarget) {
method _getConfig (line 302) | _getConfig(config) {
method _createPopper (line 325) | _createPopper(parent) {
method _isShown (line 359) | _isShown(element = this._element) {
method _getMenuElement (line 369) | _getMenuElement() {
method _getPlacement (line 373) | _getPlacement() {
method _detectNavbar (line 394) | _detectNavbar() {
method _getOffset (line 398) | _getOffset() {
method _getPopperConfig (line 412) | _getPopperConfig() {
method _selectMenuItem (line 449) | _selectMenuItem({ key, target }) {
method jQueryInterface (line 471) | static jQueryInterface(config) {
method clearMenus (line 487) | static clearMenus(event) {
method getParentFromElement (line 541) | static getParentFromElement(element) {
method dataApiKeydownHandler (line 545) | static dataApiKeydownHandler(event) {
FILE: src/js/free/components/modal.js
constant NAME (line 19) | const NAME = "modal";
constant DATA_KEY (line 20) | const DATA_KEY = "twe.modal";
constant EVENT_KEY (line 21) | const EVENT_KEY = `.${DATA_KEY}`;
constant ESCAPE_KEY (line 22) | const ESCAPE_KEY = "Escape";
constant EVENT_HIDE (line 51) | const EVENT_HIDE = `hide${EVENT_KEY}`;
constant EVENT_HIDE_PREVENTED (line 52) | const EVENT_HIDE_PREVENTED = `hidePrevented${EVENT_KEY}`;
constant EVENT_HIDDEN (line 53) | const EVENT_HIDDEN = `hidden${EVENT_KEY}`;
constant EVENT_SHOW (line 54) | const EVENT_SHOW = `show${EVENT_KEY}`;
constant EVENT_SHOWN (line 55) | const EVENT_SHOWN = `shown${EVENT_KEY}`;
constant EVENT_RESIZE (line 56) | const EVENT_RESIZE = `resize${EVENT_KEY}`;
constant EVENT_CLICK_DISMISS (line 57) | const EVENT_CLICK_DISMISS = `click.dismiss${EVENT_KEY}`;
constant EVENT_KEYDOWN_DISMISS (line 58) | const EVENT_KEYDOWN_DISMISS = `keydown.dismiss${EVENT_KEY}`;
constant EVENT_MOUSEUP_DISMISS (line 59) | const EVENT_MOUSEUP_DISMISS = `mouseup.dismiss${EVENT_KEY}`;
constant EVENT_MOUSEDOWN_DISMISS (line 60) | const EVENT_MOUSEDOWN_DISMISS = `mousedown.dismiss${EVENT_KEY}`;
constant OPEN_SELECTOR_BODY (line 62) | const OPEN_SELECTOR_BODY = "data-twe-modal-open";
constant OPEN_SELECTOR (line 63) | const OPEN_SELECTOR = "data-twe-open";
constant SELECTOR_DIALOG (line 64) | const SELECTOR_DIALOG = "[data-twe-modal-dialog-ref]";
constant SELECTOR_MODAL_BODY (line 65) | const SELECTOR_MODAL_BODY = "[data-twe-modal-body-ref]";
class Modal (line 73) | class Modal extends BaseComponent {
method constructor (line 74) | constructor(element, config, classes) {
method NAME (line 94) | static get NAME() {
method Default (line 98) | static get Default() {
method getDefaultType (line 102) | static get getDefaultType() {
method toggle (line 108) | toggle(relatedTarget) {
method show (line 112) | show(relatedTarget) {
method hide (line 151) | hide() {
method dispose (line 183) | dispose() {
method handleUpdate (line 194) | handleUpdate() {
method _init (line 200) | _init() {
method _initializeBackDrop (line 210) | _initializeBackDrop() {
method _initializeFocusTrap (line 218) | _initializeFocusTrap() {
method _showElement (line 225) | _showElement(relatedTarget) {
method _setEscapeEvent (line 273) | _setEscapeEvent() {
method _setResizeEvent (line 288) | _setResizeEvent() {
method _hideModal (line 296) | _hideModal() {
method _showBackdrop (line 319) | _showBackdrop(callback) {
method _isAnimated (line 340) | _isAnimated() {
method _triggerBackdropTransition (line 345) | _triggerBackdropTransition() {
method _getConfig (line 389) | _getConfig(config) {
method _getClasses (line 399) | _getClasses(classes) {
method _adjustDialog (line 417) | _adjustDialog() {
method _resetAdjustments (line 438) | _resetAdjustments() {
method jQueryInterface (line 445) | static jQueryInterface(config, relatedTarget) {
FILE: src/js/free/components/offcanvas.js
constant NAME (line 18) | const NAME = "offcanvas";
constant DATA_KEY (line 19) | const DATA_KEY = "twe.offcanvas";
constant EVENT_KEY (line 20) | const EVENT_KEY = `.${DATA_KEY}`;
constant DATA_API_KEY (line 21) | const DATA_API_KEY = ".data-api";
constant EVENT_LOAD_DATA_API (line 22) | const EVENT_LOAD_DATA_API = `load${EVENT_KEY}${DATA_API_KEY}`;
constant ESCAPE_KEY (line 23) | const ESCAPE_KEY = "Escape";
constant CLASS_NAME_SHOW (line 37) | const CLASS_NAME_SHOW = "show";
constant OPEN_SELECTOR (line 38) | const OPEN_SELECTOR = "[data-twe-offcanvas-init][data-twe-offcanvas-show]";
constant EVENT_SHOW (line 40) | const EVENT_SHOW = `show${EVENT_KEY}`;
constant EVENT_SHOWN (line 41) | const EVENT_SHOWN = `shown${EVENT_KEY}`;
constant EVENT_HIDE (line 42) | const EVENT_HIDE = `hide${EVENT_KEY}`;
constant EVENT_HIDDEN (line 43) | const EVENT_HIDDEN = `hidden${EVENT_KEY}`;
constant EVENT_KEYDOWN_DISMISS (line 44) | const EVENT_KEYDOWN_DISMISS = `keydown.dismiss${EVENT_KEY}`;
class Offcanvas (line 52) | class Offcanvas extends BaseComponent {
method constructor (line 53) | constructor(element, config) {
method NAME (line 67) | static get NAME() {
method Default (line 71) | static get Default() {
method toggle (line 77) | toggle(relatedTarget) {
method show (line 81) | show(relatedTarget) {
method hide (line 119) | hide() {
method dispose (line 152) | dispose() {
method _init (line 159) | _init() {
method _getConfig (line 174) | _getConfig(config) {
method _initializeBackDrop (line 184) | _initializeBackDrop() {
method _initializeFocusTrap (line 193) | _initializeFocusTrap() {
method _addEventListeners (line 201) | _addEventListeners() {
method jQueryInterface (line 211) | static jQueryInterface(config) {
FILE: src/js/free/components/popover.js
constant NAME (line 9) | const NAME = "popover";
constant DATA_KEY (line 10) | const DATA_KEY = "twe.popover";
constant EVENT_KEY (line 11) | const EVENT_KEY = `.${DATA_KEY}`;
constant CLASS_PREFIX (line 12) | const CLASS_PREFIX = "te-popover";
constant SELECTOR_TITLE (line 46) | const SELECTOR_TITLE = "[data-twe-popover-header-ref]";
constant SELECTOR_CONTENT (line 47) | const SELECTOR_CONTENT = "[data-twe-popover-body-ref]";
class Popover (line 55) | class Popover extends Tooltip {
method Default (line 58) | static get Default() {
method NAME (line 62) | static get NAME() {
method Event (line 66) | static get Event() {
method DefaultType (line 70) | static get DefaultType() {
method isWithContent (line 76) | isWithContent() {
method setContent (line 80) | setContent(tip) {
method _getContent (line 87) | _getContent() {
method _getBasicClassPrefix (line 91) | _getBasicClassPrefix() {
method jQueryInterface (line 97) | static jQueryInterface(config) {
FILE: src/js/free/components/tooltip.js
constant NAME (line 25) | const NAME = "tooltip";
constant DATA_KEY (line 26) | const DATA_KEY = "twe.tooltip";
constant EVENT_KEY (line 27) | const EVENT_KEY = `.${DATA_KEY}`;
constant CLASS_PREFIX (line 28) | const CLASS_PREFIX = "te-tooltip";
constant DISALLOWED_ATTRIBUTES (line 29) | const DISALLOWED_ATTRIBUTES = new Set(["sanitize", "allowList", "sanitiz...
constant CLASS_NAME_FADE (line 96) | const CLASS_NAME_FADE = "fade";
constant CLASS_NAME_MODAL (line 97) | const CLASS_NAME_MODAL = "modal";
constant CLASS_NAME_SHOW (line 98) | const CLASS_NAME_SHOW = "show";
constant HOVER_STATE_SHOW (line 100) | const HOVER_STATE_SHOW = "show";
constant HOVER_STATE_OUT (line 101) | const HOVER_STATE_OUT = "out";
constant SELECTOR_TOOLTIP_INNER (line 103) | const SELECTOR_TOOLTIP_INNER = "[data-twe-tooltip-inner-ref]";
constant SELECTOR_MODAL (line 104) | const SELECTOR_MODAL = `.${CLASS_NAME_MODAL}`;
constant EVENT_MODAL_HIDE (line 106) | const EVENT_MODAL_HIDE = "hide.twe.modal";
constant TRIGGER_HOVER (line 108) | const TRIGGER_HOVER = "hover";
constant TRIGGER_FOCUS (line 109) | const TRIGGER_FOCUS = "focus";
constant TRIGGER_CLICK (line 110) | const TRIGGER_CLICK = "click";
constant TRIGGER_MANUAL (line 111) | const TRIGGER_MANUAL = "manual";
class Tooltip (line 119) | class Tooltip extends BaseComponent {
method constructor (line 120) | constructor(element, config) {
method Default (line 145) | static get Default() {
method NAME (line 149) | static get NAME() {
method Event (line 153) | static get Event() {
method DefaultType (line 157) | static get DefaultType() {
method enable (line 163) | enable() {
method disable (line 167) | disable() {
method toggleEnabled (line 171) | toggleEnabled() {
method toggle (line 175) | toggle(event) {
method dispose (line 200) | dispose() {
method show (line 217) | show() {
method hide (line 341) | hide() {
method update (line 391) | update() {
method isWithContent (line 399) | isWithContent() {
method getTipElement (line 403) | getTipElement() {
method setContent (line 419) | setContent(tip) {
method _sanitizeAndSetContent (line 423) | _sanitizeAndSetContent(template, content, selector) {
method setElementContent (line 435) | setElementContent(element, content) {
method getTitle (line 471) | getTitle() {
method updateAttachment (line 479) | updateAttachment(attachment) {
method _initializeOnDelegatedTarget (line 493) | _initializeOnDelegatedTarget(event, context) {
method _getOffset (line 503) | _getOffset() {
method _resolvePossibleFunction (line 517) | _resolvePossibleFunction(content) {
method _getPopperConfig (line 523) | _getPopperConfig(attachment) {
method _addAttachmentClass (line 573) | _addAttachmentClass(attachment) {
method _getAttachment (line 579) | _getAttachment(placement) {
method _setListeners (line 583) | _setListeners() {
method _fixTitle (line 642) | _fixTitle() {
method _enter (line 662) | _enter(event, context) {
method _leave (line 695) | _leave(event, context) {
method _isWithActiveTrigger (line 724) | _isWithActiveTrigger() {
method _getConfig (line 734) | _getConfig(config) {
method _getDelegateConfig (line 780) | _getDelegateConfig() {
method _cleanTipClass (line 795) | _cleanTipClass() {
method _getBasicClassPrefix (line 809) | _getBasicClassPrefix() {
method _handlePopperPlacementChange (line 813) | _handlePopperPlacementChange(popperData) {
method _disposePopper (line 825) | _disposePopper() {
method jQueryInterface (line 834) | static jQueryInterface(config) {
FILE: src/js/free/forms/input.js
constant NAME (line 14) | const NAME = "input";
constant DATA_KEY (line 15) | const DATA_KEY = "twe.input";
constant DATA_WRAPPER (line 16) | const DATA_WRAPPER = "data-twe-input-wrapper-init";
constant DATA_NOTCH (line 17) | const DATA_NOTCH = "data-twe-input-notch-ref";
constant DATA_NOTCH_LEADING (line 18) | const DATA_NOTCH_LEADING = "data-twe-input-notch-leading-ref";
constant DATA_NOTCH_MIDDLE (line 19) | const DATA_NOTCH_MIDDLE = "data-twe-input-notch-middle-ref";
constant DATA_NOTCH_TRAILING (line 20) | const DATA_NOTCH_TRAILING = "data-twe-input-notch-trailing-ref";
constant DATA_HELPER (line 21) | const DATA_HELPER = "data-twe-input-helper-ref";
constant DATA_PLACEHOLDER_ACTIVE (line 22) | const DATA_PLACEHOLDER_ACTIVE = "data-twe-input-placeholder-active";
constant DATA_ACTIVE (line 23) | const DATA_ACTIVE = "data-twe-input-state-active";
constant DATA_FOCUSED (line 24) | const DATA_FOCUSED = "data-twe-input-focused";
constant DATA_FORM_COUNTER (line 25) | const DATA_FORM_COUNTER = "data-twe-input-form-counter";
constant SELECTOR_OUTLINE_INPUT (line 27) | const SELECTOR_OUTLINE_INPUT = `[${DATA_WRAPPER}] input`;
constant SELECTOR_OUTLINE_TEXTAREA (line 28) | const SELECTOR_OUTLINE_TEXTAREA = `[${DATA_WRAPPER}] textarea`;
constant SELECTOR_NOTCH (line 30) | const SELECTOR_NOTCH = `[${DATA_NOTCH}]`;
constant SELECTOR_NOTCH_LEADING (line 31) | const SELECTOR_NOTCH_LEADING = `[${DATA_NOTCH_LEADING}]`;
constant SELECTOR_NOTCH_MIDDLE (line 32) | const SELECTOR_NOTCH_MIDDLE = `[${DATA_NOTCH_MIDDLE}]`;
constant SELECTOR_HELPER (line 33) | const SELECTOR_HELPER = `[${DATA_HELPER}]`;
class Input (line 87) | class Input {
method constructor (line 88) | constructor(element, config, classes) {
method NAME (line 111) | static get NAME() {
method input (line 115) | get input() {
method init (line 123) | init() {
method update (line 137) | update() {
method forceActive (line 146) | forceActive() {
method forceInactive (line 155) | forceInactive() {
method dispose (line 164) | dispose() {
method _getConfig (line 173) | _getConfig(config, element) {
method _getClasses (line 183) | _getClasses(classes) {
method _getLabelData (line 197) | _getLabelData() {
method _getHelper (line 209) | _getHelper() {
method _getCounter (line 213) | _getCounter() {
method _getEvents (line 224) | _getEvents() {
method _showCounter (line 372) | _showCounter() {
method _bindCounter (line 389) | _bindCounter() {
method _toggleDefaultDatePlaceholder (line 396) | _toggleDefaultDatePlaceholder(input = this.input) {
method _showPlaceholder (line 410) | _showPlaceholder() {
method _getNotchData (line 414) | _getNotchData() {
method _getLabelWidth (line 425) | _getLabelWidth() {
method _getLabelPositionInInputGroup (line 429) | _getLabelPositionInInputGroup() {
method _applyDivs (line 444) | _applyDivs() {
method _applyNotch (line 492) | _applyNotch() {
method _removeBorder (line 500) | _removeBorder() {
method _activate (line 505) | _activate(event) {
method _getElements (line 525) | _getElements(event) {
method _deactivate (line 549) | _deactivate(event) {
method activate (line 569) | static activate(instance) {
method deactivate (line 575) | static deactivate(instance) {
method jQueryInterface (line 581) | static jQueryInterface(config, options) {
method getInstance (line 600) | static getInstance(element) {
method getOrCreateInstance (line 604) | static getOrCreateInstance(element, config = {}) {
FILE: src/js/free/methods/ripple.js
constant NAME (line 14) | const NAME = "ripple";
constant DATA_KEY (line 15) | const DATA_KEY = "twe.ripple";
constant GRADIENT (line 17) | const GRADIENT =
constant SELECTOR_COMPONENT (line 20) | const SELECTOR_COMPONENT = ["[data-twe-ripple-init]"];
constant DEFAULT_RIPPLE_COLOR (line 21) | const DEFAULT_RIPPLE_COLOR = [0, 0, 0];
constant BOOTSTRAP_COLORS (line 24) | const BOOTSTRAP_COLORS = [
constant TRANSITION_BREAK_OPACITY (line 61) | const TRANSITION_BREAK_OPACITY = 0.5;
class Ripple (line 100) | class Ripple {
method constructor (line 101) | constructor(element, options, classes) {
method NAME (line 121) | static get NAME() {
method init (line 127) | init() {
method dispose (line 131) | dispose() {
method _autoInit (line 140) | _autoInit(event) {
method _addClickEvent (line 163) | _addClickEvent(target) {
method _createRipple (line 167) | _createRipple(event) {
method _createHTMLRipple (line 215) | _createHTMLRipple({ wrapper, ripple, styles }) {
method _removeHTMLRipple (line 227) | _removeHTMLRipple({ ripple, duration }) {
method _addedNewRippleClasses (line 263) | _addedNewRippleClasses(defaultRipple, initialClasses) {
method _durationToMsNumber (line 271) | _durationToMsNumber(time) {
method _getConfig (line 275) | _getConfig(config = {}) {
method _getClasses (line 288) | _getClasses(classes = {}) {
method _getDiameter (line 302) | _getDiameter({ offsetX, offsetY, height, width }) {
method _appendRipple (line 337) | _appendRipple(target, parent) {
method _toggleUnbound (line 345) | _toggleUnbound(target) {
method _addColor (line 353) | _addColor(target) {
method _colorToRGB (line 376) | _colorToRGB(color) {
method autoInitial (line 431) | static autoInitial(instance) {
method jQueryInterface (line 437) | static jQueryInterface(options) {
method getInstance (line 448) | static getInstance(element) {
method getOrCreateInstance (line 452) | static getOrCreateInstance(element, config = {}) {
FILE: src/js/free/navigation/scrollspy.js
constant NAME (line 18) | const NAME = "scrollspy";
constant DATA_KEY (line 19) | const DATA_KEY = "twe.scrollspy";
constant EVENT_KEY (line 20) | const EVENT_KEY = `.${DATA_KEY}`;
constant EVENT_ACTIVATE (line 43) | const EVENT_ACTIVATE = `activate${EVENT_KEY}`;
constant EVENT_SCROLL (line 44) | const EVENT_SCROLL = `scroll${EVENT_KEY}`;
constant LINK_ACTIVE (line 46) | const LINK_ACTIVE = "data-twe-nav-link-active";
constant LINK_COLLAPSIBLE (line 47) | const LINK_COLLAPSIBLE = "data-twe-collapsible-scrollspy-ref";
constant SELECTOR_DROPDOWN_ITEM (line 48) | const SELECTOR_DROPDOWN_ITEM = "[data-twe-dropdown-item-ref]";
constant SELECTOR_NAV_LIST_GROUP (line 49) | const SELECTOR_NAV_LIST_GROUP = "[data-twe-nav-list-ref]";
constant SELECTOR_NAV_LINKS (line 50) | const SELECTOR_NAV_LINKS = "[data-twe-nav-link-ref]";
constant SELECTOR_NAV_ITEMS (line 51) | const SELECTOR_NAV_ITEMS = "[data-twe-nav-item-ref]";
constant SELECTOR_LIST_ITEMS (line 52) | const SELECTOR_LIST_ITEMS = "[data-twe-list-group-item-ref]";
constant SELECTOR_LINK_ITEMS (line 53) | const SELECTOR_LINK_ITEMS = `${SELECTOR_NAV_LINKS}, ${SELECTOR_LIST_ITEM...
constant SELECTOR_DROPDOWN (line 54) | const SELECTOR_DROPDOWN = "[data-twe-dropdown-ref]";
constant SELECTOR_DROPDOWN_TOGGLE (line 55) | const SELECTOR_DROPDOWN_TOGGLE = "[data-twe-dropdown-toggle-ref]";
constant SELECTOR_COLLAPSIBLE_SCROLLSPY (line 56) | const SELECTOR_COLLAPSIBLE_SCROLLSPY = `[${LINK_COLLAPSIBLE}]`;
constant SELECTOR_ACTIVE (line 57) | const SELECTOR_ACTIVE = `[${LINK_ACTIVE}]`;
constant SELECTOR_LIST (line 58) | const SELECTOR_LIST = "ul";
constant METHOD_OFFSET (line 60) | const METHOD_OFFSET = "maxOffset";
constant METHOD_POSITION (line 61) | const METHOD_POSITION = "position";
class ScrollSpy (line 69) | class ScrollSpy extends BaseComponent {
method constructor (line 70) | constructor(element, config, classes) {
method Default (line 101) | static get Default() {
method NAME (line 105) | static get NAME() {
method refresh (line 111) | refresh() {
method dispose (line 159) | dispose() {
method _getConfig (line 167) | _getConfig(config) {
method _getClasses (line 181) | _getClasses(classes) {
method _getScrollTop (line 195) | _getScrollTop() {
method _getScrollHeight (line 201) | _getScrollHeight() {
method _getOffsetHeight (line 211) | _getOffsetHeight() {
method _process (line 217) | _process() {
method _activate (line 260) | _activate(target) {
method _clear (line 310) | _clear() {
method _hide (line 321) | _hide(target) {
method _show (line 330) | _show(target, destinedHeight) {
method _getCollapsibles (line 334) | _getCollapsibles() {
method _showSubsection (line 356) | _showSubsection() {
method _hideSubsection (line 372) | _hideSubsection() {
method _bindActivateEvent (line 383) | _bindActivateEvent() {
method jQueryInterface (line 392) | static jQueryInterface(config) {
FILE: src/js/free/navigation/tab.js
constant NAME (line 17) | const NAME = "tab";
constant DATA_KEY (line 18) | const DATA_KEY = "twe.tab";
constant EVENT_KEY (line 19) | const EVENT_KEY = `.${DATA_KEY}`;
constant EVENT_HIDE (line 21) | const EVENT_HIDE = `hide${EVENT_KEY}`;
constant EVENT_HIDDEN (line 22) | const EVENT_HIDDEN = `hidden${EVENT_KEY}`;
constant EVENT_SHOW (line 23) | const EVENT_SHOW = `show${EVENT_KEY}`;
constant EVENT_SHOWN (line 24) | const EVENT_SHOWN = `shown${EVENT_KEY}`;
constant DATA_NAME_DROPDOWN_MENU (line 26) | const DATA_NAME_DROPDOWN_MENU = "data-twe-dropdown-menu-ref";
constant TAB_ACTIVE (line 27) | const TAB_ACTIVE = "data-twe-tab-active";
constant NAV_ACTIVE (line 28) | const NAV_ACTIVE = "data-twe-nav-active";
constant SELECTOR_DROPDOWN (line 30) | const SELECTOR_DROPDOWN = "[data-twe-dropdown-ref]";
constant SELECTOR_NAV (line 31) | const SELECTOR_NAV = "[data-twe-nav-ref]";
constant SELECTOR_TAB_ACTIVE (line 32) | const SELECTOR_TAB_ACTIVE = `[${TAB_ACTIVE}]`;
constant SELECTOR_NAV_ACTIVE (line 33) | const SELECTOR_NAV_ACTIVE = `[${NAV_ACTIVE}]`;
constant SELECTOR_ACTIVE_UL (line 34) | const SELECTOR_ACTIVE_UL = ":scope > li > .active";
constant SELECTOR_DROPDOWN_TOGGLE (line 35) | const SELECTOR_DROPDOWN_TOGGLE = "[data-twe-dropdown-toggle-ref]";
constant SELECTOR_DROPDOWN_ACTIVE_CHILD (line 36) | const SELECTOR_DROPDOWN_ACTIVE_CHILD =
class Tab (line 55) | class Tab extends BaseComponent {
method constructor (line 56) | constructor(element, classes) {
method NAME (line 62) | static get NAME() {
method show (line 68) | show() {
method _getClasses (line 143) | _getClasses(classes) {
method _activate (line 157) | _activate(element, container, callback, activeNavElement, navElement) {
method _transitionComplete (line 185) | _transitionComplete(element, active, callback, activeNavElement, navEl...
method jQueryInterface (line 242) | static jQueryInterface(config) {
FILE: src/js/util/backdrop.js
constant NAME (line 26) | const NAME = "backdrop";
constant EVENT_MOUSEDOWN (line 27) | const EVENT_MOUSEDOWN = `mousedown.twe.${NAME}`;
class Backdrop (line 29) | class Backdrop {
method constructor (line 30) | constructor(config) {
method show (line 36) | show(callback) {
method hide (line 71) | hide(callback) {
method update (line 87) | update(config = {}) {
method _getElement (line 93) | _getElement() {
method _getConfig (line 102) | _getConfig(config) {
method _append (line 114) | _append() {
method dispose (line 128) | dispose() {
method _emulateAnimation (line 139) | _emulateAnimation(callback) {
FILE: src/js/util/focusTrap.js
class FocusTrap (line 4) | class FocusTrap {
method constructor (line 5) | constructor(element, options = {}, toggler) {
method trap (line 33) | trap() {
method disable (line 39) | disable() {
method update (line 49) | update() {
method _init (line 54) | _init() {
method _filterVisible (line 73) | _filterVisible(elements) {
method _setElements (line 91) | _setElements() {
method _setFocusTrap (line 115) | _setFocusTrap() {
FILE: src/js/util/index.js
constant MAX_UID (line 1) | const MAX_UID = 1000000;
constant MILLISECONDS_MULTIPLIER (line 2) | const MILLISECONDS_MULTIPLIER = 1000;
constant TRANSITION_END (line 3) | const TRANSITION_END = "transitionend";
function listener (line 134) | function listener() {
FILE: src/js/util/keycodes.js
constant LEFT_ARROW (line 1) | const LEFT_ARROW = 37;
constant UP_ARROW (line 2) | const UP_ARROW = 38;
constant RIGHT_ARROW (line 3) | const RIGHT_ARROW = 39;
constant DOWN_ARROW (line 4) | const DOWN_ARROW = 40;
constant HOME (line 5) | const HOME = 36;
constant END (line 6) | const END = 35;
constant PAGE_UP (line 7) | const PAGE_UP = 33;
constant PAGE_DOWN (line 8) | const PAGE_DOWN = 34;
constant ENTER (line 9) | const ENTER = 13;
constant SPACE (line 10) | const SPACE = 32;
constant ESCAPE (line 11) | const ESCAPE = 27;
constant TAB (line 12) | const TAB = 9;
constant BACKSPACE (line 13) | const BACKSPACE = 8;
constant DELETE (line 14) | const DELETE = 46;
FILE: src/js/util/sanitizer.js
constant ARIA_ATTRIBUTE_PATTERN (line 12) | const ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i;
constant DATA_TE_ATTRIBUTE_PATTERN (line 13) | const DATA_TE_ATTRIBUTE_PATTERN = /^data-twe-[\w-]*$/i;
constant SAFE_URL_PATTERN (line 20) | const SAFE_URL_PATTERN =
constant DATA_URL_PATTERN (line 28) | const DATA_URL_PATTERN =
function sanitizeHtml (line 143) | function sanitizeHtml(unsafeHtml, allowList, sanitizeFn) {
FILE: src/js/util/scrollbar.js
constant SELECTOR_FIXED_CONTENT (line 5) | const SELECTOR_FIXED_CONTENT =
constant SELECTOR_STICKY_CONTENT (line 7) | const SELECTOR_STICKY_CONTENT = ".sticky-top";
class ScrollBarHelper (line 9) | class ScrollBarHelper {
method constructor (line 10) | constructor() {
method getWidth (line 14) | getWidth() {
method hide (line 20) | hide() {
method _disableOverFlow (line 42) | _disableOverFlow() {
method _setElementAttributes (line 47) | _setElementAttributes(selector, styleProp, callback) {
method reset (line 67) | reset() {
method _saveInitialAttribute (line 74) | _saveInitialAttribute(element, styleProp) {
method _resetElementAttributes (line 81) | _resetElementAttributes(selector, styleProp) {
method _applyManipulationCallback (line 95) | _applyManipulationCallback(selector, callBack) {
method isOverflowing (line 103) | isOverflowing() {
FILE: src/js/util/stack.js
constant NAME (line 4) | const NAME = "Stack";
constant DEFAULT_OPTIONS (line 6) | const DEFAULT_OPTIONS = {
constant TYPE_OPTIONS (line 15) | const TYPE_OPTIONS = {
class Stack (line 22) | class Stack {
method constructor (line 23) | constructor(element, selector, options) {
method stackableElements (line 35) | get stackableElements() {
method nextElements (line 52) | get nextElements() {
method _getConfig (line 64) | _getConfig(options) {
method _getBoundryOffset (line 75) | _getBoundryOffset(rect) {
method calculateOffset (line 94) | calculateOffset() {
FILE: src/js/util/touch/index.js
class Touch (line 3) | class Touch {
method constructor (line 4) | constructor(element, event = "swipe", options = {}) {
method dispose (line 19) | dispose() {
method init (line 25) | init() {
method _handleTouchStart (line 38) | _handleTouchStart(e) {
method _handleTouchMove (line 42) | _handleTouchMove(e) {
method _handleTouchEnd (line 46) | _handleTouchEnd(e) {
FILE: src/js/util/touch/swipe.js
constant DEFAULT_OPTIONS (line 3) | const DEFAULT_OPTIONS = {
class Swipe (line 8) | class Swipe {
method constructor (line 9) | constructor(element, options) {
method handleTouchStart (line 18) | handleTouchStart(e) {
method handleTouchMove (line 22) | handleTouchMove(e) {
method handleTouchEnd (line 62) | handleTouchEnd() {
method _getCoordinates (line 66) | _getCoordinates(e) {
method _getDirection (line 74) | _getDirection(displacement) {
FILE: src/js/util/touch/touchUtil.js
class TouchUtil (line 1) | class TouchUtil {
method _getCoordinates (line 2) | _getCoordinates(e) {
method _getDirection (line 10) | _getDirection(displacement) {
Condensed preview — 50 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (289K chars).
[
{
"path": ".clabot",
"chars": 573,
"preview": "{\n \"contributors\": \"https://cla.tailwind-elements.com/users\",\n \"message\": \"Thank you for your pull request and welcome"
},
{
"path": ".github/ISSUE_TEMPLATE/bug_report.md",
"chars": 1746,
"preview": "---\nname: Bug report\nabout: Create a report to help us improve\ntitle: \"[Component name] [description of the issue]\"\nlabe"
},
{
"path": ".gitignore",
"chars": 12,
"preview": "node_modules"
},
{
"path": "CODE_OF_CONDUCT.md",
"chars": 3231,
"preview": "# Contributor Covenant Code of Conduct\n\n## Our Pledge\n\nIn the interest of fostering an open and welcoming environment, w"
},
{
"path": "LICENSE",
"chars": 1068,
"preview": "MIT License\n\nCopyright (c) 2024 MDBootstrap\n\nPermission is hereby granted, free of charge, to any person obtaining a cop"
},
{
"path": "README.md",
"chars": 34217,
"preview": "# TW Elements [<img src=\"https://tecdn.b-cdn.net/img/logo/te-transparent-noshadows.webp\" width=\"45\" align=\"right\" alt=\"t"
},
{
"path": "README.txt",
"chars": 111,
"preview": "TW Elements Standard\nVersion: 2.0.0\n\nDocumentation:\nhttps://tw-elements.com/\n\nContact:\ntailwind@mdbootstrap.com"
},
{
"path": "index.html",
"chars": 3236,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta\n name=\"viewport\"\n content=\"wi"
},
{
"path": "package.json",
"chars": 445,
"preview": "{\n \"name\": \"tw-elements\",\n \"version\": \"2.0.0\",\n \"type\": \"module\",\n \"homepage\": \"https://tw-elements.com/\",\n \"reposi"
},
{
"path": "plugin.cjs",
"chars": 25593,
"preview": "const plugin = require(\"tailwindcss/plugin\");\nconst defaultTheme = require(\"tailwindcss/defaultTheme\");\nconst { spacing,"
},
{
"path": "src/css/tailwind.scss",
"chars": 238,
"preview": "@tailwind base;\n\n@layer base {\n html {\n @apply text-surface;\n @apply bg-white;\n }\n html.dark {\n @apply text-"
},
{
"path": "src/js/autoinit/Register.js",
"chars": 339,
"preview": "class InitRegister {\n constructor() {\n this.inits = [];\n }\n\n get initialized() {\n return this.inits;\n }\n\n isI"
},
{
"path": "src/js/autoinit/callbacks/free.js",
"chars": 4793,
"preview": "import EventHandler from \"../../dom/event-handler\";\nimport SelectorEngine from \"../../dom/selector-engine\";\nimport {\n i"
},
{
"path": "src/js/autoinit/index.free.js",
"chars": 218,
"preview": "import defaultInitSelectors from \"./initSelectors/free\";\nimport { InitTWE } from \"./index\";\n\nconst initTWEInstance = new"
},
{
"path": "src/js/autoinit/index.js",
"chars": 2490,
"preview": "import SelectorEngine from \"../dom/selector-engine\";\nimport jqueryInit from \"./jqueryInit\";\n\n// key => component NAME co"
},
{
"path": "src/js/autoinit/initSelectors/free.js",
"chars": 1868,
"preview": "import {\n dropdownCallback,\n offcanvasCallback,\n tabCallback,\n buttonCallback,\n rippleCallback,\n collapseCallback,"
},
{
"path": "src/js/autoinit/jqueryInit.js",
"chars": 496,
"preview": "import { getjQuery, onDOMContentLoaded } from \"../util/index\";\n\nconst jqueryInit = (plugin) => {\n onDOMContentLoaded(()"
},
{
"path": "src/js/base-component.js",
"chars": 1570,
"preview": "import Data from \"./dom/data\";\nimport { executeAfterTransition, getElement } from \"./util/index\";\nimport EventHandler fr"
},
{
"path": "src/js/dom/data.js",
"chars": 1266,
"preview": "/*\n------------------------------------------------------------------------\nConstants\n----------------------------------"
},
{
"path": "src/js/dom/event-handler.js",
"chars": 9845,
"preview": "import { getjQuery } from \"../util/index\";\n\n/*\n------------------------------------------------------------------------\n"
},
{
"path": "src/js/dom/manipulator.js",
"chars": 3857,
"preview": "function normalizeData(val) {\n if (val === \"true\") {\n return true;\n }\n\n if (val === \"false\") {\n return false;\n "
},
{
"path": "src/js/dom/selector-engine.js",
"chars": 2163,
"preview": "/*\n------------------------------------------------------------------------\nConstants\n----------------------------------"
},
{
"path": "src/js/free/components/button.js",
"chars": 1034,
"preview": "import BaseComponent from \"../../base-component\";\n\n/*\n------------------------------------------------------------------"
},
{
"path": "src/js/free/components/carousel.js",
"chars": 19705,
"preview": "import {\n getElementFromSelector,\n isRTL,\n isVisible,\n getNextActiveElement,\n reflow,\n triggerTransitionEnd,\n typ"
},
{
"path": "src/js/free/components/collapse.js",
"chars": 10206,
"preview": "import {\n getElement,\n getSelectorFromElement,\n getElementFromSelector,\n reflow,\n typeCheckConfig,\n} from \"../../ut"
},
{
"path": "src/js/free/components/dropdown.js",
"chars": 15956,
"preview": "import * as Popper from \"@popperjs/core\";\n\nimport {\n getElement,\n getElementFromSelector,\n getNextActiveElement,\n is"
},
{
"path": "src/js/free/components/modal.js",
"chars": 12241,
"preview": "import { isRTL, reflow, typeCheckConfig } from \"../../util/index\";\nimport EventHandler from \"../../dom/event-handler\";\ni"
},
{
"path": "src/js/free/components/offcanvas.js",
"chars": 5594,
"preview": "import { typeCheckConfig } from \"../../util/index\";\nimport ScrollBarHelper from \"../../util/scrollbar\";\nimport EventHand"
},
{
"path": "src/js/free/components/popover.js",
"chars": 2952,
"preview": "import Tooltip from \"./tooltip\";\n\n/*\n------------------------------------------------------------------------\nConstants\n"
},
{
"path": "src/js/free/components/tooltip.js",
"chars": 20642,
"preview": "import * as Popper from \"@popperjs/core\";\n\nimport {\n findShadowRoot,\n getElement,\n getUID,\n isElement,\n isRTL,\n no"
},
{
"path": "src/js/free/forms/input.js",
"chars": 17893,
"preview": "import { element, onDOMContentLoaded, typeCheckConfig } from \"../../util/index\";\nimport Data from \"../../dom/data\";\nimpo"
},
{
"path": "src/js/free/methods/ripple.js",
"chars": 12945,
"preview": "import { element, typeCheckConfig } from \"../../util/index\";\nimport Data from \"../../dom/data\";\nimport EventHandler from"
},
{
"path": "src/js/free/navigation/scrollspy.js",
"chars": 10712,
"preview": "import {\n getElement,\n getSelectorFromElement,\n typeCheckConfig,\n} from \"../../util/index\";\nimport EventHandler from "
},
{
"path": "src/js/free/navigation/tab.js",
"chars": 6506,
"preview": "import {\n getElementFromSelector,\n reflow,\n typeCheckConfig,\n} from \"../../util/index\";\nimport Manipulator from \"../."
},
{
"path": "src/js/tw-elements.free.es.js",
"chars": 795,
"preview": "// TWE FREE COMPONENTS\nimport Button from \"./free/components/button\";\nimport Dropdown from \"./free/components/dropdown\";"
},
{
"path": "src/js/tw-elements.free.umd.js",
"chars": 957,
"preview": "// TWE FREE COMPONENTS\nimport Button from \"./free/components/button\";\nimport Dropdown from \"./free/components/dropdown\";"
},
{
"path": "src/js/util/add-perfect-scrollbar-styles.js",
"chars": 2650,
"preview": "import Manipulator from \"../dom/manipulator\";\nimport SelectorEngine from \"../dom/selector-engine\";\n\nconst psClasses =\n "
},
{
"path": "src/js/util/backdrop.js",
"chars": 3223,
"preview": "import EventHandler from \"../dom/event-handler\";\nimport Manipulator from \"../dom/manipulator\";\nimport {\n execute,\n exe"
},
{
"path": "src/js/util/component-functions.js",
"chars": 1058,
"preview": "import EventHandler from \"../dom/event-handler\";\nimport { getElementFromSelector, isDisabled } from \"./index\";\nlet added"
},
{
"path": "src/js/util/focusTrap.js",
"chars": 3215,
"preview": "import SelectorEngine from \"../dom/selector-engine\";\nimport { isVisible } from \"./index\";\n\nclass FocusTrap {\n construct"
},
{
"path": "src/js/util/getStyle.js",
"chars": 1060,
"preview": "const options = {\n property: \"color\",\n defaultValue: null,\n inherit: true,\n};\n\nexport const getStyle = (className, cu"
},
{
"path": "src/js/util/index.js",
"chars": 9334,
"preview": "const MAX_UID = 1000000;\nconst MILLISECONDS_MULTIPLIER = 1000;\nconst TRANSITION_END = \"transitionend\";\n\n// Shoutout Angu"
},
{
"path": "src/js/util/keycodes.js",
"chars": 920,
"preview": "export const LEFT_ARROW = 37;\nexport const UP_ARROW = 38;\nexport const RIGHT_ARROW = 39;\nexport const DOWN_ARROW = 40;\ne"
},
{
"path": "src/js/util/sanitizer.js",
"chars": 3918,
"preview": "const uriAttributes = new Set([\n \"background\",\n \"cite\",\n \"href\",\n \"itemtype\",\n \"longdesc\",\n \"poster\",\n \"src\",\n \""
},
{
"path": "src/js/util/scrollbar.js",
"chars": 3256,
"preview": "import SelectorEngine from \"../dom/selector-engine\";\nimport Manipulator from \"../dom/manipulator\";\nimport { isElement } "
},
{
"path": "src/js/util/stack.js",
"chars": 2564,
"preview": "import SelectorEngine from \"../dom/selector-engine\";\nimport { isVisible, typeCheckConfig } from \"./index\";\n\nconst NAME ="
},
{
"path": "src/js/util/touch/index.js",
"chars": 1266,
"preview": "import Swipe from \"./swipe\";\n\nclass Touch {\n constructor(element, event = \"swipe\", options = {}) {\n this._element = "
},
{
"path": "src/js/util/touch/swipe.js",
"chars": 2016,
"preview": "import EventHandler from \"../../dom/event-handler\";\n\nconst DEFAULT_OPTIONS = {\n threshold: 10,\n direction: \"all\",\n};\n\n"
},
{
"path": "src/js/util/touch/touchUtil.js",
"chars": 465,
"preview": "class TouchUtil {\n _getCoordinates(e) {\n const [touch] = e.touches;\n return {\n x: touch.clientX,\n y: to"
},
{
"path": "types/tw-elements.d.ts",
"chars": 30,
"preview": "declare module \"tw-elements\";\n"
}
]
About this extraction
This page contains the full source code of the mdbootstrap/TW-Elements GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 50 files (266.1 KB), approximately 69.8k tokens, and a symbol index with 614 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.