[ { "path": ".clabot", "content": "{\n \"contributors\": \"https://cla.tailwind-elements.com/users\",\n \"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).\"\n}\n" }, { "path": ".github/ISSUE_TEMPLATE/bug_report.md", "content": "---\nname: Bug report\nabout: Create a report to help us improve\ntitle: \"[Component name] [description of the issue]\"\nlabels: \"\"\nassignees: \"\"\n---\n\n**Describe the bug**\nA clear and concise description of what the bug is.\n\n**To Reproduce**\nSteps to reproduce the behavior:\n\n1. Go to '...'\n2. Click on '....'\n3. Scroll down to '....'\n4. See error\n\n**Expected behavior**\nA clear and concise description of what you expected to happen.\n\n**Actual behavior**\nA clear and concise description of what is happening instead.\n\n**Show your code**\nIt 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.\n\n**Desktop (please complete the following information):**\n\n- OS: [e.g. iOS]\n- Browser [e.g. chrome, safari]\n- Version [e.g. 22]\n\n**Smartphone (please complete the following information):**\n\n- Device: [e.g. iPhone6]\n- OS: [e.g. iOS8.1]\n- Browser [e.g. stock browser, safari]\n- Version [e.g. 22]\n\n**Additional context**\nAdd any other context about the problem here.\n\n**Make sure it is indeed an issue/bug report**\n\n- 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:\n https://github.com/mdbootstrap/Tailwind-Elements/discussions/categories/support-from-community\n- If it's an idea for a new feature, but you cannot write the code for it yourself, it's better to ask here:\n https://github.com/mdbootstrap/Tailwind-Elements/discussions/categories/share-ideas-request-features\n- If it's general feedback, it's better to post it here:\n https://github.com/mdbootstrap/Tailwind-Elements/discussions/categories/kind-words-general-feedback\n" }, { "path": ".gitignore", "content": "node_modules" }, { "path": "CODE_OF_CONDUCT.md", "content": "# Contributor Covenant Code of Conduct\n\n## Our Pledge\n\nIn the interest of fostering an open and welcoming environment, we as\ncontributors and maintainers pledge to making participation in our project and\nour community a harassment-free experience for everyone, regardless of age, body\nsize, disability, ethnicity, gender identity and expression, level of experience,\neducation, socio-economic status, nationality, personal appearance, race,\nreligion, or sexual identity and orientation.\n\n## Our Standards\n\nExamples of behavior that contributes to creating a positive environment\ninclude:\n\n- Using welcoming and inclusive language\n- Being respectful of differing viewpoints and experiences\n- Gracefully accepting constructive criticism\n- Focusing on what is best for the community\n- Showing empathy towards other community members\n\nExamples of unacceptable behavior by participants include:\n\n- The use of sexualized language or imagery and unwelcome sexual attention or\n advances\n- Trolling, insulting/derogatory comments, and personal or political attacks\n- Public or private harassment\n- Publishing others' private information, such as a physical or electronic\n address, without explicit permission\n- Other conduct which could reasonably be considered inappropriate in a\n professional setting\n\n## Our Responsibilities\n\nProject maintainers are responsible for clarifying the standards of acceptable\nbehavior and are expected to take appropriate and fair corrective action in\nresponse to any instances of unacceptable behavior.\n\nProject maintainers have the right and responsibility to remove, edit, or\nreject comments, commits, code, wiki edits, issues, and other contributions\nthat are not aligned to this Code of Conduct, or to ban temporarily or\npermanently any contributor for other behaviors that they deem inappropriate,\nthreatening, offensive, or harmful.\n\n## Scope\n\nThis Code of Conduct applies both within project spaces and in public spaces\nwhen an individual is representing the project or its community. Examples of\nrepresenting a project or community include using an official project e-mail\naddress, posting via an official social media account, or acting as an appointed\nrepresentative at an online or offline event. Representation of a project may be\nfurther defined and clarified by project maintainers.\n\n## Enforcement\n\nInstances of abusive, harassing, or otherwise unacceptable behavior may be\nreported by contacting the project team at contact@mdbootstrap.com.\nAll complaints will be reviewed and investigated and will result in a response that\nis deemed necessary and appropriate to the circumstances. The project team is\nobligated to maintain confidentiality with regard to the reporter of an incident.\nFurther details of specific enforcement policies may be posted separately.\n\nProject maintainers who do not follow or enforce the Code of Conduct in good\nfaith may face temporary or permanent repercussions as determined by other\nmembers of the project's leadership.\n\n## Attribution\n\nThis Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,\navailable at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html\n\n[homepage]: https://www.contributor-covenant.org\n" }, { "path": "LICENSE", "content": "MIT License\n\nCopyright (c) 2024 MDBootstrap\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n" }, { "path": "README.md", "content": "# TW Elements [\"tw-elements\"](https://tw-elements.com/)\"Total \"Latest \n\nTW Elements is a huge collection of free, interactive components for Tailwind CSS.\n\n \n \n \n \n \n \n \n
\n \n \t\t\n \n \n
    \n
  • 500+ UI components
    • \n
  • 117+ design blocks
    • \n
  • Dark mode support
    • \n
  • Easy theming & customization
    • \n
  • Simple, 1 minute install
    • \n
  • Free for personal & commercial use
    • \n
\n

Get started with TW Elements now!

\n
\n\n---\n\n## Table of Contents\n\n- [Table of Contents](#table-of-contents)\n- [Community](#community)\n- [Coming soon](#coming-soon)\n- [Components](#components)\n- [Design blocks](#design-blocks)\n- [Installation](#installation)\n\n---\n\n## Community\n\n- Motivate us with some [words of encouragament ❤️](https://github.com/mdbootstrap/TW-Elements/discussions/categories/kind-words-general-feedback)\n- Share your [ideas & feature requests 💡](https://github.com/mdbootstrap/TW-Elements/discussions/categories/share-ideas-request-features)\n- Aks for help & help others in our [community support 🙏](https://github.com/mdbootstrap/TW-Elements/discussions/categories/support-from-community)\n- **Engage, discuss & have fun in our [community 💬](https://github.com/mdbootstrap/TW-Elements/discussions)**\n\n**If you want to help the project grow, start by simply sharing it with your peers!**\n\n- [Share via Dev.to]()\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)\n- [Share via Facebook](https://www.facebook.com/sharer/sharer.php?u=https%3A//tw-elements.com)\n- [Share via LinkedIn](http://www.linkedin.com/shareArticle?url=https%3A%2F%2Ftw-elements.com%2F&title=500%2B%20open-source%20components%20for%20TailwindCSS)\n- [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)\n- [Share via Reddit](https://reddit.com/submit?url=https://tw-elements.com/&title=500+%20open-source%20components%20for%20TailwindCSS)\n- [Share via StumbleUpon](https://www.stumbleupon.com/submit?url=https://tw-elements.com/&title=500+%20open-source%20components%20for%20TailwindCSS)\n- [Share via Vkontakte](https://vk.com/share.php?url=https://tw-elements.com/)\n- [Share via Weibo](https://service.weibo.com/share/share.php?url=https://tw-elements.com/&title=500+%20open-source%20components%20for%20TailwindCSS)\n- [Share via Hackernews](https://news.ycombinator.com/submitlink?u=https://tw-elements.com/&t=500+%20open-source%20components%20for%20TailwindCSS)\n- [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)\n- [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)\n\nThank you!\n\n---\n\n## Coming soon\n\nCheck out the upcoming features - make sure to **join the waiting list** in order to **get early access**!\n\n \n \n \n \n \n \n \n \n \n
\n \n \"Design\n \n \n \n \"Templates\"\n \n
Drag & drop builderTemplates
\n\n---\n\n## Components\n\nA 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.\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n\n
\n \n \"Datepicker\"\n \n \n \n \"Dropdown\"\n \n \n \n \"Modal\"\n \n
DatepickerDropdownModal
\n \n \"Charts\"\n \n \n \n \"Tooltips\"\n \n \n \n \"Carousel\"\n \n
ChartsTooltipsCarousel
\n \n \"Accordion\"\n \n \n \n \"Tabs\"\n \n \n \n \"Stepper\"\n \n
AccordionTabsStepper
\n \n \"Tailwind\n \n \n \n \"Tailwind\n \n \n \n \"Tailwind\n \n
TimepickerFooterNavbar
\n \n \"Tailwind\n \n \n \n \"Tailwind\n \n \n \n \"Tailwind\n \n
AlertsAvatarBadges
\n \n \"Tailwind\n \n \n \n \"Tailwind\n \n \n \n \"Tailwind\n \n
Button groupButtonsCards
\n \n \"Tailwind\n \n \n \n \"Tailwind\n \n \n \n \"Tailwind\n \n
ChipsCollapseGallery
\n \n \"Tailwind\n \n \n \n \"Tailwind\n \n \n \n \"Tailwind\n \n
JumbotronLinkList group
\n \n \"Tailwind\n \n \n \n \"Tailwind\n \n \n \n \"Tailwind\n \n
NotificationsParagraphsPlaceholders
\n \n \"Tailwind\n \n \n \n \"Tailwind\n \n \n \n \"Tailwind\n \n
PopoverProgressRating
\n \n \"Tailwind\n \n \n \n \"Tailwind\n \n \n \n \"Tailwind\n \n
Scroll to topSocial buttonsSpinners
\n \n \"Tailwind\n \n \n \n \"Tailwind\n \n \n \n \"Tailwind\n \n
TimelineToastTooltip
\n \n \"Tailwind\n \n \n \n \"Tailwind\n \n \n \n \"Tailwind\n \n
VideoVideo carouselCheckbox
\n \n \"Tailwind\n \n \n \n \"Tailwind\n \n \n \n \"Tailwind\n \n
File inputInput groupLogin form
\n \n \"Tailwind\n \n \n \n \"Tailwind\n \n \n \n \"Tailwind\n \n
RadioRangeRegistration form
\n \n \"Tailwind\n \n \n \n \"Tailwind\n \n \n \n \"Tailwind\n \n
SearchSelectSwitch
\n \n \"Tailwind\n \n \n \n \"Tailwind\n \n \n \n \"Tailwind\n \n
TextareaTablesRipple
\n \n \"Tailwind\n \n \n \n \"Tailwind\n \n \n \n \"Tailwind\n \n
AnimationsMasksShadows
\n \n \"Tailwind\n \n \n \n \"Tailwind\n \n \n \n \"Tailwind\n \n
DatatablesLightboxRating
\n \n \"Tailwind\n \n \n \n \"Tailwind\n \n \n \n \"Logo\n \n
ScrollbarPopconfirmMore coming soon
\n\n---\n\n## Design blocks\n\nResponsive Landing page blocks built with Tailwind CSS. Plenty of design blocks examples such as Teams, services, projects, faq, and many more.\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n \"Hero\"\n \n \n \n \"Pricing\"\n \n \n \n \"Call\n \n
HeroPricingCall to action
\n \n \"Features\"\n \n \n \n \"Contact\"\n \n \n \n \"News/blog\"\n \n
FeaturesContactNews/blog
\n \n \"Team\"\n \n \n \n \"Tabs\"\n \n \n \n \"Stepper\"\n \n
TeamStatsTestimonials
\n \n \"Content\"\n \n \n \n \"Newsletter\"\n \n \n \n \"Projects\"\n \n
ContentNewsletterProjects
\n \n \"Headers\"\n \n \n \n \"FAQ\"\n \n \n \n \"Logo\n \n
HeadersFAQLogo Clouds
\n \n \"Headers\"\n \n \n \n \"FAQ\"\n \n \n \n \"Logo\n \n
BannersMega MenuMore coming soon
\n\n---\n\n## Integrations\n\nTW Elements integrations with popular technologies.\n\n- [Django Integration](https://tw-elements.com/docs/standard/integrations/django-integration/)\n- [Angular Integration](https://tw-elements.com/docs/standard/integrations/angular-integration/)\n- [Express Integration](https://tw-elements.com/docs/standard/integrations/express-integration/)\n- [Laravel Integration](https://tw-elements.com/docs/standard/integrations/laravel-integration/)\n- [Next Integration](https://tw-elements.com/docs/standard/integrations/next-integration/)\n- [Nuxt Integration](https://tw-elements.com/docs/standard/integrations/nuxt-integration/)\n- [Django Integration](https://tw-elements.com/docs/standard/integrations/react-integration/)\n- [Remix Integration](https://tw-elements.com/docs/standard/integrations/remix-integration/)\n- [Solid Integration](https://tw-elements.com/docs/standard/integrations/solid-integration/)\n- [Svelte Integration](https://tw-elements.com/docs/standard/integrations/svelte-integration/)\n- [Sveltekit Integration](https://tw-elements.com/docs/standard/integrations/sveltekit-integration/)\n- [Vue Integration](https://tw-elements.com/docs/standard/integrations/vue-integration/)\n\n---\n\n## Installation\n\n##### NPM\n\n1. Before starting the project make sure to install [Node.js (LTS)](https://nodejs.org/en/ \"Node.js (LTS)\") and [TailwindCSS](https://tailwindcss.com/ \"TailwindCSS\").\n\n2. Run the following command to install the package via NPM:\n\n```\nnpm install tw-elements\n```\n\n3. 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:\n\n```javascript\nmodule.exports = {\n content: [\"./src/**/*.{html,js}\", \"./node_modules/tw-elements/js/**/*.js\"],\n plugins: [require(\"tw-elements/plugin.cjs\")],\n darkMode: \"class\",\n};\n```\n\n4. Dynamic components will work after adding the js file:\n\n```\n\n```\n\nAlternatively, you can import it in the following way (bundler version):\n\n```\nimport 'tw-elements';\n```\n\n##### MDB GO / CLI\n\nCreate, deploy and host anything with a single command.\n\n1. To start using MDB GO / CLI install it with one command:\n\n```\nnpm install -g mdb-cli\n```\n\n2. Log into the CLI using your MDB account:\n\n```\nmdb login\n```\n\n3. Initialize a project and choose **Tailwind Elements** from the list:\n\n```\nmdb init tailwind-elements-free\n```\n\n4. Install the dependencies (inside the project directory):\n\n```\nnpm install\n```\n\n5. Run the app:\n\n```\nnpm start\n```\n\n6. Publish when you're ready:\n\n```\nmdb publish\n```\n\n##### CDN\n\nYou can easily test TW Elements by adding CDN scripts to your classic HTML template without the need for installing any packages.\n\nAdd the stylesheet files below in the _head_ section:\n\n```\n\n\n\n\n```\n\nRequire the js bundled file right before the _body_ closing tag:\n\n```\n\n```\n" }, { "path": "README.txt", "content": "TW Elements Standard\nVersion: 2.0.0\n\nDocumentation:\nhttps://tw-elements.com/\n\nContact:\ntailwind@mdbootstrap.com" }, { "path": "index.html", "content": "\n\n \n \n \n \n TW Elements\n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n
\n \n
\n \n \n \n \n \n
\n
\n
\n Thank you for using our product. We're glad you're with us.\n
\n

TW Elements Team

\n Start TWE tutorial\n
\n
\n \n \n \n \n \n \n \n \n\n" }, { "path": "package.json", "content": "{\n \"name\": \"tw-elements\",\n \"version\": \"2.0.0\",\n \"type\": \"module\",\n \"homepage\": \"https://tw-elements.com/\",\n \"repository\": \"https://github.com/mdbootstrap/TW-Elements\",\n \"author\": \"MDBootstrap\",\n \"license\": \"SEE LICENSE IN \",\n \"style\": \"./css/tw-elements.min.css\",\n \"sass\": \"./src/css/tailwind.scss\",\n \"main\": \"./js/tw-elements.umd.min.js\",\n \"module\": \"./js/tw-elements.es.min.js\",\n \"types\": \"./types/tw-elements.d.ts\"\n}\n" }, { "path": "plugin.cjs", "content": "const plugin = require(\"tailwindcss/plugin\");\nconst defaultTheme = require(\"tailwindcss/defaultTheme\");\nconst { spacing, borderRadius } = defaultTheme;\n\nmodule.exports = plugin(\n ({ addBase, theme }) => {\n addBase({\n [['input[type=\"range\"]::-webkit-slider-thumb']]: {\n height: spacing[4],\n width: spacing[4],\n background: theme(\"colors.primary.DEFAULT\"),\n \"border-radius\": borderRadius.full,\n border: 0,\n appearance: \"none\",\n \"-moz-appearance\": \"none\",\n \"-webkit-appearance\": \"none\",\n cursor: \"pointer\",\n },\n [['.dark input[type=\"range\"]::-webkit-slider-thumb']]: {\n background: theme(\"colors.primary.400\"),\n },\n [['input[type=\"range\"]:disabled::-webkit-slider-thumb']]: {\n background: theme(\"colors.neutral.400\"),\n },\n [['input[type=\"range\"]:disabled:focus::-webkit-slider-thumb']]: {\n background: theme(\"colors.neutral.400\"),\n },\n [['input[type=\"range\"]:disabled:active::-webkit-slider-thumb']]: {\n background: theme(\"colors.neutral.400\"),\n },\n [['.dark input[type=\"range\"]:disabled::-webkit-slider-thumb']]: {\n background: theme(\"colors.neutral.500\"),\n },\n [['.dark input[type=\"range\"]:disabled:focus::-webkit-slider-thumb']]: {\n background: theme(\"colors.neutral.500\"),\n },\n [['.dark input[type=\"range\"]:disabled:active::-webkit-slider-thumb']]: {\n background: theme(\"colors.neutral.500\"),\n },\n [['input[type=\"range\"]::-moz-range-thumb']]: {\n height: spacing[4],\n width: spacing[4],\n background: theme(\"colors.primary.DEFAULT\"),\n \"border-radius\": borderRadius.full,\n border: 0,\n appearance: \"none\",\n \"-moz-appearance\": \"none\",\n \"-webkit-appearance\": \"none\",\n cursor: \"pointer\",\n },\n [['.dark input[type=\"range\"]::-moz-range-thumb']]: {\n background: theme(\"colors.primary.400\"),\n },\n [['input[type=\"range\"]:disabled::-moz-range-thumb']]: {\n background: theme(\"colors.neutral.400\"),\n },\n [['.dark input[type=\"range\"]:disabled::-moz-range-thumb']]: {\n background: theme(\"colors.neutral.500\"),\n },\n [['input[type=\"range\"]::-moz-range-progress']]: {\n background: theme(\"colors.primary.600\"),\n },\n [['input[type=\"range\"]::-ms-fill-lower']]: {\n background: theme(\"colors.primary.600\"),\n },\n [['.dark input[type=\"range\"]::-moz-range-progress']]: {\n background: theme(\"colors.primary.500\"),\n },\n [['.dark input[type=\"range\"]::-ms-fill-lower']]: {\n background: theme(\"colors.primary.500\"),\n },\n [['input[type=\"range\"]:focus']]: {\n outline: \"none\",\n },\n [['input[type=\"range\"]:focus::-webkit-slider-thumb']]: {\n background: theme(\"colors.primary.600\"),\n },\n [['input[type=\"range\"]:active::-webkit-slider-thumb']]: {\n background: theme(\"colors.primary.700\"),\n },\n [['.dark input[type=\"range\"]:focus::-webkit-slider-thumb']]: {\n background: theme(\"colors.primary.500\"),\n },\n [['.dark input[type=\"range\"]:active::-webkit-slider-thumb']]: {\n background: theme(\"colors.primary.600\"),\n },\n });\n },\n {\n theme: {\n screens: {\n xs: \"320px\",\n ...defaultTheme.screens,\n },\n extend: {\n fontFamily: {\n sans: [\"Roboto\", \"sans-serif\"],\n body: [\"Roboto\", \"sans-serif\"],\n mono: [\"ui-monospace\", \"monospace\"],\n },\n boxShadow: {\n \"twe-primary\": \"0 0 0 1px rgb(59, 113, 202)\",\n 1: \"0 0 2px 0 rgba(0,0,0,.07),0 1px 1px 0 rgba(0,0,0,.04)\",\n \"1-strong\": \"0 0 2px 0 rgba(0,0,0,.16),0 1px 1px 0 rgba(0,0,0,.1)\",\n 2: \"0 0 3px 0 rgba(0,0,0,.07),0 2px 2px 0 rgba(0,0,0,.04)\",\n \"2-strong\": \"0 0 3px 0 rgba(0,0,0,.16),0 2px 2px 0 rgba(0,0,0,.1)\",\n 3: \"0 2px 6px -1px rgba(0,0,0,.07),0 6px 18px -1px rgba(0,0,0,.04)\",\n \"3-strong\":\n \"0 2px 6px -1px rgba(0,0,0,.16),0 6px 18px -1px rgba(0,0,0,.1)\",\n 4: \"0 2px 15px -3px rgba(0,0,0,.07),0 10px 20px -2px rgba(0,0,0,.04)\",\n \"4-strong\":\n \"0 2px 15px -3px rgba(0,0,0,.16),0 10px 20px -2px rgba(0,0,0,.1)\",\n 5: \"0 2px 25px -5px rgba(0,0,0,.07),0 25px 21px -5px rgba(0,0,0,.04)\",\n \"5-strong\":\n \" 0 2px 25px -5px rgba(0,0,0,.16),0 25px 21px -5px rgba(0,0,0,.1)\",\n \"twe-inner\": \"inset 0 2px 4px 0 #0000000d\",\n \"primary-1\":\n \"0 8px 9px -4px rgba(59,113,202,0.2),0 4px 18px 0 rgba(59,113,202,0.1)\",\n \"primary-2\":\n \"0 8px 9px -4px rgba(59,113,202,0.3),0 4px 18px 0 rgba(59,113,202,0.2)\",\n \"primary-3\": \"0 4px 9px -4px #3b71ca\",\n \"success-1\":\n \"0 8px 9px -4px rgba(20,164,77,0.2),0 4px 18px 0 rgba(20,164,77,0.1)\",\n \"success-2\":\n \"0 8px 9px -4px rgba(20,164,77,0.3),0 4px 18px 0 rgba(20,164,77,0.2)\",\n \"success-3\": \"0 4px 9px -4px #14a44d\",\n \"danger-1\":\n \"0 8px 9px -4px rgba(220,76,100,0.1),0 4px 18px 0 rgba(220,76,100,0.2)\",\n \"danger-2\":\n \"0 8px 9px -4px rgba(220,76,100,0.2),0 4px 18px 0 rgba(220,76,100,0.3)\",\n \"danger-3\": \"0 4px 9px -4px #dc4c64\",\n \"warning-1\":\n \"0 8px 9px -4px rgba(228,161,27,0.1),0 4px 18px 0 rgba(228,161,27,0.2)\",\n \"warning-2\":\n \"0 8px 9px -4px rgba(228,161,27,0.2),0 4px 18px 0 rgba(228,161,27,0.3)\",\n \"warning-3\": \"0 4px 9px -4px #e4a11b\",\n \"info-1\":\n \"0 8px 9px -4px rgba(84,180,211,0.1),0 4px 18px 0 rgba(84,180,211,0.2)\",\n \"info-2\":\n \"0 8px 9px -4px rgba(84,180,211,0.2),0 4px 18px 0 rgba(84,180,211,0.3)\",\n \"info-3\": \"0 4px 9px -4px #54b4d3\",\n \"light-1\":\n \"0 8px 9px -4px rgba(251,251,251,0.05),0 4px 18px 0 rgba(251,251,251,0.1)\",\n \"light-2\":\n \"0 8px 9px -4px rgba(203,203,203,0.2),0 4px 18px 0 rgba(203,203,203,0.3)\",\n \"light-3\": \"0 4px 9px -4px #cbcbcb\",\n \"dark-1\":\n \"0 8px 9px -4px rgba( 0, 0, 0 , 0.15), 0 4px 18px 0 rgba( 0, 0, 0 , 0.1)\",\n \"dark-2\":\n \"0 8px 9px -4px rgba(51,45,45,0.1),0 4px 18px 0 rgba(51,45,45,0.2)\",\n \"dark-3\": \"0 4px 9px -4px rgba(51,45,45,0.7)\",\n \"dark-strong\": \"0 4px 18px -2px rgba(0,0,0,.7)\",\n \"dark-mild\":\n \"0 4px 12px 0 rgba(0,0,0,0.07),0 2px 4px rgba(0,0,0,0.05)\",\n \"secondary-1\":\n \"0 2px 15px -3px rgba(0,0,0,0.04),0 10px 20px -2px rgba(0,0,0,0.07)\",\n \"secondary-2\":\n \"0 8px 9px -4px rgba(227,235,247,0.2),0 4px 18px 0 rgba(227,235,247,0.3)\",\n \"secondary-3\": \"0 4px 9px -4px #e3ebf7\",\n \"primary-5\": \"0 4px 9px -4px rgba(59,113,202,0.5)\",\n checkbox: \"0 0 0 13px #3b71ca\",\n inset: \"inset 0 0 0 1px rgb(59,113,202)\",\n select: \"0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12)\",\n \"switch-1\":\n \"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)\",\n \"switch-2\":\n \"0 0px 3px 0 rgba(0,0,0,0.07), 0 2px 2px 0 rgba(0,0,0,0.04)\",\n \"switch-3\": \"3px -1px 0px 13px #3b71ca\",\n \"notch-1\": \"-1px 0 0 #3b71ca, 0 1px 0 0 #3b71ca, 0 -1px 0 0 #3b71ca\",\n \"notch-2\": \"0 1px 0 0 #3b71ca\",\n \"notch-3\": \"1px 0 0 #3b71ca, 0 -1px 0 0 #3b71ca, 0 1px 0 0 #3b71ca\",\n \"border-b\": \"inset 0 -1px 0 rgba(229,231,235)\",\n autofill: \"inset 0 0 0px 1000px rgb(62,62,62)\",\n },\n keyframes: {\n \"fade-in\": {\n \"0%\": { opacity: 0 },\n \"100%\": { opacity: 1 },\n },\n \"fade-out\": {\n \"0%\": { opacity: 1 },\n \"100%\": { opacity: 0 },\n },\n \"fade-in-down\": {\n \"0%\": {\n opacity: 0,\n transform: \"translate3d(0, -100%, 0)\",\n },\n \"100%\": {\n opacity: 1,\n transform: \"translate3d(0, 0, 0)\",\n },\n },\n \"fade-in-left\": {\n \"0%\": {\n opacity: 0,\n transform: \"translate3d(-100%, 0, 0)\",\n },\n \"100%\": {\n opacity: 1,\n transform: \"translate3d(0, 0, 0)\",\n },\n },\n \"fade-in-right\": {\n \"0%\": {\n opacity: 0,\n transform: \"translate3d(100%, 0, 0)\",\n },\n \"100%\": {\n opacity: 1,\n transform: \"translate3d(0, 0, 0)\",\n },\n },\n \"fade-in-up\": {\n \"0%\": {\n opacity: 0,\n transform: \"translate3d(0, 100%, 0)\",\n },\n \"100%\": {\n opacity: 1,\n transform: \"translate3d(0, 0, 0)\",\n },\n },\n \"fade-out-down\": {\n \"0%\": {\n opacity: 1,\n },\n \"100%\": {\n opacity: 0,\n transform: \"translate3d(0, 100%, 0)\",\n },\n },\n \"fade-out-left\": {\n \"0%\": {\n opacity: 1,\n },\n \"100%\": {\n opacity: 0,\n transform: \"translate3d(-100%, 0, 0)\",\n },\n },\n \"fade-out-right\": {\n \"0%\": {\n opacity: 1,\n },\n \"100%\": {\n opacity: 0,\n transform: \"translate3d(100%, 0, 0)\",\n },\n },\n \"fade-out-up\": {\n \"0%\": {\n opacity: 1,\n },\n \"100%\": {\n opacity: 0,\n transform: \"translate3d(0, -100%, 0)\",\n },\n },\n \"slide-in-down\": {\n \"0%\": {\n visibility: \"visible\",\n transform: \"translate3d(0, -100%, 0)\",\n },\n \"100%\": {\n transform: \"translate3d(0, 0, 0)\",\n },\n },\n \"slide-in-left\": {\n \"0%\": {\n visibility: \"visible\",\n transform: \"translate3d(-100%, 0, 0)\",\n },\n \"100%\": {\n transform: \"translate3d(0, 0, 0)\",\n },\n },\n \"slide-in-right\": {\n \"0%\": {\n visibility: \"visible\",\n transform: \"translate3d(100%, 0, 0)\",\n },\n \"100%\": {\n transform: \"translate3d(0, 0, 0)\",\n },\n },\n \"slide-in-up\": {\n \"0%\": {\n visibility: \"visible\",\n transform: \"translate3d(0, 100%, 0)\",\n },\n \"100%\": {\n transform: \"translate3d(0, 0, 0)\",\n },\n },\n \"slide-out-down\": {\n \"0%\": {\n transform: \"translate3d(0, 0, 0)\",\n },\n \"100%\": {\n visibility: \"hidden\",\n transform: \"translate3d(0, 100%, 0)\",\n },\n },\n \"slide-out-left\": {\n \"0%\": {\n transform: \"translate3d(0, 0, 0)\",\n },\n \"100%\": {\n visibility: \"hidden\",\n transform: \"translate3d(-100%, 0, 0)\",\n },\n },\n \"slide-out-right\": {\n \"0%\": {\n transform: \"translate3d(0, 0, 0)\",\n },\n \"100%\": {\n visibility: \"hidden\",\n transform: \"translate3d(100%, 0, 0)\",\n },\n },\n \"slide-out-up\": {\n \"0%\": {\n transform: \"translate3d(0, 0, 0)\",\n },\n \"100%\": {\n visibility: \"hidden\",\n transform: \"translate3d(0, -100%, 0)\",\n },\n },\n \"slide-down\": {\n \"0%\": {\n transform: \"translate3d(0, 0, 0)\",\n },\n \"100%\": {\n transform: \"translate3d(0, 100%, 0)\",\n },\n },\n \"slide-left\": {\n \"0%\": {\n transform: \"translate3d(0, 0, 0)\",\n },\n \"100%\": {\n transform: \"translate3d(-100%, 0, 0)\",\n },\n },\n \"slide-right\": {\n \"0%\": {\n transform: \"translate3d(0, 0, 0)\",\n },\n \"100%\": {\n transform: \"translate3d(100%, 0, 0)\",\n },\n },\n \"slide-up\": {\n \"0%\": {\n transform: \"translate3d(0, 0, 0)\",\n },\n \"100%\": {\n transform: \"translate3d(0, -100%, 0)\",\n },\n },\n \"zoom-in\": {\n \"0%\": {\n opacity: 0,\n transform: \"scale3d(0.3, 0.3, 0.3)\",\n },\n \"50%\": {\n opacity: 1,\n },\n },\n \"zoom-out\": {\n \"0%\": {\n opacity: 1,\n },\n \"50%\": {\n opacity: 0,\n transform: \"scale3d(0.3, 0.3, 0.3)\",\n },\n \"100%\": {\n opacity: 0,\n },\n },\n tada: {\n \"0%\": {\n transform: \"scale3d(1, 1, 1)\",\n },\n \"10%, 20%\": {\n transform: \"scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg)\",\n },\n \"30%, 50%, 70%, 90%\": {\n transform: \"scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)\",\n },\n \"40%, 60%, 80%\": {\n transform: \"scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)\",\n },\n \"100%\": {\n transform: \"scale3d(1, 1, 1)\",\n },\n },\n \"spinner-grow\": {\n \"0%\": {\n transform: \"scale(0)\",\n },\n \"50%\": {\n transform: \"none\",\n opacity: \"1\",\n },\n },\n \"placeholder-wave\": {\n \"100%\": { maskPosition: \"-200% 0%\" },\n },\n \"show-up-clock\": {\n \"0%\": {\n opacity: \"0\",\n transform: \"scale(0.7)\",\n },\n \"100%\": {\n opacity: \"1\",\n transform: \"scale(1)\",\n },\n },\n progress: {\n \"0%\": { transform: \"translateX(-45%)\" },\n \"100%\": { transform: \"translateX(100%)\" },\n },\n \"drop-in\": {\n \"0%\": {\n opacity: \"0\",\n transform: \"scale(0)\",\n animationTimingFunction: \"cubic-bezier(0.34, 1.61, 0.7, 1)\",\n },\n \"100%\": {\n opacity: \"1\",\n transform: \"scale(1)\",\n },\n },\n \"drop-out\": {\n \"0%\": {\n opacity: \"1\",\n transform: \"scale(1)\",\n animationTimingFunction: \"cubic-bezier(0.34, 1.61, 0.7, 1)\",\n },\n \"100%\": { opacity: \"0\", transform: \"scale(0)\" },\n },\n \"fly-in\": {\n \"0%\": {\n opacity: \"0\",\n transform: \"scale3d(0.3, 0.3, 0.3)\",\n transitionTimingFunction: \"cubic-bezier(0.215, 0.61, 0.355, 1)\",\n },\n \"20%\": { transform: \"scale3d(1.1, 1.1, 1.1)\" },\n \"40%\": { transform: \"scale3d(0.9, 0.9, 0.9)\" },\n \"60%\": { opacity: \"1\", transform: \"scale3d(1.03, 1.03, 1.03)\" },\n \"80%\": { transform: \"scale3d(0.97, 0.97, 0.97)\" },\n \"100%\": { opacity: \"1\", transform: \"scale3d(1, 1, 1)\" },\n },\n \"fly-in-up\": {\n \"0%\": {\n opacity: \"0\",\n transform: \"translate3d(0, 1500px, 0)\",\n transitionTimingFunction: \"cubic-bezier(0.215, 0.61, 0.355, 1)\",\n },\n \"60%\": { opacity: \"1\", transform: \"translate3d(0, -20px, 0)\" },\n \"75%\": { transform: \"translate3d(0, 10px, 0)\" },\n \"90%\": { transform: \"translate3d(0, -5px, 0)\" },\n \"100%\": { transform: \"translate3d(0, 0, 0)\" },\n },\n \"fly-in-down\": {\n \"0%\": {\n opacity: \"0\",\n transform: \"translate3d(0, -1500px, 0)\",\n transitionTimingFunction: \"cubic-bezier(0.215, 0.61, 0.355, 1)\",\n },\n \"60%\": { opacity: \"1\", transform: \"translate3d(0, 25px, 0)\" },\n \"75%\": { transform: \"translate3d(0, -10px, 0)\" },\n \"90%\": { transform: \"translate3d(0, 5px, 0)\" },\n \"100%\": { transform: \"none\" },\n },\n \"fly-in-left\": {\n \"0%\": {\n opacity: \"0\",\n transform: \"translate3d(1500px, 0, 0)\",\n transitionTimingFunction: \"cubic-bezier(0.215, 0.61, 0.355, 1)\",\n },\n \"60%\": { opacity: \"1\", transform: \"translate3d(-25px, 0, 0)\" },\n \"75%\": { transform: \"translate3d(10px, 0, 0)\" },\n \"90%\": { transform: \"translate3d(-5px, 0, 0)\" },\n \"100%\": { transform: \"none\" },\n },\n \"fly-in-right\": {\n \"0%\": {\n opacity: \"0\",\n transform: \"translate3d(-1500px, 0, 0)\",\n transitionTimingFunction: \"cubic-bezier(0.215, 0.61, 0.355, 1)\",\n },\n \"60%\": { opacity: \"1\", transform: \"translate3d(25px, 0, 0)\" },\n \"75%\": { transform: \"translate3d(-10px, 0, 0)\" },\n \"90%\": { transform: \"translate3d(5px, 0, 0)\" },\n \"100%\": { transform: \"none\" },\n },\n \"fly-out\": {\n \"0%\": {\n transitionTimingFunction: \"cubic-bezier(0.215, 0.61, 0.355, 1)\",\n },\n \"20%\": {\n transform: \"scale3d(0.9, 0.9, 0.9)\",\n },\n \"50%, 55%\": {\n opacity: \"1\",\n transform: \"scale3d(1.1, 1.1, 1.1)\",\n },\n \"100%\": {\n opacity: \"0\",\n transform: \"scale3d(0.3, 0.3, 0.3)\",\n },\n },\n \"fly-out-up\": {\n \"0%\": {\n transitionTimingFunction: \"cubic-bezier(0.215, 0.61, 0.355, 1)\",\n },\n \"20%\": {\n transform: \"translate3d(0, 10px, 0)\",\n },\n \"40%, 45%\": {\n opacity: \"1\",\n transform: \"translate3d(0, -20px, 0)\",\n },\n \"100%\": {\n opacity: \"0\",\n transform: \"translate3d(0, 2000px, 0)\",\n },\n },\n \"fly-out-down\": {\n \"0%\": {\n transitionTimingFunction: \"cubic-bezier(0.215, 0.61, 0.355, 1)\",\n },\n \"20%\": {\n transform: \"translate3d(0, -10px, 0)\",\n },\n \"40%, 45%\": {\n opacity: \"1\",\n transform: \"translate3d(0, 20px, 0)\",\n },\n \"100%\": {\n opacity: \"0\",\n transform: \"translate3d(0, -2000px, 0)\",\n },\n },\n \"fly-out-left\": {\n \"0%\": {\n transitionTimingFunction: \"cubic-bezier(0.215, 0.61, 0.355, 1)\",\n },\n \"20%\": {\n opacity: \"1\",\n transform: \"translate3d(-20px, 0, 0)\",\n },\n \"100%\": {\n opacity: \"0\",\n transform: \"translate3d(2000px, 0, 0)\",\n },\n },\n \"fly-out-right\": {\n \"0%\": {\n transitionTimingFunction: \"cubic-bezier(0.215, 0.61, 0.355, 1)\",\n },\n \"20%\": {\n opacity: \"1\",\n transform: \"translate3d(20px, 0, 0)\",\n },\n \"100%\": {\n opacity: \"0\",\n transform: \"translate3d(-2000px, 0, 0)\",\n },\n },\n \"browse-in\": {\n \"0%\": { transform: \"scale(0.8) translateZ(0px)\", zIndex: \"-1\" },\n \"10%\": {\n transform: \"scale(0.8) translateZ(0px)\",\n zIndex: \"-1\",\n opacity: \"0.7\",\n },\n \"80%\": {\n transform: \"scale(1.05) translateZ(0px)\",\n zIndex: \"999\",\n opacity: \"1\",\n },\n \"100%\": { transform: \"scale(1) translateZ(0px)\", zIndex: \"999\" },\n },\n \"browse-out\": {\n \"0%\": {\n transform: \"translateX(0%) rotateY(0deg) rotateX(0deg)\",\n zIndex: \"999\",\n },\n \"50%\": {\n transform:\n \"translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px)\",\n zIndex: \"-1\",\n },\n \"80%\": { opacity: \"1\" },\n \"100%\": {\n zIndex: \"-1\",\n opacity: \"0\",\n transform:\n \"translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px)\",\n },\n },\n \"browse-out-left\": {\n \"0%\": {\n transform: \"translateX(0%) rotateY(0deg) rotateX(0deg)\",\n zIndex: \"999\",\n },\n \"50%\": {\n transform:\n \"translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px)\",\n zIndex: \"-1\",\n },\n \"80%\": { opacity: \"1\" },\n \"100%\": {\n zIndex: \"-1\",\n opacity: \"0\",\n transform:\n \"translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px)\",\n },\n },\n \"browse-out-right\": {\n \"0%\": {\n transform: \"translateX(0%) rotateY(0deg) rotateX(0deg)\",\n zIndex: \"999\",\n },\n \"50%\": {\n transform:\n \"translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px)\",\n zIndex: \"1\",\n },\n \"80%\": { opacity: \"1\" },\n \"100%\": {\n zIndex: \"1\",\n opacity: \"0\",\n transform:\n \"translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px)\",\n },\n },\n jiggle: {\n \"0%\": { transform: \"scale3d(1, 1, 1)\" },\n \"30%\": { transform: \"scale3d(1.25, 0.75, 1)\" },\n \"40%\": { transform: \"scale3d(0.75, 1.25, 1)\" },\n \"50%\": { transform: \"scale3d(1.15, 0.85, 1)\" },\n \"65%\": { transform: \"scale3d(0.95, 1.05, 1)\" },\n \"75%\": { transform: \"scale3d(1.05, 0.95, 1)\" },\n \"100%\": { transform: \"scale3d(1, 1, 1)\" },\n },\n flash: {\n \"0%, 50%, 100%\": { opacity: \"1\" },\n \"25%, 75%\": { opacity: \"0\" },\n },\n shake: {\n \"0%, 100%\": {\n transform: \"translateX(0)\",\n },\n \"10%, 30%, 50%, 70%, 90%\": {\n transform: \"translateX(-10px)\",\n },\n \"20%, 40%, 60%, 80%\": {\n transform: \"translateX(10px)\",\n },\n },\n glow: {\n \"0%\": { backgroundColor: \"#fcfcfd\" },\n \"30%\": { backgroundColor: \"#fff6cd\" },\n \"100%\": { backgroundColor: \"#fcfcfd\" },\n },\n },\n colors: {\n primary: {\n DEFAULT: \"#3B71CA\",\n 50: \"#F1F5FB\",\n 100: \"#E3EBF7\",\n 200: \"#C7D7F0\",\n 300: \"#ABC2E8\",\n 400: \"#8FAEE0\",\n 500: \"#6590D5\",\n 600: \"#3061AF\",\n 700: \"#285192\",\n 800: \"#204075\",\n 900: \"#183058\",\n \"accent-100\": \"#d9e4f3\",\n \"accent-200\": \"#cedbee\",\n \"accent-300\": \"#386bc0\",\n },\n secondary: {\n DEFAULT: \"#9FA6B2\",\n 50: \"#F8F9F9\",\n 100: \"#F1F2F4\",\n 200: \"#E4E6E9\",\n 300: \"#D6D9DE\",\n 400: \"#C8CCD3\",\n 500: \"#B3B9C2\",\n 600: \"#848D9C\",\n 700: \"#6B7585\",\n 800: \"#565D6B\",\n 900: \"#404650\",\n \"accent-300\": \"#979ea9\",\n },\n success: {\n DEFAULT: \"#14A44D\",\n 50: \"#EAFCF2\",\n 100: \"#D6FAE4\",\n 200: \"#ACF5C9\",\n 300: \"#83F0AE\",\n 400: \"#59EA93\",\n 500: \"#1CE26B\",\n 600: \"#118C42\",\n 700: \"#0E7537\",\n 800: \"#0C5D2C\",\n 900: \"#094621\",\n \"accent-300\": \"#139c49\",\n },\n danger: {\n DEFAULT: \"#DC4C64\",\n 50: \"#FCF2F4\",\n 100: \"#FAE5E9\",\n 200: \"#F5CCD3\",\n 300: \"#F0B2BD\",\n 400: \"#EB99A6\",\n 500: \"#E37285\",\n 600: \"#D42A46\",\n 700: \"#B0233A\",\n 800: \"#8D1C2F\",\n 900: \"#6A1523\",\n \"accent-300\": \"#d1485f\",\n },\n warning: {\n DEFAULT: \"#E4A11B\",\n 50: \"#FDF8EF\",\n 100: \"#FBF2DE\",\n 200: \"#F7E4BE\",\n 300: \"#F4D79D\",\n 400: \"#F0C97D\",\n 500: \"#EAB54C\",\n 600: \"#C48A17\",\n 700: \"#A37313\",\n 800: \"#825C0F\",\n 900: \"#62450B\",\n \"accent-300\": \"#d9991a\",\n },\n info: {\n DEFAULT: \"#54B4D3\",\n 50: \"#F3FAFC\",\n 100: \"#E7F4F9\",\n 200: \"#CEE9F2\",\n 300: \"#B6DFEC\",\n 400: \"#9ED4E6\",\n 500: \"#79C4DC\",\n 600: \"#34A4CA\",\n 700: \"#2B89A8\",\n 800: \"#236D86\",\n 900: \"#1A5265\",\n \"accent-300\": \"#50abc8\",\n },\n surface: {\n DEFAULT: \"#4f4f4f\",\n dark: \"#424242\",\n },\n body: {\n DEFAULT: \"#fff\",\n dark: \"#303030\",\n },\n },\n },\n },\n }\n);\n" }, { "path": "src/css/tailwind.scss", "content": "@tailwind base;\n\n@layer base {\n html {\n @apply text-surface;\n @apply bg-white;\n }\n html.dark {\n @apply text-neutral-50;\n @apply bg-body-dark;\n }\n}\n\n@tailwind components;\n@tailwind utilities;\n\np {\n @apply leading-[1.6];\n}\n" }, { "path": "src/js/autoinit/Register.js", "content": "class InitRegister {\n constructor() {\n this.inits = [];\n }\n\n get initialized() {\n return this.inits;\n }\n\n isInited(componentName) {\n return this.inits.includes(componentName);\n }\n\n add(componentName) {\n if (!this.isInited(componentName)) {\n this.inits.push(componentName);\n }\n }\n}\n\nexport default InitRegister;\n" }, { "path": "src/js/autoinit/callbacks/free.js", "content": "import EventHandler from \"../../dom/event-handler\";\nimport SelectorEngine from \"../../dom/selector-engine\";\nimport {\n isDisabled,\n getElementFromSelector,\n isVisible,\n getSelectorFromElement,\n} from \"../../util\";\n\nconst dropdownCallback = (component, initSelector) => {\n EventHandler.on(\n document,\n `click.twe.${component.NAME}`,\n initSelector,\n function (event) {\n event.preventDefault();\n component.getOrCreateInstance(this).toggle();\n }\n );\n};\n\nconst tabCallback = (component, initSelector) => {\n EventHandler.on(\n document,\n `click.twe.${component.NAME}.data-api`,\n initSelector,\n function (event) {\n if ([\"A\", \"AREA\"].includes(this.tagName)) {\n event.preventDefault();\n }\n\n if (isDisabled(this)) {\n return;\n }\n\n const data = component.getOrCreateInstance(this);\n data.show();\n }\n );\n};\n\nconst offcanvasCallback = (component, initSelector) => {\n EventHandler.on(\n document,\n `click.twe.${component.NAME}.data-api`,\n initSelector,\n function (event) {\n const target = getElementFromSelector(this);\n\n if ([\"A\", \"AREA\"].includes(this.tagName)) {\n event.preventDefault();\n }\n\n if (isDisabled(this)) {\n return;\n }\n\n EventHandler.one(target, component.EVENT_HIDDEN, () => {\n // focus on trigger when it is closed\n if (isVisible(this)) {\n this.focus();\n }\n });\n\n // avoid conflict when clicking a toggler of an offcanvas, while another is open\n const allReadyOpen = SelectorEngine.findOne(component.OPEN_SELECTOR);\n if (allReadyOpen && allReadyOpen !== target) {\n component.getInstance(allReadyOpen).hide();\n }\n\n const data = component.getOrCreateInstance(target);\n data.toggle(this);\n }\n );\n};\n\nconst buttonCallback = (component, initSelector) => {\n EventHandler.on(\n document,\n `click.twe.${component.NAME}`,\n initSelector,\n (event) => {\n event.preventDefault();\n\n const button = event.target.closest(initSelector);\n const data = component.getOrCreateInstance(button);\n\n data.toggle();\n }\n );\n};\n\nconst rippleCallback = (component, initSelector) => {\n EventHandler.one(\n document,\n \"mousedown\",\n initSelector,\n component.autoInitial(new component())\n );\n};\n\nconst collapseCallback = (component, initSelector) => {\n EventHandler.on(\n document,\n `click.twe.${component.NAME}.data-api`,\n initSelector,\n function (event) {\n // preventDefault only for elements (which change the URL) not inside the collapsible element\n if (\n event.target.tagName === \"A\" ||\n (event.delegateTarget && event.delegateTarget.tagName === \"A\")\n ) {\n event.preventDefault();\n }\n\n const selector = getSelectorFromElement(this);\n const selectorElements = SelectorEngine.find(selector);\n\n selectorElements.forEach((element) => {\n component.getOrCreateInstance(element, { toggle: false }).toggle();\n });\n }\n );\n};\n\nconst tooltipsCallback = (component, initSelector) => {\n const tooltipTriggerList = [].slice.call(\n document.querySelectorAll(initSelector)\n );\n tooltipTriggerList.map(function (tooltipTriggerEl) {\n return new component(tooltipTriggerEl);\n });\n};\n\nconst popoverCallback = (component, initSelector) => {\n const popoverTriggerList = [].slice.call(\n document.querySelectorAll(initSelector)\n );\n popoverTriggerList.map(function (popoverTriggerEl) {\n return new component(popoverTriggerEl);\n });\n};\n\nconst modalCallback = (component, initSelector) => {\n EventHandler.on(\n document,\n `click.twe.${component.NAME}`,\n initSelector,\n function (event) {\n const target = getElementFromSelector(this);\n\n if ([\"A\", \"AREA\"].includes(this.tagName)) {\n event.preventDefault();\n }\n\n EventHandler.one(target, component.EVENT_SHOW, (showEvent) => {\n if (showEvent.defaultPrevented) {\n // only register focus restorer if modal will actually get shown\n return;\n }\n\n EventHandler.one(target, component.EVENT_HIDDEN, () => {\n if (isVisible(this)) {\n this.focus();\n }\n });\n });\n\n // avoid conflict when clicking moddal toggler while another one is open\n const allReadyOpen = SelectorEngine.findOne(\n `[${component.OPEN_SELECTOR}=\"true\"]`\n );\n if (allReadyOpen) {\n component.getInstance(allReadyOpen).hide();\n }\n\n const data = component.getOrCreateInstance(target);\n\n data.toggle(this);\n }\n );\n};\n\nexport {\n dropdownCallback,\n tabCallback,\n offcanvasCallback,\n buttonCallback,\n rippleCallback,\n collapseCallback,\n tooltipsCallback,\n popoverCallback,\n modalCallback,\n};\n" }, { "path": "src/js/autoinit/index.free.js", "content": "import defaultInitSelectors from \"./initSelectors/free\";\nimport { InitTWE } from \"./index\";\n\nconst initTWEInstance = new InitTWE(defaultInitSelectors);\nconst initTWE = initTWEInstance.initTWE;\n\nexport default initTWE;\n" }, { "path": "src/js/autoinit/index.js", "content": "import SelectorEngine from \"../dom/selector-engine\";\nimport jqueryInit from \"./jqueryInit\";\n\n// key => component NAME constant\n// name => component exported by name\nimport InitRegister from \"./Register\";\n\nconst register = new InitRegister();\nlet _defaultInitSelectors;\n\nconst getComponentData = (component) => {\n return _defaultInitSelectors[component.NAME] || null;\n};\n\nconst initComponent = (component, options) => {\n if (\n !component ||\n (!options.allowReinits && register.isInited(component.NAME))\n ) {\n return;\n }\n\n register.add(component.NAME);\n\n const thisComponent = getComponentData(component);\n const isToggler = thisComponent?.isToggler || false;\n\n jqueryInit(component);\n\n if (thisComponent?.advanced) {\n thisComponent?.advanced(component, thisComponent?.selector);\n return;\n }\n\n if (isToggler) {\n thisComponent?.callback(component, thisComponent?.selector);\n\n return;\n }\n\n SelectorEngine.find(thisComponent?.selector).forEach((element) => {\n let instance = component.getInstance(element);\n if (!instance) {\n instance = new component(element);\n if (thisComponent?.onInit) {\n instance[thisComponent.onInit]();\n }\n }\n });\n};\n\n// const init = (components, options) => {\n// components.forEach((component) => initComponent(component, options));\n// };\n\nconst defaultOptions = {\n allowReinits: false,\n checkOtherImports: false,\n};\n\nexport class InitTWE {\n constructor(defaultInitSelectors) {\n _defaultInitSelectors = defaultInitSelectors;\n }\n\n init = (components, options) => {\n components.forEach((component) => initComponent(component, options));\n };\n\n initTWE = (components, options) => {\n const initOptions = { ...defaultOptions, ...options };\n\n const componentList = Object.keys(_defaultInitSelectors).map((element) => {\n const requireAutoinit = Boolean(\n document.querySelector(_defaultInitSelectors[element].selector)\n );\n if (requireAutoinit) {\n const component = components[_defaultInitSelectors[element].name];\n if (\n !component &&\n !register.isInited(element) &&\n initOptions.checkOtherImports\n ) {\n console.warn(\n `Please import ${_defaultInitSelectors[element].name} from \"tw-elements\" package and add it to a object parameter inside \"initTWE\" function`\n );\n }\n return component;\n }\n });\n\n this.init(componentList, initOptions);\n };\n}\n\nexport default InitTWE;\n" }, { "path": "src/js/autoinit/initSelectors/free.js", "content": "import {\n dropdownCallback,\n offcanvasCallback,\n tabCallback,\n buttonCallback,\n rippleCallback,\n collapseCallback,\n tooltipsCallback,\n popoverCallback,\n modalCallback,\n} from \"../callbacks/free\";\n\nconst defaultInitSelectors = {\n carousel: {\n name: \"Carousel\",\n selector: \"[data-twe-carousel-init]\",\n isToggler: false,\n },\n input: {\n name: \"Input\",\n selector: \"[data-twe-input-wrapper-init]\",\n isToggler: false,\n },\n scrollspy: {\n name: \"ScrollSpy\",\n selector: \"[data-twe-spy='scroll']\",\n isToggler: false,\n },\n\n // togglers\n button: {\n name: \"Button\",\n selector: \"[data-twe-toggle='button']\",\n isToggler: true,\n callback: buttonCallback,\n },\n collapse: {\n name: \"Collapse\",\n selector: \"[data-twe-collapse-init]\",\n isToggler: true,\n callback: collapseCallback,\n },\n dropdown: {\n name: \"Dropdown\",\n selector: \"[data-twe-dropdown-toggle-ref]\",\n isToggler: true,\n callback: dropdownCallback,\n },\n ripple: {\n name: \"Ripple\",\n selector: \"[data-twe-ripple-init]\",\n isToggler: true,\n callback: rippleCallback,\n },\n offcanvas: {\n name: \"Offcanvas\",\n selector: \"[data-twe-offcanvas-toggle]\",\n isToggler: true,\n callback: offcanvasCallback,\n },\n tab: {\n name: \"Tab\",\n selector:\n \"[data-twe-toggle='tab'], [data-twe-toggle='pill'], [data-twe-toggle='list']\",\n isToggler: true,\n callback: tabCallback,\n },\n tooltip: {\n name: \"Tooltip\",\n selector: \"[data-twe-toggle='tooltip']\",\n isToggler: false,\n callback: tooltipsCallback,\n },\n popover: {\n name: \"Popover\",\n selector: \"[data-twe-toggle='popover']\",\n isToggler: true,\n callback: popoverCallback,\n },\n modal: {\n name: \"Modal\",\n selector: \"[data-twe-toggle='modal']\",\n isToggler: true,\n callback: modalCallback,\n },\n};\n\nexport default defaultInitSelectors;\n" }, { "path": "src/js/autoinit/jqueryInit.js", "content": "import { getjQuery, onDOMContentLoaded } from \"../util/index\";\n\nconst jqueryInit = (plugin) => {\n onDOMContentLoaded(() => {\n const $ = getjQuery();\n\n if ($) {\n const name = plugin.NAME;\n const JQUERY_NO_CONFLICT = $.fn[name];\n $.fn[name] = plugin.jQueryInterface;\n $.fn[name].Constructor = plugin;\n $.fn[name].noConflict = () => {\n $.fn[name] = JQUERY_NO_CONFLICT;\n return plugin.jQueryInterface;\n };\n }\n });\n};\n\nexport default jqueryInit;\n" }, { "path": "src/js/base-component.js", "content": "import Data from \"./dom/data\";\nimport { executeAfterTransition, getElement } from \"./util/index\";\nimport EventHandler from \"./dom/event-handler\";\n\n/*\n------------------------------------------------------------------------\nConstants\n------------------------------------------------------------------------\n*/\n\nconst VERSION = \"5.1.3\";\n\nclass BaseComponent {\n constructor(element) {\n element = getElement(element);\n\n if (!element) {\n return;\n }\n\n this._element = element;\n Data.setData(this._element, this.constructor.DATA_KEY, this);\n }\n\n dispose() {\n Data.removeData(this._element, this.constructor.DATA_KEY);\n EventHandler.off(this._element, this.constructor.EVENT_KEY);\n\n Object.getOwnPropertyNames(this).forEach((propertyName) => {\n this[propertyName] = null;\n });\n }\n\n _queueCallback(callback, element, isAnimated = true) {\n executeAfterTransition(callback, element, isAnimated);\n }\n\n /** Static */\n\n static getInstance(element) {\n return Data.getData(getElement(element), this.DATA_KEY);\n }\n\n static getOrCreateInstance(element, config = {}) {\n return (\n this.getInstance(element) ||\n new this(element, typeof config === \"object\" ? config : null)\n );\n }\n\n static get VERSION() {\n return VERSION;\n }\n\n static get NAME() {\n throw new Error(\n 'You have to implement the static method \"NAME\", for each component!'\n );\n }\n\n static get DATA_KEY() {\n return `twe.${this.NAME}`;\n }\n\n static get EVENT_KEY() {\n return `.${this.DATA_KEY}`;\n }\n}\n\nexport default BaseComponent;\n" }, { "path": "src/js/dom/data.js", "content": "/*\n------------------------------------------------------------------------\nConstants\n------------------------------------------------------------------------\n*/\n\nconst mapData = (() => {\n const storeData = {};\n let id = 1;\n return {\n set(element, key, data) {\n if (typeof element[key] === \"undefined\") {\n element[key] = {\n key,\n id,\n };\n id++;\n }\n\n storeData[element[key].id] = data;\n },\n get(element, key) {\n if (!element || typeof element[key] === \"undefined\") {\n return null;\n }\n\n const keyProperties = element[key];\n if (keyProperties.key === key) {\n return storeData[keyProperties.id];\n }\n\n return null;\n },\n delete(element, key) {\n if (typeof element[key] === \"undefined\") {\n return;\n }\n\n const keyProperties = element[key];\n if (keyProperties.key === key) {\n delete storeData[keyProperties.id];\n delete element[key];\n }\n },\n };\n})();\n\nconst Data = {\n setData(instance, key, data) {\n mapData.set(instance, key, data);\n },\n getData(instance, key) {\n return mapData.get(instance, key);\n },\n removeData(instance, key) {\n mapData.delete(instance, key);\n },\n};\n\nexport default Data;\n" }, { "path": "src/js/dom/event-handler.js", "content": "import { getjQuery } from \"../util/index\";\n\n/*\n------------------------------------------------------------------------\nConstants\n------------------------------------------------------------------------\n*/\n\nconst namespaceRegex = /[^.]*(?=\\..*)\\.|.*/;\nconst stripNameRegex = /\\..*/;\nconst stripUidRegex = /::\\d+$/;\nconst eventRegistry = {}; // Events storage\nlet uidEvent = 1;\nconst customEvents = {\n mouseenter: \"mouseover\",\n mouseleave: \"mouseout\",\n};\nconst customEventsRegex = /^(mouseenter|mouseleave)/i;\nconst nativeEvents = new Set([\n \"click\",\n \"dblclick\",\n \"mouseup\",\n \"mousedown\",\n \"contextmenu\",\n \"mousewheel\",\n \"DOMMouseScroll\",\n \"mouseover\",\n \"mouseout\",\n \"mousemove\",\n \"selectstart\",\n \"selectend\",\n \"keydown\",\n \"keypress\",\n \"keyup\",\n \"orientationchange\",\n \"touchstart\",\n \"touchmove\",\n \"touchend\",\n \"touchcancel\",\n \"pointerdown\",\n \"pointermove\",\n \"pointerup\",\n \"pointerleave\",\n \"pointercancel\",\n \"gesturestart\",\n \"gesturechange\",\n \"gestureend\",\n \"focus\",\n \"blur\",\n \"change\",\n \"reset\",\n \"select\",\n \"submit\",\n \"focusin\",\n \"focusout\",\n \"load\",\n \"unload\",\n \"beforeunload\",\n \"resize\",\n \"move\",\n \"DOMContentLoaded\",\n \"readystatechange\",\n \"error\",\n \"abort\",\n \"scroll\",\n]);\n\n/**\n * ------------------------------------------------------------------------\n * Private methods\n * ------------------------------------------------------------------------\n */\n\nfunction getUidEvent(element, uid) {\n return (uid && `${uid}::${uidEvent++}`) || element.uidEvent || uidEvent++;\n}\n\nfunction getEvent(element) {\n const uid = getUidEvent(element);\n\n element.uidEvent = uid;\n eventRegistry[uid] = eventRegistry[uid] || {};\n\n return eventRegistry[uid];\n}\n\nfunction bootstrapHandler(element, fn) {\n return function handler(event) {\n event.delegateTarget = element;\n\n if (handler.oneOff) {\n EventHandler.off(element, event.type, fn);\n }\n\n return fn.apply(element, [event]);\n };\n}\n\nfunction bootstrapDelegationHandler(element, selector, fn) {\n return function handler(event) {\n const domElements = element.querySelectorAll(selector);\n\n for (\n let { target } = event;\n target && target !== this;\n target = target.parentNode\n ) {\n for (let i = domElements.length; i--; \"\") {\n if (domElements[i] === target) {\n event.delegateTarget = target;\n\n if (handler.oneOff) {\n EventHandler.off(element, event.type, fn);\n }\n\n return fn.apply(target, [event]);\n }\n }\n }\n\n // To please ESLint\n return null;\n };\n}\n\nfunction findHandler(events, handler, delegationSelector = null) {\n const uidEventList = Object.keys(events);\n\n for (let i = 0, len = uidEventList.length; i < len; i++) {\n const event = events[uidEventList[i]];\n\n if (\n event.originalHandler === handler &&\n event.delegationSelector === delegationSelector\n ) {\n return event;\n }\n }\n\n return null;\n}\n\nfunction normalizeParams(originalTypeEvent, handler, delegationFn) {\n const delegation = typeof handler === \"string\";\n const originalHandler = delegation ? delegationFn : handler;\n\n let typeEvent = getTypeEvent(originalTypeEvent);\n const isNative = nativeEvents.has(typeEvent);\n\n if (!isNative) {\n typeEvent = originalTypeEvent;\n }\n\n return [delegation, originalHandler, typeEvent];\n}\n\nfunction addHandler(element, originalTypeEvent, handler, delegationFn, oneOff) {\n if (typeof originalTypeEvent !== \"string\" || !element) {\n return;\n }\n\n if (!handler) {\n handler = delegationFn;\n delegationFn = null;\n }\n\n // in case of mouseenter or mouseleave wrap the handler within a function that checks for its DOM position\n // this prevents the handler from being dispatched the same way as mouseover or mouseout does\n if (customEventsRegex.test(originalTypeEvent)) {\n const wrapFn = (fn) => {\n return function (event) {\n if (\n !event.relatedTarget ||\n (event.relatedTarget !== event.delegateTarget &&\n !event.delegateTarget.contains(event.relatedTarget))\n ) {\n return fn.call(this, event);\n }\n };\n };\n\n if (delegationFn) {\n delegationFn = wrapFn(delegationFn);\n } else {\n handler = wrapFn(handler);\n }\n }\n\n const [delegation, originalHandler, typeEvent] = normalizeParams(\n originalTypeEvent,\n handler,\n delegationFn\n );\n const events = getEvent(element);\n const handlers = events[typeEvent] || (events[typeEvent] = {});\n const previousFn = findHandler(\n handlers,\n originalHandler,\n delegation ? handler : null\n );\n\n if (previousFn) {\n previousFn.oneOff = previousFn.oneOff && oneOff;\n\n return;\n }\n\n const uid = getUidEvent(\n originalHandler,\n originalTypeEvent.replace(namespaceRegex, \"\")\n );\n const fn = delegation\n ? bootstrapDelegationHandler(element, handler, delegationFn)\n : bootstrapHandler(element, handler);\n\n fn.delegationSelector = delegation ? handler : null;\n fn.originalHandler = originalHandler;\n fn.oneOff = oneOff;\n fn.uidEvent = uid;\n handlers[uid] = fn;\n\n element.addEventListener(typeEvent, fn, delegation);\n}\n\nfunction removeHandler(\n element,\n events,\n typeEvent,\n handler,\n delegationSelector\n) {\n const fn = findHandler(events[typeEvent], handler, delegationSelector);\n\n if (!fn) {\n return;\n }\n\n element.removeEventListener(typeEvent, fn, Boolean(delegationSelector));\n delete events[typeEvent][fn.uidEvent];\n}\n\nfunction removeNamespacedHandlers(element, events, typeEvent, namespace) {\n const storeElementEvent = events[typeEvent] || {};\n\n Object.keys(storeElementEvent).forEach((handlerKey) => {\n if (handlerKey.includes(namespace)) {\n const event = storeElementEvent[handlerKey];\n\n removeHandler(\n element,\n events,\n typeEvent,\n event.originalHandler,\n event.delegationSelector\n );\n }\n });\n}\n\nfunction getTypeEvent(event) {\n // allow to get the native events from namespaced events ('click.twe.button' --> 'click')\n event = event.replace(stripNameRegex, \"\");\n return customEvents[event] || event;\n}\n\nconst EventHandler = {\n on(element, event, handler, delegationFn) {\n addHandler(element, event, handler, delegationFn, false);\n },\n\n one(element, event, handler, delegationFn) {\n addHandler(element, event, handler, delegationFn, true);\n },\n\n off(element, originalTypeEvent, handler, delegationFn) {\n if (typeof originalTypeEvent !== \"string\" || !element) {\n return;\n }\n\n const [delegation, originalHandler, typeEvent] = normalizeParams(\n originalTypeEvent,\n handler,\n delegationFn\n );\n const inNamespace = typeEvent !== originalTypeEvent;\n const events = getEvent(element);\n const isNamespace = originalTypeEvent.startsWith(\".\");\n\n if (typeof originalHandler !== \"undefined\") {\n // Simplest case: handler is passed, remove that listener ONLY.\n if (!events || !events[typeEvent]) {\n return;\n }\n\n removeHandler(\n element,\n events,\n typeEvent,\n originalHandler,\n delegation ? handler : null\n );\n return;\n }\n\n if (isNamespace) {\n Object.keys(events).forEach((elementEvent) => {\n removeNamespacedHandlers(\n element,\n events,\n elementEvent,\n originalTypeEvent.slice(1)\n );\n });\n }\n\n const storeElementEvent = events[typeEvent] || {};\n Object.keys(storeElementEvent).forEach((keyHandlers) => {\n const handlerKey = keyHandlers.replace(stripUidRegex, \"\");\n\n if (!inNamespace || originalTypeEvent.includes(handlerKey)) {\n const event = storeElementEvent[keyHandlers];\n\n removeHandler(\n element,\n events,\n typeEvent,\n event.originalHandler,\n event.delegationSelector\n );\n }\n });\n },\n\n trigger(element, event, args) {\n if (typeof event !== \"string\" || !element) {\n return null;\n }\n\n const $ = getjQuery();\n const typeEvent = getTypeEvent(event);\n const inNamespace = event !== typeEvent;\n const isNative = nativeEvents.has(typeEvent);\n\n let jQueryEvent;\n let bubbles = true;\n let nativeDispatch = true;\n let defaultPrevented = false;\n let evt = null;\n\n if (inNamespace && $) {\n jQueryEvent = $.Event(event, args);\n\n $(element).trigger(jQueryEvent);\n bubbles = !jQueryEvent.isPropagationStopped();\n nativeDispatch = !jQueryEvent.isImmediatePropagationStopped();\n defaultPrevented = jQueryEvent.isDefaultPrevented();\n }\n\n if (isNative) {\n evt = document.createEvent(\"HTMLEvents\");\n evt.initEvent(typeEvent, bubbles, true);\n } else {\n evt = new CustomEvent(event, {\n bubbles,\n cancelable: true,\n });\n }\n\n // merge custom information in our event\n if (typeof args !== \"undefined\") {\n Object.keys(args).forEach((key) => {\n Object.defineProperty(evt, key, {\n get() {\n return args[key];\n },\n });\n });\n }\n\n if (defaultPrevented) {\n evt.preventDefault();\n }\n\n if (nativeDispatch) {\n element.dispatchEvent(evt);\n }\n\n if (evt.defaultPrevented && typeof jQueryEvent !== \"undefined\") {\n jQueryEvent.preventDefault();\n }\n\n return evt;\n },\n};\n\nexport const EventHandlerMulti = {\n on(element, eventsName, handler, delegationFn) {\n const events = eventsName.split(\" \");\n\n for (let i = 0; i < events.length; i++) {\n EventHandler.on(element, events[i], handler, delegationFn);\n }\n },\n off(element, originalTypeEvent, handler, delegationFn) {\n const events = originalTypeEvent.split(\" \");\n\n for (let i = 0; i < events.length; i++) {\n EventHandler.off(element, events[i], handler, delegationFn);\n }\n },\n};\n\nexport default EventHandler;\n" }, { "path": "src/js/dom/manipulator.js", "content": "function normalizeData(val) {\n if (val === \"true\") {\n return true;\n }\n\n if (val === \"false\") {\n return false;\n }\n\n if (val === Number(val).toString()) {\n return Number(val);\n }\n\n if (val === \"\" || val === \"null\") {\n return null;\n }\n\n return val;\n}\n\nfunction normalizeDataKey(key) {\n return key.replace(/[A-Z]/g, (chr) => `-${chr.toLowerCase()}`);\n}\n\nconst Manipulator = {\n setDataAttribute(element, key, value) {\n element.setAttribute(`data-twe-${normalizeDataKey(key)}`, value);\n },\n\n removeDataAttribute(element, key) {\n element.removeAttribute(`data-twe-${normalizeDataKey(key)}`);\n },\n\n getDataAttributes(element) {\n if (!element) {\n return {};\n }\n\n const attributes = {};\n\n Object.keys(element.dataset)\n .filter((key) => key.startsWith(\"twe\"))\n .forEach((key) => {\n if (key.startsWith(\"tweClass\")) {\n return;\n }\n\n let pureKey = key.replace(/^twe/, \"\");\n pureKey =\n pureKey.charAt(0).toLowerCase() + pureKey.slice(1, pureKey.length);\n attributes[pureKey] = normalizeData(element.dataset[key]);\n });\n\n return attributes;\n },\n\n getDataClassAttributes(element) {\n if (!element) {\n return {};\n }\n\n const attributes = {\n ...element.dataset,\n };\n\n Object.keys(attributes)\n .filter((key) => key.startsWith(\"tweClass\"))\n .forEach((key) => {\n let pureKey = key.replace(/^tweClass/, \"\");\n pureKey =\n pureKey.charAt(0).toLowerCase() + pureKey.slice(1, pureKey.length);\n attributes[pureKey] = normalizeData(attributes[key]);\n });\n\n return attributes;\n },\n\n getDataAttribute(element, key) {\n return normalizeData(\n element.getAttribute(`data-twe-${normalizeDataKey(key)}`)\n );\n },\n\n offset(element) {\n const rect = element.getBoundingClientRect();\n\n return {\n top: rect.top + document.body.scrollTop,\n left: rect.left + document.body.scrollLeft,\n };\n },\n\n position(element) {\n return {\n top: element.offsetTop,\n left: element.offsetLeft,\n };\n },\n\n style(element, style) {\n Object.assign(element.style, style);\n },\n\n toggleClass(element, classNameOrList) {\n if (!element) {\n return;\n }\n\n _classNameOrListToArray(classNameOrList).forEach((className) => {\n if (element.classList.contains(className)) {\n element.classList.remove(className);\n } else {\n element.classList.add(className);\n }\n });\n },\n\n addClass(element, classNameOrList) {\n _classNameOrListToArray(classNameOrList).forEach(\n (className) =>\n !element.classList.contains(className) &&\n element.classList.add(className)\n );\n },\n\n addStyle(element, style) {\n Object.keys(style).forEach((property) => {\n element.style[property] = style[property];\n });\n },\n\n removeClass(element, classNameOrList) {\n _classNameOrListToArray(classNameOrList).forEach(\n (className) =>\n element.classList.contains(className) &&\n element.classList.remove(className)\n );\n },\n\n hasClass(element, className) {\n return element.classList.contains(className);\n },\n\n maxOffset(element) {\n const rect = element.getBoundingClientRect();\n\n return {\n top:\n rect.top +\n Math.max(\n document.body.scrollTop,\n document.documentElement.scrollTop,\n window.scrollY\n ),\n left:\n rect.left +\n Math.max(\n document.body.scrollLeft,\n document.documentElement.scrollLeft,\n window.scrollX\n ),\n };\n },\n};\n\nfunction _classNameOrListToArray(classNameOrList) {\n if (typeof classNameOrList === \"string\") {\n return classNameOrList.split(\" \");\n } else if (Array.isArray(classNameOrList)) {\n return classNameOrList;\n }\n\n return false;\n}\n\nexport default Manipulator;\n" }, { "path": "src/js/dom/selector-engine.js", "content": "/*\n------------------------------------------------------------------------\nConstants\n------------------------------------------------------------------------\n*/\n\nimport { isDisabled, isVisible } from \"../util/index\";\n\nconst NODE_TEXT = 3;\n\nconst SelectorEngine = {\n closest(element, selector) {\n return element.closest(selector);\n },\n\n matches(element, selector) {\n return element.matches(selector);\n },\n\n find(selector, element = document.documentElement) {\n return [].concat(\n ...Element.prototype.querySelectorAll.call(element, selector)\n );\n },\n\n findOne(selector, element = document.documentElement) {\n return Element.prototype.querySelector.call(element, selector);\n },\n\n children(element, selector) {\n const children = [].concat(...element.children);\n\n return children.filter((child) => child.matches(selector));\n },\n\n parents(element, selector) {\n const parents = [];\n\n let ancestor = element.parentNode;\n\n while (\n ancestor &&\n ancestor.nodeType === Node.ELEMENT_NODE &&\n ancestor.nodeType !== NODE_TEXT\n ) {\n if (this.matches(ancestor, selector)) {\n parents.push(ancestor);\n }\n\n ancestor = ancestor.parentNode;\n }\n\n return parents;\n },\n\n prev(element, selector) {\n let previous = element.previousElementSibling;\n\n while (previous) {\n if (previous.matches(selector)) {\n return [previous];\n }\n\n previous = previous.previousElementSibling;\n }\n\n return [];\n },\n\n next(element, selector) {\n let next = element.nextElementSibling;\n\n while (next) {\n if (this.matches(next, selector)) {\n return [next];\n }\n\n next = next.nextElementSibling;\n }\n\n return [];\n },\n\n focusableChildren(element) {\n const focusables = [\n \"a\",\n \"button\",\n \"input\",\n \"textarea\",\n \"select\",\n \"details\",\n \"[tabindex]\",\n '[contenteditable=\"true\"]',\n ]\n .map((selector) => `${selector}:not([tabindex^=\"-\"])`)\n .join(\", \");\n\n return this.find(focusables, element).filter(\n (el) => !isDisabled(el) && isVisible(el)\n );\n },\n};\n\nexport default SelectorEngine;\n" }, { "path": "src/js/free/components/button.js", "content": "import BaseComponent from \"../../base-component\";\n\n/*\n------------------------------------------------------------------------\nConstants\n------------------------------------------------------------------------\n*/\n\nconst NAME = \"button\";\n\nconst CLASS_NAME_ACTIVE = \"active\";\n\n/*\n------------------------------------------------------------------------\nClass Definition\n------------------------------------------------------------------------\n*/\n\nclass Button extends BaseComponent {\n // Getters\n\n static get NAME() {\n return NAME;\n }\n\n // Public\n\n toggle() {\n // Toggle class and sync the `aria-pressed` attribute with the return value of the `.toggle()` method\n this._element.setAttribute(\n \"aria-pressed\",\n this._element.classList.toggle(CLASS_NAME_ACTIVE)\n );\n }\n\n // Static\n\n static jQueryInterface(config) {\n return this.each(function () {\n const data = Button.getOrCreateInstance(this);\n\n if (config === \"toggle\") {\n data[config]();\n }\n });\n }\n}\n\nexport default Button;\n" }, { "path": "src/js/free/components/carousel.js", "content": "import {\n getElementFromSelector,\n isRTL,\n isVisible,\n getNextActiveElement,\n reflow,\n triggerTransitionEnd,\n typeCheckConfig,\n} from \"../../util/index\";\nimport EventHandler from \"../../dom/event-handler\";\nimport Manipulator from \"../../dom/manipulator\";\nimport SelectorEngine from \"../../dom/selector-engine\";\nimport BaseComponent from \"../../base-component\";\n\n/*\n------------------------------------------------------------------------\nConstants\n------------------------------------------------------------------------\n*/\n\nconst NAME = \"carousel\";\nconst DATA_KEY = \"twe.carousel\";\nconst EVENT_KEY = `.${DATA_KEY}`;\nconst DATA_API_KEY = \".data-api\";\n\nconst ARROW_LEFT_KEY = \"ArrowLeft\";\nconst ARROW_RIGHT_KEY = \"ArrowRight\";\nconst TOUCHEVENT_COMPAT_WAIT = 500; // Time for mouse compat events to fire after touch\nconst SWIPE_THRESHOLD = 40;\n\nconst Default = {\n interval: 5000,\n keyboard: true,\n ride: false,\n pause: \"hover\",\n wrap: true,\n touch: true,\n};\n\nconst DefaultType = {\n interval: \"(number|boolean)\",\n keyboard: \"boolean\",\n ride: \"(boolean|string)\",\n pause: \"(string|boolean)\",\n wrap: \"boolean\",\n touch: \"boolean\",\n};\n\nconst DefaultClasses = {\n pointer: \"touch-pan-y\",\n block: \"!block\",\n visible:\n \"data-[twe-carousel-fade]:opacity-100 data-[twe-carousel-fade]:z-[1]\",\n invisible:\n \"data-[twe-carousel-fade]:z-0 data-[twe-carousel-fade]:opacity-0 data-[twe-carousel-fade]:duration-[600ms] data-[twe-carousel-fade]:delay-600\",\n slideRight: \"translate-x-full\",\n slideLeft: \"-translate-x-full\",\n};\n\nconst DefaultClassesType = {\n pointer: \"string\",\n block: \"string\",\n visible: \"string\",\n invisible: \"string\",\n slideRight: \"string\",\n slideLeft: \"string\",\n};\n\nconst ORDER_NEXT = \"next\";\nconst ORDER_PREV = \"prev\";\nconst DIRECTION_LEFT = \"left\";\nconst DIRECTION_RIGHT = \"right\";\n\nconst KEY_TO_DIRECTION = {\n [ARROW_LEFT_KEY]: DIRECTION_RIGHT,\n [ARROW_RIGHT_KEY]: DIRECTION_LEFT,\n};\n\nconst EVENT_SLIDE = `slide${EVENT_KEY}`;\nconst EVENT_SLID = `slid${EVENT_KEY}`;\nconst EVENT_KEYDOWN = `keydown${EVENT_KEY}`;\nconst EVENT_MOUSEENTER = `mouseenter${EVENT_KEY}`;\nconst EVENT_MOUSELEAVE = `mouseleave${EVENT_KEY}`;\nconst EVENT_TOUCHSTART = `touchstart${EVENT_KEY}`;\nconst EVENT_TOUCHMOVE = `touchmove${EVENT_KEY}`;\nconst EVENT_TOUCHEND = `touchend${EVENT_KEY}`;\nconst EVENT_POINTERDOWN = `pointerdown${EVENT_KEY}`;\nconst EVENT_POINTERUP = `pointerup${EVENT_KEY}`;\nconst EVENT_DRAG_START = `dragstart${EVENT_KEY}`;\nconst EVENT_LOAD_DATA_API = `load${EVENT_KEY}${DATA_API_KEY}`;\nconst EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`;\n\nconst ATTR_ACTIVE = \"data-twe-carousel-active\";\nconst ATTR_END = \"data-twe-carousel-item-end\";\nconst ATTR_START = \"data-twe-carousel-item-start\";\nconst ATTR_NEXT = \"data-twe-carousel-item-next\";\nconst ATTR_PREV = \"data-twe-carousel-item-prev\";\nconst ATTR_POINTER_EVENT = \"data-twe-carousel-pointer-event\";\n\nconst SELECTOR_DATA_CAROUSEL_INIT = \"[data-twe-carousel-init]\";\nconst SELECTOR_DATA_ACTIVE = \"[data-twe-carousel-active]\";\nconst SELECTOR_DATA_ITEM = \"[data-twe-carousel-item]\";\nconst SELECTOR_DATA_ACTIVE_ITEM = `${SELECTOR_DATA_ACTIVE}${SELECTOR_DATA_ITEM}`;\nconst SELECTOR_DATA_ITEM_IMG = `${SELECTOR_DATA_ITEM} img`;\nconst SELECTOR_DATA_NEXT_PREV =\n \"[data-twe-carousel-item-next], [data-twe-carousel-item-prev]\";\nconst SELECTOR_DATA_INDICATORS = \"[data-twe-carousel-indicators]\";\nconst SELECTOR_INDICATOR = \"[data-twe-target]\";\nconst SELECTOR_DATA_SLIDE = \"[data-twe-slide], [data-twe-slide-to]\";\n\nconst POINTER_TYPE_TOUCH = \"touch\";\nconst POINTER_TYPE_PEN = \"pen\";\n\n/*\n------------------------------------------------------------------------\nClass Definition\n------------------------------------------------------------------------\n*/\nclass Carousel extends BaseComponent {\n constructor(element, config, classes) {\n super(element);\n\n this._items = null;\n this._interval = null;\n this._activeElement = null;\n this._isPaused = false;\n this._isSliding = false;\n this.touchTimeout = null;\n this.touchStartX = 0;\n this.touchDeltaX = 0;\n\n this._config = this._getConfig(config);\n this._classes = this._getClasses(classes);\n this._indicatorsElement = SelectorEngine.findOne(\n SELECTOR_DATA_INDICATORS,\n this._element\n );\n this._touchSupported =\n \"ontouchstart\" in document.documentElement ||\n navigator.maxTouchPoints > 0;\n this._pointerEvent = Boolean(window.PointerEvent);\n\n this._setActiveElementClass();\n this._addEventListeners();\n this._didInit = false;\n this._init();\n if (this._config.ride === \"carousel\") {\n this.cycle();\n }\n }\n\n // Getters\n\n static get Default() {\n return Default;\n }\n\n static get NAME() {\n return NAME;\n }\n\n // Public\n\n next() {\n this._slide(ORDER_NEXT);\n }\n\n nextWhenVisible() {\n // Don't call next when the page isn't visible\n // or the carousel or its parent isn't visible\n if (!document.hidden && isVisible(this._element)) {\n this.next();\n }\n }\n\n prev() {\n this._slide(ORDER_PREV);\n }\n\n pause(event) {\n if (!event) {\n this._isPaused = true;\n }\n\n if (SelectorEngine.findOne(SELECTOR_DATA_NEXT_PREV, this._element)) {\n triggerTransitionEnd(this._element);\n this.cycle(true);\n }\n\n clearInterval(this._interval);\n this._interval = null;\n }\n\n cycle(event) {\n if (!event) {\n this._isPaused = false;\n }\n\n if (this._interval) {\n clearInterval(this._interval);\n this._interval = null;\n }\n\n if (this._config && this._config.interval && !this._isPaused) {\n this._updateInterval();\n\n this._interval = setInterval(\n (document.visibilityState ? this.nextWhenVisible : this.next).bind(\n this\n ),\n this._config.interval\n );\n }\n }\n\n to(index) {\n this._activeElement = SelectorEngine.findOne(\n SELECTOR_DATA_ACTIVE_ITEM,\n this._element\n );\n const activeIndex = this._getItemIndex(this._activeElement);\n\n if (index > this._items.length - 1 || index < 0) {\n return;\n }\n\n if (this._isSliding) {\n EventHandler.one(this._element, EVENT_SLID, () => this.to(index));\n return;\n }\n\n if (activeIndex === index) {\n this.pause();\n this.cycle();\n return;\n }\n\n const order = index > activeIndex ? ORDER_NEXT : ORDER_PREV;\n\n this._slide(order, this._items[index]);\n }\n\n dispose() {\n EventHandler.off(\n document,\n EVENT_CLICK_DATA_API,\n SELECTOR_DATA_SLIDE,\n Carousel.dataApiClickHandler\n );\n EventHandler.off(window, EVENT_LOAD_DATA_API);\n\n super.dispose();\n }\n\n // Private\n _init() {\n if (this._didInit) {\n return;\n }\n EventHandler.on(\n document,\n EVENT_CLICK_DATA_API,\n SELECTOR_DATA_SLIDE,\n Carousel.dataApiClickHandler\n );\n\n EventHandler.on(window, EVENT_LOAD_DATA_API, () => {\n const carousels = SelectorEngine.find(SELECTOR_DATA_CAROUSEL_INIT);\n\n for (let i = 0, len = carousels.length; i < len; i++) {\n Carousel.carouselInterface(\n carousels[i],\n Carousel.getInstance(carousels[i])\n );\n }\n });\n\n this._didInit = true;\n }\n\n _getConfig(config) {\n config = {\n ...Default,\n ...Manipulator.getDataAttributes(this._element),\n ...(typeof config === \"object\" ? config : {}),\n };\n typeCheckConfig(NAME, config, DefaultType);\n return config;\n }\n\n _getClasses(classes) {\n const dataAttributes = Manipulator.getDataClassAttributes(this._element);\n\n classes = {\n ...DefaultClasses,\n ...dataAttributes,\n ...classes,\n };\n\n typeCheckConfig(NAME, classes, DefaultClassesType);\n\n return classes;\n }\n\n _enableCycle() {\n if (!this._config.ride) {\n return;\n }\n\n if (this._isSliding) {\n EventHandler.one(this._element, EVENT_SLID, () => this.cycle());\n return;\n }\n\n this.cycle();\n }\n\n _applyInitialClasses() {\n const activeElement = SelectorEngine.findOne(\n SELECTOR_DATA_ACTIVE_ITEM,\n this._element\n );\n activeElement.classList.add(\n this._classes.block,\n ...this._classes.visible.split(\" \")\n );\n\n this._setActiveIndicatorElement(activeElement);\n }\n\n _handleSwipe() {\n const absDeltax = Math.abs(this.touchDeltaX);\n\n if (absDeltax <= SWIPE_THRESHOLD) {\n return;\n }\n\n const direction = absDeltax / this.touchDeltaX;\n\n this.touchDeltaX = 0;\n\n if (!direction) {\n return;\n }\n\n this._slide(direction > 0 ? DIRECTION_RIGHT : DIRECTION_LEFT);\n }\n\n _setActiveElementClass() {\n this._activeElement = SelectorEngine.findOne(\n SELECTOR_DATA_ACTIVE_ITEM,\n this._element\n );\n Manipulator.addClass(this._activeElement, \"hidden\");\n }\n\n _addEventListeners() {\n if (this._config.keyboard) {\n EventHandler.on(this._element, EVENT_KEYDOWN, (event) =>\n this._keydown(event)\n );\n }\n\n if (this._config.pause === \"hover\") {\n EventHandler.on(this._element, EVENT_MOUSEENTER, (event) =>\n this.pause(event)\n );\n EventHandler.on(this._element, EVENT_MOUSELEAVE, (event) =>\n this._enableCycle(event)\n );\n }\n\n if (this._config.touch && this._touchSupported) {\n this._addTouchEventListeners();\n }\n\n this._applyInitialClasses();\n }\n\n _addTouchEventListeners() {\n const hasPointerPenTouch = (event) => {\n return (\n this._pointerEvent &&\n (event.pointerType === POINTER_TYPE_PEN ||\n event.pointerType === POINTER_TYPE_TOUCH)\n );\n };\n\n const start = (event) => {\n if (hasPointerPenTouch(event)) {\n this.touchStartX = event.clientX;\n } else if (!this._pointerEvent) {\n this.touchStartX = event.touches[0].clientX;\n }\n };\n\n const move = (event) => {\n // ensure swiping with one touch and not pinching\n this.touchDeltaX =\n event.touches && event.touches.length > 1\n ? 0\n : event.touches[0].clientX - this.touchStartX;\n };\n\n const end = (event) => {\n if (hasPointerPenTouch(event)) {\n this.touchDeltaX = event.clientX - this.touchStartX;\n }\n\n this._handleSwipe();\n if (this._config.pause === \"hover\") {\n // If it's a touch-enabled device, mouseenter/leave are fired as\n // part of the mouse compatibility events on first tap - the carousel\n // would stop cycling until user tapped out of it;\n // here, we listen for touchend, explicitly pause the carousel\n // (as if it's the second time we tap on it, mouseenter compat event\n // is NOT fired) and after a timeout (to allow for mouse compatibility\n // events to fire) we explicitly restart cycling\n\n this.pause();\n if (this.touchTimeout) {\n clearTimeout(this.touchTimeout);\n }\n\n this.touchTimeout = setTimeout(\n (event) => this._enableCycle(event),\n TOUCHEVENT_COMPAT_WAIT + this._config.interval\n );\n }\n };\n\n SelectorEngine.find(SELECTOR_DATA_ITEM_IMG, this._element).forEach(\n (itemImg) => {\n EventHandler.on(itemImg, EVENT_DRAG_START, (event) =>\n event.preventDefault()\n );\n }\n );\n\n if (this._pointerEvent) {\n EventHandler.on(this._element, EVENT_POINTERDOWN, (event) =>\n start(event)\n );\n EventHandler.on(this._element, EVENT_POINTERUP, (event) => end(event));\n\n this._element.classList.add(this._classes.pointer);\n this._element.setAttribute(`${ATTR_POINTER_EVENT}`, \"\");\n } else {\n EventHandler.on(this._element, EVENT_TOUCHSTART, (event) => start(event));\n EventHandler.on(this._element, EVENT_TOUCHMOVE, (event) => move(event));\n EventHandler.on(this._element, EVENT_TOUCHEND, (event) => end(event));\n }\n }\n\n _keydown(event) {\n if (/input|textarea/i.test(event.target.tagName)) {\n return;\n }\n\n const direction = KEY_TO_DIRECTION[event.key];\n if (direction) {\n event.preventDefault();\n this._slide(direction);\n }\n }\n\n _getItemIndex(element) {\n this._items =\n element && element.parentNode\n ? SelectorEngine.find(SELECTOR_DATA_ITEM, element.parentNode)\n : [];\n\n return this._items.indexOf(element);\n }\n\n _getItemByOrder(order, activeElement) {\n const isNext = order === ORDER_NEXT;\n return getNextActiveElement(\n this._items,\n activeElement,\n isNext,\n this._config.wrap\n );\n }\n\n _triggerSlideEvent(relatedTarget, eventDirectionName) {\n const targetIndex = this._getItemIndex(relatedTarget);\n const fromIndex = this._getItemIndex(\n SelectorEngine.findOne(SELECTOR_DATA_ACTIVE_ITEM, this._element)\n );\n\n return EventHandler.trigger(this._element, EVENT_SLIDE, {\n relatedTarget,\n direction: eventDirectionName,\n from: fromIndex,\n to: targetIndex,\n });\n }\n\n _setActiveIndicatorElement(element) {\n if (this._indicatorsElement) {\n const activeIndicator = SelectorEngine.findOne(\n SELECTOR_DATA_ACTIVE,\n this._indicatorsElement\n );\n\n activeIndicator.removeAttribute(ATTR_ACTIVE);\n activeIndicator.removeAttribute(\"aria-current\");\n activeIndicator.classList.remove(\"!opacity-100\");\n\n const indicators = SelectorEngine.find(\n SELECTOR_INDICATOR,\n this._indicatorsElement\n );\n\n for (let i = 0; i < indicators.length; i++) {\n if (\n Number.parseInt(\n indicators[i].getAttribute(\"data-twe-slide-to\"),\n 10\n ) === this._getItemIndex(element)\n ) {\n indicators[i].setAttribute(`${ATTR_ACTIVE}`, \"\");\n indicators[i].setAttribute(\"aria-current\", \"true\");\n indicators[i].classList.add(\"!opacity-100\");\n break;\n }\n }\n }\n }\n\n _updateInterval() {\n const element =\n this._activeElement ||\n SelectorEngine.findOne(SELECTOR_DATA_ACTIVE_ITEM, this._element);\n\n if (!element) {\n return;\n }\n\n const elementInterval = Number.parseInt(\n element.getAttribute(\"data-twe-interval\"),\n 10\n );\n\n if (elementInterval) {\n this._config.defaultInterval =\n this._config.defaultInterval || this._config.interval;\n this._config.interval = elementInterval;\n } else {\n this._config.interval =\n this._config.defaultInterval || this._config.interval;\n }\n }\n\n _slide(directionOrOrder, element) {\n const order = this._directionToOrder(directionOrOrder);\n\n const activeElement = SelectorEngine.findOne(\n SELECTOR_DATA_ACTIVE_ITEM,\n this._element\n );\n const activeElementIndex = this._getItemIndex(activeElement);\n\n const nextElement = element || this._getItemByOrder(order, activeElement);\n const nextElementIndex = this._getItemIndex(nextElement);\n\n const isCycling = Boolean(this._interval);\n\n const isNext = order === ORDER_NEXT;\n const directionalAttr = isNext ? ATTR_START : ATTR_END;\n const orderAttr = isNext ? ATTR_NEXT : ATTR_PREV;\n const eventDirectionName = this._orderToDirection(order);\n\n const activeClass =\n directionalAttr === ATTR_START\n ? this._classes.slideLeft\n : this._classes.slideRight;\n const nextClass =\n directionalAttr !== ATTR_START\n ? this._classes.slideLeft\n : this._classes.slideRight;\n\n if (nextElement && nextElement.hasAttribute(ATTR_ACTIVE)) {\n this._isSliding = false;\n return;\n }\n\n if (this._isSliding) {\n return;\n }\n\n const slideEvent = this._triggerSlideEvent(nextElement, eventDirectionName);\n if (slideEvent.defaultPrevented) {\n return;\n }\n\n if (!activeElement || !nextElement) {\n // Some weirdness is happening, so we bail\n return;\n }\n\n this._isSliding = true;\n\n if (isCycling) {\n this.pause();\n }\n\n this._setActiveIndicatorElement(nextElement);\n this._activeElement = nextElement;\n\n const triggerSlidEvent = () => {\n EventHandler.trigger(this._element, EVENT_SLID, {\n relatedTarget: nextElement,\n direction: eventDirectionName,\n from: activeElementIndex,\n to: nextElementIndex,\n });\n };\n\n nextElement.setAttribute(`${orderAttr}`, \"\");\n nextElement.classList.add(this._classes.block, nextClass);\n\n reflow(nextElement);\n\n activeElement.setAttribute(`${directionalAttr}`, \"\");\n activeElement.classList.add(\n activeClass,\n ...this._classes.invisible.split(\" \")\n );\n activeElement.classList.remove(...this._classes.visible.split(\" \"));\n\n nextElement.setAttribute(`${directionalAttr}`, \"\");\n nextElement.classList.add(...this._classes.visible.split(\" \"));\n nextElement.classList.remove(\n this._classes.slideRight,\n this._classes.slideLeft\n );\n\n const completeCallBack = () => {\n nextElement.removeAttribute(directionalAttr);\n nextElement.removeAttribute(orderAttr);\n nextElement.setAttribute(`${ATTR_ACTIVE}`, \"\");\n\n activeElement.removeAttribute(ATTR_ACTIVE);\n activeElement.classList.remove(\n activeClass,\n ...this._classes.invisible.split(\" \"),\n this._classes.block\n );\n activeElement.removeAttribute(orderAttr);\n activeElement.removeAttribute(directionalAttr);\n\n this._isSliding = false;\n\n setTimeout(triggerSlidEvent, 0);\n };\n\n this._queueCallback(completeCallBack, activeElement, true);\n\n if (isCycling || this._config.ride === true) {\n this.cycle();\n }\n }\n\n _directionToOrder(direction) {\n if (![DIRECTION_RIGHT, DIRECTION_LEFT].includes(direction)) {\n return direction;\n }\n\n if (isRTL()) {\n return direction === DIRECTION_LEFT ? ORDER_PREV : ORDER_NEXT;\n }\n\n return direction === DIRECTION_LEFT ? ORDER_NEXT : ORDER_PREV;\n }\n\n _orderToDirection(order) {\n if (![ORDER_NEXT, ORDER_PREV].includes(order)) {\n return order;\n }\n\n if (isRTL()) {\n return order === ORDER_PREV ? DIRECTION_LEFT : DIRECTION_RIGHT;\n }\n\n return order === ORDER_PREV ? DIRECTION_RIGHT : DIRECTION_LEFT;\n }\n\n // Static\n\n static carouselInterface(element, config) {\n const data = Carousel.getOrCreateInstance(element, config);\n\n let { _config } = data;\n if (typeof config === \"object\") {\n _config = {\n ..._config,\n ...config,\n };\n }\n const action = typeof config === \"string\" ? config : config.slide;\n\n if (typeof config === \"number\") {\n data.to(config);\n return;\n }\n if (typeof action === \"string\") {\n if (typeof data[action] === \"undefined\") {\n throw new TypeError(`No method named \"${action}\"`);\n }\n\n data[action]();\n } else if (_config.interval && _config.ride === true) {\n data.pause();\n }\n }\n\n static jQueryInterface(config) {\n return this.each(function () {\n let data = Carousel.getOrCreateInstance(this);\n\n if (typeof config === \"number\") {\n data.to(config);\n return;\n }\n\n if (typeof config === \"string\") {\n if (typeof data[config] === \"undefined\") {\n throw new TypeError(`No method named \"${config}\"`);\n }\n\n data[config]();\n }\n });\n }\n\n static dataApiClickHandler(event) {\n const target = getElementFromSelector(this);\n\n if (!target) {\n return;\n }\n\n const config = {\n ...Manipulator.getDataAttributes(target),\n ...Manipulator.getDataAttributes(this),\n };\n const slideIndex = this.getAttribute(\"data-twe-slide-to\");\n\n if (slideIndex) {\n config.interval = false;\n }\n\n Carousel.carouselInterface(target, config);\n\n if (slideIndex) {\n Carousel.getInstance(target).to(slideIndex);\n }\n\n event.preventDefault();\n }\n}\n\nexport default Carousel;\n" }, { "path": "src/js/free/components/collapse.js", "content": "import {\n getElement,\n getSelectorFromElement,\n getElementFromSelector,\n reflow,\n typeCheckConfig,\n} from \"../../util/index\";\nimport Data from \"../../dom/data\";\nimport EventHandler from \"../../dom/event-handler\";\nimport Manipulator from \"../../dom/manipulator\";\nimport SelectorEngine from \"../../dom/selector-engine\";\nimport BaseComponent from \"../../base-component\";\n\n/*\n------------------------------------------------------------------------\nConstants\n------------------------------------------------------------------------\n*/\n\nconst NAME = \"collapse\";\nconst DATA_KEY = \"twe.collapse\";\nconst EVENT_KEY = `.${DATA_KEY}`;\n\nconst Default = {\n toggle: true,\n parent: null,\n};\n\nconst DefaultType = {\n toggle: \"boolean\",\n parent: \"(null|element)\",\n};\n\nconst EVENT_SHOW = `show${EVENT_KEY}`;\nconst EVENT_SHOWN = `shown${EVENT_KEY}`;\nconst EVENT_HIDE = `hide${EVENT_KEY}`;\nconst EVENT_HIDDEN = `hidden${EVENT_KEY}`;\n\nconst ATTR_SHOW = \"data-twe-collapse-show\";\nconst ATTR_COLLAPSED = \"data-twe-collapse-collapsed\";\nconst ATTR_COLLAPSING = \"data-twe-collapse-collapsing\";\nconst ATTR_HORIZONTAL = \"data-twe-collapse-horizontal\";\nconst ATTR_COLLAPSE_ITEM = \"data-twe-collapse-item\";\nconst ATTR_COLLAPSE_DEEPER_CHILDREN = `:scope [${ATTR_COLLAPSE_ITEM}] [${ATTR_COLLAPSE_ITEM}]`;\n\nconst WIDTH = \"width\";\nconst HEIGHT = \"height\";\n\nconst SELECTOR_DATA_ACTIVES =\n \"[data-twe-collapse-item][data-twe-collapse-show], [data-twe-collapse-item][data-twe-collapse-collapsing]\";\nconst SELECTOR_DATA_COLLAPSE_INIT = \"[data-twe-collapse-init]\";\n\nconst DefaultClasses = {\n visible: \"!visible\",\n hidden: \"hidden\",\n baseTransition:\n \"overflow-hidden duration-[350ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none\",\n collapsing:\n \"h-0 transition-[height] overflow-hidden duration-[350ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none\",\n collapsingHorizontal:\n \"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\",\n};\n\nconst DefaultClassesType = {\n visible: \"string\",\n hidden: \"string\",\n baseTransition: \"string\",\n collapsing: \"string\",\n collapsingHorizontal: \"string\",\n};\n\n/*\n------------------------------------------------------------------------\nClass Definition\n------------------------------------------------------------------------\n*/\n\nclass Collapse extends BaseComponent {\n constructor(element, config, classes) {\n super(element);\n\n this._isTransitioning = false;\n this._config = this._getConfig(config);\n this._classes = this._getClasses(classes);\n this._triggerArray = [];\n\n const toggleList = SelectorEngine.find(SELECTOR_DATA_COLLAPSE_INIT);\n\n for (let i = 0, len = toggleList.length; i < len; i++) {\n const elem = toggleList[i];\n const selector = getSelectorFromElement(elem);\n const filterElement = SelectorEngine.find(selector).filter(\n (foundElem) => foundElem === this._element\n );\n\n if (selector !== null && filterElement.length) {\n this._selector = selector;\n this._triggerArray.push(elem);\n }\n }\n\n this._initializeChildren();\n\n if (!this._config.parent) {\n this._addAriaAndCollapsedClass(this._triggerArray, this._isShown());\n }\n\n if (this._config.toggle) {\n this.toggle();\n }\n }\n\n // Getters\n\n static get Default() {\n return Default;\n }\n\n static get NAME() {\n return NAME;\n }\n\n // Public\n\n toggle() {\n if (this._isShown()) {\n this.hide();\n } else {\n this.show();\n }\n }\n\n show() {\n if (this._isTransitioning || this._isShown()) {\n return;\n }\n\n let actives = [];\n let activesData;\n\n if (this._config.parent) {\n const children = SelectorEngine.find(\n ATTR_COLLAPSE_DEEPER_CHILDREN,\n this._config.parent\n );\n actives = SelectorEngine.find(\n SELECTOR_DATA_ACTIVES,\n this._config.parent\n ).filter((elem) => !children.includes(elem)); // remove children if greater depth\n }\n\n const container = SelectorEngine.findOne(this._selector);\n if (actives.length) {\n const tempActiveData = actives.find((elem) => container !== elem);\n activesData = tempActiveData\n ? Collapse.getInstance(tempActiveData)\n : null;\n\n if (activesData && activesData._isTransitioning) {\n return;\n }\n }\n\n const startEvent = EventHandler.trigger(this._element, EVENT_SHOW);\n if (startEvent.defaultPrevented) {\n return;\n }\n\n actives.forEach((elemActive) => {\n if (container !== elemActive) {\n Collapse.getOrCreateInstance(elemActive, { toggle: false }).hide();\n }\n\n if (!activesData) {\n Data.setData(elemActive, DATA_KEY, null);\n }\n });\n\n const dimension = this._getDimension();\n const CLASS_NAME_TRANSITION =\n dimension === \"height\"\n ? this._classes.collapsing\n : this._classes.collapsingHorizontal;\n\n Manipulator.removeClass(this._element, this._classes.visible);\n Manipulator.removeClass(this._element, this._classes.hidden);\n Manipulator.addClass(this._element, CLASS_NAME_TRANSITION);\n this._element.removeAttribute(ATTR_COLLAPSE_ITEM);\n this._element.setAttribute(ATTR_COLLAPSING, \"\");\n\n this._element.style[dimension] = 0;\n\n this._addAriaAndCollapsedClass(this._triggerArray, true);\n this._isTransitioning = true;\n\n const complete = () => {\n this._isTransitioning = false;\n\n Manipulator.removeClass(this._element, this._classes.hidden);\n Manipulator.removeClass(this._element, CLASS_NAME_TRANSITION);\n Manipulator.addClass(this._element, this._classes.visible);\n this._element.removeAttribute(ATTR_COLLAPSING);\n this._element.setAttribute(ATTR_COLLAPSE_ITEM, \"\");\n this._element.setAttribute(ATTR_SHOW, \"\");\n\n this._element.style[dimension] = \"\";\n\n EventHandler.trigger(this._element, EVENT_SHOWN);\n };\n\n const capitalizedDimension =\n dimension[0].toUpperCase() + dimension.slice(1);\n const scrollSize = `scroll${capitalizedDimension}`;\n\n this._queueCallback(complete, this._element, true);\n this._element.style[dimension] = `${this._element[scrollSize]}px`;\n }\n\n hide() {\n if (this._isTransitioning || !this._isShown()) {\n return;\n }\n\n const startEvent = EventHandler.trigger(this._element, EVENT_HIDE);\n if (startEvent.defaultPrevented) {\n return;\n }\n\n const dimension = this._getDimension();\n const CLASS_NAME_TRANSITION =\n dimension === \"height\"\n ? this._classes.collapsing\n : this._classes.collapsingHorizontal;\n\n this._element.style[dimension] = `${\n this._element.getBoundingClientRect()[dimension]\n }px`;\n\n reflow(this._element);\n\n Manipulator.addClass(this._element, CLASS_NAME_TRANSITION);\n Manipulator.removeClass(this._element, this._classes.visible);\n Manipulator.removeClass(this._element, this._classes.hidden);\n this._element.setAttribute(ATTR_COLLAPSING, \"\");\n this._element.removeAttribute(ATTR_COLLAPSE_ITEM);\n this._element.removeAttribute(ATTR_SHOW);\n\n const triggerArrayLength = this._triggerArray.length;\n for (let i = 0; i < triggerArrayLength; i++) {\n const trigger = this._triggerArray[i];\n const elem = getElementFromSelector(trigger);\n\n if (elem && !this._isShown(elem)) {\n this._addAriaAndCollapsedClass([trigger], false);\n }\n }\n\n this._isTransitioning = true;\n\n const complete = () => {\n this._isTransitioning = false;\n\n Manipulator.removeClass(this._element, CLASS_NAME_TRANSITION);\n Manipulator.addClass(this._element, this._classes.visible);\n Manipulator.addClass(this._element, this._classes.hidden);\n\n this._element.removeAttribute(ATTR_COLLAPSING);\n this._element.setAttribute(ATTR_COLLAPSE_ITEM, \"\");\n\n EventHandler.trigger(this._element, EVENT_HIDDEN);\n };\n\n this._element.style[dimension] = \"\";\n\n this._queueCallback(complete, this._element, true);\n }\n\n _isShown(element = this._element) {\n return element.hasAttribute(ATTR_SHOW);\n }\n\n // Private\n _getConfig(config) {\n config = {\n ...Default,\n ...Manipulator.getDataAttributes(this._element),\n ...config,\n };\n config.toggle = Boolean(config.toggle); // Coerce string values\n config.parent = getElement(config.parent);\n typeCheckConfig(NAME, config, DefaultType);\n return config;\n }\n\n _getClasses(classes) {\n const dataAttributes = Manipulator.getDataClassAttributes(this._element);\n\n classes = {\n ...DefaultClasses,\n ...dataAttributes,\n ...classes,\n };\n\n typeCheckConfig(NAME, classes, DefaultClassesType);\n return classes;\n }\n\n _getDimension() {\n return this._element.hasAttribute(ATTR_HORIZONTAL) ? WIDTH : HEIGHT;\n }\n\n _initializeChildren() {\n if (!this._config.parent) {\n return;\n }\n\n const children = SelectorEngine.find(\n ATTR_COLLAPSE_DEEPER_CHILDREN,\n this._config.parent\n );\n SelectorEngine.find(SELECTOR_DATA_COLLAPSE_INIT, this._config.parent)\n .filter((elem) => !children.includes(elem))\n .forEach((element) => {\n const selected = getElementFromSelector(element);\n\n if (selected) {\n this._addAriaAndCollapsedClass([element], this._isShown(selected));\n }\n });\n }\n\n _addAriaAndCollapsedClass(triggerArray, isOpen) {\n if (!triggerArray.length) {\n return;\n }\n\n triggerArray.forEach((elem) => {\n if (isOpen) {\n elem.removeAttribute(ATTR_COLLAPSED);\n } else {\n elem.setAttribute(`${ATTR_COLLAPSED}`, \"\");\n }\n\n elem.setAttribute(\"aria-expanded\", isOpen);\n });\n }\n\n // Static\n\n static jQueryInterface(config) {\n return this.each(function () {\n const _config = {};\n if (typeof config === \"string\" && /show|hide/.test(config)) {\n _config.toggle = false;\n }\n\n const data = Collapse.getOrCreateInstance(this, _config);\n\n if (typeof config === \"string\") {\n if (typeof data[config] === \"undefined\") {\n throw new TypeError(`No method named \"${config}\"`);\n }\n\n data[config]();\n }\n });\n }\n}\n\nexport default Collapse;\n" }, { "path": "src/js/free/components/dropdown.js", "content": "import * as Popper from \"@popperjs/core\";\n\nimport {\n getElement,\n getElementFromSelector,\n getNextActiveElement,\n isDisabled,\n isElement,\n isRTL,\n isVisible,\n noop,\n typeCheckConfig,\n} from \"../../util/index\";\nimport EventHandler from \"../../dom/event-handler\";\nimport Manipulator from \"../../dom/manipulator\";\nimport SelectorEngine from \"../../dom/selector-engine\";\nimport BaseComponent from \"../../base-component\";\n\n/*\n------------------------------------------------------------------------\nConstants\n------------------------------------------------------------------------\n*/\n\nconst NAME = \"dropdown\";\nconst DATA_KEY = \"twe.dropdown\";\nconst EVENT_KEY = `.${DATA_KEY}`;\nconst DATA_API_KEY = \".data-api\";\n\nconst ESCAPE_KEY = \"Escape\";\nconst SPACE_KEY = \"Space\";\nconst TAB_KEY = \"Tab\";\nconst ARROW_UP_KEY = \"ArrowUp\";\nconst ARROW_DOWN_KEY = \"ArrowDown\";\nconst RIGHT_MOUSE_BUTTON = 2; // MouseEvent.button value for the secondary button, usually the right button\n\nconst REGEXP_KEYDOWN = new RegExp(\n `${ARROW_UP_KEY}|${ARROW_DOWN_KEY}|${ESCAPE_KEY}`\n);\n\nconst EVENT_HIDE = `hide${EVENT_KEY}`;\nconst EVENT_HIDDEN = `hidden${EVENT_KEY}`;\nconst EVENT_SHOW = `show${EVENT_KEY}`;\nconst EVENT_SHOWN = `shown${EVENT_KEY}`;\nconst EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`;\nconst EVENT_KEYDOWN_DATA_API = `keydown${EVENT_KEY}${DATA_API_KEY}`;\nconst EVENT_KEYUP_DATA_API = `keyup${EVENT_KEY}${DATA_API_KEY}`;\n\nconst CLASS_NAME_SHOW = \"show\";\nconst CLASS_NAME_DROPUP = \"dropup\";\nconst CLASS_NAME_DROPEND = \"dropend\";\nconst CLASS_NAME_DROPSTART = \"dropstart\";\n\nconst SELECTOR_NAVBAR = \"[data-twe-navbar-ref]\";\nconst SELECTOR_DATA_TOGGLE = \"[data-twe-dropdown-toggle-ref]\";\nconst SELECTOR_MENU = \"[data-twe-dropdown-menu-ref]\";\nconst SELECTOR_NAVBAR_NAV = \"[data-twe-navbar-nav-ref]\";\nconst SELECTOR_VISIBLE_ITEMS =\n \"[data-twe-dropdown-menu-ref] [data-twe-dropdown-item-ref]:not(.disabled):not(:disabled)\";\n\nconst PLACEMENT_TOP = isRTL() ? \"top-end\" : \"top-start\";\nconst PLACEMENT_TOPEND = isRTL() ? \"top-start\" : \"top-end\";\nconst PLACEMENT_BOTTOM = isRTL() ? \"bottom-end\" : \"bottom-start\";\nconst PLACEMENT_BOTTOMEND = isRTL() ? \"bottom-start\" : \"bottom-end\";\nconst PLACEMENT_RIGHT = isRTL() ? \"left-start\" : \"right-start\";\nconst PLACEMENT_LEFT = isRTL() ? \"right-start\" : \"left-start\";\n\nconst ANIMATION_FADE_IN = [{ opacity: \"0\" }, { opacity: \"1\" }];\nconst ANIMATION_FADE_OUT = [{ opacity: \"1\" }, { opacity: \"0\" }];\n\nconst ANIMATION_TIMING = {\n iterations: 1,\n easing: \"ease\",\n fill: \"both\",\n};\n\nconst Default = {\n offset: [0, 2],\n boundary: \"clippingParents\",\n reference: \"toggle\",\n display: \"dynamic\",\n popperConfig: null,\n autoClose: true,\n dropdownAnimation: \"on\",\n animationDuration: 550,\n};\n\nconst DefaultType = {\n offset: \"(array|string|function)\",\n boundary: \"(string|element)\",\n reference: \"(string|element|object)\",\n display: \"string\",\n popperConfig: \"(null|object|function)\",\n autoClose: \"(boolean|string)\",\n dropdownAnimation: \"string\",\n animationDuration: \"number\",\n};\n\n/*\n------------------------------------------------------------------------\nClass Definition\n------------------------------------------------------------------------\n*/\n\nclass Dropdown extends BaseComponent {\n constructor(element, config) {\n super(element);\n\n this._popper = null;\n this._config = this._getConfig(config);\n this._menu = this._getMenuElement();\n this._inNavbar = this._detectNavbar();\n this._fadeOutAnimate = null;\n\n //* prevents dropdown close issue when system animation is turned off\n const isPrefersReducedMotionSet = window.matchMedia(\n \"(prefers-reduced-motion: reduce)\"\n ).matches;\n this._animationCanPlay =\n this._config.dropdownAnimation === \"on\" && !isPrefersReducedMotionSet;\n\n this._didInit = false;\n this._init();\n }\n\n // Getters\n\n static get Default() {\n return Default;\n }\n\n static get DefaultType() {\n return DefaultType;\n }\n\n static get NAME() {\n return NAME;\n }\n\n // Public\n\n toggle() {\n return this._isShown() ? this.hide() : this.show();\n }\n\n show() {\n if (isDisabled(this._element) || this._isShown(this._menu)) {\n return;\n }\n\n const relatedTarget = {\n relatedTarget: this._element,\n };\n\n const showEvent = EventHandler.trigger(\n this._element,\n EVENT_SHOW,\n relatedTarget\n );\n\n if (showEvent.defaultPrevented) {\n return;\n }\n\n const parent = Dropdown.getParentFromElement(this._element);\n // Totally disable Popper for Dropdowns in Navbar\n if (this._inNavbar) {\n Manipulator.setDataAttribute(this._menu, \"popper\", \"none\");\n } else {\n this._createPopper(parent);\n }\n\n // If this is a touch-enabled device we add extra\n // empty mouseover listeners to the body's immediate children;\n // only needed because of broken event delegation on iOS\n // https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html\n if (\n \"ontouchstart\" in document.documentElement &&\n !parent.closest(SELECTOR_NAVBAR_NAV)\n ) {\n []\n .concat(...document.body.children)\n .forEach((elem) => EventHandler.on(elem, \"mouseover\", noop));\n }\n\n this._element.focus();\n this._element.setAttribute(\"aria-expanded\", true);\n\n this._menu.setAttribute(`data-twe-dropdown-${CLASS_NAME_SHOW}`, \"\");\n this._animationCanPlay &&\n this._menu.animate(ANIMATION_FADE_IN, {\n ...ANIMATION_TIMING,\n duration: this._config.animationDuration,\n });\n this._element.setAttribute(`data-twe-dropdown-${CLASS_NAME_SHOW}`, \"\");\n\n setTimeout(\n () => {\n EventHandler.trigger(this._element, EVENT_SHOWN, relatedTarget);\n },\n this._animationCanPlay ? this._config.animationDuration : 0\n );\n }\n\n hide() {\n if (isDisabled(this._element) || !this._isShown(this._menu)) {\n return;\n }\n\n const relatedTarget = {\n relatedTarget: this._element,\n };\n\n this._completeHide(relatedTarget);\n }\n\n dispose() {\n if (this._popper) {\n this._popper.destroy();\n }\n\n super.dispose();\n }\n\n update() {\n this._inNavbar = this._detectNavbar();\n if (this._popper) {\n this._popper.update();\n }\n }\n\n // Private\n _init() {\n if (this._didInit) {\n return;\n }\n\n EventHandler.on(\n document,\n EVENT_KEYDOWN_DATA_API,\n SELECTOR_DATA_TOGGLE,\n Dropdown.dataApiKeydownHandler\n );\n EventHandler.on(\n document,\n EVENT_KEYDOWN_DATA_API,\n SELECTOR_MENU,\n Dropdown.dataApiKeydownHandler\n );\n EventHandler.on(document, EVENT_CLICK_DATA_API, Dropdown.clearMenus);\n EventHandler.on(document, EVENT_KEYUP_DATA_API, Dropdown.clearMenus);\n\n this._didInit = true;\n }\n\n _completeHide(relatedTarget) {\n if (this._fadeOutAnimate && this._fadeOutAnimate.playState === \"running\") {\n return;\n }\n\n const hideEvent = EventHandler.trigger(\n this._element,\n EVENT_HIDE,\n relatedTarget\n );\n if (hideEvent.defaultPrevented) {\n return;\n }\n\n // If this is a touch-enabled device we remove the extra\n // empty mouseover listeners we added for iOS support\n if (\"ontouchstart\" in document.documentElement) {\n []\n .concat(...document.body.children)\n .forEach((elem) => EventHandler.off(elem, \"mouseover\", noop));\n }\n\n if (this._animationCanPlay) {\n this._fadeOutAnimate = this._menu.animate(ANIMATION_FADE_OUT, {\n ...ANIMATION_TIMING,\n duration: this._config.animationDuration,\n });\n }\n\n setTimeout(\n () => {\n if (this._popper) {\n this._popper.destroy();\n }\n\n this._menu.removeAttribute(`data-twe-dropdown-${CLASS_NAME_SHOW}`);\n this._element.removeAttribute(`data-twe-dropdown-${CLASS_NAME_SHOW}`);\n\n this._element.setAttribute(\"aria-expanded\", \"false\");\n Manipulator.removeDataAttribute(this._menu, \"popper\");\n EventHandler.trigger(this._element, EVENT_HIDDEN, relatedTarget);\n },\n this._animationCanPlay ? this._config.animationDuration : 0\n );\n }\n\n _getConfig(config) {\n config = {\n ...this.constructor.Default,\n ...Manipulator.getDataAttributes(this._element),\n ...config,\n };\n\n typeCheckConfig(NAME, config, this.constructor.DefaultType);\n\n if (\n typeof config.reference === \"object\" &&\n !isElement(config.reference) &&\n typeof config.reference.getBoundingClientRect !== \"function\"\n ) {\n // Popper virtual elements require a getBoundingClientRect method\n throw new TypeError(\n `${NAME.toUpperCase()}: Option \"reference\" provided type \"object\" without a required \"getBoundingClientRect\" method.`\n );\n }\n\n return config;\n }\n\n _createPopper(parent) {\n if (typeof Popper === \"undefined\") {\n throw new TypeError(\n \"Bootstrap's dropdowns require Popper (https://popper.js.org)\"\n );\n }\n\n let referenceElement = this._element;\n\n if (this._config.reference === \"parent\") {\n referenceElement = parent;\n } else if (isElement(this._config.reference)) {\n referenceElement = getElement(this._config.reference);\n } else if (typeof this._config.reference === \"object\") {\n referenceElement = this._config.reference;\n }\n\n const popperConfig = this._getPopperConfig();\n const isDisplayStatic = popperConfig.modifiers.find(\n (modifier) =>\n modifier.name === \"applyStyles\" && modifier.enabled === false\n );\n\n this._popper = Popper.createPopper(\n referenceElement,\n this._menu,\n popperConfig\n );\n\n if (isDisplayStatic) {\n Manipulator.setDataAttribute(this._menu, \"popper\", \"static\");\n }\n }\n\n _isShown(element = this._element) {\n return (\n element.dataset[\n `tweDropdown${\n CLASS_NAME_SHOW.charAt(0).toUpperCase() + CLASS_NAME_SHOW.slice(1)\n }`\n ] === \"\"\n );\n }\n\n _getMenuElement() {\n return SelectorEngine.next(this._element, SELECTOR_MENU)[0];\n }\n\n _getPlacement() {\n const parentDropdown = this._element.parentNode;\n\n if (parentDropdown.dataset.tweDropdownPosition === CLASS_NAME_DROPEND) {\n return PLACEMENT_RIGHT;\n }\n\n if (parentDropdown.dataset.tweDropdownPosition === CLASS_NAME_DROPSTART) {\n return PLACEMENT_LEFT;\n }\n\n // We need to trim the value because custom properties can also include spaces\n const isEnd = parentDropdown.dataset.tweDropdownAlignment === \"end\";\n\n if (parentDropdown.dataset.tweDropdownPosition === CLASS_NAME_DROPUP) {\n return isEnd ? PLACEMENT_TOPEND : PLACEMENT_TOP;\n }\n\n return isEnd ? PLACEMENT_BOTTOMEND : PLACEMENT_BOTTOM;\n }\n\n _detectNavbar() {\n return this._element.closest(SELECTOR_NAVBAR) !== null;\n }\n\n _getOffset() {\n const { offset } = this._config;\n\n if (typeof offset === \"string\") {\n return offset.split(\",\").map((val) => Number.parseInt(val, 10));\n }\n\n if (typeof offset === \"function\") {\n return (popperData) => offset(popperData, this._element);\n }\n\n return offset;\n }\n\n _getPopperConfig() {\n const defaultBsPopperConfig = {\n placement: this._getPlacement(),\n modifiers: [\n {\n name: \"preventOverflow\",\n options: {\n boundary: this._config.boundary,\n },\n },\n {\n name: \"offset\",\n options: {\n offset: this._getOffset(),\n },\n },\n ],\n };\n\n // Disable Popper if we have a static display\n if (this._config.display === \"static\") {\n defaultBsPopperConfig.modifiers = [\n {\n name: \"applyStyles\",\n enabled: false,\n },\n ];\n }\n\n return {\n ...defaultBsPopperConfig,\n ...(typeof this._config.popperConfig === \"function\"\n ? this._config.popperConfig(defaultBsPopperConfig)\n : this._config.popperConfig),\n };\n }\n\n _selectMenuItem({ key, target }) {\n const items = SelectorEngine.find(\n SELECTOR_VISIBLE_ITEMS,\n this._menu\n ).filter(isVisible);\n\n if (!items.length) {\n return;\n }\n\n // if target isn't included in items (e.g. when expanding the dropdown)\n // allow cycling to get the last item in case key equals ARROW_UP_KEY\n getNextActiveElement(\n items,\n target,\n key === ARROW_DOWN_KEY,\n !items.includes(target)\n ).focus();\n }\n\n // Static\n\n static jQueryInterface(config) {\n return this.each(function () {\n const data = Dropdown.getOrCreateInstance(this, config);\n\n if (typeof config !== \"string\") {\n return;\n }\n\n if (typeof data[config] === \"undefined\") {\n throw new TypeError(`No method named \"${config}\"`);\n }\n\n data[config]();\n });\n }\n\n static clearMenus(event) {\n if (\n event &&\n (event.button === RIGHT_MOUSE_BUTTON ||\n (event.type === \"keyup\" && event.key !== TAB_KEY))\n ) {\n return;\n }\n\n const toggles = SelectorEngine.find(SELECTOR_DATA_TOGGLE);\n\n for (let i = 0, len = toggles.length; i < len; i++) {\n const context = Dropdown.getInstance(toggles[i]);\n if (!context || context._config.autoClose === false) {\n continue;\n }\n\n if (!context._isShown()) {\n continue;\n }\n\n const relatedTarget = {\n relatedTarget: context._element,\n };\n\n if (event) {\n const composedPath = event.composedPath();\n const isMenuTarget = composedPath.includes(context._menu);\n if (\n composedPath.includes(context._element) ||\n (context._config.autoClose === \"inside\" && !isMenuTarget) ||\n (context._config.autoClose === \"outside\" && isMenuTarget)\n ) {\n continue;\n }\n\n // Tab navigation through the dropdown menu or events from contained inputs shouldn't close the menu\n if (\n context._menu.contains(event.target) &&\n ((event.type === \"keyup\" && event.key === TAB_KEY) ||\n /input|select|option|textarea|form/i.test(event.target.tagName))\n ) {\n continue;\n }\n\n if (event.type === \"click\") {\n relatedTarget.clickEvent = event;\n }\n }\n\n context._completeHide(relatedTarget);\n }\n }\n\n static getParentFromElement(element) {\n return getElementFromSelector(element) || element.parentNode;\n }\n\n static dataApiKeydownHandler(event) {\n // If not input/textarea:\n // - And not a key in REGEXP_KEYDOWN => not a dropdown command\n // If input/textarea:\n // - If space key => not a dropdown command\n // - If key is other than escape\n // - If key is not up or down => not a dropdown command\n // - If trigger inside the menu => not a dropdown command\n if (\n /input|textarea/i.test(event.target.tagName)\n ? event.key === SPACE_KEY ||\n (event.key !== ESCAPE_KEY &&\n ((event.key !== ARROW_DOWN_KEY && event.key !== ARROW_UP_KEY) ||\n event.target.closest(SELECTOR_MENU)))\n : !REGEXP_KEYDOWN.test(event.key)\n ) {\n return;\n }\n\n const isActive =\n this.dataset[\n `tweDropdown${\n CLASS_NAME_SHOW.charAt(0).toUpperCase() + CLASS_NAME_SHOW.slice(1)\n }`\n ] === \"\";\n\n if (!isActive && event.key === ESCAPE_KEY) {\n return;\n }\n\n event.preventDefault();\n event.stopPropagation();\n\n if (isDisabled(this)) {\n return;\n }\n\n const getToggleButton = this.matches(SELECTOR_DATA_TOGGLE)\n ? this\n : SelectorEngine.prev(this, SELECTOR_DATA_TOGGLE)[0];\n const instance = Dropdown.getOrCreateInstance(getToggleButton);\n\n if (event.key === ESCAPE_KEY) {\n instance.hide();\n return;\n }\n\n if (event.key === ARROW_UP_KEY || event.key === ARROW_DOWN_KEY) {\n if (!isActive) {\n instance.show();\n }\n\n instance._selectMenuItem(event);\n return;\n }\n\n if (!isActive || event.key === SPACE_KEY) {\n Dropdown.clearMenus();\n }\n }\n}\n\nexport default Dropdown;\n" }, { "path": "src/js/free/components/modal.js", "content": "import { isRTL, reflow, typeCheckConfig } from \"../../util/index\";\nimport EventHandler from \"../../dom/event-handler\";\nimport Manipulator from \"../../dom/manipulator\";\nimport SelectorEngine from \"../../dom/selector-engine\";\nimport ScrollBarHelper from \"../../util/scrollbar\";\nimport BaseComponent from \"../../base-component\";\nimport Backdrop from \"../../util/backdrop\";\nimport FocusTrap from \"../../util/focusTrap\";\n\nimport { enableDismissTrigger } from \"../../util/component-functions\";\nimport { getTransitionDurationFromElement } from \"../../util/index\";\n\n/*\n------------------------------------------------------------------------\nConstants\n------------------------------------------------------------------------\n*/\n\nconst NAME = \"modal\";\nconst DATA_KEY = \"twe.modal\";\nconst EVENT_KEY = `.${DATA_KEY}`;\nconst ESCAPE_KEY = \"Escape\";\n\nconst Default = {\n backdrop: true,\n keyboard: true,\n focus: true,\n};\n\nconst DefaultType = {\n backdrop: \"(boolean|string)\",\n keyboard: \"boolean\",\n focus: \"boolean\",\n};\n\nconst DefaultClasses = {\n show: \"transform-none\",\n static: \"scale-[1.02]\",\n staticProperties: \"transition-scale duration-300 ease-in-out\",\n backdrop:\n \"opacity-50 transition-all duration-300 ease-in-out fixed top-0 left-0 z-[1040] bg-black w-screen h-screen\",\n};\n\nconst DefaultClassesType = {\n show: \"string\",\n static: \"string\",\n staticProperties: \"string\",\n backdrop: \"string\",\n};\n\nconst EVENT_HIDE = `hide${EVENT_KEY}`;\nconst EVENT_HIDE_PREVENTED = `hidePrevented${EVENT_KEY}`;\nconst EVENT_HIDDEN = `hidden${EVENT_KEY}`;\nconst EVENT_SHOW = `show${EVENT_KEY}`;\nconst EVENT_SHOWN = `shown${EVENT_KEY}`;\nconst EVENT_RESIZE = `resize${EVENT_KEY}`;\nconst EVENT_CLICK_DISMISS = `click.dismiss${EVENT_KEY}`;\nconst EVENT_KEYDOWN_DISMISS = `keydown.dismiss${EVENT_KEY}`;\nconst EVENT_MOUSEUP_DISMISS = `mouseup.dismiss${EVENT_KEY}`;\nconst EVENT_MOUSEDOWN_DISMISS = `mousedown.dismiss${EVENT_KEY}`;\n\nconst OPEN_SELECTOR_BODY = \"data-twe-modal-open\";\nconst OPEN_SELECTOR = \"data-twe-open\";\nconst SELECTOR_DIALOG = \"[data-twe-modal-dialog-ref]\";\nconst SELECTOR_MODAL_BODY = \"[data-twe-modal-body-ref]\";\n\n/*\n------------------------------------------------------------------------\nClass Definition\n------------------------------------------------------------------------\n*/\n\nclass Modal extends BaseComponent {\n constructor(element, config, classes) {\n super(element);\n\n this._config = this._getConfig(config);\n this._classes = this._getClasses(classes);\n this._backdrop = this._initializeBackDrop();\n this._focustrap = this._initializeFocusTrap();\n this._scrollBar = new ScrollBarHelper();\n\n this._dialog = SelectorEngine.findOne(SELECTOR_DIALOG, this._element);\n this._isShown = false;\n this._ignoreBackdropClick = false;\n this._isTransitioning = false;\n this._didInit = false;\n\n this._init();\n }\n\n // Getters\n\n static get NAME() {\n return NAME;\n }\n\n static get Default() {\n return Default;\n }\n\n static get getDefaultType() {\n return DefaultType;\n }\n\n // Public\n\n toggle(relatedTarget) {\n return this._isShown ? this.hide() : this.show(relatedTarget);\n }\n\n show(relatedTarget) {\n if (this._isShown || this._isTransitioning) {\n return;\n }\n\n const showEvent = EventHandler.trigger(this._element, EVENT_SHOW, {\n relatedTarget,\n });\n\n if (showEvent.defaultPrevented) {\n return;\n }\n\n this._isShown = true;\n\n if (this._isAnimated()) {\n this._isTransitioning = true;\n }\n\n this._scrollBar.hide();\n\n document.body.setAttribute(OPEN_SELECTOR_BODY, \"true\");\n\n this._adjustDialog();\n\n this._setEscapeEvent();\n this._setResizeEvent();\n\n EventHandler.on(this._dialog, EVENT_MOUSEDOWN_DISMISS, () => {\n EventHandler.one(this._element, EVENT_MOUSEUP_DISMISS, (event) => {\n if (event.target === this._element) {\n this._ignoreBackdropClick = true;\n }\n });\n });\n this._showElement(relatedTarget);\n this._showBackdrop();\n }\n\n hide() {\n if (!this._isShown || this._isTransitioning) {\n return;\n }\n const hideEvent = EventHandler.trigger(this._element, EVENT_HIDE);\n\n if (hideEvent.defaultPrevented) {\n return;\n }\n\n this._isShown = false;\n const isAnimated = this._isAnimated();\n\n if (isAnimated) {\n this._isTransitioning = true;\n }\n\n this._setEscapeEvent();\n this._setResizeEvent();\n\n this._focustrap.disable();\n\n const modalDialog = SelectorEngine.findOne(SELECTOR_DIALOG, this._element);\n modalDialog.classList.remove(this._classes.show);\n\n EventHandler.off(this._element, EVENT_CLICK_DISMISS);\n EventHandler.off(this._dialog, EVENT_MOUSEDOWN_DISMISS);\n\n this._queueCallback(() => this._hideModal(), this._element, isAnimated);\n this._element.removeAttribute(OPEN_SELECTOR);\n }\n\n dispose() {\n [window, document, this._dialog].forEach((htmlElement) =>\n EventHandler.off(htmlElement, EVENT_KEY)\n );\n\n this._backdrop.dispose();\n this._focustrap.disable();\n\n super.dispose();\n }\n\n handleUpdate() {\n this._adjustDialog();\n }\n\n // Private\n\n _init() {\n if (this._didInit) {\n return;\n }\n\n enableDismissTrigger(Modal);\n\n this._didInit = true;\n }\n\n _initializeBackDrop() {\n return new Backdrop({\n isVisible: Boolean(this._config.backdrop), // 'static' option will be translated to true, and booleans will keep their value\n isAnimated: this._isAnimated(),\n backdropClasses: this._classes.backdrop,\n });\n }\n\n _initializeFocusTrap() {\n return new FocusTrap(this._element, {\n event: \"keydown\",\n condition: (event) => event.key === \"Tab\",\n });\n }\n\n _showElement(relatedTarget) {\n const isAnimated = this._isAnimated();\n const modalBody = SelectorEngine.findOne(SELECTOR_MODAL_BODY, this._dialog);\n\n if (\n !this._element.parentNode ||\n this._element.parentNode.nodeType !== Node.ELEMENT_NODE\n ) {\n // Don't move modal's DOM position\n document.body.append(this._element);\n }\n\n this._element.style.display = \"block\";\n this._element.classList.remove(\"hidden\");\n this._element.removeAttribute(\"aria-hidden\");\n this._element.setAttribute(\"aria-modal\", true);\n this._element.setAttribute(\"role\", \"dialog\");\n this._element.setAttribute(`${OPEN_SELECTOR}`, \"true\");\n this._element.scrollTop = 0;\n\n const modalDialog = SelectorEngine.findOne(SELECTOR_DIALOG, this._element);\n\n modalDialog.classList.add(this._classes.show);\n modalDialog.classList.remove(\"opacity-0\");\n modalDialog.classList.add(\"opacity-100\");\n\n if (modalBody) {\n modalBody.scrollTop = 0;\n }\n\n if (isAnimated) {\n reflow(this._element);\n }\n\n const transitionComplete = () => {\n if (this._config.focus) {\n this._focustrap.trap();\n }\n\n this._isTransitioning = false;\n EventHandler.trigger(this._element, EVENT_SHOWN, {\n relatedTarget,\n });\n };\n\n this._queueCallback(transitionComplete, this._dialog, isAnimated);\n }\n\n _setEscapeEvent() {\n if (this._isShown) {\n EventHandler.on(document, EVENT_KEYDOWN_DISMISS, (event) => {\n if (this._config.keyboard && event.key === ESCAPE_KEY) {\n event.preventDefault();\n this.hide();\n } else if (!this._config.keyboard && event.key === ESCAPE_KEY) {\n this._triggerBackdropTransition();\n }\n });\n } else {\n EventHandler.off(this._element, EVENT_KEYDOWN_DISMISS);\n }\n }\n\n _setResizeEvent() {\n if (this._isShown) {\n EventHandler.on(window, EVENT_RESIZE, () => this._adjustDialog());\n } else {\n EventHandler.off(window, EVENT_RESIZE);\n }\n }\n\n _hideModal() {\n const modalDialog = SelectorEngine.findOne(SELECTOR_DIALOG, this._element);\n modalDialog.classList.remove(this._classes.show);\n modalDialog.classList.remove(\"opacity-100\");\n modalDialog.classList.add(\"opacity-0\");\n const transitionTime = getTransitionDurationFromElement(modalDialog);\n\n setTimeout(() => {\n this._element.style.display = \"none\";\n }, transitionTime);\n\n this._element.setAttribute(\"aria-hidden\", true);\n this._element.removeAttribute(\"aria-modal\");\n this._element.removeAttribute(\"role\");\n this._isTransitioning = false;\n this._backdrop.hide(() => {\n document.body.removeAttribute(OPEN_SELECTOR_BODY);\n this._resetAdjustments();\n this._scrollBar.reset();\n EventHandler.trigger(this._element, EVENT_HIDDEN);\n });\n }\n\n _showBackdrop(callback) {\n EventHandler.on(this._element, EVENT_CLICK_DISMISS, (event) => {\n if (this._ignoreBackdropClick) {\n this._ignoreBackdropClick = false;\n return;\n }\n\n if (event.target !== event.currentTarget) {\n return;\n }\n\n if (this._config.backdrop === true) {\n this.hide();\n } else if (this._config.backdrop === \"static\") {\n this._triggerBackdropTransition();\n }\n });\n\n this._backdrop.show(callback);\n }\n\n _isAnimated() {\n const animate = SelectorEngine.findOne(SELECTOR_DIALOG, this._element);\n return !!animate;\n }\n\n _triggerBackdropTransition() {\n const hideEvent = EventHandler.trigger(this._element, EVENT_HIDE_PREVENTED);\n if (hideEvent.defaultPrevented) {\n return;\n }\n\n const { classList, scrollHeight, style } = this._element;\n const isModalOverflowing =\n scrollHeight > document.documentElement.clientHeight;\n\n // return if the following background transition hasn't yet completed\n if (\n (!isModalOverflowing && style.overflowY === \"hidden\") ||\n classList.contains(this._classes.static)\n ) {\n return;\n }\n\n if (!isModalOverflowing) {\n style.overflowY = \"hidden\";\n }\n\n classList.add(...this._classes.static.split(\" \"));\n classList.add(...this._classes.staticProperties.split(\" \"));\n\n const transisitionTime = getTransitionDurationFromElement(this._element);\n\n this._queueCallback(() => {\n classList.remove(this._classes.static);\n\n setTimeout(() => {\n classList.remove(...this._classes.staticProperties.split(\" \"));\n }, transisitionTime);\n\n if (!isModalOverflowing) {\n this._queueCallback(() => {\n style.overflowY = \"\";\n }, this._dialog);\n }\n }, this._dialog);\n\n this._element.focus();\n }\n\n _getConfig(config) {\n config = {\n ...Default,\n ...Manipulator.getDataAttributes(this._element),\n ...(typeof config === \"object\" ? config : {}),\n };\n typeCheckConfig(NAME, config, DefaultType);\n return config;\n }\n\n _getClasses(classes) {\n const dataAttributes = Manipulator.getDataClassAttributes(this._element);\n\n classes = {\n ...DefaultClasses,\n ...dataAttributes,\n ...classes,\n };\n\n typeCheckConfig(NAME, classes, DefaultClassesType);\n\n return classes;\n }\n\n // ----------------------------------------------------------------------\n // the following methods are used to handle overflowing modals\n // ----------------------------------------------------------------------\n\n _adjustDialog() {\n const isModalOverflowing =\n this._element.scrollHeight > document.documentElement.clientHeight;\n const scrollbarWidth = this._scrollBar.getWidth();\n const isBodyOverflowing = scrollbarWidth > 0;\n\n if (\n (!isBodyOverflowing && isModalOverflowing && !isRTL()) ||\n (isBodyOverflowing && !isModalOverflowing && isRTL())\n ) {\n this._element.style.paddingLeft = `${scrollbarWidth}px`;\n }\n\n if (\n (isBodyOverflowing && !isModalOverflowing && !isRTL()) ||\n (!isBodyOverflowing && isModalOverflowing && isRTL())\n ) {\n this._element.style.paddingRight = `${scrollbarWidth}px`;\n }\n }\n\n _resetAdjustments() {\n this._element.style.paddingLeft = \"\";\n this._element.style.paddingRight = \"\";\n }\n\n // Static\n\n static jQueryInterface(config, relatedTarget) {\n return this.each(function () {\n const data = Modal.getOrCreateInstance(this, config);\n\n if (typeof config !== \"string\") {\n return;\n }\n\n if (typeof data[config] === \"undefined\") {\n throw new TypeError(`No method named \"${config}\"`);\n }\n\n data[config](relatedTarget);\n });\n }\n}\n\nexport default Modal;\n" }, { "path": "src/js/free/components/offcanvas.js", "content": "import { typeCheckConfig } from \"../../util/index\";\nimport ScrollBarHelper from \"../../util/scrollbar\";\nimport EventHandler from \"../../dom/event-handler\";\nimport BaseComponent from \"../../base-component\";\nimport SelectorEngine from \"../../dom/selector-engine\";\nimport Manipulator from \"../../dom/manipulator\";\nimport Backdrop from \"../../util/backdrop\";\nimport FocusTrap from \"../../util/focusTrap\";\nimport { enableDismissTrigger } from \"../../util/component-functions\";\nimport { TAB } from \"../../util/keycodes\";\n\n/*\n------------------------------------------------------------------------\nConstants\n------------------------------------------------------------------------\n*/\n\nconst NAME = \"offcanvas\";\nconst DATA_KEY = \"twe.offcanvas\";\nconst EVENT_KEY = `.${DATA_KEY}`;\nconst DATA_API_KEY = \".data-api\";\nconst EVENT_LOAD_DATA_API = `load${EVENT_KEY}${DATA_API_KEY}`;\nconst ESCAPE_KEY = \"Escape\";\n\nconst Default = {\n backdrop: true,\n keyboard: true,\n scroll: false,\n};\n\nconst DefaultType = {\n backdrop: \"boolean\",\n keyboard: \"boolean\",\n scroll: \"boolean\",\n};\n\nconst CLASS_NAME_SHOW = \"show\";\nconst OPEN_SELECTOR = \"[data-twe-offcanvas-init][data-twe-offcanvas-show]\";\n\nconst EVENT_SHOW = `show${EVENT_KEY}`;\nconst EVENT_SHOWN = `shown${EVENT_KEY}`;\nconst EVENT_HIDE = `hide${EVENT_KEY}`;\nconst EVENT_HIDDEN = `hidden${EVENT_KEY}`;\nconst EVENT_KEYDOWN_DISMISS = `keydown.dismiss${EVENT_KEY}`;\n\n/*\n------------------------------------------------------------------------\nClass Definition\n------------------------------------------------------------------------\n*/\n\nclass Offcanvas extends BaseComponent {\n constructor(element, config) {\n super(element);\n\n this._config = this._getConfig(config);\n this._isShown = false;\n this._backdrop = this._initializeBackDrop();\n this._focustrap = this._initializeFocusTrap();\n this._addEventListeners();\n this._didInit = false;\n this._init();\n }\n\n // Getters\n\n static get NAME() {\n return NAME;\n }\n\n static get Default() {\n return Default;\n }\n\n // Public\n\n toggle(relatedTarget) {\n return this._isShown ? this.hide() : this.show(relatedTarget);\n }\n\n show(relatedTarget) {\n if (this._isShown) {\n return;\n }\n\n const showEvent = EventHandler.trigger(this._element, EVENT_SHOW, {\n relatedTarget,\n });\n\n if (showEvent.defaultPrevented) {\n return;\n }\n\n this._isShown = true;\n this._element.style.visibility = \"visible\";\n\n this._backdrop.show();\n\n if (!this._config.scroll) {\n new ScrollBarHelper().hide();\n }\n\n this._element.removeAttribute(\"aria-hidden\");\n this._element.setAttribute(\"aria-modal\", true);\n this._element.setAttribute(\"role\", \"dialog\");\n this._element.setAttribute(`data-twe-offcanvas-${CLASS_NAME_SHOW}`, \"\");\n\n const completeCallBack = () => {\n if (!this._config.scroll) {\n this._focustrap.trap();\n }\n\n EventHandler.trigger(this._element, EVENT_SHOWN, { relatedTarget });\n };\n\n this._queueCallback(completeCallBack, this._element, true);\n }\n\n hide() {\n if (!this._isShown) {\n return;\n }\n\n const hideEvent = EventHandler.trigger(this._element, EVENT_HIDE);\n\n if (hideEvent.defaultPrevented) {\n return;\n }\n\n this._focustrap.disable();\n this._element.blur();\n this._isShown = false;\n this._element.removeAttribute(`data-twe-offcanvas-${CLASS_NAME_SHOW}`);\n this._backdrop.hide();\n\n const completeCallback = () => {\n this._element.setAttribute(\"aria-hidden\", true);\n this._element.removeAttribute(\"aria-modal\");\n this._element.removeAttribute(\"role\");\n this._element.style.visibility = \"hidden\";\n\n if (!this._config.scroll) {\n new ScrollBarHelper().reset();\n }\n\n EventHandler.trigger(this._element, EVENT_HIDDEN);\n };\n\n this._queueCallback(completeCallback, this._element, true);\n }\n\n dispose() {\n this._backdrop.dispose();\n this._focustrap.disable();\n super.dispose();\n }\n\n // Private\n _init() {\n if (this._didInit) {\n return;\n }\n\n EventHandler.on(window, EVENT_LOAD_DATA_API, () =>\n SelectorEngine.find(OPEN_SELECTOR).forEach((el) =>\n Offcanvas.getOrCreateInstance(el).show()\n )\n );\n\n this._didInit = true;\n enableDismissTrigger(Offcanvas);\n }\n\n _getConfig(config) {\n config = {\n ...Default,\n ...Manipulator.getDataAttributes(this._element),\n ...(typeof config === \"object\" ? config : {}),\n };\n typeCheckConfig(NAME, config, DefaultType);\n return config;\n }\n\n _initializeBackDrop() {\n return new Backdrop({\n isVisible: this._config.backdrop,\n isAnimated: true,\n rootElement: this._element.parentNode,\n clickCallback: () => this.hide(),\n });\n }\n\n _initializeFocusTrap() {\n return new FocusTrap(this._element, {\n event: \"keydown\",\n condition: (e) => e.keyCode === TAB,\n onlyVisible: true,\n });\n }\n\n _addEventListeners() {\n EventHandler.on(this._element, EVENT_KEYDOWN_DISMISS, (event) => {\n if (this._config.keyboard && event.key === ESCAPE_KEY) {\n this.hide();\n }\n });\n }\n\n // Static\n\n static jQueryInterface(config) {\n return this.each(function () {\n const data = Offcanvas.getOrCreateInstance(this, config);\n\n if (typeof config !== \"string\") {\n return;\n }\n\n if (\n data[config] === undefined ||\n config.startsWith(\"_\") ||\n config === \"constructor\"\n ) {\n throw new TypeError(`No method named \"${config}\"`);\n }\n\n data[config](this);\n });\n }\n}\n\nexport default Offcanvas;\n" }, { "path": "src/js/free/components/popover.js", "content": "import Tooltip from \"./tooltip\";\n\n/*\n------------------------------------------------------------------------\nConstants\n------------------------------------------------------------------------\n*/\n\nconst NAME = \"popover\";\nconst DATA_KEY = \"twe.popover\";\nconst EVENT_KEY = `.${DATA_KEY}`;\nconst CLASS_PREFIX = \"te-popover\";\n\nconst Default = {\n ...Tooltip.Default,\n placement: \"right\",\n offset: [0, 8],\n trigger: \"click\",\n content: \"\",\n template: `\n
\n

\n
\n
\n `,\n};\n\nconst DefaultType = {\n ...Tooltip.DefaultType,\n content: \"(string|element|function)\",\n};\n\nconst Event = {\n HIDE: `hide${EVENT_KEY}`,\n HIDDEN: `hidden${EVENT_KEY}`,\n SHOW: `show${EVENT_KEY}`,\n SHOWN: `shown${EVENT_KEY}`,\n INSERTED: `inserted${EVENT_KEY}`,\n CLICK: `click${EVENT_KEY}`,\n FOCUSIN: `focusin${EVENT_KEY}`,\n FOCUSOUT: `focusout${EVENT_KEY}`,\n MOUSEENTER: `mouseenter${EVENT_KEY}`,\n MOUSELEAVE: `mouseleave${EVENT_KEY}`,\n};\n\nconst SELECTOR_TITLE = \"[data-twe-popover-header-ref]\";\nconst SELECTOR_CONTENT = \"[data-twe-popover-body-ref]\";\n\n/*\n------------------------------------------------------------------------\nClass Definition\n------------------------------------------------------------------------\n*/\n\nclass Popover extends Tooltip {\n // Getters\n\n static get Default() {\n return Default;\n }\n\n static get NAME() {\n return NAME;\n }\n\n static get Event() {\n return Event;\n }\n\n static get DefaultType() {\n return DefaultType;\n }\n\n // Overrides\n\n isWithContent() {\n return this.getTitle() || this._getContent();\n }\n\n setContent(tip) {\n this._sanitizeAndSetContent(tip, this.getTitle(), SELECTOR_TITLE);\n this._sanitizeAndSetContent(tip, this._getContent(), SELECTOR_CONTENT);\n }\n\n // Private\n\n _getContent() {\n return this._resolvePossibleFunction(this._config.content);\n }\n\n _getBasicClassPrefix() {\n return CLASS_PREFIX;\n }\n\n // Static\n\n static jQueryInterface(config) {\n return this.each(function () {\n const data = Popover.getOrCreateInstance(this, config);\n\n if (typeof config === \"string\") {\n if (typeof data[config] === \"undefined\") {\n throw new TypeError(`No method named \"${config}\"`);\n }\n\n data[config]();\n }\n });\n }\n}\n\nexport default Popover;\n" }, { "path": "src/js/free/components/tooltip.js", "content": "import * as Popper from \"@popperjs/core\";\n\nimport {\n findShadowRoot,\n getElement,\n getUID,\n isElement,\n isRTL,\n noop,\n typeCheckConfig,\n} from \"../../util/index\";\nimport { DefaultAllowlist, sanitizeHtml } from \"../../util/sanitizer\";\nimport Data from \"../../dom/data\";\nimport EventHandler from \"../../dom/event-handler\";\nimport Manipulator from \"../../dom/manipulator\";\nimport SelectorEngine from \"../../dom/selector-engine\";\nimport BaseComponent from \"../../base-component\";\n\n/*\n------------------------------------------------------------------------\nConstants\n------------------------------------------------------------------------\n*/\n\nconst NAME = \"tooltip\";\nconst DATA_KEY = \"twe.tooltip\";\nconst EVENT_KEY = `.${DATA_KEY}`;\nconst CLASS_PREFIX = \"te-tooltip\";\nconst DISALLOWED_ATTRIBUTES = new Set([\"sanitize\", \"allowList\", \"sanitizeFn\"]);\n\nconst DefaultType = {\n animation: \"boolean\",\n template: \"string\",\n title: \"(string|element|function)\",\n trigger: \"string\",\n delay: \"(number|object)\",\n html: \"boolean\",\n selector: \"(string|boolean)\",\n placement: \"(string|function)\",\n offset: \"(array|string|function)\",\n container: \"(string|element|boolean)\",\n fallbackPlacements: \"array\",\n boundary: \"(string|element)\",\n customClass: \"(string|function)\",\n sanitize: \"boolean\",\n sanitizeFn: \"(null|function)\",\n allowList: \"object\",\n popperConfig: \"(null|object|function)\",\n};\n\nconst AttachmentMap = {\n AUTO: \"auto\",\n TOP: \"top\",\n RIGHT: isRTL() ? \"left\" : \"right\",\n BOTTOM: \"bottom\",\n LEFT: isRTL() ? \"right\" : \"left\",\n};\n\nconst Default = {\n animation: true,\n template: `\n
\n
\n
\n `,\n trigger: \"hover focus\",\n title: \"\",\n delay: 0,\n html: false,\n selector: false,\n placement: \"top\",\n offset: [0, 0],\n container: false,\n fallbackPlacements: [\"top\", \"right\", \"bottom\", \"left\"],\n boundary: \"clippingParents\",\n customClass: \"\",\n sanitize: true,\n sanitizeFn: null,\n allowList: DefaultAllowlist,\n popperConfig: { hide: true },\n};\n\nconst Event = {\n HIDE: `hide${EVENT_KEY}`,\n HIDDEN: `hidden${EVENT_KEY}`,\n SHOW: `show${EVENT_KEY}`,\n SHOWN: `shown${EVENT_KEY}`,\n INSERTED: `inserted${EVENT_KEY}`,\n CLICK: `click${EVENT_KEY}`,\n FOCUSIN: `focusin${EVENT_KEY}`,\n FOCUSOUT: `focusout${EVENT_KEY}`,\n MOUSEENTER: `mouseenter${EVENT_KEY}`,\n MOUSELEAVE: `mouseleave${EVENT_KEY}`,\n};\n\nconst CLASS_NAME_FADE = \"fade\";\nconst CLASS_NAME_MODAL = \"modal\";\nconst CLASS_NAME_SHOW = \"show\";\n\nconst HOVER_STATE_SHOW = \"show\";\nconst HOVER_STATE_OUT = \"out\";\n\nconst SELECTOR_TOOLTIP_INNER = \"[data-twe-tooltip-inner-ref]\";\nconst SELECTOR_MODAL = `.${CLASS_NAME_MODAL}`;\n\nconst EVENT_MODAL_HIDE = \"hide.twe.modal\";\n\nconst TRIGGER_HOVER = \"hover\";\nconst TRIGGER_FOCUS = \"focus\";\nconst TRIGGER_CLICK = \"click\";\nconst TRIGGER_MANUAL = \"manual\";\n\n/*\n------------------------------------------------------------------------\nClass Definition\n------------------------------------------------------------------------\n*/\n\nclass Tooltip extends BaseComponent {\n constructor(element, config) {\n if (typeof Popper === \"undefined\") {\n throw new TypeError(\n \"Bootstrap's tooltips require Popper (https://popper.js.org)\"\n );\n }\n\n super(element);\n\n // private\n this._isEnabled = true;\n this._timeout = 0;\n this._hoverState = \"\";\n this._activeTrigger = {};\n this._popper = null;\n\n // Protected\n this._config = this._getConfig(config);\n this.tip = null;\n\n this._setListeners();\n }\n\n // Getters\n\n static get Default() {\n return Default;\n }\n\n static get NAME() {\n return NAME;\n }\n\n static get Event() {\n return Event;\n }\n\n static get DefaultType() {\n return DefaultType;\n }\n\n // Public\n\n enable() {\n this._isEnabled = true;\n }\n\n disable() {\n this._isEnabled = false;\n }\n\n toggleEnabled() {\n this._isEnabled = !this._isEnabled;\n }\n\n toggle(event) {\n if (!this._isEnabled) {\n return;\n }\n\n if (event) {\n const context = this._initializeOnDelegatedTarget(event);\n\n context._activeTrigger.click = !context._activeTrigger.click;\n\n if (context._isWithActiveTrigger()) {\n context._enter(null, context);\n } else {\n context._leave(null, context);\n }\n } else {\n if (this.getTipElement().classList.contains(CLASS_NAME_SHOW)) {\n this._leave(null, this);\n return;\n }\n\n this._enter(null, this);\n }\n }\n\n dispose() {\n clearTimeout(this._timeout);\n\n EventHandler.off(\n this._element.closest(SELECTOR_MODAL),\n EVENT_MODAL_HIDE,\n this._hideModalHandler\n );\n\n if (this.tip) {\n this.tip.remove();\n }\n\n this._disposePopper();\n super.dispose();\n }\n\n show() {\n if (this._element.style.display === \"none\") {\n throw new Error(\"Please use show on visible elements\");\n }\n\n if (!(this.isWithContent() && this._isEnabled)) {\n return;\n }\n\n const showEvent = EventHandler.trigger(\n this._element,\n this.constructor.Event.SHOW\n );\n const shadowRoot = findShadowRoot(this._element);\n const isInTheDom =\n shadowRoot === null\n ? this._element.ownerDocument.documentElement.contains(this._element)\n : shadowRoot.contains(this._element);\n\n if (showEvent.defaultPrevented || !isInTheDom) {\n return;\n }\n\n // A trick to recreate a tooltip in case a new title is given by using the NOT documented `data-twe-original-title`\n // This will be removed later in favor of a `setContent` method\n if (\n this.constructor.NAME === \"tooltip\" &&\n this.tip &&\n this.getTitle() !==\n this.tip.querySelector(SELECTOR_TOOLTIP_INNER).innerHTML\n ) {\n this._disposePopper();\n this.tip.remove();\n this.tip = null;\n }\n\n const tip = this.getTipElement();\n const tipId = getUID(this.constructor.NAME);\n\n tip.setAttribute(\"id\", tipId);\n this._element.setAttribute(\"aria-describedby\", tipId);\n\n if (this._config.animation) {\n setTimeout(() => {\n this.tip.classList.add(\"opacity-100\");\n this.tip.classList.remove(\"opacity-0\");\n }, 100);\n }\n\n const placement =\n typeof this._config.placement === \"function\"\n ? this._config.placement.call(this, tip, this._element)\n : this._config.placement;\n\n const attachment = this._getAttachment(placement);\n this._addAttachmentClass(attachment);\n\n const { container } = this._config;\n Data.setData(tip, this.constructor.DATA_KEY, this);\n\n if (!this._element.ownerDocument.documentElement.contains(this.tip)) {\n container.append(tip);\n EventHandler.trigger(this._element, this.constructor.Event.INSERTED);\n }\n\n if (this._popper) {\n this._popper.update();\n } else {\n this._popper = Popper.createPopper(\n this._element,\n tip,\n this._getPopperConfig(attachment)\n );\n }\n\n const notPopover = tip.getAttribute(\"id\").includes(\"tooltip\");\n if (notPopover) {\n switch (placement) {\n case \"bottom\":\n tip.classList.add(\"py-[0.4rem]\");\n break;\n case \"left\":\n tip.classList.add(\"px-[0.4rem]\");\n break;\n case \"right\":\n tip.classList.add(\"px-[0.4rem]\");\n break;\n\n default:\n tip.classList.add(\"py-[0.4rem]\");\n break;\n }\n }\n\n const customClass = this._resolvePossibleFunction(this._config.customClass);\n if (customClass) {\n tip.classList.add(...customClass.split(\" \"));\n }\n\n // If this is a touch-enabled device we add extra\n // empty mouseover listeners to the body's immediate children;\n // only needed because of broken event delegation on iOS\n // https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html\n if (\"ontouchstart\" in document.documentElement) {\n [].concat(...document.body.children).forEach((element) => {\n EventHandler.on(element, \"mouseover\", noop);\n });\n }\n\n const complete = () => {\n const prevHoverState = this._hoverState;\n\n this._hoverState = null;\n EventHandler.trigger(this._element, this.constructor.Event.SHOWN);\n\n if (prevHoverState === HOVER_STATE_OUT) {\n this._leave(null, this);\n }\n };\n\n const isAnimated = this.tip.classList.contains(\"transition-opacity\");\n this._queueCallback(complete, this.tip, isAnimated);\n }\n\n hide() {\n if (!this._popper) {\n return;\n }\n\n const tip = this.getTipElement();\n const complete = () => {\n if (this._isWithActiveTrigger()) {\n return;\n }\n\n if (this._hoverState !== HOVER_STATE_SHOW) {\n tip.remove();\n }\n\n this._cleanTipClass();\n this._element.removeAttribute(\"aria-describedby\");\n EventHandler.trigger(this._element, this.constructor.Event.HIDDEN);\n\n this._disposePopper();\n };\n\n const hideEvent = EventHandler.trigger(\n this._element,\n this.constructor.Event.HIDE\n );\n if (hideEvent.defaultPrevented) {\n return;\n }\n\n tip.classList.add(\"opacity-0\");\n tip.classList.remove(\"opacity-100\");\n\n // If this is a touch-enabled device we remove the extra\n // empty mouseover listeners we added for iOS support\n if (\"ontouchstart\" in document.documentElement) {\n []\n .concat(...document.body.children)\n .forEach((element) => EventHandler.off(element, \"mouseover\", noop));\n }\n\n this._activeTrigger[TRIGGER_CLICK] = false;\n this._activeTrigger[TRIGGER_FOCUS] = false;\n this._activeTrigger[TRIGGER_HOVER] = false;\n\n const isAnimated = this.tip.classList.contains(\"opacity-0\");\n this._queueCallback(complete, this.tip, isAnimated);\n this._hoverState = \"\";\n }\n\n update() {\n if (this._popper !== null) {\n this._popper.update();\n }\n }\n\n // Protected\n\n isWithContent() {\n return Boolean(this.getTitle());\n }\n\n getTipElement() {\n if (this.tip) {\n return this.tip;\n }\n\n const element = document.createElement(\"div\");\n element.innerHTML = this._config.template;\n\n const tip = element.children[0];\n this.setContent(tip);\n tip.classList.remove(CLASS_NAME_FADE, CLASS_NAME_SHOW);\n\n this.tip = tip;\n return this.tip;\n }\n\n setContent(tip) {\n this._sanitizeAndSetContent(tip, this.getTitle(), SELECTOR_TOOLTIP_INNER);\n }\n\n _sanitizeAndSetContent(template, content, selector) {\n const templateElement = SelectorEngine.findOne(selector, template);\n\n if (!content && templateElement) {\n templateElement.remove();\n return;\n }\n\n // we use append for html objects to maintain js events\n this.setElementContent(templateElement, content);\n }\n\n setElementContent(element, content) {\n if (element === null) {\n return;\n }\n\n if (isElement(content)) {\n content = getElement(content);\n\n // content is a DOM node or a jQuery\n if (this._config.html) {\n if (content.parentNode !== element) {\n element.innerHTML = \"\";\n element.append(content);\n }\n } else {\n element.textContent = content.textContent;\n }\n\n return;\n }\n\n if (this._config.html) {\n if (this._config.sanitize) {\n content = sanitizeHtml(\n content,\n this._config.allowList,\n this._config.sanitizeFn\n );\n }\n\n element.innerHTML = content;\n } else {\n element.textContent = content;\n }\n }\n\n getTitle() {\n const title =\n this._element.getAttribute(\"data-twe-original-title\") ||\n this._config.title;\n\n return this._resolvePossibleFunction(title);\n }\n\n updateAttachment(attachment) {\n if (attachment === \"right\") {\n return \"end\";\n }\n\n if (attachment === \"left\") {\n return \"start\";\n }\n\n return attachment;\n }\n\n // Private\n\n _initializeOnDelegatedTarget(event, context) {\n return (\n context ||\n this.constructor.getOrCreateInstance(\n event.delegateTarget,\n this._getDelegateConfig()\n )\n );\n }\n\n _getOffset() {\n const { offset } = this._config;\n\n if (typeof offset === \"string\") {\n return offset.split(\",\").map((val) => Number.parseInt(val, 10));\n }\n\n if (typeof offset === \"function\") {\n return (popperData) => offset(popperData, this._element);\n }\n\n return offset;\n }\n\n _resolvePossibleFunction(content) {\n return typeof content === \"function\"\n ? content.call(this._element)\n : content;\n }\n\n _getPopperConfig(attachment) {\n const defaultBsPopperConfig = {\n placement: attachment,\n modifiers: [\n {\n name: \"flip\",\n options: {\n fallbackPlacements: this._config.fallbackPlacements,\n },\n },\n {\n name: \"offset\",\n options: {\n offset: this._getOffset(),\n },\n },\n {\n name: \"preventOverflow\",\n options: {\n boundary: this._config.boundary,\n },\n },\n {\n name: \"arrow\",\n options: {\n element: `.${this.constructor.NAME}-arrow`,\n },\n },\n {\n name: \"onChange\",\n enabled: true,\n phase: \"afterWrite\",\n fn: (data) => this._handlePopperPlacementChange(data),\n },\n ],\n onFirstUpdate: (data) => {\n if (data.options.placement !== data.placement) {\n this._handlePopperPlacementChange(data);\n }\n },\n };\n\n return {\n ...defaultBsPopperConfig,\n ...(typeof this._config.popperConfig === \"function\"\n ? this._config.popperConfig(defaultBsPopperConfig)\n : this._config.popperConfig),\n };\n }\n\n _addAttachmentClass(attachment) {\n this.getTipElement().classList.add(\n `${this._getBasicClassPrefix()}-${this.updateAttachment(attachment)}`\n );\n }\n\n _getAttachment(placement) {\n return AttachmentMap[placement.toUpperCase()];\n }\n\n _setListeners() {\n const triggers = this._config.trigger.split(\" \");\n\n triggers.forEach((trigger) => {\n if (trigger === \"click\") {\n EventHandler.on(\n this._element,\n this.constructor.Event.CLICK,\n this._config.selector,\n (event) => this.toggle(event)\n );\n } else if (trigger !== TRIGGER_MANUAL) {\n const eventIn =\n trigger === TRIGGER_HOVER\n ? this.constructor.Event.MOUSEENTER\n : this.constructor.Event.FOCUSIN;\n const eventOut =\n trigger === TRIGGER_HOVER\n ? this.constructor.Event.MOUSELEAVE\n : this.constructor.Event.FOCUSOUT;\n\n EventHandler.on(\n this._element,\n eventIn,\n this._config.selector,\n (event) => this._enter(event)\n );\n EventHandler.on(\n this._element,\n eventOut,\n this._config.selector,\n (event) => this._leave(event)\n );\n }\n });\n\n this._hideModalHandler = () => {\n if (this._element) {\n this.hide();\n }\n };\n\n EventHandler.on(\n this._element.closest(SELECTOR_MODAL),\n EVENT_MODAL_HIDE,\n this._hideModalHandler\n );\n\n if (this._config.selector) {\n this._config = {\n ...this._config,\n trigger: \"manual\",\n selector: \"\",\n };\n } else {\n this._fixTitle();\n }\n }\n\n _fixTitle() {\n const title = this._element.getAttribute(\"title\");\n const originalTitleType = typeof this._element.getAttribute(\n \"data-twe-original-title\"\n );\n\n if (title || originalTitleType !== \"string\") {\n this._element.setAttribute(\"data-twe-original-title\", title || \"\");\n if (\n title &&\n !this._element.getAttribute(\"aria-label\") &&\n !this._element.textContent\n ) {\n this._element.setAttribute(\"aria-label\", title);\n }\n\n this._element.setAttribute(\"title\", \"\");\n }\n }\n\n _enter(event, context) {\n context = this._initializeOnDelegatedTarget(event, context);\n\n if (event) {\n context._activeTrigger[\n event.type === \"focusin\" ? TRIGGER_FOCUS : TRIGGER_HOVER\n ] = true;\n }\n\n if (\n context.getTipElement().classList.contains(CLASS_NAME_SHOW) ||\n context._hoverState === HOVER_STATE_SHOW\n ) {\n context._hoverState = HOVER_STATE_SHOW;\n return;\n }\n\n clearTimeout(context._timeout);\n\n context._hoverState = HOVER_STATE_SHOW;\n\n if (!context._config.delay || !context._config.delay.show) {\n context.show();\n return;\n }\n\n context._timeout = setTimeout(() => {\n if (context._hoverState === HOVER_STATE_SHOW) {\n context.show();\n }\n }, context._config.delay.show);\n }\n\n _leave(event, context) {\n context = this._initializeOnDelegatedTarget(event, context);\n\n if (event) {\n context._activeTrigger[\n event.type === \"focusout\" ? TRIGGER_FOCUS : TRIGGER_HOVER\n ] = context._element.contains(event.relatedTarget);\n }\n\n if (context._isWithActiveTrigger()) {\n return;\n }\n\n clearTimeout(context._timeout);\n\n context._hoverState = HOVER_STATE_OUT;\n\n if (!context._config.delay || !context._config.delay.hide) {\n context.hide();\n return;\n }\n\n context._timeout = setTimeout(() => {\n if (context._hoverState === HOVER_STATE_OUT) {\n context.hide();\n }\n }, context._config.delay.hide);\n }\n\n _isWithActiveTrigger() {\n for (const trigger in this._activeTrigger) {\n if (this._activeTrigger[trigger]) {\n return true;\n }\n }\n\n return false;\n }\n\n _getConfig(config) {\n const dataAttributes = Manipulator.getDataAttributes(this._element);\n\n Object.keys(dataAttributes).forEach((dataAttr) => {\n if (DISALLOWED_ATTRIBUTES.has(dataAttr)) {\n delete dataAttributes[dataAttr];\n }\n });\n\n config = {\n ...this.constructor.Default,\n ...dataAttributes,\n ...(typeof config === \"object\" && config ? config : {}),\n };\n\n config.container =\n config.container === false ? document.body : getElement(config.container);\n\n if (typeof config.delay === \"number\") {\n config.delay = {\n show: config.delay,\n hide: config.delay,\n };\n }\n\n if (typeof config.title === \"number\") {\n config.title = config.title.toString();\n }\n\n if (typeof config.content === \"number\") {\n config.content = config.content.toString();\n }\n\n typeCheckConfig(NAME, config, this.constructor.DefaultType);\n\n if (config.sanitize) {\n config.template = sanitizeHtml(\n config.template,\n config.allowList,\n config.sanitizeFn\n );\n }\n\n return config;\n }\n\n _getDelegateConfig() {\n const config = {};\n\n for (const key in this._config) {\n if (this.constructor.Default[key] !== this._config[key]) {\n config[key] = this._config[key];\n }\n }\n\n // In the future can be replaced with:\n // const keysWithDifferentValues = Object.entries(this._config).filter(entry => this.constructor.Default[entry[0]] !== this._config[entry[0]])\n // `Object.fromEntries(keysWithDifferentValues)`\n return config;\n }\n\n _cleanTipClass() {\n const tip = this.getTipElement();\n const basicClassPrefixRegex = new RegExp(\n `(^|\\\\s)${this._getBasicClassPrefix()}\\\\S+`,\n \"g\"\n );\n const tabClass = tip.getAttribute(\"class\").match(basicClassPrefixRegex);\n if (tabClass !== null && tabClass.length > 0) {\n tabClass\n .map((token) => token.trim())\n .forEach((tClass) => tip.classList.remove(tClass));\n }\n }\n\n _getBasicClassPrefix() {\n return CLASS_PREFIX;\n }\n\n _handlePopperPlacementChange(popperData) {\n const { state } = popperData;\n\n if (!state) {\n return;\n }\n\n this.tip = state.elements.popper;\n this._cleanTipClass();\n this._addAttachmentClass(this._getAttachment(state.placement));\n }\n\n _disposePopper() {\n if (this._popper) {\n this._popper.destroy();\n this._popper = null;\n }\n }\n\n // Static\n\n static jQueryInterface(config) {\n return this.each(function () {\n const data = Tooltip.getOrCreateInstance(this, config);\n\n if (typeof config === \"string\") {\n if (typeof data[config] === \"undefined\") {\n throw new TypeError(`No method named \"${config}\"`);\n }\n\n data[config]();\n }\n });\n }\n}\n\nexport default Tooltip;\n" }, { "path": "src/js/free/forms/input.js", "content": "import { element, onDOMContentLoaded, typeCheckConfig } from \"../../util/index\";\nimport Data from \"../../dom/data\";\nimport EventHandler from \"../../dom/event-handler\";\nimport Manipulator from \"../../dom/manipulator\";\nimport SelectorEngine from \"../../dom/selector-engine\";\nimport \"detect-autofill\";\n\n/*\n------------------------------------------------------------------------\nConstants\n------------------------------------------------------------------------\n*/\n\nconst NAME = \"input\";\nconst DATA_KEY = \"twe.input\";\nconst DATA_WRAPPER = \"data-twe-input-wrapper-init\";\nconst DATA_NOTCH = \"data-twe-input-notch-ref\";\nconst DATA_NOTCH_LEADING = \"data-twe-input-notch-leading-ref\";\nconst DATA_NOTCH_MIDDLE = \"data-twe-input-notch-middle-ref\";\nconst DATA_NOTCH_TRAILING = \"data-twe-input-notch-trailing-ref\";\nconst DATA_HELPER = \"data-twe-input-helper-ref\";\nconst DATA_PLACEHOLDER_ACTIVE = \"data-twe-input-placeholder-active\";\nconst DATA_ACTIVE = \"data-twe-input-state-active\";\nconst DATA_FOCUSED = \"data-twe-input-focused\";\nconst DATA_FORM_COUNTER = \"data-twe-input-form-counter\";\n\nconst SELECTOR_OUTLINE_INPUT = `[${DATA_WRAPPER}] input`;\nconst SELECTOR_OUTLINE_TEXTAREA = `[${DATA_WRAPPER}] textarea`;\n\nconst SELECTOR_NOTCH = `[${DATA_NOTCH}]`;\nconst SELECTOR_NOTCH_LEADING = `[${DATA_NOTCH_LEADING}]`;\nconst SELECTOR_NOTCH_MIDDLE = `[${DATA_NOTCH_MIDDLE}]`;\nconst SELECTOR_HELPER = `[${DATA_HELPER}]`;\n\nconst Default = {\n inputFormWhite: false,\n};\n\nconst DefaultType = {\n inputFormWhite: \"(boolean)\",\n};\n\nexport const DefaultClasses = {\n notch:\n \"group flex absolute left-0 top-0 w-full max-w-full h-full text-left pointer-events-none\",\n notchLeading:\n \"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\",\n notchLeadingNormal:\n \"border-secondary-500 dark:border-neutral-400 group-data-[twe-input-focused]:shadow-notch-1 group-data-[twe-input-focused]:border-primary\",\n notchLeadingWhite:\n \"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\",\n notchMiddle:\n \"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\",\n notchMiddleNormal:\n \"border-secondary-500 dark:border-neutral-400 group-data-[twe-input-focused]:shadow-notch-2 group-data-[twe-input-focused]:border-primary\",\n notchMiddleWhite:\n \"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\",\n notchTrailing:\n \"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\",\n notchTrailingNormal:\n \"border-secondary-500 dark:border-neutral-400 group-data-[twe-input-focused]:shadow-notch-3 group-data-[twe-input-focused]:border-primary\",\n notchTrailingWhite:\n \"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\",\n counter: \"text-right leading-[1.6]\",\n};\n\nconst DefaultClassesType = {\n notch: \"string\",\n notchLeading: \"string\",\n notchLeadingNormal: \"string\",\n notchLeadingWhite: \"string\",\n notchMiddle: \"string\",\n notchMiddleNormal: \"string\",\n notchMiddleWhite: \"string\",\n notchTrailing: \"string\",\n notchTrailingNormal: \"string\",\n notchTrailingWhite: \"string\",\n counter: \"string\",\n};\n\n/*\n------------------------------------------------------------------------\nClass Definition\n------------------------------------------------------------------------\n*/\n\nclass Input {\n constructor(element, config, classes) {\n this._config = this._getConfig(config, element);\n this._element = element;\n this._classes = this._getClasses(classes);\n this._label = null;\n this._labelWidth = 0;\n this._labelMarginLeft = 0;\n this._notchLeading = null;\n this._notchMiddle = null;\n this._notchTrailing = null;\n this._initiated = false;\n this._helper = null;\n this._counter = false;\n this._counterElement = null;\n this._maxLength = 0;\n this._leadingIcon = null;\n if (this._element) {\n Data.setData(element, DATA_KEY, this);\n this.init();\n }\n }\n\n // Getters\n static get NAME() {\n return NAME;\n }\n\n get input() {\n const inputElement =\n SelectorEngine.findOne(\"input\", this._element) ||\n SelectorEngine.findOne(\"textarea\", this._element);\n return inputElement;\n }\n\n // Public\n init() {\n if (this._initiated) {\n return;\n }\n this._getLabelData();\n this._applyDivs();\n this._applyNotch();\n this._activate();\n this._getHelper();\n this._getCounter();\n this._getEvents();\n this._initiated = true;\n }\n\n update() {\n this._getLabelData();\n this._getNotchData();\n this._applyNotch();\n this._activate();\n this._getHelper();\n this._getCounter();\n }\n\n forceActive() {\n this.input.setAttribute(DATA_ACTIVE, \"\");\n\n SelectorEngine.findOne(SELECTOR_NOTCH, this.input.parentNode).setAttribute(\n DATA_ACTIVE,\n \"\"\n );\n }\n\n forceInactive() {\n this.input.removeAttribute(DATA_ACTIVE);\n\n SelectorEngine.findOne(\n SELECTOR_NOTCH,\n this.input.parentNode\n ).removeAttribute(DATA_ACTIVE);\n }\n\n dispose() {\n this._removeBorder();\n\n Data.removeData(this._element, DATA_KEY);\n this._element = null;\n }\n\n // Private\n\n _getConfig(config, element) {\n config = {\n ...Default,\n ...Manipulator.getDataAttributes(element),\n ...(typeof config === \"object\" ? config : {}),\n };\n typeCheckConfig(NAME, config, DefaultType);\n return config;\n }\n\n _getClasses(classes) {\n const dataAttributes = Manipulator.getDataClassAttributes(this._element);\n\n classes = {\n ...DefaultClasses,\n ...dataAttributes,\n ...classes,\n };\n\n typeCheckConfig(NAME, classes, DefaultClassesType);\n\n return classes;\n }\n\n _getLabelData() {\n this._label = SelectorEngine.findOne(\"label\", this._element);\n\n if (this._label === null) {\n this._showPlaceholder();\n } else {\n this._getLabelWidth();\n this._getLabelPositionInInputGroup();\n this._toggleDefaultDatePlaceholder();\n }\n }\n\n _getHelper() {\n this._helper = SelectorEngine.findOne(SELECTOR_HELPER, this._element);\n }\n\n _getCounter() {\n this._counter = Manipulator.getDataAttribute(\n this.input,\n \"inputShowcounter\"\n );\n if (this._counter) {\n this._maxLength = this.input.maxLength;\n this._showCounter();\n }\n }\n\n _getEvents() {\n EventHandler.on(\n this._element,\n \"focus\",\n \"input\",\n Input.activate(new Input())\n );\n EventHandler.on(\n this._element,\n \"input\",\n \"input\",\n Input.activate(new Input())\n );\n EventHandler.on(\n this._element,\n \"blur\",\n \"input\",\n Input.deactivate(new Input())\n );\n\n EventHandler.on(\n this._element,\n \"focus\",\n \"textarea\",\n Input.activate(new Input())\n );\n EventHandler.on(\n this._element,\n \"input\",\n \"textarea\",\n Input.activate(new Input())\n );\n EventHandler.on(\n this._element,\n \"blur\",\n \"textarea\",\n Input.deactivate(new Input())\n );\n\n EventHandler.on(window, \"shown.twe.modal\", (e) => {\n SelectorEngine.find(SELECTOR_OUTLINE_INPUT, e.target).forEach(\n (element) => {\n const instance = Input.getInstance(element.parentNode);\n if (!instance) {\n return;\n }\n instance.update();\n }\n );\n SelectorEngine.find(SELECTOR_OUTLINE_TEXTAREA, e.target).forEach(\n (element) => {\n const instance = Input.getInstance(element.parentNode);\n if (!instance) {\n return;\n }\n instance.update();\n }\n );\n });\n\n EventHandler.on(window, \"shown.twe.dropdown\", (e) => {\n const target = e.target.parentNode.querySelector(\n \"[data-twe-dropdown-menu-ref]\"\n );\n if (target) {\n SelectorEngine.find(SELECTOR_OUTLINE_INPUT, target).forEach(\n (element) => {\n const instance = Input.getInstance(element.parentNode);\n if (!instance) {\n return;\n }\n instance.update();\n }\n );\n SelectorEngine.find(SELECTOR_OUTLINE_TEXTAREA, target).forEach(\n (element) => {\n const instance = Input.getInstance(element.parentNode);\n if (!instance) {\n return;\n }\n instance.update();\n }\n );\n }\n });\n\n EventHandler.on(window, \"shown.twe.tab\", (e) => {\n let targetId;\n\n if (e.target.href) {\n targetId = e.target.href.split(\"#\")[1];\n } else {\n targetId = Manipulator.getDataAttribute(e.target, \"target\").split(\n \"#\"\n )[1];\n }\n\n const target = SelectorEngine.findOne(`#${targetId}`);\n SelectorEngine.find(SELECTOR_OUTLINE_INPUT, target).forEach((element) => {\n const instance = Input.getInstance(element.parentNode);\n if (!instance) {\n return;\n }\n instance.update();\n });\n SelectorEngine.find(SELECTOR_OUTLINE_TEXTAREA, target).forEach(\n (element) => {\n const instance = Input.getInstance(element.parentNode);\n if (!instance) {\n return;\n }\n instance.update();\n }\n );\n });\n\n // form reset handler\n EventHandler.on(window, \"reset\", (e) => {\n SelectorEngine.find(SELECTOR_OUTLINE_INPUT, e.target).forEach(\n (element) => {\n const instance = Input.getInstance(element.parentNode);\n if (!instance) {\n return;\n }\n instance.forceInactive();\n }\n );\n SelectorEngine.find(SELECTOR_OUTLINE_TEXTAREA, e.target).forEach(\n (element) => {\n const instance = Input.getInstance(element.parentNode);\n if (!instance) {\n return;\n }\n instance.forceInactive();\n }\n );\n });\n\n // auto-fill\n EventHandler.on(window, \"onautocomplete\", (e) => {\n const instance = Input.getInstance(e.target.parentNode);\n if (!instance || !e.cancelable) {\n return;\n }\n instance.forceActive();\n });\n }\n\n _showCounter() {\n const counters = SelectorEngine.find(\n `[${DATA_FORM_COUNTER}]`,\n this._element\n );\n if (counters.length > 0) {\n return;\n }\n this._counterElement = document.createElement(\"div\");\n Manipulator.addClass(this._counterElement, this._classes.counter);\n this._counterElement.setAttribute(DATA_FORM_COUNTER, \"\");\n const actualLength = this.input.value.length;\n this._counterElement.innerHTML = `${actualLength} / ${this._maxLength}`;\n this._helper.appendChild(this._counterElement);\n this._bindCounter();\n }\n\n _bindCounter() {\n EventHandler.on(this.input, \"input\", () => {\n const actualLength = this.input.value.length;\n this._counterElement.innerHTML = `${actualLength} / ${this._maxLength}`;\n });\n }\n\n _toggleDefaultDatePlaceholder(input = this.input) {\n const isTypeDate = input.getAttribute(\"type\") === \"date\";\n if (!isTypeDate) {\n return;\n }\n const isInputFocused = document.activeElement === input;\n\n if (!isInputFocused && !input.value) {\n input.style.opacity = 0;\n } else {\n input.style.opacity = 1;\n }\n }\n\n _showPlaceholder() {\n this.input.setAttribute(DATA_PLACEHOLDER_ACTIVE, \"\");\n }\n\n _getNotchData() {\n this._notchMiddle = SelectorEngine.findOne(\n SELECTOR_NOTCH_MIDDLE,\n this._element\n );\n this._notchLeading = SelectorEngine.findOne(\n SELECTOR_NOTCH_LEADING,\n this._element\n );\n }\n\n _getLabelWidth() {\n this._labelWidth = this._label.clientWidth * 0.8 + 8;\n }\n\n _getLabelPositionInInputGroup() {\n this._labelMarginLeft = 0;\n if (!this._element.hasAttribute(\"data-twe-input-group-ref\")) return;\n const input = this.input;\n const prefix = SelectorEngine.prev(\n input,\n \"[data-twe-input-group-text-ref]\"\n )[0];\n if (prefix === undefined) {\n this._labelMarginLeft = 0;\n } else {\n this._labelMarginLeft = prefix.offsetWidth - 1;\n }\n }\n\n _applyDivs() {\n const shadowLeading = this._config.inputFormWhite\n ? this._classes.notchLeadingWhite\n : this._classes.notchLeadingNormal;\n const shadowMiddle = this._config.inputFormWhite\n ? this._classes.notchMiddleWhite\n : this._classes.notchMiddleNormal;\n const shadowTrailing = this._config.inputFormWhite\n ? this._classes.notchTrailingWhite\n : this._classes.notchTrailingNormal;\n\n const allNotchWrappers = SelectorEngine.find(SELECTOR_NOTCH, this._element);\n const notchWrapper = element(\"div\");\n Manipulator.addClass(notchWrapper, this._classes.notch);\n notchWrapper.setAttribute(DATA_NOTCH, \"\");\n this._notchLeading = element(\"div\");\n\n Manipulator.addClass(\n this._notchLeading,\n `${this._classes.notchLeading} ${shadowLeading}`\n );\n this._notchLeading.setAttribute(DATA_NOTCH_LEADING, \"\");\n this._notchMiddle = element(\"div\");\n\n Manipulator.addClass(\n this._notchMiddle,\n `${this._classes.notchMiddle} ${shadowMiddle}`\n );\n this._notchMiddle.setAttribute(DATA_NOTCH_MIDDLE, \"\");\n this._notchTrailing = element(\"div\");\n\n Manipulator.addClass(\n this._notchTrailing,\n `${this._classes.notchTrailing} ${shadowTrailing}`\n );\n this._notchTrailing.setAttribute(DATA_NOTCH_TRAILING, \"\");\n if (allNotchWrappers.length >= 1) {\n return;\n }\n notchWrapper.append(this._notchLeading);\n notchWrapper.append(this._notchMiddle);\n notchWrapper.append(this._notchTrailing);\n this._element.append(notchWrapper);\n\n // for now, before we can fix the rtl for notches\n notchWrapper.dir = \"ltr\";\n }\n\n _applyNotch() {\n this._notchMiddle.style.width = `${this._labelWidth}px`;\n this._notchLeading.style.width = `${this._labelMarginLeft + 9}px`;\n\n if (this._label === null) return;\n this._label.style.marginLeft = `${this._labelMarginLeft}px`;\n }\n\n _removeBorder() {\n const border = SelectorEngine.findOne(SELECTOR_NOTCH, this._element);\n if (border) border.remove();\n }\n\n _activate(event) {\n onDOMContentLoaded(() => {\n this._getElements(event);\n const input = event ? event.target : this.input;\n const notchWrapper = SelectorEngine.findOne(\n SELECTOR_NOTCH,\n this._element\n );\n if (event && event.type === \"focus\") {\n notchWrapper && notchWrapper.setAttribute(DATA_FOCUSED, \"\");\n }\n\n if (input.value !== \"\") {\n input.setAttribute(DATA_ACTIVE, \"\");\n notchWrapper && notchWrapper.setAttribute(DATA_ACTIVE, \"\");\n }\n this._toggleDefaultDatePlaceholder(input);\n });\n }\n\n _getElements(event) {\n if (event) {\n this._element = event.target.parentNode;\n this._label = SelectorEngine.findOne(\"label\", this._element);\n }\n\n if (event && this._label) {\n const prevLabelWidth = this._labelWidth;\n this._getLabelData();\n\n if (prevLabelWidth !== this._labelWidth) {\n this._notchMiddle = SelectorEngine.findOne(\n SELECTOR_NOTCH_MIDDLE,\n event.target.parentNode\n );\n this._notchLeading = SelectorEngine.findOne(\n SELECTOR_NOTCH_LEADING,\n event.target.parentNode\n );\n this._applyNotch();\n }\n }\n }\n\n _deactivate(event) {\n const input = event ? event.target : this.input;\n\n if (input.getAttribute(\"aria-expanded\") === \"true\") {\n return;\n }\n\n const notchWrapper = SelectorEngine.findOne(\n SELECTOR_NOTCH,\n input.parentNode\n );\n notchWrapper.removeAttribute(DATA_FOCUSED);\n\n if (input.value === \"\") {\n input.removeAttribute(DATA_ACTIVE);\n notchWrapper.removeAttribute(DATA_ACTIVE);\n }\n this._toggleDefaultDatePlaceholder(input);\n }\n\n static activate(instance) {\n return function (event) {\n instance._activate(event);\n };\n }\n\n static deactivate(instance) {\n return function (event) {\n instance._deactivate(event);\n };\n }\n\n static jQueryInterface(config, options) {\n return this.each(function () {\n let data = Data.getData(this, DATA_KEY);\n const _config = typeof config === \"object\" && config;\n if (!data && /dispose/.test(config)) {\n return;\n }\n if (!data) {\n data = new Input(this, _config);\n }\n if (typeof config === \"string\") {\n if (typeof data[config] === \"undefined\") {\n throw new TypeError(`No method named \"${config}\"`);\n }\n data[config](options);\n }\n });\n }\n\n static getInstance(element) {\n return Data.getData(element, DATA_KEY);\n }\n\n static getOrCreateInstance(element, config = {}) {\n return (\n this.getInstance(element) ||\n new this(element, typeof config === \"object\" ? config : null)\n );\n }\n}\n\nexport default Input;\n" }, { "path": "src/js/free/methods/ripple.js", "content": "import { element, typeCheckConfig } from \"../../util/index\";\nimport Data from \"../../dom/data\";\nimport EventHandler from \"../../dom/event-handler\";\nimport Manipulator from \"../../dom/manipulator\";\nimport SelectorEngine from \"../../dom/selector-engine\";\nimport { getStyle } from \"../../util/getStyle\";\n\n/*\n------------------------------------------------------------------------\nConstants\n------------------------------------------------------------------------\n*/\n\nconst NAME = \"ripple\";\nconst DATA_KEY = \"twe.ripple\";\n\nconst GRADIENT =\n \"rgba({{color}}, 0.2) 0, rgba({{color}}, 0.3) 40%, rgba({{color}}, 0.4) 50%, rgba({{color}}, 0.5) 60%, rgba({{color}}, 0) 70%\";\n\nconst SELECTOR_COMPONENT = [\"[data-twe-ripple-init]\"];\nconst DEFAULT_RIPPLE_COLOR = [0, 0, 0];\n\n// prettier-ignore\nconst BOOTSTRAP_COLORS = [\n {\n name: \"primary\",\n gradientColor: getStyle(\"text-primary\", { defaultValue: \"#3B71CA\", inherit: false }),\n },\n {\n name: \"secondary\",\n gradientColor: getStyle(\"text-primary-100\", { defaultValue: \"#9FA6B2\", inherit: false }),\n },\n {\n name: \"success\",\n gradientColor: getStyle(\"text-success\", { defaultValue: \"#14A44D\", inherit: false }),\n },\n {\n name: \"danger\",\n gradientColor: getStyle(\"text-danger\", { defaultValue: \"#DC4C64\", inherit: false }),\n },\n {\n name: \"warning\",\n gradientColor: getStyle(\"text-warning\", { defaultValue: \"#E4A11B\", inherit: false }),\n },\n {\n name: \"info\",\n gradientColor: getStyle(\"text-info\", { defaultValue: \"#54B4D3\", inherit: false }),\n },\n {\n name: \"light\",\n gradientColor: \"#fbfbfb\",\n },\n {\n name: \"dark\",\n gradientColor: \"#262626\",\n },\n];\n\n// Sets value when run opacity transition\n// Hide element after 50% (0.5) time of animation and finish on 100%\nconst TRANSITION_BREAK_OPACITY = 0.5;\n\nconst Default = {\n rippleCentered: false,\n rippleColor: \"\",\n rippleColorDark: \"\",\n rippleDuration: \"500ms\",\n rippleRadius: 0,\n rippleUnbound: false,\n};\n\nconst DefaultType = {\n rippleCentered: \"boolean\",\n rippleColor: \"string\",\n rippleColorDark: \"string\",\n rippleDuration: \"string\",\n rippleRadius: \"number\",\n rippleUnbound: \"boolean\",\n};\n\nconst DefaultClasses = {\n ripple: \"relative overflow-hidden inline-block align-bottom\",\n rippleWave:\n \"rounded-[50%] opacity-50 pointer-events-none absolute touch-none scale-0 transition-[transform,_opacity] ease-[cubic-bezier(0,0,0.15,1),_cubic-bezier(0,0,0.15,1)] z-[999]\",\n unbound: \"overflow-visible\",\n};\n\nconst DefaultClassesType = {\n ripple: \"string\",\n rippleWave: \"string\",\n unbound: \"string\",\n};\n\n/*\n------------------------------------------------------------------------\nClass Definition\n------------------------------------------------------------------------\n*/\n\nclass Ripple {\n constructor(element, options, classes) {\n this._element = element;\n this._options = this._getConfig(options);\n this._classes = this._getClasses(classes);\n this._currentColor = this._options.rippleColor;\n\n if (this._element) {\n Data.setData(element, DATA_KEY, this);\n Manipulator.addClass(this._element, this._classes.ripple);\n }\n this._clickHandler = this._createRipple.bind(this);\n this._rippleTimer = null;\n this._isMinWidthSet = false;\n this._initialClasses = null;\n\n this.init();\n }\n\n // Getters\n\n static get NAME() {\n return NAME;\n }\n\n // Public\n\n init() {\n this._addClickEvent(this._element);\n }\n\n dispose() {\n Data.removeData(this._element, DATA_KEY);\n EventHandler.off(this._element, \"mousedown\", this._clickHandler);\n this._element = null;\n this._options = null;\n }\n\n // Private\n\n _autoInit(event) {\n SELECTOR_COMPONENT.forEach((selector) => {\n const target = SelectorEngine.closest(event.target, selector);\n if (target) {\n this._element = SelectorEngine.closest(event.target, selector);\n }\n });\n\n if (!this._element.style.minWidth) {\n Manipulator.style(this._element, {\n \"min-width\": getComputedStyle(this._element).width,\n });\n this._isMinWidthSet = true;\n }\n\n this._options = this._getConfig();\n this._classes = this._getClasses();\n\n this._initialClasses = [...this._element.classList];\n Manipulator.addClass(this._element, this._classes.ripple);\n this._createRipple(event);\n }\n\n _addClickEvent(target) {\n EventHandler.on(target, \"mousedown\", this._clickHandler);\n }\n\n _createRipple(event) {\n if (this._element.className.indexOf(this._classes.ripple) < 0) {\n Manipulator.addClass(this._element, this._classes.ripple);\n }\n\n const { layerX, layerY } = event;\n const offsetX = event.offsetX || layerX;\n const offsetY = event.offsetY || layerY;\n const height = this._element.offsetHeight;\n const width = this._element.offsetWidth;\n const duration = this._durationToMsNumber(this._options.rippleDuration);\n const diameterOptions = {\n offsetX: this._options.rippleCentered ? height / 2 : offsetX,\n offsetY: this._options.rippleCentered ? width / 2 : offsetY,\n height,\n width,\n };\n const diameter = this._getDiameter(diameterOptions);\n const radiusValue = this._options.rippleRadius || diameter / 2;\n\n const opacity = {\n delay: duration * TRANSITION_BREAK_OPACITY,\n duration: duration - duration * TRANSITION_BREAK_OPACITY,\n };\n\n const styles = {\n left: this._options.rippleCentered\n ? `${width / 2 - radiusValue}px`\n : `${offsetX - radiusValue}px`,\n top: this._options.rippleCentered\n ? `${height / 2 - radiusValue}px`\n : `${offsetY - radiusValue}px`,\n height: `${this._options.rippleRadius * 2 || diameter}px`,\n width: `${this._options.rippleRadius * 2 || diameter}px`,\n transitionDelay: `0s, ${opacity.delay}ms`,\n transitionDuration: `${duration}ms, ${opacity.duration}ms`,\n };\n\n const rippleHTML = element(\"div\");\n\n this._createHTMLRipple({\n wrapper: this._element,\n ripple: rippleHTML,\n styles,\n });\n this._removeHTMLRipple({ ripple: rippleHTML, duration });\n }\n\n _createHTMLRipple({ wrapper, ripple, styles }) {\n Object.keys(styles).forEach(\n (property) => (ripple.style[property] = styles[property])\n );\n Manipulator.addClass(ripple, this._classes.rippleWave);\n ripple.setAttribute(\"data-twe-ripple-ref\", \"\");\n this._addColor(ripple, wrapper);\n\n this._toggleUnbound(wrapper);\n this._appendRipple(ripple, wrapper);\n }\n\n _removeHTMLRipple({ ripple, duration }) {\n if (this._rippleTimer) {\n clearTimeout(this._rippleTimer);\n this._rippleTimer = null;\n }\n if (ripple) {\n setTimeout(() => {\n ripple.classList.add(\"!opacity-0\");\n }, 10);\n }\n this._rippleTimer = setTimeout(() => {\n if (ripple) {\n ripple.remove();\n if (this._element) {\n SelectorEngine.find(\"[data-twe-ripple-ref]\", this._element).forEach(\n (rippleEl) => {\n rippleEl.remove();\n }\n );\n if (this._isMinWidthSet) {\n Manipulator.style(this._element, { \"min-width\": \"\" });\n this._isMinWidthSet = false;\n }\n // check if added ripple classes wasn't there initialy\n const classesToRemove = this._initialClasses\n ? this._addedNewRippleClasses(\n this._classes.ripple,\n this._initialClasses\n )\n : this._classes.ripple.split(\" \");\n Manipulator.removeClass(this._element, classesToRemove);\n }\n }\n }, duration);\n }\n\n _addedNewRippleClasses(defaultRipple, initialClasses) {\n return defaultRipple\n .split(\" \")\n .filter(\n (item) => initialClasses.findIndex((init) => item === init) === -1\n );\n }\n\n _durationToMsNumber(time) {\n return Number(time.replace(\"ms\", \"\").replace(\"s\", \"000\"));\n }\n\n _getConfig(config = {}) {\n const dataAttributes = Manipulator.getDataAttributes(this._element);\n\n config = {\n ...Default,\n ...dataAttributes,\n ...config,\n };\n\n typeCheckConfig(NAME, config, DefaultType);\n return config;\n }\n\n _getClasses(classes = {}) {\n const dataAttributes = Manipulator.getDataClassAttributes(this._element);\n\n classes = {\n ...DefaultClasses,\n ...dataAttributes,\n ...classes,\n };\n\n typeCheckConfig(NAME, classes, DefaultClassesType);\n\n return classes;\n }\n\n _getDiameter({ offsetX, offsetY, height, width }) {\n const top = offsetY <= height / 2;\n const left = offsetX <= width / 2;\n const pythagorean = (sideA, sideB) => Math.sqrt(sideA ** 2 + sideB ** 2);\n\n const positionCenter = offsetY === height / 2 && offsetX === width / 2;\n // mouse position on the quadrants of the coordinate system\n const quadrant = {\n first: top === true && left === false,\n second: top === true && left === true,\n third: top === false && left === true,\n fourth: top === false && left === false,\n };\n\n const getCorner = {\n topLeft: pythagorean(offsetX, offsetY),\n topRight: pythagorean(width - offsetX, offsetY),\n bottomLeft: pythagorean(offsetX, height - offsetY),\n bottomRight: pythagorean(width - offsetX, height - offsetY),\n };\n\n let diameter = 0;\n\n if (positionCenter || quadrant.fourth) {\n diameter = getCorner.topLeft;\n } else if (quadrant.third) {\n diameter = getCorner.topRight;\n } else if (quadrant.second) {\n diameter = getCorner.bottomRight;\n } else if (quadrant.first) {\n diameter = getCorner.bottomLeft;\n }\n return diameter * 2;\n }\n\n _appendRipple(target, parent) {\n const FIX_ADD_RIPPLE_EFFECT = 50; // delay for active animations\n parent.appendChild(target);\n setTimeout(() => {\n Manipulator.addClass(target, \"opacity-0 scale-100\");\n }, FIX_ADD_RIPPLE_EFFECT);\n }\n\n _toggleUnbound(target) {\n if (this._options.rippleUnbound === true) {\n Manipulator.addClass(target, this._classes.unbound);\n } else {\n Manipulator.removeClass(target, this._classes.unbound);\n }\n }\n\n _addColor(target) {\n let rippleColor = this._options.rippleColor || \"rgb(0,0,0)\";\n\n if (\n localStorage.theme === \"dark\" ||\n (!(\"theme\" in localStorage) &&\n window.matchMedia(\"(prefers-color-scheme: dark)\").matches)\n ) {\n rippleColor = this._options.rippleColorDark || this._options.rippleColor;\n }\n\n const IS_BOOTSTRAP_COLOR = BOOTSTRAP_COLORS.find(\n (color) => color.name === rippleColor.toLowerCase()\n );\n\n const rgbValue = IS_BOOTSTRAP_COLOR\n ? this._colorToRGB(IS_BOOTSTRAP_COLOR.gradientColor).join(\",\")\n : this._colorToRGB(rippleColor).join(\",\");\n\n const gradientImage = GRADIENT.split(\"{{color}}\").join(`${rgbValue}`);\n target.style.backgroundImage = `radial-gradient(circle, ${gradientImage})`;\n }\n\n _colorToRGB(color) {\n function hexToRgb(color) {\n const HEX_COLOR_LENGTH = 7;\n const IS_SHORT_HEX = color.length < HEX_COLOR_LENGTH;\n if (IS_SHORT_HEX) {\n color = `#${color[1]}${color[1]}${color[2]}${color[2]}${color[3]}${color[3]}`;\n }\n return [\n parseInt(color.substr(1, 2), 16),\n parseInt(color.substr(3, 2), 16),\n parseInt(color.substr(5, 2), 16),\n ];\n }\n\n function namedColorsToRgba(color) {\n const tempElem = document.body.appendChild(\n document.createElement(\"fictum\")\n );\n const flag = \"rgb(1, 2, 3)\";\n tempElem.style.color = flag;\n if (tempElem.style.color !== flag) {\n return DEFAULT_RIPPLE_COLOR;\n }\n tempElem.style.color = color;\n if (tempElem.style.color === flag || tempElem.style.color === \"\") {\n return DEFAULT_RIPPLE_COLOR;\n } // color parse failed\n color = getComputedStyle(tempElem).color;\n document.body.removeChild(tempElem);\n return color;\n }\n\n function rgbaToRgb(color) {\n color = color.match(/[.\\d]+/g).map((a) => +Number(a));\n color.length = 3;\n return color;\n }\n\n if (color.toLowerCase() === \"transparent\") {\n return DEFAULT_RIPPLE_COLOR;\n }\n if (color[0] === \"#\") {\n return hexToRgb(color);\n }\n if (color.indexOf(\"rgb\") === -1) {\n color = namedColorsToRgba(color);\n }\n if (color.indexOf(\"rgb\") === 0) {\n return rgbaToRgb(color);\n }\n\n return DEFAULT_RIPPLE_COLOR;\n }\n\n // Static\n static autoInitial(instance) {\n return function (event) {\n instance._autoInit(event);\n };\n }\n\n static jQueryInterface(options) {\n return this.each(function () {\n const data = Data.getData(this, DATA_KEY);\n if (!data) {\n return new Ripple(this, options);\n }\n\n return null;\n });\n }\n\n static getInstance(element) {\n return Data.getData(element, DATA_KEY);\n }\n\n static getOrCreateInstance(element, config = {}) {\n return (\n this.getInstance(element) ||\n new this(element, typeof config === \"object\" ? config : null)\n );\n }\n}\n\nexport default Ripple;\n" }, { "path": "src/js/free/navigation/scrollspy.js", "content": "import {\n getElement,\n getSelectorFromElement,\n typeCheckConfig,\n} from \"../../util/index\";\nimport EventHandler from \"../../dom/event-handler\";\nimport Manipulator from \"../../dom/manipulator\";\nimport MDBManipulator from \"../../dom/manipulator\";\nimport SelectorEngine from \"../../dom/selector-engine\";\nimport BaseComponent from \"../../base-component\";\n\n/*\n------------------------------------------------------------------------\nConstants\n------------------------------------------------------------------------\n*/\n\nconst NAME = \"scrollspy\";\nconst DATA_KEY = \"twe.scrollspy\";\nconst EVENT_KEY = `.${DATA_KEY}`;\n\nconst Default = {\n offset: 10,\n method: \"auto\",\n target: \"\",\n};\n\nconst DefaultType = {\n offset: \"number\",\n method: \"string\",\n target: \"(string|element)\",\n};\n\nconst DefaultClasses = {\n active:\n \"!text-primary font-semibold border-s-[0.125rem] border-solid border-primary\",\n};\n\nconst DefaultClassesType = {\n active: \"string\",\n};\n\nconst EVENT_ACTIVATE = `activate${EVENT_KEY}`;\nconst EVENT_SCROLL = `scroll${EVENT_KEY}`;\n\nconst LINK_ACTIVE = \"data-twe-nav-link-active\";\nconst LINK_COLLAPSIBLE = \"data-twe-collapsible-scrollspy-ref\";\nconst SELECTOR_DROPDOWN_ITEM = \"[data-twe-dropdown-item-ref]\";\nconst SELECTOR_NAV_LIST_GROUP = \"[data-twe-nav-list-ref]\";\nconst SELECTOR_NAV_LINKS = \"[data-twe-nav-link-ref]\";\nconst SELECTOR_NAV_ITEMS = \"[data-twe-nav-item-ref]\";\nconst SELECTOR_LIST_ITEMS = \"[data-twe-list-group-item-ref]\";\nconst SELECTOR_LINK_ITEMS = `${SELECTOR_NAV_LINKS}, ${SELECTOR_LIST_ITEMS}, ${SELECTOR_DROPDOWN_ITEM}`;\nconst SELECTOR_DROPDOWN = \"[data-twe-dropdown-ref]\";\nconst SELECTOR_DROPDOWN_TOGGLE = \"[data-twe-dropdown-toggle-ref]\";\nconst SELECTOR_COLLAPSIBLE_SCROLLSPY = `[${LINK_COLLAPSIBLE}]`;\nconst SELECTOR_ACTIVE = `[${LINK_ACTIVE}]`;\nconst SELECTOR_LIST = \"ul\";\n\nconst METHOD_OFFSET = \"maxOffset\";\nconst METHOD_POSITION = \"position\";\n\n/*\n------------------------------------------------------------------------\nClass Definition\n------------------------------------------------------------------------\n*/\n\nclass ScrollSpy extends BaseComponent {\n constructor(element, config, classes) {\n super(element);\n this._scrollElement =\n this._element.tagName === \"BODY\" ? window : this._element;\n this._config = this._getConfig(config);\n this._classes = this._getClasses(classes);\n this._offsets = [];\n this._targets = [];\n this._collapsibles = [];\n\n this._activeTarget = null;\n this._scrollHeight = 0;\n\n EventHandler.on(this._scrollElement, EVENT_SCROLL, () => this._process());\n\n this.refresh();\n this._process();\n\n this._bindActivateEvent();\n this._getCollapsibles();\n\n if (this._collapsibles.length === 0) {\n return;\n }\n\n this._showSubsection();\n this._hideSubsection();\n }\n\n // Getters\n\n static get Default() {\n return Default;\n }\n\n static get NAME() {\n return NAME;\n }\n\n // Public\n\n refresh() {\n const autoMethod =\n this._scrollElement === this._scrollElement.window\n ? METHOD_OFFSET\n : METHOD_POSITION;\n\n const offsetMethod =\n this._config.method === \"auto\" ? autoMethod : this._config.method;\n\n const offsetBase =\n offsetMethod === METHOD_POSITION ? this._getScrollTop() : 0;\n\n this._offsets = [];\n this._targets = [];\n this._scrollHeight = this._getScrollHeight();\n\n const targets = SelectorEngine.find(\n SELECTOR_LINK_ITEMS,\n this._config.target\n );\n\n targets\n .map((element) => {\n const targetSelector = getSelectorFromElement(element);\n const target = targetSelector\n ? SelectorEngine.findOne(targetSelector)\n : null;\n\n if (target) {\n const targetBCR = target.getBoundingClientRect();\n if (targetBCR.width || targetBCR.height) {\n return [\n Manipulator[offsetMethod](target).top + offsetBase,\n targetSelector,\n ];\n }\n }\n\n return null;\n })\n .filter((item) => item)\n .sort((a, b) => a[0] - b[0])\n .forEach((item) => {\n this._offsets.push(item[0]);\n this._targets.push(item[1]);\n });\n }\n\n dispose() {\n EventHandler.off(this._scrollElement, EVENT_KEY);\n EventHandler.off(this._scrollElement, EVENT_ACTIVATE);\n\n super.dispose();\n }\n\n // Private\n _getConfig(config) {\n config = {\n ...Default,\n ...Manipulator.getDataAttributes(this._element),\n ...(typeof config === \"object\" && config ? config : {}),\n };\n\n config.target = getElement(config.target) || document.documentElement;\n\n typeCheckConfig(NAME, config, DefaultType);\n\n return config;\n }\n\n _getClasses(classes) {\n const dataAttributes = MDBManipulator.getDataClassAttributes(this._element);\n\n classes = {\n ...DefaultClasses,\n ...dataAttributes,\n ...classes,\n };\n\n typeCheckConfig(NAME, classes, DefaultClassesType);\n\n return classes;\n }\n\n _getScrollTop() {\n return this._scrollElement === window\n ? this._scrollElement.pageYOffset\n : this._scrollElement.scrollTop;\n }\n\n _getScrollHeight() {\n return (\n this._scrollElement.scrollHeight ||\n Math.max(\n document.body.scrollHeight,\n document.documentElement.scrollHeight\n )\n );\n }\n\n _getOffsetHeight() {\n return this._scrollElement === window\n ? window.innerHeight\n : this._scrollElement.getBoundingClientRect().height;\n }\n\n _process() {\n const scrollTop = this._getScrollTop() + this._config.offset;\n const scrollHeight = this._getScrollHeight();\n const maxScroll =\n this._config.offset + scrollHeight - this._getOffsetHeight();\n\n if (this._scrollHeight !== scrollHeight) {\n this.refresh();\n }\n\n if (scrollTop >= maxScroll) {\n const target = this._targets[this._targets.length - 1];\n\n if (this._activeTarget !== target) {\n this._activate(target);\n }\n\n return;\n }\n\n if (\n this._activeTarget &&\n scrollTop < this._offsets[0] &&\n this._offsets[0] > 0\n ) {\n this._activeTarget = null;\n this._clear();\n return;\n }\n\n for (let i = this._offsets.length; i--; ) {\n const isActiveTarget =\n this._activeTarget !== this._targets[i] &&\n scrollTop >= this._offsets[i] &&\n (typeof this._offsets[i + 1] === \"undefined\" ||\n scrollTop < this._offsets[i + 1]);\n\n if (isActiveTarget) {\n this._activate(this._targets[i]);\n }\n }\n }\n\n _activate(target) {\n this._activeTarget = target;\n\n this._clear();\n\n const queries = SELECTOR_LINK_ITEMS.split(\",\").map(\n (selector) =>\n `${selector}[data-twe-target=\"${target}\"],${selector}[href=\"${target}\"]`\n );\n\n const link = SelectorEngine.findOne(queries.join(\",\"), this._config.target);\n\n link.classList.add(...this._classes.active.split(\" \"));\n link.setAttribute(LINK_ACTIVE, \"\");\n\n if (link.getAttribute(SELECTOR_DROPDOWN_ITEM)) {\n SelectorEngine.findOne(\n SELECTOR_DROPDOWN_TOGGLE,\n link.closest(SELECTOR_DROPDOWN)\n ).classList.add(...this._classes.active.split(\" \"));\n } else {\n SelectorEngine.parents(link, SELECTOR_NAV_LIST_GROUP).forEach(\n (listGroup) => {\n // Set triggered links parents as active\n // With both
    and