diff --git a/.browserslistrc b/.browserslistrc index c71c8b9c717b..cddd23005246 100644 --- a/.browserslistrc +++ b/.browserslistrc @@ -9,3 +9,4 @@ Firefox ESR iOS >= 12 Safari >= 12 not Explorer <= 11 +not kaios <= 2.5 # fix floating label issues in Firefox (see https://github.com/postcss/autoprefixer/issues/1533) diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index 5960b3bef571..6f680664ca67 100644 --- a/.bundlewatch.config.json +++ b/.bundlewatch.config.json @@ -2,55 +2,55 @@ "files": [ { "path": "./dist/css/bootstrap-grid.css", - "maxSize": "7.25 kB" + "maxSize": "6.5 kB" }, { "path": "./dist/css/bootstrap-grid.min.css", - "maxSize": "6.5 kB" + "maxSize": "6.0 kB" }, { "path": "./dist/css/bootstrap-reboot.css", - "maxSize": "2.5 kB" + "maxSize": "3.5 kB" }, { "path": "./dist/css/bootstrap-reboot.min.css", - "maxSize": "2.35 kB" + "maxSize": "3.25 kB" }, { "path": "./dist/css/bootstrap-utilities.css", - "maxSize": "7.75 kB" + "maxSize": "11.75 kB" }, { "path": "./dist/css/bootstrap-utilities.min.css", - "maxSize": "7 kB" + "maxSize": "10.75 kB" }, { "path": "./dist/css/bootstrap.css", - "maxSize": "26 kB" + "maxSize": "32.5 kB" }, { "path": "./dist/css/bootstrap.min.css", - "maxSize": "23.5 kB" + "maxSize": "30.25 kB" }, { "path": "./dist/js/bootstrap.bundle.js", - "maxSize": "42.5 kB" + "maxSize": "43.0 kB" }, { "path": "./dist/js/bootstrap.bundle.min.js", - "maxSize": "22.75 kB" + "maxSize": "23.5 kB" }, { "path": "./dist/js/bootstrap.esm.js", - "maxSize": "27.5 kB" + "maxSize": "28.0 kB" }, { "path": "./dist/js/bootstrap.esm.min.js", - "maxSize": "18.5 kB" + "maxSize": "18.25 kB" }, { "path": "./dist/js/bootstrap.js", - "maxSize": "28.25 kB" + "maxSize": "28.75 kB" }, { "path": "./dist/js/bootstrap.min.js", diff --git a/.cspell.json b/.cspell.json index bfbdaad79c49..d2434c30a608 100644 --- a/.cspell.json +++ b/.cspell.json @@ -3,10 +3,12 @@ "words": [ "affordance", "allowfullscreen", + "Analyser", "autohide", "autohiding", "autoplay", "autoplays", + "autoplaying", "blazingly", "Blockquotes", "Bootstrappers", @@ -18,6 +20,7 @@ "btnradio", "callout", "callouts", + "camelCase", "clearfix", "Codesniffer", "combinator", @@ -37,6 +40,7 @@ "dropright", "dropstart", "dropup", + "dgst", "errorf", "favicon", "favicons", @@ -48,6 +52,7 @@ "Hoverable", "hreflang", "hstack", + "importmap", "jsdelivr", "Jumpstart", "keyframes", @@ -59,6 +64,8 @@ "markdownify", "mediaqueries", "minifiers", + "misfunction", + "mkdir", "monospace", "mouseleave", "navbars", @@ -71,7 +78,6 @@ "Packagist", "popperjs", "prebuild", - "precompiled", "prefersreducedmotion", "prepended", "printf", @@ -81,11 +87,15 @@ "roboto", "RTLCSS", "ruleset", + "sassrc", "screenreaders", "scrollbars", "scrollspy", "Segoe", + "semibold", + "socio", "srcset", + "stackblitz", "stickied", "Stylelint", "subnav", @@ -100,17 +110,16 @@ "unstyled", "Uppercased", "urlize", + "urlquery", "vbtn", "viewports", + "Vite", "vstack", "walkthroughs", "WCAG", "zindex" ], "language": "en-US", - "files": [ - "**/*.md" - ], "ignorePaths": [ ".cspell.json", "dist/", diff --git a/.eslintignore b/.eslintignore index a18b03a5df54..e42161487a5b 100644 --- a/.eslintignore +++ b/.eslintignore @@ -2,5 +2,8 @@ **/dist/ **/vendor/ /_site/ +/site/public/ /js/coverage/ /site/static/sw.js +/site/static/docs/**/assets/sw.js +/site/layouts/partials/ diff --git a/.eslintrc.json b/.eslintrc.json index d8e83a8d2eec..da686166f5a8 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -14,6 +14,35 @@ "error", "never" ], + "import/extensions": [ + "error", + "ignorePackages", + { + "js": "always" + } + ], + "import/first": "error", + "import/newline-after-import": "error", + "import/no-absolute-path": "error", + "import/no-amd": "error", + "import/no-cycle": [ + "error", + { + "ignoreExternal": true + } + ], + "import/no-duplicates": "error", + "import/no-extraneous-dependencies": "error", + "import/no-mutable-exports": "error", + "import/no-named-as-default": "error", + "import/no-named-as-default-member": "error", + "import/no-named-default": "error", + "import/no-self-import": "error", + "import/no-unassigned-import": [ + "error" + ], + "import/no-useless-path-segments": "error", + "import/order": "error", "indent": [ "error", 2, @@ -22,6 +51,7 @@ "SwitchCase": 1 } ], + "logical-assignment-operators": "off", "max-params": [ "warn", 5 @@ -46,20 +76,166 @@ "error", "after" ], + "prefer-object-has-own": "off", + "prefer-template": "error", "semi": [ "error", "never" ], + "strict": "error", "unicorn/explicit-length-check": "off", + "unicorn/filename-case": "off", + "unicorn/no-anonymous-default-export": "off", "unicorn/no-array-callback-reference": "off", "unicorn/no-array-method-this-argument": "off", "unicorn/no-null": "off", + "unicorn/no-typeof-undefined": "off", "unicorn/no-unused-properties": "error", + "unicorn/numeric-separators-style": "off", "unicorn/prefer-array-flat": "off", + "unicorn/prefer-at": "off", "unicorn/prefer-dom-node-dataset": "off", + "unicorn/prefer-global-this": "off", "unicorn/prefer-module": "off", "unicorn/prefer-query-selector": "off", "unicorn/prefer-spread": "off", + "unicorn/prefer-string-raw": "off", + "unicorn/prefer-string-replace-all": "off", + "unicorn/prefer-structured-clone": "off", "unicorn/prevent-abbreviations": "off" - } + }, + "overrides": [ + { + "files": [ + "build/**" + ], + "env": { + "browser": false, + "node": true + }, + "parserOptions": { + "sourceType": "module" + }, + "rules": { + "no-console": "off", + "unicorn/prefer-top-level-await": "off" + } + }, + { + "files": [ + "js/**" + ], + "parserOptions": { + "sourceType": "module" + } + }, + { + "files": [ + "js/tests/*.js", + "js/tests/integration/rollup*.js" + ], + "env": { + "node": true + }, + "parserOptions": { + "sourceType": "script" + } + }, + { + "files": [ + "js/tests/unit/**" + ], + "env": { + "jasmine": true + }, + "rules": { + "no-console": "off", + "unicorn/consistent-function-scoping": "off", + "unicorn/no-useless-undefined": "off", + "unicorn/prefer-add-event-listener": "off" + } + }, + { + "files": [ + "js/tests/visual/**" + ], + "plugins": [ + "html" + ], + "settings": { + "html/html-extensions": [ + ".html" + ] + }, + "rules": { + "no-console": "off", + "no-new": "off", + "unicorn/no-array-for-each": "off" + } + }, + { + "files": [ + "scss/tests/**" + ], + "env": { + "node": true + }, + "parserOptions": { + "sourceType": "script" + } + }, + { + "files": [ + "site/**" + ], + "env": { + "browser": true, + "node": false + }, + "parserOptions": { + "sourceType": "script", + "ecmaVersion": 2019 + }, + "rules": { + "no-new": "off", + "unicorn/no-array-for-each": "off" + } + }, + { + "files": [ + "site/src/assets/application.js", + "site/src/assets/partials/*.js", + "site/src/assets/search.js", + "site/src/assets/snippets.js", + "site/src/assets/stackblitz.js", + "site/src/plugins/*.js" + ], + "parserOptions": { + "sourceType": "module", + "ecmaVersion": 2020 + } + }, + { + "files": [ + "**/*.md" + ], + "plugins": [ + "markdown" + ], + "processor": "markdown/markdown" + }, + { + "files": [ + "**/*.md/*.js", + "**/*.md/*.mjs" + ], + "extends": "plugin:markdown/recommended-legacy", + "parserOptions": { + "sourceType": "module" + }, + "rules": { + "unicorn/prefer-node-protocol": "off" + } + } + ] } diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index be4ad836de22..ee959bcfedf8 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -1,6 +1,6 @@ # Contributing to Bootstrap -Looking to contribute something to Bootstrap? **Here's how you can help.** +Looking to contribute something to Bootstrap? **Here’s how you can help.** Please take a moment to review this document in order to make the contribution process easy and effective for everyone involved. @@ -18,24 +18,26 @@ the preferred channel for [bug reports](#bug-reports), [features requests](#feat and [submitting pull requests](#pull-requests), but please respect the following restrictions: -* Please **do not** use the issue tracker for personal support requests. Stack - Overflow ([`bootstrap-5`](https://stackoverflow.com/questions/tagged/bootstrap-5) tag), - [Slack](https://bootstrap-slack.herokuapp.com/) or [IRC](/README.md#community) are better places to get help. +- Please **do not** use the issue tracker for personal support requests. Stack Overflow ([`bootstrap-5`](https://stackoverflow.com/questions/tagged/bootstrap-5) tag), [our GitHub Discussions](https://github.com/twbs/bootstrap/discussions) or [IRC](/README.md#community) are better places to get help. -* Please **do not** derail or troll issues. Keep the discussion on topic and +- Please **do not** derail or troll issues. Keep the discussion on topic and respect the opinions of others. -* Please **do not** post comments consisting solely of "+1" or ":thumbsup:". +- Please **do not** post comments consisting solely of "+1" or ":thumbsup:". Use [GitHub's "reactions" feature](https://blog.github.com/2016-03-10-add-reactions-to-pull-requests-issues-and-comments/) instead. We reserve the right to delete comments which violate this rule. -* Please **do not** open issues regarding the official themes offered on . - Instead, please email any questions or feedback regarding those themes to `themes AT getbootstrap DOT com`. + +## Issues assignment + +The core team will be looking at the open issues, analyze them, and provide guidance on how to proceed. **Issues won’t be assigned to anyone outside the core team.** However, contributors are welcome to participate in the discussion and provide their input on how to best solve the issue, and even submit a PR if they want to. Please wait that the issue is ready to be worked on before submitting a PR, we don’t want to waste your time. + +Please keep in mind that the core team is small, has limited resources and that we are not always able to respond immediately. We will try to provide feedback as soon as possible, but please be patient. If you don’t get a response immediately, it doesn’t mean that we are ignoring you or that we don’t care about your issue or PR. We will get back to you as soon as we can. ## Issues and labels -Our bug tracker utilizes several labels to help organize and identify issues. Here's what they represent and how we use them: +Our bug tracker utilizes several labels to help organize and identify issues. Here’s what they represent and how we use them: - `browser bug` - Issues that are reported to us, but actually are the result of a browser-specific bug. These are diagnosed with reduced test cases and result in an issue opened on that browser's own bug tracker. - `confirmed` - Issues that have been confirmed with a reduced test case and identify a bug in Bootstrap. @@ -59,7 +61,7 @@ Good bug reports are extremely helpful, so thanks! Guidelines for bug reports: 0. **[Validate your HTML](https://html5.validator.nu/)** to ensure your - problem isn't caused by a simple error in your own code. + problem isn’t caused by a simple error in your own code. 1. **Use the GitHub issue search** — check if the issue has already been reported. @@ -69,10 +71,10 @@ Guidelines for bug reports: 3. **Isolate the problem** — ideally create a [reduced test case](https://css-tricks.com/reduced-test-cases/) and a live example. - [This JS Bin](https://jsbin.com/lolome/edit?html,output) is a helpful template. + These [v4 CodePen](https://codepen.io/team/bootstrap/pen/yLabNQL) and [v5 CodePen](https://codepen.io/team/bootstrap/pen/qBamdLj) are helpful templates. -A good bug report shouldn't leave others needing to chase you up for more +A good bug report shouldn’t leave others needing to chase you up for more information. Please try to be as detailed as possible in your report. What is your environment? What steps will reproduce the issue? What browser(s) and OS experience the problem? Do other browsers show the bug differently? What @@ -103,17 +105,17 @@ Sometimes bugs reported to us are actually caused by bugs in the browser(s) them | Vendor(s) | Browser(s) | Rendering engine | Bug reporting website(s) | Notes | | ------------- | ---------------------------- | ---------------- | ------------------------------------------------------ | -------------------------------------------------------- | -| Mozilla | Firefox | Gecko | https://bugzilla.mozilla.org/enter_bug.cgi | "Core" is normally the right product option to choose. | -| Apple | Safari | WebKit | https://bugs.webkit.org/enter_bug.cgi?product=WebKit | In Apple's bug reporter, choose "Safari" as the product. | -| Google, Opera | Chrome, Chromium, Opera v15+ | Blink | https://bugs.chromium.org/p/chromium/issues/list | Click the "New issue" button. | -| Microsoft | Edge | Blink | https://developer.microsoft.com/en-us/microsoft-edge/ | Go to "Help > Send Feedback" from the browser | +| Mozilla | Firefox | Gecko | | "Core" is normally the right product option to choose. | +| Apple | Safari | WebKit | | In Apple’s bug reporter, choose "Safari" as the product. | +| Google, Opera | Chrome, Chromium, Opera v15+ | Blink | | Click the "New issue" button. | +| Microsoft | Edge | Blink | | Go to "Help > Send Feedback" from the browser | ## Feature requests Feature requests are welcome. But take a moment to find out whether your idea -fits with the scope and aims of the project. It's up to *you* to make a strong -case to convince the project's developers of the merits of this feature. Please +fits with the scope and aims of the project. It’s up to _you_ to make a strong +case to convince the project’s developers of the merits of this feature. Please provide as much detail and context as possible. @@ -126,8 +128,8 @@ commits. **Please ask first** before embarking on any **significant** pull request (e.g. implementing features, refactoring code, porting to a different language), otherwise you risk spending a lot of time working on something that the -project's developers might not want to merge into the project. For trivial -things, or things that don't require a lot of your time, you can go ahead and +project’s developers might not want to merge into the project. For trivial +things, or things that don’t require a lot of your time, you can go ahead and make a PR. Please adhere to the [coding guidelines](#code-guidelines) used throughout the @@ -139,7 +141,7 @@ any dist files (`dist/` or `js/dist`).** Those files are automatically generated edit the source files in [`/bootstrap/scss/`](https://github.com/twbs/bootstrap/tree/main/scss) and/or [`/bootstrap/js/src/`](https://github.com/twbs/bootstrap/tree/main/js/src) instead. -Similarly, when contributing to Bootstrap's documentation, you should edit the +Similarly, when contributing to Bootstrap’s documentation, you should edit the documentation source files in [the `/bootstrap/site/content/docs/` directory of the `main` branch](https://github.com/twbs/bootstrap/tree/main/site/content/docs). **Do not edit the `gh-pages` branch.** That branch is generated from the @@ -167,33 +169,47 @@ included in the project: git pull upstream main ``` -3. Create a new topic branch (off the main project development branch) to +3. Install or update project dependencies with npm: + + ```bash + npm install + ``` + +4. Create a new topic branch (off the main project development branch) to contain your feature, change, or fix: ```bash git checkout -b ``` -4. Commit your changes in logical chunks. Please adhere to these [git commit +5. Commit your changes in logical chunks. Please adhere to these [git commit message guidelines](https://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html) - or your code is unlikely be merged into the main project. Use Git's + or your code is unlikely be merged into the main project. Use Git’s [interactive rebase](https://help.github.com/articles/about-git-rebase/) feature to tidy up your commits before making them public. -5. Locally merge (or rebase) the upstream development branch into your topic branch: +6. Ensure your changes compile the dist CSS and JS files in the `dist/` directory. Verify + the build succeeds locally without errors. + + ```bash + npm run dist + ``` + +7. Locally merge (or rebase) the upstream development branch into your topic branch: ```bash git pull [--rebase] upstream main ``` -6. Push your topic branch up to your fork: +8. Commit your changes, but **do not push compiled CSS and JS files in `dist` and `js/dist`**. + Push your topic branch up to your fork: ```bash git push origin ``` -7. [Open a Pull Request](https://help.github.com/articles/about-pull-requests/) - with a clear title and description against the `main` branch. +9. [Open a pull request](https://help.github.com/articles/about-pull-requests/) + with a clear title and description against the `main` branch. **IMPORTANT**: By submitting a patch, you agree to allow the project owners to license your work under the terms of the [MIT License](../LICENSE) (if it @@ -209,15 +225,15 @@ includes code changes) and under the terms of the [Adhere to the Code Guide.](https://codeguide.co/#html) - Use tags and elements appropriate for an HTML5 doctype (e.g., self-closing tags). -- Use CDNs and HTTPS for third-party JS when possible. We don't use protocol-relative URLs in this case because they break when viewing the page locally via `file://`. +- Use CDNs and HTTPS for third-party JS when possible. We don’t use protocol-relative URLs in this case because they break when viewing the page locally via `file://`. - Use [WAI-ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) attributes in documentation examples to promote accessibility. ### CSS [Adhere to the Code Guide.](https://codeguide.co/#css) -- When feasible, default color palettes should comply with [WCAG color contrast guidelines](https://www.w3.org/TR/WCAG20/#visual-audio-contrast). -- Except in rare cases, don't remove default `:focus` styles (via e.g. `outline: none;`) without providing alternative styles. See [this A11Y Project post](https://www.a11yproject.com/posts/2013-01-25-never-remove-css-outlines/) for more details. +- When feasible, default color palettes should comply with [WCAG color contrast guidelines](https://www.w3.org/TR/WCAG/#distinguishable). +- Except in rare cases, don’t remove default `:focus` styles (via e.g. `outline: none;`) without providing alternative styles. See [this A11Y Project post](https://www.a11yproject.com/posts/2013-01-25-never-remove-css-outlines/) for more details. ### JS @@ -236,4 +252,4 @@ Run `npm run test` before committing to ensure your changes follow our coding st By contributing your code, you agree to license your contribution under the [MIT License](../LICENSE). By contributing to the documentation, you agree to license your contribution under the [Creative Commons Attribution 3.0 Unported License](https://creativecommons.org/licenses/by/3.0/). -Prior to v3.1.0, Bootstrap's code was released under the Apache License v2.0. +Prior to v3.1.0, Bootstrap’s code was released under the Apache License v2.0. diff --git a/.github/INCIDENT_RESPONSE.md b/.github/INCIDENT_RESPONSE.md new file mode 100644 index 000000000000..f3e8f5266ecb --- /dev/null +++ b/.github/INCIDENT_RESPONSE.md @@ -0,0 +1,162 @@ +# Incident response plan + +This document describes how the Bootstrap maintainers respond to and manage security or operational incidents affecting the project, its website, or its distributed releases. This plan is public to promote transparency and community trust. Operational details (e.g., private contacts, credentials, or internal coordination tools) are maintained separately in the maintainers’ private documentation. + +--- + +## 1. Purpose & Scope + +This plan defines how Bootstrap maintainers will: + +- Identify, triage, and manage security or integrity incidents affecting project code, releases, or infrastructure. +- Communicate with the community and downstream consumers during and after an incident. +- Record lessons learned and update processes to reduce future risk. + +It applies to: + +- The Bootstrap source code, documentation, and build pipelines. +- Release artifacts (npm, CDN, GitHub releases). +- The main website ([https://getbootstrap.com](https://getbootstrap.com)). +- Any official Bootstrap GitHub organization infrastructure. + +It does **not** cover unrelated third-party forks or integrations. + +--- + +## 2. Definitions + +- **Incident**: Any event that could compromise the confidentiality, integrity, or availability of Bootstrap code, releases, or users. Examples include: + - A discovered security vulnerability. + - A compromised GitHub account or CI/CD token. + - A malicious dependency or injected code in a release. + - Website defacement or unauthorized modification of documentation. + - Leaked secrets related to the project infrastructure. + +- **Incident Commander (IC)**: The maintainer responsible for coordinating the overall response. + +--- + +## 3. Roles & Responsibilities + +| Role | Responsibilities | +|------|-------------------| +| **Incident Commander (IC)** | Coordinate the response, assign tasks, ensure timely communication. | +| **Security Maintainers** | Triage reported vulnerabilities, assess impact, create fixes, handle embargoes. | +| **Infrastructure Lead** | Manage CI/CD, website, and release infrastructure. | +| **Communications Lead** | Manage public announcements, blog posts, and social updates. | +| **Contributors & Community** | Promptly report suspected security issues and follow responsible disclosure guidelines. | + +In practice, Bootstrap’s core team fulfills these roles collectively, assigning an IC on a per-incident basis. + +--- + +## 4. Incident workflow + +### 4.1 Detection & Reporting + +- All security issues should be **privately reported** via the contact method in [`SECURITY.md`](../SECURITY.md) or through GitHub’s Security Advisory mechanism. +- Maintainers also monitor: + - Automated dependency scanners (e.g., Dependabot, npm audit). + - GitHub notifications and vulnerability alerts. + - Community channels for suspicious activity. + +### 4.2 Initial triage + +Upon receiving a report: + +1. A maintainer acknowledges receipt within 3 business days (or sooner, when possible). + Bootstrap is maintained by a small volunteer team; response times may vary slightly outside normal working hours. +2. The IC assesses severity and impact: + - **Critical:** immediate compromise of release infrastructure or code integrity. + - **High:** exploitable vulnerability in distributed assets. + - **Medium:** minor vulnerability or low-likelihood attack vector. + - **Low:** informational, no direct risk. +3. If confirmed as an incident, the IC opens a private coordination channel for maintainers and begins containment. + +### 4.3 Containment & Eradication + +- Revoke or rotate any affected credentials. +- Disable compromised infrastructure or build pipelines if necessary. +- Patch affected branches or dependencies. +- Verify integrity of artifacts and releases. + +### 4.4 Communication + +- Keep the reporting party informed (when applicable). +- For major incidents, the Communications Lead drafts a public advisory describing: + - What happened + - What was impacted + - How users can verify or mitigate + - What actions were taken +- Communications occur after containment to avoid amplifying risk. + +Public disclosures are posted via: + +- GitHub Security Advisory if appropriate +- [blog.getbootstrap.com/](https://blog.getbootstrap.com/) +- [Bootstrap GitHub discussions](https://github.com/orgs/twbs/discussions) +- [@getbootstrap](https://x.com/getbootstrap) on X (formerly Twitter) for critical security notices. + +### 4.5 Recovery + +- Validate all systems and releases are secure. +- Resume normal operations. +- Tag patched releases and notify affected users. + +### 4.6 Post-incident review + +Within two weeks after resolution: + +- Conduct an internal debrief. +- Record: + - Root cause + - What worked / what didn’t + - Remediation steps + - Documentation or automation updates needed +- Summarize lessons learned in the private maintainers’ wiki (with optional public summary if appropriate). + +--- + +## 5. Severity levels & Response targets + +| Severity | Example | Target response (volunteer team) | +|-----------|----------|----------------------------------| +| **Critical** | Compromised release, stolen signing keys | Acknowledge ≤ 24h (best effort), containment ≤ 48h, fix ideally ≤ 14d | +| **High** | Vulnerability enabling arbitrary code execution | Acknowledge ≤ 3 business days, fix ideally ≤ 14–21d | +| **Medium** | XSS or content injection on docs site | Acknowledge ≤ 5 business days, fix in next release cycle | +| **Low** | Minor issue with limited risk | Acknowledge ≤ 7 business days, fix as scheduled | + +**Note:** Timelines represent good-faith targets for a small volunteer core team, not hard SLAs. The maintainers will always prioritize public safety and transparency, even if timing varies. + +--- + +## 6. Public disclosure principles + +Bootstrap follows a responsible disclosure approach: + +- Work privately with reporters and affected parties before publishing details. +- Never name reporters without consent. +- Coordinate embargo periods with downstream consumers when needed. +- Publish advisories only after patches or mitigations are available. + +--- + +## 7. Communication Channels + +| Purpose | Channel | +|----------|----------| +| Private reporting | Email address in [`SECURITY.md`](./SECURITY.md) or GitHub advisory form | +| General updates | [blog.getbootstrap.com/](https://blog.getbootstrap.com/) blog | +| Security advisories | GitHub Security Advisory dashboard | +| Social alerts | [@getbootstrap](https://x.com/getbootstrap) | +| GitHub discussion alerts | [github.com/orgs/twbs/discussions](https://github.com/orgs/twbs/discussions) | + +--- + +## 8. Plan Maintenance + +This plan is reviewed at least annually or after any major incident. Changes are approved by the Core Team and recorded in Git history. + +--- + +_The Bootstrap maintainers are committed to transparency, user trust, and continuous improvement in our security and response practices._ diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md new file mode 100644 index 000000000000..04df74f36a56 --- /dev/null +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -0,0 +1,38 @@ +### Description + + + +### Motivation & Context + + + +### Type of changes + + + +- [ ] Bug fix (non-breaking change which fixes an issue) +- [ ] New feature (non-breaking change which adds functionality) +- [ ] Refactoring (non-breaking change) +- [ ] Breaking change (fix or feature that would change existing functionality) + +### Checklist + + + + +- [ ] I have read the [contributing guidelines](https://github.com/twbs/bootstrap/blob/main/.github/CONTRIBUTING.md) +- [ ] My code follows the code style of the project _(using `npm run lint`)_ +- [ ] My change introduces changes to the documentation +- [ ] I have updated the documentation accordingly +- [ ] I have added tests to cover my changes +- [ ] All new and existing tests passed + +#### Live previews + + + +- + +### Related issues + + diff --git a/.github/SUPPORT.md b/.github/SUPPORT.md index a4739f589a4f..26b3be42c5b5 100644 --- a/.github/SUPPORT.md +++ b/.github/SUPPORT.md @@ -6,6 +6,6 @@ See the [contributing guidelines](CONTRIBUTING.md) for sharing bug reports. For general troubleshooting or help getting started: -- Join [the official Slack room](https://bootstrap-slack.herokuapp.com/). +- Ask and explore [our GitHub Discussions](https://github.com/twbs/bootstrap/discussions). - Chat with fellow Bootstrappers in IRC. On the `irc.libera.chat` server, in the `#bootstrap` channel. - Ask and explore Stack Overflow with the [`bootstrap-5`](https://stackoverflow.com/questions/tagged/bootstrap-5) tag. diff --git a/.github/codeql/codeql-config.yml b/.github/codeql/codeql-config.yml new file mode 100644 index 000000000000..957877282f68 --- /dev/null +++ b/.github/codeql/codeql-config.yml @@ -0,0 +1,3 @@ +name: "CodeQL config" +paths-ignore: + - dist diff --git a/.github/dependabot.yml b/.github/dependabot.yml index 29135b4007e5..138a4465c7ed 100644 --- a/.github/dependabot.yml +++ b/.github/dependabot.yml @@ -1,24 +1,30 @@ version: 2 updates: - - package-ecosystem: npm + - package-ecosystem: "github-actions" directory: "/" schedule: interval: weekly day: tuesday time: "12:00" timezone: Europe/Athens - open-pull-requests-limit: 10 - reviewers: - - XhmikosR + groups: + github-actions: + patterns: + - "*" + - package-ecosystem: npm + directory: "/" labels: - dependencies - v5 - versioning-strategy: increase - rebase-strategy: disabled - - package-ecosystem: "github-actions" - directory: "/" schedule: interval: weekly day: tuesday time: "12:00" timezone: Europe/Athens + versioning-strategy: increase + rebase-strategy: disabled + groups: + production-dependencies: + dependency-type: "production" + development-dependencies: + dependency-type: "development" diff --git a/.github/release-drafter.yml b/.github/release-drafter.yml index 5d0f45de88d1..0289984bec06 100644 --- a/.github/release-drafter.yml +++ b/.github/release-drafter.yml @@ -7,6 +7,9 @@ categories: - title: '❗ Breaking Changes' labels: - 'breaking-change' + - title: '🚀 Highlights' + labels: + - 'release-highlight' - title: '🚀 Features' labels: - 'new-feature' diff --git a/.github/workflows/browserstack.yml b/.github/workflows/browserstack.yml index 0a3426e80439..16bd7a914d54 100644 --- a/.github/workflows/browserstack.yml +++ b/.github/workflows/browserstack.yml @@ -2,24 +2,32 @@ name: BrowserStack on: push: + branches: + - "**" + - "!dependabot/**" workflow_dispatch: env: FORCE_COLOR: 2 - NODE: 16 + NODE: 22 + +permissions: + contents: read jobs: browserstack: runs-on: ubuntu-latest - if: github.repository == 'twbs/bootstrap' && (!contains(github.event.commits[0].message, '[ci skip]') && !contains(github.event.commits[0].message, '[skip ci]')) + if: github.repository == 'twbs/bootstrap' timeout-minutes: 30 steps: - name: Clone repository - uses: actions/checkout@v2 + uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1 + with: + persist-credentials: false - name: Set up Node.js - uses: actions/setup-node@v2 + uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0 with: node-version: "${{ env.NODE }}" cache: npm diff --git a/.github/workflows/bundlewatch.yml b/.github/workflows/bundlewatch.yml index 14deaa97f8ff..e490be150162 100644 --- a/.github/workflows/bundlewatch.yml +++ b/.github/workflows/bundlewatch.yml @@ -2,14 +2,17 @@ name: Bundlewatch on: push: - branches-ignore: - - "dependabot/**" + branches: + - main pull_request: workflow_dispatch: env: FORCE_COLOR: 2 - NODE: 16 + NODE: 22 + +permissions: + contents: read jobs: bundlewatch: @@ -17,10 +20,12 @@ jobs: steps: - name: Clone repository - uses: actions/checkout@v2 + uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1 + with: + persist-credentials: false - name: Set up Node.js - uses: actions/setup-node@v2 + uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0 with: node-version: "${{ env.NODE }}" cache: npm diff --git a/.github/workflows/calibreapp-image-actions.yml b/.github/workflows/calibreapp-image-actions.yml new file mode 100644 index 000000000000..0f56922d3905 --- /dev/null +++ b/.github/workflows/calibreapp-image-actions.yml @@ -0,0 +1,32 @@ +name: Compress Images + +on: + pull_request: + paths: + - '**.jpg' + - '**.jpeg' + - '**.png' + - '**.webp' + +permissions: + contents: read + +jobs: + build: + # Only run on Pull Requests within the same repository, and not from forks. + if: github.event.pull_request.head.repo.full_name == github.repository + name: calibreapp/image-actions + runs-on: ubuntu-latest + permissions: + # allow calibreapp/image-actions to update PRs + pull-requests: write + steps: + - name: Clone repository + uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1 + with: + persist-credentials: false + + - name: Compress Images + uses: calibreapp/image-actions@f32575787d333b0579f0b7d506ff03be63a669d1 # v1.4.1 + with: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql.yml index 2aa437417e96..2e60948fdfd2 100644 --- a/.github/workflows/codeql.yml +++ b/.github/workflows/codeql.yml @@ -7,13 +7,12 @@ on: - v4-dev - "!dependabot/**" pull_request: - # The branches below must be a subset of the branches above branches: - main - v4-dev - "!dependabot/**" schedule: - - cron: "0 2 * * 5" + - cron: "0 2 * * 4" workflow_dispatch: jobs: @@ -21,18 +20,25 @@ jobs: name: Analyze runs-on: ubuntu-latest permissions: - actions: read - contents: read security-events: write steps: - name: Checkout repository - uses: actions/checkout@v2 + uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1 + with: + persist-credentials: false - name: Initialize CodeQL - uses: github/codeql-action/init@v1 + uses: github/codeql-action/init@5d4e8d1aca955e8d8589aabd499c5cae939e33c7 # v4.31.9 with: + config-file: ./.github/codeql/codeql-config.yml languages: "javascript" + queries: +security-and-quality + + - name: Autobuild + uses: github/codeql-action/autobuild@5d4e8d1aca955e8d8589aabd499c5cae939e33c7 # v4.31.9 - name: Perform CodeQL Analysis - uses: github/codeql-action/analyze@v1 + uses: github/codeql-action/analyze@5d4e8d1aca955e8d8589aabd499c5cae939e33c7 # v4.31.9 + with: + category: "/language:javascript" diff --git a/.github/workflows/cspell.yml b/.github/workflows/cspell.yml index 6787888fec89..95d69d2c6715 100644 --- a/.github/workflows/cspell.yml +++ b/.github/workflows/cspell.yml @@ -2,27 +2,35 @@ name: cspell on: push: - branches-ignore: - - "dependabot/**" + branches: + - main pull_request: workflow_dispatch: env: FORCE_COLOR: 2 - NODE: 16 + +permissions: + contents: read jobs: cspell: + permissions: + # allow streetsidesoftware/cspell-action to fetch files for commits and PRs + contents: read + pull-requests: read runs-on: ubuntu-latest steps: - name: Clone repository - uses: actions/checkout@v2 + uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1 + with: + persist-credentials: false - name: Run cspell - uses: streetsidesoftware/cspell-action@v1 + uses: streetsidesoftware/cspell-action@e5a858a18b7e0b56e0342b1dcad796308b7341a2 # v8.1.1 with: config: ".cspell.json" - files: "**/*.md" + files: "**/*.{md,mdx}" inline: error incremental_files_only: false diff --git a/.github/workflows/css.yml b/.github/workflows/css.yml index 0059dc44d267..30d1d87b057d 100644 --- a/.github/workflows/css.yml +++ b/.github/workflows/css.yml @@ -2,14 +2,17 @@ name: CSS on: push: - branches-ignore: - - "dependabot/**" + branches: + - main pull_request: workflow_dispatch: env: FORCE_COLOR: 2 - NODE: 16 + NODE: 22 + +permissions: + contents: read jobs: css: @@ -17,10 +20,12 @@ jobs: steps: - name: Clone repository - uses: actions/checkout@v2 + uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1 + with: + persist-credentials: false - name: Set up Node.js - uses: actions/setup-node@v2 + uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0 with: node-version: "${{ env.NODE }}" cache: npm @@ -30,3 +35,6 @@ jobs: - name: Build CSS run: npm run css + + - name: Run CSS tests + run: npm run css-test diff --git a/.github/workflows/docs.yml b/.github/workflows/docs.yml index d06105061591..7cbb3ad5b9eb 100644 --- a/.github/workflows/docs.yml +++ b/.github/workflows/docs.yml @@ -2,14 +2,17 @@ name: Docs on: push: - branches-ignore: - - "dependabot/**" + branches: + - main pull_request: workflow_dispatch: env: FORCE_COLOR: 2 - NODE: 16 + NODE: 22 + +permissions: + contents: read jobs: docs: @@ -17,10 +20,12 @@ jobs: steps: - name: Clone repository - uses: actions/checkout@v2 + uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1 + with: + persist-credentials: false - name: Set up Node.js - uses: actions/setup-node@v2 + uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0 with: node-version: "${{ env.NODE }}" cache: npm @@ -37,9 +42,9 @@ jobs: run: npm run docs-vnu - name: Run linkinator - uses: JustinBeckwith/linkinator-action@v1 + uses: JustinBeckwith/linkinator-action@af984b9f30f63e796ae2ea5be5e07cb587f1bbd9 # v2.3 with: paths: _site recurse: true verbosity: error - skip: "^(?!http://localhost)" + skip: "^http://localhost" diff --git a/.github/workflows/issue-close-require.yml b/.github/workflows/issue-close-require.yml new file mode 100644 index 000000000000..711ec3c7b3a1 --- /dev/null +++ b/.github/workflows/issue-close-require.yml @@ -0,0 +1,26 @@ +name: Close Issue Awaiting Reply + +on: + schedule: + - cron: "0 0 * * *" + +permissions: + contents: read + +jobs: + issue-close-require: + permissions: + # allow actions-cool/issues-helper to update issues and PRs + issues: write + pull-requests: write + runs-on: ubuntu-latest + if: github.repository == 'twbs/bootstrap' + steps: + - name: awaiting reply + uses: actions-cool/issues-helper@d1d51fccf39469b5458203b1369060db0ff0c0db # v3.7.4 + with: + actions: "close-issues" + labels: "awaiting-reply" + inactive-day: 14 + body: | + As the issue was labeled with `awaiting-reply`, but there has been no response in 14 days, this issue will be closed. If you have any questions, you can comment/reply. diff --git a/.github/workflows/issue-labeled.yml b/.github/workflows/issue-labeled.yml new file mode 100644 index 000000000000..55e488bedb63 --- /dev/null +++ b/.github/workflows/issue-labeled.yml @@ -0,0 +1,26 @@ +name: Issue Labeled + +on: + issues: + types: [labeled] + +permissions: + contents: read + +jobs: + issue-labeled: + permissions: + # allow actions-cool/issues-helper to update issues and PRs + issues: write + pull-requests: write + if: github.repository == 'twbs/bootstrap' + runs-on: ubuntu-latest + steps: + - name: awaiting reply + if: github.event.label.name == 'needs-example' + uses: actions-cool/issues-helper@d1d51fccf39469b5458203b1369060db0ff0c0db # v3.7.4 + with: + actions: "create-comment" + token: ${{ secrets.GITHUB_TOKEN }} + body: | + Hello @${{ github.event.issue.user.login }}. Bug reports must include a **live demo** of the issue. Per our [contributing guidelines](https://github.com/twbs/bootstrap/blob/main/.github/CONTRIBUTING.md), please create a reduced test case on [CodePen](https://codepen.io/) or [StackBlitz](https://stackblitz.com/) and report back with your link, Bootstrap version, and specific browser and Operating System details. diff --git a/.github/workflows/js.yml b/.github/workflows/js.yml index e9719000e3fd..40bb7c17b58a 100644 --- a/.github/workflows/js.yml +++ b/.github/workflows/js.yml @@ -2,26 +2,35 @@ name: JS Tests on: push: - branches-ignore: - - "dependabot/**" + branches: + - main pull_request: workflow_dispatch: env: FORCE_COLOR: 2 - NODE: 16 + NODE: 22 + +permissions: + contents: read jobs: run: + permissions: + # allow coverallsapp/github-action to create new checks issues and fetch code + checks: write + contents: read name: JS Tests runs-on: ubuntu-latest steps: - name: Clone repository - uses: actions/checkout@v2 + uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1 + with: + persist-credentials: false - name: Set up Node.js - uses: actions/setup-node@v2 + uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0 with: node-version: ${{ env.NODE }} cache: npm @@ -36,7 +45,8 @@ jobs: run: npm run js-test - name: Run Coveralls - uses: coverallsapp/github-action@1.1.3 + uses: coverallsapp/github-action@5cbfd81b66ca5d10c19b062c04de0199c215fb6e # v2.3.7 + if: ${{ !github.event.repository.fork }} with: github-token: "${{ secrets.GITHUB_TOKEN }}" path-to-lcov: "./js/coverage/lcov.info" diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml index 418232a66d9a..d69cbbb8d330 100644 --- a/.github/workflows/lint.yml +++ b/.github/workflows/lint.yml @@ -2,14 +2,17 @@ name: Lint on: push: - branches-ignore: - - "dependabot/**" + branches: + - main pull_request: workflow_dispatch: env: FORCE_COLOR: 2 - NODE: 16 + NODE: 22 + +permissions: + contents: read jobs: lint: @@ -17,10 +20,12 @@ jobs: steps: - name: Clone repository - uses: actions/checkout@v2 + uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1 + with: + persist-credentials: false - name: Set up Node.js - uses: actions/setup-node@v2 + uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0 with: node-version: "${{ env.NODE }}" cache: npm diff --git a/.github/workflows/node-sass.yml b/.github/workflows/node-sass.yml index 8a958a7a9ed4..791d1a971773 100644 --- a/.github/workflows/node-sass.yml +++ b/.github/workflows/node-sass.yml @@ -2,14 +2,17 @@ name: CSS (node-sass) on: push: - branches-ignore: - - "dependabot/**" + branches: + - main pull_request: workflow_dispatch: env: FORCE_COLOR: 2 - NODE: 16 + NODE: 22 + +permissions: + contents: read jobs: css: @@ -17,10 +20,12 @@ jobs: steps: - name: Clone repository - uses: actions/checkout@v2 + uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1 + with: + persist-credentials: false - name: Set up Node.js - uses: actions/setup-node@v2 + uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0 with: node-version: "${{ env.NODE }}" @@ -29,3 +34,16 @@ jobs: npx --package node-sass@latest node-sass --version npx --package node-sass@latest node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 scss/ -o dist-sass/css/ ls -Al dist-sass/css + + - name: Check built CSS files for Sass variables + shell: bash + run: | + SASS_VARS_FOUND=$(find "dist-sass/css/" -type f -name "*.css" -print0 | xargs -0 --no-run-if-empty grep -F "\$" || true) + if [[ -z "$SASS_VARS_FOUND" ]]; then + echo "All good, no Sass variables found!" + exit 0 + else + echo "Found $(echo "$SASS_VARS_FOUND" | wc -l | bc) Sass variables:" + echo "$SASS_VARS_FOUND" + exit 1 + fi diff --git a/.github/workflows/publish-nuget.yml b/.github/workflows/publish-nuget.yml new file mode 100644 index 000000000000..5a6c1af18c6c --- /dev/null +++ b/.github/workflows/publish-nuget.yml @@ -0,0 +1,34 @@ +name: Publish NuGet Packages + +on: + release: + types: [published] + +permissions: + contents: read + +jobs: + package-nuget: + runs-on: windows-latest + if: ${{ github.repository == 'twbs/bootstrap' && startsWith(github.event.release.tag_name, 'v') }} + env: + GITHUB_REF_NAME: ${{ github.ref_name }} + steps: + - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1 + with: + persist-credentials: false + + - name: Set up NuGet + uses: nuget/setup-nuget@323ab0502cd38fdc493335025a96c8fdb0edc71f # v2.0.1 + with: + nuget-api-key: ${{ secrets.NuGetAPIKey }} + nuget-version: '5.x' + + - name: Pack NuGet packages + shell: pwsh + run: | + $bsversion = $env:GITHUB_REF_NAME.Substring(1) + nuget pack "nuget\bootstrap.nuspec" -Verbosity detailed -NonInteractive -BasePath . -Version $bsversion + nuget pack "nuget\bootstrap.sass.nuspec" -Verbosity detailed -NonInteractive -BasePath . -Version $bsversion + nuget push "bootstrap.$bsversion.nupkg" -Verbosity detailed -NonInteractive -Source "https://api.nuget.org/v3/index.json" + nuget push "bootstrap.sass.$bsversion.nupkg" -Verbosity detailed -NonInteractive -Source "https://api.nuget.org/v3/index.json" diff --git a/.github/workflows/release-notes.yml b/.github/workflows/release-notes.yml index bbd0a2448bfa..d37d5e84120c 100644 --- a/.github/workflows/release-notes.yml +++ b/.github/workflows/release-notes.yml @@ -6,11 +6,18 @@ on: - main workflow_dispatch: +permissions: + contents: read + jobs: update_release_draft: + permissions: + # allow release-drafter/release-drafter to create GitHub releases and add labels to PRs + contents: write + pull-requests: write runs-on: ubuntu-latest if: github.repository == 'twbs/bootstrap' steps: - - uses: release-drafter/release-drafter@v5 + - uses: release-drafter/release-drafter@b1476f6e6eb133afa41ed8589daba6dc69b4d3f5 # v6.1.0 env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} diff --git a/.github/workflows/scorecard.yml b/.github/workflows/scorecard.yml new file mode 100644 index 000000000000..0fe07c672b3e --- /dev/null +++ b/.github/workflows/scorecard.yml @@ -0,0 +1,78 @@ +# This workflow uses actions that are not certified by GitHub. They are provided +# by a third-party and are governed by separate terms of service, privacy +# policy, and support documentation. + +name: Scorecard supply-chain security +on: + # For Branch-Protection check. Only the default branch is supported. See + # https://github.com/ossf/scorecard/blob/main/docs/checks.md#branch-protection + branch_protection_rule: + # To guarantee Maintained check is occasionally updated. See + # https://github.com/ossf/scorecard/blob/main/docs/checks.md#maintained + schedule: + - cron: '27 12 * * 2' + push: + branches: [ "main" ] + +# Declare default permissions as read only. +permissions: read-all + +jobs: + analysis: + name: Scorecard analysis + runs-on: ubuntu-latest + # `publish_results: true` only works when run from the default branch. conditional can be removed if disabled. + if: github.event.repository.default_branch == github.ref_name || github.event_name == 'pull_request' + permissions: + # Needed to upload the results to code-scanning dashboard. + security-events: write + # Needed to publish results and get a badge (see publish_results below). + id-token: write + # Uncomment the permissions below if installing in a private repository. + # contents: read + # actions: read + + steps: + - name: "Checkout code" + uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1 + with: + persist-credentials: false + + - name: "Run analysis" + uses: ossf/scorecard-action@4eaacf0543bb3f2c246792bd56e8cdeffafb205a # v2.4.3 + with: + results_file: results.sarif + results_format: sarif + # (Optional) "write" PAT token. Uncomment the `repo_token` line below if: + # - you want to enable the Branch-Protection check on a *public* repository, or + # - you are installing Scorecard on a *private* repository + # To create the PAT, follow the steps in https://github.com/ossf/scorecard-action?tab=readme-ov-file#authentication-with-fine-grained-pat-optional. + # repo_token: ${{ secrets.SCORECARD_TOKEN }} + + # Public repositories: + # - Publish results to OpenSSF REST API for easy access by consumers + # - Allows the repository to include the Scorecard badge. + # - See https://github.com/ossf/scorecard-action#publishing-results. + # For private repositories: + # - `publish_results` will always be set to `false`, regardless + # of the value entered here. + publish_results: true + + # (Optional) Uncomment file_mode if you have a .gitattributes with files marked export-ignore + # file_mode: git + + # Upload the results as artifacts (optional). Commenting out will disable uploads of run results in SARIF + # format to the repository Actions tab. + - name: "Upload artifact" + uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0 + with: + name: SARIF file + path: results.sarif + retention-days: 5 + + # Upload the results to GitHub's code scanning dashboard (optional). + # Commenting out will disable upload of results to your repo's Code Scanning dashboard + - name: "Upload to code-scanning" + uses: github/codeql-action/upload-sarif@5d4e8d1aca955e8d8589aabd499c5cae939e33c7 # v4.31.9 + with: + sarif_file: results.sarif diff --git a/.gitignore b/.gitignore index 2215d636addf..235ad54948dd 100644 --- a/.gitignore +++ b/.gitignore @@ -1,8 +1,5 @@ # Ignore docs files /_site/ -# Hugo files -/resources/ -/.hugo_build.lock # Numerous always-ignore extensions *.diff @@ -29,7 +26,6 @@ *.sublime-workspace nbproject Thumbs.db -/.vscode/ # Local Netlify folder .netlify @@ -38,5 +34,12 @@ Thumbs.db *.komodoproject # Folders to ignore +/dist-sass/ /js/coverage/ /node_modules/ + +# Site +/site/dist +/site/node_modules +/site/.astro +/site/public diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 000000000000..32442e87a0db --- /dev/null +++ b/.prettierignore @@ -0,0 +1,12 @@ +# Prettier is only used for the website + +site/.astro +site/dist +site/public +site/src/assets +site/src/scss +site/src/pages/**/*.md +site/src/pages/**/*.mdx +site/src/content/**/*.mdx +site/src/layouts/RedirectLayout.astro +site/static diff --git a/.stylelintignore b/.stylelintignore index 0759a69acead..b7013de7ef81 100644 --- a/.stylelintignore +++ b/.stylelintignore @@ -2,4 +2,5 @@ **/dist/ **/vendor/ /_site/ +/site/public/ /js/coverage/ diff --git a/.stylelintrc b/.stylelintrc deleted file mode 100644 index 94c8ec15528b..000000000000 --- a/.stylelintrc +++ /dev/null @@ -1,31 +0,0 @@ -{ - "extends": [ - "stylelint-config-twbs-bootstrap" - ], - "rules": { - "declaration-property-value-disallowed-list": { - "border": "none", - "outline": "none" - }, - "function-disallowed-list": [ - "calc", - "lighten", - "darken" - ], - "property-disallowed-list": [ - "border-radius", - "border-top-left-radius", - "border-top-right-radius", - "border-bottom-right-radius", - "border-bottom-left-radius", - "transition" - ], - "scss/dollar-variable-default": [ - true, - { - "ignore": "local" - } - ], - "scss/selector-no-union-class-name": true - } -} diff --git a/.stylelintrc.json b/.stylelintrc.json new file mode 100644 index 000000000000..589884aae7ab --- /dev/null +++ b/.stylelintrc.json @@ -0,0 +1,60 @@ +{ + "extends": [ + "stylelint-config-twbs-bootstrap" + ], + "reportInvalidScopeDisables": true, + "reportNeedlessDisables": true, + "overrides": [ + { + "files": "**/*.scss", + "rules": { + "declaration-property-value-disallowed-list": { + "border": "none", + "outline": "none" + }, + "function-disallowed-list": [ + "calc", + "lighten", + "darken" + ], + "property-disallowed-list": [ + "border-radius", + "border-top-left-radius", + "border-top-right-radius", + "border-bottom-right-radius", + "border-bottom-left-radius", + "transition" + ], + "scss/dollar-variable-default": [ + true, + { + "ignore": "local" + } + ], + "scss/selector-no-union-class-name": true + } + }, + { + "files": "scss/**/*.{test,spec}.scss", + "rules": { + "scss/dollar-variable-default": null, + "declaration-no-important": null + } + }, + { + "files": "site/**/*.scss", + "rules": { + "scss/dollar-variable-default": null + } + }, + { + "files": "site/**/examples/**/*.css", + "rules": { + "comment-empty-line-before": null, + "property-no-vendor-prefix": null, + "selector-no-qualifying-type": null, + "value-no-vendor-prefix": null + } + } + ] +} diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 000000000000..bc5df00e1618 --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,10 @@ +{ + "recommendations": [ + "astro-build.astro-vscode", + "dbaeumer.vscode-eslint", + "EditorConfig.EditorConfig", + "hossaini.bootstrap-intellisense", + "streetsidesoftware.code-spell-checker", + "stylelint.vscode-stylelint" + ] +} diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000000..9c6ae2d622a3 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,10 @@ +{ + "editor.codeActionsOnSave": { + "source.fixAll.eslint": "explicit", + "source.fixAll.stylelint": "always" + }, + "editor.renderWhitespace": "all", + "scss.validate": false, + "stylelint.enable": true, + "stylelint.validate": ["scss"] +} diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md index 5c6a4e727cd4..756298316059 100644 --- a/CODE_OF_CONDUCT.md +++ b/CODE_OF_CONDUCT.md @@ -2,42 +2,131 @@ ## Our Pledge -In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation. +We as members, contributors, and leaders pledge to make participation in our +community a harassment-free experience for everyone, regardless of age, body +size, visible or invisible disability, ethnicity, sex characteristics, gender +identity and expression, level of experience, education, socio-economic status, +nationality, personal appearance, race, caste, color, religion, or sexual +identity and orientation. + +We pledge to act and interact in ways that contribute to an open, welcoming, +diverse, inclusive, and healthy community. ## Our Standards -Examples of behavior that contributes to creating a positive environment include: +Examples of behavior that contributes to a positive environment for our +community include: -- Using welcoming and inclusive language -- Being respectful of differing viewpoints and experiences -- Gracefully accepting constructive criticism -- Focusing on what is best for the community -- Showing empathy towards other community members +- Demonstrating empathy and kindness toward other people +- Being respectful of differing opinions, viewpoints, and experiences +- Giving and gracefully accepting constructive feedback +- Accepting responsibility and apologizing to those affected by our mistakes, + and learning from the experience +- Focusing on what is best not just for us as individuals, but for the overall + community -Examples of unacceptable behavior by participants include: +Examples of unacceptable behavior include: -- The use of sexualized language or imagery and unwelcome sexual attention or advances -- Trolling, insulting/derogatory comments, and personal or political attacks +- The use of sexualized language or imagery, and sexual attention or advances of + any kind +- Trolling, insulting or derogatory comments, and personal or political attacks - Public or private harassment -- Publishing others' private information, such as a physical or electronic address, without explicit permission -- Other conduct which could reasonably be considered inappropriate in a professional setting +- Publishing others’ private information, such as a physical or email address, + without their explicit permission +- Other conduct which could reasonably be considered inappropriate in a + professional setting -## Our Responsibilities +## Enforcement Responsibilities -Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior. +Community leaders are responsible for clarifying and enforcing our standards of +acceptable behavior and will take appropriate and fair corrective action in +response to any behavior that they deem inappropriate, threatening, offensive, +or harmful. -Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful. +Community leaders have the right and responsibility to remove, edit, or reject +comments, commits, code, wiki edits, issues, and other contributions that are +not aligned to this Code of Conduct, and will communicate reasons for moderation +decisions when appropriate. ## Scope -This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers. +This Code of Conduct applies within all community spaces, and also applies when +an individual is officially representing the community in public spaces. +Examples of representing our community include using an official e-mail address, +posting via an official social media account, or acting as an appointed +representative at an online or offline event. ## Enforcement -Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at mdo@getbootstrap.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately. +Instances of abusive, harassing, or otherwise unacceptable behavior may be +reported to the community leaders responsible for enforcement at +mdo@getbootstrap.com. +All complaints will be reviewed and investigated promptly and fairly. + +All community leaders are obligated to respect the privacy and security of the +reporter of any incident. + +## Enforcement Guidelines + +Community leaders will follow these Community Impact Guidelines in determining +the consequences for any action they deem in violation of this Code of Conduct: + +### 1. Correction + +**Community Impact**: Use of inappropriate language or other behavior deemed +unprofessional or unwelcome in the community. + +**Consequence**: A private, written warning from community leaders, providing +clarity around the nature of the violation and an explanation of why the +behavior was inappropriate. A public apology may be requested. + +### 2. Warning + +**Community Impact**: A violation through a single incident or series of +actions. -Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership. +**Consequence**: A warning with consequences for continued behavior. No +interaction with the people involved, including unsolicited interaction with +those enforcing the Code of Conduct, for a specified period of time. This +includes avoiding interactions in community spaces as well as external channels +like social media. Violating these terms may lead to a temporary or permanent +ban. + +### 3. Temporary Ban + +**Community Impact**: A serious violation of community standards, including +sustained inappropriate behavior. + +**Consequence**: A temporary ban from any sort of interaction or public +communication with the community for a specified period of time. No public or +private interaction with the people involved, including unsolicited interaction +with those enforcing the Code of Conduct, is allowed during this period. +Violating these terms may lead to a permanent ban. + +### 4. Permanent Ban + +**Community Impact**: Demonstrating a pattern of violation of community +standards, including sustained inappropriate behavior, harassment of an +individual, or aggression toward or disparagement of classes of individuals. + +**Consequence**: A permanent ban from any sort of public interaction within the +community. ## Attribution -This Code of Conduct is adapted from the [Contributor Covenant](https://www.contributor-covenant.org/), version 1.4, available at +This Code of Conduct is adapted from the [Contributor Covenant][homepage], +version 2.1, available at +[https://www.contributor-covenant.org/version/2/1/code_of_conduct.html][v2.1]. + +Community Impact Guidelines were inspired by +[Mozilla's code of conduct enforcement ladder][Mozilla CoC]. + +For answers to common questions about this code of conduct, see the FAQ at +[https://www.contributor-covenant.org/faq][FAQ]. Translations are available at +[https://www.contributor-covenant.org/translations][translations]. + +[homepage]: https://www.contributor-covenant.org +[v2.1]: https://www.contributor-covenant.org/version/2/1/code_of_conduct.html +[Mozilla CoC]: https://github.com/mozilla/diversity +[FAQ]: https://www.contributor-covenant.org/faq +[translations]: https://www.contributor-covenant.org/translations diff --git a/LICENSE b/LICENSE index dda75ca9a5bb..fa7c00bc4ebd 100644 --- a/LICENSE +++ b/LICENSE @@ -1,7 +1,6 @@ The MIT License (MIT) -Copyright (c) 2011-2022 Twitter, Inc. -Copyright (c) 2011-2022 The Bootstrap Authors +Copyright (c) 2011-2025 The Bootstrap Authors Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index cf2e31111f31..e3618e643e5c 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@

- Bootstrap logo + Bootstrap logo

@@ -9,15 +9,13 @@

Sleek, intuitive, and powerful front-end framework for faster and easier web development.
- Explore Bootstrap docs » + Explore Bootstrap docs »

Report bug · Request feature · - Themes - · Blog

@@ -31,7 +29,7 @@ Our default branch is for development of our Bootstrap 5 release. Head to the [` - [Quick start](#quick-start) - [Status](#status) -- [What's included](#whats-included) +- [What’s included](#whats-included) - [Bugs and feature requests](#bugs-and-feature-requests) - [Documentation](#documentation) - [Contributing](#contributing) @@ -46,114 +44,115 @@ Our default branch is for development of our Bootstrap 5 release. Head to the [` Several quick start options are available: -- [Download the latest release](https://github.com/twbs/bootstrap/archive/v5.1.3.zip) +- [Download the latest release](https://github.com/twbs/bootstrap/archive/v5.3.8.zip) - Clone the repo: `git clone https://github.com/twbs/bootstrap.git` -- Install with [npm](https://www.npmjs.com/): `npm install bootstrap` -- Install with [yarn](https://yarnpkg.com/): `yarn add bootstrap` -- Install with [Composer](https://getcomposer.org/): `composer require twbs/bootstrap:5.1.3` +- Install with [npm](https://www.npmjs.com/): `npm install bootstrap@v5.3.8` +- Install with [yarn](https://yarnpkg.com/): `yarn add bootstrap@v5.3.8` +- Install with [Bun](https://bun.sh/): `bun add bootstrap@v5.3.8` +- Install with [Composer](https://getcomposer.org/): `composer require twbs/bootstrap:5.3.8` - Install with [NuGet](https://www.nuget.org/): CSS: `Install-Package bootstrap` Sass: `Install-Package bootstrap.sass` -Read the [Getting started page](https://getbootstrap.com/docs/5.1/getting-started/introduction/) for information on the framework contents, templates, examples, and more. +Read the [Getting started page](https://getbootstrap.com/docs/5.3/getting-started/introduction/) for information on the framework contents, templates, examples, and more. ## Status -[![Slack](https://bootstrap-slack.herokuapp.com/badge.svg)](https://bootstrap-slack.herokuapp.com/) -[![Build Status](https://img.shields.io/github/workflow/status/twbs/bootstrap/JS%20Tests/main?label=JS%20Tests&logo=github)](https://github.com/twbs/bootstrap/actions?query=workflow%3AJS+Tests+branch%3Amain) -[![npm version](https://img.shields.io/npm/v/bootstrap)](https://www.npmjs.com/package/bootstrap) -[![Gem version](https://img.shields.io/gem/v/bootstrap)](https://rubygems.org/gems/bootstrap) -[![Meteor Atmosphere](https://img.shields.io/badge/meteor-twbs%3Abootstrap-blue)](https://atmospherejs.com/twbs/bootstrap) -[![Packagist Prerelease](https://img.shields.io/packagist/vpre/twbs/bootstrap)](https://packagist.org/packages/twbs/bootstrap) -[![NuGet](https://img.shields.io/nuget/vpre/bootstrap)](https://www.nuget.org/packages/bootstrap/absoluteLatest) -[![Coverage Status](https://img.shields.io/coveralls/github/twbs/bootstrap/main)](https://coveralls.io/github/twbs/bootstrap?branch=main) +[![Build Status](https://img.shields.io/github/actions/workflow/status/twbs/bootstrap/js.yml?branch=main&label=JS%20Tests&logo=github)](https://github.com/twbs/bootstrap/actions/workflows/js.yml?query=workflow%3AJS+branch%3Amain) +[![npm version](https://img.shields.io/npm/v/bootstrap?logo=npm&logoColor=fff)](https://www.npmjs.com/package/bootstrap) +[![Gem version](https://img.shields.io/gem/v/bootstrap?logo=rubygems&logoColor=fff)](https://rubygems.org/gems/bootstrap) +[![Meteor Atmosphere](https://img.shields.io/badge/meteor-twbs%3Abootstrap-blue?logo=meteor&logoColor=fff)](https://atmospherejs.com/twbs/bootstrap) +[![Packagist Prerelease](https://img.shields.io/packagist/vpre/twbs/bootstrap?logo=packagist&logoColor=fff)](https://packagist.org/packages/twbs/bootstrap) +[![NuGet](https://img.shields.io/nuget/vpre/bootstrap?logo=nuget&logoColor=fff)](https://www.nuget.org/packages/bootstrap/absoluteLatest) +[![Coverage Status](https://img.shields.io/coveralls/github/twbs/bootstrap/main?logo=coveralls&logoColor=fff)](https://coveralls.io/github/twbs/bootstrap?branch=main) [![CSS gzip size](https://img.badgesize.io/twbs/bootstrap/main/dist/css/bootstrap.min.css?compression=gzip&label=CSS%20gzip%20size)](https://github.com/twbs/bootstrap/blob/main/dist/css/bootstrap.min.css) [![CSS Brotli size](https://img.badgesize.io/twbs/bootstrap/main/dist/css/bootstrap.min.css?compression=brotli&label=CSS%20Brotli%20size)](https://github.com/twbs/bootstrap/blob/main/dist/css/bootstrap.min.css) [![JS gzip size](https://img.badgesize.io/twbs/bootstrap/main/dist/js/bootstrap.min.js?compression=gzip&label=JS%20gzip%20size)](https://github.com/twbs/bootstrap/blob/main/dist/js/bootstrap.min.js) [![JS Brotli size](https://img.badgesize.io/twbs/bootstrap/main/dist/js/bootstrap.min.js?compression=brotli&label=JS%20Brotli%20size)](https://github.com/twbs/bootstrap/blob/main/dist/js/bootstrap.min.js) -[![BrowserStack Status](https://www.browserstack.com/automate/badge.svg?badge_key=SkxZcStBeExEdVJqQ2hWYnlWckpkNmNEY213SFp6WHFETWk2bGFuY3pCbz0tLXhqbHJsVlZhQnRBdEpod3NLSDMzaHc9PQ==--3d0b75245708616eb93113221beece33e680b229)](https://www.browserstack.com/automate/public-build/SkxZcStBeExEdVJqQ2hWYnlWckpkNmNEY213SFp6WHFETWk2bGFuY3pCbz0tLXhqbHJsVlZhQnRBdEpod3NLSDMzaHc9PQ==--3d0b75245708616eb93113221beece33e680b229) -[![Backers on Open Collective](https://img.shields.io/opencollective/backers/bootstrap)](#backers) -[![Sponsors on Open Collective](https://img.shields.io/opencollective/sponsors/bootstrap)](#sponsors) - - -## What's included - -Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. - -
Download contents - -```text -bootstrap/ -├── css/ -│ ├── bootstrap-grid.css -│ ├── bootstrap-grid.css.map -│ ├── bootstrap-grid.min.css -│ ├── bootstrap-grid.min.css.map -│ ├── bootstrap-grid.rtl.css -│ ├── bootstrap-grid.rtl.css.map -│ ├── bootstrap-grid.rtl.min.css -│ ├── bootstrap-grid.rtl.min.css.map -│ ├── bootstrap-reboot.css -│ ├── bootstrap-reboot.css.map -│ ├── bootstrap-reboot.min.css -│ ├── bootstrap-reboot.min.css.map -│ ├── bootstrap-reboot.rtl.css -│ ├── bootstrap-reboot.rtl.css.map -│ ├── bootstrap-reboot.rtl.min.css -│ ├── bootstrap-reboot.rtl.min.css.map -│ ├── bootstrap-utilities.css -│ ├── bootstrap-utilities.css.map -│ ├── bootstrap-utilities.min.css -│ ├── bootstrap-utilities.min.css.map -│ ├── bootstrap-utilities.rtl.css -│ ├── bootstrap-utilities.rtl.css.map -│ ├── bootstrap-utilities.rtl.min.css -│ ├── bootstrap-utilities.rtl.min.css.map -│ ├── bootstrap.css -│ ├── bootstrap.css.map -│ ├── bootstrap.min.css -│ ├── bootstrap.min.css.map -│ ├── bootstrap.rtl.css -│ ├── bootstrap.rtl.css.map -│ ├── bootstrap.rtl.min.css -│ └── bootstrap.rtl.min.css.map -└── js/ - ├── bootstrap.bundle.js - ├── bootstrap.bundle.js.map - ├── bootstrap.bundle.min.js - ├── bootstrap.bundle.min.js.map - ├── bootstrap.esm.js - ├── bootstrap.esm.js.map - ├── bootstrap.esm.min.js - ├── bootstrap.esm.min.js.map - ├── bootstrap.js - ├── bootstrap.js.map - ├── bootstrap.min.js - └── bootstrap.min.js.map -``` +![Open Source Security Foundation Scorecard](https://img.shields.io/ossf-scorecard/github.com/twbs/bootstrap) +[![Backers on Open Collective](https://img.shields.io/opencollective/backers/bootstrap?logo=opencollective&logoColor=fff)](#backers) +[![Sponsors on Open Collective](https://img.shields.io/opencollective/sponsors/bootstrap?logo=opencollective&logoColor=fff)](#sponsors) + + +## What’s included + +Within the download you’ll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. + +
+ Download contents + + ```text + bootstrap/ + ├── css/ + │ ├── bootstrap-grid.css + │ ├── bootstrap-grid.css.map + │ ├── bootstrap-grid.min.css + │ ├── bootstrap-grid.min.css.map + │ ├── bootstrap-grid.rtl.css + │ ├── bootstrap-grid.rtl.css.map + │ ├── bootstrap-grid.rtl.min.css + │ ├── bootstrap-grid.rtl.min.css.map + │ ├── bootstrap-reboot.css + │ ├── bootstrap-reboot.css.map + │ ├── bootstrap-reboot.min.css + │ ├── bootstrap-reboot.min.css.map + │ ├── bootstrap-reboot.rtl.css + │ ├── bootstrap-reboot.rtl.css.map + │ ├── bootstrap-reboot.rtl.min.css + │ ├── bootstrap-reboot.rtl.min.css.map + │ ├── bootstrap-utilities.css + │ ├── bootstrap-utilities.css.map + │ ├── bootstrap-utilities.min.css + │ ├── bootstrap-utilities.min.css.map + │ ├── bootstrap-utilities.rtl.css + │ ├── bootstrap-utilities.rtl.css.map + │ ├── bootstrap-utilities.rtl.min.css + │ ├── bootstrap-utilities.rtl.min.css.map + │ ├── bootstrap.css + │ ├── bootstrap.css.map + │ ├── bootstrap.min.css + │ ├── bootstrap.min.css.map + │ ├── bootstrap.rtl.css + │ ├── bootstrap.rtl.css.map + │ ├── bootstrap.rtl.min.css + │ └── bootstrap.rtl.min.css.map + └── js/ + ├── bootstrap.bundle.js + ├── bootstrap.bundle.js.map + ├── bootstrap.bundle.min.js + ├── bootstrap.bundle.min.js.map + ├── bootstrap.esm.js + ├── bootstrap.esm.js.map + ├── bootstrap.esm.min.js + ├── bootstrap.esm.min.js.map + ├── bootstrap.js + ├── bootstrap.js.map + ├── bootstrap.min.js + └── bootstrap.min.js.map + ```
-We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). [Source maps](https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps) (`bootstrap.*.map`) are available for use with certain browsers' developer tools. Bundled JS files (`bootstrap.bundle.js` and minified `bootstrap.bundle.min.js`) include [Popper](https://popper.js.org/). +We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). [Source maps](https://web.dev/articles/source-maps) (`bootstrap.*.map`) are available for use with certain browsers’ developer tools. Bundled JS files (`bootstrap.bundle.js` and minified `bootstrap.bundle.min.js`) include [Popper](https://popper.js.org/docs/v2/). ## Bugs and feature requests -Have a bug or a feature request? Please first read the [issue guidelines](https://github.com/twbs/bootstrap/blob/main/.github/CONTRIBUTING.md#using-the-issue-tracker) and search for existing and closed issues. If your problem or idea is not addressed yet, [please open a new issue](https://github.com/twbs/bootstrap/issues/new). +Have a bug or a feature request? Please first read the [issue guidelines](https://github.com/twbs/bootstrap/blob/main/.github/CONTRIBUTING.md#using-the-issue-tracker) and search for existing and closed issues. If your problem or idea is not addressed yet, [please open a new issue](https://github.com/twbs/bootstrap/issues/new/choose). ## Documentation -Bootstrap's documentation, included in this repo in the root directory, is built with [Hugo](https://gohugo.io/) and publicly hosted on GitHub Pages at . The docs may also be run locally. +Bootstrap’s documentation, included in this repo in the root directory, is built with [Astro](https://astro.build/) and publicly hosted on GitHub Pages at . The docs may also be run locally. -Documentation search is powered by [Algolia's DocSearch](https://community.algolia.com/docsearch/). Working on our search? Be sure to set `debug: true` in `site/assets/js/search.js`. +Documentation search is powered by [Algolia's DocSearch](https://docsearch.algolia.com/). ### Running documentation locally -1. Run `npm install` to install the Node.js dependencies, including Hugo (the site builder). +1. Run `npm install` to install the Node.js dependencies, including Astro (the site builder). 2. Run `npm run test` (or a specific npm script) to rebuild distributed CSS and JavaScript files, as well as our docs assets. 3. From the root `/bootstrap` directory, run `npm run docs-serve` in the command line. -4. Open `http://localhost:9001/` in your browser, and voilà. +4. Open in your browser, and voilà. -Learn more about using Hugo by reading its [documentation](https://gohugo.io/documentation/). +Learn more about using Astro by reading its [documentation](https://docs.astro.build/en/getting-started/). ### Documentation for previous releases @@ -173,11 +172,12 @@ Editor preferences are available in the [editor config](https://github.com/twbs/ ## Community -Get updates on Bootstrap's development and chat with the project maintainers and community members. +Get updates on Bootstrap’s development and chat with the project maintainers and community members. -- Follow [@getbootstrap on Twitter](https://twitter.com/getbootstrap). +- Follow [@getbootstrap on X](https://x.com/getbootstrap). - Read and subscribe to [The Official Bootstrap Blog](https://blog.getbootstrap.com/). -- Join [the official Slack room](https://bootstrap-slack.herokuapp.com/). +- Ask questions and explore [our GitHub Discussions](https://github.com/twbs/bootstrap/discussions). +- Discuss, ask questions, and more on [the community Discord](https://discord.gg/bZUvakRU3M) or [Bootstrap subreddit](https://www.reddit.com/r/bootstrap/). - Chat with fellow Bootstrappers in IRC. On the `irc.libera.chat` server, in the `#bootstrap` channel. - Implementation help may be found at Stack Overflow (tagged [`bootstrap-5`](https://stackoverflow.com/questions/tagged/bootstrap-5)). - Developers should use the keyword `bootstrap` on packages which modify or add to the functionality of Bootstrap when distributing through [npm](https://www.npmjs.com/browse/keyword/bootstrap) or similar delivery mechanisms for maximum discoverability. @@ -194,12 +194,12 @@ See [the Releases section of our GitHub project](https://github.com/twbs/bootstr **Mark Otto** -- +- - **Jacob Thornton** -- +- - @@ -243,4 +243,4 @@ Thank you to all our backers! 🙏 [[Become a backer](https://opencollective.com ## Copyright and license -Code and documentation copyright 2011–2022 the [Bootstrap Authors](https://github.com/twbs/bootstrap/graphs/contributors) and [Twitter, Inc.](https://twitter.com) Code released under the [MIT License](https://github.com/twbs/bootstrap/blob/main/LICENSE). Docs released under [Creative Commons](https://creativecommons.org/licenses/by/3.0/). +Code and documentation copyright 2011-2025 the [Bootstrap Authors](https://github.com/twbs/bootstrap/graphs/contributors). Code released under the [MIT License](https://github.com/twbs/bootstrap/blob/main/LICENSE). Docs released under [Creative Commons](https://creativecommons.org/licenses/by/3.0/). diff --git a/build/.eslintrc.json b/build/.eslintrc.json deleted file mode 100644 index 679bd26f7ba2..000000000000 --- a/build/.eslintrc.json +++ /dev/null @@ -1,14 +0,0 @@ -{ - "env": { - "browser": false, - "node": true - }, - "parserOptions": { - "sourceType": "script" - }, - "extends": "../.eslintrc.json", - "rules": { - "no-console": "off", - "strict": "error" - } -} diff --git a/build/banner.js b/build/banner.mjs similarity index 50% rename from build/banner.js rename to build/banner.mjs index df82ff32edf3..3fea93c8f1d2 100644 --- a/build/banner.js +++ b/build/banner.mjs @@ -1,6 +1,12 @@ -'use strict' +import fs from 'node:fs/promises' +import path from 'node:path' +import { fileURLToPath } from 'node:url' + +const __dirname = path.dirname(fileURLToPath(import.meta.url)) + +const pkgJson = path.join(__dirname, '../package.json') +const pkg = JSON.parse(await fs.readFile(pkgJson, 'utf8')) -const pkg = require('../package.json') const year = new Date().getFullYear() function getBanner(pluginFilename) { @@ -11,4 +17,4 @@ function getBanner(pluginFilename) { */` } -module.exports = getBanner +export default getBanner diff --git a/build/build-plugins.js b/build/build-plugins.mjs similarity index 81% rename from build/build-plugins.js rename to build/build-plugins.mjs index 8fa0e0b1f395..f56cd213f511 100644 --- a/build/build-plugins.js +++ b/build/build-plugins.mjs @@ -2,21 +2,22 @@ /*! * Script to build our plugins to use them separately. - * Copyright 2020-2022 The Bootstrap Authors - * Copyright 2020-2022 Twitter, Inc. + * Copyright 2020-2025 The Bootstrap Authors * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) */ -'use strict' +import path from 'node:path' +import { fileURLToPath } from 'node:url' +import { babel } from '@rollup/plugin-babel' +import { globby } from 'globby' +import { rollup } from 'rollup' +import banner from './banner.mjs' -const path = require('path') -const rollup = require('rollup') -const globby = require('globby') -const { babel } = require('@rollup/plugin-babel') -const banner = require('./banner.js') +const __filename = fileURLToPath(import.meta.url) +const __dirname = path.dirname(fileURLToPath(import.meta.url)) const sourcePath = path.resolve(__dirname, '../js/src/').replace(/\\/g, '/') -const jsFiles = globby.sync(sourcePath + '/**/*.js') +const jsFiles = await globby(`${sourcePath}/**/*.js`) // Array which holds the resolved plugins const resolvedPlugins = [] @@ -27,7 +28,7 @@ const filenameToEntity = filename => filename.replace('.js', '') for (const file of jsFiles) { resolvedPlugins.push({ - src: file.replace('.js', ''), + src: file, dist: file.replace('src', 'dist'), fileName: path.basename(file), className: filenameToEntity(path.basename(file)) @@ -36,9 +37,12 @@ for (const file of jsFiles) { } const build = async plugin => { + /** + * @type {import('rollup').GlobalsOption} + */ const globals = {} - const bundle = await rollup.rollup({ + const bundle = await rollup({ input: plugin.src, plugins: [ babel({ @@ -48,7 +52,7 @@ const build = async plugin => { babelHelpers: 'bundled' }) ], - external: source => { + external(source) { // Pattern to identify local files const pattern = /^(\.{1,2})\// diff --git a/build/change-version.js b/build/change-version.js deleted file mode 100644 index 6d85441a9317..000000000000 --- a/build/change-version.js +++ /dev/null @@ -1,81 +0,0 @@ -#!/usr/bin/env node - -/*! - * Script to update version number references in the project. - * Copyright 2017-2022 The Bootstrap Authors - * Copyright 2017-2022 Twitter, Inc. - * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) - */ - -'use strict' - -const fs = require('fs').promises -const path = require('path') -const globby = require('globby') - -const VERBOSE = process.argv.includes('--verbose') -const DRY_RUN = process.argv.includes('--dry') || process.argv.includes('--dry-run') - -// These are the filetypes we only care about replacing the version -const GLOB = [ - '**/*.{css,html,js,json,md,scss,txt,yml}' -] -const GLOBBY_OPTIONS = { - cwd: path.join(__dirname, '..'), - gitignore: true -} - -// Blame TC39... https://github.com/benjamingr/RegExp.escape/issues/37 -function regExpQuote(string) { - return string.replace(/[$()*+-.?[\\\]^{|}]/g, '\\$&') -} - -function regExpQuoteReplacement(string) { - return string.replace(/\$/g, '$$') -} - -async function replaceRecursively(file, oldVersion, newVersion) { - const originalString = await fs.readFile(file, 'utf8') - const newString = originalString.replace( - new RegExp(regExpQuote(oldVersion), 'g'), regExpQuoteReplacement(newVersion) - ) - - // No need to move any further if the strings are identical - if (originalString === newString) { - return - } - - if (VERBOSE) { - console.log(`FILE: ${file}`) - } - - if (DRY_RUN) { - return - } - - await fs.writeFile(file, newString, 'utf8') -} - -async function main(args) { - let [oldVersion, newVersion] = args - - if (!oldVersion || !newVersion) { - console.error('USAGE: change-version old_version new_version [--verbose] [--dry[-run]]') - console.error('Got arguments:', args) - process.exit(1) - } - - // Strip any leading `v` from arguments because otherwise we will end up with duplicate `v`s - [oldVersion, newVersion] = [oldVersion, newVersion].map(arg => arg.startsWith('v') ? arg.slice(1) : arg) - - try { - const files = await globby(GLOB, GLOBBY_OPTIONS) - - await Promise.all(files.map(file => replaceRecursively(file, oldVersion, newVersion))) - } catch (error) { - console.error(error) - process.exit(1) - } -} - -main(process.argv.slice(2)) diff --git a/build/change-version.mjs b/build/change-version.mjs new file mode 100644 index 000000000000..1400274c446e --- /dev/null +++ b/build/change-version.mjs @@ -0,0 +1,113 @@ +#!/usr/bin/env node + +/*! + * Script to update version number references in the project. + * Copyright 2017-2025 The Bootstrap Authors + * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) + */ + +import { execFile } from 'node:child_process' +import fs from 'node:fs/promises' +import process from 'node:process' + +const VERBOSE = process.argv.includes('--verbose') +const DRY_RUN = process.argv.includes('--dry') || process.argv.includes('--dry-run') + +// These are the files we only care about replacing the version +const FILES = [ + 'README.md', + 'config.yml', + 'js/src/base-component.js', + 'package.js', + 'scss/mixins/_banner.scss', + 'site/data/docs-versions.yml' +] + +// Blame TC39... https://github.com/benjamingr/RegExp.escape/issues/37 +function regExpQuote(string) { + return string.replace(/[$()*+-.?[\\\]^{|}]/g, '\\$&') +} + +function regExpQuoteReplacement(string) { + return string.replace(/\$/g, '$$') +} + +async function replaceRecursively(file, oldVersion, newVersion) { + const originalString = await fs.readFile(file, 'utf8') + const newString = originalString + .replace( + new RegExp(regExpQuote(oldVersion), 'g'), + regExpQuoteReplacement(newVersion) + ) + // Also replace the version used by the rubygem, + // which is using periods (`.`) instead of hyphens (`-`) + .replace( + new RegExp(regExpQuote(oldVersion.replace(/-/g, '.')), 'g'), + regExpQuoteReplacement(newVersion.replace(/-/g, '.')) + ) + + // No need to move any further if the strings are identical + if (originalString === newString) { + return + } + + if (VERBOSE) { + console.log(`Found ${oldVersion} in ${file}`) + } + + if (DRY_RUN) { + return + } + + await fs.writeFile(file, newString, 'utf8') +} + +function bumpNpmVersion(newVersion) { + if (DRY_RUN) { + return + } + + execFile('npm', ['version', newVersion, '--no-git-tag'], { shell: true }, error => { + if (error) { + console.error(error) + process.exit(1) + } + }) +} + +function showUsage(args) { + console.error('USAGE: change-version old_version new_version [--verbose] [--dry[-run]]') + console.error('Got arguments:', args) + process.exit(1) +} + +async function main(args) { + let [oldVersion, newVersion] = args + + if (!oldVersion || !newVersion) { + showUsage(args) + } + + // Strip any leading `v` from arguments because + // otherwise we will end up with duplicate `v`s + [oldVersion, newVersion] = [oldVersion, newVersion].map(arg => { + return arg.startsWith('v') ? arg.slice(1) : arg + }) + + if (oldVersion === newVersion) { + showUsage(args) + } + + bumpNpmVersion(newVersion) + + try { + await Promise.all( + FILES.map(file => replaceRecursively(file, oldVersion, newVersion)) + ) + } catch (error) { + console.error(error) + process.exit(1) + } +} + +main(process.argv.slice(2)) diff --git a/build/docs-prep.sh b/build/docs-prep.sh new file mode 100755 index 000000000000..357768abea7a --- /dev/null +++ b/build/docs-prep.sh @@ -0,0 +1,157 @@ +#!/bin/bash + +# Colors for output +RED='\033[0;31m' +GREEN='\033[0;32m' +YELLOW='\033[0;33m' +BLUE='\033[0;34m' +NC='\033[0m' # No Color + +# Default branch suffix +BRANCH_SUFFIX="release" + +# Check if a custom version parameter was provided +if [ $# -eq 1 ]; then + BRANCH_SUFFIX="$1" +fi + +# Branch name to create +NEW_BRANCH="gh-pages-${BRANCH_SUFFIX}" + +# Get the current docs version from config +DOCS_VERSION=$(node -p "require('js-yaml').load(require('fs').readFileSync('config.yml', 'utf8')).docs_version") + +# Function to print colored messages +print_success() { + echo -e "${GREEN}✓ $1${NC}" +} + +print_error() { + echo -e "${RED}✗ $1${NC}" + exit 1 +} + +print_info() { + echo -e "${BLUE}ℹ $1${NC}" +} + +print_warning() { + echo -e "${YELLOW}⚠ $1${NC}" +} + +# Function to execute command with error handling +execute() { + print_info "Running: $1" + eval $1 + if [ $? -ne 0 ]; then + print_error "Failed to execute: $1" + else + print_success "Successfully executed: $1" + fi +} + +# Check if /tmp/_site directory exists from a previous run +if [ -d "/tmp/_site" ]; then + print_warning "Found existing /tmp/_site directory. Removing it…" + rm -rf /tmp/_site +fi + +# Main process +print_info "Starting documentation deployment process…" + +# Step 1: Build documentation +print_info "Building documentation with npm run docs…" +npm run docs +if [ $? -ne 0 ]; then + print_error "Documentation build failed!" +fi +print_success "Documentation built successfully" + +# Step 2: Move _site to /tmp/ +print_info "Moving _site to temporary location…" +execute "mv _site /tmp/" + +# Step 3: Switch to gh-pages branch +print_info "Checking out gh-pages branch…" +git checkout gh-pages +if [ $? -ne 0 ]; then + print_error "Failed to checkout gh-pages branch. Make sure it exists." +fi +print_success "Switched to gh-pages branch" + +git reset --hard origin/gh-pages +if [ $? -ne 0 ]; then + print_error "Failed to reset to origin/gh-pages. Check your git configuration." +fi +print_success "Reset to origin/gh-pages" + +git pull origin gh-pages +if [ $? -ne 0 ]; then + print_error "Failed to pull from origin/gh-pages. Check your network connection and git configuration." +fi +print_success "Pulled latest changes from origin/gh-pages" + +# Step 4: Create a new branch for the update +print_info "Checking if branch ${NEW_BRANCH} exists and deleting it if it does…" +if git show-ref --verify --quiet refs/heads/${NEW_BRANCH}; then + execute "git branch -D ${NEW_BRANCH}" +else + print_info "Branch ${NEW_BRANCH} does not exist, proceeding with creation…" +fi +print_info "Creating new branch ${NEW_BRANCH}…" +execute "git checkout -b ${NEW_BRANCH}" + +# Step 5: Move all root-level files from Astro build +find /tmp/_site -maxdepth 1 -type f -exec mv {} . \; + +# Step 6: Move all top-level directories except 'docs' (which needs special handling) +find /tmp/_site -maxdepth 1 -type d ! -name "_site" ! -name "docs" -exec sh -c 'dir=$(basename "$1"); rm -rf "$dir"; mv "$1" .' _ {} \; + +# Step 7: Handle docs directory specially +if [ -d "/tmp/_site/docs" ]; then + # Replace only the current version's docs + if [ -d "docs/$DOCS_VERSION" ]; then + rm -rf "docs/$DOCS_VERSION" + fi + mv "/tmp/_site/docs/$DOCS_VERSION" "docs/" + + # Handle docs root files + find /tmp/_site/docs -maxdepth 1 -type f -exec mv {} docs/ \; + + # Handle special docs directories (getting-started, versions) + for special_dir in getting-started versions; do + if [ -d "/tmp/_site/docs/$special_dir" ]; then + rm -rf "docs/$special_dir" + mv "/tmp/_site/docs/$special_dir" "docs/" + fi + done +fi + +# Clean up remaining files in /tmp/_site if any +if [ -d "/tmp/_site" ]; then + remaining_files=$(find /tmp/_site -type f | wc -l) + remaining_dirs=$(find /tmp/_site -type d | wc -l) + if [ $remaining_files -gt 0 ] || [ $remaining_dirs -gt 1 ]; then + print_warning "There are still some files or directories in /tmp/_site that weren't moved." + print_warning "You may want to inspect /tmp/_site to see if anything important was missed." + else + print_info "Cleaning up temporary directory…" + rm -rf /tmp/_site + print_success "Temporary directory cleaned up" + fi +fi + +# Step 10: Remove empty site directory if it exists +if [ -d "site" ]; then + print_info "Removing empty site directory…" + execute "rm -rf site" +fi + +print_success "Docs prep complete!" +print_info "Review changes before committing and pushing." +print_info "Next steps:" +print_info " 1. Run a local server to review changes" +print_info " 2. Check browser and web inspector for any errors" +print_info " 3. git add ." +print_info " 4. git commit -m \"Update documentation\"" +print_info " 5. git push origin ${NEW_BRANCH}" diff --git a/build/generate-sri.js b/build/generate-sri.mjs similarity index 60% rename from build/generate-sri.js rename to build/generate-sri.mjs index cde818e090f6..5622843f3479 100644 --- a/build/generate-sri.js +++ b/build/generate-sri.mjs @@ -5,17 +5,17 @@ * Remember to use the same vendor files as the CDN ones, * otherwise the hashes won't match! * - * Copyright 2017-2022 The Bootstrap Authors - * Copyright 2017-2022 Twitter, Inc. + * Copyright 2017-2025 The Bootstrap Authors * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) */ -'use strict' +import crypto from 'node:crypto' +import fs from 'node:fs' +import path from 'node:path' +import { fileURLToPath } from 'node:url' +import sh from 'shelljs' -const crypto = require('crypto') -const fs = require('fs') -const path = require('path') -const sh = require('shelljs') +const __dirname = path.dirname(fileURLToPath(import.meta.url)) sh.config.fatal = true @@ -47,18 +47,18 @@ const files = [ } ] -for (const file of files) { - fs.readFile(file.file, 'utf8', (error, data) => { +for (const { file, configPropertyName } of files) { + fs.readFile(file, 'utf8', (error, data) => { if (error) { throw error } - const algo = 'sha384' - const hash = crypto.createHash(algo).update(data, 'utf8').digest('base64') - const integrity = `${algo}-${hash}` + const algorithm = 'sha384' + const hash = crypto.createHash(algorithm).update(data, 'utf8').digest('base64') + const integrity = `${algorithm}-${hash}` - console.log(`${file.configPropertyName}: ${integrity}`) + console.log(`${configPropertyName}: ${integrity}`) - sh.sed('-i', new RegExp(`^(\\s+${file.configPropertyName}:\\s+["'])\\S*(["'])`), `$1${integrity}$2`, configFile) + sh.sed('-i', new RegExp(`^(\\s+${configPropertyName}:\\s+["'])\\S*(["'])`), `$1${integrity}$2`, configFile) }) } diff --git a/build/postcss.config.js b/build/postcss.config.mjs similarity index 86% rename from build/postcss.config.js rename to build/postcss.config.mjs index 7f8186d10314..7717cfc3f1f6 100644 --- a/build/postcss.config.js +++ b/build/postcss.config.mjs @@ -1,12 +1,10 @@ -'use strict' - const mapConfig = { inline: false, annotation: true, sourcesContent: true } -module.exports = context => { +export default context => { return { map: context.file.dirname.includes('examples') ? false : mapConfig, plugins: { diff --git a/build/rollup.config.js b/build/rollup.config.mjs similarity index 62% rename from build/rollup.config.js rename to build/rollup.config.mjs index 2d2920fd50d4..dd6c7d13e66f 100644 --- a/build/rollup.config.js +++ b/build/rollup.config.mjs @@ -1,15 +1,17 @@ -'use strict' +import path from 'node:path' +import process from 'node:process' +import { fileURLToPath } from 'node:url' +import { babel } from '@rollup/plugin-babel' +import { nodeResolve } from '@rollup/plugin-node-resolve' +import replace from '@rollup/plugin-replace' +import banner from './banner.mjs' -const path = require('path') -const { babel } = require('@rollup/plugin-babel') -const { nodeResolve } = require('@rollup/plugin-node-resolve') -const replace = require('@rollup/plugin-replace') -const banner = require('./banner.js') +const __dirname = path.dirname(fileURLToPath(import.meta.url)) const BUNDLE = process.env.BUNDLE === 'true' const ESM = process.env.ESM === 'true' -let fileDestination = `bootstrap${ESM ? '.esm' : ''}` +let destinationFile = `bootstrap${ESM ? '.esm' : ''}` const external = ['@popperjs/core'] const plugins = [ babel({ @@ -24,7 +26,7 @@ const globals = { } if (BUNDLE) { - fileDestination += '.bundle' + destinationFile += '.bundle' // Remove last entry in external array to bundle Popper external.pop() delete globals['@popperjs/core'] @@ -40,8 +42,8 @@ if (BUNDLE) { const rollupConfig = { input: path.resolve(__dirname, `../js/index.${ESM ? 'esm' : 'umd'}.js`), output: { - banner, - file: path.resolve(__dirname, `../dist/js/${fileDestination}.js`), + banner: banner(), + file: path.resolve(__dirname, `../dist/js/${destinationFile}.js`), format: ESM ? 'esm' : 'umd', globals, generatedCode: 'es2015' @@ -54,4 +56,4 @@ if (!ESM) { rollupConfig.output.name = 'bootstrap' } -module.exports = rollupConfig +export default rollupConfig diff --git a/build/vnu-jar.js b/build/vnu-jar.mjs similarity index 64% rename from build/vnu-jar.js rename to build/vnu-jar.mjs index df4192e24663..4eedb1bedc42 100644 --- a/build/vnu-jar.js +++ b/build/vnu-jar.mjs @@ -2,22 +2,22 @@ /*! * Script to run vnu-jar if Java is available. - * Copyright 2017-2022 The Bootstrap Authors - * Copyright 2017-2022 Twitter, Inc. + * Copyright 2017-2025 The Bootstrap Authors * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) */ -'use strict' - -const { execFile, spawn } = require('child_process') -const vnu = require('vnu-jar') +import { execFile, spawn } from 'node:child_process' +import vnu from 'vnu-jar' execFile('java', ['-version'], (error, stdout, stderr) => { if (error) { - console.error('Skipping vnu-jar test; Java is missing.') + console.error('Skipping vnu-jar test; Java is probably missing.') + console.error(error) return } + console.log('Running vnu-jar validation...') + const is32bitJava = !/64-Bit/.test(stderr) // vnu-jar accepts multiple ignores joined with a `|`. @@ -30,7 +30,14 @@ execFile('java', ['-version'], (error, stdout, stderr) => { // Per https://www.w3.org/TR/html-aria/#docconformance having "aria-disabled" on a link is // NOT RECOMMENDED, but it's still valid - we explain in the docs that it's not ideal, // and offer more robust alternatives, but also need to show a less-than-ideal example - 'An “aria-disabled” attribute whose value is “true” should not be specified on an “a” element that has an “href” attribute.' + 'An “aria-disabled” attribute whose value is “true” should not be specified on an “a” element that has an “href” attribute.', + // A `code` element with the `is:raw` attribute coming from remark-prismjs (Astro upstream possible bug) + 'Attribute “is:raw” is not serializable as XML 1.0.', + 'Attribute “is:raw” not allowed on element “code” at this point.', + // Astro's expecting trailing slashes on HTML tags such as
+ 'Trailing slash on void elements has no effect and interacts badly with unquoted attribute values.', + // Allow `switch` attribute. + 'Attribute “switch” not allowed on element “input” at this point.' ].join('|') const args = [ @@ -49,6 +56,8 @@ execFile('java', ['-version'], (error, stdout, stderr) => { args.splice(0, 0, '-Xss512k') } + console.log(`command used: java ${args.join(' ')}`) + return spawn('java', args, { shell: true, stdio: 'inherit' diff --git a/build/zip-examples.js b/build/zip-examples.mjs similarity index 57% rename from build/zip-examples.js rename to build/zip-examples.mjs index 759dd817de8c..6b2e1e0daca9 100644 --- a/build/zip-examples.js +++ b/build/zip-examples.mjs @@ -3,16 +3,20 @@ /*! * Script to create the built examples zip archive; * requires the `zip` command to be present! - * Copyright 2020-2022 The Bootstrap Authors + * Copyright 2020-2025 The Bootstrap Authors * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) */ -'use strict' +import fs from 'node:fs/promises' +import path from 'node:path' +import { fileURLToPath } from 'node:url' +import sh from 'shelljs' +import { format } from 'prettier' -const path = require('path') -const sh = require('shelljs') +const __dirname = path.dirname(fileURLToPath(import.meta.url)) -const pkg = require('../package.json') +const pkgJson = path.join(__dirname, '../package.json') +const pkg = JSON.parse(await fs.readFile(pkgJson, 'utf8')) const versionShort = pkg.config.version_short const distFolder = `bootstrap-${pkg.version}-examples` @@ -34,6 +38,9 @@ const imgFiles = [ 'bootstrap-logo.svg', 'bootstrap-logo-white.svg' ] +const staticJsFiles = [ + 'color-modes.js' +] sh.config.fatal = true @@ -52,7 +59,8 @@ sh.mkdir('-p', [ distFolder, `${distFolder}/assets/brand/`, `${distFolder}/assets/dist/css/`, - `${distFolder}/assets/dist/js/` + `${distFolder}/assets/dist/js/`, + `${distFolder}/assets/js/` ]) sh.cp('-Rf', `${docsDir}/examples/*`, distFolder) @@ -69,22 +77,44 @@ for (const file of imgFiles) { sh.cp('-f', `${docsDir}/assets/brand/${file}`, `${distFolder}/assets/brand/`) } +for (const file of staticJsFiles) { + sh.cp('-f', `${docsDir}/assets/js/${file}`, `${distFolder}/assets/js/`) +} + sh.rm(`${distFolder}/index.html`) // get all examples' HTML files -for (const file of sh.find(`${distFolder}/**/*.html`)) { +const htmlFiles = sh.find(`${distFolder}/**/*.html`) + +const formatPromises = htmlFiles.map(async file => { const fileContents = sh.cat(file) .toString() .replace(new RegExp(`"/docs/${versionShort}/`, 'g'), '"../') .replace(/"..\/dist\//g, '"../assets/dist/') - .replace(/(/g, '$1>') - .replace(/(') - .replace(/( +) 'click') event = event.replace(stripNameRegex, ''); return customEvents[event] || event; } - const EventHandler = { - on(element, event, handler, delegationFn) { - addHandler(element, event, handler, delegationFn, false); + on(element, event, handler, delegationFunction) { + addHandler(element, event, handler, delegationFunction, false); }, - - one(element, event, handler, delegationFn) { - addHandler(element, event, handler, delegationFn, true); + one(element, event, handler, delegationFunction) { + addHandler(element, event, handler, delegationFunction, true); }, - - off(element, originalTypeEvent, handler, delegationFn) { + off(element, originalTypeEvent, handler, delegationFunction) { if (typeof originalTypeEvent !== 'string' || !element) { return; } - - const [delegation, originalHandler, typeEvent] = normalizeParams(originalTypeEvent, handler, delegationFn); + const [isDelegated, callable, typeEvent] = normalizeParameters(originalTypeEvent, handler, delegationFunction); const inNamespace = typeEvent !== originalTypeEvent; - const events = getEvent(element); + const events = getElementEvents(element); + const storeElementEvent = events[typeEvent] || {}; const isNamespace = originalTypeEvent.startsWith('.'); - - if (typeof originalHandler !== 'undefined') { + if (typeof callable !== 'undefined') { // Simplest case: handler is passed, remove that listener ONLY. - if (!events || !events[typeEvent]) { + if (!Object.keys(storeElementEvent).length) { return; } - - removeHandler(element, events, typeEvent, originalHandler, delegation ? handler : null); + removeHandler(element, events, typeEvent, callable, isDelegated ? handler : null); return; } - if (isNamespace) { - Object.keys(events).forEach(elementEvent => { + for (const elementEvent of Object.keys(events)) { removeNamespacedHandlers(element, events, elementEvent, originalTypeEvent.slice(1)); - }); + } } - - const storeElementEvent = events[typeEvent] || {}; - Object.keys(storeElementEvent).forEach(keyHandlers => { + for (const [keyHandlers, event] of Object.entries(storeElementEvent)) { const handlerKey = keyHandlers.replace(stripUidRegex, ''); - if (!inNamespace || originalTypeEvent.includes(handlerKey)) { - const event = storeElementEvent[keyHandlers]; - removeHandler(element, events, typeEvent, event.originalHandler, event.delegationSelector); + removeHandler(element, events, typeEvent, event.callable, event.delegationSelector); } - }); + } }, - trigger(element, event, args) { if (typeof event !== 'string' || !element) { return null; } - const $ = getjQuery(); const typeEvent = getTypeEvent(event); const inNamespace = event !== typeEvent; - const isNative = nativeEvents.has(typeEvent); - let jQueryEvent; + let jQueryEvent = null; let bubbles = true; let nativeDispatch = true; let defaultPrevented = false; - let evt = null; - if (inNamespace && $) { jQueryEvent = $.Event(event, args); $(element).trigger(jQueryEvent); @@ -568,169 +493,311 @@ nativeDispatch = !jQueryEvent.isImmediatePropagationStopped(); defaultPrevented = jQueryEvent.isDefaultPrevented(); } - - if (isNative) { - evt = document.createEvent('HTMLEvents'); - evt.initEvent(typeEvent, bubbles, true); - } else { - evt = new CustomEvent(event, { - bubbles, - cancelable: true - }); - } // merge custom information in our event - - - if (typeof args !== 'undefined') { - Object.keys(args).forEach(key => { - Object.defineProperty(evt, key, { - get() { - return args[key]; - } - - }); - }); - } - + const evt = hydrateObj(new Event(event, { + bubbles, + cancelable: true + }), args); if (defaultPrevented) { evt.preventDefault(); } - if (nativeDispatch) { element.dispatchEvent(evt); } - - if (evt.defaultPrevented && typeof jQueryEvent !== 'undefined') { + if (evt.defaultPrevented && jQueryEvent) { jQueryEvent.preventDefault(); } - return evt; } - }; + function hydrateObj(obj, meta = {}) { + for (const [key, value] of Object.entries(meta)) { + try { + obj[key] = value; + } catch (_unused) { + Object.defineProperty(obj, key, { + configurable: true, + get() { + return value; + } + }); + } + } + return obj; + } /** * -------------------------------------------------------------------------- - * Bootstrap (v5.1.3): dom/data.js + * Bootstrap dom/manipulator.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ - /** - * ------------------------------------------------------------------------ - * Constants - * ------------------------------------------------------------------------ - */ - const elementMap = new Map(); - const Data = { - set(element, key, instance) { - if (!elementMap.has(element)) { - elementMap.set(element, new Map()); - } - - const instanceMap = elementMap.get(element); // make it clear we only want one instance per element - // can be removed later when multiple key/instances are fine to be used - - if (!instanceMap.has(key) && instanceMap.size !== 0) { - // eslint-disable-next-line no-console - console.error(`Bootstrap doesn't allow more than one instance per element. Bound instance: ${Array.from(instanceMap.keys())[0]}.`); - return; - } - - instanceMap.set(key, instance); - }, - - get(element, key) { - if (elementMap.has(element)) { - return elementMap.get(element).get(key) || null; - } - + function normalizeData(value) { + if (value === 'true') { + return true; + } + if (value === 'false') { + return false; + } + if (value === Number(value).toString()) { + return Number(value); + } + if (value === '' || value === 'null') { return null; + } + if (typeof value !== 'string') { + return value; + } + try { + return JSON.parse(decodeURIComponent(value)); + } catch (_unused) { + return value; + } + } + function normalizeDataKey(key) { + return key.replace(/[A-Z]/g, chr => `-${chr.toLowerCase()}`); + } + const Manipulator = { + setDataAttribute(element, key, value) { + element.setAttribute(`data-bs-${normalizeDataKey(key)}`, value); }, - - remove(element, key) { - if (!elementMap.has(element)) { - return; + removeDataAttribute(element, key) { + element.removeAttribute(`data-bs-${normalizeDataKey(key)}`); + }, + getDataAttributes(element) { + if (!element) { + return {}; + } + const attributes = {}; + const bsKeys = Object.keys(element.dataset).filter(key => key.startsWith('bs') && !key.startsWith('bsConfig')); + for (const key of bsKeys) { + let pureKey = key.replace(/^bs/, ''); + pureKey = pureKey.charAt(0).toLowerCase() + pureKey.slice(1); + attributes[pureKey] = normalizeData(element.dataset[key]); } + return attributes; + }, + getDataAttribute(element, key) { + return normalizeData(element.getAttribute(`data-bs-${normalizeDataKey(key)}`)); + } + }; - const instanceMap = elementMap.get(element); - instanceMap.delete(key); // free up element references if there are no instances left for an element + /** + * -------------------------------------------------------------------------- + * Bootstrap util/config.js + * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) + * -------------------------------------------------------------------------- + */ - if (instanceMap.size === 0) { - elementMap.delete(element); - } + + /** + * Class definition + */ + + class Config { + // Getters + static get Default() { + return {}; + } + static get DefaultType() { + return {}; + } + static get NAME() { + throw new Error('You have to implement the static method "NAME", for each component!'); + } + _getConfig(config) { + config = this._mergeConfigObj(config); + config = this._configAfterMerge(config); + this._typeCheckConfig(config); + return config; + } + _configAfterMerge(config) { + return config; } + _mergeConfigObj(config, element) { + const jsonConfig = isElement$1(element) ? Manipulator.getDataAttribute(element, 'config') : {}; // try to parse - }; + return { + ...this.constructor.Default, + ...(typeof jsonConfig === 'object' ? jsonConfig : {}), + ...(isElement$1(element) ? Manipulator.getDataAttributes(element) : {}), + ...(typeof config === 'object' ? config : {}) + }; + } + _typeCheckConfig(config, configTypes = this.constructor.DefaultType) { + for (const [property, expectedTypes] of Object.entries(configTypes)) { + const value = config[property]; + const valueType = isElement$1(value) ? 'element' : toType(value); + if (!new RegExp(expectedTypes).test(valueType)) { + throw new TypeError(`${this.constructor.NAME.toUpperCase()}: Option "${property}" provided type "${valueType}" but expected type "${expectedTypes}".`); + } + } + } + } /** * -------------------------------------------------------------------------- - * Bootstrap (v5.1.3): base-component.js + * Bootstrap base-component.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ + + /** - * ------------------------------------------------------------------------ * Constants - * ------------------------------------------------------------------------ */ - const VERSION = '5.1.3'; + const VERSION = '5.3.8'; - class BaseComponent { - constructor(element) { - element = getElement(element); + /** + * Class definition + */ + class BaseComponent extends Config { + constructor(element, config) { + super(); + element = getElement(element); if (!element) { return; } - this._element = element; + this._config = this._getConfig(config); Data.set(this._element, this.constructor.DATA_KEY, this); } + // Public dispose() { Data.remove(this._element, this.constructor.DATA_KEY); EventHandler.off(this._element, this.constructor.EVENT_KEY); - Object.getOwnPropertyNames(this).forEach(propertyName => { + for (const propertyName of Object.getOwnPropertyNames(this)) { this[propertyName] = null; - }); + } } + // Private _queueCallback(callback, element, isAnimated = true) { executeAfterTransition(callback, element, isAnimated); } - /** Static */ - + _getConfig(config) { + config = this._mergeConfigObj(config, this._element); + config = this._configAfterMerge(config); + this._typeCheckConfig(config); + return config; + } + // Static static getInstance(element) { return Data.get(getElement(element), this.DATA_KEY); } - static getOrCreateInstance(element, config = {}) { return this.getInstance(element) || new this(element, typeof config === 'object' ? config : null); } - static get VERSION() { return VERSION; } - - static get NAME() { - throw new Error('You have to implement the static method "NAME", for each component!'); - } - static get DATA_KEY() { return `bs.${this.NAME}`; } - static get EVENT_KEY() { return `.${this.DATA_KEY}`; } - + static eventName(name) { + return `${name}${this.EVENT_KEY}`; + } } /** * -------------------------------------------------------------------------- - * Bootstrap (v5.1.3): util/component-functions.js + * Bootstrap dom/selector-engine.js + * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) + * -------------------------------------------------------------------------- + */ + + const getSelector = element => { + let selector = element.getAttribute('data-bs-target'); + if (!selector || selector === '#') { + let hrefAttribute = element.getAttribute('href'); + + // The only valid content that could double as a selector are IDs or classes, + // so everything starting with `#` or `.`. If a "real" URL is used as the selector, + // `document.querySelector` will rightfully complain it is invalid. + // See https://github.com/twbs/bootstrap/issues/32273 + if (!hrefAttribute || !hrefAttribute.includes('#') && !hrefAttribute.startsWith('.')) { + return null; + } + + // Just in case some CMS puts out a full URL with the anchor appended + if (hrefAttribute.includes('#') && !hrefAttribute.startsWith('#')) { + hrefAttribute = `#${hrefAttribute.split('#')[1]}`; + } + selector = hrefAttribute && hrefAttribute !== '#' ? hrefAttribute.trim() : null; + } + return selector ? selector.split(',').map(sel => parseSelector(sel)).join(',') : null; + }; + const SelectorEngine = { + find(selector, element = document.documentElement) { + return [].concat(...Element.prototype.querySelectorAll.call(element, selector)); + }, + findOne(selector, element = document.documentElement) { + return Element.prototype.querySelector.call(element, selector); + }, + children(element, selector) { + return [].concat(...element.children).filter(child => child.matches(selector)); + }, + parents(element, selector) { + const parents = []; + let ancestor = element.parentNode.closest(selector); + while (ancestor) { + parents.push(ancestor); + ancestor = ancestor.parentNode.closest(selector); + } + return parents; + }, + prev(element, selector) { + let previous = element.previousElementSibling; + while (previous) { + if (previous.matches(selector)) { + return [previous]; + } + previous = previous.previousElementSibling; + } + return []; + }, + // TODO: this is now unused; remove later along with prev() + next(element, selector) { + let next = element.nextElementSibling; + while (next) { + if (next.matches(selector)) { + return [next]; + } + next = next.nextElementSibling; + } + return []; + }, + focusableChildren(element) { + const focusables = ['a', 'button', 'input', 'textarea', 'select', 'details', '[tabindex]', '[contenteditable="true"]'].map(selector => `${selector}:not([tabindex^="-"])`).join(','); + return this.find(focusables, element).filter(el => !isDisabled(el) && isVisible(el)); + }, + getSelectorFromElement(element) { + const selector = getSelector(element); + if (selector) { + return SelectorEngine.findOne(selector) ? selector : null; + } + return null; + }, + getElementFromSelector(element) { + const selector = getSelector(element); + return selector ? SelectorEngine.findOne(selector) : null; + }, + getMultipleElementsFromSelector(element) { + const selector = getSelector(element); + return selector ? SelectorEngine.find(selector) : []; + } + }; + + /** + * -------------------------------------------------------------------------- + * Bootstrap util/component-functions.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ @@ -742,380 +809,308 @@ if (['A', 'AREA'].includes(this.tagName)) { event.preventDefault(); } - if (isDisabled(this)) { return; } + const target = SelectorEngine.getElementFromSelector(this) || this.closest(`.${name}`); + const instance = component.getOrCreateInstance(target); - const target = getElementFromSelector(this) || this.closest(`.${name}`); - const instance = component.getOrCreateInstance(target); // Method argument is left, for Alert and only, as it doesn't implement the 'hide' method - + // Method argument is left, for Alert and only, as it doesn't implement the 'hide' method instance[method](); }); }; /** * -------------------------------------------------------------------------- - * Bootstrap (v5.1.3): alert.js + * Bootstrap alert.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ + + /** - * ------------------------------------------------------------------------ * Constants - * ------------------------------------------------------------------------ */ - const NAME$d = 'alert'; - const DATA_KEY$c = 'bs.alert'; - const EVENT_KEY$c = `.${DATA_KEY$c}`; - const EVENT_CLOSE = `close${EVENT_KEY$c}`; - const EVENT_CLOSED = `closed${EVENT_KEY$c}`; + const NAME$f = 'alert'; + const DATA_KEY$a = 'bs.alert'; + const EVENT_KEY$b = `.${DATA_KEY$a}`; + const EVENT_CLOSE = `close${EVENT_KEY$b}`; + const EVENT_CLOSED = `closed${EVENT_KEY$b}`; const CLASS_NAME_FADE$5 = 'fade'; const CLASS_NAME_SHOW$8 = 'show'; + /** - * ------------------------------------------------------------------------ - * Class Definition - * ------------------------------------------------------------------------ + * Class definition */ class Alert extends BaseComponent { // Getters static get NAME() { - return NAME$d; - } // Public - + return NAME$f; + } + // Public close() { const closeEvent = EventHandler.trigger(this._element, EVENT_CLOSE); - if (closeEvent.defaultPrevented) { return; } - this._element.classList.remove(CLASS_NAME_SHOW$8); - const isAnimated = this._element.classList.contains(CLASS_NAME_FADE$5); - this._queueCallback(() => this._destroyElement(), this._element, isAnimated); - } // Private - + } + // Private _destroyElement() { this._element.remove(); - EventHandler.trigger(this._element, EVENT_CLOSED); this.dispose(); - } // Static - + } + // Static static jQueryInterface(config) { return this.each(function () { const data = Alert.getOrCreateInstance(this); - if (typeof config !== 'string') { return; } - if (data[config] === undefined || config.startsWith('_') || config === 'constructor') { throw new TypeError(`No method named "${config}"`); } - data[config](this); }); } - } + /** - * ------------------------------------------------------------------------ - * Data Api implementation - * ------------------------------------------------------------------------ + * Data API implementation */ - enableDismissTrigger(Alert, 'close'); + /** - * ------------------------------------------------------------------------ * jQuery - * ------------------------------------------------------------------------ - * add .Alert to jQuery only if jQuery is present */ defineJQueryPlugin(Alert); /** * -------------------------------------------------------------------------- - * Bootstrap (v5.1.3): button.js + * Bootstrap button.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ + + /** - * ------------------------------------------------------------------------ * Constants - * ------------------------------------------------------------------------ */ - const NAME$c = 'button'; - const DATA_KEY$b = 'bs.button'; - const EVENT_KEY$b = `.${DATA_KEY$b}`; - const DATA_API_KEY$7 = '.data-api'; + const NAME$e = 'button'; + const DATA_KEY$9 = 'bs.button'; + const EVENT_KEY$a = `.${DATA_KEY$9}`; + const DATA_API_KEY$6 = '.data-api'; const CLASS_NAME_ACTIVE$3 = 'active'; const SELECTOR_DATA_TOGGLE$5 = '[data-bs-toggle="button"]'; - const EVENT_CLICK_DATA_API$6 = `click${EVENT_KEY$b}${DATA_API_KEY$7}`; + const EVENT_CLICK_DATA_API$6 = `click${EVENT_KEY$a}${DATA_API_KEY$6}`; + /** - * ------------------------------------------------------------------------ - * Class Definition - * ------------------------------------------------------------------------ + * Class definition */ class Button extends BaseComponent { // Getters static get NAME() { - return NAME$c; - } // Public - + return NAME$e; + } + // Public toggle() { // Toggle class and sync the `aria-pressed` attribute with the return value of the `.toggle()` method this._element.setAttribute('aria-pressed', this._element.classList.toggle(CLASS_NAME_ACTIVE$3)); - } // Static - + } + // Static static jQueryInterface(config) { return this.each(function () { const data = Button.getOrCreateInstance(this); - if (config === 'toggle') { data[config](); } }); } - } + /** - * ------------------------------------------------------------------------ - * Data Api implementation - * ------------------------------------------------------------------------ + * Data API implementation */ - EventHandler.on(document, EVENT_CLICK_DATA_API$6, SELECTOR_DATA_TOGGLE$5, event => { event.preventDefault(); const button = event.target.closest(SELECTOR_DATA_TOGGLE$5); const data = Button.getOrCreateInstance(button); data.toggle(); }); + /** - * ------------------------------------------------------------------------ * jQuery - * ------------------------------------------------------------------------ - * add .Button to jQuery only if jQuery is present */ defineJQueryPlugin(Button); /** * -------------------------------------------------------------------------- - * Bootstrap (v5.1.3): dom/manipulator.js + * Bootstrap util/swipe.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ - function normalizeData(val) { - if (val === 'true') { - return true; + + + /** + * Constants + */ + + const NAME$d = 'swipe'; + const EVENT_KEY$9 = '.bs.swipe'; + const EVENT_TOUCHSTART = `touchstart${EVENT_KEY$9}`; + const EVENT_TOUCHMOVE = `touchmove${EVENT_KEY$9}`; + const EVENT_TOUCHEND = `touchend${EVENT_KEY$9}`; + const EVENT_POINTERDOWN = `pointerdown${EVENT_KEY$9}`; + const EVENT_POINTERUP = `pointerup${EVENT_KEY$9}`; + const POINTER_TYPE_TOUCH = 'touch'; + const POINTER_TYPE_PEN = 'pen'; + const CLASS_NAME_POINTER_EVENT = 'pointer-event'; + const SWIPE_THRESHOLD = 40; + const Default$c = { + endCallback: null, + leftCallback: null, + rightCallback: null + }; + const DefaultType$c = { + endCallback: '(function|null)', + leftCallback: '(function|null)', + rightCallback: '(function|null)' + }; + + /** + * Class definition + */ + + class Swipe extends Config { + constructor(element, config) { + super(); + this._element = element; + if (!element || !Swipe.isSupported()) { + return; + } + this._config = this._getConfig(config); + this._deltaX = 0; + this._supportPointerEvents = Boolean(window.PointerEvent); + this._initEvents(); } - if (val === 'false') { - return false; + // Getters + static get Default() { + return Default$c; + } + static get DefaultType() { + return DefaultType$c; + } + static get NAME() { + return NAME$d; } - if (val === Number(val).toString()) { - return Number(val); + // Public + dispose() { + EventHandler.off(this._element, EVENT_KEY$9); } - if (val === '' || val === 'null') { - return null; + // Private + _start(event) { + if (!this._supportPointerEvents) { + this._deltaX = event.touches[0].clientX; + return; + } + if (this._eventIsPointerPenTouch(event)) { + this._deltaX = event.clientX; + } + } + _end(event) { + if (this._eventIsPointerPenTouch(event)) { + this._deltaX = event.clientX - this._deltaX; + } + this._handleSwipe(); + execute(this._config.endCallback); + } + _move(event) { + this._deltaX = event.touches && event.touches.length > 1 ? 0 : event.touches[0].clientX - this._deltaX; + } + _handleSwipe() { + const absDeltaX = Math.abs(this._deltaX); + if (absDeltaX <= SWIPE_THRESHOLD) { + return; + } + const direction = absDeltaX / this._deltaX; + this._deltaX = 0; + if (!direction) { + return; + } + execute(direction > 0 ? this._config.rightCallback : this._config.leftCallback); + } + _initEvents() { + if (this._supportPointerEvents) { + EventHandler.on(this._element, EVENT_POINTERDOWN, event => this._start(event)); + EventHandler.on(this._element, EVENT_POINTERUP, event => this._end(event)); + this._element.classList.add(CLASS_NAME_POINTER_EVENT); + } else { + EventHandler.on(this._element, EVENT_TOUCHSTART, event => this._start(event)); + EventHandler.on(this._element, EVENT_TOUCHMOVE, event => this._move(event)); + EventHandler.on(this._element, EVENT_TOUCHEND, event => this._end(event)); + } + } + _eventIsPointerPenTouch(event) { + return this._supportPointerEvents && (event.pointerType === POINTER_TYPE_PEN || event.pointerType === POINTER_TYPE_TOUCH); } - return val; + // Static + static isSupported() { + return 'ontouchstart' in document.documentElement || navigator.maxTouchPoints > 0; + } } - function normalizeDataKey(key) { - return key.replace(/[A-Z]/g, chr => `-${chr.toLowerCase()}`); - } + /** + * -------------------------------------------------------------------------- + * Bootstrap carousel.js + * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) + * -------------------------------------------------------------------------- + */ - const Manipulator = { - setDataAttribute(element, key, value) { - element.setAttribute(`data-bs-${normalizeDataKey(key)}`, value); - }, - - removeDataAttribute(element, key) { - element.removeAttribute(`data-bs-${normalizeDataKey(key)}`); - }, - - getDataAttributes(element) { - if (!element) { - return {}; - } - - const attributes = {}; - Object.keys(element.dataset).filter(key => key.startsWith('bs')).forEach(key => { - let pureKey = key.replace(/^bs/, ''); - pureKey = pureKey.charAt(0).toLowerCase() + pureKey.slice(1, pureKey.length); - attributes[pureKey] = normalizeData(element.dataset[key]); - }); - return attributes; - }, - - getDataAttribute(element, key) { - return normalizeData(element.getAttribute(`data-bs-${normalizeDataKey(key)}`)); - }, - - offset(element) { - const rect = element.getBoundingClientRect(); - return { - top: rect.top + window.pageYOffset, - left: rect.left + window.pageXOffset - }; - }, - - position(element) { - return { - top: element.offsetTop, - left: element.offsetLeft - }; - } - - }; /** - * -------------------------------------------------------------------------- - * Bootstrap (v5.1.3): dom/selector-engine.js - * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) - * -------------------------------------------------------------------------- - */ - const NODE_TEXT = 3; - const SelectorEngine = { - find(selector, element = document.documentElement) { - return [].concat(...Element.prototype.querySelectorAll.call(element, selector)); - }, - - findOne(selector, element = document.documentElement) { - return Element.prototype.querySelector.call(element, selector); - }, - - children(element, selector) { - return [].concat(...element.children).filter(child => child.matches(selector)); - }, - - parents(element, selector) { - const parents = []; - let ancestor = element.parentNode; - - while (ancestor && ancestor.nodeType === Node.ELEMENT_NODE && ancestor.nodeType !== NODE_TEXT) { - if (ancestor.matches(selector)) { - parents.push(ancestor); - } - - ancestor = ancestor.parentNode; - } - - return parents; - }, - - prev(element, selector) { - let previous = element.previousElementSibling; - - while (previous) { - if (previous.matches(selector)) { - return [previous]; - } - - previous = previous.previousElementSibling; - } - - return []; - }, - - next(element, selector) { - let next = element.nextElementSibling; - - while (next) { - if (next.matches(selector)) { - return [next]; - } - - next = next.nextElementSibling; - } - - return []; - }, - - focusableChildren(element) { - const focusables = ['a', 'button', 'input', 'textarea', 'select', 'details', '[tabindex]', '[contenteditable="true"]'].map(selector => `${selector}:not([tabindex^="-"])`).join(', '); - return this.find(focusables, element).filter(el => !isDisabled(el) && isVisible(el)); - } - - }; - - /** - * -------------------------------------------------------------------------- - * Bootstrap (v5.1.3): carousel.js - * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) - * -------------------------------------------------------------------------- - */ - /** - * ------------------------------------------------------------------------ * Constants - * ------------------------------------------------------------------------ */ - const NAME$b = 'carousel'; - const DATA_KEY$a = 'bs.carousel'; - const EVENT_KEY$a = `.${DATA_KEY$a}`; - const DATA_API_KEY$6 = '.data-api'; - const ARROW_LEFT_KEY = 'ArrowLeft'; - const ARROW_RIGHT_KEY = 'ArrowRight'; + const NAME$c = 'carousel'; + const DATA_KEY$8 = 'bs.carousel'; + const EVENT_KEY$8 = `.${DATA_KEY$8}`; + const DATA_API_KEY$5 = '.data-api'; + const ARROW_LEFT_KEY$1 = 'ArrowLeft'; + const ARROW_RIGHT_KEY$1 = 'ArrowRight'; const TOUCHEVENT_COMPAT_WAIT = 500; // Time for mouse compat events to fire after touch - const SWIPE_THRESHOLD = 40; - const Default$a = { - interval: 5000, - keyboard: true, - slide: false, - pause: 'hover', - wrap: true, - touch: true - }; - const DefaultType$a = { - interval: '(number|boolean)', - keyboard: 'boolean', - slide: '(boolean|string)', - pause: '(string|boolean)', - wrap: 'boolean', - touch: 'boolean' - }; const ORDER_NEXT = 'next'; const ORDER_PREV = 'prev'; const DIRECTION_LEFT = 'left'; const DIRECTION_RIGHT = 'right'; - const KEY_TO_DIRECTION = { - [ARROW_LEFT_KEY]: DIRECTION_RIGHT, - [ARROW_RIGHT_KEY]: DIRECTION_LEFT - }; - const EVENT_SLIDE = `slide${EVENT_KEY$a}`; - const EVENT_SLID = `slid${EVENT_KEY$a}`; - const EVENT_KEYDOWN = `keydown${EVENT_KEY$a}`; - const EVENT_MOUSEENTER = `mouseenter${EVENT_KEY$a}`; - const EVENT_MOUSELEAVE = `mouseleave${EVENT_KEY$a}`; - const EVENT_TOUCHSTART = `touchstart${EVENT_KEY$a}`; - const EVENT_TOUCHMOVE = `touchmove${EVENT_KEY$a}`; - const EVENT_TOUCHEND = `touchend${EVENT_KEY$a}`; - const EVENT_POINTERDOWN = `pointerdown${EVENT_KEY$a}`; - const EVENT_POINTERUP = `pointerup${EVENT_KEY$a}`; - const EVENT_DRAG_START = `dragstart${EVENT_KEY$a}`; - const EVENT_LOAD_DATA_API$2 = `load${EVENT_KEY$a}${DATA_API_KEY$6}`; - const EVENT_CLICK_DATA_API$5 = `click${EVENT_KEY$a}${DATA_API_KEY$6}`; + const EVENT_SLIDE = `slide${EVENT_KEY$8}`; + const EVENT_SLID = `slid${EVENT_KEY$8}`; + const EVENT_KEYDOWN$1 = `keydown${EVENT_KEY$8}`; + const EVENT_MOUSEENTER$1 = `mouseenter${EVENT_KEY$8}`; + const EVENT_MOUSELEAVE$1 = `mouseleave${EVENT_KEY$8}`; + const EVENT_DRAG_START = `dragstart${EVENT_KEY$8}`; + const EVENT_LOAD_DATA_API$3 = `load${EVENT_KEY$8}${DATA_API_KEY$5}`; + const EVENT_CLICK_DATA_API$5 = `click${EVENT_KEY$8}${DATA_API_KEY$5}`; const CLASS_NAME_CAROUSEL = 'carousel'; const CLASS_NAME_ACTIVE$2 = 'active'; const CLASS_NAME_SLIDE = 'slide'; @@ -1123,519 +1118,361 @@ const CLASS_NAME_START = 'carousel-item-start'; const CLASS_NAME_NEXT = 'carousel-item-next'; const CLASS_NAME_PREV = 'carousel-item-prev'; - const CLASS_NAME_POINTER_EVENT = 'pointer-event'; - const SELECTOR_ACTIVE$1 = '.active'; - const SELECTOR_ACTIVE_ITEM = '.active.carousel-item'; + const SELECTOR_ACTIVE = '.active'; const SELECTOR_ITEM = '.carousel-item'; + const SELECTOR_ACTIVE_ITEM = SELECTOR_ACTIVE + SELECTOR_ITEM; const SELECTOR_ITEM_IMG = '.carousel-item img'; - const SELECTOR_NEXT_PREV = '.carousel-item-next, .carousel-item-prev'; const SELECTOR_INDICATORS = '.carousel-indicators'; - const SELECTOR_INDICATOR = '[data-bs-target]'; const SELECTOR_DATA_SLIDE = '[data-bs-slide], [data-bs-slide-to]'; const SELECTOR_DATA_RIDE = '[data-bs-ride="carousel"]'; - const POINTER_TYPE_TOUCH = 'touch'; - const POINTER_TYPE_PEN = 'pen'; + const KEY_TO_DIRECTION = { + [ARROW_LEFT_KEY$1]: DIRECTION_RIGHT, + [ARROW_RIGHT_KEY$1]: DIRECTION_LEFT + }; + const Default$b = { + interval: 5000, + keyboard: true, + pause: 'hover', + ride: false, + touch: true, + wrap: true + }; + const DefaultType$b = { + interval: '(number|boolean)', + // TODO:v6 remove boolean support + keyboard: 'boolean', + pause: '(string|boolean)', + ride: '(boolean|string)', + touch: 'boolean', + wrap: 'boolean' + }; + /** - * ------------------------------------------------------------------------ - * Class Definition - * ------------------------------------------------------------------------ + * Class definition */ class Carousel extends BaseComponent { constructor(element, config) { - super(element); - this._items = null; + super(element, config); this._interval = null; this._activeElement = null; - this._isPaused = false; this._isSliding = false; this.touchTimeout = null; - this.touchStartX = 0; - this.touchDeltaX = 0; - this._config = this._getConfig(config); + this._swipeHelper = null; this._indicatorsElement = SelectorEngine.findOne(SELECTOR_INDICATORS, this._element); - this._touchSupported = 'ontouchstart' in document.documentElement || navigator.maxTouchPoints > 0; - this._pointerEvent = Boolean(window.PointerEvent); - this._addEventListeners(); - } // Getters - + if (this._config.ride === CLASS_NAME_CAROUSEL) { + this.cycle(); + } + } + // Getters static get Default() { - return Default$a; + return Default$b; + } + static get DefaultType() { + return DefaultType$b; } - static get NAME() { - return NAME$b; - } // Public - + return NAME$c; + } + // Public next() { this._slide(ORDER_NEXT); } - nextWhenVisible() { + // FIXME TODO use `document.visibilityState` // Don't call next when the page isn't visible // or the carousel or its parent isn't visible if (!document.hidden && isVisible(this._element)) { this.next(); } } - prev() { this._slide(ORDER_PREV); } - - pause(event) { - if (!event) { - this._isPaused = true; - } - - if (SelectorEngine.findOne(SELECTOR_NEXT_PREV, this._element)) { + pause() { + if (this._isSliding) { triggerTransitionEnd(this._element); - this.cycle(true); } - - clearInterval(this._interval); - this._interval = null; + this._clearInterval(); } - - cycle(event) { - if (!event) { - this._isPaused = false; - } - - if (this._interval) { - clearInterval(this._interval); - this._interval = null; + cycle() { + this._clearInterval(); + this._updateInterval(); + this._interval = setInterval(() => this.nextWhenVisible(), this._config.interval); + } + _maybeEnableCycle() { + if (!this._config.ride) { + return; } - - if (this._config && this._config.interval && !this._isPaused) { - this._updateInterval(); - - this._interval = setInterval((document.visibilityState ? this.nextWhenVisible : this.next).bind(this), this._config.interval); + if (this._isSliding) { + EventHandler.one(this._element, EVENT_SLID, () => this.cycle()); + return; } + this.cycle(); } - to(index) { - this._activeElement = SelectorEngine.findOne(SELECTOR_ACTIVE_ITEM, this._element); - - const activeIndex = this._getItemIndex(this._activeElement); - - if (index > this._items.length - 1 || index < 0) { + const items = this._getItems(); + if (index > items.length - 1 || index < 0) { return; } - if (this._isSliding) { EventHandler.one(this._element, EVENT_SLID, () => this.to(index)); return; } - + const activeIndex = this._getItemIndex(this._getActive()); if (activeIndex === index) { - this.pause(); - this.cycle(); return; } - const order = index > activeIndex ? ORDER_NEXT : ORDER_PREV; - - this._slide(order, this._items[index]); - } // Private - - - _getConfig(config) { - config = { ...Default$a, - ...Manipulator.getDataAttributes(this._element), - ...(typeof config === 'object' ? config : {}) - }; - typeCheckConfig(NAME$b, config, DefaultType$a); - return config; + this._slide(order, items[index]); } - - _handleSwipe() { - const absDeltax = Math.abs(this.touchDeltaX); - - if (absDeltax <= SWIPE_THRESHOLD) { - return; - } - - const direction = absDeltax / this.touchDeltaX; - this.touchDeltaX = 0; - - if (!direction) { - return; + dispose() { + if (this._swipeHelper) { + this._swipeHelper.dispose(); } - - this._slide(direction > 0 ? DIRECTION_RIGHT : DIRECTION_LEFT); + super.dispose(); } + // Private + _configAfterMerge(config) { + config.defaultInterval = config.interval; + return config; + } _addEventListeners() { if (this._config.keyboard) { - EventHandler.on(this._element, EVENT_KEYDOWN, event => this._keydown(event)); + EventHandler.on(this._element, EVENT_KEYDOWN$1, event => this._keydown(event)); } - if (this._config.pause === 'hover') { - EventHandler.on(this._element, EVENT_MOUSEENTER, event => this.pause(event)); - EventHandler.on(this._element, EVENT_MOUSELEAVE, event => this.cycle(event)); + EventHandler.on(this._element, EVENT_MOUSEENTER$1, () => this.pause()); + EventHandler.on(this._element, EVENT_MOUSELEAVE$1, () => this._maybeEnableCycle()); } - - if (this._config.touch && this._touchSupported) { + if (this._config.touch && Swipe.isSupported()) { this._addTouchEventListeners(); } } - _addTouchEventListeners() { - const hasPointerPenTouch = event => { - return this._pointerEvent && (event.pointerType === POINTER_TYPE_PEN || event.pointerType === POINTER_TYPE_TOUCH); - }; - - const start = event => { - if (hasPointerPenTouch(event)) { - this.touchStartX = event.clientX; - } else if (!this._pointerEvent) { - this.touchStartX = event.touches[0].clientX; - } - }; - - const move = event => { - // ensure swiping with one touch and not pinching - this.touchDeltaX = event.touches && event.touches.length > 1 ? 0 : event.touches[0].clientX - this.touchStartX; - }; - - const end = event => { - if (hasPointerPenTouch(event)) { - this.touchDeltaX = event.clientX - this.touchStartX; + for (const img of SelectorEngine.find(SELECTOR_ITEM_IMG, this._element)) { + EventHandler.on(img, EVENT_DRAG_START, event => event.preventDefault()); + } + const endCallBack = () => { + if (this._config.pause !== 'hover') { + return; } - this._handleSwipe(); - - if (this._config.pause === 'hover') { - // If it's a touch-enabled device, mouseenter/leave are fired as - // part of the mouse compatibility events on first tap - the carousel - // would stop cycling until user tapped out of it; - // here, we listen for touchend, explicitly pause the carousel - // (as if it's the second time we tap on it, mouseenter compat event - // is NOT fired) and after a timeout (to allow for mouse compatibility - // events to fire) we explicitly restart cycling - this.pause(); + // If it's a touch-enabled device, mouseenter/leave are fired as + // part of the mouse compatibility events on first tap - the carousel + // would stop cycling until user tapped out of it; + // here, we listen for touchend, explicitly pause the carousel + // (as if it's the second time we tap on it, mouseenter compat event + // is NOT fired) and after a timeout (to allow for mouse compatibility + // events to fire) we explicitly restart cycling - if (this.touchTimeout) { - clearTimeout(this.touchTimeout); - } - - this.touchTimeout = setTimeout(event => this.cycle(event), TOUCHEVENT_COMPAT_WAIT + this._config.interval); + this.pause(); + if (this.touchTimeout) { + clearTimeout(this.touchTimeout); } + this.touchTimeout = setTimeout(() => this._maybeEnableCycle(), TOUCHEVENT_COMPAT_WAIT + this._config.interval); }; - - SelectorEngine.find(SELECTOR_ITEM_IMG, this._element).forEach(itemImg => { - EventHandler.on(itemImg, EVENT_DRAG_START, event => event.preventDefault()); - }); - - if (this._pointerEvent) { - EventHandler.on(this._element, EVENT_POINTERDOWN, event => start(event)); - EventHandler.on(this._element, EVENT_POINTERUP, event => end(event)); - - this._element.classList.add(CLASS_NAME_POINTER_EVENT); - } else { - EventHandler.on(this._element, EVENT_TOUCHSTART, event => start(event)); - EventHandler.on(this._element, EVENT_TOUCHMOVE, event => move(event)); - EventHandler.on(this._element, EVENT_TOUCHEND, event => end(event)); - } + const swipeConfig = { + leftCallback: () => this._slide(this._directionToOrder(DIRECTION_LEFT)), + rightCallback: () => this._slide(this._directionToOrder(DIRECTION_RIGHT)), + endCallback: endCallBack + }; + this._swipeHelper = new Swipe(this._element, swipeConfig); } - _keydown(event) { if (/input|textarea/i.test(event.target.tagName)) { return; } - const direction = KEY_TO_DIRECTION[event.key]; - if (direction) { event.preventDefault(); - - this._slide(direction); + this._slide(this._directionToOrder(direction)); } } - _getItemIndex(element) { - this._items = element && element.parentNode ? SelectorEngine.find(SELECTOR_ITEM, element.parentNode) : []; - return this._items.indexOf(element); - } - - _getItemByOrder(order, activeElement) { - const isNext = order === ORDER_NEXT; - return getNextActiveElement(this._items, activeElement, isNext, this._config.wrap); - } - - _triggerSlideEvent(relatedTarget, eventDirectionName) { - const targetIndex = this._getItemIndex(relatedTarget); - - const fromIndex = this._getItemIndex(SelectorEngine.findOne(SELECTOR_ACTIVE_ITEM, this._element)); - - return EventHandler.trigger(this._element, EVENT_SLIDE, { - relatedTarget, - direction: eventDirectionName, - from: fromIndex, - to: targetIndex - }); + return this._getItems().indexOf(element); } - - _setActiveIndicatorElement(element) { - if (this._indicatorsElement) { - const activeIndicator = SelectorEngine.findOne(SELECTOR_ACTIVE$1, this._indicatorsElement); - activeIndicator.classList.remove(CLASS_NAME_ACTIVE$2); - activeIndicator.removeAttribute('aria-current'); - const indicators = SelectorEngine.find(SELECTOR_INDICATOR, this._indicatorsElement); - - for (let i = 0; i < indicators.length; i++) { - if (Number.parseInt(indicators[i].getAttribute('data-bs-slide-to'), 10) === this._getItemIndex(element)) { - indicators[i].classList.add(CLASS_NAME_ACTIVE$2); - indicators[i].setAttribute('aria-current', 'true'); - break; - } - } + _setActiveIndicatorElement(index) { + if (!this._indicatorsElement) { + return; + } + const activeIndicator = SelectorEngine.findOne(SELECTOR_ACTIVE, this._indicatorsElement); + activeIndicator.classList.remove(CLASS_NAME_ACTIVE$2); + activeIndicator.removeAttribute('aria-current'); + const newActiveIndicator = SelectorEngine.findOne(`[data-bs-slide-to="${index}"]`, this._indicatorsElement); + if (newActiveIndicator) { + newActiveIndicator.classList.add(CLASS_NAME_ACTIVE$2); + newActiveIndicator.setAttribute('aria-current', 'true'); } } - _updateInterval() { - const element = this._activeElement || SelectorEngine.findOne(SELECTOR_ACTIVE_ITEM, this._element); - + const element = this._activeElement || this._getActive(); if (!element) { return; } - const elementInterval = Number.parseInt(element.getAttribute('data-bs-interval'), 10); - - if (elementInterval) { - this._config.defaultInterval = this._config.defaultInterval || this._config.interval; - this._config.interval = elementInterval; - } else { - this._config.interval = this._config.defaultInterval || this._config.interval; - } + this._config.interval = elementInterval || this._config.defaultInterval; } - - _slide(directionOrOrder, element) { - const order = this._directionToOrder(directionOrOrder); - - const activeElement = SelectorEngine.findOne(SELECTOR_ACTIVE_ITEM, this._element); - - const activeElementIndex = this._getItemIndex(activeElement); - - const nextElement = element || this._getItemByOrder(order, activeElement); - - const nextElementIndex = this._getItemIndex(nextElement); - - const isCycling = Boolean(this._interval); - const isNext = order === ORDER_NEXT; - const directionalClassName = isNext ? CLASS_NAME_START : CLASS_NAME_END; - const orderClassName = isNext ? CLASS_NAME_NEXT : CLASS_NAME_PREV; - - const eventDirectionName = this._orderToDirection(order); - - if (nextElement && nextElement.classList.contains(CLASS_NAME_ACTIVE$2)) { - this._isSliding = false; + _slide(order, element = null) { + if (this._isSliding) { return; } - - if (this._isSliding) { + const activeElement = this._getActive(); + const isNext = order === ORDER_NEXT; + const nextElement = element || getNextActiveElement(this._getItems(), activeElement, isNext, this._config.wrap); + if (nextElement === activeElement) { return; } - - const slideEvent = this._triggerSlideEvent(nextElement, eventDirectionName); - + const nextElementIndex = this._getItemIndex(nextElement); + const triggerEvent = eventName => { + return EventHandler.trigger(this._element, eventName, { + relatedTarget: nextElement, + direction: this._orderToDirection(order), + from: this._getItemIndex(activeElement), + to: nextElementIndex + }); + }; + const slideEvent = triggerEvent(EVENT_SLIDE); if (slideEvent.defaultPrevented) { return; } - if (!activeElement || !nextElement) { // Some weirdness is happening, so we bail + // TODO: change tests that use empty divs to avoid this check return; } - + const isCycling = Boolean(this._interval); + this.pause(); this._isSliding = true; - - if (isCycling) { - this.pause(); - } - - this._setActiveIndicatorElement(nextElement); - + this._setActiveIndicatorElement(nextElementIndex); this._activeElement = nextElement; - - const triggerSlidEvent = () => { - EventHandler.trigger(this._element, EVENT_SLID, { - relatedTarget: nextElement, - direction: eventDirectionName, - from: activeElementIndex, - to: nextElementIndex - }); - }; - - if (this._element.classList.contains(CLASS_NAME_SLIDE)) { - nextElement.classList.add(orderClassName); - reflow(nextElement); - activeElement.classList.add(directionalClassName); - nextElement.classList.add(directionalClassName); - - const completeCallBack = () => { - nextElement.classList.remove(directionalClassName, orderClassName); - nextElement.classList.add(CLASS_NAME_ACTIVE$2); - activeElement.classList.remove(CLASS_NAME_ACTIVE$2, orderClassName, directionalClassName); - this._isSliding = false; - setTimeout(triggerSlidEvent, 0); - }; - - this._queueCallback(completeCallBack, activeElement, true); - } else { - activeElement.classList.remove(CLASS_NAME_ACTIVE$2); + const directionalClassName = isNext ? CLASS_NAME_START : CLASS_NAME_END; + const orderClassName = isNext ? CLASS_NAME_NEXT : CLASS_NAME_PREV; + nextElement.classList.add(orderClassName); + reflow(nextElement); + activeElement.classList.add(directionalClassName); + nextElement.classList.add(directionalClassName); + const completeCallBack = () => { + nextElement.classList.remove(directionalClassName, orderClassName); nextElement.classList.add(CLASS_NAME_ACTIVE$2); + activeElement.classList.remove(CLASS_NAME_ACTIVE$2, orderClassName, directionalClassName); this._isSliding = false; - triggerSlidEvent(); - } - + triggerEvent(EVENT_SLID); + }; + this._queueCallback(completeCallBack, activeElement, this._isAnimated()); if (isCycling) { this.cycle(); } } - - _directionToOrder(direction) { - if (![DIRECTION_RIGHT, DIRECTION_LEFT].includes(direction)) { - return direction; + _isAnimated() { + return this._element.classList.contains(CLASS_NAME_SLIDE); + } + _getActive() { + return SelectorEngine.findOne(SELECTOR_ACTIVE_ITEM, this._element); + } + _getItems() { + return SelectorEngine.find(SELECTOR_ITEM, this._element); + } + _clearInterval() { + if (this._interval) { + clearInterval(this._interval); + this._interval = null; } - + } + _directionToOrder(direction) { if (isRTL()) { return direction === DIRECTION_LEFT ? ORDER_PREV : ORDER_NEXT; } - return direction === DIRECTION_LEFT ? ORDER_NEXT : ORDER_PREV; } - _orderToDirection(order) { - if (![ORDER_NEXT, ORDER_PREV].includes(order)) { - return order; - } - if (isRTL()) { return order === ORDER_PREV ? DIRECTION_LEFT : DIRECTION_RIGHT; } - return order === ORDER_PREV ? DIRECTION_RIGHT : DIRECTION_LEFT; - } // Static - - - static carouselInterface(element, config) { - const data = Carousel.getOrCreateInstance(element, config); - let { - _config - } = data; - - if (typeof config === 'object') { - _config = { ..._config, - ...config - }; - } - - const action = typeof config === 'string' ? config : _config.slide; - - if (typeof config === 'number') { - data.to(config); - } else if (typeof action === 'string') { - if (typeof data[action] === 'undefined') { - throw new TypeError(`No method named "${action}"`); - } - - data[action](); - } else if (_config.interval && _config.ride) { - data.pause(); - data.cycle(); - } } + // Static static jQueryInterface(config) { return this.each(function () { - Carousel.carouselInterface(this, config); + const data = Carousel.getOrCreateInstance(this, config); + if (typeof config === 'number') { + data.to(config); + return; + } + if (typeof config === 'string') { + if (data[config] === undefined || config.startsWith('_') || config === 'constructor') { + throw new TypeError(`No method named "${config}"`); + } + data[config](); + } }); } - - static dataApiClickHandler(event) { - const target = getElementFromSelector(this); - - if (!target || !target.classList.contains(CLASS_NAME_CAROUSEL)) { - return; - } - - const config = { ...Manipulator.getDataAttributes(target), - ...Manipulator.getDataAttributes(this) - }; - const slideIndex = this.getAttribute('data-bs-slide-to'); - - if (slideIndex) { - config.interval = false; - } - - Carousel.carouselInterface(target, config); - - if (slideIndex) { - Carousel.getInstance(target).to(slideIndex); - } - - event.preventDefault(); - } - } + /** - * ------------------------------------------------------------------------ - * Data Api implementation - * ------------------------------------------------------------------------ + * Data API implementation */ - - EventHandler.on(document, EVENT_CLICK_DATA_API$5, SELECTOR_DATA_SLIDE, Carousel.dataApiClickHandler); - EventHandler.on(window, EVENT_LOAD_DATA_API$2, () => { + EventHandler.on(document, EVENT_CLICK_DATA_API$5, SELECTOR_DATA_SLIDE, function (event) { + const target = SelectorEngine.getElementFromSelector(this); + if (!target || !target.classList.contains(CLASS_NAME_CAROUSEL)) { + return; + } + event.preventDefault(); + const carousel = Carousel.getOrCreateInstance(target); + const slideIndex = this.getAttribute('data-bs-slide-to'); + if (slideIndex) { + carousel.to(slideIndex); + carousel._maybeEnableCycle(); + return; + } + if (Manipulator.getDataAttribute(this, 'slide') === 'next') { + carousel.next(); + carousel._maybeEnableCycle(); + return; + } + carousel.prev(); + carousel._maybeEnableCycle(); + }); + EventHandler.on(window, EVENT_LOAD_DATA_API$3, () => { const carousels = SelectorEngine.find(SELECTOR_DATA_RIDE); - - for (let i = 0, len = carousels.length; i < len; i++) { - Carousel.carouselInterface(carousels[i], Carousel.getInstance(carousels[i])); + for (const carousel of carousels) { + Carousel.getOrCreateInstance(carousel); } }); + /** - * ------------------------------------------------------------------------ * jQuery - * ------------------------------------------------------------------------ - * add .Carousel to jQuery only if jQuery is present */ defineJQueryPlugin(Carousel); /** * -------------------------------------------------------------------------- - * Bootstrap (v5.1.3): collapse.js + * Bootstrap collapse.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ + + /** - * ------------------------------------------------------------------------ * Constants - * ------------------------------------------------------------------------ */ - const NAME$a = 'collapse'; - const DATA_KEY$9 = 'bs.collapse'; - const EVENT_KEY$9 = `.${DATA_KEY$9}`; - const DATA_API_KEY$5 = '.data-api'; - const Default$9 = { - toggle: true, - parent: null - }; - const DefaultType$9 = { - toggle: 'boolean', - parent: '(null|element)' - }; - const EVENT_SHOW$5 = `show${EVENT_KEY$9}`; - const EVENT_SHOWN$5 = `shown${EVENT_KEY$9}`; - const EVENT_HIDE$5 = `hide${EVENT_KEY$9}`; - const EVENT_HIDDEN$5 = `hidden${EVENT_KEY$9}`; - const EVENT_CLICK_DATA_API$4 = `click${EVENT_KEY$9}${DATA_API_KEY$5}`; + const NAME$b = 'collapse'; + const DATA_KEY$7 = 'bs.collapse'; + const EVENT_KEY$7 = `.${DATA_KEY$7}`; + const DATA_API_KEY$4 = '.data-api'; + const EVENT_SHOW$6 = `show${EVENT_KEY$7}`; + const EVENT_SHOWN$6 = `shown${EVENT_KEY$7}`; + const EVENT_HIDE$6 = `hide${EVENT_KEY$7}`; + const EVENT_HIDDEN$6 = `hidden${EVENT_KEY$7}`; + const EVENT_CLICK_DATA_API$4 = `click${EVENT_KEY$7}${DATA_API_KEY$4}`; const CLASS_NAME_SHOW$7 = 'show'; const CLASS_NAME_COLLAPSE = 'collapse'; const CLASS_NAME_COLLAPSING = 'collapsing'; @@ -1646,53 +1483,53 @@ const HEIGHT = 'height'; const SELECTOR_ACTIVES = '.collapse.show, .collapse.collapsing'; const SELECTOR_DATA_TOGGLE$4 = '[data-bs-toggle="collapse"]'; + const Default$a = { + parent: null, + toggle: true + }; + const DefaultType$a = { + parent: '(null|element)', + toggle: 'boolean' + }; + /** - * ------------------------------------------------------------------------ - * Class Definition - * ------------------------------------------------------------------------ + * Class definition */ class Collapse extends BaseComponent { constructor(element, config) { - super(element); + super(element, config); this._isTransitioning = false; - this._config = this._getConfig(config); this._triggerArray = []; const toggleList = SelectorEngine.find(SELECTOR_DATA_TOGGLE$4); - - for (let i = 0, len = toggleList.length; i < len; i++) { - const elem = toggleList[i]; - const selector = getSelectorFromElement(elem); - const filterElement = SelectorEngine.find(selector).filter(foundElem => foundElem === this._element); - + for (const elem of toggleList) { + const selector = SelectorEngine.getSelectorFromElement(elem); + const filterElement = SelectorEngine.find(selector).filter(foundElement => foundElement === this._element); if (selector !== null && filterElement.length) { - this._selector = selector; - this._triggerArray.push(elem); } } - this._initializeChildren(); - if (!this._config.parent) { this._addAriaAndCollapsedClass(this._triggerArray, this._isShown()); } - if (this._config.toggle) { this.toggle(); } - } // Getters - + } + // Getters static get Default() { - return Default$9; + return Default$a; + } + static get DefaultType() { + return DefaultType$a; + } + static get NAME() { + return NAME$b; } - static get NAME() { - return NAME$a; - } // Public - - + // Public toggle() { if (this._isShown()) { this.hide(); @@ -1700,228 +1537,151 @@ this.show(); } } - show() { if (this._isTransitioning || this._isShown()) { return; } + let activeChildren = []; - let actives = []; - let activesData; - + // find active children if (this._config.parent) { - const children = SelectorEngine.find(CLASS_NAME_DEEPER_CHILDREN, this._config.parent); - actives = SelectorEngine.find(SELECTOR_ACTIVES, this._config.parent).filter(elem => !children.includes(elem)); // remove children if greater depth + activeChildren = this._getFirstLevelChildren(SELECTOR_ACTIVES).filter(element => element !== this._element).map(element => Collapse.getOrCreateInstance(element, { + toggle: false + })); } - - const container = SelectorEngine.findOne(this._selector); - - if (actives.length) { - const tempActiveData = actives.find(elem => container !== elem); - activesData = tempActiveData ? Collapse.getInstance(tempActiveData) : null; - - if (activesData && activesData._isTransitioning) { - return; - } + if (activeChildren.length && activeChildren[0]._isTransitioning) { + return; } - - const startEvent = EventHandler.trigger(this._element, EVENT_SHOW$5); - + const startEvent = EventHandler.trigger(this._element, EVENT_SHOW$6); if (startEvent.defaultPrevented) { return; } - - actives.forEach(elemActive => { - if (container !== elemActive) { - Collapse.getOrCreateInstance(elemActive, { - toggle: false - }).hide(); - } - - if (!activesData) { - Data.set(elemActive, DATA_KEY$9, null); - } - }); - + for (const activeInstance of activeChildren) { + activeInstance.hide(); + } const dimension = this._getDimension(); - this._element.classList.remove(CLASS_NAME_COLLAPSE); - this._element.classList.add(CLASS_NAME_COLLAPSING); - this._element.style[dimension] = 0; - this._addAriaAndCollapsedClass(this._triggerArray, true); - this._isTransitioning = true; - const complete = () => { this._isTransitioning = false; - this._element.classList.remove(CLASS_NAME_COLLAPSING); - this._element.classList.add(CLASS_NAME_COLLAPSE, CLASS_NAME_SHOW$7); - this._element.style[dimension] = ''; - EventHandler.trigger(this._element, EVENT_SHOWN$5); + EventHandler.trigger(this._element, EVENT_SHOWN$6); }; - const capitalizedDimension = dimension[0].toUpperCase() + dimension.slice(1); const scrollSize = `scroll${capitalizedDimension}`; - this._queueCallback(complete, this._element, true); - this._element.style[dimension] = `${this._element[scrollSize]}px`; } - hide() { if (this._isTransitioning || !this._isShown()) { return; } - - const startEvent = EventHandler.trigger(this._element, EVENT_HIDE$5); - + const startEvent = EventHandler.trigger(this._element, EVENT_HIDE$6); if (startEvent.defaultPrevented) { return; } - const dimension = this._getDimension(); - this._element.style[dimension] = `${this._element.getBoundingClientRect()[dimension]}px`; reflow(this._element); - this._element.classList.add(CLASS_NAME_COLLAPSING); - this._element.classList.remove(CLASS_NAME_COLLAPSE, CLASS_NAME_SHOW$7); - - const triggerArrayLength = this._triggerArray.length; - - for (let i = 0; i < triggerArrayLength; i++) { - const trigger = this._triggerArray[i]; - const elem = getElementFromSelector(trigger); - - if (elem && !this._isShown(elem)) { + for (const trigger of this._triggerArray) { + const element = SelectorEngine.getElementFromSelector(trigger); + if (element && !this._isShown(element)) { this._addAriaAndCollapsedClass([trigger], false); } } - this._isTransitioning = true; - const complete = () => { this._isTransitioning = false; - this._element.classList.remove(CLASS_NAME_COLLAPSING); - this._element.classList.add(CLASS_NAME_COLLAPSE); - - EventHandler.trigger(this._element, EVENT_HIDDEN$5); + EventHandler.trigger(this._element, EVENT_HIDDEN$6); }; - this._element.style[dimension] = ''; - this._queueCallback(complete, this._element, true); } + // Private _isShown(element = this._element) { return element.classList.contains(CLASS_NAME_SHOW$7); - } // Private - - - _getConfig(config) { - config = { ...Default$9, - ...Manipulator.getDataAttributes(this._element), - ...config - }; + } + _configAfterMerge(config) { config.toggle = Boolean(config.toggle); // Coerce string values - config.parent = getElement(config.parent); - typeCheckConfig(NAME$a, config, DefaultType$9); return config; } - _getDimension() { return this._element.classList.contains(CLASS_NAME_HORIZONTAL) ? WIDTH : HEIGHT; } - _initializeChildren() { if (!this._config.parent) { return; } - - const children = SelectorEngine.find(CLASS_NAME_DEEPER_CHILDREN, this._config.parent); - SelectorEngine.find(SELECTOR_DATA_TOGGLE$4, this._config.parent).filter(elem => !children.includes(elem)).forEach(element => { - const selected = getElementFromSelector(element); - + const children = this._getFirstLevelChildren(SELECTOR_DATA_TOGGLE$4); + for (const element of children) { + const selected = SelectorEngine.getElementFromSelector(element); if (selected) { this._addAriaAndCollapsedClass([element], this._isShown(selected)); } - }); + } + } + _getFirstLevelChildren(selector) { + const children = SelectorEngine.find(CLASS_NAME_DEEPER_CHILDREN, this._config.parent); + // remove children if greater depth + return SelectorEngine.find(selector, this._config.parent).filter(element => !children.includes(element)); } - _addAriaAndCollapsedClass(triggerArray, isOpen) { if (!triggerArray.length) { return; } + for (const element of triggerArray) { + element.classList.toggle(CLASS_NAME_COLLAPSED, !isOpen); + element.setAttribute('aria-expanded', isOpen); + } + } - triggerArray.forEach(elem => { - if (isOpen) { - elem.classList.remove(CLASS_NAME_COLLAPSED); - } else { - elem.classList.add(CLASS_NAME_COLLAPSED); - } - - elem.setAttribute('aria-expanded', isOpen); - }); - } // Static - - + // Static static jQueryInterface(config) { + const _config = {}; + if (typeof config === 'string' && /show|hide/.test(config)) { + _config.toggle = false; + } return this.each(function () { - const _config = {}; - - if (typeof config === 'string' && /show|hide/.test(config)) { - _config.toggle = false; - } - const data = Collapse.getOrCreateInstance(this, _config); - if (typeof config === 'string') { if (typeof data[config] === 'undefined') { throw new TypeError(`No method named "${config}"`); } - data[config](); } }); } - } + /** - * ------------------------------------------------------------------------ - * Data Api implementation - * ------------------------------------------------------------------------ + * Data API implementation */ - EventHandler.on(document, EVENT_CLICK_DATA_API$4, SELECTOR_DATA_TOGGLE$4, function (event) { // preventDefault only for elements (which change the URL) not inside the collapsible element if (event.target.tagName === 'A' || event.delegateTarget && event.delegateTarget.tagName === 'A') { event.preventDefault(); } - - const selector = getSelectorFromElement(this); - const selectorElements = SelectorEngine.find(selector); - selectorElements.forEach(element => { + for (const element of SelectorEngine.getMultipleElementsFromSelector(this)) { Collapse.getOrCreateInstance(element, { toggle: false }).toggle(); - }); + } }); + /** - * ------------------------------------------------------------------------ * jQuery - * ------------------------------------------------------------------------ - * add .Collapse to jQuery only if jQuery is present */ defineJQueryPlugin(Collapse); @@ -2082,39 +1842,61 @@ return placement.split('-')[0]; } - // import { isHTMLElement } from './instanceOf'; - function getBoundingClientRect(element, // eslint-disable-next-line unused-imports/no-unused-vars - includeScale) { + var max = Math.max; + var min = Math.min; + var round = Math.round; + + function getUAString() { + var uaData = navigator.userAgentData; - var rect = element.getBoundingClientRect(); + if (uaData != null && uaData.brands && Array.isArray(uaData.brands)) { + return uaData.brands.map(function (item) { + return item.brand + "/" + item.version; + }).join(' '); + } + + return navigator.userAgent; + } + + function isLayoutViewport() { + return !/^((?!chrome|android).)*safari/i.test(getUAString()); + } + + function getBoundingClientRect(element, includeScale, isFixedStrategy) { + if (includeScale === void 0) { + includeScale = false; + } + + if (isFixedStrategy === void 0) { + isFixedStrategy = false; + } + + var clientRect = element.getBoundingClientRect(); var scaleX = 1; - var scaleY = 1; // FIXME: - // `offsetWidth` returns an integer while `getBoundingClientRect` - // returns a float. This results in `scaleX` or `scaleY` being - // non-1 when it should be for elements that aren't a full pixel in - // width or height. - // if (isHTMLElement(element) && includeScale) { - // const offsetHeight = element.offsetHeight; - // const offsetWidth = element.offsetWidth; - // // Do not attempt to divide by 0, otherwise we get `Infinity` as scale - // // Fallback to 1 in case both values are `0` - // if (offsetWidth > 0) { - // scaleX = rect.width / offsetWidth || 1; - // } - // if (offsetHeight > 0) { - // scaleY = rect.height / offsetHeight || 1; - // } - // } + var scaleY = 1; + + if (includeScale && isHTMLElement(element)) { + scaleX = element.offsetWidth > 0 ? round(clientRect.width) / element.offsetWidth || 1 : 1; + scaleY = element.offsetHeight > 0 ? round(clientRect.height) / element.offsetHeight || 1 : 1; + } + + var _ref = isElement(element) ? getWindow(element) : window, + visualViewport = _ref.visualViewport; + var addVisualOffsets = !isLayoutViewport() && isFixedStrategy; + var x = (clientRect.left + (addVisualOffsets && visualViewport ? visualViewport.offsetLeft : 0)) / scaleX; + var y = (clientRect.top + (addVisualOffsets && visualViewport ? visualViewport.offsetTop : 0)) / scaleY; + var width = clientRect.width / scaleX; + var height = clientRect.height / scaleY; return { - width: rect.width / scaleX, - height: rect.height / scaleY, - top: rect.top / scaleY, - right: rect.right / scaleX, - bottom: rect.bottom / scaleY, - left: rect.left / scaleX, - x: rect.left / scaleX, - y: rect.top / scaleY + width: width, + height: height, + top: y, + right: x + width, + bottom: y + height, + left: x, + x: x, + y: y }; } @@ -2209,8 +1991,8 @@ function getContainingBlock(element) { - var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') !== -1; - var isIE = navigator.userAgent.indexOf('Trident') !== -1; + var isFirefox = /firefox/i.test(getUAString()); + var isIE = /Trident/i.test(getUAString()); if (isIE && isHTMLElement(element)) { // In IE 9, 10 and 11 fixed elements containing block is always established by the viewport @@ -2223,6 +2005,10 @@ var currentNode = getParentNode(element); + if (isShadowRoot(currentNode)) { + currentNode = currentNode.host; + } + while (isHTMLElement(currentNode) && ['html', 'body'].indexOf(getNodeName(currentNode)) < 0) { var css = getComputedStyle$1(currentNode); // This is non-exhaustive but covers the most common CSS properties that // create a containing block. @@ -2259,13 +2045,13 @@ return ['top', 'bottom'].indexOf(placement) >= 0 ? 'x' : 'y'; } - var max = Math.max; - var min = Math.min; - var round = Math.round; - function within(min$1, value, max$1) { return max(min$1, min(value, max$1)); } + function withinMaxClamp(min, value, max) { + var v = within(min, value, max); + return v > max ? max : v; + } function getFreshSideObject() { return { @@ -2351,7 +2137,6 @@ } if (!contains(state.elements.popper, arrowElement)) { - return; } @@ -2382,14 +2167,13 @@ // Zooming can change the DPR, but it seems to report a value that will // cleanly divide the values into the appropriate subpixels. - function roundOffsetsByDPR(_ref) { + function roundOffsetsByDPR(_ref, win) { var x = _ref.x, y = _ref.y; - var win = window; var dpr = win.devicePixelRatio || 1; return { - x: round(round(x * dpr) / dpr) || 0, - y: round(round(y * dpr) / dpr) || 0 + x: round(x * dpr) / dpr || 0, + y: round(y * dpr) / dpr || 0 }; } @@ -2404,14 +2188,23 @@ position = _ref2.position, gpuAcceleration = _ref2.gpuAcceleration, adaptive = _ref2.adaptive, - roundOffsets = _ref2.roundOffsets; - - var _ref3 = roundOffsets === true ? roundOffsetsByDPR(offsets) : typeof roundOffsets === 'function' ? roundOffsets(offsets) : offsets, - _ref3$x = _ref3.x, - x = _ref3$x === void 0 ? 0 : _ref3$x, - _ref3$y = _ref3.y, - y = _ref3$y === void 0 ? 0 : _ref3$y; + roundOffsets = _ref2.roundOffsets, + isFixed = _ref2.isFixed; + var _offsets$x = offsets.x, + x = _offsets$x === void 0 ? 0 : _offsets$x, + _offsets$y = offsets.y, + y = _offsets$y === void 0 ? 0 : _offsets$y; + + var _ref3 = typeof roundOffsets === 'function' ? roundOffsets({ + x: x, + y: y + }) : { + x: x, + y: y + }; + x = _ref3.x; + y = _ref3.y; var hasX = offsets.hasOwnProperty('x'); var hasY = offsets.hasOwnProperty('y'); var sideX = left; @@ -2436,16 +2229,18 @@ offsetParent = offsetParent; if (placement === top || (placement === left || placement === right) && variation === end) { - sideY = bottom; // $FlowFixMe[prop-missing] - - y -= offsetParent[heightProp] - popperRect.height; + sideY = bottom; + var offsetY = isFixed && offsetParent === win && win.visualViewport ? win.visualViewport.height : // $FlowFixMe[prop-missing] + offsetParent[heightProp]; + y -= offsetY - popperRect.height; y *= gpuAcceleration ? 1 : -1; } if (placement === left || (placement === top || placement === bottom) && variation === end) { - sideX = right; // $FlowFixMe[prop-missing] - - x -= offsetParent[widthProp] - popperRect.width; + sideX = right; + var offsetX = isFixed && offsetParent === win && win.visualViewport ? win.visualViewport.width : // $FlowFixMe[prop-missing] + offsetParent[widthProp]; + x -= offsetX - popperRect.width; x *= gpuAcceleration ? 1 : -1; } } @@ -2454,6 +2249,17 @@ position: position }, adaptive && unsetSides); + var _ref4 = roundOffsets === true ? roundOffsetsByDPR({ + x: x, + y: y + }, getWindow(popper)) : { + x: x, + y: y + }; + + x = _ref4.x; + y = _ref4.y; + if (gpuAcceleration) { var _Object$assign; @@ -2463,22 +2269,22 @@ return Object.assign({}, commonStyles, (_Object$assign2 = {}, _Object$assign2[sideY] = hasY ? y + "px" : '', _Object$assign2[sideX] = hasX ? x + "px" : '', _Object$assign2.transform = '', _Object$assign2)); } - function computeStyles(_ref4) { - var state = _ref4.state, - options = _ref4.options; + function computeStyles(_ref5) { + var state = _ref5.state, + options = _ref5.options; var _options$gpuAccelerat = options.gpuAcceleration, gpuAcceleration = _options$gpuAccelerat === void 0 ? true : _options$gpuAccelerat, _options$adaptive = options.adaptive, adaptive = _options$adaptive === void 0 ? true : _options$adaptive, _options$roundOffsets = options.roundOffsets, roundOffsets = _options$roundOffsets === void 0 ? true : _options$roundOffsets; - var commonStyles = { placement: getBasePlacement(state.placement), variation: getVariation(state.placement), popper: state.elements.popper, popperRect: state.rects.popper, - gpuAcceleration: gpuAcceleration + gpuAcceleration: gpuAcceleration, + isFixed: state.options.strategy === 'fixed' }; if (state.modifiersData.popperOffsets != null) { @@ -2604,31 +2410,21 @@ return getBoundingClientRect(getDocumentElement(element)).left + getWindowScroll(element).scrollLeft; } - function getViewportRect(element) { + function getViewportRect(element, strategy) { var win = getWindow(element); var html = getDocumentElement(element); var visualViewport = win.visualViewport; var width = html.clientWidth; var height = html.clientHeight; var x = 0; - var y = 0; // NB: This isn't supported on iOS <= 12. If the keyboard is open, the popper - // can be obscured underneath it. - // Also, `html.clientHeight` adds the bottom bar height in Safari iOS, even - // if it isn't open, so if this isn't available, the popper will be detected - // to overflow the bottom of the screen too early. + var y = 0; if (visualViewport) { width = visualViewport.width; - height = visualViewport.height; // Uses Layout Viewport (like Chrome; Safari does not currently) - // In Chrome, it returns a value very close to 0 (+/-) but contains rounding - // errors due to floating point numbers, so we need to check precision. - // Safari returns a number <= 0, usually < -1 when pinch-zoomed - // Feature detection fails in mobile emulation mode in Chrome. - // Math.abs(win.innerWidth / visualViewport.scale - visualViewport.width) < - // 0.001 - // Fallback here: "Not Safari" userAgent - - if (!/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) { + height = visualViewport.height; + var layoutViewport = isLayoutViewport(); + + if (layoutViewport || !layoutViewport && strategy === 'fixed') { x = visualViewport.offsetLeft; y = visualViewport.offsetTop; } @@ -2722,8 +2518,8 @@ }); } - function getInnerBoundingClientRect(element) { - var rect = getBoundingClientRect(element); + function getInnerBoundingClientRect(element, strategy) { + var rect = getBoundingClientRect(element, false, strategy === 'fixed'); rect.top = rect.top + element.clientTop; rect.left = rect.left + element.clientLeft; rect.bottom = rect.top + element.clientHeight; @@ -2735,8 +2531,8 @@ return rect; } - function getClientRectFromMixedType(element, clippingParent) { - return clippingParent === viewport ? rectToClientRect(getViewportRect(element)) : isHTMLElement(clippingParent) ? getInnerBoundingClientRect(clippingParent) : rectToClientRect(getDocumentRect(getDocumentElement(element))); + function getClientRectFromMixedType(element, clippingParent, strategy) { + return clippingParent === viewport ? rectToClientRect(getViewportRect(element, strategy)) : isElement(clippingParent) ? getInnerBoundingClientRect(clippingParent, strategy) : rectToClientRect(getDocumentRect(getDocumentElement(element))); } // A "clipping parent" is an overflowable container with the characteristic of // clipping (or hiding) overflowing elements with a position different from // `initial` @@ -2759,18 +2555,18 @@ // clipping parents - function getClippingRect(element, boundary, rootBoundary) { + function getClippingRect(element, boundary, rootBoundary, strategy) { var mainClippingParents = boundary === 'clippingParents' ? getClippingParents(element) : [].concat(boundary); var clippingParents = [].concat(mainClippingParents, [rootBoundary]); var firstClippingParent = clippingParents[0]; var clippingRect = clippingParents.reduce(function (accRect, clippingParent) { - var rect = getClientRectFromMixedType(element, clippingParent); + var rect = getClientRectFromMixedType(element, clippingParent, strategy); accRect.top = max(rect.top, accRect.top); accRect.right = min(rect.right, accRect.right); accRect.bottom = min(rect.bottom, accRect.bottom); accRect.left = max(rect.left, accRect.left); return accRect; - }, getClientRectFromMixedType(element, firstClippingParent)); + }, getClientRectFromMixedType(element, firstClippingParent, strategy)); clippingRect.width = clippingRect.right - clippingRect.left; clippingRect.height = clippingRect.bottom - clippingRect.top; clippingRect.x = clippingRect.left; @@ -2851,6 +2647,8 @@ var _options = options, _options$placement = _options.placement, placement = _options$placement === void 0 ? state.placement : _options$placement, + _options$strategy = _options.strategy, + strategy = _options$strategy === void 0 ? state.strategy : _options$strategy, _options$boundary = _options.boundary, boundary = _options$boundary === void 0 ? clippingParents : _options$boundary, _options$rootBoundary = _options.rootBoundary, @@ -2865,12 +2663,11 @@ var altContext = elementContext === popper ? reference : popper; var popperRect = state.rects.popper; var element = state.elements[altBoundary ? altContext : elementContext]; - var clippingClientRect = getClippingRect(isElement(element) ? element : element.contextElement || getDocumentElement(state.elements.popper), boundary, rootBoundary); + var clippingClientRect = getClippingRect(isElement(element) ? element : element.contextElement || getDocumentElement(state.elements.popper), boundary, rootBoundary, strategy); var referenceClientRect = getBoundingClientRect(state.elements.reference); var popperOffsets = computeOffsets({ reference: referenceClientRect, element: popperRect, - strategy: 'absolute', placement: placement }); var popperClientRect = rectToClientRect(Object.assign({}, popperRect, popperOffsets)); @@ -3198,7 +2995,6 @@ state.modifiersData[name] = computeOffsets({ reference: state.rects.reference, element: state.rects.popper, - strategy: 'absolute', placement: state.placement }); } // eslint-disable-next-line import/no-unused-modules @@ -3249,6 +3045,14 @@ var tetherOffsetValue = typeof tetherOffset === 'function' ? tetherOffset(Object.assign({}, state.rects, { placement: state.placement })) : tetherOffset; + var normalizedTetherOffsetValue = typeof tetherOffsetValue === 'number' ? { + mainAxis: tetherOffsetValue, + altAxis: tetherOffsetValue + } : Object.assign({ + mainAxis: 0, + altAxis: 0 + }, tetherOffsetValue); + var offsetModifierState = state.modifiersData.offset ? state.modifiersData.offset[state.placement] : null; var data = { x: 0, y: 0 @@ -3258,13 +3062,15 @@ return; } - if (checkMainAxis || checkAltAxis) { + if (checkMainAxis) { + var _offsetModifierState$; + var mainSide = mainAxis === 'y' ? top : left; var altSide = mainAxis === 'y' ? bottom : right; var len = mainAxis === 'y' ? 'height' : 'width'; var offset = popperOffsets[mainAxis]; - var min$1 = popperOffsets[mainAxis] + overflow[mainSide]; - var max$1 = popperOffsets[mainAxis] - overflow[altSide]; + var min$1 = offset + overflow[mainSide]; + var max$1 = offset - overflow[altSide]; var additive = tether ? -popperRect[len] / 2 : 0; var minLen = variation === start ? referenceRect[len] : popperRect[len]; var maxLen = variation === start ? -popperRect[len] : -referenceRect[len]; // We need to include the arrow in the calculation so the arrow doesn't go @@ -3284,36 +3090,45 @@ // width or height) var arrowLen = within(0, referenceRect[len], arrowRect[len]); - var minOffset = isBasePlacement ? referenceRect[len] / 2 - additive - arrowLen - arrowPaddingMin - tetherOffsetValue : minLen - arrowLen - arrowPaddingMin - tetherOffsetValue; - var maxOffset = isBasePlacement ? -referenceRect[len] / 2 + additive + arrowLen + arrowPaddingMax + tetherOffsetValue : maxLen + arrowLen + arrowPaddingMax + tetherOffsetValue; + var minOffset = isBasePlacement ? referenceRect[len] / 2 - additive - arrowLen - arrowPaddingMin - normalizedTetherOffsetValue.mainAxis : minLen - arrowLen - arrowPaddingMin - normalizedTetherOffsetValue.mainAxis; + var maxOffset = isBasePlacement ? -referenceRect[len] / 2 + additive + arrowLen + arrowPaddingMax + normalizedTetherOffsetValue.mainAxis : maxLen + arrowLen + arrowPaddingMax + normalizedTetherOffsetValue.mainAxis; var arrowOffsetParent = state.elements.arrow && getOffsetParent(state.elements.arrow); var clientOffset = arrowOffsetParent ? mainAxis === 'y' ? arrowOffsetParent.clientTop || 0 : arrowOffsetParent.clientLeft || 0 : 0; - var offsetModifierValue = state.modifiersData.offset ? state.modifiersData.offset[state.placement][mainAxis] : 0; - var tetherMin = popperOffsets[mainAxis] + minOffset - offsetModifierValue - clientOffset; - var tetherMax = popperOffsets[mainAxis] + maxOffset - offsetModifierValue; + var offsetModifierValue = (_offsetModifierState$ = offsetModifierState == null ? void 0 : offsetModifierState[mainAxis]) != null ? _offsetModifierState$ : 0; + var tetherMin = offset + minOffset - offsetModifierValue - clientOffset; + var tetherMax = offset + maxOffset - offsetModifierValue; + var preventedOffset = within(tether ? min(min$1, tetherMin) : min$1, offset, tether ? max(max$1, tetherMax) : max$1); + popperOffsets[mainAxis] = preventedOffset; + data[mainAxis] = preventedOffset - offset; + } - if (checkMainAxis) { - var preventedOffset = within(tether ? min(min$1, tetherMin) : min$1, offset, tether ? max(max$1, tetherMax) : max$1); - popperOffsets[mainAxis] = preventedOffset; - data[mainAxis] = preventedOffset - offset; - } + if (checkAltAxis) { + var _offsetModifierState$2; - if (checkAltAxis) { - var _mainSide = mainAxis === 'x' ? top : left; + var _mainSide = mainAxis === 'x' ? top : left; - var _altSide = mainAxis === 'x' ? bottom : right; + var _altSide = mainAxis === 'x' ? bottom : right; - var _offset = popperOffsets[altAxis]; + var _offset = popperOffsets[altAxis]; - var _min = _offset + overflow[_mainSide]; + var _len = altAxis === 'y' ? 'height' : 'width'; - var _max = _offset - overflow[_altSide]; + var _min = _offset + overflow[_mainSide]; - var _preventedOffset = within(tether ? min(_min, tetherMin) : _min, _offset, tether ? max(_max, tetherMax) : _max); + var _max = _offset - overflow[_altSide]; - popperOffsets[altAxis] = _preventedOffset; - data[altAxis] = _preventedOffset - _offset; - } + var isOriginSide = [top, left].indexOf(basePlacement) !== -1; + + var _offsetModifierValue = (_offsetModifierState$2 = offsetModifierState == null ? void 0 : offsetModifierState[altAxis]) != null ? _offsetModifierState$2 : 0; + + var _tetherMin = isOriginSide ? _min : _offset - referenceRect[_len] - popperRect[_len] - _offsetModifierValue + normalizedTetherOffsetValue.altAxis; + + var _tetherMax = isOriginSide ? _offset + referenceRect[_len] + popperRect[_len] - _offsetModifierValue - normalizedTetherOffsetValue.altAxis : _max; + + var _preventedOffset = tether && isOriginSide ? withinMaxClamp(_tetherMin, _offset, _tetherMax) : within(tether ? _tetherMin : _min, _offset, tether ? _tetherMax : _max); + + popperOffsets[altAxis] = _preventedOffset; + data[altAxis] = _preventedOffset - _offset; } state.modifiersData[name] = data; @@ -3345,8 +3160,8 @@ function isElementScaled(element) { var rect = element.getBoundingClientRect(); - var scaleX = rect.width / element.offsetWidth || 1; - var scaleY = rect.height / element.offsetHeight || 1; + var scaleX = round(rect.width) / element.offsetWidth || 1; + var scaleY = round(rect.height) / element.offsetHeight || 1; return scaleX !== 1 || scaleY !== 1; } // Returns the composite rect of an element relative to its offsetParent. // Composite means it takes into account transforms as well as layout. @@ -3358,9 +3173,9 @@ } var isOffsetParentAnElement = isHTMLElement(offsetParent); - isHTMLElement(offsetParent) && isElementScaled(offsetParent); + var offsetParentIsScaled = isHTMLElement(offsetParent) && isElementScaled(offsetParent); var documentElement = getDocumentElement(offsetParent); - var rect = getBoundingClientRect(elementOrVirtualElement); + var rect = getBoundingClientRect(elementOrVirtualElement, offsetParentIsScaled, isFixed); var scroll = { scrollLeft: 0, scrollTop: 0 @@ -3377,7 +3192,7 @@ } if (isHTMLElement(offsetParent)) { - offsets = getBoundingClientRect(offsetParent); + offsets = getBoundingClientRect(offsetParent, true); offsets.x += offsetParent.clientLeft; offsets.y += offsetParent.clientTop; } else if (documentElement) { @@ -3528,8 +3343,7 @@ state.orderedModifiers = orderedModifiers.filter(function (m) { return m.enabled; - }); // Validate the provided modifiers so that the consumer will get warned - + }); runModifierEffects(); return instance.update(); }, @@ -3549,7 +3363,6 @@ // anymore if (!areValidElements(reference, popper)) { - return; } // Store the reference and popper rects to be read by modifiers @@ -3574,7 +3387,6 @@ }); for (var index = 0; index < state.orderedModifiers.length; index++) { - if (state.reset === true) { state.reset = false; index = -1; @@ -3612,7 +3424,6 @@ }; if (!areValidElements(reference, popper)) { - return instance; } @@ -3627,11 +3438,11 @@ // one. function runModifierEffects() { - state.orderedModifiers.forEach(function (_ref3) { - var name = _ref3.name, - _ref3$options = _ref3.options, - options = _ref3$options === void 0 ? {} : _ref3$options, - effect = _ref3.effect; + state.orderedModifiers.forEach(function (_ref) { + var name = _ref.name, + _ref$options = _ref.options, + options = _ref$options === void 0 ? {} : _ref$options, + effect = _ref.effect; if (typeof effect === 'function') { var cleanupFn = effect({ @@ -3670,86 +3481,87 @@ defaultModifiers: defaultModifiers }); // eslint-disable-next-line import/no-unused-modules - const Popper = /*#__PURE__*/Object.freeze({ + const Popper = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({ __proto__: null, - popperGenerator, - detectOverflow, - createPopperBase: createPopper$2, - createPopper, - createPopperLite: createPopper$1, - top, - bottom, - right, - left, - auto, - basePlacements, - start, - end, - clippingParents, - viewport, - popper, - reference, - variationPlacements, - placements, - beforeRead, - read, - afterRead, - beforeMain, - main, afterMain, - beforeWrite, - write, + afterRead, afterWrite, - modifierPhases, applyStyles: applyStyles$1, arrow: arrow$1, + auto, + basePlacements, + beforeMain, + beforeRead, + beforeWrite, + bottom, + clippingParents, computeStyles: computeStyles$1, + createPopper, + createPopperBase: createPopper$2, + createPopperLite: createPopper$1, + detectOverflow, + end, eventListeners, flip: flip$1, hide: hide$1, + left, + main, + modifierPhases, offset: offset$1, + placements, + popper, + popperGenerator, popperOffsets: popperOffsets$1, - preventOverflow: preventOverflow$1 - }); + preventOverflow: preventOverflow$1, + read, + reference, + right, + start, + top, + variationPlacements, + viewport, + write + }, Symbol.toStringTag, { value: 'Module' })); /** * -------------------------------------------------------------------------- - * Bootstrap (v5.1.3): dropdown.js + * Bootstrap dropdown.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ + + /** - * ------------------------------------------------------------------------ * Constants - * ------------------------------------------------------------------------ */ - const NAME$9 = 'dropdown'; - const DATA_KEY$8 = 'bs.dropdown'; - const EVENT_KEY$8 = `.${DATA_KEY$8}`; - const DATA_API_KEY$4 = '.data-api'; + const NAME$a = 'dropdown'; + const DATA_KEY$6 = 'bs.dropdown'; + const EVENT_KEY$6 = `.${DATA_KEY$6}`; + const DATA_API_KEY$3 = '.data-api'; const ESCAPE_KEY$2 = 'Escape'; - const SPACE_KEY = 'Space'; const TAB_KEY$1 = 'Tab'; - const ARROW_UP_KEY = 'ArrowUp'; - const ARROW_DOWN_KEY = 'ArrowDown'; + const ARROW_UP_KEY$1 = 'ArrowUp'; + const ARROW_DOWN_KEY$1 = 'ArrowDown'; const RIGHT_MOUSE_BUTTON = 2; // MouseEvent.button value for the secondary button, usually the right button - const REGEXP_KEYDOWN = new RegExp(`${ARROW_UP_KEY}|${ARROW_DOWN_KEY}|${ESCAPE_KEY$2}`); - const EVENT_HIDE$4 = `hide${EVENT_KEY$8}`; - const EVENT_HIDDEN$4 = `hidden${EVENT_KEY$8}`; - const EVENT_SHOW$4 = `show${EVENT_KEY$8}`; - const EVENT_SHOWN$4 = `shown${EVENT_KEY$8}`; - const EVENT_CLICK_DATA_API$3 = `click${EVENT_KEY$8}${DATA_API_KEY$4}`; - const EVENT_KEYDOWN_DATA_API = `keydown${EVENT_KEY$8}${DATA_API_KEY$4}`; - const EVENT_KEYUP_DATA_API = `keyup${EVENT_KEY$8}${DATA_API_KEY$4}`; + const EVENT_HIDE$5 = `hide${EVENT_KEY$6}`; + const EVENT_HIDDEN$5 = `hidden${EVENT_KEY$6}`; + const EVENT_SHOW$5 = `show${EVENT_KEY$6}`; + const EVENT_SHOWN$5 = `shown${EVENT_KEY$6}`; + const EVENT_CLICK_DATA_API$3 = `click${EVENT_KEY$6}${DATA_API_KEY$3}`; + const EVENT_KEYDOWN_DATA_API = `keydown${EVENT_KEY$6}${DATA_API_KEY$3}`; + const EVENT_KEYUP_DATA_API = `keyup${EVENT_KEY$6}${DATA_API_KEY$3}`; const CLASS_NAME_SHOW$6 = 'show'; const CLASS_NAME_DROPUP = 'dropup'; const CLASS_NAME_DROPEND = 'dropend'; const CLASS_NAME_DROPSTART = 'dropstart'; - const CLASS_NAME_NAVBAR = 'navbar'; - const SELECTOR_DATA_TOGGLE$3 = '[data-bs-toggle="dropdown"]'; + const CLASS_NAME_DROPUP_CENTER = 'dropup-center'; + const CLASS_NAME_DROPDOWN_CENTER = 'dropdown-center'; + const SELECTOR_DATA_TOGGLE$3 = '[data-bs-toggle="dropdown"]:not(.disabled):not(:disabled)'; + const SELECTOR_DATA_TOGGLE_SHOWN = `${SELECTOR_DATA_TOGGLE$3}.${CLASS_NAME_SHOW$6}`; const SELECTOR_MENU = '.dropdown-menu'; + const SELECTOR_NAVBAR = '.navbar'; const SELECTOR_NAVBAR_NAV = '.navbar-nav'; const SELECTOR_VISIBLE_ITEMS = '.dropdown-menu .dropdown-item:not(.disabled):not(:disabled)'; const PLACEMENT_TOP = isRTL() ? 'top-end' : 'top-start'; @@ -3758,241 +3570,190 @@ const PLACEMENT_BOTTOMEND = isRTL() ? 'bottom-start' : 'bottom-end'; const PLACEMENT_RIGHT = isRTL() ? 'left-start' : 'right-start'; const PLACEMENT_LEFT = isRTL() ? 'right-start' : 'left-start'; - const Default$8 = { - offset: [0, 2], + const PLACEMENT_TOPCENTER = 'top'; + const PLACEMENT_BOTTOMCENTER = 'bottom'; + const Default$9 = { + autoClose: true, boundary: 'clippingParents', - reference: 'toggle', display: 'dynamic', + offset: [0, 2], popperConfig: null, - autoClose: true + reference: 'toggle' }; - const DefaultType$8 = { - offset: '(array|string|function)', + const DefaultType$9 = { + autoClose: '(boolean|string)', boundary: '(string|element)', - reference: '(string|element|object)', display: 'string', + offset: '(array|string|function)', popperConfig: '(null|object|function)', - autoClose: '(boolean|string)' + reference: '(string|element|object)' }; + /** - * ------------------------------------------------------------------------ - * Class Definition - * ------------------------------------------------------------------------ + * Class definition */ class Dropdown extends BaseComponent { constructor(element, config) { - super(element); + super(element, config); this._popper = null; - this._config = this._getConfig(config); - this._menu = this._getMenuElement(); + this._parent = this._element.parentNode; // dropdown wrapper + // TODO: v6 revert #37011 & change markup https://getbootstrap.com/docs/5.3/forms/input-group/ + this._menu = SelectorEngine.next(this._element, SELECTOR_MENU)[0] || SelectorEngine.prev(this._element, SELECTOR_MENU)[0] || SelectorEngine.findOne(SELECTOR_MENU, this._parent); this._inNavbar = this._detectNavbar(); - } // Getters - + } + // Getters static get Default() { - return Default$8; + return Default$9; } - static get DefaultType() { - return DefaultType$8; + return DefaultType$9; } - static get NAME() { - return NAME$9; - } // Public - + return NAME$a; + } + // Public toggle() { return this._isShown() ? this.hide() : this.show(); } - show() { - if (isDisabled(this._element) || this._isShown(this._menu)) { + if (isDisabled(this._element) || this._isShown()) { return; } - const relatedTarget = { relatedTarget: this._element }; - const showEvent = EventHandler.trigger(this._element, EVENT_SHOW$4, relatedTarget); - + const showEvent = EventHandler.trigger(this._element, EVENT_SHOW$5, relatedTarget); if (showEvent.defaultPrevented) { return; } + this._createPopper(); - const parent = Dropdown.getParentFromElement(this._element); // Totally disable Popper for Dropdowns in Navbar - - if (this._inNavbar) { - Manipulator.setDataAttribute(this._menu, 'popper', 'none'); - } else { - this._createPopper(parent); - } // If this is a touch-enabled device we add extra + // If this is a touch-enabled device we add extra // empty mouseover listeners to the body's immediate children; // only needed because of broken event delegation on iOS // https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html - - - if ('ontouchstart' in document.documentElement && !parent.closest(SELECTOR_NAVBAR_NAV)) { - [].concat(...document.body.children).forEach(elem => EventHandler.on(elem, 'mouseover', noop)); + if ('ontouchstart' in document.documentElement && !this._parent.closest(SELECTOR_NAVBAR_NAV)) { + for (const element of [].concat(...document.body.children)) { + EventHandler.on(element, 'mouseover', noop); + } } - this._element.focus(); - this._element.setAttribute('aria-expanded', true); - this._menu.classList.add(CLASS_NAME_SHOW$6); - this._element.classList.add(CLASS_NAME_SHOW$6); - - EventHandler.trigger(this._element, EVENT_SHOWN$4, relatedTarget); + EventHandler.trigger(this._element, EVENT_SHOWN$5, relatedTarget); } - hide() { - if (isDisabled(this._element) || !this._isShown(this._menu)) { + if (isDisabled(this._element) || !this._isShown()) { return; } - const relatedTarget = { relatedTarget: this._element }; - this._completeHide(relatedTarget); } - dispose() { if (this._popper) { this._popper.destroy(); } - super.dispose(); } - update() { this._inNavbar = this._detectNavbar(); - if (this._popper) { this._popper.update(); } - } // Private - + } + // Private _completeHide(relatedTarget) { - const hideEvent = EventHandler.trigger(this._element, EVENT_HIDE$4, relatedTarget); - + const hideEvent = EventHandler.trigger(this._element, EVENT_HIDE$5, relatedTarget); if (hideEvent.defaultPrevented) { return; - } // If this is a touch-enabled device we remove the extra - // empty mouseover listeners we added for iOS support - + } + // If this is a touch-enabled device we remove the extra + // empty mouseover listeners we added for iOS support if ('ontouchstart' in document.documentElement) { - [].concat(...document.body.children).forEach(elem => EventHandler.off(elem, 'mouseover', noop)); + for (const element of [].concat(...document.body.children)) { + EventHandler.off(element, 'mouseover', noop); + } } - if (this._popper) { this._popper.destroy(); } - this._menu.classList.remove(CLASS_NAME_SHOW$6); - this._element.classList.remove(CLASS_NAME_SHOW$6); - this._element.setAttribute('aria-expanded', 'false'); - Manipulator.removeDataAttribute(this._menu, 'popper'); - EventHandler.trigger(this._element, EVENT_HIDDEN$4, relatedTarget); + EventHandler.trigger(this._element, EVENT_HIDDEN$5, relatedTarget); } - _getConfig(config) { - config = { ...this.constructor.Default, - ...Manipulator.getDataAttributes(this._element), - ...config - }; - typeCheckConfig(NAME$9, config, this.constructor.DefaultType); - + config = super._getConfig(config); if (typeof config.reference === 'object' && !isElement$1(config.reference) && typeof config.reference.getBoundingClientRect !== 'function') { // Popper virtual elements require a getBoundingClientRect method - throw new TypeError(`${NAME$9.toUpperCase()}: Option "reference" provided type "object" without a required "getBoundingClientRect" method.`); + throw new TypeError(`${NAME$a.toUpperCase()}: Option "reference" provided type "object" without a required "getBoundingClientRect" method.`); } - return config; } - - _createPopper(parent) { + _createPopper() { if (typeof Popper === 'undefined') { - throw new TypeError('Bootstrap\'s dropdowns require Popper (https://popper.js.org)'); + throw new TypeError('Bootstrap\'s dropdowns require Popper (https://popper.js.org/docs/v2/)'); } - let referenceElement = this._element; - if (this._config.reference === 'parent') { - referenceElement = parent; + referenceElement = this._parent; } else if (isElement$1(this._config.reference)) { referenceElement = getElement(this._config.reference); } else if (typeof this._config.reference === 'object') { referenceElement = this._config.reference; } - const popperConfig = this._getPopperConfig(); - - const isDisplayStatic = popperConfig.modifiers.find(modifier => modifier.name === 'applyStyles' && modifier.enabled === false); this._popper = createPopper(referenceElement, this._menu, popperConfig); - - if (isDisplayStatic) { - Manipulator.setDataAttribute(this._menu, 'popper', 'static'); - } - } - - _isShown(element = this._element) { - return element.classList.contains(CLASS_NAME_SHOW$6); } - - _getMenuElement() { - return SelectorEngine.next(this._element, SELECTOR_MENU)[0]; + _isShown() { + return this._menu.classList.contains(CLASS_NAME_SHOW$6); } - _getPlacement() { - const parentDropdown = this._element.parentNode; - + const parentDropdown = this._parent; if (parentDropdown.classList.contains(CLASS_NAME_DROPEND)) { return PLACEMENT_RIGHT; } - if (parentDropdown.classList.contains(CLASS_NAME_DROPSTART)) { return PLACEMENT_LEFT; - } // We need to trim the value because custom properties can also include spaces - + } + if (parentDropdown.classList.contains(CLASS_NAME_DROPUP_CENTER)) { + return PLACEMENT_TOPCENTER; + } + if (parentDropdown.classList.contains(CLASS_NAME_DROPDOWN_CENTER)) { + return PLACEMENT_BOTTOMCENTER; + } + // We need to trim the value because custom properties can also include spaces const isEnd = getComputedStyle(this._menu).getPropertyValue('--bs-position').trim() === 'end'; - if (parentDropdown.classList.contains(CLASS_NAME_DROPUP)) { return isEnd ? PLACEMENT_TOPEND : PLACEMENT_TOP; } - return isEnd ? PLACEMENT_BOTTOMEND : PLACEMENT_BOTTOM; } - _detectNavbar() { - return this._element.closest(`.${CLASS_NAME_NAVBAR}`) !== null; + return this._element.closest(SELECTOR_NAVBAR) !== null; } - _getOffset() { const { offset } = this._config; - if (typeof offset === 'string') { - return offset.split(',').map(val => Number.parseInt(val, 10)); + return offset.split(',').map(value => Number.parseInt(value, 10)); } - if (typeof offset === 'function') { return popperData => offset(popperData, this._element); } - return offset; } - _getPopperConfig() { const defaultBsPopperConfig = { placement: this._getPlacement(), @@ -4007,156 +3768,114 @@ offset: this._getOffset() } }] - }; // Disable Popper if we have a static display + }; - if (this._config.display === 'static') { + // Disable Popper if we have a static display or Dropdown is in Navbar + if (this._inNavbar || this._config.display === 'static') { + Manipulator.setDataAttribute(this._menu, 'popper', 'static'); // TODO: v6 remove defaultBsPopperConfig.modifiers = [{ name: 'applyStyles', enabled: false }]; } - - return { ...defaultBsPopperConfig, - ...(typeof this._config.popperConfig === 'function' ? this._config.popperConfig(defaultBsPopperConfig) : this._config.popperConfig) + return { + ...defaultBsPopperConfig, + ...execute(this._config.popperConfig, [undefined, defaultBsPopperConfig]) }; } - _selectMenuItem({ key, target }) { - const items = SelectorEngine.find(SELECTOR_VISIBLE_ITEMS, this._menu).filter(isVisible); - + const items = SelectorEngine.find(SELECTOR_VISIBLE_ITEMS, this._menu).filter(element => isVisible(element)); if (!items.length) { return; - } // if target isn't included in items (e.g. when expanding the dropdown) - // allow cycling to get the last item in case key equals ARROW_UP_KEY - - - getNextActiveElement(items, target, key === ARROW_DOWN_KEY, !items.includes(target)).focus(); - } // Static + } + // if target isn't included in items (e.g. when expanding the dropdown) + // allow cycling to get the last item in case key equals ARROW_UP_KEY + getNextActiveElement(items, target, key === ARROW_DOWN_KEY$1, !items.includes(target)).focus(); + } + // Static static jQueryInterface(config) { return this.each(function () { const data = Dropdown.getOrCreateInstance(this, config); - if (typeof config !== 'string') { return; } - if (typeof data[config] === 'undefined') { throw new TypeError(`No method named "${config}"`); } - data[config](); }); } - static clearMenus(event) { - if (event && (event.button === RIGHT_MOUSE_BUTTON || event.type === 'keyup' && event.key !== TAB_KEY$1)) { + if (event.button === RIGHT_MOUSE_BUTTON || event.type === 'keyup' && event.key !== TAB_KEY$1) { return; } - - const toggles = SelectorEngine.find(SELECTOR_DATA_TOGGLE$3); - - for (let i = 0, len = toggles.length; i < len; i++) { - const context = Dropdown.getInstance(toggles[i]); - + const openToggles = SelectorEngine.find(SELECTOR_DATA_TOGGLE_SHOWN); + for (const toggle of openToggles) { + const context = Dropdown.getInstance(toggle); if (!context || context._config.autoClose === false) { continue; } - - if (!context._isShown()) { + const composedPath = event.composedPath(); + const isMenuTarget = composedPath.includes(context._menu); + if (composedPath.includes(context._element) || context._config.autoClose === 'inside' && !isMenuTarget || context._config.autoClose === 'outside' && isMenuTarget) { continue; } + // Tab navigation through the dropdown menu or events from contained inputs shouldn't close the menu + if (context._menu.contains(event.target) && (event.type === 'keyup' && event.key === TAB_KEY$1 || /input|select|option|textarea|form/i.test(event.target.tagName))) { + continue; + } const relatedTarget = { relatedTarget: context._element }; - - if (event) { - const composedPath = event.composedPath(); - const isMenuTarget = composedPath.includes(context._menu); - - if (composedPath.includes(context._element) || context._config.autoClose === 'inside' && !isMenuTarget || context._config.autoClose === 'outside' && isMenuTarget) { - continue; - } // Tab navigation through the dropdown menu or events from contained inputs shouldn't close the menu - - - if (context._menu.contains(event.target) && (event.type === 'keyup' && event.key === TAB_KEY$1 || /input|select|option|textarea|form/i.test(event.target.tagName))) { - continue; - } - - if (event.type === 'click') { - relatedTarget.clickEvent = event; - } + if (event.type === 'click') { + relatedTarget.clickEvent = event; } - context._completeHide(relatedTarget); } } - - static getParentFromElement(element) { - return getElementFromSelector(element) || element.parentNode; - } - static dataApiKeydownHandler(event) { - // If not input/textarea: - // - And not a key in REGEXP_KEYDOWN => not a dropdown command - // If input/textarea: - // - If space key => not a dropdown command - // - If key is other than escape - // - If key is not up or down => not a dropdown command - // - If trigger inside the menu => not a dropdown command - if (/input|textarea/i.test(event.target.tagName) ? event.key === SPACE_KEY || event.key !== ESCAPE_KEY$2 && (event.key !== ARROW_DOWN_KEY && event.key !== ARROW_UP_KEY || event.target.closest(SELECTOR_MENU)) : !REGEXP_KEYDOWN.test(event.key)) { - return; - } + // If not an UP | DOWN | ESCAPE key => not a dropdown command + // If input/textarea && if key is other than ESCAPE => not a dropdown command - const isActive = this.classList.contains(CLASS_NAME_SHOW$6); - - if (!isActive && event.key === ESCAPE_KEY$2) { + const isInput = /input|textarea/i.test(event.target.tagName); + const isEscapeEvent = event.key === ESCAPE_KEY$2; + const isUpOrDownEvent = [ARROW_UP_KEY$1, ARROW_DOWN_KEY$1].includes(event.key); + if (!isUpOrDownEvent && !isEscapeEvent) { return; } - - event.preventDefault(); - event.stopPropagation(); - - if (isDisabled(this)) { + if (isInput && !isEscapeEvent) { return; } + event.preventDefault(); - const getToggleButton = this.matches(SELECTOR_DATA_TOGGLE$3) ? this : SelectorEngine.prev(this, SELECTOR_DATA_TOGGLE$3)[0]; + // TODO: v6 revert #37011 & change markup https://getbootstrap.com/docs/5.3/forms/input-group/ + const getToggleButton = this.matches(SELECTOR_DATA_TOGGLE$3) ? this : SelectorEngine.prev(this, SELECTOR_DATA_TOGGLE$3)[0] || SelectorEngine.next(this, SELECTOR_DATA_TOGGLE$3)[0] || SelectorEngine.findOne(SELECTOR_DATA_TOGGLE$3, event.delegateTarget.parentNode); const instance = Dropdown.getOrCreateInstance(getToggleButton); - - if (event.key === ESCAPE_KEY$2) { - instance.hide(); - return; - } - - if (event.key === ARROW_UP_KEY || event.key === ARROW_DOWN_KEY) { - if (!isActive) { - instance.show(); - } - + if (isUpOrDownEvent) { + event.stopPropagation(); + instance.show(); instance._selectMenuItem(event); - return; } - - if (!isActive || event.key === SPACE_KEY) { - Dropdown.clearMenus(); + if (instance._isShown()) { + // else is escape and we check if it is shown + event.stopPropagation(); + instance.hide(); + getToggleButton.focus(); } } - } + /** - * ------------------------------------------------------------------------ - * Data Api implementation - * ------------------------------------------------------------------------ + * Data API implementation */ - EventHandler.on(document, EVENT_KEYDOWN_DATA_API, SELECTOR_DATA_TOGGLE$3, Dropdown.dataApiKeydownHandler); EventHandler.on(document, EVENT_KEYDOWN_DATA_API, SELECTOR_MENU, Dropdown.dataApiKeydownHandler); EventHandler.on(document, EVENT_CLICK_DATA_API$3, Dropdown.clearMenus); @@ -4165,319 +3884,219 @@ event.preventDefault(); Dropdown.getOrCreateInstance(this).toggle(); }); + /** - * ------------------------------------------------------------------------ * jQuery - * ------------------------------------------------------------------------ - * add .Dropdown to jQuery only if jQuery is present */ defineJQueryPlugin(Dropdown); /** * -------------------------------------------------------------------------- - * Bootstrap (v5.1.3): util/scrollBar.js + * Bootstrap util/backdrop.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ - const SELECTOR_FIXED_CONTENT = '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top'; - const SELECTOR_STICKY_CONTENT = '.sticky-top'; - - class ScrollBarHelper { - constructor() { - this._element = document.body; - } - - getWidth() { - // https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth#usage_notes - const documentWidth = document.documentElement.clientWidth; - return Math.abs(window.innerWidth - documentWidth); - } - - hide() { - const width = this.getWidth(); - - this._disableOverFlow(); // give padding to element to balance the hidden scrollbar width - - - this._setElementAttributes(this._element, 'paddingRight', calculatedValue => calculatedValue + width); // trick: We adjust positive paddingRight and negative marginRight to sticky-top elements to keep showing fullwidth - - - this._setElementAttributes(SELECTOR_FIXED_CONTENT, 'paddingRight', calculatedValue => calculatedValue + width); - - this._setElementAttributes(SELECTOR_STICKY_CONTENT, 'marginRight', calculatedValue => calculatedValue - width); - } - - _disableOverFlow() { - this._saveInitialAttribute(this._element, 'overflow'); - - this._element.style.overflow = 'hidden'; - } - - _setElementAttributes(selector, styleProp, callback) { - const scrollbarWidth = this.getWidth(); - - const manipulationCallBack = element => { - if (element !== this._element && window.innerWidth > element.clientWidth + scrollbarWidth) { - return; - } - - this._saveInitialAttribute(element, styleProp); - - const calculatedValue = window.getComputedStyle(element)[styleProp]; - element.style[styleProp] = `${callback(Number.parseFloat(calculatedValue))}px`; - }; - - this._applyManipulationCallback(selector, manipulationCallBack); - } - - reset() { - this._resetElementAttributes(this._element, 'overflow'); - - this._resetElementAttributes(this._element, 'paddingRight'); - - this._resetElementAttributes(SELECTOR_FIXED_CONTENT, 'paddingRight'); - - this._resetElementAttributes(SELECTOR_STICKY_CONTENT, 'marginRight'); - } - - _saveInitialAttribute(element, styleProp) { - const actualValue = element.style[styleProp]; - - if (actualValue) { - Manipulator.setDataAttribute(element, styleProp, actualValue); - } - } - - _resetElementAttributes(selector, styleProp) { - const manipulationCallBack = element => { - const value = Manipulator.getDataAttribute(element, styleProp); - - if (typeof value === 'undefined') { - element.style.removeProperty(styleProp); - } else { - Manipulator.removeDataAttribute(element, styleProp); - element.style[styleProp] = value; - } - }; - - this._applyManipulationCallback(selector, manipulationCallBack); - } - - _applyManipulationCallback(selector, callBack) { - if (isElement$1(selector)) { - callBack(selector); - } else { - SelectorEngine.find(selector, this._element).forEach(callBack); - } - } - isOverflowing() { - return this.getWidth() > 0; - } - - } /** - * -------------------------------------------------------------------------- - * Bootstrap (v5.1.3): util/backdrop.js - * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) - * -------------------------------------------------------------------------- + * Constants */ - const Default$7 = { + + const NAME$9 = 'backdrop'; + const CLASS_NAME_FADE$4 = 'fade'; + const CLASS_NAME_SHOW$5 = 'show'; + const EVENT_MOUSEDOWN = `mousedown.bs.${NAME$9}`; + const Default$8 = { className: 'modal-backdrop', + clickCallback: null, + isAnimated: false, isVisible: true, // if false, we use the backdrop helper without adding any element to the dom - isAnimated: false, - rootElement: 'body', - // give the choice to place backdrop under different elements - clickCallback: null + rootElement: 'body' // give the choice to place backdrop under different elements }; - const DefaultType$7 = { + const DefaultType$8 = { className: 'string', - isVisible: 'boolean', + clickCallback: '(function|null)', isAnimated: 'boolean', - rootElement: '(element|string)', - clickCallback: '(function|null)' + isVisible: 'boolean', + rootElement: '(element|string)' }; - const NAME$8 = 'backdrop'; - const CLASS_NAME_FADE$4 = 'fade'; - const CLASS_NAME_SHOW$5 = 'show'; - const EVENT_MOUSEDOWN = `mousedown.bs.${NAME$8}`; - class Backdrop { + /** + * Class definition + */ + + class Backdrop extends Config { constructor(config) { + super(); this._config = this._getConfig(config); this._isAppended = false; this._element = null; } + // Getters + static get Default() { + return Default$8; + } + static get DefaultType() { + return DefaultType$8; + } + static get NAME() { + return NAME$9; + } + + // Public show(callback) { if (!this._config.isVisible) { execute(callback); return; } - this._append(); - + const element = this._getElement(); if (this._config.isAnimated) { - reflow(this._getElement()); + reflow(element); } - - this._getElement().classList.add(CLASS_NAME_SHOW$5); - + element.classList.add(CLASS_NAME_SHOW$5); this._emulateAnimation(() => { execute(callback); }); } - hide(callback) { if (!this._config.isVisible) { execute(callback); return; } - this._getElement().classList.remove(CLASS_NAME_SHOW$5); - this._emulateAnimation(() => { this.dispose(); execute(callback); }); - } // Private - + } + dispose() { + if (!this._isAppended) { + return; + } + EventHandler.off(this._element, EVENT_MOUSEDOWN); + this._element.remove(); + this._isAppended = false; + } + // Private _getElement() { if (!this._element) { const backdrop = document.createElement('div'); backdrop.className = this._config.className; - if (this._config.isAnimated) { backdrop.classList.add(CLASS_NAME_FADE$4); } - this._element = backdrop; } - return this._element; } - - _getConfig(config) { - config = { ...Default$7, - ...(typeof config === 'object' ? config : {}) - }; // use getElement() with the default "body" to get a fresh Element on each instantiation - + _configAfterMerge(config) { + // use getElement() with the default "body" to get a fresh Element on each instantiation config.rootElement = getElement(config.rootElement); - typeCheckConfig(NAME$8, config, DefaultType$7); return config; } - _append() { if (this._isAppended) { return; } - - this._config.rootElement.append(this._getElement()); - - EventHandler.on(this._getElement(), EVENT_MOUSEDOWN, () => { + const element = this._getElement(); + this._config.rootElement.append(element); + EventHandler.on(element, EVENT_MOUSEDOWN, () => { execute(this._config.clickCallback); }); this._isAppended = true; } - - dispose() { - if (!this._isAppended) { - return; - } - - EventHandler.off(this._element, EVENT_MOUSEDOWN); - - this._element.remove(); - - this._isAppended = false; - } - _emulateAnimation(callback) { executeAfterTransition(callback, this._getElement(), this._config.isAnimated); } - } /** * -------------------------------------------------------------------------- - * Bootstrap (v5.1.3): util/focustrap.js + * Bootstrap util/focustrap.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ - const Default$6 = { - trapElement: null, - // The element to trap focus inside of - autofocus: true - }; - const DefaultType$6 = { - trapElement: 'element', - autofocus: 'boolean' - }; - const NAME$7 = 'focustrap'; - const DATA_KEY$7 = 'bs.focustrap'; - const EVENT_KEY$7 = `.${DATA_KEY$7}`; - const EVENT_FOCUSIN$1 = `focusin${EVENT_KEY$7}`; - const EVENT_KEYDOWN_TAB = `keydown.tab${EVENT_KEY$7}`; + + + /** + * Constants + */ + + const NAME$8 = 'focustrap'; + const DATA_KEY$5 = 'bs.focustrap'; + const EVENT_KEY$5 = `.${DATA_KEY$5}`; + const EVENT_FOCUSIN$2 = `focusin${EVENT_KEY$5}`; + const EVENT_KEYDOWN_TAB = `keydown.tab${EVENT_KEY$5}`; const TAB_KEY = 'Tab'; const TAB_NAV_FORWARD = 'forward'; const TAB_NAV_BACKWARD = 'backward'; + const Default$7 = { + autofocus: true, + trapElement: null // The element to trap focus inside of + }; + const DefaultType$7 = { + autofocus: 'boolean', + trapElement: 'element' + }; + + /** + * Class definition + */ - class FocusTrap { + class FocusTrap extends Config { constructor(config) { + super(); this._config = this._getConfig(config); this._isActive = false; this._lastTabNavDirection = null; } - activate() { - const { - trapElement, - autofocus - } = this._config; + // Getters + static get Default() { + return Default$7; + } + static get DefaultType() { + return DefaultType$7; + } + static get NAME() { + return NAME$8; + } + // Public + activate() { if (this._isActive) { return; } - - if (autofocus) { - trapElement.focus(); + if (this._config.autofocus) { + this._config.trapElement.focus(); } - - EventHandler.off(document, EVENT_KEY$7); // guard against infinite focus loop - - EventHandler.on(document, EVENT_FOCUSIN$1, event => this._handleFocusin(event)); + EventHandler.off(document, EVENT_KEY$5); // guard against infinite focus loop + EventHandler.on(document, EVENT_FOCUSIN$2, event => this._handleFocusin(event)); EventHandler.on(document, EVENT_KEYDOWN_TAB, event => this._handleKeydown(event)); this._isActive = true; } - deactivate() { if (!this._isActive) { return; } - this._isActive = false; - EventHandler.off(document, EVENT_KEY$7); - } // Private - + EventHandler.off(document, EVENT_KEY$5); + } + // Private _handleFocusin(event) { - const { - target - } = event; const { trapElement } = this._config; - - if (target === document || target === trapElement || trapElement.contains(target)) { + if (event.target === document || event.target === trapElement || trapElement.contains(event.target)) { return; } - const elements = SelectorEngine.focusableChildren(trapElement); - if (elements.length === 0) { trapElement.focus(); } else if (this._lastTabNavDirection === TAB_NAV_BACKWARD) { @@ -4486,63 +4105,139 @@ elements[0].focus(); } } - _handleKeydown(event) { if (event.key !== TAB_KEY) { return; } - this._lastTabNavDirection = event.shiftKey ? TAB_NAV_BACKWARD : TAB_NAV_FORWARD; } + } - _getConfig(config) { - config = { ...Default$6, - ...(typeof config === 'object' ? config : {}) - }; - typeCheckConfig(NAME$7, config, DefaultType$6); - return config; + /** + * -------------------------------------------------------------------------- + * Bootstrap util/scrollBar.js + * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) + * -------------------------------------------------------------------------- + */ + + + /** + * Constants + */ + + const SELECTOR_FIXED_CONTENT = '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top'; + const SELECTOR_STICKY_CONTENT = '.sticky-top'; + const PROPERTY_PADDING = 'padding-right'; + const PROPERTY_MARGIN = 'margin-right'; + + /** + * Class definition + */ + + class ScrollBarHelper { + constructor() { + this._element = document.body; + } + + // Public + getWidth() { + // https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth#usage_notes + const documentWidth = document.documentElement.clientWidth; + return Math.abs(window.innerWidth - documentWidth); + } + hide() { + const width = this.getWidth(); + this._disableOverFlow(); + // give padding to element to balance the hidden scrollbar width + this._setElementAttributes(this._element, PROPERTY_PADDING, calculatedValue => calculatedValue + width); + // trick: We adjust positive paddingRight and negative marginRight to sticky-top elements to keep showing fullwidth + this._setElementAttributes(SELECTOR_FIXED_CONTENT, PROPERTY_PADDING, calculatedValue => calculatedValue + width); + this._setElementAttributes(SELECTOR_STICKY_CONTENT, PROPERTY_MARGIN, calculatedValue => calculatedValue - width); + } + reset() { + this._resetElementAttributes(this._element, 'overflow'); + this._resetElementAttributes(this._element, PROPERTY_PADDING); + this._resetElementAttributes(SELECTOR_FIXED_CONTENT, PROPERTY_PADDING); + this._resetElementAttributes(SELECTOR_STICKY_CONTENT, PROPERTY_MARGIN); + } + isOverflowing() { + return this.getWidth() > 0; } + // Private + _disableOverFlow() { + this._saveInitialAttribute(this._element, 'overflow'); + this._element.style.overflow = 'hidden'; + } + _setElementAttributes(selector, styleProperty, callback) { + const scrollbarWidth = this.getWidth(); + const manipulationCallBack = element => { + if (element !== this._element && window.innerWidth > element.clientWidth + scrollbarWidth) { + return; + } + this._saveInitialAttribute(element, styleProperty); + const calculatedValue = window.getComputedStyle(element).getPropertyValue(styleProperty); + element.style.setProperty(styleProperty, `${callback(Number.parseFloat(calculatedValue))}px`); + }; + this._applyManipulationCallback(selector, manipulationCallBack); + } + _saveInitialAttribute(element, styleProperty) { + const actualValue = element.style.getPropertyValue(styleProperty); + if (actualValue) { + Manipulator.setDataAttribute(element, styleProperty, actualValue); + } + } + _resetElementAttributes(selector, styleProperty) { + const manipulationCallBack = element => { + const value = Manipulator.getDataAttribute(element, styleProperty); + // We only want to remove the property if the value is `null`; the value can also be zero + if (value === null) { + element.style.removeProperty(styleProperty); + return; + } + Manipulator.removeDataAttribute(element, styleProperty); + element.style.setProperty(styleProperty, value); + }; + this._applyManipulationCallback(selector, manipulationCallBack); + } + _applyManipulationCallback(selector, callBack) { + if (isElement$1(selector)) { + callBack(selector); + return; + } + for (const sel of SelectorEngine.find(selector, this._element)) { + callBack(sel); + } + } } /** * -------------------------------------------------------------------------- - * Bootstrap (v5.1.3): modal.js + * Bootstrap modal.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ + + /** - * ------------------------------------------------------------------------ * Constants - * ------------------------------------------------------------------------ */ - const NAME$6 = 'modal'; - const DATA_KEY$6 = 'bs.modal'; - const EVENT_KEY$6 = `.${DATA_KEY$6}`; - const DATA_API_KEY$3 = '.data-api'; + const NAME$7 = 'modal'; + const DATA_KEY$4 = 'bs.modal'; + const EVENT_KEY$4 = `.${DATA_KEY$4}`; + const DATA_API_KEY$2 = '.data-api'; const ESCAPE_KEY$1 = 'Escape'; - const Default$5 = { - backdrop: true, - keyboard: true, - focus: true - }; - const DefaultType$5 = { - backdrop: '(boolean|string)', - keyboard: 'boolean', - focus: 'boolean' - }; - const EVENT_HIDE$3 = `hide${EVENT_KEY$6}`; - const EVENT_HIDE_PREVENTED = `hidePrevented${EVENT_KEY$6}`; - const EVENT_HIDDEN$3 = `hidden${EVENT_KEY$6}`; - const EVENT_SHOW$3 = `show${EVENT_KEY$6}`; - const EVENT_SHOWN$3 = `shown${EVENT_KEY$6}`; - const EVENT_RESIZE = `resize${EVENT_KEY$6}`; - const EVENT_CLICK_DISMISS = `click.dismiss${EVENT_KEY$6}`; - const EVENT_KEYDOWN_DISMISS$1 = `keydown.dismiss${EVENT_KEY$6}`; - const EVENT_MOUSEUP_DISMISS = `mouseup.dismiss${EVENT_KEY$6}`; - const EVENT_MOUSEDOWN_DISMISS = `mousedown.dismiss${EVENT_KEY$6}`; - const EVENT_CLICK_DATA_API$2 = `click${EVENT_KEY$6}${DATA_API_KEY$3}`; + const EVENT_HIDE$4 = `hide${EVENT_KEY$4}`; + const EVENT_HIDE_PREVENTED$1 = `hidePrevented${EVENT_KEY$4}`; + const EVENT_HIDDEN$4 = `hidden${EVENT_KEY$4}`; + const EVENT_SHOW$4 = `show${EVENT_KEY$4}`; + const EVENT_SHOWN$4 = `shown${EVENT_KEY$4}`; + const EVENT_RESIZE$1 = `resize${EVENT_KEY$4}`; + const EVENT_CLICK_DISMISS = `click.dismiss${EVENT_KEY$4}`; + const EVENT_MOUSEDOWN_DISMISS = `mousedown.dismiss${EVENT_KEY$4}`; + const EVENT_KEYDOWN_DISMISS$1 = `keydown.dismiss${EVENT_KEY$4}`; + const EVENT_CLICK_DATA_API$2 = `click${EVENT_KEY$4}${DATA_API_KEY$2}`; const CLASS_NAME_OPEN = 'modal-open'; const CLASS_NAME_FADE$3 = 'fade'; const CLASS_NAME_SHOW$4 = 'show'; @@ -4551,690 +4246,516 @@ const SELECTOR_DIALOG = '.modal-dialog'; const SELECTOR_MODAL_BODY = '.modal-body'; const SELECTOR_DATA_TOGGLE$2 = '[data-bs-toggle="modal"]'; + const Default$6 = { + backdrop: true, + focus: true, + keyboard: true + }; + const DefaultType$6 = { + backdrop: '(boolean|string)', + focus: 'boolean', + keyboard: 'boolean' + }; + /** - * ------------------------------------------------------------------------ - * Class Definition - * ------------------------------------------------------------------------ + * Class definition */ class Modal extends BaseComponent { constructor(element, config) { - super(element); - this._config = this._getConfig(config); + super(element, config); this._dialog = SelectorEngine.findOne(SELECTOR_DIALOG, this._element); this._backdrop = this._initializeBackDrop(); this._focustrap = this._initializeFocusTrap(); this._isShown = false; - this._ignoreBackdropClick = false; this._isTransitioning = false; this._scrollBar = new ScrollBarHelper(); - } // Getters - + this._addEventListeners(); + } + // Getters static get Default() { - return Default$5; + return Default$6; + } + static get DefaultType() { + return DefaultType$6; } - static get NAME() { - return NAME$6; - } // Public - + return NAME$7; + } + // Public toggle(relatedTarget) { return this._isShown ? this.hide() : this.show(relatedTarget); } - show(relatedTarget) { if (this._isShown || this._isTransitioning) { return; } - - const showEvent = EventHandler.trigger(this._element, EVENT_SHOW$3, { + const showEvent = EventHandler.trigger(this._element, EVENT_SHOW$4, { relatedTarget }); - if (showEvent.defaultPrevented) { return; } - this._isShown = true; - - if (this._isAnimated()) { - this._isTransitioning = true; - } - + this._isTransitioning = true; this._scrollBar.hide(); - document.body.classList.add(CLASS_NAME_OPEN); - this._adjustDialog(); - - this._setEscapeEvent(); - - this._setResizeEvent(); - - EventHandler.on(this._dialog, EVENT_MOUSEDOWN_DISMISS, () => { - EventHandler.one(this._element, EVENT_MOUSEUP_DISMISS, event => { - if (event.target === this._element) { - this._ignoreBackdropClick = true; - } - }); - }); - - this._showBackdrop(() => this._showElement(relatedTarget)); + this._backdrop.show(() => this._showElement(relatedTarget)); } - hide() { if (!this._isShown || this._isTransitioning) { return; } - - const hideEvent = EventHandler.trigger(this._element, EVENT_HIDE$3); - + const hideEvent = EventHandler.trigger(this._element, EVENT_HIDE$4); if (hideEvent.defaultPrevented) { return; } - this._isShown = false; - - const isAnimated = this._isAnimated(); - - if (isAnimated) { - this._isTransitioning = true; - } - - this._setEscapeEvent(); - - this._setResizeEvent(); - + this._isTransitioning = true; this._focustrap.deactivate(); - this._element.classList.remove(CLASS_NAME_SHOW$4); - - EventHandler.off(this._element, EVENT_CLICK_DISMISS); - EventHandler.off(this._dialog, EVENT_MOUSEDOWN_DISMISS); - - this._queueCallback(() => this._hideModal(), this._element, isAnimated); + this._queueCallback(() => this._hideModal(), this._element, this._isAnimated()); } - dispose() { - [window, this._dialog].forEach(htmlElement => EventHandler.off(htmlElement, EVENT_KEY$6)); - + EventHandler.off(window, EVENT_KEY$4); + EventHandler.off(this._dialog, EVENT_KEY$4); this._backdrop.dispose(); - this._focustrap.deactivate(); - super.dispose(); } - handleUpdate() { this._adjustDialog(); - } // Private - + } + // Private _initializeBackDrop() { return new Backdrop({ isVisible: Boolean(this._config.backdrop), - // 'static' option will be translated to true, and booleans will keep their value + // 'static' option will be translated to true, and booleans will keep their value, isAnimated: this._isAnimated() }); } - _initializeFocusTrap() { return new FocusTrap({ trapElement: this._element }); } - - _getConfig(config) { - config = { ...Default$5, - ...Manipulator.getDataAttributes(this._element), - ...(typeof config === 'object' ? config : {}) - }; - typeCheckConfig(NAME$6, config, DefaultType$5); - return config; - } - _showElement(relatedTarget) { - const isAnimated = this._isAnimated(); - - const modalBody = SelectorEngine.findOne(SELECTOR_MODAL_BODY, this._dialog); - - if (!this._element.parentNode || this._element.parentNode.nodeType !== Node.ELEMENT_NODE) { - // Don't move modal's DOM position + // try to append dynamic modal + if (!document.body.contains(this._element)) { document.body.append(this._element); } - this._element.style.display = 'block'; - this._element.removeAttribute('aria-hidden'); - this._element.setAttribute('aria-modal', true); - this._element.setAttribute('role', 'dialog'); - this._element.scrollTop = 0; - + const modalBody = SelectorEngine.findOne(SELECTOR_MODAL_BODY, this._dialog); if (modalBody) { modalBody.scrollTop = 0; } - - if (isAnimated) { - reflow(this._element); - } - + reflow(this._element); this._element.classList.add(CLASS_NAME_SHOW$4); - const transitionComplete = () => { if (this._config.focus) { this._focustrap.activate(); } - this._isTransitioning = false; - EventHandler.trigger(this._element, EVENT_SHOWN$3, { + EventHandler.trigger(this._element, EVENT_SHOWN$4, { relatedTarget }); }; - - this._queueCallback(transitionComplete, this._dialog, isAnimated); + this._queueCallback(transitionComplete, this._dialog, this._isAnimated()); } - - _setEscapeEvent() { - if (this._isShown) { - EventHandler.on(this._element, EVENT_KEYDOWN_DISMISS$1, event => { - if (this._config.keyboard && event.key === ESCAPE_KEY$1) { - event.preventDefault(); - this.hide(); - } else if (!this._config.keyboard && event.key === ESCAPE_KEY$1) { + _addEventListeners() { + EventHandler.on(this._element, EVENT_KEYDOWN_DISMISS$1, event => { + if (event.key !== ESCAPE_KEY$1) { + return; + } + if (this._config.keyboard) { + this.hide(); + return; + } + this._triggerBackdropTransition(); + }); + EventHandler.on(window, EVENT_RESIZE$1, () => { + if (this._isShown && !this._isTransitioning) { + this._adjustDialog(); + } + }); + EventHandler.on(this._element, EVENT_MOUSEDOWN_DISMISS, event => { + // a bad trick to segregate clicks that may start inside dialog but end outside, and avoid listen to scrollbar clicks + EventHandler.one(this._element, EVENT_CLICK_DISMISS, event2 => { + if (this._element !== event.target || this._element !== event2.target) { + return; + } + if (this._config.backdrop === 'static') { this._triggerBackdropTransition(); + return; + } + if (this._config.backdrop) { + this.hide(); } }); - } else { - EventHandler.off(this._element, EVENT_KEYDOWN_DISMISS$1); - } - } - - _setResizeEvent() { - if (this._isShown) { - EventHandler.on(window, EVENT_RESIZE, () => this._adjustDialog()); - } else { - EventHandler.off(window, EVENT_RESIZE); - } + }); } - _hideModal() { this._element.style.display = 'none'; - this._element.setAttribute('aria-hidden', true); - - this._element.removeAttribute('aria-modal'); - - this._element.removeAttribute('role'); - - this._isTransitioning = false; - - this._backdrop.hide(() => { - document.body.classList.remove(CLASS_NAME_OPEN); - - this._resetAdjustments(); - - this._scrollBar.reset(); - - EventHandler.trigger(this._element, EVENT_HIDDEN$3); - }); - } - - _showBackdrop(callback) { - EventHandler.on(this._element, EVENT_CLICK_DISMISS, event => { - if (this._ignoreBackdropClick) { - this._ignoreBackdropClick = false; - return; - } - - if (event.target !== event.currentTarget) { - return; - } - - if (this._config.backdrop === true) { - this.hide(); - } else if (this._config.backdrop === 'static') { - this._triggerBackdropTransition(); - } + this._element.removeAttribute('aria-modal'); + this._element.removeAttribute('role'); + this._isTransitioning = false; + this._backdrop.hide(() => { + document.body.classList.remove(CLASS_NAME_OPEN); + this._resetAdjustments(); + this._scrollBar.reset(); + EventHandler.trigger(this._element, EVENT_HIDDEN$4); }); - - this._backdrop.show(callback); } - _isAnimated() { return this._element.classList.contains(CLASS_NAME_FADE$3); } - _triggerBackdropTransition() { - const hideEvent = EventHandler.trigger(this._element, EVENT_HIDE_PREVENTED); - + const hideEvent = EventHandler.trigger(this._element, EVENT_HIDE_PREVENTED$1); if (hideEvent.defaultPrevented) { return; } - - const { - classList, - scrollHeight, - style - } = this._element; - const isModalOverflowing = scrollHeight > document.documentElement.clientHeight; // return if the following background transition hasn't yet completed - - if (!isModalOverflowing && style.overflowY === 'hidden' || classList.contains(CLASS_NAME_STATIC)) { + const isModalOverflowing = this._element.scrollHeight > document.documentElement.clientHeight; + const initialOverflowY = this._element.style.overflowY; + // return if the following background transition hasn't yet completed + if (initialOverflowY === 'hidden' || this._element.classList.contains(CLASS_NAME_STATIC)) { return; } - if (!isModalOverflowing) { - style.overflowY = 'hidden'; + this._element.style.overflowY = 'hidden'; } - - classList.add(CLASS_NAME_STATIC); - + this._element.classList.add(CLASS_NAME_STATIC); this._queueCallback(() => { - classList.remove(CLASS_NAME_STATIC); - - if (!isModalOverflowing) { - this._queueCallback(() => { - style.overflowY = ''; - }, this._dialog); - } + this._element.classList.remove(CLASS_NAME_STATIC); + this._queueCallback(() => { + this._element.style.overflowY = initialOverflowY; + }, this._dialog); }, this._dialog); - this._element.focus(); - } // ---------------------------------------------------------------------- - // the following methods are used to handle overflowing modals - // ---------------------------------------------------------------------- + } + /** + * The following methods are used to handle overflowing modals + */ _adjustDialog() { const isModalOverflowing = this._element.scrollHeight > document.documentElement.clientHeight; - const scrollbarWidth = this._scrollBar.getWidth(); - const isBodyOverflowing = scrollbarWidth > 0; - - if (!isBodyOverflowing && isModalOverflowing && !isRTL() || isBodyOverflowing && !isModalOverflowing && isRTL()) { - this._element.style.paddingLeft = `${scrollbarWidth}px`; + if (isBodyOverflowing && !isModalOverflowing) { + const property = isRTL() ? 'paddingLeft' : 'paddingRight'; + this._element.style[property] = `${scrollbarWidth}px`; } - - if (isBodyOverflowing && !isModalOverflowing && !isRTL() || !isBodyOverflowing && isModalOverflowing && isRTL()) { - this._element.style.paddingRight = `${scrollbarWidth}px`; + if (!isBodyOverflowing && isModalOverflowing) { + const property = isRTL() ? 'paddingRight' : 'paddingLeft'; + this._element.style[property] = `${scrollbarWidth}px`; } } - _resetAdjustments() { this._element.style.paddingLeft = ''; this._element.style.paddingRight = ''; - } // Static - + } + // Static static jQueryInterface(config, relatedTarget) { return this.each(function () { const data = Modal.getOrCreateInstance(this, config); - if (typeof config !== 'string') { return; } - if (typeof data[config] === 'undefined') { throw new TypeError(`No method named "${config}"`); } - data[config](relatedTarget); }); } - } + /** - * ------------------------------------------------------------------------ - * Data Api implementation - * ------------------------------------------------------------------------ + * Data API implementation */ - EventHandler.on(document, EVENT_CLICK_DATA_API$2, SELECTOR_DATA_TOGGLE$2, function (event) { - const target = getElementFromSelector(this); - + const target = SelectorEngine.getElementFromSelector(this); if (['A', 'AREA'].includes(this.tagName)) { event.preventDefault(); } - - EventHandler.one(target, EVENT_SHOW$3, showEvent => { + EventHandler.one(target, EVENT_SHOW$4, showEvent => { if (showEvent.defaultPrevented) { // only register focus restorer if modal will actually get shown return; } - - EventHandler.one(target, EVENT_HIDDEN$3, () => { + EventHandler.one(target, EVENT_HIDDEN$4, () => { if (isVisible(this)) { this.focus(); } }); - }); // avoid conflict when clicking moddal toggler while another one is open - - const allReadyOpen = SelectorEngine.findOne(OPEN_SELECTOR$1); + }); - if (allReadyOpen) { - Modal.getInstance(allReadyOpen).hide(); + // avoid conflict when clicking modal toggler while another one is open + const alreadyOpen = SelectorEngine.findOne(OPEN_SELECTOR$1); + if (alreadyOpen) { + Modal.getInstance(alreadyOpen).hide(); } - const data = Modal.getOrCreateInstance(target); data.toggle(this); }); enableDismissTrigger(Modal); + /** - * ------------------------------------------------------------------------ * jQuery - * ------------------------------------------------------------------------ - * add .Modal to jQuery only if jQuery is present */ defineJQueryPlugin(Modal); /** * -------------------------------------------------------------------------- - * Bootstrap (v5.1.3): offcanvas.js + * Bootstrap offcanvas.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ + + /** - * ------------------------------------------------------------------------ * Constants - * ------------------------------------------------------------------------ */ - const NAME$5 = 'offcanvas'; - const DATA_KEY$5 = 'bs.offcanvas'; - const EVENT_KEY$5 = `.${DATA_KEY$5}`; - const DATA_API_KEY$2 = '.data-api'; - const EVENT_LOAD_DATA_API$1 = `load${EVENT_KEY$5}${DATA_API_KEY$2}`; + const NAME$6 = 'offcanvas'; + const DATA_KEY$3 = 'bs.offcanvas'; + const EVENT_KEY$3 = `.${DATA_KEY$3}`; + const DATA_API_KEY$1 = '.data-api'; + const EVENT_LOAD_DATA_API$2 = `load${EVENT_KEY$3}${DATA_API_KEY$1}`; const ESCAPE_KEY = 'Escape'; - const Default$4 = { + const CLASS_NAME_SHOW$3 = 'show'; + const CLASS_NAME_SHOWING$1 = 'showing'; + const CLASS_NAME_HIDING = 'hiding'; + const CLASS_NAME_BACKDROP = 'offcanvas-backdrop'; + const OPEN_SELECTOR = '.offcanvas.show'; + const EVENT_SHOW$3 = `show${EVENT_KEY$3}`; + const EVENT_SHOWN$3 = `shown${EVENT_KEY$3}`; + const EVENT_HIDE$3 = `hide${EVENT_KEY$3}`; + const EVENT_HIDE_PREVENTED = `hidePrevented${EVENT_KEY$3}`; + const EVENT_HIDDEN$3 = `hidden${EVENT_KEY$3}`; + const EVENT_RESIZE = `resize${EVENT_KEY$3}`; + const EVENT_CLICK_DATA_API$1 = `click${EVENT_KEY$3}${DATA_API_KEY$1}`; + const EVENT_KEYDOWN_DISMISS = `keydown.dismiss${EVENT_KEY$3}`; + const SELECTOR_DATA_TOGGLE$1 = '[data-bs-toggle="offcanvas"]'; + const Default$5 = { backdrop: true, keyboard: true, scroll: false }; - const DefaultType$4 = { - backdrop: 'boolean', + const DefaultType$5 = { + backdrop: '(boolean|string)', keyboard: 'boolean', scroll: 'boolean' }; - const CLASS_NAME_SHOW$3 = 'show'; - const CLASS_NAME_BACKDROP = 'offcanvas-backdrop'; - const OPEN_SELECTOR = '.offcanvas.show'; - const EVENT_SHOW$2 = `show${EVENT_KEY$5}`; - const EVENT_SHOWN$2 = `shown${EVENT_KEY$5}`; - const EVENT_HIDE$2 = `hide${EVENT_KEY$5}`; - const EVENT_HIDDEN$2 = `hidden${EVENT_KEY$5}`; - const EVENT_CLICK_DATA_API$1 = `click${EVENT_KEY$5}${DATA_API_KEY$2}`; - const EVENT_KEYDOWN_DISMISS = `keydown.dismiss${EVENT_KEY$5}`; - const SELECTOR_DATA_TOGGLE$1 = '[data-bs-toggle="offcanvas"]'; + /** - * ------------------------------------------------------------------------ - * Class Definition - * ------------------------------------------------------------------------ + * Class definition */ class Offcanvas extends BaseComponent { constructor(element, config) { - super(element); - this._config = this._getConfig(config); + super(element, config); this._isShown = false; this._backdrop = this._initializeBackDrop(); this._focustrap = this._initializeFocusTrap(); - this._addEventListeners(); - } // Getters - - - static get NAME() { - return NAME$5; } + // Getters static get Default() { - return Default$4; - } // Public - + return Default$5; + } + static get DefaultType() { + return DefaultType$5; + } + static get NAME() { + return NAME$6; + } + // Public toggle(relatedTarget) { return this._isShown ? this.hide() : this.show(relatedTarget); } - show(relatedTarget) { if (this._isShown) { return; } - - const showEvent = EventHandler.trigger(this._element, EVENT_SHOW$2, { + const showEvent = EventHandler.trigger(this._element, EVENT_SHOW$3, { relatedTarget }); - if (showEvent.defaultPrevented) { return; } - this._isShown = true; - this._element.style.visibility = 'visible'; - this._backdrop.show(); - if (!this._config.scroll) { new ScrollBarHelper().hide(); } - - this._element.removeAttribute('aria-hidden'); - this._element.setAttribute('aria-modal', true); - this._element.setAttribute('role', 'dialog'); - - this._element.classList.add(CLASS_NAME_SHOW$3); - + this._element.classList.add(CLASS_NAME_SHOWING$1); const completeCallBack = () => { - if (!this._config.scroll) { + if (!this._config.scroll || this._config.backdrop) { this._focustrap.activate(); } - - EventHandler.trigger(this._element, EVENT_SHOWN$2, { + this._element.classList.add(CLASS_NAME_SHOW$3); + this._element.classList.remove(CLASS_NAME_SHOWING$1); + EventHandler.trigger(this._element, EVENT_SHOWN$3, { relatedTarget }); }; - this._queueCallback(completeCallBack, this._element, true); } - hide() { if (!this._isShown) { return; } - - const hideEvent = EventHandler.trigger(this._element, EVENT_HIDE$2); - + const hideEvent = EventHandler.trigger(this._element, EVENT_HIDE$3); if (hideEvent.defaultPrevented) { return; } - this._focustrap.deactivate(); - this._element.blur(); - this._isShown = false; - - this._element.classList.remove(CLASS_NAME_SHOW$3); - + this._element.classList.add(CLASS_NAME_HIDING); this._backdrop.hide(); - const completeCallback = () => { - this._element.setAttribute('aria-hidden', true); - + this._element.classList.remove(CLASS_NAME_SHOW$3, CLASS_NAME_HIDING); this._element.removeAttribute('aria-modal'); - this._element.removeAttribute('role'); - - this._element.style.visibility = 'hidden'; - if (!this._config.scroll) { new ScrollBarHelper().reset(); } - - EventHandler.trigger(this._element, EVENT_HIDDEN$2); + EventHandler.trigger(this._element, EVENT_HIDDEN$3); }; - this._queueCallback(completeCallback, this._element, true); } - dispose() { this._backdrop.dispose(); - this._focustrap.deactivate(); - super.dispose(); - } // Private - - - _getConfig(config) { - config = { ...Default$4, - ...Manipulator.getDataAttributes(this._element), - ...(typeof config === 'object' ? config : {}) - }; - typeCheckConfig(NAME$5, config, DefaultType$4); - return config; } + // Private _initializeBackDrop() { + const clickCallback = () => { + if (this._config.backdrop === 'static') { + EventHandler.trigger(this._element, EVENT_HIDE_PREVENTED); + return; + } + this.hide(); + }; + + // 'static' option will be translated to true, and booleans will keep their value + const isVisible = Boolean(this._config.backdrop); return new Backdrop({ className: CLASS_NAME_BACKDROP, - isVisible: this._config.backdrop, + isVisible, isAnimated: true, rootElement: this._element.parentNode, - clickCallback: () => this.hide() + clickCallback: isVisible ? clickCallback : null }); } - _initializeFocusTrap() { return new FocusTrap({ trapElement: this._element }); } - _addEventListeners() { EventHandler.on(this._element, EVENT_KEYDOWN_DISMISS, event => { - if (this._config.keyboard && event.key === ESCAPE_KEY) { + if (event.key !== ESCAPE_KEY) { + return; + } + if (this._config.keyboard) { this.hide(); + return; } + EventHandler.trigger(this._element, EVENT_HIDE_PREVENTED); }); - } // Static - + } + // Static static jQueryInterface(config) { return this.each(function () { const data = Offcanvas.getOrCreateInstance(this, config); - if (typeof config !== 'string') { return; } - if (data[config] === undefined || config.startsWith('_') || config === 'constructor') { throw new TypeError(`No method named "${config}"`); } - data[config](this); }); } - } + /** - * ------------------------------------------------------------------------ - * Data Api implementation - * ------------------------------------------------------------------------ + * Data API implementation */ - EventHandler.on(document, EVENT_CLICK_DATA_API$1, SELECTOR_DATA_TOGGLE$1, function (event) { - const target = getElementFromSelector(this); - + const target = SelectorEngine.getElementFromSelector(this); if (['A', 'AREA'].includes(this.tagName)) { event.preventDefault(); } - if (isDisabled(this)) { return; } - - EventHandler.one(target, EVENT_HIDDEN$2, () => { + EventHandler.one(target, EVENT_HIDDEN$3, () => { // focus on trigger when it is closed if (isVisible(this)) { this.focus(); } - }); // avoid conflict when clicking a toggler of an offcanvas, while another is open - - const allReadyOpen = SelectorEngine.findOne(OPEN_SELECTOR); + }); - if (allReadyOpen && allReadyOpen !== target) { - Offcanvas.getInstance(allReadyOpen).hide(); + // avoid conflict when clicking a toggler of an offcanvas, while another is open + const alreadyOpen = SelectorEngine.findOne(OPEN_SELECTOR); + if (alreadyOpen && alreadyOpen !== target) { + Offcanvas.getInstance(alreadyOpen).hide(); } - const data = Offcanvas.getOrCreateInstance(target); data.toggle(this); }); - EventHandler.on(window, EVENT_LOAD_DATA_API$1, () => SelectorEngine.find(OPEN_SELECTOR).forEach(el => Offcanvas.getOrCreateInstance(el).show())); + EventHandler.on(window, EVENT_LOAD_DATA_API$2, () => { + for (const selector of SelectorEngine.find(OPEN_SELECTOR)) { + Offcanvas.getOrCreateInstance(selector).show(); + } + }); + EventHandler.on(window, EVENT_RESIZE, () => { + for (const element of SelectorEngine.find('[aria-modal][class*=show][class*=offcanvas-]')) { + if (getComputedStyle(element).position !== 'fixed') { + Offcanvas.getOrCreateInstance(element).hide(); + } + } + }); enableDismissTrigger(Offcanvas); + /** - * ------------------------------------------------------------------------ * jQuery - * ------------------------------------------------------------------------ */ defineJQueryPlugin(Offcanvas); /** * -------------------------------------------------------------------------- - * Bootstrap (v5.1.3): util/sanitizer.js + * Bootstrap util/sanitizer.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ - const uriAttributes = new Set(['background', 'cite', 'href', 'itemtype', 'longdesc', 'poster', 'src', 'xlink:href']); - const ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i; - /** - * A pattern that recognizes a commonly useful subset of URLs that are safe. - * - * Shoutout to Angular https://github.com/angular/angular/blob/12.2.x/packages/core/src/sanitization/url_sanitizer.ts - */ - - const SAFE_URL_PATTERN = /^(?:(?:https?|mailto|ftp|tel|file|sms):|[^#&/:?]*(?:[#/?]|$))/i; - /** - * A pattern that matches safe data URLs. Only matches image, video and audio types. - * - * Shoutout to Angular https://github.com/angular/angular/blob/12.2.x/packages/core/src/sanitization/url_sanitizer.ts - */ - - const DATA_URL_PATTERN = /^data:(?:image\/(?:bmp|gif|jpeg|jpg|png|tiff|webp)|video\/(?:mpeg|mp4|ogg|webm)|audio\/(?:mp3|oga|ogg|opus));base64,[\d+/a-z]+=*$/i; - - const allowedAttribute = (attribute, allowedAttributeList) => { - const attributeName = attribute.nodeName.toLowerCase(); - - if (allowedAttributeList.includes(attributeName)) { - if (uriAttributes.has(attributeName)) { - return Boolean(SAFE_URL_PATTERN.test(attribute.nodeValue) || DATA_URL_PATTERN.test(attribute.nodeValue)); - } - - return true; - } - - const regExp = allowedAttributeList.filter(attributeRegex => attributeRegex instanceof RegExp); // Check if a regular expression validates the attribute. - - for (let i = 0, len = regExp.length; i < len; i++) { - if (regExp[i].test(attributeName)) { - return true; - } - } - - return false; - }; + // js-docs-start allow-list + const ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i; const DefaultAllowlist = { // Global attributes allowed on any supplied element below. '*': ['class', 'dir', 'id', 'lang', 'role', ARIA_ATTRIBUTE_PATTERN], @@ -5244,7 +4765,10 @@ br: [], col: [], code: [], + dd: [], div: [], + dl: [], + dt: [], em: [], hr: [], h1: [], @@ -5268,76 +4792,226 @@ u: [], ul: [] }; - function sanitizeHtml(unsafeHtml, allowList, sanitizeFn) { + // js-docs-end allow-list + + const uriAttributes = new Set(['background', 'cite', 'href', 'itemtype', 'longdesc', 'poster', 'src', 'xlink:href']); + + /** + * A pattern that recognizes URLs that are safe wrt. XSS in URL navigation + * contexts. + * + * Shout-out to Angular https://github.com/angular/angular/blob/15.2.8/packages/core/src/sanitization/url_sanitizer.ts#L38 + */ + const SAFE_URL_PATTERN = /^(?!javascript:)(?:[a-z0-9+.-]+:|[^&:/?#]*(?:[/?#]|$))/i; + const allowedAttribute = (attribute, allowedAttributeList) => { + const attributeName = attribute.nodeName.toLowerCase(); + if (allowedAttributeList.includes(attributeName)) { + if (uriAttributes.has(attributeName)) { + return Boolean(SAFE_URL_PATTERN.test(attribute.nodeValue)); + } + return true; + } + + // Check if a regular expression validates the attribute. + return allowedAttributeList.filter(attributeRegex => attributeRegex instanceof RegExp).some(regex => regex.test(attributeName)); + }; + function sanitizeHtml(unsafeHtml, allowList, sanitizeFunction) { if (!unsafeHtml.length) { return unsafeHtml; } + if (sanitizeFunction && typeof sanitizeFunction === 'function') { + return sanitizeFunction(unsafeHtml); + } + const domParser = new window.DOMParser(); + const createdDocument = domParser.parseFromString(unsafeHtml, 'text/html'); + const elements = [].concat(...createdDocument.body.querySelectorAll('*')); + for (const element of elements) { + const elementName = element.nodeName.toLowerCase(); + if (!Object.keys(allowList).includes(elementName)) { + element.remove(); + continue; + } + const attributeList = [].concat(...element.attributes); + const allowedAttributes = [].concat(allowList['*'] || [], allowList[elementName] || []); + for (const attribute of attributeList) { + if (!allowedAttribute(attribute, allowedAttributes)) { + element.removeAttribute(attribute.nodeName); + } + } + } + return createdDocument.body.innerHTML; + } + + /** + * -------------------------------------------------------------------------- + * Bootstrap util/template-factory.js + * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) + * -------------------------------------------------------------------------- + */ + + + /** + * Constants + */ + + const NAME$5 = 'TemplateFactory'; + const Default$4 = { + allowList: DefaultAllowlist, + content: {}, + // { selector : text , selector2 : text2 , } + extraClass: '', + html: false, + sanitize: true, + sanitizeFn: null, + template: '
' + }; + const DefaultType$4 = { + allowList: 'object', + content: 'object', + extraClass: '(string|function)', + html: 'boolean', + sanitize: 'boolean', + sanitizeFn: '(null|function)', + template: 'string' + }; + const DefaultContentType = { + entry: '(string|element|function|null)', + selector: '(string|element)' + }; + + /** + * Class definition + */ + + class TemplateFactory extends Config { + constructor(config) { + super(); + this._config = this._getConfig(config); + } + + // Getters + static get Default() { + return Default$4; + } + static get DefaultType() { + return DefaultType$4; + } + static get NAME() { + return NAME$5; + } - if (sanitizeFn && typeof sanitizeFn === 'function') { - return sanitizeFn(unsafeHtml); + // Public + getContent() { + return Object.values(this._config.content).map(config => this._resolvePossibleFunction(config)).filter(Boolean); } - - const domParser = new window.DOMParser(); - const createdDocument = domParser.parseFromString(unsafeHtml, 'text/html'); - const elements = [].concat(...createdDocument.body.querySelectorAll('*')); - - for (let i = 0, len = elements.length; i < len; i++) { - const element = elements[i]; - const elementName = element.nodeName.toLowerCase(); - - if (!Object.keys(allowList).includes(elementName)) { - element.remove(); - continue; + hasContent() { + return this.getContent().length > 0; + } + changeContent(content) { + this._checkContent(content); + this._config.content = { + ...this._config.content, + ...content + }; + return this; + } + toHtml() { + const templateWrapper = document.createElement('div'); + templateWrapper.innerHTML = this._maybeSanitize(this._config.template); + for (const [selector, text] of Object.entries(this._config.content)) { + this._setContent(templateWrapper, text, selector); } - - const attributeList = [].concat(...element.attributes); - const allowedAttributes = [].concat(allowList['*'] || [], allowList[elementName] || []); - attributeList.forEach(attribute => { - if (!allowedAttribute(attribute, allowedAttributes)) { - element.removeAttribute(attribute.nodeName); - } - }); + const template = templateWrapper.children[0]; + const extraClass = this._resolvePossibleFunction(this._config.extraClass); + if (extraClass) { + template.classList.add(...extraClass.split(' ')); + } + return template; } - return createdDocument.body.innerHTML; + // Private + _typeCheckConfig(config) { + super._typeCheckConfig(config); + this._checkContent(config.content); + } + _checkContent(arg) { + for (const [selector, content] of Object.entries(arg)) { + super._typeCheckConfig({ + selector, + entry: content + }, DefaultContentType); + } + } + _setContent(template, content, selector) { + const templateElement = SelectorEngine.findOne(selector, template); + if (!templateElement) { + return; + } + content = this._resolvePossibleFunction(content); + if (!content) { + templateElement.remove(); + return; + } + if (isElement$1(content)) { + this._putElementInTemplate(getElement(content), templateElement); + return; + } + if (this._config.html) { + templateElement.innerHTML = this._maybeSanitize(content); + return; + } + templateElement.textContent = content; + } + _maybeSanitize(arg) { + return this._config.sanitize ? sanitizeHtml(arg, this._config.allowList, this._config.sanitizeFn) : arg; + } + _resolvePossibleFunction(arg) { + return execute(arg, [undefined, this]); + } + _putElementInTemplate(element, templateElement) { + if (this._config.html) { + templateElement.innerHTML = ''; + templateElement.append(element); + return; + } + templateElement.textContent = element.textContent; + } } /** * -------------------------------------------------------------------------- - * Bootstrap (v5.1.3): tooltip.js + * Bootstrap tooltip.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ + + /** - * ------------------------------------------------------------------------ * Constants - * ------------------------------------------------------------------------ */ const NAME$4 = 'tooltip'; - const DATA_KEY$4 = 'bs.tooltip'; - const EVENT_KEY$4 = `.${DATA_KEY$4}`; - const CLASS_PREFIX$1 = 'bs-tooltip'; const DISALLOWED_ATTRIBUTES = new Set(['sanitize', 'allowList', 'sanitizeFn']); - const DefaultType$3 = { - animation: 'boolean', - template: 'string', - title: '(string|element|function)', - trigger: 'string', - delay: '(number|object)', - html: 'boolean', - selector: '(string|boolean)', - placement: '(string|function)', - offset: '(array|string|function)', - container: '(string|element|boolean)', - fallbackPlacements: 'array', - boundary: '(string|element)', - customClass: '(string|function)', - sanitize: 'boolean', - sanitizeFn: '(null|function)', - allowList: 'object', - popperConfig: '(null|object|function)' - }; + const CLASS_NAME_FADE$2 = 'fade'; + const CLASS_NAME_MODAL = 'modal'; + const CLASS_NAME_SHOW$2 = 'show'; + const SELECTOR_TOOLTIP_INNER = '.tooltip-inner'; + const SELECTOR_MODAL = `.${CLASS_NAME_MODAL}`; + const EVENT_MODAL_HIDE = 'hide.bs.modal'; + const TRIGGER_HOVER = 'hover'; + const TRIGGER_FOCUS = 'focus'; + const TRIGGER_CLICK = 'click'; + const TRIGGER_MANUAL = 'manual'; + const EVENT_HIDE$2 = 'hide'; + const EVENT_HIDDEN$2 = 'hidden'; + const EVENT_SHOW$2 = 'show'; + const EVENT_SHOWN$2 = 'shown'; + const EVENT_INSERTED = 'inserted'; + const EVENT_CLICK$1 = 'click'; + const EVENT_FOCUSIN$1 = 'focusin'; + const EVENT_FOCUSOUT$1 = 'focusout'; + const EVENT_MOUSEENTER = 'mouseenter'; + const EVENT_MOUSELEAVE = 'mouseleave'; const AttachmentMap = { AUTO: 'auto', TOP: 'top', @@ -5346,397 +5020,286 @@ LEFT: isRTL() ? 'right' : 'left' }; const Default$3 = { + allowList: DefaultAllowlist, animation: true, - template: '', - trigger: 'hover focus', - title: '', + boundary: 'clippingParents', + container: false, + customClass: '', delay: 0, + fallbackPlacements: ['top', 'right', 'bottom', 'left'], html: false, - selector: false, + offset: [0, 6], placement: 'top', - offset: [0, 0], - container: false, - fallbackPlacements: ['top', 'right', 'bottom', 'left'], - boundary: 'clippingParents', - customClass: '', + popperConfig: null, sanitize: true, sanitizeFn: null, - allowList: DefaultAllowlist, - popperConfig: null + selector: false, + template: '', + title: '', + trigger: 'hover focus' }; - const Event$2 = { - HIDE: `hide${EVENT_KEY$4}`, - HIDDEN: `hidden${EVENT_KEY$4}`, - SHOW: `show${EVENT_KEY$4}`, - SHOWN: `shown${EVENT_KEY$4}`, - INSERTED: `inserted${EVENT_KEY$4}`, - CLICK: `click${EVENT_KEY$4}`, - FOCUSIN: `focusin${EVENT_KEY$4}`, - FOCUSOUT: `focusout${EVENT_KEY$4}`, - MOUSEENTER: `mouseenter${EVENT_KEY$4}`, - MOUSELEAVE: `mouseleave${EVENT_KEY$4}` + const DefaultType$3 = { + allowList: 'object', + animation: 'boolean', + boundary: '(string|element)', + container: '(string|element|boolean)', + customClass: '(string|function)', + delay: '(number|object)', + fallbackPlacements: 'array', + html: 'boolean', + offset: '(array|string|function)', + placement: '(string|function)', + popperConfig: '(null|object|function)', + sanitize: 'boolean', + sanitizeFn: '(null|function)', + selector: '(string|boolean)', + template: 'string', + title: '(string|element|function)', + trigger: 'string' }; - const CLASS_NAME_FADE$2 = 'fade'; - const CLASS_NAME_MODAL = 'modal'; - const CLASS_NAME_SHOW$2 = 'show'; - const HOVER_STATE_SHOW = 'show'; - const HOVER_STATE_OUT = 'out'; - const SELECTOR_TOOLTIP_INNER = '.tooltip-inner'; - const SELECTOR_MODAL = `.${CLASS_NAME_MODAL}`; - const EVENT_MODAL_HIDE = 'hide.bs.modal'; - const TRIGGER_HOVER = 'hover'; - const TRIGGER_FOCUS = 'focus'; - const TRIGGER_CLICK = 'click'; - const TRIGGER_MANUAL = 'manual'; + /** - * ------------------------------------------------------------------------ - * Class Definition - * ------------------------------------------------------------------------ + * Class definition */ class Tooltip extends BaseComponent { constructor(element, config) { if (typeof Popper === 'undefined') { - throw new TypeError('Bootstrap\'s tooltips require Popper (https://popper.js.org)'); + throw new TypeError('Bootstrap\'s tooltips require Popper (https://popper.js.org/docs/v2/)'); } + super(element, config); - super(element); // private - + // Private this._isEnabled = true; this._timeout = 0; - this._hoverState = ''; + this._isHovered = null; this._activeTrigger = {}; - this._popper = null; // Protected + this._popper = null; + this._templateFactory = null; + this._newContent = null; - this._config = this._getConfig(config); + // Protected this.tip = null; - this._setListeners(); - } // Getters - + if (!this._config.selector) { + this._fixTitle(); + } + } + // Getters static get Default() { return Default$3; } - + static get DefaultType() { + return DefaultType$3; + } static get NAME() { return NAME$4; } - static get Event() { - return Event$2; - } - - static get DefaultType() { - return DefaultType$3; - } // Public - - + // Public enable() { this._isEnabled = true; } - disable() { this._isEnabled = false; } - toggleEnabled() { this._isEnabled = !this._isEnabled; } - - toggle(event) { + toggle() { if (!this._isEnabled) { return; } - - if (event) { - const context = this._initializeOnDelegatedTarget(event); - - context._activeTrigger.click = !context._activeTrigger.click; - - if (context._isWithActiveTrigger()) { - context._enter(null, context); - } else { - context._leave(null, context); - } - } else { - if (this.getTipElement().classList.contains(CLASS_NAME_SHOW$2)) { - this._leave(null, this); - - return; - } - - this._enter(null, this); + if (this._isShown()) { + this._leave(); + return; } + this._enter(); } - dispose() { clearTimeout(this._timeout); EventHandler.off(this._element.closest(SELECTOR_MODAL), EVENT_MODAL_HIDE, this._hideModalHandler); - - if (this.tip) { - this.tip.remove(); + if (this._element.getAttribute('data-bs-original-title')) { + this._element.setAttribute('title', this._element.getAttribute('data-bs-original-title')); } - this._disposePopper(); - super.dispose(); } - show() { if (this._element.style.display === 'none') { throw new Error('Please use show on visible elements'); } - - if (!(this.isWithContent() && this._isEnabled)) { + if (!(this._isWithContent() && this._isEnabled)) { return; } - - const showEvent = EventHandler.trigger(this._element, this.constructor.Event.SHOW); + const showEvent = EventHandler.trigger(this._element, this.constructor.eventName(EVENT_SHOW$2)); const shadowRoot = findShadowRoot(this._element); - const isInTheDom = shadowRoot === null ? this._element.ownerDocument.documentElement.contains(this._element) : shadowRoot.contains(this._element); - + const isInTheDom = (shadowRoot || this._element.ownerDocument.documentElement).contains(this._element); if (showEvent.defaultPrevented || !isInTheDom) { return; - } // A trick to recreate a tooltip in case a new title is given by using the NOT documented `data-bs-original-title` - // This will be removed later in favor of a `setContent` method - - - if (this.constructor.NAME === 'tooltip' && this.tip && this.getTitle() !== this.tip.querySelector(SELECTOR_TOOLTIP_INNER).innerHTML) { - this._disposePopper(); - - this.tip.remove(); - this.tip = null; - } - - const tip = this.getTipElement(); - const tipId = getUID(this.constructor.NAME); - tip.setAttribute('id', tipId); - - this._element.setAttribute('aria-describedby', tipId); - - if (this._config.animation) { - tip.classList.add(CLASS_NAME_FADE$2); } - const placement = typeof this._config.placement === 'function' ? this._config.placement.call(this, tip, this._element) : this._config.placement; - - const attachment = this._getAttachment(placement); - - this._addAttachmentClass(attachment); - + // TODO: v6 remove this or make it optional + this._disposePopper(); + const tip = this._getTipElement(); + this._element.setAttribute('aria-describedby', tip.getAttribute('id')); const { container } = this._config; - Data.set(tip, this.constructor.DATA_KEY, this); - if (!this._element.ownerDocument.documentElement.contains(this.tip)) { container.append(tip); - EventHandler.trigger(this._element, this.constructor.Event.INSERTED); - } - - if (this._popper) { - this._popper.update(); - } else { - this._popper = createPopper(this._element, tip, this._getPopperConfig(attachment)); + EventHandler.trigger(this._element, this.constructor.eventName(EVENT_INSERTED)); } - + this._popper = this._createPopper(tip); tip.classList.add(CLASS_NAME_SHOW$2); - const customClass = this._resolvePossibleFunction(this._config.customClass); - - if (customClass) { - tip.classList.add(...customClass.split(' ')); - } // If this is a touch-enabled device we add extra + // If this is a touch-enabled device we add extra // empty mouseover listeners to the body's immediate children; // only needed because of broken event delegation on iOS // https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html - - if ('ontouchstart' in document.documentElement) { - [].concat(...document.body.children).forEach(element => { + for (const element of [].concat(...document.body.children)) { EventHandler.on(element, 'mouseover', noop); - }); - } - - const complete = () => { - const prevHoverState = this._hoverState; - this._hoverState = null; - EventHandler.trigger(this._element, this.constructor.Event.SHOWN); - - if (prevHoverState === HOVER_STATE_OUT) { - this._leave(null, this); } - }; - - const isAnimated = this.tip.classList.contains(CLASS_NAME_FADE$2); - - this._queueCallback(complete, this.tip, isAnimated); - } - - hide() { - if (!this._popper) { - return; } - - const tip = this.getTipElement(); - const complete = () => { - if (this._isWithActiveTrigger()) { - return; - } - - if (this._hoverState !== HOVER_STATE_SHOW) { - tip.remove(); + EventHandler.trigger(this._element, this.constructor.eventName(EVENT_SHOWN$2)); + if (this._isHovered === false) { + this._leave(); } - - this._cleanTipClass(); - - this._element.removeAttribute('aria-describedby'); - - EventHandler.trigger(this._element, this.constructor.Event.HIDDEN); - - this._disposePopper(); + this._isHovered = false; }; - - const hideEvent = EventHandler.trigger(this._element, this.constructor.Event.HIDE); - - if (hideEvent.defaultPrevented) { - return; - } - - tip.classList.remove(CLASS_NAME_SHOW$2); // If this is a touch-enabled device we remove the extra - // empty mouseover listeners we added for iOS support - - if ('ontouchstart' in document.documentElement) { - [].concat(...document.body.children).forEach(element => EventHandler.off(element, 'mouseover', noop)); - } - - this._activeTrigger[TRIGGER_CLICK] = false; - this._activeTrigger[TRIGGER_FOCUS] = false; - this._activeTrigger[TRIGGER_HOVER] = false; - const isAnimated = this.tip.classList.contains(CLASS_NAME_FADE$2); - - this._queueCallback(complete, this.tip, isAnimated); - - this._hoverState = ''; - } - - update() { - if (this._popper !== null) { - this._popper.update(); - } - } // Protected - - - isWithContent() { - return Boolean(this.getTitle()); - } - - getTipElement() { - if (this.tip) { - return this.tip; - } - - const element = document.createElement('div'); - element.innerHTML = this._config.template; - const tip = element.children[0]; - this.setContent(tip); - tip.classList.remove(CLASS_NAME_FADE$2, CLASS_NAME_SHOW$2); - this.tip = tip; - return this.tip; - } - - setContent(tip) { - this._sanitizeAndSetContent(tip, this.getTitle(), SELECTOR_TOOLTIP_INNER); + this._queueCallback(complete, this.tip, this._isAnimated()); } - - _sanitizeAndSetContent(template, content, selector) { - const templateElement = SelectorEngine.findOne(selector, template); - - if (!content && templateElement) { - templateElement.remove(); + hide() { + if (!this._isShown()) { return; - } // we use append for html objects to maintain js events - - - this.setElementContent(templateElement, content); - } - - setElementContent(element, content) { - if (element === null) { + } + const hideEvent = EventHandler.trigger(this._element, this.constructor.eventName(EVENT_HIDE$2)); + if (hideEvent.defaultPrevented) { return; } + const tip = this._getTipElement(); + tip.classList.remove(CLASS_NAME_SHOW$2); - if (isElement$1(content)) { - content = getElement(content); // content is a DOM node or a jQuery - - if (this._config.html) { - if (content.parentNode !== element) { - element.innerHTML = ''; - element.append(content); - } - } else { - element.textContent = content.textContent; + // If this is a touch-enabled device we remove the extra + // empty mouseover listeners we added for iOS support + if ('ontouchstart' in document.documentElement) { + for (const element of [].concat(...document.body.children)) { + EventHandler.off(element, 'mouseover', noop); } - - return; } + this._activeTrigger[TRIGGER_CLICK] = false; + this._activeTrigger[TRIGGER_FOCUS] = false; + this._activeTrigger[TRIGGER_HOVER] = false; + this._isHovered = null; // it is a trick to support manual triggering - if (this._config.html) { - if (this._config.sanitize) { - content = sanitizeHtml(content, this._config.allowList, this._config.sanitizeFn); + const complete = () => { + if (this._isWithActiveTrigger()) { + return; } - - element.innerHTML = content; - } else { - element.textContent = content; + if (!this._isHovered) { + this._disposePopper(); + } + this._element.removeAttribute('aria-describedby'); + EventHandler.trigger(this._element, this.constructor.eventName(EVENT_HIDDEN$2)); + }; + this._queueCallback(complete, this.tip, this._isAnimated()); + } + update() { + if (this._popper) { + this._popper.update(); } } - getTitle() { - const title = this._element.getAttribute('data-bs-original-title') || this._config.title; - - return this._resolvePossibleFunction(title); + // Protected + _isWithContent() { + return Boolean(this._getTitle()); } - - updateAttachment(attachment) { - if (attachment === 'right') { - return 'end'; + _getTipElement() { + if (!this.tip) { + this.tip = this._createTipElement(this._newContent || this._getContentForTemplate()); } + return this.tip; + } + _createTipElement(content) { + const tip = this._getTemplateFactory(content).toHtml(); - if (attachment === 'left') { - return 'start'; + // TODO: remove this check in v6 + if (!tip) { + return null; } - - return attachment; - } // Private - - - _initializeOnDelegatedTarget(event, context) { - return context || this.constructor.getOrCreateInstance(event.delegateTarget, this._getDelegateConfig()); + tip.classList.remove(CLASS_NAME_FADE$2, CLASS_NAME_SHOW$2); + // TODO: v6 the following can be achieved with CSS only + tip.classList.add(`bs-${this.constructor.NAME}-auto`); + const tipId = getUID(this.constructor.NAME).toString(); + tip.setAttribute('id', tipId); + if (this._isAnimated()) { + tip.classList.add(CLASS_NAME_FADE$2); + } + return tip; + } + setContent(content) { + this._newContent = content; + if (this._isShown()) { + this._disposePopper(); + this.show(); + } + } + _getTemplateFactory(content) { + if (this._templateFactory) { + this._templateFactory.changeContent(content); + } else { + this._templateFactory = new TemplateFactory({ + ...this._config, + // the `content` var has to be after `this._config` + // to override config.content in case of popover + content, + extraClass: this._resolvePossibleFunction(this._config.customClass) + }); + } + return this._templateFactory; + } + _getContentForTemplate() { + return { + [SELECTOR_TOOLTIP_INNER]: this._getTitle() + }; + } + _getTitle() { + return this._resolvePossibleFunction(this._config.title) || this._element.getAttribute('data-bs-original-title'); } + // Private + _initializeOnDelegatedTarget(event) { + return this.constructor.getOrCreateInstance(event.delegateTarget, this._getDelegateConfig()); + } + _isAnimated() { + return this._config.animation || this.tip && this.tip.classList.contains(CLASS_NAME_FADE$2); + } + _isShown() { + return this.tip && this.tip.classList.contains(CLASS_NAME_SHOW$2); + } + _createPopper(tip) { + const placement = execute(this._config.placement, [this, tip, this._element]); + const attachment = AttachmentMap[placement.toUpperCase()]; + return createPopper(this._element, tip, this._getPopperConfig(attachment)); + } _getOffset() { const { offset } = this._config; - if (typeof offset === 'string') { - return offset.split(',').map(val => Number.parseInt(val, 10)); + return offset.split(',').map(value => Number.parseInt(value, 10)); } - if (typeof offset === 'function') { return popperData => offset(popperData, this._element); } - return offset; } - - _resolvePossibleFunction(content) { - return typeof content === 'function' ? content.call(this._element) : content; + _resolvePossibleFunction(arg) { + return execute(arg, [this._element, this._element]); } - _getPopperConfig(attachment) { const defaultBsPopperConfig = { placement: attachment, @@ -5761,301 +5324,202 @@ element: `.${this.constructor.NAME}-arrow` } }, { - name: 'onChange', + name: 'preSetPlacement', enabled: true, - phase: 'afterWrite', - fn: data => this._handlePopperPlacementChange(data) - }], - onFirstUpdate: data => { - if (data.options.placement !== data.placement) { - this._handlePopperPlacementChange(data); + phase: 'beforeMain', + fn: data => { + // Pre-set Popper's placement attribute in order to read the arrow sizes properly. + // Otherwise, Popper mixes up the width and height dimensions since the initial arrow style is for top placement + this._getTipElement().setAttribute('data-popper-placement', data.state.placement); } - } + }] }; - return { ...defaultBsPopperConfig, - ...(typeof this._config.popperConfig === 'function' ? this._config.popperConfig(defaultBsPopperConfig) : this._config.popperConfig) + return { + ...defaultBsPopperConfig, + ...execute(this._config.popperConfig, [undefined, defaultBsPopperConfig]) }; } - - _addAttachmentClass(attachment) { - this.getTipElement().classList.add(`${this._getBasicClassPrefix()}-${this.updateAttachment(attachment)}`); - } - - _getAttachment(placement) { - return AttachmentMap[placement.toUpperCase()]; - } - _setListeners() { const triggers = this._config.trigger.split(' '); - - triggers.forEach(trigger => { + for (const trigger of triggers) { if (trigger === 'click') { - EventHandler.on(this._element, this.constructor.Event.CLICK, this._config.selector, event => this.toggle(event)); + EventHandler.on(this._element, this.constructor.eventName(EVENT_CLICK$1), this._config.selector, event => { + const context = this._initializeOnDelegatedTarget(event); + context._activeTrigger[TRIGGER_CLICK] = !(context._isShown() && context._activeTrigger[TRIGGER_CLICK]); + context.toggle(); + }); } else if (trigger !== TRIGGER_MANUAL) { - const eventIn = trigger === TRIGGER_HOVER ? this.constructor.Event.MOUSEENTER : this.constructor.Event.FOCUSIN; - const eventOut = trigger === TRIGGER_HOVER ? this.constructor.Event.MOUSELEAVE : this.constructor.Event.FOCUSOUT; - EventHandler.on(this._element, eventIn, this._config.selector, event => this._enter(event)); - EventHandler.on(this._element, eventOut, this._config.selector, event => this._leave(event)); + const eventIn = trigger === TRIGGER_HOVER ? this.constructor.eventName(EVENT_MOUSEENTER) : this.constructor.eventName(EVENT_FOCUSIN$1); + const eventOut = trigger === TRIGGER_HOVER ? this.constructor.eventName(EVENT_MOUSELEAVE) : this.constructor.eventName(EVENT_FOCUSOUT$1); + EventHandler.on(this._element, eventIn, this._config.selector, event => { + const context = this._initializeOnDelegatedTarget(event); + context._activeTrigger[event.type === 'focusin' ? TRIGGER_FOCUS : TRIGGER_HOVER] = true; + context._enter(); + }); + EventHandler.on(this._element, eventOut, this._config.selector, event => { + const context = this._initializeOnDelegatedTarget(event); + context._activeTrigger[event.type === 'focusout' ? TRIGGER_FOCUS : TRIGGER_HOVER] = context._element.contains(event.relatedTarget); + context._leave(); + }); } - }); - + } this._hideModalHandler = () => { if (this._element) { this.hide(); } }; - EventHandler.on(this._element.closest(SELECTOR_MODAL), EVENT_MODAL_HIDE, this._hideModalHandler); - - if (this._config.selector) { - this._config = { ...this._config, - trigger: 'manual', - selector: '' - }; - } else { - this._fixTitle(); - } } - _fixTitle() { const title = this._element.getAttribute('title'); - - const originalTitleType = typeof this._element.getAttribute('data-bs-original-title'); - - if (title || originalTitleType !== 'string') { - this._element.setAttribute('data-bs-original-title', title || ''); - - if (title && !this._element.getAttribute('aria-label') && !this._element.textContent) { - this._element.setAttribute('aria-label', title); - } - - this._element.setAttribute('title', ''); - } - } - - _enter(event, context) { - context = this._initializeOnDelegatedTarget(event, context); - - if (event) { - context._activeTrigger[event.type === 'focusin' ? TRIGGER_FOCUS : TRIGGER_HOVER] = true; - } - - if (context.getTipElement().classList.contains(CLASS_NAME_SHOW$2) || context._hoverState === HOVER_STATE_SHOW) { - context._hoverState = HOVER_STATE_SHOW; + if (!title) { return; } - - clearTimeout(context._timeout); - context._hoverState = HOVER_STATE_SHOW; - - if (!context._config.delay || !context._config.delay.show) { - context.show(); - return; + if (!this._element.getAttribute('aria-label') && !this._element.textContent.trim()) { + this._element.setAttribute('aria-label', title); } - - context._timeout = setTimeout(() => { - if (context._hoverState === HOVER_STATE_SHOW) { - context.show(); - } - }, context._config.delay.show); + this._element.setAttribute('data-bs-original-title', title); // DO NOT USE IT. Is only for backwards compatibility + this._element.removeAttribute('title'); } - - _leave(event, context) { - context = this._initializeOnDelegatedTarget(event, context); - - if (event) { - context._activeTrigger[event.type === 'focusout' ? TRIGGER_FOCUS : TRIGGER_HOVER] = context._element.contains(event.relatedTarget); - } - - if (context._isWithActiveTrigger()) { + _enter() { + if (this._isShown() || this._isHovered) { + this._isHovered = true; return; } - - clearTimeout(context._timeout); - context._hoverState = HOVER_STATE_OUT; - - if (!context._config.delay || !context._config.delay.hide) { - context.hide(); + this._isHovered = true; + this._setTimeout(() => { + if (this._isHovered) { + this.show(); + } + }, this._config.delay.show); + } + _leave() { + if (this._isWithActiveTrigger()) { return; } - - context._timeout = setTimeout(() => { - if (context._hoverState === HOVER_STATE_OUT) { - context.hide(); + this._isHovered = false; + this._setTimeout(() => { + if (!this._isHovered) { + this.hide(); } - }, context._config.delay.hide); + }, this._config.delay.hide); + } + _setTimeout(handler, timeout) { + clearTimeout(this._timeout); + this._timeout = setTimeout(handler, timeout); } - _isWithActiveTrigger() { - for (const trigger in this._activeTrigger) { - if (this._activeTrigger[trigger]) { - return true; - } - } - - return false; + return Object.values(this._activeTrigger).includes(true); } - _getConfig(config) { const dataAttributes = Manipulator.getDataAttributes(this._element); - Object.keys(dataAttributes).forEach(dataAttr => { - if (DISALLOWED_ATTRIBUTES.has(dataAttr)) { - delete dataAttributes[dataAttr]; + for (const dataAttribute of Object.keys(dataAttributes)) { + if (DISALLOWED_ATTRIBUTES.has(dataAttribute)) { + delete dataAttributes[dataAttribute]; } - }); - config = { ...this.constructor.Default, + } + config = { ...dataAttributes, ...(typeof config === 'object' && config ? config : {}) }; + config = this._mergeConfigObj(config); + config = this._configAfterMerge(config); + this._typeCheckConfig(config); + return config; + } + _configAfterMerge(config) { config.container = config.container === false ? document.body : getElement(config.container); - if (typeof config.delay === 'number') { config.delay = { show: config.delay, hide: config.delay }; } - if (typeof config.title === 'number') { config.title = config.title.toString(); } - if (typeof config.content === 'number') { config.content = config.content.toString(); } - - typeCheckConfig(NAME$4, config, this.constructor.DefaultType); - - if (config.sanitize) { - config.template = sanitizeHtml(config.template, config.allowList, config.sanitizeFn); - } - return config; } - _getDelegateConfig() { const config = {}; - - for (const key in this._config) { - if (this.constructor.Default[key] !== this._config[key]) { - config[key] = this._config[key]; + for (const [key, value] of Object.entries(this._config)) { + if (this.constructor.Default[key] !== value) { + config[key] = value; } - } // In the future can be replaced with: + } + config.selector = false; + config.trigger = 'manual'; + + // In the future can be replaced with: // const keysWithDifferentValues = Object.entries(this._config).filter(entry => this.constructor.Default[entry[0]] !== this._config[entry[0]]) // `Object.fromEntries(keysWithDifferentValues)` - - return config; } - - _cleanTipClass() { - const tip = this.getTipElement(); - const basicClassPrefixRegex = new RegExp(`(^|\\s)${this._getBasicClassPrefix()}\\S+`, 'g'); - const tabClass = tip.getAttribute('class').match(basicClassPrefixRegex); - - if (tabClass !== null && tabClass.length > 0) { - tabClass.map(token => token.trim()).forEach(tClass => tip.classList.remove(tClass)); - } - } - - _getBasicClassPrefix() { - return CLASS_PREFIX$1; - } - - _handlePopperPlacementChange(popperData) { - const { - state - } = popperData; - - if (!state) { - return; - } - - this.tip = state.elements.popper; - - this._cleanTipClass(); - - this._addAttachmentClass(this._getAttachment(state.placement)); - } - _disposePopper() { if (this._popper) { this._popper.destroy(); - this._popper = null; } - } // Static - + if (this.tip) { + this.tip.remove(); + this.tip = null; + } + } + // Static static jQueryInterface(config) { return this.each(function () { const data = Tooltip.getOrCreateInstance(this, config); - - if (typeof config === 'string') { - if (typeof data[config] === 'undefined') { - throw new TypeError(`No method named "${config}"`); - } - - data[config](); + if (typeof config !== 'string') { + return; + } + if (typeof data[config] === 'undefined') { + throw new TypeError(`No method named "${config}"`); } + data[config](); }); } - } + /** - * ------------------------------------------------------------------------ * jQuery - * ------------------------------------------------------------------------ - * add .Tooltip to jQuery only if jQuery is present */ - defineJQueryPlugin(Tooltip); /** * -------------------------------------------------------------------------- - * Bootstrap (v5.1.3): popover.js + * Bootstrap popover.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ + + /** - * ------------------------------------------------------------------------ * Constants - * ------------------------------------------------------------------------ */ const NAME$3 = 'popover'; - const DATA_KEY$3 = 'bs.popover'; - const EVENT_KEY$3 = `.${DATA_KEY$3}`; - const CLASS_PREFIX = 'bs-popover'; - const Default$2 = { ...Tooltip.Default, - placement: 'right', - offset: [0, 8], - trigger: 'click', + const SELECTOR_TITLE = '.popover-header'; + const SELECTOR_CONTENT = '.popover-body'; + const Default$2 = { + ...Tooltip.Default, content: '', - template: '' - }; - const DefaultType$2 = { ...Tooltip.DefaultType, - content: '(string|element|function)' + offset: [0, 8], + placement: 'right', + template: '', + trigger: 'click' }; - const Event$1 = { - HIDE: `hide${EVENT_KEY$3}`, - HIDDEN: `hidden${EVENT_KEY$3}`, - SHOW: `show${EVENT_KEY$3}`, - SHOWN: `shown${EVENT_KEY$3}`, - INSERTED: `inserted${EVENT_KEY$3}`, - CLICK: `click${EVENT_KEY$3}`, - FOCUSIN: `focusin${EVENT_KEY$3}`, - FOCUSOUT: `focusout${EVENT_KEY$3}`, - MOUSEENTER: `mouseenter${EVENT_KEY$3}`, - MOUSELEAVE: `mouseleave${EVENT_KEY$3}` + const DefaultType$2 = { + ...Tooltip.DefaultType, + content: '(null|string|element|function)' }; - const SELECTOR_TITLE = '.popover-header'; - const SELECTOR_CONTENT = '.popover-body'; + /** - * ------------------------------------------------------------------------ - * Class Definition - * ------------------------------------------------------------------------ + * Class definition */ class Popover extends Tooltip { @@ -6063,508 +5527,590 @@ static get Default() { return Default$2; } - + static get DefaultType() { + return DefaultType$2; + } static get NAME() { return NAME$3; } - static get Event() { - return Event$1; + // Overrides + _isWithContent() { + return this._getTitle() || this._getContent(); } - static get DefaultType() { - return DefaultType$2; - } // Overrides - - - isWithContent() { - return this.getTitle() || this._getContent(); + // Private + _getContentForTemplate() { + return { + [SELECTOR_TITLE]: this._getTitle(), + [SELECTOR_CONTENT]: this._getContent() + }; } - - setContent(tip) { - this._sanitizeAndSetContent(tip, this.getTitle(), SELECTOR_TITLE); - - this._sanitizeAndSetContent(tip, this._getContent(), SELECTOR_CONTENT); - } // Private - - _getContent() { return this._resolvePossibleFunction(this._config.content); } - _getBasicClassPrefix() { - return CLASS_PREFIX; - } // Static - - + // Static static jQueryInterface(config) { return this.each(function () { const data = Popover.getOrCreateInstance(this, config); - - if (typeof config === 'string') { - if (typeof data[config] === 'undefined') { - throw new TypeError(`No method named "${config}"`); - } - - data[config](); + if (typeof config !== 'string') { + return; } + if (typeof data[config] === 'undefined') { + throw new TypeError(`No method named "${config}"`); + } + data[config](); }); } - } + /** - * ------------------------------------------------------------------------ * jQuery - * ------------------------------------------------------------------------ - * add .Popover to jQuery only if jQuery is present */ - defineJQueryPlugin(Popover); /** * -------------------------------------------------------------------------- - * Bootstrap (v5.1.3): scrollspy.js + * Bootstrap scrollspy.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ + + /** - * ------------------------------------------------------------------------ * Constants - * ------------------------------------------------------------------------ */ const NAME$2 = 'scrollspy'; const DATA_KEY$2 = 'bs.scrollspy'; const EVENT_KEY$2 = `.${DATA_KEY$2}`; - const DATA_API_KEY$1 = '.data-api'; - const Default$1 = { - offset: 10, - method: 'auto', - target: '' - }; - const DefaultType$1 = { - offset: 'number', - method: 'string', - target: '(string|element)' - }; + const DATA_API_KEY = '.data-api'; const EVENT_ACTIVATE = `activate${EVENT_KEY$2}`; - const EVENT_SCROLL = `scroll${EVENT_KEY$2}`; - const EVENT_LOAD_DATA_API = `load${EVENT_KEY$2}${DATA_API_KEY$1}`; + const EVENT_CLICK = `click${EVENT_KEY$2}`; + const EVENT_LOAD_DATA_API$1 = `load${EVENT_KEY$2}${DATA_API_KEY}`; const CLASS_NAME_DROPDOWN_ITEM = 'dropdown-item'; const CLASS_NAME_ACTIVE$1 = 'active'; const SELECTOR_DATA_SPY = '[data-bs-spy="scroll"]'; - const SELECTOR_NAV_LIST_GROUP$1 = '.nav, .list-group'; + const SELECTOR_TARGET_LINKS = '[href]'; + const SELECTOR_NAV_LIST_GROUP = '.nav, .list-group'; const SELECTOR_NAV_LINKS = '.nav-link'; const SELECTOR_NAV_ITEMS = '.nav-item'; const SELECTOR_LIST_ITEMS = '.list-group-item'; - const SELECTOR_LINK_ITEMS = `${SELECTOR_NAV_LINKS}, ${SELECTOR_LIST_ITEMS}, .${CLASS_NAME_DROPDOWN_ITEM}`; - const SELECTOR_DROPDOWN$1 = '.dropdown'; + const SELECTOR_LINK_ITEMS = `${SELECTOR_NAV_LINKS}, ${SELECTOR_NAV_ITEMS} > ${SELECTOR_NAV_LINKS}, ${SELECTOR_LIST_ITEMS}`; + const SELECTOR_DROPDOWN = '.dropdown'; const SELECTOR_DROPDOWN_TOGGLE$1 = '.dropdown-toggle'; - const METHOD_OFFSET = 'offset'; - const METHOD_POSITION = 'position'; + const Default$1 = { + offset: null, + // TODO: v6 @deprecated, keep it for backwards compatibility reasons + rootMargin: '0px 0px -25%', + smoothScroll: false, + target: null, + threshold: [0.1, 0.5, 1] + }; + const DefaultType$1 = { + offset: '(number|null)', + // TODO v6 @deprecated, keep it for backwards compatibility reasons + rootMargin: 'string', + smoothScroll: 'boolean', + target: 'element', + threshold: 'array' + }; + /** - * ------------------------------------------------------------------------ - * Class Definition - * ------------------------------------------------------------------------ + * Class definition */ class ScrollSpy extends BaseComponent { constructor(element, config) { - super(element); - this._scrollElement = this._element.tagName === 'BODY' ? window : this._element; - this._config = this._getConfig(config); - this._offsets = []; - this._targets = []; - this._activeTarget = null; - this._scrollHeight = 0; - EventHandler.on(this._scrollElement, EVENT_SCROLL, () => this._process()); - this.refresh(); - - this._process(); - } // Getters + super(element, config); + // this._element is the observablesContainer and config.target the menu links wrapper + this._targetLinks = new Map(); + this._observableSections = new Map(); + this._rootElement = getComputedStyle(this._element).overflowY === 'visible' ? null : this._element; + this._activeTarget = null; + this._observer = null; + this._previousScrollData = { + visibleEntryTop: 0, + parentScrollTop: 0 + }; + this.refresh(); // initialize + } + // Getters static get Default() { return Default$1; } - + static get DefaultType() { + return DefaultType$1; + } static get NAME() { return NAME$2; - } // Public - + } + // Public refresh() { - const autoMethod = this._scrollElement === this._scrollElement.window ? METHOD_OFFSET : METHOD_POSITION; - const offsetMethod = this._config.method === 'auto' ? autoMethod : this._config.method; - const offsetBase = offsetMethod === METHOD_POSITION ? this._getScrollTop() : 0; - this._offsets = []; - this._targets = []; - this._scrollHeight = this._getScrollHeight(); - const targets = SelectorEngine.find(SELECTOR_LINK_ITEMS, this._config.target); - targets.map(element => { - const targetSelector = getSelectorFromElement(element); - const target = targetSelector ? SelectorEngine.findOne(targetSelector) : null; - - if (target) { - const targetBCR = target.getBoundingClientRect(); - - if (targetBCR.width || targetBCR.height) { - return [Manipulator[offsetMethod](target).top + offsetBase, targetSelector]; - } - } - - return null; - }).filter(item => item).sort((a, b) => a[0] - b[0]).forEach(item => { - this._offsets.push(item[0]); - - this._targets.push(item[1]); - }); + this._initializeTargetsAndObservables(); + this._maybeEnableSmoothScroll(); + if (this._observer) { + this._observer.disconnect(); + } else { + this._observer = this._getNewObserver(); + } + for (const section of this._observableSections.values()) { + this._observer.observe(section); + } } - dispose() { - EventHandler.off(this._scrollElement, EVENT_KEY$2); + this._observer.disconnect(); super.dispose(); - } // Private + } + // Private + _configAfterMerge(config) { + // TODO: on v6 target should be given explicitly & remove the {target: 'ss-target'} case + config.target = getElement(config.target) || document.body; - _getConfig(config) { - config = { ...Default$1, - ...Manipulator.getDataAttributes(this._element), - ...(typeof config === 'object' && config ? config : {}) - }; - config.target = getElement(config.target) || document.documentElement; - typeCheckConfig(NAME$2, config, DefaultType$1); + // TODO: v6 Only for backwards compatibility reasons. Use rootMargin only + config.rootMargin = config.offset ? `${config.offset}px 0px -30%` : config.rootMargin; + if (typeof config.threshold === 'string') { + config.threshold = config.threshold.split(',').map(value => Number.parseFloat(value)); + } return config; } + _maybeEnableSmoothScroll() { + if (!this._config.smoothScroll) { + return; + } - _getScrollTop() { - return this._scrollElement === window ? this._scrollElement.pageYOffset : this._scrollElement.scrollTop; - } + // unregister any previous listeners + EventHandler.off(this._config.target, EVENT_CLICK); + EventHandler.on(this._config.target, EVENT_CLICK, SELECTOR_TARGET_LINKS, event => { + const observableSection = this._observableSections.get(event.target.hash); + if (observableSection) { + event.preventDefault(); + const root = this._rootElement || window; + const height = observableSection.offsetTop - this._element.offsetTop; + if (root.scrollTo) { + root.scrollTo({ + top: height, + behavior: 'smooth' + }); + return; + } - _getScrollHeight() { - return this._scrollElement.scrollHeight || Math.max(document.body.scrollHeight, document.documentElement.scrollHeight); + // Chrome 60 doesn't support `scrollTo` + root.scrollTop = height; + } + }); } - - _getOffsetHeight() { - return this._scrollElement === window ? window.innerHeight : this._scrollElement.getBoundingClientRect().height; + _getNewObserver() { + const options = { + root: this._rootElement, + threshold: this._config.threshold, + rootMargin: this._config.rootMargin + }; + return new IntersectionObserver(entries => this._observerCallback(entries), options); } - _process() { - const scrollTop = this._getScrollTop() + this._config.offset; - - const scrollHeight = this._getScrollHeight(); - - const maxScroll = this._config.offset + scrollHeight - this._getOffsetHeight(); + // The logic of selection + _observerCallback(entries) { + const targetElement = entry => this._targetLinks.get(`#${entry.target.id}`); + const activate = entry => { + this._previousScrollData.visibleEntryTop = entry.target.offsetTop; + this._process(targetElement(entry)); + }; + const parentScrollTop = (this._rootElement || document.documentElement).scrollTop; + const userScrollsDown = parentScrollTop >= this._previousScrollData.parentScrollTop; + this._previousScrollData.parentScrollTop = parentScrollTop; + for (const entry of entries) { + if (!entry.isIntersecting) { + this._activeTarget = null; + this._clearActiveClass(targetElement(entry)); + continue; + } + const entryIsLowerThanPrevious = entry.target.offsetTop >= this._previousScrollData.visibleEntryTop; + // if we are scrolling down, pick the bigger offsetTop + if (userScrollsDown && entryIsLowerThanPrevious) { + activate(entry); + // if parent isn't scrolled, let's keep the first visible item, breaking the iteration + if (!parentScrollTop) { + return; + } + continue; + } - if (this._scrollHeight !== scrollHeight) { - this.refresh(); + // if we are scrolling up, pick the smallest offsetTop + if (!userScrollsDown && !entryIsLowerThanPrevious) { + activate(entry); + } } - - if (scrollTop >= maxScroll) { - const target = this._targets[this._targets.length - 1]; - - if (this._activeTarget !== target) { - this._activate(target); + } + _initializeTargetsAndObservables() { + this._targetLinks = new Map(); + this._observableSections = new Map(); + const targetLinks = SelectorEngine.find(SELECTOR_TARGET_LINKS, this._config.target); + for (const anchor of targetLinks) { + // ensure that the anchor has an id and is not disabled + if (!anchor.hash || isDisabled(anchor)) { + continue; } + const observableSection = SelectorEngine.findOne(decodeURI(anchor.hash), this._element); + // ensure that the observableSection exists & is visible + if (isVisible(observableSection)) { + this._targetLinks.set(decodeURI(anchor.hash), anchor); + this._observableSections.set(anchor.hash, observableSection); + } + } + } + _process(target) { + if (this._activeTarget === target) { return; } - - if (this._activeTarget && scrollTop < this._offsets[0] && this._offsets[0] > 0) { - this._activeTarget = null; - - this._clear(); - + this._clearActiveClass(this._config.target); + this._activeTarget = target; + target.classList.add(CLASS_NAME_ACTIVE$1); + this._activateParents(target); + EventHandler.trigger(this._element, EVENT_ACTIVATE, { + relatedTarget: target + }); + } + _activateParents(target) { + // Activate dropdown parents + if (target.classList.contains(CLASS_NAME_DROPDOWN_ITEM)) { + SelectorEngine.findOne(SELECTOR_DROPDOWN_TOGGLE$1, target.closest(SELECTOR_DROPDOWN)).classList.add(CLASS_NAME_ACTIVE$1); return; } - - for (let i = this._offsets.length; i--;) { - const isActiveTarget = this._activeTarget !== this._targets[i] && scrollTop >= this._offsets[i] && (typeof this._offsets[i + 1] === 'undefined' || scrollTop < this._offsets[i + 1]); - - if (isActiveTarget) { - this._activate(this._targets[i]); + for (const listGroup of SelectorEngine.parents(target, SELECTOR_NAV_LIST_GROUP)) { + // Set triggered links parents as active + // With both
`} /> + +### Active + +Add `.active` to items in the dropdown to **style them as active**. To convey the active state to assistive technologies, use the `aria-current` attribute — using the `page` value for the current page, or `true` for the current item in a set. + + +
  • Regular link
  • +
  • Active link
  • +
  • Another link
  • + `} /> + +### Disabled + +Add `.disabled` to items in the dropdown to **style them as disabled**. + + +
  • Regular link
  • +
  • Disabled link
  • +
  • Another link
  • + `} /> + +## Menu alignment + +By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. You can change this with the directional `.drop*` classes, but you can also control them with additional modifier classes. + +Add `.dropdown-menu-end` to a `.dropdown-menu` to right align the dropdown menu. Directions are mirrored when using Bootstrap in RTL, meaning `.dropdown-menu-end` will appear on the left side. + + +**Heads up!** Dropdowns are positioned thanks to Popper except when they are contained in a navbar. + + + + + + `} /> + +### Responsive alignment + +If you want to use responsive alignment, disable dynamic positioning by adding the `data-bs-display="static"` attribute and use the responsive variation classes. + +To align **right** the dropdown menu with the given breakpoint or larger, add `.dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end`. + + + + + `} /> + +To align **left** the dropdown menu with the given breakpoint or larger, add `.dropdown-menu-end` and `.dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start`. + + + + + `} /> + +Note that you don’t need to add a `data-bs-display="static"` attribute to dropdown buttons in navbars, since Popper isn’t used in navbars. + +### Alignment options + +Taking most of the options shown above, here’s a small kitchen sink demo of various dropdown alignment options in one place. + + + + + + +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    + + +
    `} /> + +## Menu content + +### Headers + +Add a header to label sections of actions in any dropdown menu. + + +
  • +
  • Action
  • +
  • Another action
  • + `} /> + +### Dividers + +Separate groups of related menu items with a divider. + + +
  • Action
  • +
  • Another action
  • +
  • Something else here
  • +
  • +
  • Separated link
  • + `} /> + +### Text + +Place any freeform text within a dropdown menu with text and use [spacing utilities]([[docsref:/utilities/spacing]]). Note that you’ll likely need additional sizing styles to constrain the menu width. + + +

    + Some example text that’s free-flowing within the dropdown menu. +

    +

    + And this is more example text. +

    + `} /> + +### Forms + +Put a form within a dropdown menu, or make it into a dropdown menu, and use [margin or padding utilities]([[docsref:/utilities/spacing]]) to give it the negative space you require. + + + +
    + + +
    +
    + + +
    +
    +
    + + +
    +
    + + + + New around here? Sign up + Forgot password? + `} /> + + + + + `} /> + +## Dropdown options + +Use `data-bs-offset` or `data-bs-reference` to change the location of the dropdown. + + + +
    + + + +
    + `} /> + +### Auto close behavior + +By default, the dropdown menu is closed when clicking inside or outside the dropdown menu. You can use the `autoClose` option to change this behavior of the dropdown. + + + + + + +
    + + +
    + +
    + + +
    + +
    + + +
    `} /> + +## CSS + +### Variables + + + +As part of Bootstrap’s evolving CSS variables approach, dropdowns now use local CSS variables on `.dropdown-menu` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. + + + + +Dropdown items include at least one variable that is not set on `.dropdown`. This allows you to provide a new value while Bootstrap defaults to a fallback value. + +- `--bs-dropdown-item-border-radius` + + +Customization through CSS variables can be seen on the `.dropdown-menu-dark` class where we override specific values without adding duplicate CSS selectors. + + + +### Sass variables + +Variables for all dropdowns: + + + +Variables for the [dark dropdown](#dark-dropdowns): + + + +Variables for the CSS-based carets that indicate a dropdown’s interactivity: + + + +### Sass mixins + +Mixins are used to generate the CSS-based carets and can be found in `scss/mixins/_caret.scss`. + + + +## Usage + +Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the `.show` class on the parent `.dropdown-menu`. The `data-bs-toggle="dropdown"` attribute is relied on for closing dropdown menus at an application level, so it’s a good idea to always use it. + + +On touch-enabled devices, opening a dropdown adds empty `mouseover` handlers to the immediate children of the `` element. This admittedly ugly hack is necessary to work around a [quirk in iOs’ event delegation](https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html), which would otherwise prevent a tap anywhere outside of the dropdown from triggering the code that closes the dropdown. Once the dropdown is closed, these additional empty `mouseover` handlers are removed. + + +### Via data attributes + +Add `data-bs-toggle="dropdown"` to a link or button to toggle a dropdown. + +```html + +``` + +### Via JavaScript + + +Dropdowns must have `data-bs-toggle="dropdown"` on their trigger element, regardless of whether you call your dropdown via JavaScript or use the data-api. + + +Call the dropdowns via JavaScript: + +```js +const dropdownElementList = document.querySelectorAll('.dropdown-toggle') +const dropdownList = [...dropdownElementList].map(dropdownToggleEl => new bootstrap.Dropdown(dropdownToggleEl)) +``` + +### Options + + + + +| Name | Type | Default | Description | +| --- | --- | --- | --- | +| `autoClose` | boolean, string | `true` | Configure the auto close behavior of the dropdown:
    • `true` - the dropdown will be closed by clicking outside or inside the dropdown menu.
    • `false` - the dropdown will be closed by clicking the toggle button and manually calling `hide` or `toggle` method. (Also will not be closed by pressing Esc key)
    • `'inside'` - the dropdown will be closed (only) by clicking inside the dropdown menu.
    • `'outside'` - the dropdown will be closed (only) by clicking outside the dropdown menu.
    Note: the dropdown can always be closed with the Esc key. | +| `boundary` | string, element | `'clippingParents'` | Overflow constraint boundary of the dropdown menu (applies only to Popper’s preventOverflow modifier). By default it’s `clippingParents` and can accept an HTMLElement reference (via JavaScript only). For more information refer to Popper’s [detectOverflow docs](https://popper.js.org/docs/v2/utils/detect-overflow/#boundary). | +| `display` | string | `'dynamic'` | By default, we use Popper for dynamic positioning. Disable this with `static`. | +| `offset` | array, string, function | `[0, 2]` | Offset of the dropdown relative to its target. You can pass a string in data attributes with comma separated values like: `data-bs-offset="10,20"`. When a function is used to determine the offset, it is called with an object containing the popper placement, the reference, and popper rects as its first argument. The triggering element DOM node is passed as the second argument. The function must return an array with two numbers: [skidding](https://popper.js.org/docs/v2/modifiers/offset/#skidding-1), [distance](https://popper.js.org/docs/v2/modifiers/offset/#distance-1). For more information refer to Popper’s [offset docs](https://popper.js.org/docs/v2/modifiers/offset/#options). | +| `popperConfig` | null, object, function | `null` | To change Bootstrap’s default Popper config, see [Popper’s configuration](https://popper.js.org/docs/v2/constructors/#options). When a function is used to create the Popper configuration, it’s called with an object that contains the Bootstrap’s default Popper configuration. It helps you use and merge the default with your own configuration. The function must return a configuration object for Popper. | +| `reference` | string, element, object | `'toggle'` | Reference element of the dropdown menu. Accepts the values of `'toggle'`, `'parent'`, an HTMLElement reference or an object providing `getBoundingClientRect`. For more information refer to Popper’s [constructor docs](https://popper.js.org/docs/v2/constructors/#createpopper) and [virtual element docs](https://popper.js.org/docs/v2/virtual-elements/). | +
    + +#### Using function with `popperConfig` + +```js +const dropdown = new bootstrap.Dropdown(element, { + popperConfig(defaultBsPopperConfig) { + // const newPopperConfig = {...} + // use defaultBsPopperConfig if needed... + // return newPopperConfig + } +}) +``` + +### Methods + + +| Method | Description | +| --- | --- | +| `dispose` | Destroys an element’s dropdown. (Removes stored data on the DOM element) | +| `getInstance` | Static method which allows you to get the dropdown instance associated to a DOM element, you can use it like this: `bootstrap.Dropdown.getInstance(element)`. | +| `getOrCreateInstance` | Static method which returns a dropdown instance associated to a DOM element or create a new one in case it wasn’t initialized. You can use it like this: `bootstrap.Dropdown.getOrCreateInstance(element)`. | +| `hide` | Hides the dropdown menu of a given navbar or tabbed navigation. | +| `show` | Shows the dropdown menu of a given navbar or tabbed navigation. | +| `toggle` | Toggles the dropdown menu of a given navbar or tabbed navigation. | +| `update` | Updates the position of an element’s dropdown. | + + +### Events + +All dropdown events are fired at the toggling element and then bubbled up. So you can also add event listeners on the `.dropdown-menu`’s parent element. `hide.bs.dropdown` and `hidden.bs.dropdown` events have a `clickEvent` property (only when the original Event type is `click`) that contains an Event Object for the click event. + + +| Event type | Description | +| --- | --- | +| `hide.bs.dropdown` | Fires immediately when the `hide` instance method has been called. | +| `hidden.bs.dropdown` | Fired when the dropdown has finished being hidden from the user and CSS transitions have completed. | +| `show.bs.dropdown` | Fires immediately when the `show` instance method is called. | +| `shown.bs.dropdown` | Fired when the dropdown has been made visible to the user and CSS transitions have completed. | + + +```js +const myDropdown = document.getElementById('myDropdown') +myDropdown.addEventListener('show.bs.dropdown', event => { + // do something... +}) +``` diff --git a/site/src/content/docs/components/list-group.mdx b/site/src/content/docs/components/list-group.mdx new file mode 100644 index 000000000000..59827ddd41bb --- /dev/null +++ b/site/src/content/docs/components/list-group.mdx @@ -0,0 +1,448 @@ +--- +title: List group +description: List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within. +toc: true +--- + +import { getData } from '@libs/data' + +## Basic example + +The most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow, or with your own CSS as needed. + + +
  • An item
  • +
  • A second item
  • +
  • A third item
  • +
  • A fourth item
  • +
  • And a fifth one
  • + `} /> + +## Active items + +Add `.active` to a `.list-group-item` to indicate the current active selection. + + +
  • An active item
  • +
  • A second item
  • +
  • A third item
  • +
  • A fourth item
  • +
  • And a fifth one
  • + `} /> + +## Links and buttons + +Use ``s or ` + + + + + `} /> + +## Flush + +Add `.list-group-flush` to remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards). + + +
  • An item
  • +
  • A second item
  • +
  • A third item
  • +
  • A fourth item
  • +
  • And a fifth one
  • + `} /> + +## Numbered + +Add the `.list-group-numbered` modifier class (and optionally use an `
      ` element) to opt into numbered list group items. Numbers are generated via CSS (as opposed to a `
        `s default browser styling) for better placement inside list group items and to allow for better customization. + +Numbers are generated by `counter-reset` on the `
          `, and then styled and placed with a `::before` pseudo-element on the `
        1. ` with `counter-increment` and `content`. + + +
        2. A list item
        3. +
        4. A list item
        5. +
        6. A list item
        7. +
        `} /> + +These work great with custom content as well. + + +
      1. +
        +
        Subheading
        + Content for list item +
        + 14 +
      2. +
      3. +
        +
        Subheading
        + Content for list item +
        + 14 +
      4. +
      5. +
        +
        Subheading
        + Content for list item +
        + 14 +
      6. +
      `} /> + +## Horizontal + +Add `.list-group-horizontal` to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant `.list-group-horizontal-{sm|md|lg|xl|xxl}` to make a list group horizontal starting at that breakpoint’s `min-width`. Currently **horizontal list groups cannot be combined with flush list groups.** + +**ProTip:** Want equal-width list group items when horizontal? Add `.flex-fill` to each list group item. + + `
        +
      • An item
      • +
      • A second item
      • +
      • A third item
      • +
      `)} /> + +## Variants + + +**Heads up!** As of v5.3.0, the `list-group-item-variant()` Sass mixin is deprecated. List group item variants now have their CSS variables overridden in [a Sass loop](#sass-loops). + + +Use contextual classes to style list items with a stateful background and color. + + +
    1. A simple default list group item
    2. + `, + ...getData('theme-colors').map((themeColor) => `
    3. A simple ${themeColor.name} list group item
    4. `), + `` + ]} /> + +### For links and buttons + +Contextual classes also work with `.list-group-item-action` for `
      ` and ` -
      - -
      +Launch demo modal +`} /> ```html @@ -117,7 +115,7 @@ Toggle a working modal demo by clicking the button below. It will slide down and + +
      + + +
      + +
      + + + +
      + +
      + + + +
      `} /> + +## Buttons with dropdowns + + + + + + + + + + `} /> + +## Segmented buttons + + + + + + + + +
      + + + + +
      `} /> + +## Custom forms + +Input groups include support for custom selects and custom file inputs. Browser default versions of these are not supported. + +### Custom select + + + + + + +
      + + +
      + +
      + + +
      + +
      + + +
      `} /> + +### Custom file input + + + + + + +
      + + +
      + +
      + + +
      + +
      + + +
      `} /> + +## CSS + +### Sass variables + + diff --git a/site/src/content/docs/forms/layout.mdx b/site/src/content/docs/forms/layout.mdx new file mode 100644 index 000000000000..04d3bd5a8b58 --- /dev/null +++ b/site/src/content/docs/forms/layout.mdx @@ -0,0 +1,307 @@ +--- +title: Layout +description: Give your forms some structure—from inline to horizontal to custom grid implementations—with our form layout options. +toc: true +--- + +## Forms + +Every group of form fields should reside in a `
      ` element. Bootstrap provides no default styling for the `` element, but there are some powerful browser features that are provided by default. + +- New to browser forms? Consider reviewing [the MDN form docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) for an overview and complete list of available attributes. +- ` + +
      `} /> + +## Horizontal form + +Create horizontal forms with the grid by adding the `.row` class to form groups and using the `.col-*-*` classes to specify the width of your labels and controls. Be sure to add `.col-form-label` to your `