[
  {
    "path": ".eslintignore",
    "content": "**/dist/\n**/docs/\n**/coverage/\n**/.husky/\n**/types/\n**/build/\n**/test/\n"
  },
  {
    "path": ".eslintrc.yml",
    "content": "env:\n  browser: true\n  es2021: true\nextends:\n  - eslint:recommended\n  - plugin:@typescript-eslint/recommended\n  - prettier\noverrides: []\nparser: '@typescript-eslint/parser'\nparserOptions:\n  ecmaVersion: latest\n  sourceType: module\nplugins:\n  - '@typescript-eslint'\nrules:\n  linebreak-style:\n    - error\n    - unix\n"
  },
  {
    "path": ".gitattributes",
    "content": "###############################################################################\n# Set default behavior to automatically normalize line endings.\n###############################################################################\n* text=auto\n\n###############################################################################\n# Set default behavior for command prompt diff.\n#\n# This is need for earlier builds of msysgit that does not have it on by\n# default for csharp files.\n# Note: This is only used by command line\n###############################################################################\n#*.cs     diff=csharp\n\n###############################################################################\n# Set the merge driver for project and solution files\n#\n# Merging from the command prompt will add diff markers to the files if there\n# are conflicts (Merging from VS is not affected by the settings below, in VS\n# the diff markers are never inserted). Diff markers may cause the following \n# file extensions to fail to load in VS. An alternative would be to treat\n# these files as binary and thus will always conflict and require user\n# intervention with every merge. To do so, just uncomment the entries below\n###############################################################################\n#*.sln       merge=binary\n#*.csproj    merge=binary\n#*.vbproj    merge=binary\n#*.vcxproj   merge=binary\n#*.vcproj    merge=binary\n#*.dbproj    merge=binary\n#*.fsproj    merge=binary\n#*.lsproj    merge=binary\n#*.wixproj   merge=binary\n#*.modelproj merge=binary\n#*.sqlproj   merge=binary\n#*.wwaproj   merge=binary\n\n###############################################################################\n# behavior for image files\n#\n# image files are treated as binary by default.\n###############################################################################\n#*.jpg   binary\n#*.png   binary\n#*.gif   binary\n\n###############################################################################\n# diff behavior for common document formats\n# \n# Convert binary document formats to text before diffing them. This feature\n# is only available from the command line. Turn it on by uncommenting the \n# entries below.\n###############################################################################\n#*.doc   diff=astextplain\n#*.DOC   diff=astextplain\n#*.docx  diff=astextplain\n#*.DOCX  diff=astextplain\n#*.dot   diff=astextplain\n#*.DOT   diff=astextplain\n#*.pdf   diff=astextplain\n#*.PDF   diff=astextplain\n#*.rtf   diff=astextplain\n#*.RTF   diff=astextplain\n"
  },
  {
    "path": ".github/CONTRIBUTING.md",
    "content": "# Submitting Issues\n\nIf you are submitting a bug, please test and/or fork [this StackBlitz](https://stackblitz.com/edit/tempus-dominus-v6-simple-setup) demonstrating the issue. Code issues and fringe case bugs that do not include a StackBlitz (or similar) will be closed.\n\nIssues that are submitted without a description (title only) will be closed with no further explanation.\n\n# Contributing code\n\nTo contribute, fork the library and run `npm install`. You need [node](http://nodejs.org/); use [nvm](https://github.com/creationix/nvm) or [nenv](https://github.com/ryuone/nenv) to install it.\n\n```bash\ngit https://github.com/Eonasdan/tempus-dominus.git\ncd tempus-dominus\nnpm i\ngit checkout development  # all patches against development branch, please!\n```\n\n# Very important notes\n\n**Pull requests to the `master` branch will be closed.** Please submit all pull requests to the `development` branch.\n- **Do not include the minified files in your pull request.** Don't worry, we'll build them when we cut a release.\n- Pull requests that do not include a description (title only) and the following will be closed:\n  - What the change does\n  - A use case (for new features or enhancements)\n\n# NPM Scripts\n\n\n| Script | Description |\n|--------|------------|\n| start | Launches browser sync and watches for files changes.|\n| serve | Launches browser sync to serve the docs. |\n| build | Creates compiled js, css and copies the extra files to the dist folder. |\n| sass | Compiles just the sass files to css. |\n| rollup | Compiles typescript and scss files. |\n| rollup-watch | Same as above but watches for changes and compiles as needed. |\n| build:declarations | Builds the typescript definition files. |\n| prettier | Runs prettier to format the code. |\n| docs | Builds the docs. |\n| docs-watch | Watches for changes to the docs files. |\n| release-version | Creates a new release version. |\n"
  },
  {
    "path": ".github/FUNDING.yml",
    "content": "# These are supported funding model platforms\n\ngithub: eonasdan\nko_fi: eonasdan\n"
  },
  {
    "path": ".github/ISSUE_TEMPLATE/bug_report.yml",
    "content": "name: Report a bug\ndescription: Tell us about your issue.\ntitle: \"Provide a general summary of the issue\"\nlabels: [\"Type: Bug\", \"State: Unsponsored\"]\nbody:\n  - type: markdown\n    attributes:\n      value: \"<h3>Note: I am no longer taking feature requests. \n      Beginning in 2024, tickets will be paid support only. Please see [this discussion](https://github.com/Eonasdan/tempus-dominus/discussions/2694).</h3>\"\n  - type: checkboxes\n    attributes:\n      label: Prerequisites\n      description: Take a couple minutes to help our maintainers work faster.\n      options:\n        - label: I have [searched](https://github.com/Eonasdan/tempus-dominus/issues?q=is%3Aissue) for duplicate or closed issues.\n          required: true\n        - label: I have validated my setup against the latest version on [StackBlitz](https://stackblitz.com/edit/tempus-dominus-v6-simple-setup).\n          required: true\n        - label: I have read the [contributing guidelines](https://github.com/Eonasdan/tempus-dominus/blob/master/.github/CONTRIBUTING.md).\n          required: true\n        - label: I understand that only sponsored issues will be worked on and that if I wish to sponsor an issue, I will contact the owner FIRST.\n          required: true\n  - type: textarea\n    id: what-happened\n    attributes:\n      label: Describe the issue\n      description: Provide a summary of the issue and what you expected to happen, including specific steps to reproduce.\n    validations:\n      required: true\n  - type: markdown\n    attributes:\n      value: \"![Please provide the link in the address bar](https://raw.githubusercontent.com/Eonasdan/tempus-dominus/master/.github/ISSUE_TEMPLATE/image.png)\"\n  - type: textarea\n    id: reduced-test-case\n    attributes:\n      label: StackBlitz fork\n      description: \"You MUST provide an StackBlitz fork of one of the following examples: [HTML](https://stackblitz.com/edit/tempus-dominus-v6-simple-setup), [Typescript](https://stackblitz.com/edit/v6-typescript), [Using import](https://stackblitz.com/edit/tempus-dominus-v6-simple-setup-import), or [jQuery](https://stackblitz.com/edit/tempus-dominus-v6-simple-jquery-setup).\"\n    validations:\n      required: true\n  - type: dropdown\n    id: os\n    attributes:\n      label: What operating system(s) are you seeing the problem on?\n      multiple: true\n      options:\n        - Windows\n        - macOS\n        - Android\n        - iOS\n        - Linux\n    validations:\n      required: true\n  - type: dropdown\n    id: browser\n    attributes:\n      label: What browser(s) are you seeing the problem on?\n      multiple: true\n      options:\n        - Chrome\n        - Safari\n        - Firefox\n        - Microsoft Edge\n        - Opera\n  - type: input\n    id: version\n    attributes:\n      label: What version of are you using? You can find this information from the sample StackBlitz.\n      placeholder: \"e.g., v5.1.0 or v4.5.2\"\n    validations:\n      required: true\n  - type: input\n    id: locale\n    attributes:\n      label: What your browser's locale? You can find this information from the sample StackBlitz.\n      placeholder: \"e.g., 'en-US'\"\n    validations:\n      required: true\n"
  },
  {
    "path": ".github/ISSUE_TEMPLATE/config.yml",
    "content": "contact_links:\n  - name: Ask a question\n    url: https://github.com/Eonasdan/tempus-dominus/discussions/new\n    about: Ask and discuss questions with other community members\n"
  },
  {
    "path": ".github/PULL_REQUEST_TEMPLATE",
    "content": "PRs relating to the v4 will be closed and locked.\n\n* **Please check if the PR fulfills these requirements**\n- [ ] Tests for the changes have been added (for bug fixes / features)\n- [ ] Docs have been added / updated (for bug fixes / features)\n\n\n* **What kind of change does this PR introduce?** (Bug fix, feature, docs update, ...). If this is a fix, please tag a bug.\n\n\n\n* **What is the current behavior?** (You can also link to an open issue here)\n\n\n\n* **What is the new behavior (if this is a feature change)?**\n\n\n\n* **Does this PR introduce a breaking change?** (What changes might users need to make in their application due to this PR?)\n\n\n\n* **Other information**:\n"
  },
  {
    "path": ".github/workflows/base/action.yaml",
    "content": "name: Setup Node\ndescription: Setup node\n\ninputs:\n  registry:\n    description: 'A Github PAT'\n    default: 'https://registry.npmjs.org'\n\nruns:\n  using: composite\n  steps:\n      - name: Setup Node\n        uses: actions/setup-node@v3\n        with:\n          node-version: '18'\n          registry-url: ${{ inputs.registry }}\n      - name: Npm install\n        shell: bash\n        run: npm ci\n"
  },
  {
    "path": ".github/workflows/build/action.yaml",
    "content": "name: Build\ndescription: Build\n\ninputs:\n  GITHUB_TOKEN:\n    description: 'A Github PAT'\n    required: true\n  SONAR_TOKEN:\n    description: 'A Sonar token'\n    required: true\n\nruns:\n  using: composite\n  steps:\n    - name: Unit tests\n      shell: bash\n      run: npm run test:coverage\n    - name: Build\n      shell: bash\n      run: npm run build\n    - name: Build docs\n      shell: bash\n      run: npm run docs\n    - name: SonarCloud Scan\n      uses: sonarsource/sonarcloud-github-action@master\n      env:\n        GITHUB_TOKEN: ${{ inputs.GITHUB_TOKEN }}\n        SONAR_TOKEN: ${{ inputs.SONAR_TOKEN }}\n"
  },
  {
    "path": ".github/workflows/codeql-analysis.yml",
    "content": "# For most projects, this workflow file will not need changing; you simply need\n# to commit it to your repository.\n#\n# You may wish to alter this file to override the set of languages analyzed,\n# or to provide custom queries or build logic.\n#\n# ******** NOTE ********\n# We have attempted to detect the languages in your repository. Please check\n# the `language` matrix defined below to confirm you have the correct set of\n# supported CodeQL languages.\n#\nname: \"CodeQL\"\n\non:\n  push:\n    branches: [ master ]\n  pull_request:\n    # The branches below must be a subset of the branches above\n    branches: [ master ]\n  schedule:\n    - cron: '16 12 * * 1'\n\njobs:\n  analyze:\n    name: Analyze\n    runs-on: ubuntu-latest\n    permissions:\n      actions: read\n      contents: read\n      security-events: write\n\n    strategy:\n      fail-fast: false\n      matrix:\n        language: [ 'javascript' ]\n        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]\n        # Learn more about CodeQL language support at https://git.io/codeql-language-support\n\n    steps:\n    - name: Checkout repository\n      uses: actions/checkout@v3\n\n    # Initializes the CodeQL tools for scanning.\n    - name: Initialize CodeQL\n      uses: github/codeql-action/init@v2\n      with:\n        languages: ${{ matrix.language }}\n        # If you wish to specify custom queries, you can do so here or in a config file.\n        # By default, queries listed here will override any specified in a config file.\n        # Prefix the list here with \"+\" to use these queries and those in the config file.\n        # queries: ./path/to/local/query, your-org/your-repo/queries@main\n\n    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).\n    # If this step fails, then you should remove it and run the build manually (see below)\n    - name: Autobuild\n      uses: github/codeql-action/autobuild@v2\n\n    # ℹ️ Command-line programs to run using the OS shell.\n    # 📚 https://git.io/JvXDl\n\n    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines\n    #    and modify them (or add more) to build your code if your project\n    #    uses a compiled language\n\n    #- run: |\n    #   make bootstrap\n    #   make release\n\n    - name: Perform CodeQL Analysis\n      uses: github/codeql-action/analyze@v2\n"
  },
  {
    "path": ".github/workflows/docs/action.yaml",
    "content": "name: Deploy Docs\n\ninputs:\n  GITHUB_TOKEN:\n    description: 'A Github PAT'\n    required: true\n\nruns:\n  using: composite\n  steps:\n      - name: Deploy Docs\n        uses: peaceiris/actions-gh-pages@v3\n        with:\n          github_token: ${{ inputs.GITHUB_TOKEN }}\n          publish_dir: ./docs\n          keep_files: true\n"
  },
  {
    "path": ".github/workflows/docs.yaml",
    "content": "name: Publish Docs\non:\n  workflow_dispatch:\njobs:\n  docs:\n    runs-on: ubuntu-latest\n    steps:\n      - name: Checkout\n        uses: actions/checkout@v3\n      - name: Setup\n        uses: ./.github/workflows/base\n      - name: Build\n        uses: ./.github/workflows/build\n        with:\n          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}\n          SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}\n      - name: Deploy Docs\n        uses: ./.github/workflows/docs\n        with:\n          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}"
  },
  {
    "path": ".github/workflows/feature-branch.yaml",
    "content": "name: Feature Branch Publish Package\n\non:\n  push:\n    branches:\n      - 'feature/*'\n      - 'bug/*'\n      - development\n    paths:\n      - src/js\n      \njobs:\n  main:\n    runs-on: ubuntu-latest\n    permissions:\n      contents: read\n      packages: write\n    steps:\n      - name: Checkout\n        uses: actions/checkout@v3\n      - name: Setup\n        uses: ./.github/workflows/base\n      - name: Set package version\n        id: set_version\n        run: |\n          # Get the branch name\n          BRANCH_NAME=${GITHUB_REF#refs/heads/}\n          # remove \"feature/\" prefix\n          BRANCH_NAME=${BRANCH_NAME#feature/}\n          # replace underscore with dashes (thanks semver)\n          BRANCH_NAME=${BRANCH_NAME//_/-}\n          BUILD_ID=$(echo $GITHUB_RUN_ID | cut -c1-7)\n          VERSION=$(node -p \"const pkg = require('./package.json'); pkg.version\")\n          NEW_VERSION=\"$VERSION-$BRANCH_NAME.$BUILD_ID\"\n          #sed -i \"s/\\\"version\\\": \\\".*\\\"/\\\"version\\\": \\\"$VERSION\\\"/g\" ./package.json\n          echo \"VERSION=$VERSION\" >> $GITHUB_OUTPUT\n          echo \"NEW_VERSION=$NEW_VERSION\" >> $GITHUB_OUTPUT\n      - name: Build\n        uses: ./.github/workflows/build\n        with:\n          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}\n          SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}\n      - name: Create Release\n        run: npm run release:version ${{steps.set_version.outputs.VERSION }} ${{steps.set_version.outputs.NEW_VERSION }}\n      - name: Create Tag\n        uses: actions/github-script@v6\n        with:\n          script: |\n            const {DIST_VERSION} = process.env          \n            github.rest.git.createRef({\n                owner: context.repo.owner,\n                repo: context.repo.repo,\n                ref: `refs/tags/${{steps.set_version.outputs.NEW_VERSION }}`,\n                sha: context.sha\n            })\n"
  },
  {
    "path": ".github/workflows/nuget/action.yaml",
    "content": "name: Nuget Publish\ndescription: Setup node\n\ninputs:\n  NUGET_API_KEY:\n    description: 'A Nuget API Key'\n    required: true\n\nruns:\n  using: composite\n  steps:\n    - name: Setup NuGet\n      uses: NuGet/setup-nuget@v2\n    - name: Pack NuGet\n      working-directory: ./src/nuget\n      shell: pwsh\n      run: |\n        nuget pack TempusDominus.nuspec -Verbosity detailed -NonInteractive -NoPackageAnalysis\n        nuget pack TempusDominus.scss.nuspec -Verbosity detailed -NonInteractive -NoPackageAnalysis\n    - name: Push Nuget\n      working-directory: ./src/nuget\n      shell: pwsh\n      run: |\n        nuget push TempusDominus.*.nupkg -Source https://api.nuget.org/v3/index.json -ApiKey ${{ inputs.NUGET_API_KEY }}\n        nuget push TempusDominus.scss.*.nupkg -Source https://api.nuget.org/v3/index.json -ApiKey ${{ inputs.NUGET_API_KEY }}\n"
  },
  {
    "path": ".github/workflows/nuget.yml",
    "content": "name: Publish Nuget\non:\n  workflow_dispatch:\njobs:\n  build:\n    runs-on: windows-latest\n    steps:\n      - name: Checkout\n        uses: actions/checkout@v3\n      - name: Setup\n        uses: ./.github/workflows/base\n      - name: Build\n        uses: ./.github/workflows/build\n        with:\n          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}\n          SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}\n      - name: Nuget\n        uses: ./.github/workflows/nuget\n        with:\n          NUGET_API_KEY: ${{ secrets.NUGET_API_KEY }}\n"
  },
  {
    "path": ".github/workflows/pr.yml",
    "content": "name: Pull Request\non:\n  push:\n    branches: [ development ]\n  pull_request:\n    branches: [ development ]\n  workflow_dispatch:\njobs:\n  pr:\n    runs-on: ubuntu-latest\n    steps:\n      - name: Checkout\n        uses: actions/checkout@v3\n        with:\n          fetch-depth: 0\n      - name: Setup\n        uses: ./.github/workflows/base\n      - name: Build\n        uses: ./.github/workflows/build\n        with:\n          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}\n          SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}\n"
  },
  {
    "path": ".github/workflows/publish.yml",
    "content": "name: Publish Package\non:\n  release:\n    types: [ created ]\n  workflow_dispatch:\njobs:\n  publish:\n    runs-on: ubuntu-latest\n    steps:\n      - name: Checkout\n        uses: actions/checkout@v3\n      - name: Setup\n        uses: ./.github/workflows/base\n      - name: Release\n        uses: ./.github/workflows/release\n        with:\n          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}\n          SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}\n          VERSION: ${{ github.event.release.tag_name }}\n      - name: Deploy Docs\n        uses: ./.github/workflows/docs\n        with:\n          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}\n      - run: npm publish --access=public\n        env:\n          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}\n          #nuget on linux is broken\n#      - name: Nuget\n#        uses: ./.github/workflows/nuget\n#        with:\n#          NUGET_API_KEY: ${{ secrets.NUGET_API_KEY }}\n"
  },
  {
    "path": ".github/workflows/release/action.yaml",
    "content": "name: Release\ndescription: Release\n\ninputs:\n  GITHUB_TOKEN:\n    description: 'A Github PAT'\n    required: true\n  SONAR_TOKEN:\n    description: 'A Sonar token'\n    required: true\n  VERSION:\n    description: 'Version number'\n    required: true\n\nruns:\n  using: composite\n  steps:\n    - name: Build\n      shell: bash\n      run: npm run release\n    - name: Create new release\n      shell: bash\n      run: npm run version ${{ inputs.VERSION }}\n#    - name: SonarCloud Scan\n#      uses: sonarsource/sonarcloud-github-action@master\n#      env:\n#        GITHUB_TOKEN: ${{ inputs.GITHUB_TOKEN }}\n#        SONAR_TOKEN: ${{ inputs.SONAR_TOKEN }}\n"
  },
  {
    "path": ".github/workflows/stale.yaml",
    "content": "name: 'Close stale issues and PRs'\non:\n  schedule:\n    - cron: '30 1 * * *' #at 1:30 pm\n\njobs:\n  stale:\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions/stale@v7\n        with:\n          stale-issue-message: 'This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.'\n          stale-pr-message: 'This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.'\n          any-of-labels: 'State: Waiting feedback'\n          stale-issue-label: 'State: Stale'\n          stale-pr-label: 'State: Stale'\n"
  },
  {
    "path": ".gitignore",
    "content": "bower_components\nnode_modules\n.idea\n.vs\nobj\nbin\nsite\n*.user\n*.csproj\n*.sln\n*.nupkg\nsrc/docs/partials/examples/test.html\nsrc/docs/assets/carbon.css\nsrc/docs/assets/site.webmanifest\n/docs/\n/dist/plugins/examples/\ncoverage\ndist\ntypes\n\n.DS_Store\n"
  },
  {
    "path": ".husky/pre-commit",
    "content": "#!/usr/bin/env sh\n. \"$(dirname -- \"$0\")/_/husky.sh\"\n\nnpx lint-staged\n"
  },
  {
    "path": ".npmignore",
    "content": "/assets\n/_includes\n/_layouts\n/.gitignore\n/node_modules\n/test\n*.log\n*.swp\n*~\n*.tgz\n/site\n*.user\n*.csproj\n*.sln\n*.nupkg\n"
  },
  {
    "path": ".prettierignore",
    "content": "dist\ndocs\nnode_modules\n.github\ncoverage\n"
  },
  {
    "path": ".prettierrc",
    "content": "{\n  \"singleQuote\": true,\n  \"tabWidth\": 2,\n  \"htmlWhitespaceSensitivity\": \"ignore\",\n  \"endOfLine\": \"lf\"\n}\n"
  },
  {
    "path": "CNAME",
    "content": "getdatepicker.com"
  },
  {
    "path": "LICENSE",
    "content": "The MIT License (MIT)\n\nCopyright (c) 2021 Jonathan Peterson (@Eonasdan)\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
  },
  {
    "path": "README.md",
    "content": "[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/R6R53OEFF)\n\n# Paid support only\n\nPlease note that I'm moving on to other projects. New issues will need to be sponsored. This can be done via BountySource or my other donation links. Please reach out to me first so we can discuss the terms. Thank you for your years of support.\n\n# Tempus Dominus Date/Time Picker v6.9.4\n\nTempus Dominus is a powerful and robust date time picker for javascript. Version 6 is another major rewrite over the previous version. V6 is written with modern browsers in mind and is written in typescript. Bootstrap, momentjs and jQuery are no longer required dependencies. Popper2 is all that is required for the picker to position correctly. If you still require jQuery (seriously, you should move off that asap) there's a jQuery provider that wraps the native js functions.\n\n# Developers\n\n## Building\n\nRun `npm i` to install needed packages.\n\nThe docs folder contains the generated documentation site, don't modify this directly as it will be overwritten on build. The dist folder contains the built js/css files.\n\n## Running\n\nYou can run `npm run serve` which will start a web server. Navigate to `http://localhost:3001/` to view the docs.\n\n## Watching for changes\n\nDo not run `npm run serve` at the same time.\n\nRun `npm start`. This runs web server, the build and watchers for the docs, styles, and typescript.\n\n## Where do you use this?\n\nI'd love to know if your public site is using this plugin and list your logo on the documentation site. Leave [create a discussion](https://github.com/Eonasdan/tempus-dominus/discussions/categories/show-your-love) and let me know.\n\n## Priority support is available at an hourly rate.\n\nIf you have an urgent request, bug or need installation help, please contact in the discord server.\n"
  },
  {
    "path": "build/banner.js",
    "content": "'use strict';\n\nconst pkg = require('../package.json');\nconst year = new Date().getFullYear();\n\nfunction getBanner() {\n  return `/*!\n  * Tempus Dominus v${pkg.version} (${pkg.homepage})\n  * Copyright 2013-${year} ${pkg.author.name}\n  * Licensed under MIT (https://github.com/Eonasdan/tempus-dominus/blob/master/LICENSE)\n  */`;\n}\n\nmodule.exports = getBanner;\n"
  },
  {
    "path": "build/change-version.js",
    "content": "const fs = require('fs');\nconst path = require('path');\nconst globby = require('globby');\n\n// Function to update version in a file\nfunction updateVersionInFile(filePath, oldVersion, newVersion) {\n  try {\n    const content = fs.readFileSync(filePath, 'utf8');\n    const updated = content.replace(\n      new RegExp(oldVersion.replace(/\\./g, '\\\\.'), 'g'),\n      newVersion\n    );\n\n    if (content !== updated) {\n      fs.writeFileSync(filePath, updated, 'utf8');\n      console.log(`Updated version in ${filePath}`);\n    }\n  } catch (error) {\n    console.error(`Error processing ${filePath}:`, error);\n  }\n}\n\nasync function updateVersions(newVersion) {\n  try {\n    // Read current version from package.json\n    const packageJson = JSON.parse(fs.readFileSync('./package.json', 'utf8'));\n    const currentVersion = packageJson.version;\n\n    if (!currentVersion) {\n      throw new Error('Could not find version in package.json');\n    }\n\n    // Update package.json\n    packageJson.version = newVersion;\n    fs.writeFileSync(\n      './package.json',\n      JSON.stringify(packageJson, null, 2) + '\\n'\n    );\n    console.log('Updated version in package.json');\n\n    const GLOB = [\n      '**/*.{json,md,nuspec,properties}',\n      'src/js/tempus-dominus.ts',\n      '**/shell.html',\n      '**/installing.html',\n      '**/templates/index.html',\n      '!**/change-log*',\n      '!test/**/*',\n    ];\n\n    const GLOBBY_OPTIONS = {\n      cwd: path.join(__dirname, '..'),\n      gitignore: true,\n    };\n\n    const files = await globby(GLOB, GLOBBY_OPTIONS);\n\n    //make sure that the dist folder is included\n    files.push(\n      ...(await globby(['dist/**/*'], {\n        cwd: path.join(__dirname, '..'),\n      }))\n    );\n\n    // Update version in each file\n    for (const file of files) {\n      updateVersionInFile(file, currentVersion, newVersion);\n    }\n  } catch (error) {\n    console.error('Error:', error);\n    process.exit(1);\n  }\n}\n\n// Get new version from command line argument\nconst newVersion = process.argv[2];\n\nif (!newVersion) {\n  console.error('Please provide a new version number as an argument');\n  console.error('Usage: node update-version.js <new-version>');\n  process.exit(1);\n}\n\n// Execute the update\nupdateVersions(newVersion);\n"
  },
  {
    "path": "build/plugins.js",
    "content": "const rollup = require('rollup');\nconst genericRollup = require('./rollup-plugin.config');\nconst fs = require('fs').promises;\nconst path = require('path');\n\nconst formatName = (n) => n.replace(/\\.ts/, '').replace(/-/g, '_');\n\nconst localePath = path.join(__dirname, '../src/js/locales');\n\nasync function build(option) {\n  const bundle = await rollup.rollup(option.input);\n  await bundle.write(option.output);\n}\n\nasync function locales() {\n  console.log('Building Locales...');\n  try {\n    /* eslint-disable no-restricted-syntax, no-await-in-loop */\n    // We use await-in-loop to make rollup run sequentially to save on RAM\n    const locales = await fs.readdir(localePath);\n    for (const l of locales.filter((x) => x.endsWith('.ts'))) {\n      // run builds sequentially to limit RAM usage\n      await build(\n        genericRollup({\n          input: `./src/js/locales/${l}`,\n          fileName: `./dist/locales/${l.replace('.ts', '.js')}`,\n          name: `tempusDominus.locales.${formatName(l)}`,\n          kind: 'locales',\n        })\n      );\n    }\n  } catch (e) {\n    console.error(e); // eslint-disable-line no-console\n  }\n}\n\nasync function plugins() {\n  console.log('Building Plugins...');\n  try {\n    const plugins = await fs.readdir(path.join(__dirname, '../src/js/plugins'));\n    for (const plugin of plugins.filter((x) => x !== 'examples')) {\n      // run builds sequentially to limit RAM usage\n      await build(\n        genericRollup({\n          input: `./src/js/plugins/${plugin}/index.ts`,\n          fileName: `./dist/plugins/${plugin}.js`,\n          name: `tempusDominus.plugins.${formatName(plugin)}`,\n          kind: 'plugins',\n        })\n      );\n    }\n\n    const examplePlugins = await fs.readdir(\n      path.join(__dirname, '../src/js/plugins/examples')\n    );\n    for (const plugin of examplePlugins.map((x) => x.replace('.ts', ''))) {\n      // run builds sequentially to limit RAM usage\n      await build(\n        genericRollup({\n          input: `./src/js/plugins/examples/${plugin}.ts`,\n          fileName: `./dist/plugins/examples/${plugin}.js`,\n          name: `tempusDominus.plugins.${formatName(plugin)}`,\n        })\n      );\n    }\n  } catch (e) {\n    console.error(e); // eslint-disable-line no-console\n  }\n}\n\nconst args = process.argv.slice(2);\n\nlet command = 'all';\n\nif (args.length !== 0) command = args[0];\n\nswitch (command) {\n  case '-p':\n    plugins().then();\n    break;\n  case '-l':\n    locales().then();\n    break;\n  case 'all':\n    plugins().then(() => locales().then());\n    break;\n}\n"
  },
  {
    "path": "build/rollup-plugin.config.js",
    "content": "const typescript = require('rollup-plugin-ts');\nconst ignore = require('rollup-plugin-ignore');\n\nconst banner = require('./banner.js');\nconst globals = {\n  '@popperjs/core': 'Popper',\n  tempusDominus: 'tempusDominus',\n};\n\nmodule.exports = (config) => {\n  const { input, fileName, name, kind } = config;\n  return {\n    input: {\n      input,\n      external: ['tempusDominus'],\n      plugins: [\n        ignore(['DateTime', 'ErrorMessages', 'FormatLocalization']),\n        typescript({\n          tsconfig: (resolvedConfig) => ({\n            ...resolvedConfig,\n            declaration: kind !== undefined,\n            declarationDir: `./types/${kind}`,\n          }),\n        }),\n      ],\n    },\n    output: {\n      banner,\n      file: fileName,\n      format: 'umd',\n      name: name || 'tempusDominus',\n      globals,\n      compact: true,\n    },\n  };\n};\n"
  },
  {
    "path": "build/rollup.config.js",
    "content": "const typescript = require('rollup-plugin-ts');\nimport postcss from 'rollup-plugin-postcss';\nimport { terser } from 'rollup-plugin-terser';\n\nconst pkg = require('../package.json');\nconst banner = require('./banner.js');\n\nconst globals = {\n  '@popperjs/core': 'Popper',\n};\n\nexport default [\n  {\n    input: 'src/js/tempus-dominus.ts',\n    output: [\n      {\n        banner,\n        file: pkg.main,\n        format: 'umd',\n        name: 'tempusDominus',\n        sourcemap: true,\n        globals,\n      },\n      {\n        banner,\n        file: pkg.module,\n        format: 'es',\n        name: 'tempusDominus',\n        sourcemap: true,\n        globals,\n      },\n      {\n        banner,\n        file: `${pkg.main.replace('.js', '')}.min.js`,\n        format: 'umd',\n        name: 'tempusDominus',\n        globals,\n        plugins: [terser()],\n      },\n      {\n        banner,\n        file: `${pkg.module.replace('.js', '')}.min.js`,\n        format: 'es',\n        name: 'tempusDominus',\n        globals,\n        plugins: [terser()],\n      },\n    ],\n    external: ['@popperjs/core'],\n    plugins: [\n      typescript({\n        tsconfig: (resolvedConfig) => ({\n          ...resolvedConfig,\n        }),\n      }),\n    ],\n  },\n  {\n    input: 'dist/js/jQuery-provider.js',\n    output: [\n      {\n        file: 'dist/js/jQuery-provider.min.js',\n      },\n    ],\n    plugins: [terser()],\n  },\n  {\n    input: 'src/scss/tempus-dominus.scss',\n    output: [\n      {\n        banner,\n        file: 'dist/css/tempus-dominus.css',\n      },\n    ],\n    plugins: [\n      postcss({\n        sourceMap: true,\n        extract: true,\n      }),\n    ],\n  },\n  {\n    input: 'src/scss/tempus-dominus.scss',\n    output: [\n      {\n        banner,\n        file: 'dist/css/tempus-dominus.min.css',\n      },\n    ],\n    plugins: [\n      postcss({\n        extract: true,\n        minimize: true,\n      }),\n    ],\n  },\n];\n"
  },
  {
    "path": "build/serve.js",
    "content": "const { ParvusServer } = require('@eonasdan/parvus-server');\n\nnew ParvusServer({\n  port: 3001,\n  directory: `./docs`,\n  middlewares: [],\n})\n  .startAsync()\n  .then();\n"
  },
  {
    "path": "build/utilities.js",
    "content": "const fs = require('fs').promises;\nconst { dirname } = require('path');\n\nclass Utilities {\n  static async copyFileAndEnsurePathExistsAsync(file) {\n    await fs.mkdir(dirname(file.destination), { recursive: true });\n\n    await fs.copyFile(file.source, file.destination);\n  }\n\n  static async copy() {\n    for (const file of [\n      {\n        source: './src/js/jQuery-provider.js',\n        destination: './dist/js/jQuery-provider.js',\n      },\n    ]) {\n      console.log(`copying ${file.source} to ${file.destination}`);\n      await Utilities.copyFileAndEnsurePathExistsAsync(file);\n    }\n  }\n\n  static async removeFileAsync(filePath) {\n    if (!(await fs.stat(filePath)).isFile()) return;\n    try {\n      await fs.unlink(filePath);\n    } catch (e) {}\n  }\n\n  static async removeDirectoryAsync(directory, removeSelf = true) {\n    try {\n      await fs.rm(directory, { recursive: true, force: true });\n\n      if (!removeSelf) await fs.mkdir(dirname(directory), { recursive: true });\n    } catch (e) {\n      console.error(e);\n    }\n  }\n}\n\nconst args = process.argv.slice(2);\n\nswitch (args[0]) {\n  case '--copy':\n    console.log('Copying files');\n    Utilities.copy().then();\n    break;\n  case '--clean':\n    console.log('Cleaning path: ', args[1]);\n    Utilities.removeDirectoryAsync(args[1]).then();\n    break;\n}\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"author\": {\n    \"name\": \"Jonathan Peterson\"\n  },\n  \"name\": \"@eonasdan/tempus-dominus\",\n  \"version\": \"6.10.3\",\n  \"style\": \"dist/css/tempus-dominus.css\",\n  \"sass\": \"scss/tempus-dominus.scss\",\n  \"main\": \"dist/js/tempus-dominus.js\",\n  \"module\": \"dist/js/tempus-dominus.esm.js\",\n  \"types\": \"types/tempus-dominus.d.ts\",\n  \"files\": [\n    \"dist/**/*\",\n    \"src/js/**/*.ts\",\n    \"src/js/locales/**/*.ts\",\n    \"src/js/plugins/**/*.ts\",\n    \"src/scss/**/*.scss\",\n    \"types/**/*\"\n  ],\n  \"scripts\": {\n    \"start\": \"npm run build && concurrently \\\"npm:*-watch\\\"\",\n    \"test\": \"vitest --ui\",\n    \"test:silent\": \"vitest --run --silent\",\n    \"test:coverage\": \"vitest run --coverage\",\n    \"serve\": \"node ./build/serve.js\",\n    \"clean\": \"node ./build/utilities.js --clean ./dist && node ./build/utilities.js --clean ./types\",\n    \"build\": \"npm run clean && node ./build/utilities.js --copy && npm run rollup && npm run build:declarations && npm run build:plugins-and-locales\",\n    \"build:plugins\": \"node ./build/plugins.js -p\",\n    \"build:locales\": \"node ./build/plugins.js -l\",\n    \"build:plugins-and-locales\": \"node ./build/plugins.js\",\n    \"build:declarations\": \"node ./build/utilities.js --clean ./types && tsc --declaration --emitDeclarationOnly --outDir types\",\n    \"sass\": \"sass src/scss/tempus-dominus.scss ./dist/css/tempus-dominus.css\",\n    \"rollup\": \"rollup -c ./build/rollup.config.js\",\n    \"rollup-watch\": \"rollup -c ./build/rollup.config.js -w\",\n    \"docs\": \"node ./src/docs/make.js\",\n    \"docs-watch\": \"node ./src/docs/make.js --watch\",\n    \"release\": \"npm run eslint && npm run test:silent && npm run build\",\n    \"version\": \"node build/change-version.js\",\n    \"prepare\": \"husky install\",\n    \"prettier\": \"prettier --ignore-unknown --write .\",\n    \"eslint\": \"npm run prettier && npx eslint --ext .html,.ts .\"\n  },\n  \"lint-staged\": {\n    \"**/*!(.d)/.ts\": [\n      \"npm run eslint\"\n    ],\n    \"**/*\": [\n      \"npm run prettier\"\n    ]\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/eonasdan/tempus-dominus/issues\"\n  },\n  \"peerDependencies\": {\n    \"@popperjs/core\": \"^2.11.6\"\n  },\n  \"peerDependenciesMeta\": {\n    \"@popperjs/core\\\"\": {\n      \"optional\": true\n    }\n  },\n  \"description\": \"A robust and powerful date/time picker component. For usage, installation and demos see Project Site on GitHub\",\n  \"devDependencies\": {\n    \"@eonasdan/parvus-server\": \"^1.2.1\",\n    \"@popperjs/core\": \"^2.11.6\",\n    \"@rollup/plugin-node-resolve\": \"^14.1.0\",\n    \"@types/node\": \"^18.14.2\",\n    \"@typescript-eslint/eslint-plugin\": \"^5.54.0\",\n    \"@typescript-eslint/parser\": \"^5.54.0\",\n    \"@vitest/coverage-c8\": \"^0.29.2\",\n    \"@vitest/ui\": \"^0.29.2\",\n    \"bootstrap\": \"^5.2.3\",\n    \"chokidar\": \"^3.5.3\",\n    \"clean-css\": \"^5.3.2\",\n    \"concurrently\": \"^7.6.0\",\n    \"dropcss\": \"^1.0.16\",\n    \"eslint\": \"^8.35.0\",\n    \"eslint-config-prettier\": \"^8.6.0\",\n    \"glob\": \"^7.2.3\",\n    \"globby\": \"^11.1.0\",\n    \"html-minifier-terser\": \"^5.1.1\",\n    \"husky\": \"^8.0.3\",\n    \"jsdom\": \"^20.0.3\",\n    \"lint-staged\": \"^13.1.2\",\n    \"prettier\": \"^2.8.4\",\n    \"rollup\": \"^2.79.1\",\n    \"rollup-plugin-ignore\": \"^1.0.10\",\n    \"rollup-plugin-postcss\": \"^4.0.2\",\n    \"rollup-plugin-terser\": \"^7.0.2\",\n    \"rollup-plugin-ts\": \"^3.2.0\",\n    \"sass\": \"^1.58.3\",\n    \"terser\": \"^5.16.5\",\n    \"tslib\": \"^2.5.0\",\n    \"typescript\": \"~4.9.5\",\n    \"vitest\": \"^0.29.2\",\n    \"vitest-github-actions-reporter\": \"^0.10.0\"\n  },\n  \"homepage\": \"https://getdatepicker.com/\",\n  \"keywords\": [\n    \"datepicker\",\n    \"datetimepicker\",\n    \"timepicker\"\n  ],\n  \"license\": \"MIT\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/Eonasdan/tempus-dominus.git\"\n  },\n  \"wallaby\": {\n    \"filesWithNoCoverageCalculated\": [\n      \"test/fixtures/**/*\"\n    ]\n  },\n  \"funding\": \"https://ko-fi.com/eonasdan\"\n}\n"
  },
  {
    "path": "sonar-project.properties",
    "content": "sonar.organization=eonasdan\nsonar.projectKey=Eonasdan_tempus-dominus\n\nsonar.projectName=tempus-dominus\nsonar.projectVersion=6.9.4\n\nsonar.sources = src/\nsonar.tests = test/\n"
  },
  {
    "path": "src/docs/assets/no-styles.html",
    "content": "<!DOCTYPE html>\n<html lang='en'>\n<head>\n  <meta charset='UTF-8'>\n  <meta name='description' content='Examples using Tempus Dominus without Bootstrap or other css frameworks.'>\n  <meta http-equiv='X-UA-Compatible' content='IE=edge'>\n  <meta name='viewport' content='width=device-width,initial-scale=1,shrink-to-fit=no'>\n\n  <title>Examples - No Styles - Tempus Dominus</title>\n\n  <link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png'>\n  <link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png'>\n  <link rel='icon' type='image/png' sizes='16x16' href='/favicon-16x16.png'>\n  <link rel='manifest' href='/site.webmanifest'>\n  <link rel='mask-icon' href='/safari-pinned-tab.svg' color='#5bbad5'>\n  <meta name='msapplication-TileColor' content='#da532c'>\n  <meta name='theme-color' content='#ffffff'>\n\n  <meta name='title' content='Examples - No Styles'>\n  <meta name='description' content='Examples using Tempus Dominus without Bootstrap or other css frameworks.'>\n\n\n  <meta property='og:type' content='article'>\n  <meta property='og:url' content='https://getdatepicker.com/docs/6/examples/no-styles.html'>\n  <meta property='og:title' content='Examples - No Styles'>\n  <meta property='og:description' content='Examples using Tempus Dominus without Bootstrap or other css frameworks.'>\n  <meta class='metaImage' property='og:image' content=''>\n\n  <meta property='article:published_time' content='2021-07-08T04:00:00.000Z'>\n  <meta property='article:modified_time' content='2021-07-08T04:00:00.000Z'>\n  <meta property='article:tag' content='datepicker, javascript, open source, tempus dominus, eonasdan'>\n  <meta property='article:author' content='Jonathan Peterson'>\n  <meta property='article:section' content='Technology'>\n\n\n  <meta property='twitter:card' content='summary_large_image'>\n  <meta property='twitter:site' content='@eonasdan'>\n  <meta property='twitter:creator' content='@eonasdan'>\n  <meta property='twitter:url' content='https://getdatepicker.com/docs/6/examples/no-styles.html'>\n  <meta property='twitter:title' content='Examples - No Styles'>\n  <meta property='twitter:description' content='Examples using Tempus Dominus without Bootstrap or other css frameworks.'>\n  <meta class='metaImage' property='twitter:image' content=''>\n\n\n  <script src='/js/bundle.min.js'></script>\n  <script src='/6/js/tempus-dominus.js'></script>\n  <link rel='stylesheet' href='/6/css/tempus-dominus.css'>\n\n</head>\n\n<body>\n<div id='outerContainer' class='container-xxl my-md-4 bd-layout'>\n  <main class='bd-main order-1'>\n    <div class='bd-intro ps-lg-4'>\n      <div class='d-md-flex align-items-center justify-content-between'>\n        <h1 class='bd-title title' id='content'>Examples without external styles</h1>\n      </div>\n    </div>\n    <div id='mainContent' class='bd-content ps-lg-4'>\n      <div class='row'>\n        <p>\n        This page is to demonstrate that the picker can be used free of other styling.\n        </p>\n        <p>\n          For full examples and to return to the main site <a href='index.html'>click here</a>.\n        </p>\n      </div>\n      <div class='row'>\n        <div class='tab-pane fade show active' id='datetimepicker1Html' role='tabpanel'\n             aria-labelledby='datetimepicker1Html-tab'>\n         <pre>\n           <code class='language-html'>\n &lt;div\n     class='input-group'\n     id='datetimepicker1'\n     data-td-target-input='nearest'\n     data-td-target-toggle='nearest'\n &gt;\n   &lt;input\n     id='datetimepicker1Input'\n     type='text'\n     class='form-control'\n     data-td-target='#datetimepicker1'\n   /&gt;\n   &lt;span\n     class='input-group-text'\n     data-td-target='#datetimepicker1'\n     data-td-toggle='datetimepicker'\n   &gt;\n     &lt;span class='fas fa-calendar'&gt;&lt;/span&gt;\n   &lt;/span&gt;\n &lt;/div&gt;\n           </code>\n         </pre>\n        </div>\n        <div class='tab-pane fade' id='datetimepicker1Js' role='tabpanel' aria-labelledby='datetimepicker1Js-tab'>\n         <pre>           <code class='language-javascript'>\n new tempusDominus.TempusDominus(document.getElementById('datetimepicker1'));\n           </code>\n         </pre>\n        </div>\n\n        <div class='container'>\n          <div class='row'>\n            <div class='col-sm-6'>\n              <label for='datetimepicker1Input' class='form-label'>Simple picker</label>\n              <div class='input-group ' id='datetimepicker1' data-td-target-input='nearest'\n                   data-td-target-toggle='nearest'>\n                <input id='datetimepicker1Input' type='text' class='form-control' data-td-target='#datetimepicker1'>\n                <span class='input-group-text' data-td-target='#datetimepicker1' data-td-toggle='datetimepicker'>\n               <span class='fas fa-calendar'></span>\n             </span>\n              </div>\n            </div>\n          </div>\n        </div>\n        <script type='text/javascript'>\n          new tempusDominus.TempusDominus(document.getElementById('datetimepicker1'));\n        </script>\n      </div>\n    </div>\n  </main>\n</div>\n<style>\n    /* these styles are here to keep the pickers off the edge of the screen */\n    .container {\n        width: 100%;\n        padding-right: 0.75rem;\n        padding-left: 0.75rem;\n        margin-right: auto;\n        margin-left: auto;\n        max-width: 80vh;\n    }\n    .row {\n        --bs-gutter-x: 1.5rem;\n        --bs-gutter-y: 0;\n        display: flex;\n        flex-wrap: wrap;\n        margin-top: calc(var(--bs-gutter-y) * -1);\n        margin-right: calc(var(--bs-gutter-x) / -2);\n        margin-left: calc(var(--bs-gutter-x) / -2);\n    }\n</style>\n<script src='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/solid.min.js'\n        integrity='sha512-Qc+cBMt/4/KXJ1F6nNQahXIsgPygHM4S2XWChoumV8qkpZ9oO+gBDBEpOxgbkQQ/6DlHx6cUxa5nBhEbuiR8xw=='\n        crossorigin='anonymous' referrerpolicy='no-referrer'></script>\n<script defer='' src='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/brands.min.js'\n        integrity='sha512-vefaKmSAX3XohXhN50vLfnK12TPIO+4uRpHjXVkX726CqbicEiAQGRzsMTE+EpLkBk4noUcUYu6AQ5af2vfRLA=='\n        crossorigin='anonymous' referrerpolicy='no-referrer'></script>\n<script defer='' src='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/fontawesome.min.js'\n        integrity='sha512-KCwrxBJebca0PPOaHELfqGtqkUlFUCuqCnmtydvBSTnJrBirJ55hRG5xcP4R9Rdx9Fz9IF3Yw6Rx40uhuAHR8Q=='\n        crossorigin='anonymous' referrerpolicy='no-referrer'></script>\n\n<script defer='' src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/prism.min.js'\n        integrity='sha512-YBk7HhgDZvBxmtOfUdvX0z8IH2d10Hp3aEygaMNhtF8fSOvBZ16D/1bXZTJV6ndk/L/DlXxYStP8jrF77v2MIg=='\n        crossorigin='anonymous'></script>\n<script defer='' src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/components/prism-javascript.min.js'\n        integrity='sha512-I4ZWqUpk7wqHcm7Gkv7k4IdgrDUTlGm1a7xeqyduqZLWeoGOn2E9us4XNBEDGclpk+6d1CmqIHYwmoyyL59zeA=='\n        crossorigin='anonymous'></script>\n<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism-tomorrow.min.css'\n      integrity='sha512-vswe+cgvic/XBoF1OcM/TeJ2FW0OofqAVdCZiEYkd6dwGXthvkSFWOoGGJgS2CW70VK5dQM5Oh+7ne47s74VTg=='\n      crossorigin='anonymous'>\n<script src='https://storage.ko-fi.com/cdn/scripts/overlay-widget.js'></script>\n<script defer=''>\n  kofiWidgetOverlay.draw('eonasdan', {\n    'type': 'floating-chat',\n    'floating-chat.donateButton.text': 'Support me',\n    'floating-chat.donateButton.background-color': '#323842',\n    'floating-chat.donateButton.text-color': '#fff'\n  });\n</script>\n</body>\n</html>\n"
  },
  {
    "path": "src/docs/assets/repl-data.json",
    "content": "{\n  \"note\": \"These are compressed JSON objects of different examples that can be loaded into the REPL code param. They are generated with https://stackblitz.com/edit/js-wpnd4a?file=index.js\",\n  \"iconOnly\": \"N4IgVgzgwg9gdgMwJYHMDycA2BPEAuAFwCcBXAUwBpwJ8QQqALAgW01oB4IAHAQzgB04AAiFIAJgF4A5GJ4EyBJMzJckAYwDWZIgEYpgkWsw8IEaZhgoAtGQBuZOAX3ChEAtkxlpYpN2PY8USwkODIrACMLTSkAPgMhdiQhIxMzKQQeKwgYTHEhDKs1Hk84WSJ8zIA2AA8pIR4iJEyGcTEHaWJyWPYAeiQ4l17uPhj6ECZWADkYeQ4uGIBBTEwhbBgSIVCyMVEIeuEyT2VHIQIYeoICHjUGU4YyIVVNbVOYADpe+ZAAXyA\",\n  \"sideBySide\": \"N4IgVgzgwg9gdgMwJYHMDycA2BPEAuAFwCcBXAUwBpwJ8QATJCAB0wENs8ACYAHTk4GcISOmQBC2AMoiyXYuT4CAviCoALAgFtMtADxMAfABU1jTqM3wIxVgTIROBNWSEyAtACNsb4aM4wmAiR4ADpdAHpDRU5dNg8yTE4EGCIAXgByOlsyIM0yJiQAYwBrMiIARgBJOCYSAnTOQrYICAzkok03OIT0g2lRT29+lwKSsojuzAM+XQYAN2im1haMpBq6txQiGBImTkwYFDcyObI4euiRDKy7XPyi0or06JvWNwI6d9YiFBy3NdqBAycDI33sF345lsbw+Xx+fwIhxQmDIwNBRHBzzg0zgugBdUudGu2Tuo0eVXWEIEBGwTFR6TsAA8qY1mq10u1OoV4MQYJgsQJXu9PgRvr8gekAMQ3HJIPJksrlLHhHG6ZisOCLNmrSmbba7d5kZkCqGi4Vw8UZaUkuX3MZPF7Q82IlDI+ky0kPMpYnGCNVMDWs5bshBvCB8kRJN6FVgouBZIi9CLq7GKZMB1O48LzX2cVQgDTaAByMDsekMJjMFisNjsDicLl8ZEGPhk-kCwTgYUiBhASiAA\",\n  \"localization\": \"N4IgVgzgwg9gdgMwJYHMDycA2BPEAuAFwCcBXAUwBpwJ8RMYBjAQ0yQC8mCl48ACYADpwCMACZNsfAOSB8EECsIIAEQOYE4QQEIggDhBegQRA5gZhBAfCCAWEEC8IIHkQKRSENMZJkWmA8EEDiIOq0bVgGRBegJhBA0iCG5QG4QOWN1OQsreggyaUB0EEAGEEAuEAVfT21ARhB9BUBJEHVEiLhomwYCAFl4AgALaUAkEF90hXi0wB4QOS1TQDEQAoAHIjIAN24SCHLhat5ZJUN-QGEQXOVeVvauyzg4MgAPMorxqRrtYMMZwDkQbLlmxbbO8NWishKATVt7CbqGpq8DQx6+wZhhp52aQyKazea8L4FdZbQEvPYHORHU7nCFGGYFO4lAAi9yYohir3qjTSAXaGmCGhuQl6AyGEBxzHxwNBRzOcl4pNM5LklKhmwIDLxBKkgEIQQ4nNkcq7c3mrGl-YZQMjCEhESQTEGIsHqBbeOT5VbQghKlVq6RixESnU+fU9JAMADWAAl-nC3op1Kp2U54loCkg4Aw+gBbZUEF2q2pKZqmXgzPWBdROELqcyrfFBsih4QRuGAYhBWsYPIAJEE9Xh9frl9odpQDJAIwrexK8zXUxhmqnRqwDmezZTrDekgBwQNsd+K8QD8IAp1I0zqE00IMyGw7W4PXhQWQiWy4tR527Y6AMr3eCiWpEj4+VRZfTKf2B5fCY8MU-SPMJpMp9k6RIzYzTAolyzMNn1fCZNyLYsv20fU-wA1YRBQFAbFKMgiCQUQkCzYFFH1QJjhcNIJw9IwMTIYoCAAFSQUNz3eNJvGjBdCnI+4BU4RsLxJJou0XCQADUsIAdydWx8SIAAxGAiGDTg+GAXhgx2aR6DgFALF4bBnmkAAmABaTCUCQAgpF4ABfVZ6GYGxpFIDECDsAg0AQSjKjIAB1MgyAdPgAEYhHMkAqEqAhg0wWggpAEKwoAORgBtaAAHm6AA+IQHn+XhmDgXhehgQZ8V4KyWHYThuBymBui4eAIF4EReHytD0MKqoyDqmAYEwLhulqphaqE8jMF4Pq6rc3hxGwAB6JSxnGpAIG6TAJAAOiERLJtStbNrgVz5qypgcoAIza6ICF4ZCYEOlgcF4QYmF4RKX3xFKG2DbphixGBgzrCBlpxBAmBILq0Cq8rfuK1gOGqnKAF5+F4ZbEfM9anrIFKGqIXhDuwKw+jKtThtuuwkCYQ6bF4MhlpQZaHtRlKX0KM7SF4OGFJECa8FkXC1E0HQvjMUzEZpsyAG4UbENHRuVXKiHyjC2tahrQZqoQ+rWja0rgZK+k1x6JaypaIAgGGpCWtSSCYFAyD0sAmH6PqgyQKqpE19YhLqrN3vpL6fuWyjPY+n21wgAAKURGBIPsqbIAgAFEbD7AAhbAAElRBDqRxAbLhQ26as0J0qQAEoKH4IQIdK6G+FIIQzPVun1ZpXXttctC2rsNqIbaxaSCMwpRs4GW5ZatzoiKxgWDIX7G813heBAMygA\",\n  \"timeOnly\": \"N4IgVgzgwg9gdgMwJYHMDycA2BPEAuAFwCcBXAUwBpwJ8QATJCAB0wENs8ACYAHTk4GcAbkjIB3ALIw6ZLgHIAxphgKA1nIp9BnBTAC2TeGTgEIXXv22cZC1jLOcErTBEpar2MqyJcnLt5baevAEABa+zq6agYJ0rASyjpEBVpyhMCREDsTk0al6SHAkCdmkKVauunB0Dn6u7gIAvu6NIFShBHqYtG0gHV0AcjAJtAA8TAB87gBqZFlI8JwAbJxwMJzKcChznCSuEJxSesYEAFIHEOuumGQKBIUonGFknGKh8U-rDMxs2JyMqxgYmsRmESFYT1CL1GuhkE2+LHYADpdAYjCYIKMAPSwsgTJF8bGTECNIA\",\n  \"inputOnly\": \"N4IgVgzgwg9gdgMwJYHMDycA2BPEAuAFwCcBXAUwBpwJ8QQqALAgW01oB5MBDAIzMwAECGEQC8AcgAmXAmQJJmZAA5IAxgGsyRAIziBq7hAgThRZgFpufTOIB8AORgC18dgHor-WwB04AgexIcEokBL7+-kiSEtKy8ooqGlq64REE2EpkErIAHgTiqf4GXEYmIhaq8MQwNqlutvQgTKyOshxKtgCCfkEhBAIoRDAkSgJccJLOlX5cRGQCcDD9cwCOJEhzk6YCBAzziZpEO04IJHCq8vAUAtjD+uNjmBBOEApKOAIkEPMPvaFCSH4kgAdO4OiAAL5AA\",\n  \"enabledDates\": \"N4IgVgzgwg9gdgMwJYHMDycA2BPEAuBAQ0wgFMAacCfEJAWwAcYAnAFwAJh2AVUxgVwgARGHSRxB5dkMKtS3eqXYBfdgmaj2AcgACpeIQgATQnAD0cgRAC0R0eMFaA3AB04b9uwDG8CB1aiLBoA7uwAvOxwpKEycgAUAJSucJ4BdEEwwQB0ZKyxpHFpGdkopHmyBQnsANTsAIxJHpHRPHwMgiJiEhBxdl78dKRwrFmlrACimHxDrABC2ACSRnFaJnKsigxIXgDWpMx1WglSwE2ezKR+zNsbvnicZ57sRkgQhABGU0b5EPcA2o8nuwiswQuRAU8ojEKgpBoksnRTEh2pgKnEAExSVYVI7glJA9gAXTxQOUJJUSRAlAAFqw6JgaFSQLT6QA5GByGgAHgYAD5xnAPl8zEJXkLSEZpBUIFyzHymjzeQBNGD8bymdgMDQANyQRiUGsIoMI2HYMAQz2lwJg7CG4rNzEtcgg1ueYs+pCysr5IGUQA\",\n  \"linkedPickers\": \"N4IgVgzgwg9gdgMwJYHMDycA2BPEAuBAQ0wgFMAacCfEJAWwAcYAnAFwAJh2AVUxgVwgARGHSRxB5dgDlCdUhAaEAxqXYBfdgmaj2AcgACpeIQgATQnAD0rPg0EBaM6PGC9AbgA6cdu2+-leAgOTHEAa1IzAAUkZQjmAEYAUUw+UjgOAF52Z2V+eQyAOhRSVhS0jIAhbABJMwAKPVC4COjY+IgEvQBKLx92QLhg9mbWhPZsuFIAdx47QRExCQh60ciYuNJE8oLWXv8BoJDwyIAmCfYp2d4BYRdl+tz89NZi0p2X6rrGtbbN5ggpx6UmAB18glIUH4zGYLzwWmIZAO6n2-QOVisgnEKHYpAAbi8RkhgukthADr8NvFkqldoVCGYzEkCRkADLE2xTZj1WTyRQqUiFfEvCCFZQAC0sJSk9VI3QmAD5OGCiS0zoV+AwLLY0AxWEggvVQf1fL5YcFmLF9UF4cbTfb2EshIRbPDBWZSoQkJhCtrSCrfOoVSi+oHUb50ZiINj2BB+AAjCDKS3xtTyVjimBmA6DYZxxPJpB6g0+bK-U6FfNJlOkHlyBRKVRClmsUUSqUUdiy+WZJV202-BIarUu0i661DI0B9jm1iW5QTiC26e+OiEAAeztduN9o+nQZNGnDR9Dfn6GNxLaJJK5A0s7FT7H4QwT1aQqbM7FYMDwkdjr8LYt4A1F8CxrepehAShxVYOhMBoAAeMwkDxAZMFMCBMj0HRpj0BVvE8VgkJQtCMKwwJMAcCA6AcAA2PCCI4dgEPQ1NMC0FgsMpdoyQSGo4HsVg9FIiBML0BAWBo1jSEwPCADEdDoBCrGkzB8LgQjfGIvFGMI5R0NErDxEEhwUB0TURhgFAHGFDI9F0-UzC4k4-g6LoHO1QgHFYMxvMIZgSlYBxjP4VgsKmfyFCEjyXS8ny-IC0pvKslBUnC0hIuCeyNKY9TCMIhCQtYBzfCQJymhcqleP4wTsvypjWGwBhSCw2x12inLNJEsSJOYGjBjnGBZJKnJYu83zWH8wKsIAYm4-5Ojq4rWCsPLloQ-kNM6pj9LIvQitM8yGG80h2qWrrPPGhLpr0ObKp4gF3O23xLvi78UFSlq9D9fV5AYB7ztYNauuYzbuqwogqKGsqEQcZRiHSCxmDw5TNuBjhUaUOA1q0qxkLxNblPxwn8fBvQKKomj6Jx5jVI45hnLVVyyVOGrQuE3bDPEySHFUvDuBgZTVJp7SHM5sSDrMmALMwKybJbQGysZ1oqoBIEYsmq7JsSoKivSzKOvq16JqmpL3s+-XZyW3x0cKgTQpGpWKqZ1XATZw3lt8Rrmta06Pa68WIZ5gadGG57Rs1t7TbC275o6dXttWhyNqxkbA-2+2gqlzUTrOkbjeu0pZrjlnAZesa3pStLvtHX7SH+-5AfR00U-vdPIYgaHP0h+HUjgJGUasNGSsxywRbxlDCYngnvCJyeoJAGC4OkGBbEQhgFXZJn2AbjplI3hCN4OABNaW7x8CFL0JUIbzJdgWC-cU1CrQtH3TTNP2-VUwi-aYYB3h6EAvxWVKE-ZghR2ByQfqdOQDBUhSEIOwTMth2LBEINgA48YYAwDCNiQos8rBHzgCAdQQA\",\n  \"customIcons\": \"N4IgVgzgwg9gdgMwJYHMDycA2BPEAuAFwCcBXAUwBpwJ8QATJCAB0wENs8ACYAHTk4GckAY3gQuvfoIEEkAWzJcA5ACMknNQFphmGMIDWSin2kC6rAos6r1W4a0xk45okZOmSTZWo1JNrIiIYAHdNTzcpaToQuG9bPwCg0OjguAjTTiYiMgA3JBgScWsfOwALXKC4TUcEAnTTODIADwI4321ynMrNIlRSuuNIwQIYcw5i+O0HJxcOsgN66R0yALatYlYIUsXBHRgIKxt2pp2AX0HpFRICEbgiyQyRsa5icgvTZdXOV8p3Jd0Di9SL8hud3KcQFR+nJMLQADwMHLuHSbCAAXh4ICQcCY100KCCnk4uhQmlyTgImPcSDoGPoFjIsgUTBE+jIRAAjFSpOYCKxNAQ6AKAihGZpsbiCHTGgEyBBKSB3Lz+YLhURRQQBTAUChHNKVtl5dyAHzuOES65-IS0zG8xnyMgsgzsjkASRxlsVQwI2CYZDplha3P+qLpCBgRDk2ngxBgmGDgmVAqFfPVjLpAGI7UzHayXQmAPSmqRw5isOBWlEQdGYi2agkFJgC5oKq1J1WpjWZ7MOp1szkJswWFUp7W6-22hk5vvshPF6SlpjlzhVmsgEp+eyOZwBTHGuEFstweecA9H4sHxEXzDY-ScbKYOny7COLZkRmYzilbIIOn9AhMOIBYFsIdBwAAdJAdBkDeXTgY0BAFjicgFioMAwAQ8pEKwTYiGIAACHLgQAnOBHIFuGcCIWhGFYTh4qiHc4HCNWe6QiA0KYAAchhZDwkwxpQIUIxyJwrqMRAB4CXCAnuAAmgUK7LsIpTlqK3zlEIEmcAgQSiQQmkAGIxpwACCwRyjACicNBCCsCQmAEN8MCcOWGHlEQWnwFaAgHE5N5sqerBfj+aJKP+gF4MBeFMRqNGYRsTDMVZBZKN8IrpkoAD6KhsHAhj3jBYVwOhfqNK4xoAELoQl2FMEoEBiYxB6sBeBayXAICnEAA\",\n  \"viewMode\": \"N4IgVgzgwg9gdgMwJYHMDycA2BPEAuAFwCcBXAUwBpwJ8QATJCAB0wENs8ACYAHTk4GcAbkjIB3ALIw6ZLgHJsZVkQhy+AgL4gqACwIBbTLW0g9hgHIwCZWgB4mAPgBqosZykzbAekf2H6zgAVHTJhV059aVCYJgIkeAhOVkxMGDFE7BgSTgIYTggdNKTOBgQEMiIyOAJOJDgkOOSw8QA6TgAxGCJOMgAPVn0WUIgyTDIAYzi4FGK6VmtOGAROACMkIgIdFr5vRz4QDSA\",\n  \"disableWeekday\": \"N4IgVgzgwg9gdgMwJYHMDycA2BPEAuAFwCcBXAUwBpwJ8QiyJikBjApeCPAAmAB04ugrgBMAhtghoEAdTJkA1gBEkEUQCNMZYdwDaABgpcAbAF1+ggL4gqACwIBbTLWsg7jgHIwCZWgB4ADgB8yqoaWlyK4hBcMAhcBDZkXLIKvgD0QQGB5lwAmjAkXMyiAsIq6poiUTFxCUkA7nLyXJhI8kkAyiRwYthcABR6AJRcJcJcHaIEJES9A0ZD-OlB-CAWQA\",\n  \"inline\": \"N4IgVgzgwg9gdgMwJYHMDycA2BPEAuAFwCcBXAUwBpwJ8QATJCAB0wENs8ACYAHTk4GckWYWS7FyfAQF8QVABYEAtploAeNgCMymTghhEAvAHI6rAmQJIlZJkgDGAazJEAjMc722ECCf1ElAFotHWMAPgBJETgyNQB6EMwwqU41BgA3FIEvVh8TTBgUQLJ0sjgCYyyhOhMzCysbOycXdxTk-lS4jLC5EEUVADkYC3UmSOjYuLG1MYBNGBJPVn5WTAgYThIIMk4CeR2m5yIhCYA6eLG+EGkgA\",\n  \"multipleDates\": \"N4IgVgzgwg9gdgMwJYHMDycA2BPEAuAFwCcBXAUwBpwJ8QBbEzApAB0zIBEBDAsiPAATFyIKgAsCdTLVEgJUgHIxetADwsAfAFlGzNmQHdeEVQHpN6jQBUxBlkgDGAazJEBXTJhgB3CAIQwbgxMrOwCACY8fEIwAgBGBhBk7A684QB0ZpoAOnAgAL5AA\",\n  \"updateOptions\": \"N4IgVgzgwg9gdgMwJYHMDycA2BPEAuBAQ0wgFMAacCfEJAWwAcYAnAFwAJh2AVUxgVwgARGHSRxB7AL7sEzUewDkAAVLxCEACaE4AelZ8GggLSbR4wYoDcAHTh2AxvAgcHACx0pSaBqyTOAIX5WVnh2AF52Mwd+OlI4VgA6L1YAUUw+eNYA7ABJTQAKRXdPb19-OAhFAEpbOCdKjjIQ8XRy5wAFJAcAa1JmCPY4UgB3HkNBETEJCALo2Kzk0jSMuISc-KLtAz84hm6+5gBGGtq7OwyOMMiiElJHDzgvHz9A4NC4RMJNTVSANyyABkkC54v0ig5MAdFOR2AVqhEAHycOzNPxPF4VCBdXr9RL8BjbMqvSoFYB2ZikFzMbokiB4FFwbTYCBoBAAdVIpB6QhBhAARhlNAywgB+dgAbQAuuwGRKAAywgBsUrsUjVZzg13YAEJ4HUSk9iVigiF4IlIRoIMCXIlQigUBkivzWHBjAwaXRCMxsDUDY9nu1KqaPhbMFabUl7Y7SM7XcYyA1tD6-RqrCBKG5WHRMDQADzh-mkTCyFjhGwgIm7Uj7XHHXJwIysCvsS0QCDlkAIFh0YyF4sVxE4w553T9zCIux5zRIP6OcPtzviJvGFDyAnsTAwFDGUgAhIVuxITSdqv0GsHfpHQ9MwisQjGViaR-elLGZfBTvDb1U5sgOzbA+T4vswb7RhkX6kD+Lg3pOcB5h+zZwMep53ss561ocRwNk2N6sNgDCkJ2BgAB5-vOVqdt2zC9g0rDyJgN6AY+z73qByydgAxGeeyXscN66HBeYQAwOgUYuFaIau64MI+pBkUxd5Aaxr4cRW3FodWmFXop94sY+24xqhOwYXxsFTkgrYLh2FZEBAsgPg4xDxMmg6jkgQm6CJOieTOfxCX5VmUYo8hjHQrDGAAzIoAWzkFi7FDAmAJr2SoxVO-LvGEKHFAGxrOIo8UdooLpwOwpXup63q+oi3CGRkUR8oKpCaOwIxcn0TIQKOmVmnAvmzgN-kZiAWY5gAcjABj5gwiIAKqEmh7AwEG3W6LNeazewACaMD8K2OjsB6MB-MepDsIQQyjOwzTLQgy2reV2AHZgUJPOweZOJopCIgSRKYs4BQSsMIwA5UUrVKOX0-YkPBuCCsj8PUJIXSQMB2OwqNbiM9nYHt7ChOwlK3awbjnStdLlYQvQEzABNk1EpBEPwmBXAMcTsfT50gw9lMjEgpNc4zzOs+w4igt8d1C-JILoigvNYk9R1Wq0H3Q4i9H8KQUMwN9yIaELiYo6JzCEHEBjMIko6zXYIBSEAA\",\n  \"parentContainer\": \"N4IgVgzgwg9gdgMwJYHMDycA2BPEAuAFwCcBXAUwBpwJ8QBjeAgQyTjKLwAIATGOkgLZk4BAHQBHckWwBlMpjJ0CMIgAoA5NyQA3AMQAHJkWEEAtAxEs2RdQEoQVABYEBmWgB4t2zkm4BedUNjEXNGK3Z1TjpMJggIAOMYgh0yTn1TAFZIiAJsBQCYbXYETBgAdy4mEmUAbk5HMlRnLgBGAAY2-QAPOrLfAkdWjoBSGvUAPgAdOE5OdxiAI3lOBBUAi2ZWdgARJgIyAAUkOgBrdgBJOH1qifcAekX5KZm5ryiYuIDWa7MUIhgSPpOKUUKYyEURJFfAFuHsyMkhPpjmciC1IrDmKYCNwsUYUPDTN9qgE2EYyDl1NNZtTZhimFiccwiPizMoUCh8upScYKc8ae4iQQfP51BtwkRdvsjqcLlcbpxcvoyAF9l0CJForF4upVkQBKERP9MJE7nzqe4IIYZprPupBaY-gD0qr1Tw9vTsbjmfCAroIPDknB0PpkvAIJSXjSaXSGViYOzORj4UhEciImb+ZamNaPtqEPSIDBML4VvS6EwFHBYTZxvcs3AM3M7vWzfcvM82zpxg4QM5XAA5GD7Dz6cYHMkiTiwSxbIj3UfuUcATQBUWznEtiiQCGwPgQCoaaTTRA3jgBmG4nCWnD2zDoDUvygPqV4-CEk4WMG4u5UN43Srobdjk4eQyHfMR52eEAAF8gA\",\n  \"functions\": \"N4IgVgzgwg9gdgMwJYHMDycA2BPEAuBAQ0wgFMAacCfEJAWwAcYAnAFwAJh2AVUxgVwgARGHSRxB7AL7sEzUewDkAAVLxCEACaE4AelZ8GggLSbR4wYoDcAHTh2AxvAgcE-OA9ZJ4AGRgp2AF52AAoGZlJkAA9ydgA3Yn5SAEoggD5OO0x-FFJmELMHfjpSOFYAOlzWAFFMPlLWACFsAElNEMVslEVk8jtO-0U+uHDIpBi7BMwk5Ns4KTn2dkdnDgYkBwBrPIAxd09vOAgg9jhSAHceQ0ERMQkIApgikrLK0hq6l6bW9sVtAy8JXWWzyAEYerFgHY6PxMF4GHUhIQDBA8OxWMwksNNEgIAjCNg0VCPKImGcyqjMh5sls0UQSKQ7FImUzZnYlnZCsUGm8PvUys02h0qkiDD1yoRNJpqnEGj5cQYzvlFA5MBtNkNQqlAhlibpdF1jsRMOwyHVPKRNOx-qQIHY3B4vL5-B1jabSOaDJpNQApADKaAAcuUXMxxCgkAhsGF1bt9k6juUbRBysDtppYhJMJhYgAmZJsvQG-zHVgAC1I7EwGg4ZtIFs09vjhz8KA61Zc7s9ls1abjjsOKeT5Q7rAACrHNIX9Yb0RWu-WvexxJpSFFyjwy7j2OckNn2MRzgTjgAjSsABmXCHYMLhSARpFFtuXx3pZCbA+dbc6NYXDeXcCrlEvaxsweyfomw6jhOIKaC0gFroWUiFhygFPNyrxVLU-LfEKihkKwT7ipK0qymU8ouKUeQdKq6qaiE2q6nY+oMIQzBkPBRgcLu+7IgYjAcKwMDovwzBwKaGLhkagHsE+7AwCeYCLqWwmELJyKkNw9CVgpSmeOUKxHGsbFkJocnBH2YHNs4SYaSmrHsaQnH8KwIRnJcT4hLm57ebEAAssSgueBZzPqkY3rC8KInZL6yMQZCxOWlZkE4MkOYQJQGMwsVwDAHARAAjvwSARJoBkjKB4EHDZw4EQAaokpBhCZlpPrEllVQmQ52SONYwem8FAUhswgJQZasHQmA0AAPNWZ4mggLCBDYIA2oCpCWaCzmsCt7CqhoEDLSAi3MHQxhzR6K1pP1eTTQahDzWkdjTTicSOB2h0reIXHGCg8j8AwVb+MYpBkTtIB2EgmhHWt2mbStnLIoQxisJoKNsVUxjfS5R1nGxtrg4jrDI6j6PMJjQkoCgdS46Q+MuAjcBPXA03YztcBQzDGnrZt22M6w2AMKQR0GFEhPUgdR0nWdqUYjAmCM-8JNo8T5PvEdADEsNAqBoKM7ozPTXiOjvZLX0jC5v3-QwKNruLSsoyrGPqytWvc3DuuK0jjsozkNMrdrG2gYzhtIHtH1SxocXGA4xClNozBXXdSCG7oxtM89uivYbr3h5LijyJcdCsMYADMig50gcR5xAh0qvLxgQGdABsFfPSeLlCeJnOKCKGmKDXdcnqw4nD3AxjhPQbHYDepBlxXADi7zqQYd0d6wXeG+vXfLtD+HvERg+BIoY-sGPE9hnQ08V36y9yUJ7DebmubGOeACsxhBWvnfwKn2eZ9nUaIBxqTUDHlUgM0GDXVAuwTqg47pQOmlA7gW5jgQDLDAc4RpZAXFkNZcSsdswpgQWkEAUggA\",\n  \"theme\": \"N4IgVgzgwg9gdgMwJYHMDycA2BPEAuAFwCcBXAUwBpwJ8QATJCAB0wENs8ACYAHTk4GcCACzIBbMlwDkdVkQDWUvgIC+IKsIJjMtdSE3aAcjAJlaAHiYA+ACqiJ5gPTXLVgJowSnAMat+rTAgYTmYybyQEbCFRaPEyTgQYIljOJiRveTIiADonaz4QFSA\",\n  \"plugins\": \"N4IgVgzgwg9gdgMwJYHMDycA2BPEAuBAQ0wgFMAacCfEJAWwAcYAnAFwAJh2AVUxgVwgARGHSRxB5dgDdSzCEnhTSAD1ak4AE3YBfdgmaj2AcgACpeIQibCcAPTqBEALSbR4wcYDcAHTh-6JjZOdkwYQk0pIgAxJFkASQBjeAhdfUM6E3NLa1sHPgZBV3cJCDtNJAhWOwZMfhRxMqJnZFlvP1V1LQAKMIiASl9-ODhSAHceAsERMVLuv3Z2N0T+Og1WADoUUlYAUUw+dYAhbHjNbuMbdVZ6UgYkRIBrOQBGY37yBc4vxYqIWsI2Dw3zgizB7AeKWBMTipCSKU+oLBOkRix0fkGIEoAAtWHRMDQsSBcfiAHIwdQ0AA8DAAfNxsZV2KpCIwDuwINiYGNUoJxCh2KxsaR2LV6uIOdgqnwqTVaX4QDogA\"\n}\n"
  },
  {
    "path": "src/docs/js/docs.js",
    "content": "document.addEventListener('DOMContentLoaded', () => {\n  const subToc = document.getElementById('subToc');\n\n  if (subToc) {\n    document.getElementById('tocContents').innerHTML = subToc.innerHTML;\n    document.getElementById('tocContainer').classList.remove('d-none');\n  }\n});\n"
  },
  {
    "path": "src/docs/js/migration.js",
    "content": "document.addEventListener('DOMContentLoaded', () => {\n  if (!document.getElementById('migration')) {\n    return;\n  }\n\n  const alertBox = document.getElementById('alert');\n  const createAlert = (message, style) => {\n    const div = document.createElement('div');\n    div.className = `alert alert-${style} alert-dismissible fade show`;\n    div.innerHTML = `${message}<button type='button' class='btn-close' data-bs-dismiss='alert' aria-label='Close'></button>`;\n    alertBox.appendChild(div);\n  };\n\n  class JsConvert {\n    constructor() {\n      this.input = document.getElementById('from');\n      this.output = document.getElementById('to');\n      this.convertButton = document.getElementById('convertButton');\n      this.datetimepicker1 = new tempusDominus.TempusDominus(document.getElementById('datetimepicker1'));\n      this.convertedConfiguration = undefined;\n      this.convertButton.addEventListener('click', this.convert.bind(this));\n      this.input.addEventListener('change', this.convert.bind(this));\n\n      document.getElementById('tryIt').addEventListener('click', () => {\n        // run if it hasn't been for some reason\n        if (!this.convertedConfiguration) this.convert();\n        // if still no config, then there was an error.\n        if (!this.convertedConfiguration) return;\n\n        this.datetimepicker1.updateOptions(this.convertedConfiguration);\n      });\n    }\n\n    convert() {\n      this.convertedConfiguration = undefined;\n      alertBox.innerHTML = '';\n      this.output.value = '';\n      const value = this.input.value;\n\n      if (!value) {\n        this.output.value = 'No configuration was provided.';\n        return;\n      }\n\n      if (value.includes('moment')) {\n        createAlert(\n          'I can\\'t convert moment objects. See Exception 1.',\n          'danger'\n        );\n        return;\n      }\n\n      if (value.match(/[()<>]/gi)) {\n        createAlert(\n          'Can\\'t parse functions or object initializations like new Date(). See Exception 2.',\n          'danger'\n        );\n        return;\n      }\n\n      try {\n        let config = Function('\"use strict\";return (' + value + ')')();\n        const newOptions = {};\n\n        const prop = prop => obj => {\n          const value = obj[prop];\n          if (value) return value;\n          else {\n            obj[prop] = {};\n            return obj[prop];\n          }\n        };\n\n        const ensurePath = (paths, obj) => paths.split('.').reduce((value, key) => prop(key)(value), obj);\n\n        const differentAccepts = (key) => {\n          if (['viewMode', 'toolbarPlacement'].includes(key))\n            createAlert(`${key} takes a different set of values. Verify this option.`, 'warning');\n        };\n\n        Object.entries(config).forEach(([key, value]) => {\n          differentAccepts(key);\n          switch (key) {\n            case 'format':\n              createAlert('Format is no longer used to determine component display. See <a href=\"options.html#displayComponents\" target=\"_blank\">component usage</a> and <a href=\"options.html#hooksInputFormat\" target=\"_blank\">input formatting</a>.', 'warning');\n              ensurePath('display', newOptions);\n              newOptions.display.components = {\n                calendar: true,\n                date: true,\n                month: true,\n                year: true,\n                decades: true,\n                clock: true,\n                hours: true,\n                minutes: true,\n                seconds: false,\n                useTwentyfourHour: false\n              };\n              break;\n            case 'icons':\n            case 'sideBySide':\n            case 'calendarWeeks':\n            case 'viewMode':\n            case 'toolbarPlacement':\n            case 'inline':\n              ensurePath('display', newOptions);\n              newOptions.display[key] = value;\n              break;\n            case 'dayViewHeaderFormat':\n              createAlert('Moment is no longer supported. This \"dayViewHeaderFormat\" now accepts Intl formats. See <a href=\"options.html#localizationDayViewHeaderFormat\" target=\"_blank\">localization usage</a>', 'warning');\n              ensurePath('localization', newOptions);\n              newOptions.localization.dayViewHeaderFormat = { month: 'long', year: '2-digit' };\n              break;\n            case 'extraFormats':\n            case 'collapse':\n            case 'useStrict':\n            case 'widgetPositioning':\n            case 'widgetParent':\n            case 'keyBinds':\n            case 'ignoreReadonly':\n            case 'focusOnShow':\n            case 'timeZone':\n              createAlert(`${key} is no longer supported and was ignored.`, 'danger');\n              break;\n            case 'minDate':\n            case 'maxDate':\n            case 'enabledDates':\n            case 'disabledDates':\n            case 'enabledHours':\n            case 'disabledHours':\n            case 'daysOfWeekDisabled':\n              ensurePath('restrictions', newOptions);\n              newOptions.restrictions[key] = value;\n              break;\n            case 'disabledTimeIntervals':\n              ensurePath('restrictions', newOptions);\n              createAlert('The \"disabledTimeIntervals\" option now expects an array of <code>{ from: x, to: y}</code> See <a href=\"options.html#restrictionsDisabledTimeIntervals\" target=\"_blank\">usage</a>', 'warning');\n              newOptions.restrictions.restrictions = [{ from: new Date(), to: new Date() }];\n              break;\n            case 'useCurrent':\n            case 'stepping':\n            case 'defaultDate':\n            case 'keepOpen':\n            case 'keepInvalid':\n            case 'debug':\n            case 'allowInputToggle':\n            case 'viewDate':\n              newOptions[key] = value;\n              break;\n            case 'locale':\n              createAlert('Moment is no longer supported. This \"locale\" now accepts Intl languages. See <a href=\"options.html#localizationLocale\" target=\"_blank\">localization usage</a>', 'warning');\n              ensurePath('localization', newOptions);\n              newOptions.localization.locale = value;\n              break;\n            case 'showTodayButton':\n            case 'showClear':\n            case 'showClose':\n            case 'buttons':\n              ensurePath('display.buttons', newOptions);\n              const handleButton = (k, v) => {\n                newOptions.display.buttons[k.replace('show', '').replace('Button', '').toLowerCase()] = v;\n              };\n              if (key === 'buttons') {\n                //v5\n                Object.entries(value).forEach(([k, v]) => handleButton(k, v));\n              } else {\n                //v4\n                handleButton(key, value);\n              }\n              break;\n            case 'tooltips':\n              ensurePath('localization', newOptions);\n              Object.entries(value).forEach(([k, v]) => {\n                if (k.startsWith('prev')) k = k.replace('prev', 'previous');\n                if (k === 'togglePeriod') k = 'toggleMeridiem';\n                newOptions.localization[k] = v;\n              });\n              break;\n            case 'allowMultidate':\n              newOptions.multipleDates = value;\n              break;\n            case 'multidateSeparator':\n              newOptions.multipleDatesSeparator = value;\n              break;\n            case 'parseInputDate':\n              createAlert(`\"parseInputDate\" is now <a href='options.html#hooksInputFormat' target='_blank'><code>hooks.inputParse</code></a> and takes a function that must return a <code>DateTime</code> object.`, 'danger');\n              ensurePath('hooks.inputParse', newOptions);\n              newOptions.hooks.inputParse = undefined;\n              break;\n          }\n        });\n\n        let outputValue = '{\\n';\n        let spacing = 0;\n\n        const readme = (obj) => {\n          Object.entries(obj).forEach(([key, value]) => {\n            if (!Array.isArray(value) && typeof value === 'object') {\n              spacing += 2;\n              outputValue += `${Array(spacing).fill(' ').join(' ')}${key}: {\\n`;\n              spacing += 2;\n              readme(value);\n              spacing -= 2;\n              outputValue += `${Array(spacing).fill(' ').join(' ')}}\\n`;\n              spacing -= 2;\n              return;\n            }\n            if (Array.isArray(value)) {\n              outputValue += `${Array(spacing).fill(' ').join(' ')}${key}: [${value}],\\n`;\n              return;\n            }\n            outputValue += `${Array(spacing).fill(' ').join(' ')}${key}: ${typeof value === 'string' ? `'${value}'` : value},\\n`;\n          });\n        };\n\n        readme(newOptions);\n        this.convertedConfiguration = newOptions;\n        this.output.value = `${outputValue}}`;\n      } catch (e) {\n        createAlert(`Something went wrong trying to perform a conversion. Please report your configuration settings.<br/>${e}`, 'danger');\n      }\n    }\n  }\n\n  class HtmlConvert {\n    constructor() {\n      this.input = document.getElementById('fromHtml');\n      this.output = document.getElementById('toHtml');\n      this.convertButton = document.getElementById('convertButtonHtml');\n      /*this.datetimepicker1 = new tempusDominus.TempusDominus(document.getElementById('datetimepicker1'));\n      this.convertedConfiguration = undefined;*/\n      this.convertButton.addEventListener('click', this.convert.bind(this));\n      this.input.addEventListener('change', this.convert.bind(this));\n\n      /*document.getElementById('tryIt').addEventListener('click', () => {\n        // run if it hasn't been for some reason\n        if (!this.convertedConfiguration) this.convert();\n        // if still no config, then there was an error.\n        if (!this.convertedConfiguration) return;\n\n        this.datetimepicker1.updateOptions(this.convertedConfiguration);\n      });*/\n    }\n\n    convert() {\n      this.convertedConfiguration = undefined;\n      alertBox.innerHTML = '';\n      this.output.value = '';\n      let value = this.input.value;\n\n      if (!value) {\n        this.output.value = 'No configuration was provided.';\n        return;\n      }\n\n      value = value.replace('data-target', 'data-td-target')\n        .replace('data-toggle', 'data-td-toggle');\n\n      this.output.value = value;\n    }\n  }\n\n  new JsConvert();\n  new HtmlConvert();\n});"
  },
  {
    "path": "src/docs/make.js",
    "content": "const fs = require('fs');\nconst jsdom = require('jsdom');\nconst { JSDOM } = jsdom;\nconst path = require('path');\nconst minifyHtml = require('html-minifier-terser').minify;\nconst dropCss = require('dropcss');\nconst { minify } = require('terser');\nconst sass = require('sass');\nconst chokidar = require('chokidar');\nconst rootDirectory = path.join('.', 'src', 'docs', 'partials');\nconst ParvusServer = require('@eonasdan/parvus-server').ParvusServer;\n\n\nclass PageMeta {\n  file;\n  title;\n  body;\n  postDate;\n  updateDate;\n  excerpt;\n  tags = '';\n\n  constructor(\n    file = '',\n    title = '',\n    body = '',\n    postDate = '',\n    updateDate = '',\n    excerpt = '',\n    tags = ''\n  ) {\n    this.file = file;\n    this.title = title;\n    this.body = body;\n    this.postDate = postDate;\n    this.updateDate = updateDate;\n    this.excerpt = excerpt;\n    this.tags = tags;\n  }\n\n  parse(metaTag) {\n    if (!metaTag) return;\n    const title = metaTag.querySelector('#title')?.innerHTML;\n    if (title) this.title = title;\n\n    const postDate = metaTag.querySelector('#post-date')?.innerHTML;\n    if (postDate) this.postDate = postDate;\n\n    const updateDate = metaTag.querySelector('#update-date')?.innerHTML;\n    if (updateDate) this.updateDate = updateDate;\n\n    const excerpt = metaTag.querySelector('#excerpt')?.innerHTML;\n    if (excerpt) this.excerpt = excerpt;\n\n    const tags = metaTag.querySelector('#tags')?.innerHTML;\n    if (tags) this.tags = tags;\n  }\n}\n\nclass FileInformation {\n  file;\n  isDirectory;\n  fullPath;\n  extension;\n  relativePath;\n\n  constructor(file, fullPath, isDirectory, extension) {\n    this.relativePath = fullPath\n      .replace(rootDirectory.replace(`.${path.sep}`, ''), '');\n    this.file = file;\n    this.fullPath = fullPath;\n    this.isDirectory = isDirectory;\n    this.extension = extension;\n  }\n}\n\nclass Build {\n  shellTemplate = '';\n  pageTemplate = '';\n  postLoopTemplate = '';\n  //create meta info\n  pagesMeta = [];\n\n  // prepare site map\n  siteMap = '';\n\n  css = '';\n  cssWhitelist = new Set();\n\n  async startAsync(){\n    builder.updateAll();\n\n    if (process.argv.slice(2)[0] === '--watch') {\n      await builder.watcher();\n    }\n\n  }\n\n  updateAll() {\n    this.shellTemplate = this.loadTemplate('shell');\n    this.pageTemplate = this.pageDocument;\n    this.postLoopTemplate = this.loadTemplate(`post-loop`);\n    this.reset();\n    this.update404();\n    this.prepareCss();\n    this.updatePages();\n    this.updateHomepage();\n    this.minifyJs().then();\n    this.updateDist();\n    this.copyAssets();\n  }\n\n  reset() {\n    this.pagesMeta = [];\n    this.siteMap = '';\n  }\n\n  loadTemplate(template) {\n    return fs.readFileSync(path.join('.', 'src', 'docs', 'templates', `${template}.html`), 'utf8');\n  }\n\n  directoryWalk(directory, extension = '.html') {\n    let files = [];\n    fs.readdirSync(directory)\n      .map((x) => {\n        const fullPath = path.join(directory, x);\n\n        return new FileInformation(\n          x,\n          fullPath,\n          fs.statSync(fullPath).isDirectory(),\n          path.extname(x).toLowerCase()\n        );\n      })\n      .filter(\n        (x) => path.extname(x.file).toLowerCase() === extension || x.isDirectory\n      )\n      .forEach((x) => {\n        if (x.isDirectory) {\n          files = [...files, ...this.directoryWalk(x.fullPath)];\n        } else {\n          files.push(x);\n        }\n      });\n\n    return files;\n  }\n\n  getSearchBody(html) {\n    const bodyPrep = html.textContent\n      .toLowerCase()\n      .replace('.', ' ') //replace dots with spaces\n      //.replace(/((?<=\\s)|(?=\\s))[^(\\w )]*|[^(\\w )]*((?<=\\s)|(?=\\s))/gm, ' ') //remove special characters\n      .replace(/((?<=\\s)|(?=\\s))[^a-z ]*|[^a-z ]*((?<=\\s)|(?=\\s))/gm, ' ') //remove special characters\n      //.replace(/[^a-z ]*/gm, '') //remove special characters\n      .replace(/\\s+/g, ' ')\n      .trim() //replace extra white space\n      .split(' '); // split at words;\n    return Array.from(new Set(bodyPrep)).join(' '); //remove duplicate words\n  }\n\n  removeDirectory(directory, removeSelf) {\n    if (removeSelf === undefined) removeSelf = true;\n    try {\n      const files = fs.readdirSync(directory) || [];\n      files.forEach((file) => {\n        const filePath = path.join(directory, file);\n        if (fs.statSync(filePath).isFile()) fs.unlinkSync(filePath);\n        else this.removeDirectory(filePath);\n      });\n    } catch (e) {\n      return;\n    }\n    if (removeSelf) fs.rmdirSync(directory);\n  }\n\n  copyDirectory(source, destination) {\n    fs.mkdirSync(destination, { recursive: true });\n\n    fs.readdirSync(source, { withFileTypes: true }).forEach((entry) => {\n      let sourcePath = path.join(source, entry.name);\n      let destinationPath = path.join(destination, entry.name);\n\n      entry.isDirectory()\n        ? this.copyDirectory(sourcePath, destinationPath)\n        : this.copyFileAndEnsurePathExists(sourcePath, destinationPath);\n    });\n  }\n\n  copyFileAndEnsurePathExists(filePath, content) {\n    fs.mkdirSync(path.dirname(filePath), { recursive: true });\n\n    fs.copyFileSync(filePath, content);\n  }\n\n  writeFileAndEnsurePathExists(filePath, content) {\n    fs.mkdirSync(path.dirname(filePath), { recursive: true });\n\n    fs.writeFileSync(filePath, content);\n  }\n\n  // since everyone has to have their own metadata *rolls eyes* the primary purpose here\n  // is to quickly find similar tags and set them all at once\n  setMetaContent(rootElement, selector, content) {\n    [...rootElement.getElementsByClassName(selector)].forEach((element) => {\n      if (content) {\n        element.setAttribute('content', content);\n        element.removeAttribute('class');\n      } else rootElement.getElementsByTagName('head')[0].removeChild(element);\n    });\n  }\n\n  createRootHtml(html) {\n    html = minifyHtml(html, {\n      collapseWhitespace: false,\n      removeComments: true\n    });\n\n    return `<!DOCTYPE html>\n<html lang='en'>${html}\n</html>`;\n  }\n\n  get shellDocument() {\n    return new JSDOM(this.shellTemplate).window.document;\n  }\n\n  //read css files\n  prepareCss() {\n    this.cssWhitelist = new Set();\n    this.cssWhitelist.add('mt-30');\n\n    this.css = sass\n      .renderSync({\n        file: path.join('.', 'src', 'docs', 'styles', 'styles.scss')\n      })\n      .css.toString();\n  }\n\n  //read post template\n  get pageDocument() {\n    const indexDocument = new JSDOM(this.loadTemplate('page-template')).window\n      .document;\n    const shell = this.shellDocument;\n    shell.getElementById('outerContainer').innerHTML =\n      indexDocument.documentElement.innerHTML;\n    return shell.documentElement.innerHTML;\n  }\n\n  updatePages() {\n    this.reset();\n    //remove old stuff\n    this.removeDirectory(`./${siteConfig.output}`, false);\n\n    /*  const pages = fs\n      .readdirSync('./src/docs/partials')\n      .filter((file) => path.extname(file).toLowerCase() === '.html');\n*/\n    const pageMarch = (pages) => {\n      pages.forEach((fileInformation) => {\n        /*\n         const fullyQualifiedUrl = `${siteConfig.root}/${siteConfig.output}/${file}`;\n      const fullPath = `./src/docs/partials/${file}`;\n         */\n        const fullyQualifiedUrl = `${siteConfig.root}/${siteConfig.output}/${fileInformation.relativePath}`;\n        const fullPath = fileInformation.fullPath;\n        const newPageDocument = new JSDOM(this.pageTemplate).window.document;\n        const postDocument = new JSDOM(fs.readFileSync(fullPath, 'utf8')).window\n          .document;\n        const article = postDocument.getElementById('page-body');\n        if (!article) {\n          console.error(`failed to read body for ${fullPath}`);\n          return;\n        }\n\n        const fileModified = fs.statSync(fullPath).mtime;\n\n        let pageMeta = new PageMeta(\n          fileInformation.file,\n          fileInformation.file.replace(fileInformation.extension, ''),\n          this.getSearchBody(article),\n          fileModified,\n          fileModified\n        );\n\n        pageMeta.parse(postDocument.getElementById('page-meta'));\n\n        newPageDocument.getElementById('mainContent').innerHTML =\n          article.innerHTML;\n\n        const publishDate = new Date(pageMeta.postDate).toISOString();\n        newPageDocument.title = pageMeta.title + ' - Tempus Dominus';\n\n        this.setMetaContent(newPageDocument, 'metaTitle', pageMeta.title);\n        //this.setStructuredData(structuredData, 'headline', pageMeta.title);\n        this.setInnerHtml(\n          newPageDocument.getElementsByClassName('title')[0],\n          pageMeta.title\n        );\n        this.setMetaContent(\n          newPageDocument,\n          'metaDescription',\n          pageMeta.excerpt\n        );\n        this.setMetaContent(newPageDocument, 'metaUrl', fullyQualifiedUrl);\n        this.setMetaContent(newPageDocument, 'metaPublishedTime', publishDate);\n\n        if (!pageMeta.updateDate) pageMeta.updateDate = pageMeta.postDate;\n        const updateDate = new Date(pageMeta.updateDate).toISOString();\n        this.setMetaContent(newPageDocument, 'metaModifiedTime', updateDate);\n        this.setMetaContent(newPageDocument, 'metaTag', pageMeta.tags);\n        this.pagesMeta.push(pageMeta);\n\n        const completeHtml = this.createRootHtml(\n          newPageDocument.documentElement.innerHTML\n        );\n        this.writeFileAndEnsurePathExists(\n          path.join('.', siteConfig.output, fileInformation.relativePath),\n          completeHtml\n        );\n\n        //update pure css\n        dropCss({\n          css: this.css,\n          html: completeHtml\n        }).sels.forEach((sel) => this.cssWhitelist.add(sel));\n\n        this.siteMap += `<url>\n<loc>${fullyQualifiedUrl}</loc>\n<lastmod>${new Date(pageMeta.updateDate).toISOString()}</lastmod>\n<priority>0.80</priority>\n</url>`;\n      });\n    };\n\n    pageMarch(this.directoryWalk(rootDirectory));\n\n    this.pagesMeta = this.pagesMeta.sort((a, b) => {\n      return +new Date(a.postDate) > +new Date(b.postDate) ? -1 : 0;\n    });\n\n    this.writeFileAndEnsurePathExists(\n      path.join('.', 'docs', '6', 'js', 'search.json'),\n      JSON.stringify(this.pagesMeta, null, 2)\n    );\n\n    this.updateSiteMap();\n    this.updateHomepage();\n    this.cleanCss();\n    this.updateDist();\n    this.copyAssets();\n  }\n\n  updateHomepage() {\n    const indexDocument = new JSDOM(\n      fs.readFileSync(path.join('.', 'src', 'docs', 'templates', 'index.html'), 'utf8')\n    ).window.document;\n\n    const shell = this.shellDocument;\n    shell.getElementById('outerContainer').outerHTML =\n      indexDocument.documentElement.getElementsByTagName('main')[0].innerHTML;\n\n    const script = shell.createElement('script');\n    script.type = 'module';\n    script.innerHTML =\n      'import \\'https://cdn.jsdelivr.net/npm/@pwabuilder/pwaupdate\\';';\n\n    shell.getElementsByTagName('head')[0].appendChild(script);\n\n    const el = shell.createElement('pwa-update');\n    shell.body.appendChild(el);\n\n    const completeHtml = this.createRootHtml(shell.documentElement.innerHTML);\n    this.writeFileAndEnsurePathExists(path.join('.', 'docs', 'index.html'), completeHtml);\n    dropCss({\n      css: this.css,\n      html: completeHtml\n    }).sels.forEach((sel) => this.cssWhitelist.add(sel));\n  }\n\n  update404() {\n    const indexDocument = new JSDOM(\n      fs.readFileSync(path.join('.', 'src', 'docs', 'templates', '404.html'), 'utf8')\n    ).window.document;\n    const shell = this.shellDocument;\n    shell.getElementById('outerContainer').innerHTML =\n      indexDocument.documentElement.innerHTML;\n\n    const completeHtml = this.createRootHtml(shell.documentElement.innerHTML);\n    this.writeFileAndEnsurePathExists(\n      path.join('.', 'docs', '404.html'),\n      this.createRootHtml(shell.documentElement.innerHTML)\n    );\n    dropCss({\n      css: this.css,\n      html: completeHtml\n    }).sels.forEach((sel) => this.cssWhitelist.add(sel));\n  }\n\n  updateSiteMap() {\n    this.siteMap = `<urlset xmlns='https://www.sitemaps.org/schemas/sitemap/0.9'>\n<url>\n<loc>${siteConfig.root}</loc>\n<lastmod>${new Date().toISOString()}</lastmod>\n<priority>1.00</priority>\n</url>\n${this.siteMap}\n</urlset>`;\n    this.writeFileAndEnsurePathExists(path.join('.', 'docs', 'sitemap.xml'), this.siteMap);\n  }\n\n  updateCss() {\n    this.prepareCss();\n\n    const gatherCss = (fullPath) => {\n      const postDocument = new JSDOM(fs.readFileSync(fullPath, 'utf8')).window\n        .document;\n      dropCss({\n        css: this.css,\n        html: postDocument.documentElement.innerHTML\n      }).sels.forEach((sel) => this.cssWhitelist.add(sel));\n    };\n\n    this.directoryWalk(rootDirectory)\n      .map((x) => x.fullPath)\n      .forEach(gatherCss);\n\n    fs.readdirSync(path.join('.', 'src', 'docs', 'templates'))\n      .filter((file) => path.extname(file).toLowerCase() === '.html')\n      .map((file) => path.join('.', 'src', 'docs', 'templates', file))\n      .forEach(gatherCss);\n\n    this.cleanCss();\n  }\n\n  cleanCss() {\n    let cleaned = dropCss({\n      html: '',\n      css: this.css,\n      shouldDrop: (sel) => !this.cssWhitelist.has(sel)\n    });\n    this.writeFileAndEnsurePathExists(\n      path.join('.', 'docs', 'css', 'styles.min.css'),\n      //new cleanCSS().minify(cleaned.css).styles\n      this.css\n    );\n  }\n\n  async minifyJs() {\n    const loopDocument = new JSDOM(this.postLoopTemplate).window.document;\n    const getJs = () => {\n      let output = '';\n\n      const files = fs\n        .readdirSync('./src/docs/js')\n        .filter(\n          (file) =>\n            path.extname(file).toLowerCase() === '.js' &&\n            !file.includes('.min.')\n        );\n\n      files.forEach((file) => {\n        output += fs.readFileSync(`./src/docs/js/${file}`, 'utf8') + '\\r\\n';\n      });\n\n      output += '//Popper\\r\\n';\n      //bundle popper\n      output +=\n        fs.readFileSync(\n          `./node_modules/@popperjs/core/dist/umd/popper.js`,\n          'utf8'\n        ) + '\\r\\n';\n\n      //bundle bootstrap\n      output +=\n        fs.readFileSync(\n          `./node_modules/bootstrap/dist/js/bootstrap.js`,\n          'utf8'\n        ) + '\\r\\n';\n\n      return output;\n    };\n\n    const js = getJs().replace(\n      '[POSTLOOP]',\n      loopDocument.getElementsByTagName('body')[0].innerHTML\n    );\n\n    const uglified = await minify(js);\n\n    this.writeFileAndEnsurePathExists('./docs/js/bundle.js', js);\n    this.writeFileAndEnsurePathExists('./docs/js/bundle.min.js', uglified.code);\n  }\n\n  setInnerHtml(element, value) {\n    if (!element) return;\n    element.innerHTML = value;\n  }\n\n  updateDist() {\n    this.copyDirectory(path.join('.', 'dist', 'js'), path.join('.', siteConfig.output, 'js'));\n    this.copyDirectory(path.join('.', 'dist', 'css'), path.join('.', siteConfig.output, 'css'));\n    this.copyDirectory(path.join('.', 'dist', 'plugins'), path.join('.', siteConfig.output, 'js', 'plugins'));\n    this.copyDirectory(path.join('.', 'dist', 'locales'), path.join('.', siteConfig.output, 'js', 'locales'));\n  }\n\n  /**\n   * This is to copy files that don't belong to another process like images\n   * and unthemed paged\n   */\n  copyAssets() {\n    [\n      {\n        source: './src/docs/assets/no-styles.html',\n        destination: './docs/6/examples/no-styles.html'\n      },\n      {\n        source: './src/docs/assets/repl-data.json',\n        destination: './docs/6/repl-data.json'\n      },\n      {\n        source: './src/docs/assets/site.webmanifest',\n        destination: './docs/site.webmanifest'\n      },\n      {\n        source: './src/docs/assets/carbon.css',\n        destination: './docs/css/carbon.css'\n      }\n    ].forEach((file) => {\n      if (!fs.existsSync(file.source)) return;\n      fs.mkdirSync(path.dirname(file.destination), { recursive: true });\n      fs.copyFileSync(file.source, file.destination);\n    });\n\n    fs.mkdirSync('./docs/6/images', { recursive: true });\n    this.directoryWalk('./src/docs/assets', '.png').forEach(\n      (fileInformation) => {\n        fs.copyFileSync(\n          fileInformation.fullPath,\n          `./docs/6/images/${fileInformation.file}`\n        );\n      }\n    );\n  }\n\n  async watcher() {\n    const parvusServer = new ParvusServer({\n      port: 3001,\n      directory: `./docs`,\n      middlewares: []\n    });\n\n    const watcher = chokidar.watch(\n      [\n        path.join('src', 'docs', 'partials'),\n        path.join('src', 'docs', 'styles'),\n        path.join('src', 'docs', 'templates'),\n        path.join('src', 'docs', 'js'),\n        path.join('src', 'docs', 'assets'),\n        'dist/'\n      ],\n      {\n        ignored: /(^|[\\/\\\\])\\../, // ignore dotfiles\n        //ignored: /(^|[\\/\\\\])\\..|make\\.js|browser-sync-config\\.js/g, // ignore dotfiles\n        ignoreInitial: true\n      }\n    );\n\n    let lastChange = '';\n    let lastChangeFile = '';\n\n    const handleChange = (event, file) => {\n      if (file.includes('.map.')) return;\n      log(`${event}: ${file}`);\n      try {\n        if (file.startsWith('dist')) {\n          builder.updateDist();\n        }\n        if (file.startsWith(path.join('src', 'docs', 'assets'))) {\n          builder.copyAssets();\n        }\n        if (file.startsWith(path.join('src', 'docs', 'partials'))) {\n          //reading the file stats seems to trigger this twice, so if the same file changed in less then a second, ignore\n          if (\n            lastChange === formatter.format(new Date()) &&\n            lastChangeFile === file\n          ) {\n            log(`Skipping duplicate trigger`);\n            return;\n          }\n          builder.updatePages();\n        }\n        if (file.startsWith(path.join('src', 'docs', 'styles'))) {\n          builder.updateCss();\n        }\n        if (file.startsWith(path.join('src', 'docs', 'templates'))) {\n          builder.updateAll();\n        }\n        if (file.startsWith(path.join('src', 'docs', 'js'))) {\n          builder.minifyJs().then();\n        }\n        log('Update successful');\n        cleanTimer(() => {\n          parvusServer.refreshBrowser();\n        });\n        lastChange = formatter.format(new Date());\n        lastChangeFile = file;\n        console.log('');\n      } catch (e) {\n        log('Something went wrong');\n        console.log(e);\n        console.log('');\n      }\n    };\n\n    const cleanTimer = (callback, delay = 1000) => {\n      let timer = setTimeout(() => {\n        callback();\n        clearTimeout(timer);\n      }, delay);\n    };\n\n    watcher\n      .on('all', handleChange)\n      .on('ready', () => {\n        console.log('[Make] Watching files...');\n      });\n\n    console.clear();\n    await parvusServer.startAsync();\n  }\n}\n\nconst formatter = new Intl.DateTimeFormat(undefined, {\n  year: 'numeric',\n  month: 'long',\n  day: 'numeric',\n  hour: 'numeric',\n  minute: 'numeric',\n  second: 'numeric'\n});\n\nconst log = (message) => {\n  console.log(`[Make: ${formatter.format(new Date())}] ${message}`);\n};\n\n/**\n * Site configuration\n * @type {object}\n * @property {string} root - Base url for the site.\n * @property {string} output - Where the built partials will go.\n */\nconst siteConfig = JSON.parse(\n  fs.readFileSync(`./src/docs/site-config.json`, 'utf8')\n);\n\nlog('Building...');\nconst builder = new Build();\nbuilder.startAsync().then();\n"
  },
  {
    "path": "src/docs/partials/change-log-archive.html",
    "content": "<div id=\"page-body\">\n  <div class='row'>\n    <h2>Beta9</h2>\n    <h3>Bug Fixes</h3>\n    <ul>\n      <li>Fixed jQuery provider. <a\n        href='https://github.com/Eonasdan/tempus-dominus/issues/2547'>#2547</a></li>\n      <li>Adds options for theme to fix <a href='https://github.com/Eonasdan/tempus-dominus/issues/2522'>#2522</a>. Big thanks to @matholum.</li>\n      <li>Fixed date view next/back button disabling when it shouldn't. <a\n        href='https://github.com/Eonasdan/tempus-dominus/issues/2595'>#2595</a></li>\n      <li>Fixed component disabling issue <a\n        href='https://github.com/Eonasdan/tempus-dominus/issues/2502'>#2502</a></li>\n      <li>Changed default useTwentyfourHour to undefined. Now using DateTime.parts() to check if the view date has a \"dayPeriod\" property <a\n        href='https://github.com/Eonasdan/tempus-dominus/issues/2510'>#2510</a></li>\n      <li>Fixed 24-hour 24/0 formatting\n        <a href='https://github.com/Eonasdan/tempus-dominus/issues/2563'>#2563</a>\n      </li>\n      <li>Fixed none latin number selection in the minute picker\n        <a href='https://github.com/Eonasdan/tempus-dominus/issues/2576'>#2576</a>\n      </li>\n      <li>Fixed input value to view date object reference\n        <a href='https://github.com/Eonasdan/tempus-dominus/issues/2568'>#2568</a>\n      </li>\n    </ul>\n    <h3>New</h3>\n    <ul>\n      <li>Add fr locale via #2581</li>\n      <li>Updated and published NuGet package.</li>\n    </ul>\n    <h3>Breaking changes</h3>\n    <ul>\n      <li>Renamed /src/sass to /src/scss to more accurately reflect code.</li>\n    </ul>\n    <h2>Beta8</h2>\n    <h3>Bug Fixes</h3>\n    <ul>\n      <li>Fixed view mode. <a\n              href='https://github.com/Eonasdan/tempus-dominus/issues/2583'>#2583</a></li>\n      <li>Fixed and simplified options merging <a href='https://github.com/Eonasdan/tempus-dominus/issues/2578'>#2578</a></li>\n    </ul>\n    <h2>Beta7</h2>\n    <h3>Bug Fixes</h3>\n    <ul>\n      <li>Fixed options mutable. <a\n              href='https://github.com/Eonasdan/tempus-dominus/issues/2487'>#2487</a></li>\n      <li>Fixed element toggle when input is disabled <a href='https://github.com/Eonasdan/tempus-dominus/issues/2495'>#2495</a></li>\n      <li>Fixed jQuery no conflict <a href='https://github.com/Eonasdan/tempus-dominus/issues/2506'>#2506</a></li>\n      <li>Fixed options update <a href='https://github.com/Eonasdan/tempus-dominus/issues/2549'>#2549</a></li>\n    </ul>\n    <h3>New</h3>\n    <ul>\n      <li>Added a new example for setting and getting dates.</li>\n    </ul>\n    <h2>Beta6</h2>\n    <h3>Bug Fixes</h3>\n    <ul>\n      <li>viewMode is optional <a\n              href='https://github.com/Eonasdan/tempus-dominus/issues/2550'>#2550</a></li>\n    </ul>\n    <h3>New</h3>\n    <ul>\n      <li>Introduced a simple overridable function parseInput  <a\n              href='https://github.com/Eonasdan/tempus-dominus/issues/2552'>#2552</a></li>\n    </ul>\n    <h2>6-beta5</h2>\n    <h3>Bug Fixes</h3>\n    <ul>\n      <li>Fixed clear() doesn't erase text of date. <a\n              href='https://github.com/Eonasdan/tempus-dominus/issues/2472'>#2472</a></li>\n      <li>Fixed clear button event cycle. <a\n              href='https://github.com/Eonasdan/tempus-dominus/issues/2516'>#2516</a></li>\n      <li>Fixed 2 digit formatting. <a\n              href='https://github.com/Eonasdan/tempus-dominus/issues/2516'>#2513</a></li>\n      <li>Trigger native change event on input when available - fixes #2401 <a\n              href='https://github.com/Eonasdan/tempus-dominus/issues/2533'>via #2533</a></li>\n      <li>Fixes use of SVG icons (issue #2527) <a\n              href='https://github.com/Eonasdan/tempus-dominus/issues/2533'>via #2529</a></li>\n    </ul>\n    <h2>Version 6-beta4</h2>\n    <h3>New</h3>\n    <ul>\n      <li>Dark mode! The picker now has dark mode when the user's preference is dark.</li>\n      <li>Wrote a tiny service locator/di container in an effort to make plugins better</li>\n      <li>Added a momentjs plugin</li>\n      <li>Added DE, ES, IT, NL, RO locales thanks to @jcompagner <a\n        href='https://github.com/Eonasdan/tempus-dominus/pull/2484'>via #2484</a>.\n      </li>\n      <li><code>toggleMeridiem</code> supports a comma separated list. <a\n        href='https://github.com/Eonasdan/tempus-dominus/issues/2399'>#2399.</a>\n      </li>\n      <li>\n        All event types now provide <code>viewMode</code> which provides\n        'clock' | 'calendar' | 'months' | 'years' | 'decades' depending what view\n        the event occurred.\n        <a\n          href='https://github.com/Eonasdan/tempus-dominus/issues/2428'>#2428.</a>\n      </li>\n    </ul>\n    <h3>Breaking changes</h3>\n    <ul>\n      <li>Plugins work a little differently now. Hopefully they are a bit cleaner to work with now</li>\n      <li>Hooks have been removed. Plugins are a better way to handle this. You can look at the momentjs plugin for a\n        guide.\n      </li>\n      <li>Locale loading and authoring has changed a bit as well.</li>\n      <li><code>ViewUpdateEvent</code> no longer provides <code>change: Unit</code>.</li>\n    </ul>\n    <h3>Bug fixes</h3>\n    <ul>\n      <li>Fixed event 'hide.td' not triggered when input is empty. <a\n        href='https://github.com/Eonasdan/tempus-dominus/issues/2424'>#2424.</a>\n      </li>\n      <li>Fixed input change event trigger. <a\n        href='https://github.com/Eonasdan/tempus-dominus/issues/2401'>#2401.</a>\n      </li>\n      <li>Fixed dataset deletion issue. <a\n        href='https://github.com/Eonasdan/tempus-dominus/issues/2483'>#2483.</a>\n      </li>\n      <li>Fixed month manipulation issue <a\n        href='https://github.com/Eonasdan/tempus-dominus/issues/2474'>#2474.</a> <a\n        href='https://github.com/Eonasdan/tempus-dominus/issues/2486'>2486.</a>\n      </li>\n      <li>Fixed Wrong calendar rendering when startOfTheWeek <a\n        href='https://github.com/Eonasdan/tempus-dominus/issues/2473'>#2473.</a>\n      </li>\n      <li>Fixed viewMode option not respected (#2466) thanks @jmolinap <a\n        href='https://github.com/Eonasdan/tempus-dominus/pull/2494'>via #2494.</a>\n      </li>\n    </ul>\n    <h2>Version 6-beta3</h2>\n    <h3>New</h3>\n    <ul>\n      <li>Allow to change parent container for the widget <a\n        href='https://github.com/Eonasdan/tempus-dominus/pull/2462'>via #2462</a>.\n      </li>\n      <li>Moved docs to gh-pages and set up a GitHub action to move compiled docs to that branch.</li>\n    </ul>\n    <h3>Bug fixes</h3>\n    <ul>\n      <li>Issue with time picker only & fixing range example <a\n        href='https://github.com/Eonasdan/tempus-dominus/pull/2463'>via #2463.</a>\n      </li>\n      <li>Fixed issue with reading the data- attributes. <a\n        href='https://github.com/Eonasdan/tempus-dominus/issues/2430'>#2430</a>\n      </li>\n      <li>Fixed start of the week option having the incorrect heading. <a\n        href='https://github.com/Eonasdan/tempus-dominus/issues/2414'>#2443</a>\n      </li>\n    </ul>\n    <h2>Version 6-alpha17</h2>\n    <h3>Bug fixes</h3>\n    <ul>\n      <li>Fixed issue with calendar weeks. <a\n        href='https://github.com/Eonasdan/tempus-dominus/issues/2441'>#2441</a>\n      </li>\n    </ul>\n    <h2>Version 6-alpha16</h2>\n    <h3>New</h3>\n    <ul>\n      <li>Started building html migration tool</li>\n    </ul>\n    <h3>Bug fixes</h3>\n    <ul>\n      <li>Fixed issue with daysOfWeekDisabled. <a\n        href='https://github.com/Eonasdan/tempus-dominus/issues/2419'>#2419</a>\n      </li>\n      <li>Fixed issue with reading the data- attributes. <a\n        href='https://github.com/Eonasdan/tempus-dominus/issues/2430'>#2430</a>\n      </li>\n      <li>Fixed start of the week option having the incorrect heading. <a\n        href='https://github.com/Eonasdan/tempus-dominus/issues/2414'>#2443</a>\n      </li>\n    </ul>\n    <h2>Version 6-alpha15</h2>\n    <h3>New</h3>\n    <ul>\n      <li>Added <code>localization.startOfTheWeek</code>. This allows setting the start of the week.</li>\n      <li>Added <code>numberingSystem</code> to <code>DateTimeFormatOptions</code></li>\n      <li>Added <code>meta</code> property to options.</li>\n    </ul>\n    <h3>Bug fixes</h3>\n    <ul>\n      <li>Fixed issue with 24 hour display formatting. <a href='https://github.com/Eonasdan/tempus-dominus/issues/2414'>#2414</a>\n      </li>\n      <li>Fixed default input change formatting function to check for empty dates. <a\n        href='https://github.com/Eonasdan/tempus-dominus/issues/2411'>#2411</a>\n      </li>\n      <li>Fixed an issue with the unsubscribe method typing. <a\n        href='https://github.com/Eonasdan/tempus-dominus/issues/2411'>#2411</a>\n      </li>\n      <li>Fixed an issue where the picker would try to update the clock view even it wasn't enabled. <a\n        href='https://github.com/Eonasdan/tempus-dominus/issues/2438'>#2438</a>\n      </li>\n      <li>Fixed an issue using a time component would not go back to the clock view. <a\n        href='https://github.com/Eonasdan/tempus-dominus/issues/2431'>#2431</a>\n      </li>\n      <li>The picker will return to the view date and show the calendar or clock after being reopened. <a\n        href='https://github.com/Eonasdan/tempus-dominus/issues/2410'>#2410</a>\n      </li>\n      <li>Fixed clock/calendar switching to wait until the other view is ready before switching. <a\n        href='https://github.com/Eonasdan/tempus-dominus/issues/2421'>#2421</a>\n      </li>\n      <li>Fixed the options interface so all properties are optionsal. <a\n        href='https://github.com/Eonasdan/tempus-dominus/issues/2439'>#2439</a>\n      </li>\n      <li><span class='badge bg-danger'>BREAKING</span> <code>localization.dayViewHeaderFormat</code> no longer takes a\n        string but instead accepts a <code>DateTimeFormatOptions</code>. This will allow for more customization. <a\n          href='https://github.com/Eonasdan/tempus-dominus/issues/2420'>#2420</a>\n      </li>\n    </ul>\n  </div>\n  <div class='row'>\n    <h2>Version 6-alpha14</h2>\n    <h3>New</h3>\n    <ul>\n      <li>Cleaned up css a bit. Got rid of the popper arrow and aligned the picker to the start of the element.</li>\n      <li><span class='badge bg-danger'>BREAKING</span> <code>display.inputFormat</code> now takes a function, not an\n        Intl format. It has also been moved to <code>hooks.inputFormat</code> By default a function will be executed\n        that uses Intl to format the selected date(s) based on the selected components.\n      </li>\n      <li>Added <code>hooks.inputParse</code></li>\n      <li>Merged number localization Thanks @hkvstore <a href='https://github.com/Eonasdan/tempus-dominus/issues/2408'>#2408</a>\n      </li>\n    </ul>\n    <h3>Bug fixes</h3>\n    <ul>\n      <li>Merged a fix for parsing issue from comparing constructor names. Thanks @faatihi <a\n        href='https://github.com/Eonasdan/tempus-dominus/issues/2408'>#2408</a></li>\n      <li>Fixed doc issue</li>\n      <li>Fixed input value for real this time. <a\n        href='https://github.com/Eonasdan/tempus-dominus/issues/2387'>#2387</a></li>\n      <li>Fixed <code>keepOpen</code></li>\n      <li>Fixed widget positioning with rtl <a href='https://github.com/Eonasdan/tempus-dominus/issues/2400'>#2400</a>\n      </li>\n    </ul>\n  </div>\n  <div class='row'>\n    <h2>Version 6-alpha1.0.13</h2>\n    <h3>New</h3>\n    <ul>\n      <li>Created a new method <code>set(value: any, index?: number, from: string = 'date.set')</code> that tries to\n        conver the <code>value</code> provided and then tries to set that value to the <code>index</code> (or 0 if not\n        using multidate).\n      </li>\n      <li>Added esm output</li>\n      <li>Exposed <code>Unit</code> and <code>DateTimeFormatOptions</code> from the DateTime class.</li>\n      <li>Renamed <code>togglePeriod</code> to <code>toggleMeridiem</code></li>\n      <li>Added <code>toggleMeridiem</code> class to AM/PM button</li>\n      <li>Cleaned up css a bit. Got rid of the popper arrow and aligned the picker to the start of the element.</li>\n    </ul>\n    <h3>Bug fixes</h3>\n    <ul>\n      <li>Fixed dealing with input values/changes.</li>\n      <li>Fixed issue when calling hide if the widget hasn't been built (or shown) yet.</li>\n      <li>Fixed meridiem issue. Thanks @hkvstore <a\n        href='https://github.com/Eonasdan/tempus-dominus/issues/2398'>#2398</a></li>\n      <li>Merged PR 2396 to fix 24 hour hour selection. <a\n        href='https://github.com/Eonasdan/tempus-dominus/issues/2395'>#2395</a></li>\n      <li>Fixed issue with time component grid. <a\n        href='https://github.com/Eonasdan/tempus-dominus/issues/2395'>#2395</a></li>\n    </ul>\n  </div>\n  <div class='row'>\n    <h2>Version 6-alpha1.0.4</h2>\n    <h3>Bug fixes</h3>\n    <ul>\n      <li>Fixed issue with meridiem (AM/PM) button clicks.</li>\n    </ul>\n  </div>\n  <div class='row'>\n    <h2>Version 6-alpha1.0.3</h2>\n    <h3>Bug fixes</h3>\n    <ul>\n      <li>Fixed year display after selecting a decade. <a href='https://github.com/Eonasdan/tempus-dominus/issues/2386'>#2386</a>\n      </li>\n      <li>Fixed issue if the input field had a value. <a href='https://github.com/Eonasdan/tempus-dominus/issues/2387'>#2387</a>\n      </li>\n      <li>Fixed setting the defaultDate option with a Date object. <a\n        href='https://github.com/Eonasdan/tempus-dominus/issues/2391'>#2391</a></li>\n    </ul>\n  </div>\n  <div class='row'>\n    <h2>Version 6-alpha1</h2>\n    <h3 id='general'>General</h3>\n    <ul>\n      <li>picker returns a <code>DateTime</code> which is an extended javascript <code>Date</code> object.</li>\n      <li>picker no longer uses jQuery, momentjs, or bootstrap</li>\n      <li>events now have interfaces</li>\n    </ul>\n    <h3 id='configuration'>Configuration</h3>\n    <ul>\n      <li>renamed <code>tooltip</code> to <code>localization</code>\n        <ul>\n          <li>renamed <code>tooltip.prevMonth</code> to <code>localization.previousMonth</code></li>\n          <li>renamed <code>tooltip.prevYear</code> to <code>localization.previousYear</code></li>\n          <li>renamed <code>tooltip.prevDecade</code> to <code>localization.previousDecade</code></li>\n          <li>renamed <code>tooltip.prevCentury</code> to <code>localization.previousCentury</code></li>\n          <li>moved <code>dayViewHeaderFormat</code> to <code>localization.dayViewHeaderFormat</code></li>\n          <li><code>dayViewHeaderFormat</code> now takes a javascript <code>intl</code> month option, e.g.\n            <code>long</code> (default)\n          </li>\n        </ul>\n      </li>\n      <li>moved <code>locale</code> to <code>localization</code>\n      </li>\n      <li>removed <code>useStrict</code></li>\n      <li>removed <code>timeZone</code></li>\n      <li>removed <code>format</code>\n        <ul>\n          <li>added <code>display.inputFormat</code> that takes <code>DateTimeFormatOptions</code>;</li>\n        </ul>\n      </li>\n      <li>removed <code>collapse</code></li>\n      <li>removed <code>extraFormats</code></li>\n      <li>removed <code>widgetParent</code></li>\n      <li>removed <code>widgetPositioning</code></li>\n      <li>changed <code>viewMode</code> from <code>&#39;times&#39; | &#39;days&#39;</code> to <code>&#39;clock&#39; |\n        &#39;calendar&#39;</code></li>\n      <li>renamed <code>allowMultidate</code> and <code>multidateSeparator</code> to <code>multipleDates</code> and\n        <code>multipleDatesSeparator</code>\n      </li>\n      <li>moved the following to <code>restrictions</code>\n        <ul>\n          <li>minDate</li>\n          <li>maxDate</li>\n          <li>disabledDates</li>\n          <li>enabledDates</li>\n          <li>daysOfWeekDisabled</li>\n          <li>disabledHours</li>\n          <li>enabledHours</li>\n          <li>readonly</li>\n          <li>disabledTimeIntervals</li>\n        </ul>\n      </li>\n      <li>moved the following to <code>display</code>\n        <ul>\n          <li>sideBySide</li>\n          <li>calendarWeeks</li>\n          <li>viewMode</li>\n          <li>toolbarPlacement</li>\n          <li>buttons</li>\n          <li>widgetPositioning</li>\n          <li>icons</li>\n          <li>inline</li>\n          <li>keepOpen</li>\n        </ul>\n      </li>\n      <li>disabledTimeIntervals is now an array of <code>{ from: DateTime, to: DateTime }</code>\n      </li>\n      <li>removed check for <code>dateOptions</code> on the element data set. jQuery hid allowing an object by looping\n        through the properties\n      </li>\n      <li>removed <code>keybindings</code> - this might come back later</li>\n      <li>removed <code>readonly<</code></li>\n      <li>removed <code>ignoreReadonly<</code></li>\n      <li>removed <code>focusOnShow<</code></li>\n    </ul>\n    <h4 id='styles'>Styles</h4>\n    <h5 id='tip-all-new-css-values-are-in-namespace-css-in-the-consts-ts-file'>Tip: All new css values are in <code>Namespace.Css.*</code>\n      in the <code>consts.ts</code> file</h5>\n    <ul>\n      <li>renamed <code>bootstrap-datetimepicker-widget</code> to <code>tempus-dominus-widget</code></li>\n      <li>renamed <code>tempusDominus-bootstrap-datetimepicker-widget-with-calendar-weeks</code> to <code>tempus-dominus-with-calendar-weeks</code>\n        (\n        v5)\n        <ul>\n          <li>removed <code>.input-group [data-toggle=&quot;datetimepicker&quot;]</code> setting the cursor type to\n            pointer.\n          </li>\n        </ul>\n      </li>\n    </ul>\n    <h6 id='date'>Date</h6>\n    <ul>\n      <li>renamed <code>datepicker</code> to <code>date-container</code></li>\n      <li>renamed <code>datepicker-decades</code> to <code>date-container-decades</code></li>\n      <li>renamed <code>datepicker-years</code> to <code>date-container-years</code></li>\n      <li>renamed <code>datepicker-months</code> to <code>date-container-months</code></li>\n      <li>renamed <code>datepicker-days</code> to <code>date-container-days</code></li>\n      <li>renamed <code>prev</code> to <code>previous</code></li>\n      <li>renamed <code>data-day</code> to <code>data-value</code> to be consistent with other views</li>\n    </ul>\n    <h6 id='time'>Time</h6>\n    <ul>\n      <li>renamed <code>usetwentyfour</code> to <code>useTwentyfour</code></li>\n      <li>renamed <code>timepicker</code> to <code>time-container</code></li>\n      <li>renamed <code>timepicker-hour</code> to <code>time-container-hour</code></li>\n      <li>renamed <code>timepicker-minute</code> to <code>time-container-minute</code></li>\n      <li>renamed <code>timepicker-second</code> to <code>time-container-second</code></li>\n    </ul>\n    <h5 id='saas'>Saas</h5>\n    <p>Saas file is now called <code>tempus-dominus.scss</code>. The &quot;build&quot; file has been deleted as it&#39;s\n      no longer required.</p>\n    <h3 id='events'>Events</h3>\n    <ul>\n      <li>changed <code>isInvalid</code> to <code>isValid</code> and flipped the boolean (v5)</li>\n      <li>changed event now emits <code>undefined</code> instead of false when the date is being cleared</li>\n      <li>changed plugin.name from <code>datetimepicker</code> to <code>tempus-dominus</code></li>\n      <li>changed root data namespace from <code>datetimepicker</code> to <code>td</code></li>\n    </ul>\n  </div>\n\n  <div class='row'>\n    <h1>\n      Version 5\n    </h1>\n    <p>\n      Version 5 was a rewrite of v4 taking some pending pull requests and fixes along with it. Unfortunately, I didn't\n      do a very good job at documenting those changes.\n    </p>\n  </div>\n\n  <div class='row'>\n    <h1>\n      Version 4\n    </h1>\n    <p>\n      The chang log from v2-v4 can be <a href='https://getdatepicker.com/4/ChangeLog/'>read here</a>.\n    </p>\n  </div>\n\n</div>\n<div id=\"page-meta\">\n  <div id=\"title\">Change Log Archive</div>\n  <div id=\"post-date\">07/20/2021</div>\n  <div id=\"update-date\">07/20/2021</div>\n  <div id=\"excerpt\">An archive of changes between different version of tempus dominus.</div>\n  <div id=\"tags\">datepicker, javascript, open source, tempus dominus, eonasdan</div>\n</div>\n"
  },
  {
    "path": "src/docs/partials/change-log.html",
    "content": "<div id=\"page-body\">\n  <div id='change-log'>\n    <h1>Version 6</h1>\n\n    <div class='row'>\n      <h2>6.9.4</h2>\n      <h3>New</h3>\n      <ul>\n        <li>SCSS now provides <code>root</code> css variables #2857</li>\n        <li>Custom date format parsing errors are now caught and provided through the event system. #2793</li>\n      </ul>\n      <h3>Bug fixes</h3>\n      <ul>\n        <li>Fixed #2886</li>\n        <li>Fixed #2884</li>\n        <li>Fixed #2881</li>\n        <li>Fixed #2879</li>\n        <li>Fixed #2877 </li>\n      </ul>\n    </div>\n\n    <div class='row'>\n      <h2>6.7.19</h2>\n      <h3>New</h3>\n      <ul>\n        <li>Added <code>maxWeekdayLength</code>. This option will truncate the day of the week header.</li>\n      </ul>\n      <h3>Bug fixes</h3>\n      <ul>\n        <li>Fixed #2871</li>\n        <li>Fixed #2860</li>\n        <li>Fixed #2817</li>\n      </ul>\n    </div>\n\n    <div class='row'>\n      <h2>6.7.16</h2>\n      <h3>Bug fixes</h3>\n      <ul>\n        <li>Reverted #2811</li>\n        <li>Fixed #2850</li>\n        <li>Fixed #2855</li>\n      </ul>\n    </div>\n\n    <div class='row'>\n      <h2>6.7.13</h2>\n      <h3>Bug fixes</h3>\n      <ul>\n        <li>Selecting any date element now updates the selected date. #2811</li>\n        <li>Hotfix for #2846</li>\n      </ul>\n    </div>\n\n    <div class='row'>\n      <h2>6.7.11</h2>\n      <h3>Bug fixes</h3>\n      <ul>\n        <li>Hotfix for #2837</li>\n      </ul>\n    </div>\n\n    <div class='row'>\n      <h2>6.7.10</h2>\n      <h3>New</h3>\n      <ul>\n        <li>Lots more test coverage #2791</li>\n      </ul>\n      <h3>Bug fixes</h3>\n      <ul>\n        <li>Hopefully fixed update options bounce. #2621</li>\n        <li>Fixed input toggle #2575</li>\n        <li>Fixed docs #2810</li>\n      </ul>\n    </div>\n\n    <div class='row'>\n      <h2>6.7.7</h2>\n      <h3>New</h3>\n      <ul>\n        <li>Lots more test coverage #2791</li>\n        <li>Placement option #2789</li>\n        <li>Exported default en-US locale #2687</li>\n        <li>When <code>userCurrent</code> is false the clock will now display <code>--</code> instead. #2764</li>\n      </ul>\n      <h3>Bug fixes</h3>\n      <ul>\n        <li>Fixed some issues with the date range #2788, #2798</li>\n        <li>Fixed calendarWeeks bug #2786</li>\n        <li>Fixed REPL issues #2795 #2784</li>\n        <li>Fixed multiple dates option not showing \"active\" state #2796</li>\n      </ul>\n    </div>\n\n    <div class='row'>\n      <h2>6.4.4</h2>\n      <h3>Bug fixes</h3>\n      <ul>\n        <li>Fixed an issue with the date formatting</li>\n        <li>Fixed format escape brackets</li>\n        <li>Fixes setting a date to null #2774</li>\n      </ul>\n    </div>\n\n    <div class='row'>\n      <h2>6.4.1</h2>\n      <h3>New</h3>\n      <ul>\n        <li>Migrated custom date format to main code #2734</li>\n        <li>Added Date Range functionality #2707</li>\n      </ul>\n      <h3>Bug fixes</h3>\n      <ul>\n        <li>Leading delimiter added when multipleDates #2766</li>\n      </ul>\n    </div>\n\n    <div class='row'>\n      <h2>6.2.10</h2>\n      <h3>Bug fixes</h3>\n      <ul>\n        <li>Can't change time & meridiem #2746</li>\n        <li>Fixed regression with #2600</li>\n      </ul>\n    </div>\n\n    <div class='row'>\n      <h2>6.2.9</h2>\n      <h3>Bug fixes</h3>\n      <ul>\n        <li>Fixed CustomDateFormat Plugin: Hours always undefined #2742</li>\n      </ul>\n    </div>\n\n    <div class='row'>\n      <h2>6.2.8</h2>\n      <h3>Bug fixes</h3>\n      <ul>\n        <li>Fixed error when using clear button on time component #2720</li>\n        <li>Fixed issue with promptTimeOnDateChange option #2630</li>\n        <li>Fixed useTwentyfourHour hour-range is 01 - 24, should be 00 - 23 #2600</li>\n        <li>Moved back @popperjs/core to peerDependencies and made it optional #2672</li>\n      </ul>\n      <h3>New</h3>\n      <ul>\n        <li>Pre commit hooks. Linter and prettier are now run before each commit. #2715</li>\n        <li>Locales and plugins now have typings included. #2719</li>\n      </ul>\n    </div>\n\n    <div class='row'>\n      <h2>6.2.7</h2>\n      <h3>Bug fixes</h3>\n      <ul>\n        <li>Fixed customDateFormat shows 'undefined' when you manually erase the date #2693</li>\n        <li>Fixed calendar header not updating correctly #2685</li>\n        <li>Fixed clock components disappearing when using side by side #2684</li>\n        <li>Fixed some doc issues #2706</li>\n      </ul>\n      <h3>New</h3>\n      <ul>\n        <li>Unit tests! #2711</li>\n      </ul>\n    </div>\n\n    <div class='row'>\n      <h2>6.2.6</h2>\n      <h3>Bug fixes</h3>\n      <ul>\n        <li>Fixed disabled/enabled dates performance issue. This also should fix the next/previous month selection\n          #2658\n        </li>\n        <li>Fixed view date syncing across options and not updating correctly #2611</li>\n      </ul>\n    </div>\n\n    <div class='row'>\n      <h2>6.2.5</h2>\n      <h3>New</h3>\n      <ul>\n        <li>Added Polish localization #2673\n        </li>\n        <li>Updated locales to include formats</li>\n        <li>Export (re-export?) Options interface</li>\n      </ul>\n    </div>\n\n    <div class='row'>\n      <h2>6.2.4</h2>\n      <h3>Bug fixes</h3>\n      <ul>\n        <li>Fix misspelling #2667</li>\n        <li>Fix issue with customFormatPlugin</li>\n      </ul>\n    </div>\n\n    <div class='row'>\n      <h2>6.2.3</h2>\n      <h3>Bug fixes</h3>\n      <ul>\n        <li>Fix popper reference</li>\n      </ul>\n    </div>\n\n    <div class='row'>\n      <h2>6.2.1</h2>\n      <h3>New</h3>\n      <ul>\n        <li>Added custom date format plugin docs.\n        </li>\n        <li>It is now possible to replace popperjs with another positioning system via <a\n          href='https://github.com/Eonasdan/tempus-dominus/issues/2643'>#2643</a>.\n        </li>\n      </ul>\n      <h3>Bug fixes</h3>\n      <ul>\n        <li>Imports should work again. <a\n          href='https://github.com/Eonasdan/tempus-dominus/issues/2652'>#2652</a>\n        </li>\n        <li>Fixes for FR, FI, and IT locales. <a\n          href='https://github.com/Eonasdan/tempus-dominus/issues/2650'>#2650</a>\n        </li>\n      </ul>\n    </div>\n\n    <div class='row'>\n      <h2>6.0.1</h2>\n      <h3>New</h3>\n      <ul>\n        <li>Added a customDateFormat plugin and new options to allow custom formats to be provided for input\n          parsing/setting\n        </li>\n        <li>Replaced examples page with REPL</li>\n        <li>Lots of doc clean up</li>\n      </ul>\n    </div>\n\n    <div class='row'>\n      <h2>Older History</h2>\n      <p>\n        For older history, please see the <a href='change-log-archive.html'>archived change log</a>.\n      </p>\n    </div>\n  </div>\n</div>\n<div id=\"page-meta\">\n  <div id=\"title\">Change Log</div>\n  <div id=\"post-date\">07/20/2021</div>\n  <div id=\"update-date\">07/20/2021</div>\n  <div id=\"excerpt\">An overview of changes between different version of tempus dominus</div>\n  <div id=\"tags\">datepicker, javascript, open source, tempus dominus, eonasdan</div>\n</div>\n"
  },
  {
    "path": "src/docs/partials/datetime.html",
    "content": "<div id=\"page-body\">\n  <p>\n    In v6 I dropped moment as a required library since it is no longer recommended. Almost all the functions in the\n    picker make use of my custom DateTime class which extends the native Date object.\n  </p>\n  <p>\n    Because I am simply extending the native date object, any returned values will still behave like a date object.\n    Which means you don't need to adopt using DateTime in your project unless you want to. Once less library to worry about!\n  </p>\n</div>\n\n<div id=\"page-meta\">\n  <div id=\"title\">DateTime</div>\n  <div id=\"post-date\">07/08/2021</div>\n  <div id=\"update-date\">07/08/2021</div>\n  <div id=\"excerpt\">Custom date extension object</div>\n  <div id=\"tags\">datepicker, javascript, open source, tempus dominus, eonasdan</div>\n</div>\n"
  },
  {
    "path": "src/docs/partials/examples/index.html",
    "content": "<div id=\"page-body\">\n  <meta http-equiv=\"refresh\" content=\"0; URL=https://getdatepicker.com/6/repl.html\">\n  <link rel=\"canonical\" href=\"https://getdatepicker.com/6/repl.html\">\n\n  All the examples have been migrated to the REPL page!\n\n  Redirecting to <a href=\"https://getdatepicker.com/6/repl.html\">https://getdatepicker.com/6/repl.html</a>\n<!--  <div class='row'>-->\n<!--    <p>-->\n<!--      Version 6 removes the need for an input field, Bootstrap, jQuery and MomemntJs.-->\n<!--      Each example comes code section that can be toggled by clicking on <i class='fa-solid fa-code'-->\n<!--                                                                            aria-hidden='true'></i>.-->\n<!--    </p>-->\n<!--    <p>-->\n<!--      If you still need jQuery, check out the <a href='jquery.html'>jQuery examples</a>.-->\n<!--    </p>-->\n<!--  </div>-->\n\n<!--  <div class='row'>-->\n<!--    <h3 id='minimum-setup'>Minimum Setup <a class='anchor-link ' aria-label='Anchor' href='#minimum-setup'><i-->\n<!--      class='fa-solid fa-anchor' aria-hidden='true'></i></a> <small class='show-code' title='View Code'><i-->\n<!--      class='fa-solid fa-code' aria-hidden='true'></i></small></h3>-->\n\n<!--    <p>-->\n<!--      All you need is an element to attach the picker to.-->\n<!--    </p>-->\n\n<!--    <div class='code-blocks d-none'>-->\n<!--      <ul class='nav nav-tabs' role='tablist'>-->\n<!--        <li class='nav-item' role='presentation'>-->\n<!--          <button class='nav-link active' id='icon-onlyHtml-tab' data-bs-toggle='tab'-->\n<!--                  data-bs-target='#icon-onlyHtml' type='button'-->\n<!--                  role='tab' aria-controls='icon-onlyHtml' aria-selected='true'>HTML-->\n<!--          </button>-->\n<!--        </li>-->\n<!--        <li class='nav-item' role='presentation'>-->\n<!--          <button class='nav-link' id='icon-onlyJs-tab' data-bs-toggle='tab' data-bs-target='#icon-onlyJs'-->\n<!--                  type='button'-->\n<!--                  role='tab' aria-controls='icon-onlyJs' aria-selected='false'>Javascript-->\n<!--          </button>-->\n<!--        </li>-->\n<!--        <li class='nav-item' role='presentation'>-->\n<!--          <button class='nav-link' id='icon-onlyLog-tab' data-bs-toggle='tab' data-bs-target='#icon-onlyLog'-->\n<!--                  type='button'-->\n<!--                  role='tab' aria-controls='icon-onlyLog' aria-selected='false'>Events-->\n<!--          </button>-->\n<!--        </li>-->\n<!--      </ul>-->\n<!--      <div class='tab-content'>-->\n<!--        <div class='tab-pane fade show active' id='icon-onlyHtml' role='tabpanel'-->\n<!--             aria-labelledby='icon-onlyHtml-tab'>-->\n<!--         <pre>-->\n<!--           <code class='language-html'>-->\n<!-- &lt;span-->\n<!--   id='icon-only'-->\n<!--   class='log-event'-->\n<!--   style='display: inline-block'-->\n<!-- &gt;-->\n<!--   &lt;i class='fa-solid fa-calendar fa-9x'&gt;&lt;/i&gt;-->\n<!-- &lt;/span&gt;-->\n<!--           </code>-->\n<!--         </pre>-->\n<!--        </div>-->\n<!--        <div class='tab-pane fade' id='icon-onlyJs' role='tabpanel' aria-labelledby='icon-onlyJs-tab'>-->\n<!--         <pre>-->\n<!--           <code class='language-javascript'>-->\n<!-- new tempusDominus.TempusDominus(document.getElementById('icon-only'));-->\n<!--           </code>-->\n<!--         </pre>-->\n<!--        </div>-->\n<!--        <div class='tab-pane fade logger' id='icon-onlyLog' role='tabpanel'-->\n<!--             aria-labelledby='datetimepicker1Log-tab'>-->\n<!--          <div class='alert alert-info'>-->\n<!--            Events will display as you manipulate the picker.-->\n<!--          </div>-->\n<!--        </div>-->\n<!--      </div>-->\n<!--    </div>-->\n\n<!--    <div class='container'>-->\n<!--      <div class='row'>-->\n<!--        <div class='col-sm-6'>-->\n<!--           <span-->\n<!--             id='icon-only'-->\n<!--             class='log-event'-->\n<!--             style='display: inline-block'-->\n<!--           >-->\n<!--             <i class='fa-solid fa-calendar fa-6x' aria-hidden='true'></i>-->\n<!--           </span>-->\n<!--        </div>-->\n<!--      </div>-->\n<!--    </div>-->\n<!--    <script type='text/javascript'>-->\n<!--      new tempusDominus.TempusDominus(document.getElementById('icon-only'));-->\n<!--    </script>-->\n<!--  </div>-->\n\n<!--  <div class='row'>-->\n<!--    <h3 id='simple-setup'>Simple Setup-->\n<!--      <a class='anchor-link ' aria-label='Anchor' href='#simple-setup'>-->\n<!--        <i class='fa-solid fa-anchor' aria-hidden='true'></i></a>-->\n<!--      <small class='show-code' title='View Code'><i class='fa-solid fa-code' aria-hidden='true'></i></small>-->\n\n<!--      <a aria-label='stackblitz' href='https://stackblitz.com/edit/tempus-dominus-v6-simple-setup'-->\n<!--         title='Stackblitz example'>-->\n<!--        <i class='fa-solid fa-bolt' aria-hidden='true'></i></a>-->\n<!--    </h3>-->\n\n<!--    <p>-->\n<!--      This is the simplest setup you can have with Bootstrap and Font Awesome 5. The picker defaults to FA 5 Solid-->\n<!--      icons, however you can overwrite the defaults globally.-->\n<!--    </p>-->\n\n<!--    <div class='code-blocks d-none'>-->\n<!--      <ul class='nav nav-tabs' role='tablist'>-->\n<!--        <li class='nav-item' role='presentation'>-->\n<!--          <button class='nav-link active' id='datetimepicker1Html-tab' data-bs-toggle='tab'-->\n<!--                  data-bs-target='#datetimepicker1Html' type='button'-->\n<!--                  role='tab' aria-controls='datetimepicker1Html' aria-selected='true'>HTML-->\n<!--          </button>-->\n<!--        </li>-->\n<!--        <li class='nav-item' role='presentation'>-->\n<!--          <button class='nav-link' id='datetimepicker1Js-tab' data-bs-toggle='tab'-->\n<!--                  data-bs-target='#datetimepicker1Js'-->\n<!--                  type='button'-->\n<!--                  role='tab' aria-controls='datetimepicker1Js' aria-selected='false'>Javascript-->\n<!--          </button>-->\n<!--        </li>-->\n<!--        <li class='nav-item' role='presentation'>-->\n<!--          <button class='nav-link' id='datetimepicker1Log-tab' data-bs-toggle='tab'-->\n<!--                  data-bs-target='#datetimepicker1Log'-->\n<!--                  type='button'-->\n<!--                  role='tab' aria-controls='datetimepicker1Log' aria-selected='false'>Events-->\n<!--          </button>-->\n<!--        </li>-->\n<!--      </ul>-->\n<!--      <div class='tab-content'>-->\n<!--        <div class='tab-pane fade show active' id='datetimepicker1Html' role='tabpanel'-->\n<!--             aria-labelledby='datetimepicker1Html-tab'>-->\n<!--         <pre>-->\n<!--           <code class='language-html'>-->\n<!-- &lt;div-->\n<!--     class='input-group'-->\n<!--     id='datetimepicker1'-->\n<!--     data-td-target-input='nearest'-->\n<!--     data-td-target-toggle='nearest'-->\n<!-- &gt;-->\n<!--   &lt;input-->\n<!--     id='datetimepicker1Input'-->\n<!--     type='text'-->\n<!--     class='form-control'-->\n<!--     data-td-target='#datetimepicker1'-->\n<!--   /&gt;-->\n<!--   &lt;span-->\n<!--     class='input-group-text'-->\n<!--     data-td-target='#datetimepicker1'-->\n<!--     data-td-toggle='datetimepicker'-->\n<!--   &gt;-->\n<!--     &lt;span class='fa-solid fa-calendar'&gt;&lt;/span&gt;-->\n<!--   &lt;/span&gt;-->\n<!-- &lt;/div&gt;-->\n<!--           </code>-->\n<!--         </pre>-->\n<!--        </div>-->\n<!--        <div class='tab-pane fade' id='datetimepicker1Js' role='tabpanel'-->\n<!--             aria-labelledby='datetimepicker1Js-tab'>-->\n<!--         <pre>-->\n<!--           <code class='language-javascript'>-->\n<!-- new tempusDominus.TempusDominus(document.getElementById('datetimepicker1'));-->\n<!--           </code>-->\n<!--         </pre>-->\n<!--        </div>-->\n<!--        <div class='tab-pane fade logger' id='datetimepicker1Log' role='tabpanel'-->\n<!--             aria-labelledby='datetimepicker1Log-tab'>-->\n<!--          <div class='alert alert-info'>-->\n<!--            Events will display as you manipulate the picker.-->\n<!--          </div>-->\n<!--        </div>-->\n<!--      </div>-->\n<!--    </div>-->\n\n<!--    <div class='container'>-->\n<!--      <div class='row'>-->\n<!--        <div class='col-sm-6'>-->\n<!--          <label for='datetimepicker1Input' class='form-label'>Simple picker</label>-->\n<!--          <div-->\n<!--            class='input-group log-event'-->\n<!--            id='datetimepicker1'-->\n<!--            data-td-target-input='nearest'-->\n<!--            data-td-target-toggle='nearest'-->\n<!--          >-->\n<!--            <input-->\n<!--              id='datetimepicker1Input'-->\n<!--              type='text'-->\n<!--              class='form-control'-->\n<!--              data-td-target='#datetimepicker1'-->\n<!--            />-->\n<!--            <span-->\n<!--              class='input-group-text'-->\n<!--              data-td-target='#datetimepicker1'-->\n<!--              data-td-toggle='datetimepicker'-->\n<!--            >-->\n<!--               <span class='fa-solid fa-calendar'></span>-->\n<!--             </span>-->\n<!--          </div>-->\n<!--        </div>-->\n<!--      </div>-->\n<!--    </div>-->\n<!--    <script type='text/javascript'>-->\n<!--      const datetimepicker1 = new tempusDominus.TempusDominus(document.getElementById('datetimepicker1'));-->\n<!--    </script>-->\n<!--  </div>-->\n\n<!--  <div class='row'>-->\n<!--    <h3 id='side-by-side'>Side-by-Side-->\n<!--      <a class='anchor-link ' aria-label='Anchor' href='#side-by-side'>-->\n<!--        <i class='fa-solid fa-anchor' aria-hidden='true'></i></a>-->\n<!--      <small class='show-code' title='View Code'><i class='fa-solid fa-code' aria-hidden='true'></i></small>-->\n<!--    </h3>-->\n\n<!--    <p>-->\n<!--      This demonstrates the side-by-side option.-->\n<!--    </p>-->\n\n<!--    <div class='code-blocks d-none'>-->\n<!--      <ul class='nav nav-tabs' role='tablist'>-->\n<!--        <li class='nav-item' role='presentation'>-->\n<!--          <button class='nav-link active' id='pickerSideBySideHtml-tab' data-bs-toggle='tab'-->\n<!--                  data-bs-target='#pickerSideBySideHtml' type='button'-->\n<!--                  role='tab' aria-controls='pickerSideBySideHtml' aria-selected='true'>HTML-->\n<!--          </button>-->\n<!--        </li>-->\n<!--        <li class='nav-item' role='presentation'>-->\n<!--          <button class='nav-link' id='pickerSideBySideJs-tab' data-bs-toggle='tab'-->\n<!--                  data-bs-target='#pickerSideBySideJs'-->\n<!--                  type='button'-->\n<!--                  role='tab' aria-controls='pickerSideBySideJs' aria-selected='false'>Javascript-->\n<!--          </button>-->\n<!--        </li>-->\n<!--        <li class='nav-item' role='presentation'>-->\n<!--          <button class='nav-link' id='pickerSideBySideLog-tab' data-bs-toggle='tab'-->\n<!--                  data-bs-target='#pickerSideBySideLog'-->\n<!--                  type='button'-->\n<!--                  role='tab' aria-controls='pickerSideBySideLog' aria-selected='false'>Events-->\n<!--          </button>-->\n<!--        </li>-->\n<!--      </ul>-->\n<!--      <div class='tab-content'>-->\n<!--        <div class='tab-pane fade show active' id='pickerSideBySideHtml' role='tabpanel'-->\n<!--             aria-labelledby='pickerSideBySideHtml-tab'>-->\n<!--         <pre>-->\n<!--           <code class='language-html'>-->\n<!-- &lt;div-->\n<!--     class='input-group'-->\n<!--     id='pickerSideBySide'-->\n<!--     data-td-target-input='nearest'-->\n<!--     data-td-target-toggle='nearest'-->\n<!-- &gt;-->\n<!--   &lt;input-->\n<!--     id='pickerSideBySideInput'-->\n<!--     type='text'-->\n<!--     class='form-control'-->\n<!--     data-td-target='#pickerSideBySide'-->\n<!--   /&gt;-->\n<!--   &lt;span-->\n<!--     class='input-group-text'-->\n<!--     data-td-target='#pickerSideBySide'-->\n<!--     data-td-toggle='datetimepicker'-->\n<!--   &gt;-->\n<!--     &lt;span class='fa-solid fa-calendar'&gt;&lt;/span&gt;-->\n<!--   &lt;/span&gt;-->\n<!-- &lt;/div&gt;-->\n<!--           </code>-->\n<!--         </pre>-->\n<!--        </div>-->\n<!--        <div class='tab-pane fade' id='pickerSideBySideJs' role='tabpanel'-->\n<!--             aria-labelledby='pickerSideBySideJs-tab'>-->\n<!--         <pre>-->\n<!--           <code class='language-javascript'>-->\n<!-- new tempusDominus.TempusDominus(document.getElementById('pickerSideBySide', {-->\n<!--    display: {-->\n<!--        sideBySide: true-->\n<!--    }-->\n<!-- }));-->\n<!--           </code>-->\n<!--         </pre>-->\n<!--        </div>-->\n<!--        <div class='tab-pane fade logger' id='pickerSideBySideLog' role='tabpanel'-->\n<!--             aria-labelledby='pickerSideBySideLog-tab'>-->\n<!--          <div class='alert alert-info'>-->\n<!--            Events will display as you manipulate the picker.-->\n<!--          </div>-->\n<!--        </div>-->\n<!--      </div>-->\n<!--    </div>-->\n\n<!--    <div class='container'>-->\n<!--      <div class='row'>-->\n<!--        <div class='col-sm-6'>-->\n<!--          <label for='pickerSideBySideInput' class='form-label'>Side-by-Side picker</label>-->\n<!--          <div-->\n<!--            class='input-group log-event'-->\n<!--            id='pickerSideBySide'-->\n<!--            data-td-target-input='nearest'-->\n<!--            data-td-target-toggle='nearest'-->\n<!--          >-->\n<!--            <input-->\n<!--              id='pickerSideBySideInput'-->\n<!--              type='text'-->\n<!--              class='form-control'-->\n<!--              data-td-target='#pickerSideBySide'-->\n<!--            />-->\n<!--            <span-->\n<!--              class='input-group-text'-->\n<!--              data-td-target='#pickerSideBySide'-->\n<!--              data-td-toggle='datetimepicker'-->\n<!--            >-->\n<!--               <span class='fa-solid fa-calendar'></span>-->\n<!--             </span>-->\n<!--          </div>-->\n<!--        </div>-->\n<!--      </div>-->\n<!--    </div>-->\n<!--    <script type='text/javascript'>-->\n<!--      const pickerSideBySide = new tempusDominus.TempusDominus(document.getElementById('pickerSideBySide'), {-->\n<!--        display: {-->\n<!--          sideBySide: true-->\n<!--        }-->\n<!--      });-->\n<!--    </script>-->\n<!--  </div>-->\n\n<!--  <div class='row'>-->\n<!--    <h3 id='locales'>Using Locales <a class='anchor-link ' aria-label='Anchor' href='#locales'><i-->\n<!--      class='fa-solid fa-anchor' aria-hidden='true'></i></a> <small class='show-code'><i-->\n<!--      class='fa-solid fa-code' aria-hidden='true'></i></small></h3>-->\n\n<!--    <p>-->\n<!--      You can provide localization options to override the tooltips as well as the day/month display.-->\n<!--    </p>-->\n<!--    <p>-->\n<!--      You could also set this globally via <code>tempusDominus.DefaultOptions.localization = { ... }</code> or by-->\n<!--      creating a variable e.g. <code>const ru = { today:'Перейти сегодня' ... };</code> then provide the options-->\n<!--      as-->\n<!--    </p>-->\n<!--    <pre>-->\n<!--         <code class='language-javascript'>-->\n<!-- new tempusDominus.TempusDominus(document.getElementById('datetimepicker2'), {-->\n<!--   localization: ru-->\n<!-- }-->\n<!--         </code>-->\n<!--     </pre>-->\n\n<!--    <div class='code-blocks d-none'>-->\n<!--      <ul class='nav nav-tabs' role='tablist'>-->\n<!--        <li class='nav-item' role='presentation'>-->\n<!--          <button class='nav-link active' id='datetimepicker2Html-tab' data-bs-toggle='tab'-->\n<!--                  data-bs-target='#datetimepicker2Html' type='button'-->\n<!--                  role='tab' aria-controls='datetimepicker2Html' aria-selected='true'>HTML-->\n<!--          </button>-->\n<!--        </li>-->\n<!--        <li class='nav-item' role='presentation'>-->\n<!--          <button class='nav-link' id='datetimepicker2Js-tab' data-bs-toggle='tab'-->\n<!--                  data-bs-target='#datetimepicker2Js'-->\n<!--                  type='button'-->\n<!--                  role='tab' aria-controls='datetimepicker2Js' aria-selected='false'>Javascript-->\n<!--          </button>-->\n<!--        </li>-->\n<!--        <li class='nav-item' role='presentation'>-->\n<!--          <button class='nav-link' id='datetimepicker2Log-tab' data-bs-toggle='tab'-->\n<!--                  data-bs-target='#datetimepicker2Log'-->\n<!--                  type='button'-->\n<!--                  role='tab' aria-controls='datetimepicker2Log' aria-selected='false'>Events-->\n<!--          </button>-->\n<!--        </li>-->\n<!--      </ul>-->\n<!--      <div class='tab-content'>-->\n<!--        <div class='tab-pane fade show active' id='datetimepicker2Html' role='tabpanel'-->\n<!--             aria-labelledby='datetimepicker2Html-tab'>-->\n<!--         <pre>-->\n<!--           <code class='language-html'>-->\n<!-- &lt;label for='datetimepicker2Input' class='form-label'&gt;Russian locale&lt;/label&gt;-->\n<!-- &lt;div-->\n<!--   class='input-group log-event'-->\n<!--   id='datetimepicker2'-->\n<!--   data-td-target-input='nearest'-->\n<!--   data-td-target-toggle='nearest'-->\n<!-- &gt;-->\n<!--   &lt;input-->\n<!--     id='datetimepicker2Input'-->\n<!--     type='text'-->\n<!--     class='form-control'-->\n<!--     data-td-target='#datetimepicker2'-->\n<!--   /&gt;-->\n<!--   &lt;span-->\n<!--     class='input-group-text'-->\n<!--     data-td-target='#datetimepicker2'-->\n<!--     data-td-toggle='datetimepicker'-->\n<!--   &gt;-->\n<!--     &lt;span class='fa-solid fa-calendar'&gt;&lt;/span&gt;-->\n<!--   &lt;/span&gt;-->\n<!-- &lt;/div&gt;-->\n<!--           </code>-->\n<!--         </pre>-->\n<!--        </div>-->\n<!--        <div class='tab-pane fade' id='datetimepicker2Js' role='tabpanel'-->\n<!--             aria-labelledby='datetimepicker2Js-tab'>-->\n<!--         <pre>-->\n<!--           <code class='language-javascript'>-->\n<!-- new tempusDominus.TempusDominus(document.getElementById('datetimepicker2'), {-->\n<!--     localization: {-->\n<!--        today: 'Перейти сегодня',-->\n<!--        clear: 'Очистить выделение',-->\n<!--        close: 'Закрыть сборщик',-->\n<!--        selectMonth: 'Выбрать месяц',-->\n<!--        previousMonth: 'Предыдущий месяц',-->\n<!--        nextMonth: 'В следующем месяце',-->\n<!--        selectYear: 'Выбрать год',-->\n<!--        previousYear: 'Предыдущий год',-->\n<!--        nextYear: 'В следующем году',-->\n<!--        selectDecade: 'Выбрать десятилетие',-->\n<!--        previousDecade: 'Предыдущее десятилетие',-->\n<!--        nextDecade: 'Следующее десятилетие',-->\n<!--        previousCentury: 'Предыдущий век',-->\n<!--        nextCentury: 'Следующий век',-->\n<!--        pickHour: 'Выберите час',-->\n<!--        incrementHour: 'Время увеличения',-->\n<!--        decrementHour: 'Уменьшить час',-->\n<!--        pickMinute: 'Выбрать минуту',-->\n<!--        incrementMinute: 'Минута приращения',-->\n<!--        decrementMinute: 'Уменьшить минуту',-->\n<!--        pickSecond: 'Выбрать второй',-->\n<!--        incrementSecond: 'Увеличение секунды',-->\n<!--        decrementSecond: 'Уменьшение секунды',-->\n<!--        toggleMeridiem: 'Переключить период',-->\n<!--        selectTime: 'Выбрать время',-->\n<!--        selectDate: 'Выбрать дату',-->\n<!--        dayViewHeaderFormat: { month: 'long', year: '2-digit' },-->\n<!--        locale: 'ru',-->\n<!--        startOfTheWeek: 1-->\n<!--     }-->\n<!-- });-->\n<!--           </code>-->\n<!--         </pre>-->\n<!--        </div>-->\n<!--        <div class='tab-pane fade logger' id='datetimepicker2Log' role='tabpanel'-->\n<!--             aria-labelledby='datetimepicker2Log-tab'>-->\n<!--          <div class='alert alert-info'>-->\n<!--            Events will display as you manipulate the picker.-->\n<!--          </div>-->\n<!--        </div>-->\n<!--      </div>-->\n<!--    </div>-->\n\n<!--    <div class='container'>-->\n<!--      <div class='row'>-->\n<!--        <div class='col-sm-6'>-->\n<!--          <label for='datetimepicker2Input' class='form-label'>Russian locale</label>-->\n<!--          <div-->\n<!--            class='input-group log-event'-->\n<!--            id='datetimepicker2'-->\n<!--            data-td-target-input='nearest'-->\n<!--            data-td-target-toggle='nearest'-->\n<!--          >-->\n<!--            <input-->\n<!--              id='datetimepicker2Input'-->\n<!--              type='text'-->\n<!--              class='form-control'-->\n<!--              data-td-target='#datetimepicker2'-->\n<!--            />-->\n<!--            <span-->\n<!--              class='input-group-text'-->\n<!--              data-td-target='#datetimepicker2'-->\n<!--              data-td-toggle='datetimepicker'-->\n<!--            >-->\n<!--               <span class='fa-solid fa-calendar'></span>-->\n<!--             </span>-->\n<!--          </div>-->\n<!--        </div>-->\n<!--      </div>-->\n<!--    </div>-->\n<!--    <script type='text/javascript'>-->\n<!--      new tempusDominus.TempusDominus(document.getElementById('datetimepicker2'), {-->\n<!--        localization: {-->\n<!--          today: 'Перейти сегодня',-->\n<!--          clear: 'Очистить выделение',-->\n<!--          close: 'Закрыть сборщик',-->\n<!--          selectMonth: 'Выбрать месяц',-->\n<!--          previousMonth: 'Предыдущий месяц',-->\n<!--          nextMonth: 'В следующем месяце',-->\n<!--          selectYear: 'Выбрать год',-->\n<!--          previousYear: 'Предыдущий год',-->\n<!--          nextYear: 'В следующем году',-->\n<!--          selectDecade: 'Выбрать десятилетие',-->\n<!--          previousDecade: 'Предыдущее десятилетие',-->\n<!--          nextDecade: 'Следующее десятилетие',-->\n<!--          previousCentury: 'Предыдущий век',-->\n<!--          nextCentury: 'Следующий век',-->\n<!--          pickHour: 'Выберите час',-->\n<!--          incrementHour: 'Время увеличения',-->\n<!--          decrementHour: 'Уменьшить час',-->\n<!--          pickMinute: 'Выбрать минуту',-->\n<!--          incrementMinute: 'Минута приращения',-->\n<!--          decrementMinute: 'Уменьшить минуту',-->\n<!--          pickSecond: 'Выбрать второй',-->\n<!--          incrementSecond: 'Увеличение секунды',-->\n<!--          decrementSecond: 'Уменьшение секунды',-->\n<!--          toggleMeridiem: 'Переключить период',-->\n<!--          selectTime: 'Выбрать время',-->\n<!--          selectDate: 'Выбрать дату',-->\n<!--          dayViewHeaderFormat: { month: 'long', year: '2-digit' },-->\n<!--          locale: 'ru',-->\n<!--          startOfTheWeek: 1-->\n<!--        }-->\n<!--      });-->\n<!--    </script>-->\n<!--  </div>-->\n\n<!--  <div class='row'>-->\n<!--    <h3 id='time-only'>Time Only <a class='anchor-link ' aria-label='Anchor' href='#time-only'><i-->\n<!--      class='fa-solid fa-anchor' aria-hidden='true'></i></a> <small class='show-code'><i-->\n<!--      class='fa-solid fa-code' aria-hidden='true'></i></small></h3>-->\n\n<!--    <p>-->\n<!--      Version 6 no longer uses MomentJs so selecting the what to display is now done via the-->\n<!--      <code>display.components</code>.-->\n<!--    </p>-->\n\n<!--    <div class='code-blocks d-none'>-->\n<!--      <ul class='nav nav-tabs' role='tablist'>-->\n<!--        <li class='nav-item' role='presentation'>-->\n<!--          <button class='nav-link active' id='datetimepicker3Html-tab' data-bs-toggle='tab'-->\n<!--                  data-bs-target='#datetimepicker3Html' type='button'-->\n<!--                  role='tab' aria-controls='datetimepicker3Html' aria-selected='true'>HTML-->\n<!--          </button>-->\n<!--        </li>-->\n<!--        <li class='nav-item' role='presentation'>-->\n<!--          <button class='nav-link' id='datetimepicker3Js-tab' data-bs-toggle='tab'-->\n<!--                  data-bs-target='#datetimepicker3Js'-->\n<!--                  type='button'-->\n<!--                  role='tab' aria-controls='datetimepicker3Js' aria-selected='false'>Javascript-->\n<!--          </button>-->\n<!--        </li>-->\n<!--        <li class='nav-item' role='presentation'>-->\n<!--          <button class='nav-link' id='datetimepicker3Log-tab' data-bs-toggle='tab'-->\n<!--                  data-bs-target='#datetimepicker3Log'-->\n<!--                  type='button'-->\n<!--                  role='tab' aria-controls='datetimepicker3Log' aria-selected='false'>Events-->\n<!--          </button>-->\n<!--        </li>-->\n<!--      </ul>-->\n<!--      <div class='tab-content'>-->\n<!--        <div class='tab-pane fade show active' id='datetimepicker3Html' role='tabpanel'-->\n<!--             aria-labelledby='datetimepicker3Html-tab'>-->\n<!--         <pre>-->\n<!--           <code class='language-html'>-->\n<!-- &lt;div-->\n<!--     class='input-group'-->\n<!--     id='datetimepicker3'-->\n<!--     data-td-target-input='nearest'-->\n<!--     data-td-target-toggle='nearest'-->\n<!-- &gt;-->\n<!--   &lt;input-->\n<!--     id='datetimepicker3Input'-->\n<!--     type='text'-->\n<!--     class='form-control'-->\n<!--     data-td-target='#datetimepicker3'-->\n<!--   /&gt;-->\n<!--   &lt;span-->\n<!--     class='input-group-text'-->\n<!--     data-td-target='#datetimepicker3'-->\n<!--     data-td-toggle='datetimepicker'-->\n<!--   &gt;-->\n<!--     &lt;span class='fa-solid fa-clock'&gt;&lt;/span&gt;-->\n<!--   &lt;/span&gt;-->\n<!-- &lt;/div&gt;-->\n<!--           </code>-->\n<!--         </pre>-->\n<!--        </div>-->\n<!--        <div class='tab-pane fade' id='datetimepicker3Js' role='tabpanel'-->\n<!--             aria-labelledby='datetimepicker3Js-tab'>-->\n<!--         <pre>-->\n<!--           <code class='language-javascript'>-->\n<!-- new tempusDominus.TempusDominus(document.getElementById('datetimepicker3'), {-->\n<!--   display: {-->\n<!--     viewMode: 'clock',-->\n<!--     components: {-->\n<!--       decades: false,-->\n<!--       year: false,-->\n<!--       month: false,-->\n<!--       date: false,-->\n<!--       hours: true,-->\n<!--       minutes: true,-->\n<!--       seconds: false-->\n<!--     }-->\n<!--   }-->\n<!-- });-->\n<!--           </code>-->\n<!--         </pre>-->\n<!--        </div>-->\n<!--        <div class='tab-pane fade logger' id='datetimepicker3Log' role='tabpanel'-->\n<!--             aria-labelledby='datetimepicker3Log-tab'>-->\n<!--          <div class='alert alert-info'>-->\n<!--            Events will display as you manipulate the picker.-->\n<!--          </div>-->\n<!--        </div>-->\n<!--      </div>-->\n<!--    </div>-->\n\n<!--    <div class='container'>-->\n<!--      <div class='row'>-->\n<!--        <div class='col-sm-6'>-->\n<!--          <label for='datetimepicker3Input' class='form-label'>Time</label>-->\n<!--          <div-->\n<!--            class='input-group log-event'-->\n<!--            id='datetimepicker3'-->\n<!--            data-td-target-input='nearest'-->\n<!--            data-td-target-toggle='nearest'-->\n<!--          >-->\n<!--            <input-->\n<!--              id='datetimepicker3Input'-->\n<!--              type='text'-->\n<!--              class='form-control'-->\n<!--              data-td-target='#datetimepicker3'-->\n<!--            />-->\n<!--            <span-->\n<!--              class='input-group-text'-->\n<!--              data-td-target='#datetimepicker3'-->\n<!--              data-td-toggle='datetimepicker'-->\n<!--            >-->\n<!--               <span class='fa-solid fa-clock'></span>-->\n<!--             </span>-->\n<!--          </div>-->\n<!--        </div>-->\n<!--      </div>-->\n<!--    </div>-->\n<!--    <script type='text/javascript'>-->\n<!--      new tempusDominus.TempusDominus(document.getElementById('datetimepicker3'), {-->\n<!--        display: {-->\n<!--          viewMode: 'clock',-->\n<!--          components: {-->\n<!--            decades: false,-->\n<!--            year: false,-->\n<!--            month: false,-->\n<!--            date: false,-->\n<!--            hours: true,-->\n<!--            minutes: true,-->\n<!--            seconds: false-->\n<!--          }-->\n<!--        }-->\n<!--      });-->\n<!--    </script>-->\n<!--  </div>-->\n\n<!--  <div class='row'>-->\n<!--    <h3 id='date-only'>Date Only <a class='anchor-link ' aria-label='Anchor' href='#date-only'><i-->\n<!--      class='fa-solid fa-anchor' aria-hidden='true'></i></a> <small class='show-code'><i-->\n<!--      class='fa-solid fa-code' aria-hidden='true'></i></small></h3>-->\n\n<!--    <p>-->\n<!--      Version 6 no longer uses MomentJs so selecting what to display is now done via the-->\n<!--      <code>display.components</code>.-->\n<!--    </p>-->\n\n<!--    <div class='code-blocks d-none'>-->\n<!--      <ul class='nav nav-tabs' role='tablist'>-->\n<!--        <li class='nav-item' role='presentation'>-->\n<!--          <button class='nav-link active' id='datetimepicker4Html-tab' data-bs-toggle='tab'-->\n<!--                  data-bs-target='#datetimepicker4Html' type='button'-->\n<!--                  role='tab' aria-controls='datetimepicker4Html' aria-selected='true'>HTML-->\n<!--          </button>-->\n<!--        </li>-->\n<!--        <li class='nav-item' role='presentation'>-->\n<!--          <button class='nav-link' id='datetimepicker4Js-tab' data-bs-toggle='tab'-->\n<!--                  data-bs-target='#datetimepicker4Js'-->\n<!--                  type='button'-->\n<!--                  role='tab' aria-controls='datetimepicker4Js' aria-selected='false'>Javascript-->\n<!--          </button>-->\n<!--        </li>-->\n<!--        <li class='nav-item' role='presentation'>-->\n<!--          <button class='nav-link' id='datetimepicker4Log-tab' data-bs-toggle='tab'-->\n<!--                  data-bs-target='#datetimepicker4Log'-->\n<!--                  type='button'-->\n<!--                  role='tab' aria-controls='datetimepicker4Log' aria-selected='false'>Events-->\n<!--          </button>-->\n<!--        </li>-->\n<!--      </ul>-->\n<!--      <div class='tab-content'>-->\n<!--        <div class='tab-pane fade show active' id='datetimepicker4Html' role='tabpanel'-->\n<!--             aria-labelledby='datetimepicker4Html-tab'>-->\n<!--         <pre>-->\n<!--           <code class='language-html'>-->\n<!-- &lt;div-->\n<!--     class='input-group'-->\n<!--     id='datetimepicker4'-->\n<!--     data-td-target-input='nearest'-->\n<!--     data-td-target-toggle='nearest'-->\n<!-- &gt;-->\n<!--   &lt;input-->\n<!--     id='datetimepicker4Input'-->\n<!--     type='text'-->\n<!--     class='form-control'-->\n<!--     data-td-target='#datetimepicker4'-->\n<!--   /&gt;-->\n<!--   &lt;span-->\n<!--     class='input-group-text'-->\n<!--     data-td-target='#datetimepicker4'-->\n<!--     data-td-toggle='datetimepicker'-->\n<!--   &gt;-->\n<!--     &lt;span class='fa-solid fa-calendar'&gt;&lt;/span&gt;-->\n<!--   &lt;/span&gt;-->\n<!-- &lt;/div&gt;-->\n<!--           </code>-->\n<!--         </pre>-->\n<!--        </div>-->\n<!--        <div class='tab-pane fade' id='datetimepicker4Js' role='tabpanel'-->\n<!--             aria-labelledby='datetimepicker4Js-tab'>-->\n<!--         <pre>-->\n<!--           <code class='language-javascript'>-->\n<!-- new tempusDominus.TempusDominus(document.getElementById('datetimepicker4'), {-->\n<!--   display: {-->\n<!--     viewMode: 'clock',-->\n<!--     components: {-->\n<!--       decades: true,-->\n<!--       year: true,-->\n<!--       month: true,-->\n<!--       date: true,-->\n<!--       hours: false,-->\n<!--       minutes: false,-->\n<!--       seconds: false,-->\n<!--     }-->\n<!--   }-->\n<!-- });-->\n<!--           </code>-->\n<!--         </pre>-->\n<!--        </div>-->\n<!--        <div class='tab-pane fade logger' id='datetimepicker4Log' role='tabpanel'-->\n<!--             aria-labelledby='datetimepicker4Log-tab'>-->\n<!--          <div class='alert alert-info'>-->\n<!--            Events will display as you manipulate the picker.-->\n<!--          </div>-->\n<!--        </div>-->\n<!--      </div>-->\n<!--    </div>-->\n\n<!--    <div class='container'>-->\n<!--      <div class='row'>-->\n<!--        <div class='col-sm-6'>-->\n<!--          <label for='datetimepicker4Input' class='form-label'>Date</label>-->\n<!--          <div-->\n<!--            class='input-group log-event'-->\n<!--            id='datetimepicker4'-->\n<!--            data-td-target-input='nearest'-->\n<!--            data-td-target-toggle='nearest'-->\n<!--          >-->\n<!--            <input-->\n<!--              id='datetimepicker4Input'-->\n<!--              type='text'-->\n<!--              class='form-control'-->\n<!--              data-td-target='#datetimepicker4'-->\n<!--            />-->\n<!--            <span-->\n<!--              class='input-group-text'-->\n<!--              data-td-target='#datetimepicker4'-->\n<!--              data-td-toggle='datetimepicker'-->\n<!--            >-->\n<!--               <span class='fa-solid fa-calendar'></span>-->\n<!--             </span>-->\n<!--          </div>-->\n<!--        </div>-->\n<!--      </div>-->\n<!--    </div>-->\n<!--    <script type='text/javascript'>-->\n<!--      new tempusDominus.TempusDominus(document.getElementById('datetimepicker4'), {-->\n<!--        display: {-->\n<!--          components: {-->\n<!--            date: true,-->\n<!--            decades: true,-->\n<!--            month: true,-->\n<!--            year: true,-->\n<!--            hours: false,-->\n<!--            seconds: false,-->\n<!--            minutes: false-->\n<!--          }-->\n<!--        }-->\n<!--      });-->\n<!--    </script>-->\n<!--  </div>-->\n\n<!--  <div class='row'>-->\n<!--    <h3 id='input-only'>Input Only <a class='anchor-link ' aria-label='Anchor' href='#simple-setup'><i-->\n<!--      class='fa-solid fa-anchor' aria-hidden='true'></i></a> <small class='show-code' title='View Code'><i-->\n<!--      class='fa-solid fa-code' aria-hidden='true'></i></small></h3>-->\n\n<!--    <p>-->\n<!--      An input group and icon are not required for the picker to function, you can also simply use an input field.-->\n<!--    </p>-->\n\n<!--    <div class='code-blocks d-none'>-->\n<!--      <ul class='nav nav-tabs' role='tablist'>-->\n<!--        <li class='nav-item' role='presentation'>-->\n<!--          <button class='nav-link active' id='datetimepicker5Html-tab' data-bs-toggle='tab'-->\n<!--                  data-bs-target='#datetimepicker5Html' type='button'-->\n<!--                  role='tab' aria-controls='datetimepicker5Html' aria-selected='true'>HTML-->\n<!--          </button>-->\n<!--        </li>-->\n<!--        <li class='nav-item' role='presentation'>-->\n<!--          <button class='nav-link' id='datetimepicker5Js-tab' data-bs-toggle='tab'-->\n<!--                  data-bs-target='#datetimepicker5Js'-->\n<!--                  type='button'-->\n<!--                  role='tab' aria-controls='datetimepicker5Js' aria-selected='false'>Javascript-->\n<!--          </button>-->\n<!--        </li>-->\n<!--        <li class='nav-item' role='presentation'>-->\n<!--          <button class='nav-link' id='datetimepicker5Log-tab' data-bs-toggle='tab'-->\n<!--                  data-bs-target='#datetimepicker5Log'-->\n<!--                  type='button'-->\n<!--                  role='tab' aria-controls='datetimepicker5Log' aria-selected='false'>Events-->\n<!--          </button>-->\n<!--        </li>-->\n<!--      </ul>-->\n<!--      <div class='tab-content'>-->\n<!--        <div class='tab-pane fade show active' id='datetimepicker5Html' role='tabpanel'-->\n<!--             aria-labelledby='datetimepicker5Html-tab'>-->\n<!--         <pre>-->\n<!--           <code class='language-html'>-->\n<!-- &lt;div-->\n<!--     class='input-group'-->\n<!--     id='datetimepicker5'-->\n<!--     data-td-target-input='nearest'-->\n<!--     data-td-target-toggle='nearest'-->\n<!-- &gt;-->\n<!--   &lt;input-->\n<!--     id='datetimepicker5Input'-->\n<!--     type='text'-->\n<!--     class='form-control'-->\n<!--     data-td-target='#datetimepicker5'-->\n<!--   /&gt;-->\n<!--   &lt;span-->\n<!--     class='input-group-text'-->\n<!--     data-td-target='#datetimepicker5'-->\n<!--     data-td-toggle='datetimepicker'-->\n<!--   &gt;-->\n<!--     &lt;span class='fa-solid fa-calendar'&gt;&lt;/span&gt;-->\n<!--   &lt;/span&gt;-->\n<!-- &lt;/div&gt;-->\n<!--           </code>-->\n<!--         </pre>-->\n<!--        </div>-->\n<!--        <div class='tab-pane fade' id='datetimepicker5Js' role='tabpanel'-->\n<!--             aria-labelledby='datetimepicker5Js-tab'>-->\n<!--         <pre>-->\n<!--           <code class='language-javascript'>-->\n<!-- new tempusDominus.TempusDominus(document.getElementById('datetimepicker5'));-->\n<!--           </code>-->\n<!--         </pre>-->\n<!--        </div>-->\n<!--        <div class='tab-pane fade logger' id='datetimepicker5Log' role='tabpanel'-->\n<!--             aria-labelledby='datetimepicker5Log-tab'>-->\n<!--          <div class='alert alert-info'>-->\n<!--            Events will display as you manipulate the picker.-->\n<!--          </div>-->\n<!--        </div>-->\n<!--      </div>-->\n<!--    </div>-->\n\n<!--    <div class='container'>-->\n<!--      <div class='row'>-->\n<!--        <div class='col-sm-6'>-->\n<!--          <label for='datetimepicker5' class='form-label'>No icon</label>-->\n<!--          <input-->\n<!--            id='datetimepicker5'-->\n<!--            type='text'-->\n<!--            class='form-control'-->\n<!--          />-->\n<!--        </div>-->\n<!--      </div>-->\n<!--    </div>-->\n<!--    <script type='text/javascript'>-->\n<!--      new tempusDominus.TempusDominus(document.getElementById('datetimepicker5'), {});-->\n<!--    </script>-->\n<!--  </div>-->\n\n<!--  <div class='row'>-->\n<!--    <h3 id='enabledDisabled-dates'>Enabled/Disabled Dates <a class='anchor-link ' aria-label='Anchor'-->\n<!--                                                             href='#simple-setup'><i-->\n<!--      class='fa-solid fa-anchor' aria-hidden='true'></i></a> <small class='show-code' title='View Code'><i-->\n<!--      class='fa-solid fa-code' aria-hidden='true'></i></small></h3>-->\n\n<!--    <p>-->\n<!--      You can provide an array of dates to enable or dates to disable.-->\n<!--    </p>-->\n\n<!--    <div class='code-blocks d-none'>-->\n<!--      <ul class='nav nav-tabs' role='tablist'>-->\n<!--        <li class='nav-item' role='presentation'>-->\n<!--          <button class='nav-link active' id='enabledDisabledHtml-tab' data-bs-toggle='tab'-->\n<!--                  data-bs-target='#enabledDisabledHtml' type='button'-->\n<!--                  role='tab' aria-controls='enabledDisabledHtml' aria-selected='true'>HTML-->\n<!--          </button>-->\n<!--        </li>-->\n<!--        <li class='nav-item' role='presentation'>-->\n<!--          <button class='nav-link' id='enabledDisabledJs-tab' data-bs-toggle='tab'-->\n<!--                  data-bs-target='#enabledDisabledJs'-->\n<!--                  type='button'-->\n<!--                  role='tab' aria-controls='enabledDisabledJs' aria-selected='false'>Javascript-->\n<!--          </button>-->\n<!--        </li>-->\n<!--        <li class='nav-item' role='presentation'>-->\n<!--          <button class='nav-link' id='enabledDisabledLog-tab' data-bs-toggle='tab'-->\n<!--                  data-bs-target='#enabledDisabledLog'-->\n<!--                  type='button'-->\n<!--                  role='tab' aria-controls='enabledDisabledLog' aria-selected='false'>Events-->\n<!--          </button>-->\n<!--        </li>-->\n<!--      </ul>-->\n<!--      <div class='tab-content'>-->\n<!--        <div class='tab-pane fade show active' id='enabledDisabledHtml' role='tabpanel'-->\n<!--             aria-labelledby='enabledDisabledHtml-tab'>-->\n<!--         <pre>-->\n<!--           <code class='language-html'>-->\n<!-- &lt;div-->\n<!--     class='input-group'-->\n<!--     id='enabledDisabled'-->\n<!--     data-td-target-input='nearest'-->\n<!--     data-td-target-toggle='nearest'-->\n<!-- &gt;-->\n<!--   &lt;input-->\n<!--     id='enabledDisabledInput'-->\n<!--     type='text'-->\n<!--     class='form-control'-->\n<!--     data-td-target='#enabledDisabled'-->\n<!--   /&gt;-->\n<!--   &lt;span-->\n<!--     class='input-group-text'-->\n<!--     data-td-target='#enabledDisabled'-->\n<!--     data-td-toggle='datetimepicker'-->\n<!--   &gt;-->\n<!--     &lt;span class='fa-solid fa-calendar'&gt;&lt;/span&gt;-->\n<!--   &lt;/span&gt;-->\n<!-- &lt;/div&gt;-->\n<!--           </code>-->\n<!--         </pre>-->\n<!--        </div>-->\n<!--        <div class='tab-pane fade' id='enabledDisabledJs' role='tabpanel'-->\n<!--             aria-labelledby='enabledDisabledJs-tab'>-->\n<!--         <pre>-->\n<!--           <code class='language-javascript'>-->\n<!-- const tomorrow = new Date();-->\n<!-- tomorrow.setDate(tomorrow.getDate()+1);-->\n<!-- new tempusDominus.TempusDominus(document.getElementById('enabledDisabled'), {-->\n<!--   restrictions: {-->\n<!--     disabledDates: [-->\n<!--       tomorrow,-->\n<!--       new tempusDominus.DateTime().manipulate(2, 'date')-->\n<!--     ]-->\n<!--   }-->\n<!-- });-->\n<!--           </code>-->\n<!--         </pre>-->\n<!--        </div>-->\n<!--        <div class='tab-pane fade logger' id='enabledDisabledLog' role='tabpanel'-->\n<!--             aria-labelledby='enabledDisabledLog-tab'>-->\n<!--          <div class='alert alert-info'>-->\n<!--            Events will display as you manipulate the picker.-->\n<!--          </div>-->\n<!--        </div>-->\n<!--      </div>-->\n<!--    </div>-->\n\n<!--    <div class='container'>-->\n<!--      <div class='row'>-->\n<!--        <div class='col-sm-6'>-->\n<!--          <label for='enabledDisabledInput' class='form-label'>Next two days are disabled</label>-->\n<!--          <div-->\n<!--            class='input-group log-event'-->\n<!--            id='enabledDisabled'-->\n<!--            data-td-target-input='nearest'-->\n<!--            data-td-target-toggle='nearest'-->\n<!--          >-->\n<!--            <input-->\n<!--              id='enabledDisabledInput'-->\n<!--              type='text'-->\n<!--              class='form-control'-->\n<!--              data-td-target='#enabledDisabled'-->\n<!--            />-->\n<!--            <span-->\n<!--              class='input-group-text'-->\n<!--              data-td-target='#enabledDisabled'-->\n<!--              data-td-toggle='datetimepicker'-->\n<!--            >-->\n<!--               <span class='fa-solid fa-calendar'></span>-->\n<!--             </span>-->\n<!--          </div>-->\n<!--        </div>-->\n<!--      </div>-->\n<!--    </div>-->\n<!--    <script type='text/javascript'>-->\n<!--      const tomorrow = new Date();-->\n<!--      tomorrow.setDate(tomorrow.getDate() + 1);-->\n<!--      new tempusDominus.TempusDominus(document.getElementById('enabledDisabled'), {-->\n<!--        restrictions: {-->\n<!--          disabledDates: [-->\n<!--            tomorrow,-->\n<!--            new tempusDominus.DateTime().manipulate(2, 'date')-->\n<!--          ]-->\n<!--        }-->\n<!--      });-->\n<!--    </script>-->\n<!--  </div>-->\n\n<!--  <div class='row'>-->\n<!--    <h3 id='linked-pickers'>Linked pickers <a class='anchor-link ' aria-label='Anchor' href='#linked-pickers'><i-->\n<!--      class='fa-solid fa-anchor' aria-hidden='true'></i></a> <small class='show-code' title='View Code'><i-->\n<!--      class='fa-solid fa-code' aria-hidden='true'></i></small></h3>-->\n\n<!--    <p>-->\n<!--      You can use event listeners or the subscribe method to link two pickers together. For example, a hotel stay-->\n<!--      booking.-->\n<!--    </p>-->\n\n<!--    <div class='code-blocks d-none'>-->\n<!--      <ul class='nav nav-tabs' role='tablist'>-->\n<!--        <li class='nav-item' role='presentation'>-->\n<!--          <button class='nav-link active' id='linkedPickersHtml-tab' data-bs-toggle='tab'-->\n<!--                  data-bs-target='#linkedPickersHtml' type='button'-->\n<!--                  role='tab' aria-controls='linkedPickersHtml' aria-selected='true'>HTML-->\n<!--          </button>-->\n<!--        </li>-->\n<!--        <li class='nav-item' role='presentation'>-->\n<!--          <button class='nav-link' id='linkedPickersJs-tab' data-bs-toggle='tab'-->\n<!--                  data-bs-target='#linkedPickersJs'-->\n<!--                  type='button'-->\n<!--                  role='tab' aria-controls='linkedPickersJs' aria-selected='false'>Javascript-->\n<!--          </button>-->\n<!--        </li>-->\n<!--        <li class='nav-item' role='presentation'>-->\n<!--          <button class='nav-link' id='linkedPickersLog-tab' data-bs-toggle='tab'-->\n<!--                  data-bs-target='#linkedPickersLog'-->\n<!--                  type='button'-->\n<!--                  role='tab' aria-controls='linkedPickersLog' aria-selected='false'>Events-->\n<!--          </button>-->\n<!--        </li>-->\n<!--      </ul>-->\n<!--      <div class='tab-content'>-->\n<!--        <div class='tab-pane fade show active' id='linkedPickersHtml' role='tabpanel'-->\n<!--             aria-labelledby='linkedPickersHtml-tab'>-->\n<!--         <pre>-->\n<!--           <code class='language-html'>-->\n<!--&lt;div class=&#39;row&#39;&gt;-->\n<!--\t&lt;div class=&#39;col-sm-6&#39;&gt;-->\n<!--\t  &lt;label for=&#39;linkedPickers1Input&#39; class=&#39;form-label&#39;&gt;From&lt;/label&gt;-->\n<!--\t  &lt;div-->\n<!--\t\tclass=&#39;input-group log-event&#39;-->\n<!--\t\tid=&#39;linkedPickers1&#39;-->\n<!--\t\tdata-td-target-input=&#39;nearest&#39;-->\n<!--\t\tdata-td-target-toggle=&#39;nearest&#39;-->\n<!--\t  &gt;-->\n<!--\t\t&lt;input-->\n<!--\t\t  id=&#39;linkedPickers1Input&#39;-->\n<!--\t\t  type=&#39;text&#39;-->\n<!--\t\t  class=&#39;form-control&#39;-->\n<!--\t\t  data-td-target=&#39;#linkedPickers1&#39;-->\n<!--\t\t/&gt;-->\n<!--\t\t&lt;span-->\n<!--\t\t  class=&#39;input-group-text&#39;-->\n<!--\t\t  data-td-target=&#39;#linkedPickers1&#39;-->\n<!--\t\t  data-td-toggle=&#39;datetimepicker&#39;-->\n<!--\t\t&gt;-->\n<!--\t\t   &lt;span class=&#39;fa-solid fa-calendar&#39;&gt;&lt;/span&gt;-->\n<!--\t\t &lt;/span&gt;-->\n<!--\t  &lt;/div&gt;-->\n<!--\t&lt;/div&gt;-->\n<!--\t&lt;div class=&#39;col-sm-6&#39;&gt;-->\n<!--\t  &lt;label for=&#39;linkedPickers2Input&#39; class=&#39;form-label&#39;&gt;To&lt;/label&gt;-->\n<!--\t  &lt;div-->\n<!--\t\tclass=&#39;input-group log-event&#39;-->\n<!--\t\tid=&#39;linkedPickers2&#39;-->\n<!--\t\tdata-td-target-input=&#39;nearest&#39;-->\n<!--\t\tdata-td-target-toggle=&#39;nearest&#39;-->\n<!--\t  &gt;-->\n<!--\t\t&lt;input-->\n<!--\t\t  id=&#39;linkedPickers2Input&#39;-->\n<!--\t\t  type=&#39;text&#39;-->\n<!--\t\t  class=&#39;form-control&#39;-->\n<!--\t\t  data-td-target=&#39;#linkedPickers2&#39;-->\n<!--\t\t/&gt;-->\n<!--\t\t&lt;span-->\n<!--\t\t  class=&#39;input-group-text&#39;-->\n<!--\t\t  data-td-target=&#39;#linkedPickers2&#39;-->\n<!--\t\t  data-td-toggle=&#39;datetimepicker&#39;-->\n<!--\t\t&gt;-->\n<!--\t\t   &lt;span class=&#39;fa-solid fa-calendar&#39;&gt;&lt;/span&gt;-->\n<!--\t\t &lt;/span&gt;-->\n<!--\t  &lt;/div&gt;-->\n<!--\t&lt;/div&gt;-->\n<!--&lt;/div&gt;-->\n<!--           </code>-->\n<!--         </pre>-->\n<!--        </div>-->\n<!--        <div class='tab-pane fade' id='linkedPickersJs' role='tabpanel' aria-labelledby='linkedPickersJs-tab'>-->\n<!--         <pre>-->\n<!--           <code class='language-javascript'>-->\n<!--const linkedPicker1Element = document.getElementById('linkedPickers1');-->\n<!--const linked1 = new tempusDominus.TempusDominus(linkedPicker1Element);-->\n<!--const linked2 = new tempusDominus.TempusDominus(document.getElementById('linkedPickers2'), {-->\n<!--  useCurrent: false-->\n<!--});-->\n\n<!--//using event listeners-->\n<!--linkedPicker1Element.addEventListener(tempusDominus.Namespace.events.change, (e) => {-->\n<!--  linked2.updateOptions({-->\n<!--    restrictions: {-->\n<!--      minDate: e.detail.date-->\n<!--    }-->\n<!--  });-->\n<!--});-->\n\n<!--//using subscribe method-->\n<!--const subscription = linked2.subscribe(tempusDominus.Namespace.events.change, (e) => {-->\n<!--  linked1.updateOptions({-->\n<!--    restrictions: {-->\n<!--      maxDate: e.date-->\n<!--    }-->\n<!--  });-->\n<!--});-->\n\n<!--// event listener can be unsubscribed to:-->\n<!--// subscription.unsubscribe();-->\n<!--           </code>-->\n<!--         </pre>-->\n<!--        </div>-->\n<!--        <div class='tab-pane fade logger' id='linkedPickersLog' role='tabpanel'-->\n<!--             aria-labelledby='linkedPickersLog-tab'>-->\n<!--          <div class='alert alert-info'>-->\n<!--            Events will display as you manipulate the picker.-->\n<!--          </div>-->\n<!--        </div>-->\n<!--      </div>-->\n<!--    </div>-->\n\n<!--    <div class='container'>-->\n<!--      <div class='row'>-->\n<!--        <div class='col-sm-6'>-->\n<!--          <label for='linkedPickers1Input' class='form-label'>From</label>-->\n<!--          <div-->\n<!--            class='input-group log-event'-->\n<!--            id='linkedPickers1'-->\n<!--            data-td-target-input='nearest'-->\n<!--            data-td-target-toggle='nearest'-->\n<!--          >-->\n<!--            <input-->\n<!--              id='linkedPickers1Input'-->\n<!--              type='text'-->\n<!--              class='form-control'-->\n<!--              data-td-target='#linkedPickers1'-->\n<!--            />-->\n<!--            <span-->\n<!--              class='input-group-text'-->\n<!--              data-td-target='#linkedPickers1'-->\n<!--              data-td-toggle='datetimepicker'-->\n<!--            >-->\n<!--               <span class='fa-solid fa-calendar'></span>-->\n<!--             </span>-->\n<!--          </div>-->\n<!--        </div>-->\n<!--        <div class='col-sm-6'>-->\n<!--          <label for='linkedPickers2Input' class='form-label'>To</label>-->\n<!--          <div-->\n<!--            class='input-group log-event'-->\n<!--            id='linkedPickers2'-->\n<!--            data-td-target-input='nearest'-->\n<!--            data-td-target-toggle='nearest'-->\n<!--          >-->\n<!--            <input-->\n<!--              id='linkedPickers2Input'-->\n<!--              type='text'-->\n<!--              class='form-control'-->\n<!--              data-td-target='#linkedPickers2'-->\n<!--            />-->\n<!--            <span-->\n<!--              class='input-group-text'-->\n<!--              data-td-target='#linkedPickers2'-->\n<!--              data-td-toggle='datetimepicker'-->\n<!--            >-->\n<!--               <span class='fa-solid fa-calendar'></span>-->\n<!--             </span>-->\n<!--          </div>-->\n<!--        </div>-->\n<!--      </div>-->\n<!--    </div>-->\n<!--    <script type='text/javascript'>-->\n<!--      const linkedPicker1Element = document.getElementById('linkedPickers1');-->\n<!--      const linked1 = new tempusDominus.TempusDominus(linkedPicker1Element);-->\n<!--      const linked2 = new tempusDominus.TempusDominus(document.getElementById('linkedPickers2'), {-->\n<!--        useCurrent: false-->\n<!--      });-->\n\n<!--      //using event listeners-->\n<!--      linkedPicker1Element.addEventListener(tempusDominus.Namespace.events.change, (e) => {-->\n<!--        linked2.updateOptions({-->\n<!--          restrictions: {-->\n<!--            minDate: e.detail.date-->\n<!--          }-->\n<!--        });-->\n<!--      });-->\n\n<!--      //using subscribe method-->\n<!--      const subscription = linked2.subscribe(tempusDominus.Namespace.events.change, (e) => {-->\n<!--        linked1.updateOptions({-->\n<!--          restrictions: {-->\n<!--            maxDate: e.date-->\n<!--          }-->\n<!--        });-->\n<!--      });-->\n\n<!--      // event listener can be unsubscribed to:-->\n<!--      // subscription.unsubscribe();-->\n<!--    </script>-->\n<!--  </div>-->\n\n<!--  <div class='row'>-->\n<!--    <h3 id='custom-icons'>Custom Icons <a class='anchor-link ' aria-label='Anchor' href='#custom-icons'><i-->\n<!--      class='fa-solid fa-anchor' aria-hidden='true'></i></a> <small class='show-code' title='View Code'><i-->\n<!--      class='fa-solid fa-code' aria-hidden='true'></i></small></h3>-->\n\n<!--    <p>-->\n<!--      You can change the icons from the Font Awesome default to another icon-->\n<!--      set like <a href='https://icons.getbootstrap.com/' target='_blank' rel='noopener'>Bootstrap's Icon</a>-->\n<!--    </p>-->\n\n<!--    <div class='code-blocks d-none'>-->\n<!--      <ul class='nav nav-tabs' role='tablist'>-->\n<!--        <li class='nav-item' role='presentation'>-->\n<!--          <button class='nav-link active' id='customIconsHtml-tab' data-bs-toggle='tab'-->\n<!--                  data-bs-target='#customIconsHtml' type='button'-->\n<!--                  role='tab' aria-controls='customIconsHtml' aria-selected='true'>HTML-->\n<!--          </button>-->\n<!--        </li>-->\n<!--        <li class='nav-item' role='presentation'>-->\n<!--          <button class='nav-link' id='customIconsJs-tab' data-bs-toggle='tab' data-bs-target='#customIconsJs'-->\n<!--                  type='button'-->\n<!--                  role='tab' aria-controls='customIconsJs' aria-selected='false'>Javascript-->\n<!--          </button>-->\n<!--        </li>-->\n<!--        <li class='nav-item' role='presentation'>-->\n<!--          <button class='nav-link' id='customIconsLog-tab' data-bs-toggle='tab'-->\n<!--                  data-bs-target='#customIconsLog'-->\n<!--                  type='button'-->\n<!--                  role='tab' aria-controls='customIconsLog' aria-selected='false'>Events-->\n<!--          </button>-->\n<!--        </li>-->\n<!--      </ul>-->\n<!--      <div class='tab-content'>-->\n<!--        <div class='tab-pane fade show active' id='customIconsHtml' role='tabpanel'-->\n<!--             aria-labelledby='customIconsHtml-tab'>-->\n<!--         <pre>-->\n<!--           <code class='language-html'>-->\n<!-- &lt;div-->\n<!--     class='input-group'-->\n<!--     id='customIcons'-->\n<!--     data-td-target-input='nearest'-->\n<!--     data-td-target-toggle='nearest'-->\n<!-- &gt;-->\n<!--   &lt;input-->\n<!--     id='customIconsInput'-->\n<!--     type='text'-->\n<!--     class='form-control'-->\n<!--     data-td-target='#customIcons'-->\n<!--   /&gt;-->\n<!--   &lt;span-->\n<!--     class='input-group-text'-->\n<!--     data-td-target='#customIcons'-->\n<!--     data-td-toggle='datetimepicker'-->\n<!--   &gt;-->\n<!--     &lt;span class='bi bi-calendar'&gt;&lt;/span&gt;-->\n<!--   &lt;/span&gt;-->\n<!-- &lt;/div&gt;-->\n<!--           </code>-->\n<!--         </pre>-->\n<!--        </div>-->\n<!--        <div class='tab-pane fade' id='customIconsJs' role='tabpanel' aria-labelledby='customIconsJs-tab'>-->\n<!--         <pre>-->\n<!--           <code class='language-javascript'>-->\n<!-- new tempusDominus.TempusDominus(document.getElementById('customIcons'), {-->\n<!--   display: {-->\n<!--     icons: {-->\n<!--       time: 'bi bi-clock',-->\n<!--       date: 'bi bi-calendar',-->\n<!--       up: 'bi bi-arrow-up',-->\n<!--       down: 'bi bi-arrow-down',-->\n<!--       previous: 'bi bi-chevron-left',-->\n<!--       next: 'bi bi-chevron-right',-->\n<!--       today: 'bi bi-calendar-check',-->\n<!--       clear: 'bi bi-trash',-->\n<!--       close: 'bi bi-x',-->\n<!--     },-->\n<!--     buttons: {-->\n<!--       today: true,-->\n<!--       clear: true,-->\n<!--       close: true,-->\n<!--     },-->\n<!--   }-->\n<!-- });-->\n<!--           </code>-->\n<!--         </pre>-->\n<!--        </div>-->\n<!--        <div class='tab-pane fade logger' id='customIconsLog' role='tabpanel'-->\n<!--             aria-labelledby='customIconsLog-tab'>-->\n<!--          <div class='alert alert-info'>-->\n<!--            Events will display as you manipulate the picker.-->\n<!--          </div>-->\n<!--        </div>-->\n<!--      </div>-->\n<!--    </div>-->\n\n<!--    <div class='container'>-->\n<!--      <div class='row'>-->\n<!--        <div class='col-sm-6'>-->\n<!--          <label for='customIconsInput' class='form-label'>Bootstrap Icons</label>-->\n<!--          <div-->\n<!--            class='input-group log-event'-->\n<!--            id='customIcons'-->\n<!--            data-td-target-input='nearest'-->\n<!--            data-td-target-toggle='nearest'-->\n<!--          >-->\n<!--            <input-->\n<!--              id='customIconsInput'-->\n<!--              type='text'-->\n<!--              class='form-control'-->\n<!--              data-td-target='#customIcons'-->\n<!--            />-->\n<!--            <span-->\n<!--              class='input-group-text'-->\n<!--              data-td-target='#customIcons'-->\n<!--              data-td-toggle='datetimepicker'-->\n<!--            >-->\n<!--               <span class='bi bi-calendar'></span>-->\n<!--             </span>-->\n<!--          </div>-->\n<!--        </div>-->\n<!--      </div>-->\n<!--    </div>-->\n<!--    <script type='text/javascript'>-->\n<!--      new tempusDominus.TempusDominus(document.getElementById('customIcons'), {-->\n<!--        display: {-->\n<!--          icons: {-->\n<!--            time: 'bi bi-clock',-->\n<!--            date: 'bi bi-calendar',-->\n<!--            up: 'bi bi-arrow-up',-->\n<!--            down: 'bi bi-arrow-down',-->\n<!--            previous: 'bi bi-chevron-left',-->\n<!--            next: 'bi bi-chevron-right',-->\n<!--            today: 'bi bi-calendar-check',-->\n<!--            clear: 'bi bi-trash',-->\n<!--            close: 'bi bi-x'-->\n<!--          },-->\n<!--          buttons: {-->\n<!--            today: true,-->\n<!--            clear: true,-->\n<!--            close: true-->\n<!--          }-->\n<!--        }-->\n<!--      });-->\n<!--    </script>-->\n<!--  </div>-->\n\n<!--  <div class='row'>-->\n<!--    <h3 id='view-mode'>View Mode <a class='anchor-link ' aria-label='Anchor' href='#view-mode'><i-->\n<!--      class='fa-solid fa-anchor' aria-hidden='true'></i></a> <small class='show-code' title='View Code'><i-->\n<!--      class='fa-solid fa-code' aria-hidden='true'></i></small></h3>-->\n\n<!--    <p>-->\n<!--      The view mode options allows you to show a different initial view. For example selecting a date of birth.-->\n<!--    </p>-->\n\n<!--    <div class='code-blocks d-none'>-->\n<!--      <ul class='nav nav-tabs' role='tablist'>-->\n<!--        <li class='nav-item' role='presentation'>-->\n<!--          <button class='nav-link active' id='viewModeHtml-tab' data-bs-toggle='tab'-->\n<!--                  data-bs-target='#viewModeHtml' type='button'-->\n<!--                  role='tab' aria-controls='viewModeHtml' aria-selected='true'>HTML-->\n<!--          </button>-->\n<!--        </li>-->\n<!--        <li class='nav-item' role='presentation'>-->\n<!--          <button class='nav-link' id='viewModeJs-tab' data-bs-toggle='tab' data-bs-target='#viewModeJs'-->\n<!--                  type='button'-->\n<!--                  role='tab' aria-controls='viewModeJs' aria-selected='false'>Javascript-->\n<!--          </button>-->\n<!--        </li>-->\n<!--        <li class='nav-item' role='presentation'>-->\n<!--          <button class='nav-link' id='viewModeLog-tab' data-bs-toggle='tab' data-bs-target='#viewModeLog'-->\n<!--                  type='button'-->\n<!--                  role='tab' aria-controls='viewModeLog' aria-selected='false'>Events-->\n<!--          </button>-->\n<!--        </li>-->\n<!--      </ul>-->\n<!--      <div class='tab-content'>-->\n<!--        <div class='tab-pane fade show active' id='viewModeHtml' role='tabpanel'-->\n<!--             aria-labelledby='viewModeHtml-tab'>-->\n<!--         <pre>-->\n<!--           <code class='language-html'>-->\n<!-- &lt;div-->\n<!--     class='input-group'-->\n<!--     id='viewMode'-->\n<!--     data-td-target-input='nearest'-->\n<!--     data-td-target-toggle='nearest'-->\n<!-- &gt;-->\n<!--   &lt;input-->\n<!--     id='viewModeInput'-->\n<!--     type='text'-->\n<!--     class='form-control'-->\n<!--     data-td-target='#viewMode'-->\n<!--   /&gt;-->\n<!--   &lt;span-->\n<!--     class='input-group-text'-->\n<!--     data-td-target='#viewMode'-->\n<!--     data-td-toggle='datetimepicker'-->\n<!--   &gt;-->\n<!--     &lt;span class='fa-solid fa-calendar'&gt;&lt;/span&gt;-->\n<!--   &lt;/span&gt;-->\n<!-- &lt;/div&gt;-->\n<!--           </code>-->\n<!--         </pre>-->\n<!--        </div>-->\n<!--        <div class='tab-pane fade' id='viewModeJs' role='tabpanel' aria-labelledby='viewModeJs-tab'>-->\n<!--         <pre>-->\n<!--           <code class='language-javascript'>-->\n<!-- new tempusDominus.TempusDominus(document.getElementById('viewMode'), {-->\n<!--   display: {-->\n<!--     viewMode: 'years'-->\n<!--   }-->\n<!-- });-->\n<!--           </code>-->\n<!--         </pre>-->\n<!--        </div>-->\n<!--        <div class='tab-pane fade logger' id='viewModeLog' role='tabpanel'-->\n<!--             aria-labelledby='viewModeLog-tab'>-->\n<!--          <div class='alert alert-info'>-->\n<!--            Events will display as you manipulate the picker.-->\n<!--          </div>-->\n<!--        </div>-->\n<!--      </div>-->\n<!--    </div>-->\n\n<!--    <div class='container'>-->\n<!--      <div class='row'>-->\n<!--        <div class='col-sm-6'>-->\n<!--          <label for='viewModeInput' class='form-label'>Birth Date</label>-->\n<!--          <div-->\n<!--            class='input-group log-event'-->\n<!--            id='viewMode'-->\n<!--            data-td-target-input='nearest'-->\n<!--            data-td-target-toggle='nearest'-->\n<!--          >-->\n<!--            <input-->\n<!--              id='viewModeInput'-->\n<!--              type='text'-->\n<!--              class='form-control'-->\n<!--              data-td-target='#viewMode'-->\n<!--            />-->\n<!--            <span-->\n<!--              class='input-group-text'-->\n<!--              data-td-target='#viewMode'-->\n<!--              data-td-toggle='datetimepicker'-->\n<!--            >-->\n<!--               <span class='fa-solid fa-calendar'></span>-->\n<!--             </span>-->\n<!--          </div>-->\n<!--        </div>-->\n<!--      </div>-->\n<!--    </div>-->\n<!--    <script type='text/javascript'>-->\n<!--      new tempusDominus.TempusDominus(document.getElementById('viewMode'), {-->\n<!--        display: {-->\n<!--          viewMode: 'years'-->\n<!--        }-->\n<!--      });-->\n<!--    </script>-->\n<!--  </div>-->\n\n<!--  <div class='row'>-->\n<!--    <h3 id='min-view-mode'>Minimum View <a class='anchor-link ' aria-label='Anchor' href='#min-view-mode'><i-->\n<!--      class='fa-solid fa-anchor' aria-hidden='true'></i></a> <small class='show-code' title='View Code'><i-->\n<!--      class='fa-solid fa-code' aria-hidden='true'></i></small></h3>-->\n\n<!--    <p>-->\n<!--      You can set the minimum view mode by turning off lower level components. If you only want your user to-->\n<!--      select-->\n<!--      month and year, <code>display.components.date: false</code>. The <code>display.components</code> object also-->\n<!--      provides convenience shortcuts. For instance if you don't want any of the time picker components to be-->\n<!--      available-->\n<!--      simple set <code>display.components.clock: false</code>. Do be aware that-->\n<!--      <code>display.components.clock</code>-->\n<!--      must be true (default) in order to display the time components regardless of <code>display.components.hours|minutes|seconds</code>-->\n<!--      is true. The same applies for <code>display.components.calendar</code>-->\n<!--    </p>-->\n\n<!--    <div class='code-blocks d-none'>-->\n<!--      <ul class='nav nav-tabs' role='tablist'>-->\n<!--        <li class='nav-item' role='presentation'>-->\n<!--          <button class='nav-link active' id='minViewModeHtml-tab' data-bs-toggle='tab'-->\n<!--                  data-bs-target='#minViewModeHtml' type='button'-->\n<!--                  role='tab' aria-controls='minViewModeHtml' aria-selected='true'>HTML-->\n<!--          </button>-->\n<!--        </li>-->\n<!--        <li class='nav-item' role='presentation'>-->\n<!--          <button class='nav-link' id='minViewModeJs-tab' data-bs-toggle='tab' data-bs-target='#minViewModeJs'-->\n<!--                  type='button'-->\n<!--                  role='tab' aria-controls='minViewModeJs' aria-selected='false'>Javascript-->\n<!--          </button>-->\n<!--        </li>-->\n<!--        <li class='nav-item' role='presentation'>-->\n<!--          <button class='nav-link' id='minViewModeLog-tab' data-bs-toggle='tab'-->\n<!--                  data-bs-target='#minViewModeLog'-->\n<!--                  type='button'-->\n<!--                  role='tab' aria-controls='minViewModeLog' aria-selected='false'>Events-->\n<!--          </button>-->\n<!--        </li>-->\n<!--      </ul>-->\n<!--      <div class='tab-content'>-->\n<!--        <div class='tab-pane fade show active' id='minViewModeHtml' role='tabpanel'-->\n<!--             aria-labelledby='minViewModeHtml-tab'>-->\n<!--         <pre>-->\n<!--           <code class='language-html'>-->\n<!-- &lt;div-->\n<!--     class='input-group'-->\n<!--     id='minViewMode'-->\n<!--     data-td-target-input='nearest'-->\n<!--     data-td-target-toggle='nearest'-->\n<!-- &gt;-->\n<!--   &lt;input-->\n<!--     id='minViewModeInput'-->\n<!--     type='text'-->\n<!--     class='form-control'-->\n<!--     data-td-target='#minViewMode'-->\n<!--   /&gt;-->\n<!--   &lt;span-->\n<!--     class='input-group-text'-->\n<!--     data-td-target='#minViewMode'-->\n<!--     data-td-toggle='datetimepicker'-->\n<!--   &gt;-->\n<!--     &lt;span class='fa-solid fa-calendar'&gt;&lt;/span&gt;-->\n<!--   &lt;/span&gt;-->\n<!-- &lt;/div&gt;-->\n<!--           </code>-->\n<!--         </pre>-->\n<!--        </div>-->\n<!--        <div class='tab-pane fade' id='minViewModeJs' role='tabpanel' aria-labelledby='minViewModeJs-tab'>-->\n<!--         <pre>-->\n<!--           <code class='language-javascript'>-->\n<!-- new tempusDominus.TempusDominus(document.getElementById('minViewMode'), {-->\n<!--   display: {-->\n<!--     components: {-->\n<!--       clock:false,-->\n<!--       date: false,-->\n<!--     }-->\n<!--   }-->\n<!-- });-->\n<!--           </code>-->\n<!--         </pre>-->\n<!--        </div>-->\n<!--        <div class='tab-pane fade logger' id='minViewModeLog' role='tabpanel'-->\n<!--             aria-labelledby='minViewModeLog-tab'>-->\n<!--          <div class='alert alert-info'>-->\n<!--            Events will display as you manipulate the picker.-->\n<!--          </div>-->\n<!--        </div>-->\n<!--      </div>-->\n<!--    </div>-->\n\n<!--    <div class='container'>-->\n<!--      <div class='row'>-->\n<!--        <div class='col-sm-6'>-->\n<!--          <label for='minViewModeInput' class='form-label'>Month/Year</label>-->\n<!--          <div-->\n<!--            class='input-group log-event'-->\n<!--            id='minViewMode'-->\n<!--            data-td-target-input='nearest'-->\n<!--            data-td-target-toggle='nearest'-->\n<!--          >-->\n<!--            <input-->\n<!--              id='minViewModeInput'-->\n<!--              type='text'-->\n<!--              class='form-control'-->\n<!--              data-td-target='#minViewMode'-->\n<!--            />-->\n<!--            <span-->\n<!--              class='input-group-text'-->\n<!--              data-td-target='#minViewMode'-->\n<!--              data-td-toggle='datetimepicker'-->\n<!--            >-->\n<!--               <span class='fa-solid fa-calendar'></span>-->\n<!--             </span>-->\n<!--          </div>-->\n<!--        </div>-->\n<!--      </div>-->\n<!--    </div>-->\n<!--    <script type='text/javascript'>-->\n<!--      new tempusDominus.TempusDominus(document.getElementById('minViewMode'), {-->\n<!--        display: {-->\n<!--          components: {-->\n<!--            clock: false,-->\n<!--            date: false-->\n<!--          }-->\n<!--        }-->\n<!--      });-->\n<!--    </script>-->\n<!--  </div>-->\n\n<!--  <div class='row'>-->\n<!--    <h3 id='disabled-days-of-the-week'>Disabled Days of the Week <a class='anchor-link ' aria-label='Anchor'-->\n<!--                                                                    href='#disabled-days-of-the-week'><i-->\n<!--      class='fa-solid fa-anchor' aria-hidden='true'></i></a> <small class='show-code' title='View Code'><i-->\n<!--      class='fa-solid fa-code' aria-hidden='true'></i></small></h3>-->\n\n<!--    <p>-->\n<!--      This is the simplest setup you can have with Bootstrap and Font Awesome 5. The picker defaults to FA 5 Solid-->\n<!--      icons, however you can overwrite the defaults globally.-->\n<!--    </p>-->\n\n<!--    <div class='code-blocks d-none'>-->\n<!--      <ul class='nav nav-tabs' role='tablist'>-->\n<!--        <li class='nav-item' role='presentation'>-->\n<!--          <button class='nav-link active' id='disabledDowHtml-tab' data-bs-toggle='tab'-->\n<!--                  data-bs-target='#disabledDowHtml' type='button'-->\n<!--                  role='tab' aria-controls='disabledDowHtml' aria-selected='true'>HTML-->\n<!--          </button>-->\n<!--        </li>-->\n<!--        <li class='nav-item' role='presentation'>-->\n<!--          <button class='nav-link' id='disabledDowJs-tab' data-bs-toggle='tab' data-bs-target='#disabledDowJs'-->\n<!--                  type='button'-->\n<!--                  role='tab' aria-controls='disabledDowJs' aria-selected='false'>Javascript-->\n<!--          </button>-->\n<!--        </li>-->\n<!--        <li class='nav-item' role='presentation'>-->\n<!--          <button class='nav-link' id='disabledDowLog-tab' data-bs-toggle='tab'-->\n<!--                  data-bs-target='#disabledDowLog'-->\n<!--                  type='button'-->\n<!--                  role='tab' aria-controls='disabledDowLog' aria-selected='false'>Events-->\n<!--          </button>-->\n<!--        </li>-->\n<!--      </ul>-->\n<!--      <div class='tab-content'>-->\n<!--        <div class='tab-pane fade show active' id='disabledDowHtml' role='tabpanel'-->\n<!--             aria-labelledby='disabledDowHtml-tab'>-->\n<!--         <pre>-->\n<!--           <code class='language-html'>-->\n<!-- &lt;div-->\n<!--     class='input-group'-->\n<!--     id='disabledDow'-->\n<!--     data-td-target-input='nearest'-->\n<!--     data-td-target-toggle='nearest'-->\n<!-- &gt;-->\n<!--   &lt;input-->\n<!--     id='disabledDowInput'-->\n<!--     type='text'-->\n<!--     class='form-control'-->\n<!--     data-td-target='#disabledDow'-->\n<!--   /&gt;-->\n<!--   &lt;span-->\n<!--     class='input-group-text'-->\n<!--     data-td-target='#disabledDow'-->\n<!--     data-td-toggle='datetimepicker'-->\n<!--   &gt;-->\n<!--     &lt;span class='fa-solid fa-calendar'&gt;&lt;/span&gt;-->\n<!--   &lt;/span&gt;-->\n<!-- &lt;/div&gt;-->\n<!--           </code>-->\n<!--         </pre>-->\n<!--        </div>-->\n<!--        <div class='tab-pane fade' id='disabledDowJs' role='tabpanel' aria-labelledby='disabledDowJs-tab'>-->\n<!--         <pre>-->\n<!--           <code class='language-javascript'>-->\n<!-- new tempusDominus.TempusDominus(document.getElementById('disabledDow'), {-->\n<!--   restrictions: {-->\n<!--     daysOfWeekDisabled: [0, 6]-->\n<!--   }-->\n<!-- });-->\n<!--           </code>-->\n<!--         </pre>-->\n<!--        </div>-->\n<!--        <div class='tab-pane fade logger' id='disabledDowLog' role='tabpanel'-->\n<!--             aria-labelledby='disabledDowLog-tab'>-->\n<!--          <div class='alert alert-info'>-->\n<!--            Events will display as you manipulate the picker.-->\n<!--          </div>-->\n<!--        </div>-->\n<!--      </div>-->\n<!--    </div>-->\n\n<!--    <div class='container'>-->\n<!--      <div class='row'>-->\n<!--        <div class='col-sm-6'>-->\n<!--          <label for='disabledDowInput' class='form-label'>Closed Weekends</label>-->\n<!--          <div-->\n<!--            class='input-group log-event'-->\n<!--            id='disabledDow'-->\n<!--            data-td-target-input='nearest'-->\n<!--            data-td-target-toggle='nearest'-->\n<!--          >-->\n<!--            <input-->\n<!--              id='disabledDowInput'-->\n<!--              type='text'-->\n<!--              class='form-control'-->\n<!--              data-td-target='#disabledDow'-->\n<!--            />-->\n<!--            <span-->\n<!--              class='input-group-text'-->\n<!--              data-td-target='#disabledDow'-->\n<!--              data-td-toggle='datetimepicker'-->\n<!--            >-->\n<!--               <span class='fa-solid fa-calendar'></span>-->\n<!--             </span>-->\n<!--          </div>-->\n<!--        </div>-->\n<!--      </div>-->\n<!--    </div>-->\n<!--    <script type='text/javascript'>-->\n<!--      new tempusDominus.TempusDominus(document.getElementById('disabledDow'), {-->\n<!--        restrictions: {-->\n<!--          daysOfWeekDisabled: [0, 6]-->\n<!--        }-->\n<!--      });-->\n<!--    </script>-->\n<!--  </div>-->\n\n<!--  <div class='row'>-->\n<!--    <h3 id='inline'>Inline <a class='anchor-link ' aria-label='Anchor' href='#inline'><i-->\n<!--      class='fa-solid fa-anchor' aria-hidden='true'></i></a> <small class='show-code' title='View Code'><i-->\n<!--      class='fa-solid fa-code' aria-hidden='true'></i></small></h3>-->\n\n<!--    <p>-->\n<!--      You can also use the picker inline-->\n<!--    </p>-->\n\n<!--    <div class='code-blocks d-none'>-->\n<!--      <ul class='nav nav-tabs' role='tablist'>-->\n<!--        <li class='nav-item' role='presentation'>-->\n<!--          <button class='nav-link active' id='inlineHtml-tab' data-bs-toggle='tab'-->\n<!--                  data-bs-target='#inlineHtml' type='button'-->\n<!--                  role='tab' aria-controls='inlineHtml' aria-selected='true'>HTML-->\n<!--          </button>-->\n<!--        </li>-->\n<!--        <li class='nav-item' role='presentation'>-->\n<!--          <button class='nav-link' id='inlineJs-tab' data-bs-toggle='tab' data-bs-target='#inlineJs'-->\n<!--                  type='button'-->\n<!--                  role='tab' aria-controls='inlineJs' aria-selected='false'>Javascript-->\n<!--          </button>-->\n<!--        </li>-->\n<!--        <li class='nav-item' role='presentation'>-->\n<!--          <button class='nav-link' id='inlineLog-tab' data-bs-toggle='tab' data-bs-target='#inlineLog'-->\n<!--                  type='button'-->\n<!--                  role='tab' aria-controls='inlineLog' aria-selected='false'>Events-->\n<!--          </button>-->\n<!--        </li>-->\n<!--      </ul>-->\n<!--      <div class='tab-content'>-->\n<!--        <div class='tab-pane fade show active' id='inlineHtml' role='tabpanel'-->\n<!--             aria-labelledby='inlineHtml-tab'>-->\n<!--         <pre>-->\n<!--           <code class='language-html'>-->\n<!-- &lt;div-->\n<!--   class='log-event'-->\n<!--   id='inlinePicker'-->\n<!-- &gt;-->\n<!-- &lt;/div&gt;-->\n<!--           </code>-->\n<!--         </pre>-->\n<!--        </div>-->\n<!--        <div class='tab-pane fade' id='inlineJs' role='tabpanel' aria-labelledby='inlineJs-tab'>-->\n<!--         <pre>-->\n<!--           <code class='language-javascript'>-->\n<!-- new tempusDominus.TempusDominus(document.getElementById('inlinePicker'), {-->\n<!--   display: {-->\n<!--     inline: true-->\n<!--   }-->\n<!-- });-->\n<!--           </code>-->\n<!--         </pre>-->\n<!--        </div>-->\n<!--        <div class='tab-pane fade logger' id='inlineLog' role='tabpanel'-->\n<!--             aria-labelledby='inlineLog-tab'>-->\n<!--          <div class='alert alert-info'>-->\n<!--            Events will display as you manipulate the picker.-->\n<!--          </div>-->\n<!--        </div>-->\n<!--      </div>-->\n<!--    </div>-->\n\n<!--    <div class='container'>-->\n<!--      <div class='row'>-->\n<!--        <div class='col-sm-6'>-->\n<!--          <label for='inlinePicker' class='form-label'>Inline</label>-->\n<!--          <div-->\n<!--            class='log-event'-->\n<!--            id='inlinePicker'-->\n<!--          >-->\n<!--          </div>-->\n<!--        </div>-->\n<!--      </div>-->\n<!--    </div>-->\n<!--    <script type='text/javascript'>-->\n<!--      new tempusDominus.TempusDominus(document.getElementById('inlinePicker'), {-->\n<!--        display: {-->\n<!--          inline: true-->\n<!--        }-->\n<!--      });-->\n<!--    </script>-->\n<!--  </div>-->\n\n<!--  <div class='row'>-->\n<!--    <h3 id='theme'>Theme <a class='anchor-link ' aria-label='Anchor' href='#theme'><i-->\n<!--      class='fa-solid fa-anchor' aria-hidden='true'></i></a> <small class='show-code' title='View Code'><i-->\n<!--      class='fa-solid fa-code' aria-hidden='true'></i></small></h3>-->\n\n<!--    <p>-->\n<!--      You can also specify the theme for the picker.-->\n<!--    </p>-->\n\n<!--    <div class='code-blocks d-none'>-->\n<!--      <ul class='nav nav-tabs' role='tablist'>-->\n<!--        <li class='nav-item' role='presentation'>-->\n<!--          <button class='nav-link active' id='themeHtml-tab' data-bs-toggle='tab'-->\n<!--                  data-bs-target='#themeHtml' type='button'-->\n<!--                  role='tab' aria-controls='themeHtml' aria-selected='true'>HTML-->\n<!--          </button>-->\n<!--        </li>-->\n<!--        <li class='nav-item' role='presentation'>-->\n<!--          <button class='nav-link' id='themeJs-tab' data-bs-toggle='tab' data-bs-target='#themeJs'-->\n<!--                  type='button'-->\n<!--                  role='tab' aria-controls='themeJs' aria-selected='false'>Javascript-->\n<!--          </button>-->\n<!--        </li>-->\n<!--        <li class='nav-item' role='presentation'>-->\n<!--          <button class='nav-link' id='themeLog-tab' data-bs-toggle='tab' data-bs-target='#themeLog'-->\n<!--                  type='button'-->\n<!--                  role='tab' aria-controls='themeLog' aria-selected='false'>Events-->\n<!--          </button>-->\n<!--        </li>-->\n<!--      </ul>-->\n<!--      <div class='tab-content'>-->\n<!--        <div class='tab-pane fade show active' id='themeHtml' role='tabpanel'-->\n<!--             aria-labelledby='themeHtml-tab'>-->\n<!--         <pre>-->\n<!--           <code class='language-html'>-->\n<!-- &lt;div-->\n<!--    class='input-group'-->\n<!--    id='themePicker'-->\n<!--    data-td-target-input='nearest'-->\n<!--    data-td-target-toggle='nearest'-->\n<!--&gt;-->\n<!--&lt;input-->\n<!--    id='themePickerInput'-->\n<!--    type='text'-->\n<!--    class='form-control'-->\n<!--    data-td-target='#themePicker'-->\n<!--/&gt;-->\n<!--&lt;span-->\n<!--    class='input-group-text'-->\n<!--    data-td-target='#themePicker'-->\n<!--    data-td-toggle='datetimepicker'-->\n<!--&gt;-->\n<!--    &lt;span class='fa-solid fa-calendar'&gt;&lt;/span&gt;-->\n<!--&lt;/span&gt;-->\n<!--&lt;/div&gt;-->\n<!--           </code>-->\n<!--         </pre>-->\n<!--        </div>-->\n<!--        <div class='tab-pane fade' id='themeJs' role='tabpanel' aria-labelledby='themeJs-tab'>-->\n<!--         <pre>-->\n<!--           <code class='language-javascript'>-->\n<!-- new tempusDominus.TempusDominus(document.getElementById('themePicker'), {-->\n<!--   display: {-->\n<!--     theme: 'dark'-->\n<!--   }-->\n<!-- });-->\n<!--           </code>-->\n<!--         </pre>-->\n<!--        </div>-->\n<!--        <div class='tab-pane fade logger' id='themeLog' role='tabpanel'-->\n<!--             aria-labelledby='themeLog-tab'>-->\n<!--          <div class='alert alert-info'>-->\n<!--            Events will display as you manipulate the picker.-->\n<!--          </div>-->\n<!--        </div>-->\n<!--      </div>-->\n<!--    </div>-->\n\n<!--    <div class='container'>-->\n<!--      <div class='row'>-->\n<!--        <div class='col-sm-6'>-->\n<!--          <label for='themePicker' class='form-label'>Theme</label>-->\n<!--          <div-->\n<!--            class='input-group'-->\n<!--            id='themePicker'-->\n<!--            data-td-target-input='nearest'-->\n<!--            data-td-target-toggle='nearest'-->\n<!--          >-->\n<!--            <input-->\n<!--              id='themePickerInput'-->\n<!--              type='text'-->\n<!--              class='form-control'-->\n<!--              data-td-target='#themePicker'-->\n<!--            />-->\n<!--            <span-->\n<!--              class='input-group-text'-->\n<!--              data-td-target='#themePicker'-->\n<!--              data-td-toggle='datetimepicker'-->\n<!--            >-->\n<!--                        <span class='fa-solid fa-calendar'></span>-->\n<!--                    </span>-->\n<!--          </div>-->\n<!--        </div>-->\n<!--      </div>-->\n<!--      <div class='row mt-3'>-->\n<!--        <div class='col-sm-6'>-->\n<!--          <button id='setThemeLight' class='btn btn-primary'>Set to Light</button>-->\n<!--          <button id='setThemeDark' class='btn btn-primary'>Set to Dark</button>-->\n<!--          <button id='setThemeAuto' class='btn btn-primary'>Set to Auto</button>-->\n<!--        </div>-->\n<!--      </div>-->\n<!--    </div>-->\n<!--    <script type='text/javascript'>-->\n<!--      const themePicker = new tempusDominus.TempusDominus(document.getElementById('themePicker'), {-->\n<!--        display: {-->\n<!--          theme: 'dark'-->\n<!--        }-->\n<!--      });-->\n\n<!--      const updateTheme = theme => themePicker.updateOptions({ display: { theme } });-->\n\n<!--      const setThemeLightButton = document.getElementById('setThemeLight');-->\n<!--      const setThemeDarkButton = document.getElementById('setThemeDark');-->\n<!--      const setThemeAutoButton = document.getElementById('setThemeAuto');-->\n\n<!--      setThemeLightButton.addEventListener('click', () => updateTheme('light'));-->\n<!--      setThemeDarkButton.addEventListener('click', () => updateTheme('dark'));-->\n<!--      setThemeAutoButton.addEventListener('click', () => updateTheme('auto'));-->\n<!--    </script>-->\n<!--  </div>-->\n\n<!--  <div class='row'>-->\n<!--    <h3 id='multidate'>Multiple Dates <a class='anchor-link ' aria-label='Anchor' href='#multidate'><i-->\n<!--      class='fa-solid fa-anchor' aria-hidden='true'></i></a> <small class='show-code' title='View Code'><i-->\n<!--      class='fa-solid fa-code' aria-hidden='true'></i></small></h3>-->\n\n<!--    <p>-->\n<!--      The picker allows for multiple dates to be selected.-->\n<!--    </p>-->\n\n<!--    <div class='code-blocks d-none'>-->\n<!--      <ul class='nav nav-tabs' role='tablist'>-->\n<!--        <li class='nav-item' role='presentation'>-->\n<!--          <button class='nav-link active' id='multipleDateHtml-tab' data-bs-toggle='tab'-->\n<!--                  data-bs-target='#multipleDateHtml' type='button'-->\n<!--                  role='tab' aria-controls='multipleDateHtml' aria-selected='true'>HTML-->\n<!--          </button>-->\n<!--        </li>-->\n<!--        <li class='nav-item' role='presentation'>-->\n<!--          <button class='nav-link' id='multipleDateJs-tab' data-bs-toggle='tab'-->\n<!--                  data-bs-target='#multipleDateJs'-->\n<!--                  type='button'-->\n<!--                  role='tab' aria-controls='multipleDateJs' aria-selected='false'>Javascript-->\n<!--          </button>-->\n<!--        </li>-->\n<!--        <li class='nav-item' role='presentation'>-->\n<!--          <button class='nav-link' id='multipleDateLog-tab' data-bs-toggle='tab'-->\n<!--                  data-bs-target='#multipleDateLog'-->\n<!--                  type='button'-->\n<!--                  role='tab' aria-controls='multipleDateLog' aria-selected='false'>Events-->\n<!--          </button>-->\n<!--        </li>-->\n<!--      </ul>-->\n<!--      <div class='tab-content'>-->\n<!--        <div class='tab-pane fade show active' id='multipleDateHtml' role='tabpanel'-->\n<!--             aria-labelledby='multipleDateHtml-tab'>-->\n<!--         <pre>-->\n<!--           <code class='language-html'>-->\n<!-- &lt;div-->\n<!--     class='input-group'-->\n<!--     id='multipleDate'-->\n<!--     data-td-target-input='nearest'-->\n<!--     data-td-target-toggle='nearest'-->\n<!-- &gt;-->\n<!--   &lt;input-->\n<!--     id='multipleDateInput'-->\n<!--     type='text'-->\n<!--     class='form-control'-->\n<!--     data-td-target='#multipleDate'-->\n<!--   /&gt;-->\n<!--   &lt;span-->\n<!--     class='input-group-text'-->\n<!--     data-td-target='#multipleDate'-->\n<!--     data-td-toggle='datetimepicker'-->\n<!--   &gt;-->\n<!--     &lt;span class='fa-solid fa-calendar'&gt;&lt;/span&gt;-->\n<!--   &lt;/span&gt;-->\n<!-- &lt;/div&gt;-->\n<!--           </code>-->\n<!--         </pre>-->\n<!--        </div>-->\n<!--        <div class='tab-pane fade' id='multipleDateJs' role='tabpanel' aria-labelledby='multipleDateJs-tab'>-->\n<!--         <pre>-->\n<!--           <code class='language-javascript'>-->\n<!-- new tempusDominus.TempusDominus(document.getElementById('multipleDatePicker'), {-->\n<!--   multipleDates: true-->\n<!-- });-->\n<!--           </code>-->\n<!--         </pre>-->\n<!--        </div>-->\n<!--        <div class='tab-pane fade logger' id='multipleDateLog' role='tabpanel'-->\n<!--             aria-labelledby='multipleDateLog-tab'>-->\n<!--          <div class='alert alert-info'>-->\n<!--            Events will display as you manipulate the picker.-->\n<!--          </div>-->\n<!--        </div>-->\n<!--      </div>-->\n<!--    </div>-->\n\n<!--    <div class='container'>-->\n<!--      <div class='row'>-->\n<!--        <div class='col-sm-6'>-->\n<!--          <label for='multipleDateInput' class='form-label'>Multiple dates</label>-->\n<!--          <div-->\n<!--            class='input-group log-event'-->\n<!--            id='multipleDatePicker'-->\n<!--            data-td-target-input='nearest'-->\n<!--            data-td-target-toggle='nearest'-->\n<!--          >-->\n<!--            <input-->\n<!--              id='multipleDateInput'-->\n<!--              type='text'-->\n<!--              class='form-control'-->\n<!--              data-td-target='#multipleDatePicker'-->\n<!--            />-->\n<!--            <span-->\n<!--              class='input-group-text'-->\n<!--              data-td-target='#multipleDatePicker'-->\n<!--              data-td-toggle='datetimepicker'-->\n<!--            >-->\n<!--               <span class='fa-solid fa-calendar'></span>-->\n<!--             </span>-->\n<!--          </div>-->\n<!--        </div>-->\n<!--      </div>-->\n<!--    </div>-->\n<!--    <script type='text/javascript'>-->\n<!--      new tempusDominus.TempusDominus(document.getElementById('multipleDatePicker'), {-->\n<!--        display: {-->\n<!--          components: {-->\n<!--            clock: false-->\n<!--          }-->\n<!--        },-->\n<!--        multipleDates: true-->\n<!--      });-->\n<!--    </script>-->\n<!--  </div>-->\n\n<!--  <div class='row'>-->\n<!--    <h3 id='setting-options'>Update options <a class='anchor-link ' aria-label='Anchor' href='#setting-options'><i-->\n<!--      class='fa-solid fa-anchor' aria-hidden='true'></i></a> <small class='show-code' title='View Code'><i-->\n<!--      class='fa-solid fa-code' aria-hidden='true'></i></small></h3>-->\n\n<!--    <p>-->\n<!--      You can provide a new set of options by calling <code>updateOptions([newOptions])</code>. This function also-->\n<!--      allows you to reset the options back to the default or merge the new options with the default instead of the-->\n<!--      existing options by passing <code>true</code> as the section parameter.-->\n<!--    </p>-->\n\n<!--    <div class='code-blocks d-none'>-->\n<!--      <ul class='nav nav-tabs' role='tablist'>-->\n<!--        <li class='nav-item' role='presentation'>-->\n<!--          <button class='nav-link active' id='settingOptionsHtml-tab' data-bs-toggle='tab'-->\n<!--                  data-bs-target='#settingOptionsHtml' type='button'-->\n<!--                  role='tab' aria-controls='settingOptionsHtml' aria-selected='true'>HTML-->\n<!--          </button>-->\n<!--        </li>-->\n<!--        <li class='nav-item' role='presentation'>-->\n<!--          <button class='nav-link' id='settingOptionsJs-tab' data-bs-toggle='tab'-->\n<!--                  data-bs-target='#settingOptionsJs'-->\n<!--                  type='button'-->\n<!--                  role='tab' aria-controls='settingOptionsJs' aria-selected='false'>Javascript-->\n<!--          </button>-->\n<!--        </li>-->\n<!--        <li class='nav-item' role='presentation'>-->\n<!--          <button class='nav-link' id='settingOptionsLog-tab' data-bs-toggle='tab'-->\n<!--                  data-bs-target='#settingOptionsLog'-->\n<!--                  type='button'-->\n<!--                  role='tab' aria-controls='settingOptionsLog' aria-selected='false'>Events-->\n<!--          </button>-->\n<!--        </li>-->\n<!--      </ul>-->\n<!--      <div class='tab-content'>-->\n<!--        <div class='tab-pane fade show active' id='settingOptionsHtml' role='tabpanel'-->\n<!--             aria-labelledby='settingOptionsHtml-tab'>-->\n<!--        <pre>-->\n<!--          <code class='language-html'>-->\n<!--&lt;div-->\n<!--    class='input-group'-->\n<!--    id='settingOptions'-->\n<!--    data-td-target-input='nearest'-->\n<!--    data-td-target-toggle='nearest'-->\n<!--&gt;-->\n<!--  &lt;input-->\n<!--    id='settingOptionsInput'-->\n<!--    type='text'-->\n<!--    class='form-control'-->\n<!--    data-td-target='#settingOptions'-->\n<!--  /&gt;-->\n<!--  &lt;span-->\n<!--    class='input-group-text'-->\n<!--    data-td-target='#settingOptions'-->\n<!--    data-td-toggle='datetimepicker'-->\n<!--  &gt;-->\n<!--    &lt;span class='fa-solid fa-calendar'&gt;&lt;/span&gt;-->\n<!--  &lt;/span&gt;-->\n<!--&lt;/div&gt;-->\n<!--          </code>-->\n<!--        </pre>-->\n<!--        </div>-->\n<!--        <div class='tab-pane fade' id='settingOptionsJs' role='tabpanel' aria-labelledby='settingOptionsJs-tab'>-->\n<!--        <pre>-->\n<!--          <code class='language-javascript'>-->\n<!--const changeOptionsButton = document.getElementById('changeOptions');-->\n<!--const settingOptionsPicker = new tempusDominus.TempusDominus(document.getElementById('settingOptions'));-->\n\n<!--let on = false-->\n<!--changeOptionsButton.addEventListener('click', () => {-->\n<!--  settingOptionsPicker.updateOptions({-->\n<!--    restrictions: {-->\n<!--      daysOfWeekDisabled: on ? [] : [0, 6]-->\n<!--    }-->\n<!--  });-->\n<!--  on = !on;-->\n<!--  changeOptionsButton.classList.toggle('btn-primary');-->\n<!--  changeOptionsButton.classList.toggle('btn-secondary');-->\n<!--});-->\n<!--          </code>-->\n<!--        </pre>-->\n<!--        </div>-->\n<!--        <div class='tab-pane fade logger' id='settingOptionsLog' role='tabpanel'-->\n<!--             aria-labelledby='settingOptionsLog-tab'>-->\n<!--          <div class='alert alert-info'>-->\n<!--            Events will display as you manipulate the picker.-->\n<!--          </div>-->\n<!--        </div>-->\n<!--      </div>-->\n<!--    </div>-->\n\n<!--    <div class='container'>-->\n<!--      <div class='row'>-->\n<!--        <div class='col-sm-6'>-->\n<!--          <label for='settingOptionsInput' class='form-label'>Update options</label>-->\n<!--          <div-->\n<!--            class='input-group log-event'-->\n<!--            id='settingOptions'-->\n<!--            data-td-target-input='nearest'-->\n<!--            data-td-target-toggle='nearest'-->\n<!--          >-->\n<!--            <input-->\n<!--              id='settingOptionsInput'-->\n<!--              type='text'-->\n<!--              class='form-control'-->\n<!--              data-td-target='#settingOptions'-->\n<!--            />-->\n<!--            <span-->\n<!--              class='input-group-text'-->\n<!--              data-td-target='#settingOptions'-->\n<!--              data-td-toggle='datetimepicker'-->\n<!--            >-->\n<!--              <span class='fa-solid fa-calendar'></span>-->\n<!--            </span>-->\n<!--          </div>-->\n<!--        </div>-->\n<!--      </div>-->\n<!--      <div class='row mt-3'>-->\n<!--        <div class='col-sm-6'>-->\n<!--          <button id='changeOptions' class='btn btn-primary'>Toggle disabled weekends</button>-->\n<!--        </div>-->\n<!--      </div>-->\n<!--    </div>-->\n<!--    <script type='text/javascript'>-->\n<!--      const changeOptionsButton = document.getElementById('changeOptions');-->\n<!--      const settingOptionsPicker = new tempusDominus.TempusDominus(document.getElementById('settingOptions'));-->\n\n<!--      let on = false;-->\n<!--      changeOptionsButton.addEventListener('click', () => {-->\n<!--        settingOptionsPicker.updateOptions({-->\n<!--          restrictions: {-->\n<!--            daysOfWeekDisabled: on ? [] : [0, 6]-->\n<!--          }-->\n<!--        });-->\n<!--        on = !on;-->\n<!--        changeOptionsButton.classList.toggle('btn-primary');-->\n<!--        changeOptionsButton.classList.toggle('btn-secondary');-->\n<!--      });-->\n<!--    </script>-->\n<!--  </div>-->\n\n<!--  <div class='row'>-->\n<!--    <h3 id='container-option'>Example with container parameter<a class='anchor-link ' aria-label='Anchor'-->\n<!--                                                                 href='#container-option'><i-->\n<!--      class='fa-solid fa-anchor' aria-hidden='true'></i></a> <small class='show-code' title='View Code'><i-->\n<!--      class='fa-solid fa-code' aria-hidden='true'></i></small></h3>-->\n\n<!--    <p>-->\n<!--      All you need is an element to attach the picker to and a parent container.-->\n<!--    </p>-->\n\n<!--    <div class='code-blocks d-none'>-->\n<!--      <ul class='nav nav-tabs' role='tablist'>-->\n<!--        <li class='nav-item' role='presentation'>-->\n<!--          <button class='nav-link active' id='container-optionHtml-tab' data-bs-toggle='tab'-->\n<!--                  data-bs-target='#container-optionHtml' type='button'-->\n<!--                  role='tab' aria-controls='container-optionHtml' aria-selected='true'>HTML-->\n<!--          </button>-->\n<!--        </li>-->\n<!--        <li class='nav-item' role='presentation'>-->\n<!--          <button class='nav-link' id='container-optionJs-tab' data-bs-toggle='tab'-->\n<!--                  data-bs-target='#container-optionJs'-->\n<!--                  type='button'-->\n<!--                  role='tab' aria-controls='container-optionJs' aria-selected='false'>Javascript-->\n<!--          </button>-->\n<!--        </li>-->\n<!--        <li class='nav-item' role='presentation'>-->\n<!--          <button class='nav-link' id='container-optionLog-tab' data-bs-toggle='tab'-->\n<!--                  data-bs-target='#container-optionLog'-->\n<!--                  type='button'-->\n<!--                  role='tab' aria-controls='container-optionLog' aria-selected='false'>Events-->\n<!--          </button>-->\n<!--        </li>-->\n<!--      </ul>-->\n<!--      <div class='tab-content'>-->\n<!--        <div class='tab-pane fade show active' id='container-optionHtml' role='tabpanel'-->\n<!--             aria-labelledby='container-optionHtml-tab'>-->\n<!--         <pre>-->\n<!--           <code class='language-html'>-->\n<!--&lt;div id='parent-container' class='relative p-5' style='overflow: auto; height: 100px; width: 100%;'&gt;-->\n<!--  &lt;div class='input-group log-event' id='containerDatePicker' data-td-target-input='nearest'-->\n<!--    data-td-target-toggle='nearest'&gt;-->\n<!--    &lt;input id='containerDatePickerInput' type='text' class='form-control' /&gt;-->\n<!--    &lt;span class='input-group-text' data-td-target='#settingOptions' data-td-toggle='datetimepicker'&gt;-->\n<!--      &lt;span class='fa-solid fa-calendar'&gt;&lt;/span&gt;-->\n<!--  &lt;/div&gt;-->\n<!--&lt;/div&gt;-->\n<!--           </code>-->\n<!--         </pre>-->\n<!--        </div>-->\n<!--        <div class='tab-pane fade' id='container-optionJs' role='tabpanel'-->\n<!--             aria-labelledby='container-optionJs-tab'>-->\n<!--         <pre>-->\n<!--           <code class='language-javascript'>-->\n<!--new tempusDominus.TempusDominus(document.getElementById('containerDatePicker'), {-->\n<!--  container: document.querySelector('div#parent-container'),-->\n<!--});-->\n<!--           </code>-->\n<!--         </pre>-->\n<!--        </div>-->\n<!--        <div class='tab-pane fade logger' id='container-optionLog' role='tabpanel'-->\n<!--             aria-labelledby='datetimepicker1Log-tab'>-->\n<!--          <div class='alert alert-info'>-->\n<!--            Events will display as you manipulate the picker.-->\n<!--          </div>-->\n<!--        </div>-->\n<!--      </div>-->\n<!--    </div>-->\n\n<!--    <div class='container'>-->\n<!--      <div class='row'>-->\n<!--        <div class='col-sm-6'>-->\n<!--          <div id='parent-container' class='relative p-5' style='overflow: auto; height: 100px; width: 100%;'>-->\n<!--            <label for='containerDatePickerInput'></label>-->\n<!--            <div class='input-group log-event' id='containerDatePicker' data-td-target-input='nearest'-->\n<!--                 data-td-target-toggle='nearest'>-->\n<!--              <input id='containerDatePickerInput' type='text' class='form-control' />-->\n<!--              <span class='input-group-text' data-td-target='#settingOptions'-->\n<!--                    data-td-toggle='datetimepicker'>-->\n<!--                <span class='fa-solid fa-calendar'></span>-->\n<!--              </span>-->\n<!--            </div>-->\n<!--          </div>-->\n<!--        </div>-->\n<!--      </div>-->\n<!--    </div>-->\n<!--    <script type='text/javascript'>-->\n<!--      new tempusDominus.TempusDominus(document.getElementById('containerDatePicker'), {-->\n<!--        container: document.querySelector('div#parent-container')-->\n<!--      });-->\n<!--    </script>-->\n<!--  </div>-->\n\n<!--  <section id='plugins-example'>-->\n<!--    <h3>Plugins-->\n<!--      <a class='anchor-link ' aria-label='Anchor' href='#plugins-example'>-->\n<!--        <i class='fa-solid fa-anchor' aria-hidden='true'></i></a>-->\n<!--      <small class='show-code' title='View Code'><i class='fa-solid fa-code' aria-hidden='true'></i></small>-->\n<!--    </h3>-->\n\n<!--    <p>-->\n<!--      Plugins allow you to extend the picker by adding new functionality to either Tempus Dominus globally,-->\n<!--      the plugin or by overwriting existing functionality. Check the events tab to see the logs.-->\n<!--    </p>-->\n\n<!--    <div class='code-blocks d-none'>-->\n<!--      <ul class='nav nav-tabs' role='tablist'>-->\n<!--        <li class='nav-item' role='presentation'>-->\n<!--          <button class='nav-link active' id='pluginsHtml-tab' data-bs-toggle='tab'-->\n<!--                  data-bs-target='#pluginsHtml' type='button'-->\n<!--                  role='tab' aria-controls='pluginsHtml' aria-selected='true'>HTML-->\n<!--          </button>-->\n<!--        </li>-->\n<!--        <li class='nav-item' role='presentation'>-->\n<!--          <button class='nav-link' id='pluginsJs-tab' data-bs-toggle='tab' data-bs-target='#pluginsJs'-->\n<!--                  type='button'-->\n<!--                  role='tab' aria-controls='pluginsJs' aria-selected='false'>Javascript-->\n<!--          </button>-->\n<!--        </li>-->\n<!--        <li class='nav-item' role='presentation'>-->\n<!--          <button class='nav-link' id='pluginsLog-tab' data-bs-toggle='tab' data-bs-target='#pluginsLog'-->\n<!--                  type='button'-->\n<!--                  role='tab' aria-controls='pluginsLog' aria-selected='false'>Events-->\n<!--          </button>-->\n<!--        </li>-->\n<!--      </ul>-->\n<!--      <div class='tab-content'>-->\n<!--        <div class='tab-pane fade show active' id='pluginsHtml' role='tabpanel'-->\n<!--             aria-labelledby='pluginsHtml-tab'>-->\n<!--         <pre>-->\n<!--           <code class='language-html'>-->\n<!-- &lt;div-->\n<!--     class='input-group'-->\n<!--     id='plugins'-->\n<!--     data-td-target-input='nearest'-->\n<!--     data-td-target-toggle='nearest'-->\n<!-- &gt;-->\n<!--   &lt;input-->\n<!--     id='pluginsInput'-->\n<!--     type='text'-->\n<!--     class='form-control'-->\n<!--     data-td-target='#plugins'-->\n<!--   /&gt;-->\n<!--   &lt;span-->\n<!--     class='input-group-text'-->\n<!--     data-td-target='#plugins'-->\n<!--     data-td-toggle='datetimepicker'-->\n<!--   &gt;-->\n<!--     &lt;span class='fa-solid fa-calendar'&gt;&lt;/span&gt;-->\n<!--   &lt;/span&gt;-->\n<!-- &lt;/div&gt;-->\n<!--           </code>-->\n<!--         </pre>-->\n<!--        </div>-->\n<!--        <div class='tab-pane fade' id='pluginsJs' role='tabpanel' aria-labelledby='pluginsJs-tab'>-->\n<!--         <pre>-->\n<!--           <code class='language-javascript'>-->\n<!--/*-->\n<!--* the bulk of this code isn't really needed. The main requirement is loading the plugin, and calling extend-->\n<!--* &lt;script src=&quot;/path/to/plugin.js&quot;&gt;&lt;/script&gt;-->\n<!--* tempusDominus.extend(window.tempusDominus_plugin_PLUGINNAME);-->\n<!--*/-->\n<!--const loadPluginButton = document.getElementById(&#39;loadPlugin&#39;);-->\n<!--const plugins = new tempusDominus.TempusDominus(document.getElementById(&#39;plugins&#39;));-->\n\n<!--const doLog = (value)=&gt;-->\n<!--{-->\n<!--\tlogger(document.getElementById(&#39;plugins-example&#39;).getElementsByClassName(&#39;logger&#39;)[0],-->\n<!--\t  &#39;log&#39;,-->\n<!--\t  `from plugin:`, value);-->\n<!--};-->\n\n<!--loadPluginButton.addEventListener(&#39;click&#39;, () =&gt; {-->\n<!--\tconst script = document.createElement(&#39;script&#39;);-->\n<!--\tscript.onload = function () {-->\n<!--\t  tempusDominus.extend(window.tempusDominus_plugin_example);-->\n<!--\t  tempusDominus.example(&#39;hi&#39;, doLog);-->\n<!--\t  plugins.someFunction(&#39;world&#39;, doLog);-->\n<!--\t  plugins.show(&#39;hello world&#39;, doLog);-->\n<!--\t};-->\n<!--\tscript.src = &#39;/6/js/plugins/example.js&#39;;-->\n\n<!--\tdocument.body.appendChild(script);-->\n<!--});-->\n<!--           </code>-->\n<!--         </pre>-->\n<!--        </div>-->\n<!--        <div class='tab-pane fade logger' id='pluginsLog' role='tabpanel'-->\n<!--             aria-labelledby='pluginsLog-tab'>-->\n<!--          <div class='alert alert-info'>-->\n<!--            Events will display as you manipulate the picker.-->\n<!--          </div>-->\n<!--        </div>-->\n<!--      </div>-->\n<!--    </div>-->\n\n<!--    <div class='container'>-->\n<!--      <div class='row'>-->\n<!--        <div class='col-sm-6'>-->\n<!--          <label for='pluginsInput' class='form-label'>Plugin</label>-->\n<!--          <div-->\n<!--            class='input-group log-event'-->\n<!--            id='plugins'-->\n<!--            data-td-target-input='nearest'-->\n<!--            data-td-target-toggle='nearest'-->\n<!--          >-->\n<!--            <input-->\n<!--              id='pluginsInput'-->\n<!--              type='text'-->\n<!--              class='form-control'-->\n<!--              data-td-target='#plugins'-->\n<!--            />-->\n<!--            <span-->\n<!--              class='input-group-text'-->\n<!--              data-td-target='#plugins'-->\n<!--              data-td-toggle='datetimepicker'-->\n<!--            >-->\n<!--               <span class='fa-solid fa-calendar'></span>-->\n<!--             </span>-->\n<!--          </div>-->\n<!--        </div>-->\n<!--      </div>-->\n<!--      <div class='row mt-3'>-->\n<!--        <div class='col-sm-6'>-->\n<!--          <button id='loadPlugin' class='btn btn-primary'>Load Plugin</button>-->\n<!--        </div>-->\n<!--      </div>-->\n<!--    </div>-->\n<!--    <script type='text/javascript'>-->\n<!--      const loadPluginButton = document.getElementById('loadPlugin');-->\n<!--      const plugins = new tempusDominus.TempusDominus(document.getElementById('plugins'));-->\n\n<!--      const doLog = (value) => {-->\n<!--        logger(document.getElementById('plugins-example').getElementsByClassName('logger')[0],-->\n<!--          'log',-->\n<!--          `from plugin:`, value);-->\n<!--      };-->\n\n<!--      loadPluginButton.addEventListener('click', () => {-->\n<!--        const script = document.createElement('script');-->\n<!--        script.onload = function() {-->\n<!--          tempusDominus.extend(window.tempusDominus.plugins.sample);-->\n<!--          tempusDominus.example('hi', doLog);-->\n<!--          plugins.someFunction('world', doLog);-->\n<!--          plugins.show('hello world', doLog);-->\n<!--          loadPluginButton.disabled = true;-->\n<!--        };-->\n<!--        script.src = '/6/js/plugins/examples/sample.js';-->\n\n<!--        document.body.appendChild(script);-->\n<!--      });-->\n<!--    </script>-->\n<!--  </div>-->\n\n<!--  <section id='picker-functions'>-->\n<!--    <h3>Picker Functions-->\n<!--      <a class='anchor-link ' aria-label='Anchor' href='#picker-functions'>-->\n<!--        <i class='fa-solid fa-anchor' aria-hidden='true'></i></a>-->\n<!--      <small class='show-code' title='View Code'><i class='fa-solid fa-code' aria-hidden='true'></i></small>-->\n<!--    </h3>-->\n\n<!--    <p>-->\n<!--      Click <i class='fa-solid fa-code' aria-hidden='true'></i> to view the code and the log.-->\n<!--      Clicking the buttons below will log the results there.-->\n<!--    </p>-->\n\n<!--    <div class='code-blocks d-none'>-->\n<!--      <ul class='nav nav-tabs' role='tablist'>-->\n<!--        <li class='nav-item' role='presentation'>-->\n<!--          <button class='nav-link active' id='pickerFunctionsHtml-tab' data-bs-toggle='tab'-->\n<!--                  data-bs-target='#pickerFunctionsHtml' type='button'-->\n<!--                  role='tab' aria-controls='pickerFunctionsHtml' aria-selected='true'>HTML-->\n<!--          </button>-->\n<!--        </li>-->\n<!--        <li class='nav-item' role='presentation'>-->\n<!--          <button class='nav-link' id='pickerFunctionsJs-tab' data-bs-toggle='tab'-->\n<!--                  data-bs-target='#pickerFunctionsJs'-->\n<!--                  type='button'-->\n<!--                  role='tab' aria-controls='pickerFunctionsJs' aria-selected='false'>Javascript-->\n<!--          </button>-->\n<!--        </li>-->\n<!--        <li class='nav-item' role='presentation'>-->\n<!--          <button class='nav-link' id='pickerFunctionsLog-tab' data-bs-toggle='tab'-->\n<!--                  data-bs-target='#pickerFunctionsLog'-->\n<!--                  type='button'-->\n<!--                  role='tab' aria-controls='pickerFunctionsLog' aria-selected='false'>Events-->\n<!--          </button>-->\n<!--        </li>-->\n<!--      </ul>-->\n<!--      <div class='tab-content'>-->\n<!--        <div class='tab-pane fade show active' id='pickerFunctionsHtml' role='tabpanel'-->\n<!--             aria-labelledby='pickerFunctionsHtml-tab'>-->\n<!--         <pre>-->\n<!--           <code class='language-html'>-->\n<!-- &lt;div-->\n<!--     class='input-group'-->\n<!--     id='pickerFunctions'-->\n<!--     data-td-target-input='nearest'-->\n<!--     data-td-target-toggle='nearest'-->\n<!-- &gt;-->\n<!--   &lt;input-->\n<!--     id='pickerFunctionsInput'-->\n<!--     type='text'-->\n<!--     class='form-control'-->\n<!--     data-td-target='#pickerFunctions'-->\n<!--   /&gt;-->\n<!--   &lt;span-->\n<!--     class='input-group-text'-->\n<!--     data-td-target='#pickerFunctions'-->\n<!--     data-td-toggle='datetimepicker'-->\n<!--   &gt;-->\n<!--     &lt;span class='fa-solid fa-calendar'&gt;&lt;/span&gt;-->\n<!--   &lt;/span&gt;-->\n<!-- &lt;/div&gt;-->\n<!--           </code>-->\n<!--         </pre>-->\n<!--        </div>-->\n<!--        <div class='tab-pane fade' id='pickerFunctionsJs' role='tabpanel'-->\n<!--             aria-labelledby='pickerFunctionsJs-tab'>-->\n<!--         <pre>-->\n<!--           <code class='language-javascript'>-->\n<!-- new tempusDominus.TempusDominus(document.getElementById('pickerFunctions'));-->\n<!--           </code>-->\n<!--         </pre>-->\n<!--        </div>-->\n<!--        <div class='tab-pane fade logger' id='pickerFunctionsLog' role='tabpanel'-->\n<!--             aria-labelledby='pickerFunctionsLog-tab'>-->\n<!--          <div class='alert alert-info'>-->\n<!--            Events will display as you manipulate the picker.-->\n<!--          </div>-->\n<!--        </div>-->\n<!--      </div>-->\n<!--    </div>-->\n\n<!--    <div class='container'>-->\n<!--      <div class='row'>-->\n<!--        <div class='col-sm-6'>-->\n<!--          <label for='pickerFunctionsInput' class='form-label'>Functions</label>-->\n<!--          <div-->\n<!--            class='input-group log-event'-->\n<!--            id='pickerFunctions'-->\n<!--            data-td-target-input='nearest'-->\n<!--            data-td-target-toggle='nearest'-->\n<!--          >-->\n<!--            <input-->\n<!--              id='pickerFunctionsInput'-->\n<!--              type='text'-->\n<!--              class='form-control'-->\n<!--              data-td-target='#pickerFunctions'-->\n<!--            />-->\n<!--            <span-->\n<!--              class='input-group-text'-->\n<!--              data-td-target='#pickerFunctions'-->\n<!--              data-td-toggle='datetimepicker'-->\n<!--            >-->\n<!--                            <span class='fa-solid fa-calendar'></span>-->\n<!--                        </span>-->\n<!--          </div>-->\n<!--        </div>-->\n<!--      </div>-->\n<!--      <div class='row mt-3'>-->\n<!--        <div class='col-sm-6'>-->\n<!--          <button id='getDate' class='btn btn-primary me-3'>Get Date</button>-->\n<!--          <button id='setDate' class='btn btn-primary'>Set Date to 2022-05-10</button>-->\n<!--        </div>-->\n<!--      </div>-->\n<!--    </div>-->\n\n<!--    <script type='text/javascript'>-->\n<!--      const functionLog = (prefix, value) => {-->\n<!--        logger(document.getElementById('picker-functions').getElementsByClassName('logger')[0],-->\n<!--          'log',-->\n<!--          prefix,-->\n<!--          value);-->\n<!--      };-->\n\n<!--      const pickerFunctions = new tempusDominus.TempusDominus(document.getElementById('pickerFunctions'), {-->\n<!--        multipleDates: true,-->\n<!--        display: {-->\n<!--          components: {-->\n<!--            clock: false-->\n<!--          }-->\n<!--        }-->\n<!--      });-->\n\n<!--      document.getElementById('getDate').addEventListener('click', () => {-->\n<!--        //logs all selected dates-->\n<!--        functionLog('all selected', JSON.stringify(pickerFunctions.dates.picked, null, 2));-->\n<!--        //logs the last selected-->\n<!--        functionLog('last selected', pickerFunctions.dates.lastPicked);-->\n<!--        //logs the selected index. This will always be 0 if multipleDates is false-->\n<!--        functionLog('last selected index', pickerFunctions.dates.lastPickedIndex);-->\n<!--      });-->\n\n<!--      document.getElementById('setDate').addEventListener('click', () => {-->\n<!--        //parseInput will attempt to turn strings and Date objects to a DateTime object.-->\n<!--        const parsedDate = pickerFunctions.dates.parseInput(new Date(2020, 4, 10));-->\n<!--        //if multipleDates is false, the second parameter is not required.-->\n<!--        pickerFunctions.dates.setValue(parsedDate, pickerFunctions.dates.lastPickedIndex);-->\n<!--      });-->\n\n<!--    </script>-->\n<!--  </div>-->\n<!--  <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css\">-->\n</div>\n\n<div id=\"page-meta\">\n  <div id=\"title\">Examples</div>\n  <div id=\"post-date\">07/08/2021</div>\n  <div id=\"update-date\">07/20/2022</div>\n  <div id=\"excerpt\">How to use Tempus Dominus datetime picker</div>\n  <div id=\"tags\">datepicker, javascript, open source, tempus dominus, eonasdan</div>\n</div>\n"
  },
  {
    "path": "src/docs/partials/examples/jquery.html",
    "content": "<div id=\"page-body\">\n  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'\n          integrity='sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=='\n          crossorigin='anonymous' referrerpolicy='no-referrer'></script>\n  <script src='/6/js/jQuery-provider.js'></script>\n\n  <div class='row'>\n    <p>\n      This page outlines using the picker with jQuery. The <code>jQuery-provider.js</code> file must be included after\n      the\n      main picker code. jQuery is no longer a requirement and is here for backwards compatibility.\n    </p>\n    <p>\n      It's highly recommend to use the native methods as jQuery will be dropped completely in the future.\n    </p>\n    <p>\n      The events are slightly different with jQuery. Using the native methods events return as <code>event.detail.[date|oldDate|etc]</code>.\n      With jQuery, you will access those values <code>e.[date|oldDate|ect]</code>.\n    </p>\n  </div>\n\n  <div class='row'>\n    <h3 id='simple-setup'>Simple Setup <a class='anchor-link ' aria-label='Anchor' href='#simple-setup'><i\n      class='fas fa-anchor' aria-hidden=\"true\"></i></a> <small class='show-code' title='View Code'><i class='fas fa-code' aria-hidden=\"true\"></i></small>\n      <a aria-label='stackblitz' href='https://stackblitz.com/edit/tempus-dominus-v6-simple-jquery-setup?file=index.html'\n         title='Stackblitz example'>\n        <i class=\"fa-solid fa-bolt\" aria-hidden=\"true\"></i></a>\n    </h3>\n    \n    <p>\n      This is the simplest setup you can have with Bootstrap and Font Awesome 5. The picker defaults to FA 5 Solid\n      icons, however you can overwrite the defaults globally.\n    </p>\n\n    <div class='code-blocks d-none'>\n      <ul class='nav nav-tabs' role='tablist'>\n        <li class='nav-item' role='presentation'>\n          <button class='nav-link active' id='datetimepicker1Html-tab' data-bs-toggle='tab'\n                  data-bs-target='#datetimepicker1Html' type='button'\n                  role='tab' aria-controls='datetimepicker1Html' aria-selected='true'>HTML\n          </button>\n        </li>\n        <li class='nav-item' role='presentation'>\n          <button class='nav-link' id='datetimepicker1Js-tab' data-bs-toggle='tab' data-bs-target='#datetimepicker1Js'\n                  type='button'\n                  role='tab' aria-controls='datetimepicker1Js' aria-selected='false'>Javascript\n          </button>\n        </li>\n        <li class='nav-item' role='presentation'>\n          <button class='nav-link' id='datetimepicker1Log-tab' data-bs-toggle='tab' data-bs-target='#datetimepicker1Log'\n                  type='button'\n                  role='tab' aria-controls='datetimepicker1Log' aria-selected='false'>Events\n          </button>\n        </li>\n      </ul>\n      <div class='tab-content'>\n        <div class='tab-pane fade show active' id='datetimepicker1Html' role='tabpanel'\n             aria-labelledby='datetimepicker1Html-tab'>\n         <pre>\n           <code class='language-html'>\n &lt;div\n     class='input-group'\n     id='datetimepicker1'\n     data-td-target-input='nearest'\n     data-td-target-toggle='nearest'\n &gt;\n   &lt;input\n     id='datetimepicker1Input'\n     type='text'\n     class='form-control'\n     data-td-target='#datetimepicker1'\n   /&gt;\n   &lt;span\n     class='input-group-text'\n     data-td-target='#datetimepicker1'\n     data-td-toggle='datetimepicker'\n   &gt;\n     &lt;span class='fas fa-calendar'&gt;&lt;/span&gt;\n   &lt;/span&gt;\n &lt;/div&gt;\n           </code>\n         </pre>\n        </div>\n        <div class='tab-pane fade' id='datetimepicker1Js' role='tabpanel' aria-labelledby='datetimepicker1Js-tab'>\n         <pre>\n           <code class='language-javascript'>\n $('#datetimepicker1').tempusDominus();\n           </code>\n         </pre>\n        </div>\n        <div class='tab-pane fade logger' id='datetimepicker1Log' role='tabpanel'\n             aria-labelledby='datetimepicker1Log-tab'>\n          <div class='alert alert-info'>\n            Events will display as you manipulate the picker.\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div class='container'>\n      <div class='row'>\n        <div class='col-sm-6'>\n          <label for='datetimepicker1Input' class='form-label'>Simple picker</label>\n          <div\n            class='input-group log-event'\n            id='datetimepicker1'\n            data-td-target-input='nearest'\n            data-td-target-toggle='nearest'\n          >\n            <input\n              id='datetimepicker1Input'\n              type='text'\n              class='form-control'\n              data-td-target='#datetimepicker1'\n            />\n            <span\n              class='input-group-text'\n              data-td-target='#datetimepicker1'\n              data-td-toggle='datetimepicker'\n            >\n               <span class='fas fa-calendar'></span>\n             </span>\n          </div>\n        </div>\n      </div>\n    </div>\n    <script type='text/javascript'>\n      $('#datetimepicker1').tempusDominus();\n    </script>\n  </div>\n</div>\n\n<div id=\"page-meta\">\n  <div id=\"title\">Examples using jQuery</div>\n  <div id=\"post-date\">07/08/2021</div>\n  <div id=\"update-date\">02/05/2022</div>\n  <div id=\"excerpt\">How to use Tempus Dominus datetime picker with jquery</div>\n  <div id=\"tags\">datepicker, javascript, open source, tempus dominus, eonasdan</div>\n</div>\n"
  },
  {
    "path": "src/docs/partials/functions/dates.html",
    "content": "<div id=\"page-body\">\n  <div class='row'>\n    For the sake of the following documentation, assume there's a picker setup like this:\n    <pre>\n<code class='language-javascript'>const picker = new tempusdominus\n  .TempusDominus(document.getElementById('datetimepicker1'));\n</code>\n</pre>\n\n    <div class='container'>\n      <div class='row'>\n        <div class='col-sm-6'>\n          <label for='datetimepicker1Input' class='form-label'>Simple picker</label>\n          <div\n            class='input-group'\n            id='datetimepicker1'\n            data-td-target-input='nearest'\n            data-td-target-toggle='nearest'\n          >\n            <input\n              id='datetimepicker1Input'\n              type='text'\n              class='form-control'\n              data-td-target='#datetimepicker1'\n            />\n            <span\n              class='input-group-text'\n              data-td-target='#datetimepicker1'\n              data-td-toggle='datetimepicker'\n            >\n               <span class='fa-solid fa-calendar'></span>\n             </span>\n          </div>\n        </div>\n        <script type='text/javascript'>\n          const picker = new tempusDominus.TempusDominus(document.getElementById('datetimepicker1'));\n        </script>\n      </div>\n    </div>\n  </div>\n\n  <div class='row'>\n    <h2 id='viewDate'>View Date\n      <a class='anchor-link' aria-label='Anchor' href='#viewDate'><i class='fa-solid fa-anchor'\n                                                                     aria-hidden='true'></i></a>\n    </h2>\n    <p>\n      <code>picker.viewDate</code> returns the pickers current view date.\n    </p>\n    <p><code>picker.viewDate = DateTime</code> will set the view date, update the options and ask the view to refresh.</p>\n  </div>\n  <div class='row mb-3'>\n    <h2>picker.dates</h2>\n    <p>\n      There are a number of function here that allow for retrieving the selected dates or adding to them.\n      These functions are used as <code>picker.dates.add(...)</code> for example.\n    </p>\n  </div>\n  <div class='row'>\n    <h2 id='picked'>picked\n      <a class='anchor-link' aria-label='Anchor' href='#picked'><i class='fa-solid fa-anchor'\n                                                                   aria-hidden='true'></i></a>\n    </h2>\n    <p>\n      Returns an array of <code>DateTime</code> of the selected date(s).\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='lastPicked'>lastPicked\n      <a class='anchor-link' aria-label='Anchor' href='#lastPicked'><i class='fa-solid fa-anchor'\n                                                                       aria-hidden='true'></i></a>\n    </h2>\n    <p>\n      Returns the last picked <code>DateTime</code> of the selected date(s).\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='lastPickedIndex'>lastPickedIndex\n      <a class='anchor-link' aria-label='Anchor' href='#lastPickedIndex'><i\n        class='fa-solid fa-anchor' aria-hidden='true'></i></a>\n    </h2>\n    <p>\n      Returns the length of picked dates -1 or 0 if none are selected.\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='add'>add(DateTime)\n      <a class='anchor-link' aria-label='Anchor' href='#add'><i class='fa-solid fa-anchor'\n                                                                aria-hidden='true'></i></a>\n    </h2>\n    <p>\n      Adds a new DateTime to selected dates array. Use this function with caution. It will not\n      automatically\n      refresh\n      the\n      widget or do any validation.\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='setValue'>setValue(value: DateTime, index?: number)\n      <a class='anchor-link' aria-label='Anchor' href='#setValue'><i class='fa-solid fa-anchor'\n                                                                     aria-hidden='true'></i></a>\n    </h2>\n    <p>\n      Sets the select date index (or the first, if not provided) to the provided DateTime object.\n    </p>\n\n  </div>\n\n  <div class='row'>\n    <h2 id='formatInput'>formatInput(value: DateTime): string\n      <a class='anchor-link' aria-label='Anchor' href='#formatInput'><i class='fa-solid fa-anchor'\n                                                                        aria-hidden='true'></i></a>\n    </h2>\n    <p>\n      Formats a DateTime object to a string. Used when setting the input value. It is possible to\n      overwrite this\n      to provide more complex formatting with moment/dayjs or by hand.\n    </p>\n\n  </div>\n\n  <div class='row'>\n    <h2 id='parseInput'>parseInput(value:any): DateTime\n      <a class='anchor-link' aria-label='Anchor' href='#parseInput'><i class='fa-solid fa-anchor'\n                                                                       aria-hidden='true'></i></a>\n    </h2>\n    <p>\n      Parse the value into a DateTime object. This can be overwritten to supply your own parsing.\n    </p>\n  </div>\n\n  <div class='row'>\n\n    <h2 id='setFromInput'>setFromInput(value: any, index?: number)\n      <a class='anchor-link' aria-label='Anchor' href='#setFromInput'><i class='fa-solid fa-anchor'\n                                                                         aria-hidden='true'></i></a>\n    </h2>\n    <p>\n      Tries to convert the provided value to a DateTime object.\n      If value is null|undefined then clear the value of the provided index (or 0). It is possible to\n      overwrite\n      this\n      to provide more complex formatting with moment/dayjs or by hand.\n    </p>\n  </div>\n\n  <div class='row'>\n\n    <h2 id='isPicked'>isPicked(DateTime, Unit?)\n      <a class='anchor-link' aria-label='Anchor' href='#isPicked'><i class='fa-solid fa-anchor'\n                                                                     aria-hidden='true'></i></a>\n    </h2>\n    <p>\n      Returns true if the target date is part of the selected dates array. If unit is provided then a\n      granularity\n      to that unit will be used.\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='pickedIndex'>pickedIndex(DateTime, Unit?)\n      <a class='anchor-link' aria-label='Anchor' href='#pickedIndex'><i\n        class='fa-solid fa-anchor' aria-hidden='true'></i></a>\n    </h2>\n    <p>\n      Returns the index at which target date is in the array. This is used for updating or removing a\n      date when\n      multi-date is used. If unit is provided then a granularity to that unit will be used.\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='clear'>clear\n      <a class='anchor-link' aria-label='Anchor' href='#clear'><i class='fa-solid fa-anchor'\n                                                                  aria-hidden='true'></i></a>\n    </h2>\n    <p>\n      Clears all selected dates.\n    </p>\n    <p>\n      <strong>Emits</strong> <code>Namespace.events.change</code> with the last picked date.\n    </p>\n  </div>\n\n  <div id='subToc' class='d-none'>\n    <nav id='TableOfContents'>\n      <ul>\n        <li><a href='#content'>Overview</a></li>\n        <li><a href='#viewDate'>View Date</a></li>\n        <li><a href='#picked'>Picked </a></li>\n        <li><a href='#lastPicked'>Last Picked</a></li>\n        <li><a href='#lastPickedIndex'>Last Picked Index</a></li>\n        <li><a href='#add'>Add</a></li>\n        <li><a href='#setValue'>Set Value</a></li>\n        <li><a href='#formatInput'>Format Input</a></li>\n        <li><a href='#parseInput'>Parse Input</a></li>\n        <li><a href='#setFromInput'>Set From Input</a></li>\n        <li><a href='#isPicked'>Is Picked</a></li>\n        <li><a href='#pickedIndex'>Picked Index</a></li>\n        <li><a href='#clear'>Clear</a></li>\n      </ul>\n    </nav>\n  </div>\n\n</div>\n\n<div id=\"page-meta\">\n  <div id=\"title\">Date Functions</div>\n  <div id=\"post-date\">08/14/2022</div>\n  <div id=\"update-date\">08/14/2022</div>\n  <div id=\"excerpt\">How to use Tempus Dominus datetime picker</div>\n  <div id=\"tags\">datepicker, javascript, open source, tempus dominus, eonasdan</div>\n</div>\n"
  },
  {
    "path": "src/docs/partials/functions/display.html",
    "content": "<div id=\"page-body\">\n  <div class='row'>\n    For the sake of the following documentation, assume there's a picker setup like this:\n    <pre>\n<code class='language-javascript'>const picker = new tempusdominus\n    .TempusDominus(document.getElementById('datetimepicker1'));</code>\n</pre>\n  </div>\n\n  <div class='row'>\n    <div class='col-sm-6'>\n      <label for='datetimepicker1Input' class='form-label'>Simple picker</label>\n      <div\n        class='input-group'\n        id='datetimepicker1'\n        data-td-target-input='nearest'\n        data-td-target-toggle='nearest'\n      >\n        <input\n          id='datetimepicker1Input'\n          type='text'\n          class='form-control'\n          data-td-target='#datetimepicker1'\n        />\n        <span\n          class='input-group-text'\n          data-td-target='#datetimepicker1'\n          data-td-toggle='datetimepicker'\n        >\n               <span class='fa-solid fa-calendar'></span>\n             </span>\n      </div>\n    </div>\n    <script type='text/javascript'>\n      const picker = new tempusDominus.TempusDominus(document.getElementById('datetimepicker1'));\n    </script>\n  </div>\n\n  <div class='row'>\n    <h2 id='toggle'>toggle</h2>\n    <p>Shows or hides the widget</p>\n    <h3 id='emits'>Emits</h3>\n    <ul>\n      <li>\n        <p><code>Namespace.events.hide</code> - if the widget is hidden after the toggle call</p>\n      </li>\n      <li>\n        <p><code>Namespace.events.show</code> - if the widget is show after the toggle call</p>\n      </li>\n      <li>\n        <p><code>Namespace.events.change</code> - if the widget is opened for the first time and the\n          input element\n          is empty and <code>options.useCurrent != false</code></p>\n      </li>\n    </ul>\n  </div>\n\n  <div class='row'>\n    <h2 id='show'>show\n      <a class='anchor-link' aria-label='Anchor' href='#show'><i class='fa-solid fa-anchor'\n                                                                 aria-hidden='true'></i></a></h2>\n    <p>Shows the widget</p>\n    <h4>Emits</h4>\n    <ul>\n      <li>\n        <p><code>Namespace.events.show</code> - if the widget was hidden before that call</p>\n      </li>\n      <li>\n        <p><code>Namespace.events.change</code> - if the widget is opened for the first time and the\n          <code>useCurrent</code> is set to true or to a granularity value and the input element the\n          component is\n          attached to has an empty value</p>\n      </li>\n    </ul>\n  </div>\n\n  <div class='row'>\n    <h2 id='hide'>hide\n      <a class='anchor-link' aria-label='Anchor' href='#hide'><i class='fa-solid fa-anchor'\n                                                                 aria-hidden='true'></i></a></h2>\n    <p>Hides the widget</p>\n    <h4>Emits</h4>\n    <ul>\n      <li><code>Namespace.events.hide</code> - if the widget was visible before that call</li>\n    </ul>\n  </div>\n\n  <div class='row'>\n    <h2 id='paint'>paint(Unit | 'decade', DateTime, string[], HTMLElement)</h2>\n    <p>\n      Allows developers to add/remove classes from an element. During the grid generation code, this function is called.\n    </p>\n    <p>\n      It provides the unit that is being generated (i.e. displaying the main date view), the date time object\n      being effected, the current set of css classes and the container element.\n    </p>\n    <p>Check out the <a href='/6/plugins/paint.html'>example paint plugin</a>.</p>\n  </div>\n\n  <div id='subToc' class='d-none'>\n    <nav id='TableOfContents'>\n      <ul>\n        <li><a href='#content'>Overview</a></li>\n        <li><a href='#toggle'>Toggle</a></li>\n        <li><a href='#show'>Show</a></li>\n        <li><a href='#hide'>Hide</a></li>\n        <li><a href='#paint'>Paint</a></li>\n      </ul>\n    </nav>\n  </div>\n</div>\n\n<div id=\"page-meta\">\n  <div id=\"title\">Display Functions</div>\n  <div id=\"post-date\">08/14/2022</div>\n  <div id=\"update-date\">08/14/2022</div>\n  <div id=\"excerpt\">How to use Tempus Dominus datetime picker</div>\n  <div id=\"tags\">datepicker, javascript, open source, tempus dominus, eonasdan</div>\n</div>\n"
  },
  {
    "path": "src/docs/partials/functions/index.html",
    "content": "<div id=\"page-body\">\n    <div class='row'>\n        For the sake of the following documentation, assume there's a picker setup like this:\n        <pre>\n<code class='language-javascript'>const picker = new tempusDominus\n    .TempusDominus(document.getElementById('datetimepicker1'));</code>\n</pre>\n\n        <div class='container'>\n            <div class='row'>\n                <div class='col-sm-6'>\n                    <label for='datetimepicker1Input' class='form-label'>Simple picker</label>\n                    <div\n                            class='input-group'\n                            id='datetimepicker1'\n                            data-td-target-input='nearest'\n                            data-td-target-toggle='nearest'\n                    >\n                        <input\n                                id='datetimepicker1Input'\n                                type='text'\n                                class='form-control'\n                                data-td-target='#datetimepicker1'\n                        />\n                        <span\n                                class='input-group-text'\n                                data-td-target='#datetimepicker1'\n                                data-td-toggle='datetimepicker'\n                        >\n               <span class='fa-solid fa-calendar'></span>\n             </span>\n                    </div>\n                </div>\n                <script type='text/javascript'>\n                    const picker = new tempusDominus.TempusDominus(document.getElementById('datetimepicker1'));\n                </script>\n            </div>\n        </div>\n    </div>\n\n    <div class='row'>\n        <h2 id='updateOptions'>updateOptions(object, boolean?)\n            <a class='anchor-link' aria-label='Anchor' href='#updateOptions'><i class=\"fa-solid fa-anchor\"\n                                                                                  aria-hidden=\"true\"></i></a>\n        </h2>\n        <p>\n            In previous version there was a function to read/write to each of the provided options. This made it easy to\n            use\n            but made the code bulky and harder to maintain. <code>updateOptions</code> replaces those functions and\n            takes an\n            object of new options. This allows for multiple options to be set at the same time and works the same way as\n            when\n            setting up the picker.\n        </p>\n        <p>\n            If the optional <code>reset</code> flag is provided then new options will be merged with the default values.\n        </p>\n    </div>\n\n    <div class='row'>\n        <h2 id='dispose'>dispose\n            <a class='anchor-link' aria-label='Anchor' href='#dispose'><i class=\"fa-solid fa-anchor\"\n                                                                            aria-hidden=\"true\"></i></a></h2>\n        <p>Destroys the widget and removes all attached event listeners. If the picker is open it will be hidden and the\n            event fired.</p>\n    </div>\n    <div class='row'>\n        <h2 id='disable'>disable\n            <a class='anchor-link' aria-label='Anchor' href='#disable'><i class=\"fa-solid fa-anchor\"\n                                                                            aria-hidden=\"true\"></i></a></h2>\n        <p>Disables the input element and the component is attached to, by adding a <code>disabled=\"true\"</code>\n            attribute\n            to\n            it. If the widget was visible before that call it is hidden.</p>\n        <h3>Emits</h3>\n        <ul>\n            <li><code>Namespace.events.hide</code> - if the widget was visible before this call</li>\n        </ul>\n    </div>\n    <div class='row'>\n        <h2 id='enable'>enable\n            <a class='anchor-link' aria-label='Anchor' href='#enable'><i class=\"fa-solid fa-anchor\"\n                                                                           aria-hidden=\"true\"></i></a></h2>\n        <p>Enables the input element and the component is attached to, by removing <code>disabled</code> attribute from\n            it.\n        </p>\n    </div>\n    <div class='row'>\n        <h2 id='clear'>clear\n            <a class='anchor-link' aria-label='Anchor' href='#clear'><i class=\"fa-solid fa-anchor\"\n                                                                          aria-hidden=\"true\"></i></a></h2>\n        <p>Clears all selected dates. This is a short cut to <code>picker.dates.clear()</code></p>\n    </div>\n    <div class='row'>\n        <h2 id='subscribe'>subscribe(event | events[], callback | callbacks[])\n            <a class='anchor-link' aria-label='Anchor' href='#subscribe'><i class=\"fa-solid fa-anchor\"\n                                                                              aria-hidden=\"true\"></i></a></h2>\n        <p>\n            Instead of adding event listeners to the pickers element, you can use the subscribe method. You can provide\n            a\n            single event to listen for or an array of events. When providing an array the number of callbacks must be\n            the\n            same as the number of events.\n        </p>\n        <p>\n            The subscribe method returns an unsubscribe method or an array of methods if multiple events are provided.\n            Calling\n            unsubscribe remove the callback from the event listeners. Unsubscribing will not prevent\n            <code>addEventListener()</code> from working.\n        </p>\n        <pre>\n<code class='language-javascript'>const subscription = picker.subscribe(tempusdominus.Namespace.events.change, (e) => {\n  console.log(e);\n});\n\n// event listener can be unsubscribed to:\nsubscription.unsubscribe();\n\n//you can also provide multiple events:\nconst subscriptions = picker.subscribe(\n        [tempusdominus.Namespace.events.show,tempusdominus.Namespace.events.hide],\n        [(e)=> console.log(e), (e) => console.log(e)]\n)</code>\n    </pre>\n    </div>\n\n    <div id='subToc' class='d-none'>\n        <nav id='TableOfContents'>\n            <ul>\n                <li><a href='#content'>Overview</a></li>\n                <li><a href='#updateOptions'>Update Options</a></li>\n                <li><a href='#dispose'>Dispose</a></li>\n                <li><a href='#disable'>Disable</a></li>\n                <li><a href='#enable'>Enable</a></li>\n                <li><a href='#clear'>Clear</a></li>\n                <li><a href='#subscribe'>Subscribe</a></li>\n            </ul>\n        </nav>\n    </div>\n</div>\n\n<div id=\"page-meta\">\n    <div id=\"title\">Functions</div>\n    <div id=\"post-date\">08/14/2022</div>\n    <div id=\"update-date\">08/14/2022</div>\n    <div id=\"excerpt\">How to use Tempus Dominus datetime picker</div>\n    <div id=\"tags\">datepicker, javascript, open source, tempus dominus, eonasdan</div>\n</div>\n"
  },
  {
    "path": "src/docs/partials/functions.html",
    "content": "<div id=\"page-body\">\n    <meta http-equiv=\"refresh\" content=\"0; URL=https://getdatepicker.com/6/functions\">\n    <link rel=\"canonical\" href=\"https://getdatepicker.com/6/functions/\">\n\n    The functions have been split up and moved to a different page.\n\n    Redirecting to <a href=\"https://getdatepicker.com/6/functions/\">https://getdatepicker.com/6/functions</a>\n</div>\n\n<div id=\"page-meta\">\n    <div id=\"title\">Functions</div>\n    <div id=\"post-date\">07/08/2021</div>\n    <div id=\"update-date\">07/08/2021</div>\n    <div id=\"excerpt\">How to use Tempus Dominus datetime picker</div>\n    <div id=\"tags\">datepicker, javascript, open source, tempus dominus, eonasdan</div>\n</div>\n"
  },
  {
    "path": "src/docs/partials/index.html",
    "content": "<div id=\"page-body\">\n  <div class='row'>\n    <p class=\"lead mb-4\">\n      Tempus Dominus is the successor to the very popular \"eonasdan/bootstrap-datetimepicker\". The plugin provides a wide array of options that allow developers to provide date and or time selections to users as simple pickers, date of birth selection, appointments and more.\n    </p>\n    <p>\n      If you're looking for installation instructions check out the <a href='installing.html'>download page</a>.\n    </p>\n    <p>\n      Once you get it installed there are plenty of <a href='repl.html'>examples</a> and a <a href='https://stackblitz.com/@Eonasdan/collections/tempus-dominus'>stackblitz</a>.\n    </p>\n    <h2>Get involved</h2>\n    <ul>\n      <li>You can check out <a href='https://jonathanpeterson.com' rel=\"noopener\" target='_blank'>my blog</a>.</li>\n      <li>Join <a href=\"https://discord.gg/BHS9jw9YPf\" rel=\"noopener nofollow\" target='_blank'>the discord</a></li>\n      <li>Check out the <a href=\"https://github.com/Eonasdan/tempus-dominus/discussions\" rel=\"noopener\" target='_blank'>discussions</a></li>\n    </ul>\n  </div>\n</div>\n<div id=\"page-meta\">\n  <div id=\"title\">Introduction</div>\n  <div id=\"post-date\">07/08/2021</div>\n  <div id=\"update-date\">07/08/2021</div>\n  <div id=\"excerpt\">Introduction to Eonasdan's date time picker.</div>\n  <div id=\"tags\">datepicker, javascript, open source, tempus dominus, eonasdan</div>\n</div>\n"
  },
  {
    "path": "src/docs/partials/installing.html",
    "content": "<div id=\"page-body\">\n  <div class='row'>\n    <p>\n      No matter how you choose to get the files, make sure that Popper is include before the picker's main script file.\n    </p>\n    <p>\n      You will also want a font library. The picker defaults to Font Awesome 6, but you can provide a different icon set\n      via the configuration or a plugin.\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='cdn'>Via CDN</h2>\n    <pre>\n<code class='language-html'>&lt;!-- Popperjs --&gt;\n&lt;script src=&quot;https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;\n&lt;!-- Tempus Dominus JavaScript --&gt;\n&lt;script src=&quot;https://cdn.jsdelivr.net/npm/@eonasdan/tempus-dominus@6.9.4/dist/js/tempus-dominus.min.js&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;\n\n&lt;!-- Tempus Dominus Styles --&gt;\n&lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/@eonasdan/tempus-dominus@6.9.4/dist/css/tempus-dominus.min.css&quot; crossorigin=&quot;anonymous&quot;&gt;</code>\n</pre>\n  </div>\n\n  <div class='row'>\n    <h2 id='npm'>Via NPM</h2>\n    <pre>\n<code class='language-batch'>npm install @popperjs/core @eonasdan/tempus-dominus</code>\n</pre>\n  </div>\n  <div class='row'>\n    <h2 id='compiled'>Compiled Code</h2>\n    <p>\n      You can grab the compiled js and css from <a href='https://github.com/Eonasdan/tempus-dominus/tree/master/dist'\n                                                   target='_blank' rel='noopener'>GitHub</a>\n    </p>\n    <p>You still need to get Popper yourself.</p>\n  </div>\n\n  <div class='row'>\n    <h2 id='nuget'>Nuget Package</h2>\n    <pre>\n<code class='language-powershell'>Install-Package TempusDominus\n#or the SCSS version if you prefer\nInstall-Package TempusDominus.scss</code>\n    </pre>\n  </div>\n\n  <div id='subToc' class='d-none'>\n    <nav id='TableOfContents'>\n      <ul>\n        <li><a href='#content'>Overview</a></li>\n        <li><a href='#cdn'>CDN</a></li>\n        <li><a href='#npm'>NPM</a></li>\n        <li><a href='#compiled'>Compiled</a></li>\n        <li><a href='#nuget'>NuGet</a></li>\n      </ul>\n    </nav>\n  </div>\n\n</div>\n<div id=\"page-meta\">\n  <div id=\"title\">Download</div>\n  <div id=\"post-date\">07/08/2021</div>\n  <div id=\"update-date\">07/08/2021</div>\n  <div id=\"excerpt\">How to install Tempus Dominus datetime picker.</div>\n  <div id=\"tags\">datepicker, javascript, open source, tempus dominus, eonasdan</div>\n</div>\n"
  },
  {
    "path": "src/docs/partials/locale.html",
    "content": "<div id=\"page-body\">\n  <div class='row'>\n    <p>\n      The locale files offer a simple way to globally or individually set the localization options without the need to\n      hand code that everytime.\n    </p>\n  </div>\n\n  <div class='row'>\n    <div class='col-sm-6'>\n      <label for='datetimepicker1Input' class='form-label'>Simple picker</label>\n      <div\n        class='input-group'\n        id='datetimepicker1'\n        data-td-target-input='nearest'\n        data-td-target-toggle='nearest'\n      >\n        <input\n          id='datetimepicker1Input'\n          type='text'\n          class='form-control'\n          data-td-target='#datetimepicker1'\n        />\n        <span\n          class='input-group-text'\n          data-td-target='#datetimepicker1'\n          data-td-toggle='datetimepicker'\n        >\n               <span class='fas fa-calendar'></span>\n             </span>\n      </div>\n    </div>\n  </div>\n  <script src='/6/js/locales/ru.js'></script>\n  <script type='text/javascript'>\n    tempusDominus.loadLocale(tempusDominus.locales.ru);\n    tempusDominus.locale(tempusDominus.locales.ru.name);\n    const datetimepicker1 = new tempusDominus.TempusDominus(document.getElementById('datetimepicker1'));\n  </script>\n  <div class='row'>\n    <h2 id='creating'>Creating Locales</h2>\n    <p>\n      There are a few examples in the source like this\n    </p>\n    <pre>\n<code class='language-javascript'>const name = 'ru';\n\nconst localization = {\n  today: 'Перейти сегодня',\n  //...\n  locale: 'ru',\n  startOfTheWeek: 1\n};\n\nexport { localization, name };</code>\n    </pre>\n  </div>\n\n  <div class='row'>\n    <h2 id='using'>Using a locale</h2>\n    <p>Load the locale file.</p>\n    <pre>\n<code class='language-html'>&lt;script src=&quot;/path/to/locale.js&quot;&gt;&lt;/script&gt;</code>\n    </pre>\n    <p>\n      You can then either set the global default or you can it individually.\n    </p>\n    <pre>\n<code class='language-js'>//load the RU locale\ntempusDominus.loadLocale(tempusDominus.locales.ru);\n\n//globally\ntempusDominus.locale(tempusDominus.locales.ru.name);//set the default options to use Russian from the plugin\n\n//picker\nconst datetimepicker1 = new tempusDominus.TempusDominus(document.getElementById(&#39;datetimepicker1&#39;));\ndatetimepicker1.locale(tempusDominus.locales.ru.name);</code>\n    </pre>\n    <p>\n      If you want to load locales in TypeScript:\n    </p>\n    <pre>\n<code class='language-js'>import { TempusDominus, loadLocale, locale } from '@eonasdan/tempus-dominus';\n\nimport { localization, name } from \"@eonasdan/tempus-dominus/dist/locales/ru\";\n\n//load the locale\nloadLocale({localization, name});\n\n//set globally\nlocale(name);\n\nvar datetimepicker1 = new TempusDominus(document.getElementById('datetimepicker1'));\n\n//or set per picker\ndatetimepicker1.locale(name);</code>\n    </pre>\n  </div>\n\n  <div id='subToc' class='d-none'>\n    <nav id='TableOfContents'>\n      <ul>\n        <li><a href='#content'>Overview</a></li>\n        <li><a href='#creating'>Creating</a></li>\n        <li><a href='#using'>Using</a></li>\n      </ul>\n    </nav>\n  </div>\n</div>\n\n<div id=\"page-meta\">\n  <div id=\"title\">Locales</div>\n  <div id=\"post-date\">01/19/2022</div>\n  <div id=\"update-date\">02/05/2022</div>\n  <div id=\"excerpt\">How to use plugins with Tempus Dominus.</div>\n  <div id=\"tags\">datepicker, javascript, open source, tempus dominus, eonasdan</div>\n</div>\n"
  },
  {
    "path": "src/docs/partials/migration.html",
    "content": "<div id=\"page-body\">\n  <div id='migration'>\n    <p>\n      Version 6 defaults to FA 5 icons (but will switch to FA 6 when that's released), removes moment, jQuery and\n      Bootstrap as depedencies. It also uses Popper.js v2.\n    </p>\n    <p>\n      This tool attempts to convert your configurations from previous version of the picker to v6. Paste your current\n      configuration into the input box. Due to how this process works, it cannot convert usages of moment or date\n      objects. Set any property that uses unsupported values to <code>undefined</code> so that configuration can still\n      be converted.\n    </p>\n    <p>\n      For more information on what's changed, check out the <a href='change-log.html'>change log</a>.\n    </p>\n    <p>\n      If you find a bug or your configuration doesn't work, please open an issue.\n    </p>\n    <div id='alert'>\n    </div>\n    <nav>\n      <div class='nav nav-tabs' id='nav-tab' role='tablist'>\n        <button class='nav-link active' id='nav-migration-js-tab' data-bs-toggle='tab'\n                data-bs-target='#nav-migration-js' type='button' role='tab' aria-controls='nav-migration-js'\n                aria-selected='true'>JS\n        </button>\n        <button class='nav-link' id='nav-migration-html-tab' data-bs-toggle='tab' data-bs-target='#nav-migration-html'\n                type='button' role='tab' aria-controls='nav-migration-html' aria-selected='false'>HTML\n        </button>\n      </div>\n    </nav>\n    <div class='tab-content' id='nav-tabContent'>\n      <div class='tab-pane fade show active' id='nav-migration-js' role='tabpanel'\n           aria-labelledby='nav-migration-js-tab'>\n        <div class='row'>\n          <div class='col'>\n            <label for='from' class='form-label'>Input</label>\n            <textarea id='from' class='form-control'></textarea>\n          </div>\n          <div class='col-sm-1'>\n            <button class='btn btn-primary' id='convertButton'><i class=\"fa-solid fa-angle-double-right\" aria-hidden=\"true\"></i></button>\n          </div>\n          <div class='col'>\n            <label for='to' class='form-label'>Output</label>\n            <textarea id='to' class='form-control' readonly></textarea>\n          </div>\n        </div>\n      </div>\n      <div class='tab-pane fade' id='nav-migration-html' role='tabpanel' aria-labelledby='nav-migration-html-tab'>\n        <div class='row'>\n          <div class='col'>\n            <label for='fromHtml' class='form-label'>Input</label>\n            <textarea id='fromHtml' class='form-control'>\n<div class=\"input-group date\" id=\"datetimepicker1\" data-target-input=\"nearest\">\n    <input type=\"text\" class=\"form-control datetimepicker-input\" data-target=\"#datetimepicker1\"/>\n    <div class=\"input-group-append\" data-target=\"#datetimepicker1\" data-toggle=\"datetimepicker\">\n        <div class=\"input-group-text\"><i class=\"fa fa-calendar\" aria-hidden=\"true\"></i></div>\n    </div>\n</div>\n            </textarea>\n          </div>\n          <div class='col-sm-1'>\n            <button class='btn btn-primary' id='convertButtonHtml'><i class=\"fa-solid fa-angle-double-right\" aria-hidden=\"true\"></i></button>\n          </div>\n          <div class='col'>\n            <label for='toHtml' class='form-label'>Output</label>\n            <textarea id='toHtml' class='form-control' readonly></textarea>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class='row mt-3'>\n      <p>\n        You can try your settings out here. If you're using an old version of FA or a differnt icon family, the icons\n        won't show.\n      </p>\n      <p>\n        <button class='btn btn-primary' id='tryIt'>Try it</button>\n      </p>\n      <div class='col-sm-6'>\n        <label for='datetimepicker1Input' class='form-label'>Results</label>\n        <div\n          class='input-group'\n          id='datetimepicker1'\n          data-td-target-input='nearest'\n          data-td-target-toggle='nearest'\n        >\n          <input\n            id='datetimepicker1Input'\n            type='text'\n            class='form-control'\n            data-td-target='#datetimepicker1'\n          />\n          <span\n            class='input-group-text'\n            data-td-target='#datetimepicker1'\n            data-td-toggle='datetimepicker'\n          >\n               <span class='fas fa-calendar'></span>\n             </span>\n        </div>\n      </div>\n    </div>\n    <div class='row mt-3'>\n      <h3>Exception 1</h3>\n      <p>\n        Moment is no longer used or an accepted value for configurations. You can either change the config to use the\n        value of <code>undefined</code> or remove the configuration. There's just no way I could convert\n        every possible way to use moment into something that works for the new version.\n      </p>\n      <h3>Exception 2</h3>\n      <p>\n        The current process doesn't work well with functions or object initalizers. You will have to replace those\n        calls. If you have a suggestions on how to improve this, please let me know.\n      </p>\n    </div>\n  </div>\n</div>\n<div id=\"page-meta\">\n  <div id=\"title\">Migration</div>\n  <div id=\"post-date\">07/08/2021</div>\n  <div id=\"update-date\">07/08/2021</div>\n  <div id=\"excerpt\">How to use Tempus Dominus datetime picker</div>\n  <div id=\"tags\">datepicker, javascript, open source, tempus dominus, eonasdan</div>\n</div>\n"
  },
  {
    "path": "src/docs/partials/namespace/css.html",
    "content": "<div id=\"page-body\">\n  <p>\n    The picker uses the following css classes to style the picker.\n  </p>\n  <div class='row'>\n    <h2 id='widget'>widget <a class='anchor-link ' aria-label='Anchor' href='#widget'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>\n    <p>\n      The outer element for the widget.\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='calendarHeader'>calendarHeader <a class='anchor-link ' aria-label='Anchor' href='#calendarHeader'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>\n    <p>\n      The element for the calendar view header, next and previous actions.\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='switch'>switch <a class='anchor-link ' aria-label='Anchor' href='#switch'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>\n    <p>\n      The element for the action to change the calendar view. E.g. month -> year.\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='toolbar'>switch <a class='anchor-link ' aria-label='Anchor' href='#toolbar'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>\n    <p>\n      The elements for all the toolbar options.\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='noHighlight'>switch <a class='anchor-link ' aria-label='Anchor' href='#noHighlight'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>\n    <p>\n      Disables the hover and rounding affect.\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='sideBySide'>sideBySide <a class='anchor-link ' aria-label='Anchor' href='#sideBySide'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>\n    <p>\n      Applied to the widget element when the side by side option is in use.\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='previous'>previous <a class='anchor-link ' aria-label='Anchor' href='#previous'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>\n    <p>\n      The element for the action to change the calendar view, e.g. August -> July\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='next'>next <a class='anchor-link ' aria-label='Anchor' href='#next'><i class='fa-solid fa-anchor'\n                                                                                   aria-hidden='true'></i></a></h2>\n    <p>\n      The element for the action to change the calendar view, e.g. August -> September\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='disabled'>disabled <a class='anchor-link ' aria-label='Anchor' href='#disabled'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>\n    <p>\n      Applied to any action that would violate any restriction options. ALso applied to an input field if the disabled\n      function is called.\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='old'>old <a class='anchor-link ' aria-label='Anchor' href='#old'><i class='fa-solid fa-anchor'\n                                                                                aria-hidden='true'></i></a></h2>\n    <p>\n      Applied to any date that is less than requested view, e.g. the last day of the previous month.\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='new'>new <a class='anchor-link ' aria-label='Anchor' href='#new'><i class='fa-solid fa-anchor'\n                                                                                aria-hidden='true'></i></a></h2>\n    <p>\n      Applied to any date that is greater than of requested view, e.g. the last day of the previous month.\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='active'>active <a class='anchor-link ' aria-label='Anchor' href='#active'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>\n    <p>\n      Applied to any date that is currently selected.\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='dateContainer'>dateContainer <a class='anchor-link ' aria-label='Anchor' href='#dateContainer'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>\n    <p>\n      The outer element for the calendar view.\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='decadesContainer'>decadesContainer <a class='anchor-link ' aria-label='Anchor' href='#decadesContainer'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>\n    <p>\n      The outer element for the decades view.\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='decade'>decade <a class='anchor-link ' aria-label='Anchor' href='#decade'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>\n    <p>\n      Applied to elements within the decades container, e.g. 2020, 2030\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='yearsContainer'>yearsContainer <a class='anchor-link ' aria-label='Anchor' href='#yearsContainer'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>\n    <p>\n      The outer element for the years view.\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='year'>year <a class='anchor-link ' aria-label='Anchor' href='#year'><i class='fa-solid fa-anchor'\n                                                                                   aria-hidden='true'></i></a></h2>\n    <p>\n      Applied to elements within the years container, e.g. 2021, 2021\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='monthsContainer'>monthsContainer <a class='anchor-link ' aria-label='Anchor' href='#monthsContainer'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>\n    <p>\n      The outer element for the month view.\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='month'>month <a class='anchor-link ' aria-label='Anchor' href='#month'><i class='fa-solid fa-anchor'\n                                                                                      aria-hidden='true'></i></a>\n    </h2>\n    <p>\n      Applied to elements within the month container, e.g. January, February\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='daysContainer'>daysContainer <a class='anchor-link ' aria-label='Anchor' href='#daysContainer'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>\n    <p>\n      The outer element for the calendar view.\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='day'>day <a class='anchor-link ' aria-label='Anchor' href='#day'><i class='fa-solid fa-anchor'\n                                                                                aria-hidden='true'></i></a></h2>\n    <p>\n      Applied to elements within the day container, e.g. 1, 2..31\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='calendarWeeks'>calendarWeeks <a class='anchor-link ' aria-label='Anchor' href='#calendarWeeks'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>\n    <p>\n      If display.calendarWeeks is enabled, a column displaying the week of year is shown. This class is applied to each\n      cell in that column.\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='dayOfTheWeek'>dayOfTheWeek <a class='anchor-link ' aria-label='Anchor' href='#dayOfTheWeek'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>\n    <p>\n      Applied to the first row of the calendar view, e.g. Sunday, Monday\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='today'>today <a class='anchor-link ' aria-label='Anchor' href='#today'><i class='fa-solid fa-anchor'\n                                                                                      aria-hidden='true'></i></a>\n    </h2>\n    <p>\n      Applied to the current date on the calendar view.\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='weekend'>weekend <a class='anchor-link ' aria-label='Anchor' href='#weekend'><i class='fa-solid fa-anchor'\n                                                                                            aria-hidden='true'></i></a>\n    </h2>\n    <p>\n      Applied to the locale's weekend dates on the calendar view, e.g. Sunday, Saturday\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='timeContainer'>timeContainer <a class='anchor-link ' aria-label='Anchor' href='#timeContainer'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>\n    <p>\n      The outer element for all time related elements.\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='separator'>separator <a class='anchor-link ' aria-label='Anchor' href='#separator'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>\n    <p>\n      Applied the separator columns between time elements, e.g. hour *:* minute *:* second\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='clockContainer'>clockContainer <a class='anchor-link ' aria-label='Anchor' href='#clockContainer'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>\n    <p>\n      The outer element for the clock view.\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='hourContainer'>hourContainer <a class='anchor-link ' aria-label='Anchor' href='#hourContainer'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>\n    <p>\n      The outer element for the hours selection view.\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='minuteContainer'>minuteContainer <a class='anchor-link ' aria-label='Anchor' href='#minuteContainer'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>\n    <p>\n      The outer element for the minutes selection view.\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='secondContainer'>secondContainer <a class='anchor-link ' aria-label='Anchor' href='#secondContainer'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>\n    <p>\n      The outer element for the seconds selection view.\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='hour'>hour <a class='anchor-link ' aria-label='Anchor' href='#hour'><i class='fa-solid fa-anchor'\n                                                                                   aria-hidden='true'></i></a></h2>\n    <p>\n      Applied to each element in the hours selection view.\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='minute'>minute <a class='anchor-link ' aria-label='Anchor' href='#minute'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>\n    <p>\n      Applied to each element in the minutes selection view.\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='second'>second <a class='anchor-link ' aria-label='Anchor' href='#second'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>\n    <p>\n      Applied to each element in the seconds selection view.\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='toggleMeridiem'>second <a class='anchor-link ' aria-label='Anchor' href='#toggleMeridiem'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>\n    <p>\n      Applied AM/PM toggle button.\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='show'>show <a class='anchor-link ' aria-label='Anchor' href='#show'><i class='fa-solid fa-anchor'\n                                                                                   aria-hidden='true'></i></a></h2>\n    <p>\n      Applied the element of the current view mode, e.g. calendar or clock.\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='collapsing'>collapsing <a class='anchor-link ' aria-label='Anchor' href='#collapsing'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>\n    <p>\n      Applied to the currently showing view mode during a transition between calendar and clock views\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='collapse'>collapse <a class='anchor-link ' aria-label='Anchor' href='#collapse'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>\n    <p>\n      Applied to the currently hidden view mode.\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='inline'>inline <a class='anchor-link ' aria-label='Anchor' href='#inline'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>\n    <p>\n      Applied to the widget when the option display.inline is enabled.\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='lightTheme'>lightTheme <a class='anchor-link ' aria-label='Anchor' href='#lightTheme'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>\n    <p>\n      Applied to the widget when the option display.theme is light.\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='darkTheme'>darkTheme <a class='anchor-link ' aria-label='Anchor' href='#darkTheme'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>\n    <p>\n      Applied to the widget when the option display.theme is dark.\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='isDarkPreferredQuery'>isDarkPreferredQuery <a class='anchor-link ' aria-label='Anchor'\n                                                        href='#isDarkPreferredQuery'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>\n    <p>\n      Used for detecting if the system color preference is dark mode.\n    </p>\n  </div>\n\n  <div id='subToc' class='d-none'>\n    <nav id='TableOfContents'>\n      <ul>\n        <li><a href='#widget'>Widget</a></li>\n        <li><a href='#calendarHeader'>Calendar Header</a></li>\n        <li><a href='#switch'>Switch</a></li>\n        <li><a href='#toolbar'>Toolbar</a></li>\n        <li><a href='#noHighlight'>No Highlight</a></li>\n        <li><a href='#sideBySide'>Side By Side</a></li>\n        <li><a href='#previous'>Previous</a></li>\n        <li><a href='#next'>Next</a></li>\n        <li><a href='#disabled'>Disabled</a></li>\n        <li><a href='#old'>Old</a></li>\n        <li><a href='#new'>New</a></li>\n        <li><a href='#active'>Active</a></li>\n        <li><a href='#dateContainer'>Date Container</a></li>\n        <li><a href='#decadesContainer'>Decades Container</a></li>\n        <li><a href='#decade'>Decade</a></li>\n        <li><a href='#yearsContainer'>Years Container</a></li>\n        <li><a href='#year'>Year</a></li>\n        <li><a href='#monthsContainer'>Months Container</a></li>\n        <li><a href='#month'>Month</a></li>\n        <li><a href='#daysContainer'>Days Container</a></li>\n        <li><a href='#day'>Day</a></li>\n        <li><a href='#calendarWeeks'>Calendar Weeks</a></li>\n        <li><a href='#dayOfTheWeek'>Day Of The Week</a></li>\n        <li><a href='#today'>Today</a></li>\n        <li><a href='#weekend'>Weekend</a></li>\n        <li><a href='#timeContainer'>Time Container</a></li>\n        <li><a href='#separator'>Separator</a></li>\n        <li><a href='#clockContainer'>Clock Container</a></li>\n        <li><a href='#hourContainer'>Hour Container</a></li>\n        <li><a href='#minuteContainer'>Minute Container</a></li>\n        <li><a href='#secondContainer'>Second Container</a></li>\n        <li><a href='#hour'>Hour</a></li>\n        <li><a href='#minute'>Minute</a></li>\n        <li><a href='#second'>Second</a></li>\n        <li><a href='#toggleMeridiem'>Toggle Meridiem</a></li>\n        <li><a href='#show'>Show</a></li>\n        <li><a href='#collapsing'>Collapsing</a></li>\n        <li><a href='#collapse'>Collapse</a></li>\n        <li><a href='#inline'>Inline</a></li>\n        <li><a href='#lightTheme'>Light Theme</a></li>\n        <li><a href='#darkTheme'>Dark Theme</a></li>\n        <li><a href='#isDarkPreferredQuery'>Is Dark Preferred Query</a></li>\n      </ul>\n    </nav>\n  </div>\n\n</div>\n\n<div id=\"page-meta\">\n  <div id=\"title\">CSS Classes</div>\n  <div id=\"post-date\">07/08/2021</div>\n  <div id=\"update-date\">07/08/2021</div>\n  <div id=\"excerpt\">A break down of the CSS classes in Tempus Dominus.</div>\n  <div id=\"tags\">datepicker, javascript, open source, tempus dominus, eonasdan</div>\n</div>\n"
  },
  {
    "path": "src/docs/partials/namespace/errors.html",
    "content": "<div id=\"page-body\">\n  <p>\n    The date picker will throw errors for a number of different reason. Most errors are related to an invalid setup.\n  </p>\n  <p>\n    Except where noted, the thrown errors are a type of <code>TdError</code> that extends the base javascript <code>Error</code>\n    class.\n  </p>\n  <p>\n    Where indicated the error provides a code value so that a developer can check for this value.\n  </p>\n\n  <div class='row'>\n    <h2 id='unexpectedOption'>unexpectedOption <small>(code: 1)</small><a class='anchor-link ' aria-label='Anchor'\n                                                                          href='#unexpectedOption'><i\n      class=\"fa-solid fa-anchor\" aria-hidden=\"true\"></i></a></h2>\n    <p>\n      An error indicating that a key in the options object is invalid.\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='unexpectedOptions'>unexpectedOptions <small>(code: 1)</small><a class='anchor-link ' aria-label='Anchor'\n                                                                            href='#unexpectedOptions'><i\n      class=\"fa-solid fa-anchor\" aria-hidden=\"true\"></i></a></h2>\n    <p>\n      An error indicating that one more keys in the options object is invalid.\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='unexpectedOptionValue'>unexpectedOptionValue <small>(code: 2)</small><a class='anchor-link '\n                                                                                    aria-label='Anchor'\n                                                                                    href='#unexpectedOptionValue'><i\n      class=\"fa-solid fa-anchor\" aria-hidden=\"true\"></i></a></h2>\n    <p>\n      An error when an option is provide an unsupported value. For example a value of 'cheese' for toolbarPlacement\n      which only supports 'top', 'bottom', 'default'.\n    </p>\n  </div>\n\n  <div class='row'><h2 id='typeMismatch'>typeMismatch <small>(code: 3)</small><a class='anchor-link ' aria-label='Anchor'\n                                                                  href='#typeMismatch'><i\n      class=\"fa-solid fa-anchor\" aria-hidden=\"true\"></i></a></h2>\n    <p>\n      An error when an option value is the wrong type.\n      For example a string value was provided to multipleDates which only\n      supports true or false.\n    </p>\n  </div>\n\n  <div class='row'><h2 id='numbersOutOfRage'>numbersOutOfRage <small>(code: 4)</small><a class='anchor-link ' aria-label='Anchor'\n                                                                          href='#numbersOutOfRage'><i\n      class=\"fa-solid fa-anchor\" aria-hidden=\"true\"></i></a></h2>\n    <p>\n      An error when an option value is outside of the expected range.\n      For example <code>restrictions.daysOfWeekDisabled</code> excepts a value between 0 and 6.\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='failedToParseDate'>failedToParseDate <small>(code: 5)</small><a class='anchor-link ' aria-label='Anchor'\n                                                                            href='#failedToParseDate'><i\n      class=\"fa-solid fa-anchor\" aria-hidden=\"true\"></i></a></h2>\n    <p>\n      An error when a value for a date options couldn't be parsed. Either\n      the option was an invalid string or an invalid Date object.\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='mustProvideElement'>mustProvideElement <small>(code: 6)</small><a class='anchor-link ' aria-label='Anchor'\n                                                                              href='#mustProvideElement'><i\n      class=\"fa-solid fa-anchor\" aria-hidden=\"true\"></i></a></h2>\n    <p>\n      An error when an element to attach to was not provided in the constructor.\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='subscribeMismatch'>subscribeMismatch <small>(code: 7)</small><a class='anchor-link ' aria-label='Anchor'\n                                                                            href='#subscribeMismatch'><i\n      class=\"fa-solid fa-anchor\" aria-hidden=\"true\"></i></a></h2>\n    <p>\n      An error if providing an array for the events to subscribe method doesn't have\n      the same number of callbacks. E.g., subscribe([1,2], [1])\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='conflictingConfiguration'>conflictingConfiguration <small>(code: 8)</small><a class='anchor-link '\n                                                                                          aria-label='Anchor'\n                                                                                          href='#conflictingConfiguration'><i\n      class=\"fa-solid fa-anchor\" aria-hidden=\"true\"></i></a></h2>\n    <p>\n      The configuration has conflicting rules e.g. minDate is after maxDate\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='dateString'>dateString<a class='anchor-link ' aria-label='Anchor' href='#dateString'><i\n      class=\"fa-solid fa-anchor\" aria-hidden=\"true\"></i></a></h2>\n    <p>\n      Logs a warning if a date option value is provided as a string, instead of\n      a date/datetime object.\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='errorMessages'>Error Messages</h2>\n    <div class='row'>\n      <div class='col offset-1 border-start'>\n        <h3 id='failedToSetInvalidDate'>failedToSetInvalidDate<a class='anchor-link ' aria-label='Anchor'\n                                                                 href='#failedToSetInvalidDate'><i\n          class=\"fa-solid fa-anchor\" aria-hidden=\"true\"></i></a></h3>\n        <p>\n          Used with an <a href='events.html#error'>Error Event type</a> if the user selects a date that fails\n          restriction\n          validation.\n        </p>\n\n        <h3 id='failedToParseInput'>failedToParseInput<a class='anchor-link ' aria-label='Anchor'\n                                                         href='#failedToParseInput'><i\n          class=\"fa-solid fa-anchor\" aria-hidden=\"true\"></i></a></h3>\n        <p>\n          Used with an <a href='events.html#error'>Error Event type</a> when a user changes the value of the input field\n          directly, and does not provide a valid date.\n        </p>\n      </div>\n    </div>\n  </div>\n\n  <div id='subToc' class='d-none'>\n    <nav id='TableOfContents'>\n      <ul>\n        <li><a href='#unexpectedOption'>UnexpectedOption</a></li>\n        <li><a href='#unexpectedOptions'>UnexpectedOptions</a></li>\n        <li><a href='#unexpectedOptionValue'>UnexpectedOptionValue</a></li>\n        <li><a href='#typeMismatch'>TypeMismatch</a></li>\n        <li><a href='#numbersOutOfRage'>NumbersOutOfRage</a></li>\n        <li><a href='#failedToParseDate'>FailedToParseDate</a></li>\n        <li><a href='#mustProvideElement'>MustProvideElement</a></li>\n        <li><a href='#subscribeMismatch'>SubscribeMismatch</a></li>\n        <li><a href='#conflictingConfiguration'>ConflictingConfiguration</a></li>\n        <li><a href='#dateString'>DateString</a></li>\n        <li><a href='#errorMessages'>Error Messages</a>\n        <ul>\n          <li><a href='#failedToSetInvalidDate'>FailedToSetInvalidDate</a></li>\n          <li><a href='#failedToParseInput'>FailedToParseInput</a></li>\n        </ul>\n        </li>\n      </ul>\n    </nav>\n  </div>\n\n</div>\n\n<div id=\"page-meta\">\n  <div id=\"title\">Errors</div>\n  <div id=\"post-date\">07/08/2021</div>\n  <div id=\"update-date\">07/08/2021</div>\n  <div id=\"excerpt\">Overview of the errors thrown and error messages from Tempus Dominus.</div>\n  <div id=\"tags\">datepicker, javascript, open source, tempus dominus, eonasdan</div>\n</div>\n"
  },
  {
    "path": "src/docs/partials/namespace/events.html",
    "content": "<div id=\"page-body\">\n  <div class='row'>\n    <p>\n      These events may provide additional details. For native javascript you can\n      get this data via <code>e.details.*</code>. For jQuery the details are directly in the event, e.g.\n      <code>e.date</code>\n    </p>\n    <p>\n      Each of these events inherit from the <code>BaseEvent</code> interface.\n    </p>\n    <pre>\n    <code class='language-javascript'>\ninterface BaseEvent {\n  type: string; //e.g. change.td\n  viewMode?: keyof ViewMode //'clock' | 'calendar' | 'months' | 'years' | 'decades'\n}\n    </code>\n  </pre>\n    <h2 id=\"change\">change.td <a class='anchor-link ' aria-label='Anchor' href='#change'><i\n      class='fas fa-anchor' aria-hidden=\"true\"></i></a></h2>\n    <p>\n      Emit when the date selection is changed.\n    </p>\n    <pre>\n    <code class='language-javascript'>\ninterface ChangeEvent extends BaseEvent {\n  date: DateTime | undefined;\n  oldDate: DateTime;\n  isClear: boolean;\n  isValid: boolean;\n}\n    </code>\n  </pre>\n    <h2 id=\"update\">update.td <a class='anchor-link ' aria-label='Anchor' href='#update'><i\n      class='fas fa-anchor' aria-hidden=\"true\"></i></a></h2>\n    <p>\n      Emits when the view changes for example from month view to the year view.\n    </p>\n    <pre>\n    <code class='language-javascript'>\ninterface ViewUpdateEvent extends BaseEvent {\n  viewDate: DateTime;\n}\n    </code>\n  </pre>\n    <h2 id=\"error\">error.td <a class='anchor-link ' aria-label='Anchor' href='#error'><i\n      class='fas fa-anchor' aria-hidden=\"true\"></i></a></h2>\n    <p>\n      Emits when a selected date or value from the input field fails to meet the provided validation rules.\n    </p>\n    <pre>\n    <code class='language-javascript'>\ninterface FailEvent extends BaseEvent {\n  reason: string;\n  date: DateTime;\n  oldDate: DateTime;\n}\n    </code>\n  </pre>\n    <h2 id=\"show\">show.td <a class='anchor-link ' aria-label='Anchor' href='#show'><i\n      class='fas fa-anchor' aria-hidden=\"true\"></i></a></h2>\n    <p>\n      Emits when then picker widget is displayed.\n    </p>\n    <h2 id=\"hide\">hide.td <a class='anchor-link ' aria-label='Anchor' href='#hide'><i\n      class='fas fa-anchor' aria-hidden=\"true\"></i></a></h2>\n    <p>\n      Emits when the picker widget is hidden.\n    </p>\n    <pre>\n    <code class='language-javascript'>\ninterface HideEvent extends BaseEvent {\n  date: DateTime;\n}\n    </code>\n  </pre>\n  </div>\n</div>\n\n<div id=\"page-meta\">\n  <div id=\"title\">Events</div>\n  <div id=\"post-date\">07/08/2021</div>\n  <div id=\"update-date\">07/08/2021</div>\n  <div id=\"excerpt\">Overview of the events fired from Tempus Dominus Datetime picker.</div>\n  <div id=\"tags\">datepicker, javascript, open source, tempus dominus, eonasdan</div>\n</div>\n"
  },
  {
    "path": "src/docs/partials/namespace/index.html",
    "content": "<div id=\"page-body\">\n  <div class='row'>\n    <p>\n      Tempus Dominus uses and exposes a Namespace class for consistency and easy reference.\n    </p>\n    <p>\n      These values are provide via <code>tempusDominus.Namespace</code>\n    </p>\n  </div>\n  <div class='row'>\n    <h2>NAME</h2>\n    <p>Returns <code>tempus-dominus</code>.</p>\n    <h2>dataKey</h2>\n    <p>Returns <code>td</code>. This is used as a suffix for events e.g. <code>change.td</code>.</p>\n\n    <h2>events</h2>\n    <p>A class with the pickers event keys. <a href='events.html'>See the full events page for more details.</a></p>\n\n    <h2>css</h2>\n    <p>A class with the pickers css classes. <a href='css.html'>See the full css page for more details.</a></p>\n\n    <h2>errorMessages</h2>\n    <p>A class with the pickers errors and error messages. <a href='errors.html'>See the full css page for more details.</a></p>\n  </div>\n</div>\n\n<div id=\"page-meta\">\n  <div id=\"title\">Namespace</div>\n  <div id=\"post-date\">07/08/2021</div>\n  <div id=\"update-date\">07/20/2022</div>\n  <div id=\"excerpt\">Overview of the Namespace for Tempus Dominus.</div>\n  <div id=\"tags\">datepicker, javascript, open source, tempus dominus, eonasdan</div>\n</div>\n"
  },
  {
    "path": "src/docs/partials/namespace/unit.html",
    "content": "<div id=\"page-body\">\n  <p>\n    The picker uses the following enum to represent a breakdown of date/time.\n  </p>\n  <div class='row'>\n    <ul>\n      <li>seconds</li>\n      <li>minutes</li>\n      <li>hours</li>\n      <li>date</li>\n      <li>month</li>\n      <li>year</li>\n    </ul>\n  </div>\n\n</div>\n\n<div id=\"page-meta\">\n  <div id=\"title\">Unit Enum</div>\n  <div id=\"post-date\">02/05/2022</div>\n  <div id=\"update-date\">02/05/2022</div>\n  <div id=\"excerpt\">A break down of the Unit enum in Tempus Dominus.</div>\n  <div id=\"tags\">datepicker, javascript, open source, tempus dominus, eonasdan</div>\n</div>\n"
  },
  {
    "path": "src/docs/partials/options/display.html",
    "content": "<div id=\"page-body\">\n  <p id='overview'>\n    The display options allow you to control much of the picker's look and feel. You can disable components, buttons\n    and change the default icons.\n  </p>\n  <pre id='defaults'>\n<code class='language-js'>new tempusDominus.TempusDominus(document.getElementById('datetimepicker1'),\n  {\n    display: {\n      icons: {\n        type: 'icons',\n        time: 'fa-solid fa-clock',\n        date: 'fa-solid fa-calendar',\n        up: 'fa-solid fa-arrow-up',\n        down: 'fa-solid fa-arrow-down',\n        previous: 'fa-solid fa-chevron-left',\n        next: 'fa-solid fa-chevron-right',\n        today: 'fa-solid fa-calendar-check',\n        clear: 'fa-solid fa-trash',\n        close: 'fa-solid fa-xmark'\n      },\n      sideBySide: false,\n      calendarWeeks: false,\n      viewMode: 'calendar',\n      toolbarPlacement: 'bottom',\n      keepOpen: false,\n      buttons: {\n        today: false,\n        clear: false,\n        close: false\n      },\n      components: {\n        calendar: true,\n        date: true,\n        month: true,\n        year: true,\n        decades: true,\n        clock: true,\n        hours: true,\n        minutes: true,\n        seconds: false,\n        //deprecated use localization.hourCycle = 'h24' instead\n        useTwentyfourHour: undefined\n      },\n      inline: false,\n      theme: 'auto',\n      keyboardNavigation: true\n    }\n)</code>\n          </pre>\n\n  <div class='row'>\n    <h2 id='icons'>icons<a class='anchor-link' aria-label='Anchor' href='#icons'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a>\n    </h2>\n    <p>\n      <strong>Accepts:</strong> string\n    </p>\n    <p>\n      Any icon library that expects icons to be used like\n      <code>&lt;i class=&#39;fas fa-calendar&#39;&gt;&lt;/i&gt;</code> will work, provided you include the\n      correct\n      styles and scripts needed.\n    </p>\n    <p>Icon sprites are also supported.</p>\n    <div class='row'>\n      <div class='col offset-1 border-start'>\n        <h4 id='iconsType'>type<a class='anchor-link' aria-label='Anchor'\n                                  href='#iconsType'><i\n          class='fa-solid fa-anchor' aria-hidden='true'></i></a></h4>\n        <p>\n          <strong>Accepts either \"icons\" or \"sprites\"</strong><br />\n          Defaults to \"icons\". If \"sprites\" is used as the value, the icons will be render with an svg\n          element\n          instead\n          of an \"i\" element. If you don't know which you should use, leave it as \"icons\".\n        </p>\n\n        <h4 id='iconsTime'>time<a class='anchor-link' aria-label='Anchor'\n                                  href='#iconsTime'><i\n          class='fa-solid fa-anchor' aria-hidden='true'></i></a></h4>\n        <p>\n          <strong>Defaults:</strong> <i class='fa-solid fa-clock' aria-hidden='true'></i> (fas\n          fa-clock)<br />\n          This icon is used to change the view from the calendar view to the clock view.\n        </p>\n\n        <h4 id='iconsDate'>date<a class='anchor-link' aria-label='Anchor'\n                                  href='#iconsDate'><i\n          class='fa-solid fa-anchor' aria-hidden='true'></i></a></h4>\n        <p>\n          <strong>Defaults:</strong> <i class='fa-solid fa-calendar' aria-hidden='true'></i> (fas\n          fa-calendar)<br />\n          This icon is used to change the view from the clock view to the calendar view.\n        </p>\n\n        <h4 id='iconsUp'>up<a class='anchor-link' aria-label='Anchor' href='#iconsUp'><i\n          class='fa-solid fa-anchor' aria-hidden='true'></i></a></h4>\n        <p>\n          <strong>Defaults:</strong> <i class='fa-solid fa-arrow-up' aria-hidden='true'></i> (fas\n          fa-arrow-up)<br />\n          This icon is used to increment hours, minutes and seconds in the clock view.\n        </p>\n\n        <h4 id='iconsDown'>down<a class='anchor-link' aria-label='Anchor'\n                                  href='#iconsDown'><i\n          class='fa-solid fa-anchor' aria-hidden='true'></i></a></h4>\n        <p>\n          <strong>Defaults:</strong> <i class='fa-solid fa-arrow-down' aria-hidden='true'></i> (fas\n          fa-arrow-down)<br />\n          This icon is used to decrement hours, minutes and seconds in the clock view.\n        </p>\n\n        <h4 id='iconsNext'>next<a class='anchor-link' aria-label='Anchor'\n                                  href='#iconsNext'><i\n          class='fa-solid fa-anchor' aria-hidden='true'></i></a></h4>\n        <p>\n          <strong>Defaults:</strong> <i class='fa-solid fa-chevron-right' aria-hidden='true'></i> (fas\n          fa-chevron-right)<br />\n          This icon is used to navigation forward in the calendar, month, year, and decade views.\n        </p>\n\n        <h4 id='iconsPrevious'>previous<a class='anchor-link' aria-label='Anchor'\n                                          href='#iconsPrevious'><i\n          class='fa-solid fa-anchor' aria-hidden='true'></i></a></h4>\n        <p>\n          <strong>Defaults:</strong> <i class='fa-solid fa-chevron-left' aria-hidden='true'></i> (fas\n          fa-chevron-left)<br />\n          This icon is used to navigation backwards in the calendar, month, year, and decade views.\n        </p>\n\n        <h4 id='iconsToday'>today<a class='anchor-link' aria-label='Anchor'\n                                    href='#iconsToday'><i\n          class='fa-solid fa-anchor' aria-hidden='true'></i></a>\n        </h4>\n        <p>\n          <strong>Defaults:</strong> <i class='fa-solid fa-calendar-check' aria-hidden='true'></i>\n          (fas fa-calendar-check)<br />\n          This icon is used to change the date and view to now.\n        </p>\n\n        <h4 id='iconsClear'>clear<a class='anchor-link' aria-label='Anchor'\n                                    href='#iconsClear'><i\n          class='fa-solid fa-anchor' aria-hidden='true'></i></a>\n        </h4>\n        <p>\n          <strong>Defaults:</strong> <i class='fa-solid fa-trash' aria-hidden='true'></i> (fas\n          fa-trash)<br />\n          This icon is used to clear the currently selected date.\n        </p>\n\n        <h4 id='iconsClose'>close<a class='anchor-link' aria-label='Anchor'\n                                    href='#iconsClose'><i\n          class='fa-solid fa-anchor' aria-hidden='true'></i></a>\n        </h4>\n        <p>\n          <strong>Defaults:</strong> <i class='fa-solid fa-times' aria-hidden='true'></i> (fas\n          fa-times)<br />\n          This icon is used to close the picker.\n        </p>\n      </div>\n    </div>\n  </div>\n\n  <div class='row'>\n  <h2 id='sideBySide'>sideBySide<a class='anchor-link' aria-label='Anchor'\n                                   href='#sideBySide'><i\n    class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>\n  <p>\n    <strong>Accepts:</strong> true|false <strong>Defaults:</strong> false<br />\n    <img src='../images/side-by-side.png' class='img-fluid img-thumbnail d-block' alt='Side by Side View' />\n    Displays the date and time pickers side by side.\n  </p>\n  </div>\n\n  <div class='row'>\n  <h2 id='calendarWeeks'>calendarWeeks<a class='anchor-link' aria-label='Anchor'\n                                         href='#calendarWeeks'><i\n    class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>\n  <p>\n    <strong>Accepts:</strong> true|false <strong>Defaults:</strong> false<br />\n    <img src='../images/calendar-weeks.png' class='img-fluid img-thumbnail d-block' alt='Calendar View' />\n    Displays an additional column with the calendar week for that week.\n  </p>\n  </div>\n\n  <div class='row'>\n  <h2 id='viewMode'>viewMode<a class='anchor-link' aria-label='Anchor' href='#viewMode'><i\n    class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>\n  <p>\n    <strong>Accepts:</strong> 'clock' | 'calendar' | 'months' | 'years' | 'decades'\n    <strong>Defaults:</strong> calendar<br />\n    The default view when the picker is displayed. Set to \"years\" for a date of birth picker.\n  </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='toolbarPlacement'>toolbarPlacement<a class='anchor-link' aria-label='Anchor'\n                                                 href='#toolbarPlacement'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>\n\n    <p>\n      <strong>Accepts:</strong> 'top' | 'bottom' <strong>Defaults:</strong> bottom<br />\n      Changes the placement of the toolbar where the today, clear, component switch icon are located.\n    </p>\n    <p>\n      Throws <a href='../namespace/errors.html#unexpectedOptionValue'>unexpectedOptionValue</a> if value\n      is not one of the accepted values.\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='keepOpen'>keepOpen<a class='anchor-link' aria-label='Anchor' href='#keepOpen'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>\n    <p>\n      <strong>Accepts:</strong> true|false <strong>Defaults:</strong> false<br />\n      Keep the picker window open even after a date selection. The picker can still be closed by the\n      target or\n      clicking on an outside element. This option will only work when time components are disabled.\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='buttons'>buttons<a class='anchor-link' aria-label='Anchor' href='#buttons'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a>\n    </h2>\n    <p><strong>Accepts: true|false</strong></p>\n    <p>\n      <img src='../images/buttons.png' class='img-fluid img-thumbnail d-block' alt='Buttons' />\n    </p>\n    <div class='row'>\n      <div class='col offset-1 border-start'>\n        <h4 id='buttonsToday'>today<a class='anchor-link' aria-label='Anchor'\n                                      href='#buttonsToday'><i\n          class='fa-solid fa-anchor' aria-hidden='true'></i></a>\n        </h4>\n        <p>\n          <strong>Defaults:</strong> false<br />\n          Displayed above in <span style='color:#FC4242;'>red</span>\n        </p>\n\n        <h4 id='buttonsClose'>close<a class='anchor-link' aria-label='Anchor'\n                                      href='#buttonsClose'><i\n          class='fa-solid fa-anchor' aria-hidden='true'></i></a>\n        </h4>\n        <p>\n          <strong>Defaults:</strong> false<br />\n          Displayed above in <span style='color:#632289;'>purple</span>\n        </p>\n\n        <h4 id='buttonsClear'>clear<a class='anchor-link' aria-label='Anchor'\n                                      href='#buttonsClear'><i\n          class='fa-solid fa-anchor' aria-hidden='true'></i></a>\n        </h4>\n        <p>\n          <strong>Defaults:</strong> false<br />\n          Displayed above in <span style='color:#06AF8F;'>green</span>\n        </p>\n\n      </div>\n    </div>\n  </div>\n\n  <div class='row'>\n    <h2 id='components'>components<a class='anchor-link' aria-label='Anchor'\n                                     href='#components'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>\n    <p><strong>Accepts: true|false</strong></p>\n\n    <p>\n      These options turns on or off the particular views. If option is false for <code>date</code> the\n      user would only be able to select month and year for instance.\n    </p>\n\n    <div class='row'>\n      <div class='col offset-1 border-start'>\n        <h4 id='componentsCalendar'>calendar<a class='anchor-link' aria-label='Anchor'\n                                               href='#componentsCalendar'><i\n          class='fa-solid fa-anchor' aria-hidden='true'></i></a></h4>\n        <p>\n          <strong>Defaults:</strong> true<br />\n          A convenience flag that can enable or disable all the calendar components like date,\n          month, year, decades, century. This flag must be true for any of the calendar components to be visible,\n          even if those\n          options are true.\n        </p>\n\n        <h4 id='componentsDate'>date<a class='anchor-link' aria-label='Anchor'\n                                       href='#componentsDate'><i\n          class='fa-solid fa-anchor' aria-hidden='true'></i></a></h4>\n        <p>\n          <strong>Defaults:</strong> true<br />\n          <img src='../images/calendar-view.png' class='img-fluid img-thumbnail d-block'\n               alt='Date View' />\n        </p>\n\n        <h4 id='componentsMonth'>month<a class='anchor-link' aria-label='Anchor'\n                                         href='#componentsMonth'><i\n          class='fa-solid fa-anchor' aria-hidden='true'></i></a>\n        </h4>\n        <p>\n          <strong>Defaults:</strong> true<br />\n          <img src='../images/month-view.png' class='img-fluid img-thumbnail d-block' alt='Month View' />\n          Turns on or off the month selection view.\n        </p>\n\n        <h4 id='componentsYear'>year<a class='anchor-link' aria-label='Anchor'\n                                       href='#componentsYear'><i\n          class='fa-solid fa-anchor' aria-hidden='true'></i></a></h4>\n        <p>\n          <strong>Defaults:</strong> true<br />\n          <img src='../images/year-view.png' class='img-fluid img-thumbnail d-block' alt='Year View' />\n        </p>\n\n        <h4 id='componentsDecades'>decades<a class='anchor-link' aria-label='Anchor'\n                                             href='#componentsDecades'><i\n          class='fa-solid fa-anchor' aria-hidden='true'></i></a>\n        </h4>\n        <p>\n          <strong>Defaults:</strong> true<br />\n          <img src='../images/decade-view.png' class='img-fluid img-thumbnail d-block'\n               alt='Decade View' />\n        </p>\n\n        <h4 id='componentsClock'>clock<a class='anchor-link' aria-label='Anchor'\n                                         href='#componentsClock'><i\n          class='fa-solid fa-anchor' aria-hidden='true'></i></a>\n        </h4>\n        <p>\n          <img src='../images/time-view.png' class='img-fluid img-thumbnail d-block' alt='Time View' />\n        </p>\n        <p>\n          <strong>Defaults:</strong> true<br />\n          A convenience flag that can enable or disable all the calendar components like date,\n          month, year,\n          decades, century.\n          This flag must be true for any of the calendar components to be visible, even if those\n          options are true.\n        </p>\n\n        <h4 id='componentsHours'>hours<a class='anchor-link' aria-label='Anchor'\n                                         href='#componentsHours'><i\n          class='fa-solid fa-anchor' aria-hidden='true'></i></a>\n        </h4>\n        <p>\n          <strong>Defaults:</strong> true<br />\n          Displayed above in <span style='color:#FC4242;'>red</span>\n        </p>\n\n        <h4 id='componentsMinutes'>minutes<a class='anchor-link' aria-label='Anchor'\n                                             href='#componentsMinutes'><i\n          class='fa-solid fa-anchor' aria-hidden='true'></i></a>\n        </h4>\n        <p>\n          <strong>Defaults:</strong> true<br />\n          Displayed above in <span style='color:#632289;'>purple</span>\n        </p>\n\n        <h4 id='componentsSeconds'>seconds<a class='anchor-link' aria-label='Anchor'\n                                             href='#componentsSeconds'><i\n          class='fa-solid fa-anchor' aria-hidden='true'></i></a>\n        </h4>\n        <p>\n          <strong>Defaults:</strong> false<br />\n          Displayed above in <span style='color:#06AF8F;'>green</span>\n        </p>\n\n        <h4 id='componentsUseTwentyfourHour'>useTwentyfourHour<a class='anchor-link'\n                                                                 aria-label='Anchor'\n                                                                 href='#componentsUseTwentyfourHour'><i\n          class='fa-solid fa-anchor' aria-hidden='true'></i></a></h4>\n        <div>\n          <strong>Defaults:</strong> false<br />\n\n          <div class='alert alert-warning'>\n            <h4 class='alert-heading'>Deprecated</h4>\n            <p>\n              This option has been deprecated and will be removed in a future version.\n              Use <a href='localization.html#hourCycle'><code class='text-dark'>localization.hourCycle</code></a> instead.\n            </p>\n          </div>\n\n          <img src='../images/24hour.png' class='img-fluid img-thumbnail d-block'\n               alt='Twenty-four View' />\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class='row'>\n    <h2 id='inline'>inline<a class='anchor-link' aria-label='Anchor' href='#inline'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a>\n    </h2>\n    <p>\n      <strong>Accepts:</strong> <strong>Defaults:boolean</strong> <br />\n      Displays the picker in a inline div instead of a popup.\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='theme'>theme<a class='anchor-link' aria-label='Anchor' href='#theme'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>\n    <p>\n      <strong>Accepts:</strong> 'light' | 'dark' | 'auto' <strong>Defaults:</strong> 'auto'<br />\n      Specifies which theme to use, light mode or dark mode. When set to auto, it will auto detect based on settings\n      of the user's system.\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='placement'>placement<a class='anchor-link' aria-label='Anchor' href='#placement'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>\n    <p>\n      <strong>Accepts:</strong> 'top' | 'bottom' <strong>Defaults:</strong> 'bottom'<br />\n      Specifies whether the picker should be displayed at the top or bottom of the element passed to the picker instance.\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='keyboardNavigation'>keyboardNavigation<a class='anchor-link' aria-label='Anchor' href='#keyboardNavigation'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>\n    <p>\n      <strong>Accepts:</strong> boolean <strong>Defaults:</strong> true<br />\n      Specifies whether the picker should allow keyboard navigation. For more information, see the section on <a href='keyboard-navigation.html'>keyboard navigation</a>.\n    </p>\n  </div>\n\n  <div id='subToc' class='d-none'>\n    <nav id='TableOfContents'>\n      <ul>\n        <li><a href='#content'>Overview</a></li>\n        <li><a href='#defaults'>Defaults</a></li>\n        <li><a href='#icons'>Icons</a>\n          <ul>\n            <li><a href='#iconsType'>Type</a></li>\n            <li><a href='#iconsTime'>Time</a></li>\n            <li><a href='#iconsDate'>Date</a></li>\n            <li><a href='#iconsUp'>Up</a></li>\n            <li><a href='#iconsDown'>Down</a></li>\n            <li><a href='#iconsNext'>Next</a></li>\n            <li><a href='#iconsPrevious'>Previous</a></li>\n            <li><a href='#iconsToday'>Today</a></li>\n            <li><a href='#iconsClear'>Clear</a></li>\n            <li><a href='#iconsClose'>Close</a></li>\n          </ul>\n        </li>\n        <li><a href='#sideBySide'>Side By Side</a></li>\n        <li><a href='#calendarWeeks'>Calendar Weeks</a></li>\n        <li><a href='#viewMode'>View Mode</a></li>\n        <li><a href='#toolbarPlacement'>Toolbar Placement</a></li>\n        <li><a href='#keepOpen'>Keep Open</a></li>\n        <li><a href='#buttons'>Buttons</a>\n        <ul>\n          <li><a href='#buttonsToday'>Today</a></li>\n          <li><a href='#buttonsClear'>Clear</a></li>\n          <li><a href='#buttonsClose'>Close</a></li>\n        </ul>\n        </li>\n        <li><a href='#components'>Components</a>\n          <ul>\n            <li><a href='#componentsCalendar'>Calendar</a></li>\n            <li><a href='#componentsDate'>Date</a></li>\n            <li><a href='#componentsMonth'>Month</a></li>\n            <li><a href='#componentsYear'>Year</a></li>\n            <li><a href='#componentsDecades'>Decades</a></li>\n            <li><a href='#componentsClock'>Clock</a></li>\n            <li><a href='#componentsHours'>Hours</a></li>\n            <li><a href='#componentsMinutes'>Minutes</a></li>\n            <li><a href='#componentsSeconds'>Seconds</a></li>\n            <li><a href='#componentsUseTwentyfourHour'>Use Twenty-four</a></li>\n          </ul></li>\n        <li><a href='#inline'>Inline</a></li>\n        <li><a href='#theme'>Theme</a></li>\n        <li><a href='#placement'>Placement</a></li>\n        <li><a href='#keyboardNavigation'>Keyboard Navigation</a></li>\n      </ul>\n    </nav>\n  </div>\n\n</div>\n\n<div id=\"page-meta\">\n  <div id=\"title\">Display Options</div>\n  <div id=\"post-date\">08/11/2022</div>\n  <div id=\"update-date\">02/26/2025</div>\n  <div id=\"excerpt\">How to use the display options.</div>\n  <div id=\"tags\">datepicker, javascript, open source, tempus dominus, eonasdan</div>\n</div>\n"
  },
  {
    "path": "src/docs/partials/options/index.html",
    "content": "<div id=\"page-body\">\n  <p id='overview'>\n    Options can be provided during the initial setup through the constructor <code>new\n    tempusDominus.TempusDominus(..., options);</code>. Take a look at the examples for more information.\n  </p>\n  <p>\n    The current options can be retrieved e.g. <code>datetimepicker1.optionsStore.options</code>.\n  </p>\n  <p>\n    Options can be updated through the <a href='../functions/#updateOptions'><code>updateOptions</code>\n    function</a>.\n  </p>\n  <p>\n    All options will throw <a href='../namespace/errors.html#typeMismatch'>typeMismatch</a> if the\n    provided type does not match the expected type, e.g. a string instead of a boolean.\n  </p>\n  <div class='alert alert-info'>\n    While most of the date options accept string values it wil throw a warning. JavaScript's Date objects will be\n    converted to the pickers <a href='../datetime.html'>DateTime object</a>.\n  </div>\n\n  <pre id='defaults'>\n<code class='language-js'>new tempusDominus.TempusDominus(document.getElementById('datetimepicker1'),\n{\n  allowInputToggle: false,\n  container: undefined,\n  dateRange: false,\n  debug: false,\n  defaultDate: undefined,\n  display: {\n    icons: {\n      type: 'icons',\n      time: 'fa-solid fa-clock',\n      date: 'fa-solid fa-calendar',\n      up: 'fa-solid fa-arrow-up',\n      down: 'fa-solid fa-arrow-down',\n      previous: 'fa-solid fa-chevron-left',\n      next: 'fa-solid fa-chevron-right',\n      today: 'fa-solid fa-calendar-check',\n      clear: 'fa-solid fa-trash',\n      close: 'fa-solid fa-xmark'\n    },\n    sideBySide: false,\n    calendarWeeks: false,\n    viewMode: 'calendar',\n    toolbarPlacement: 'bottom',\n    keepOpen: false,\n    buttons: {\n      today: false,\n      clear: false,\n      close: false\n    },\n    components: {\n      calendar: true,\n      date: true,\n      month: true,\n      year: true,\n      decades: true,\n      clock: true,\n      hours: true,\n      minutes: true,\n      seconds: false,\n      useTwentyfourHour: undefined\n    },\n    inline: false,\n    theme: 'auto',\n    keyboardNavigation: true\n  },\n  keepInvalid: false,\n  localization: {\n    clear: 'Clear selection',\n    close: 'Close the picker',\n    dateFormats: DefaultFormatLocalization.dateFormats,\n    dayViewHeaderFormat: { month: 'long', year: '2-digit' },\n    decrementHour: 'Decrement Hour',\n    decrementMinute: 'Decrement Minute',\n    decrementSecond: 'Decrement Second',\n    format: DefaultFormatLocalization.format,\n    hourCycle: DefaultFormatLocalization.hourCycle,\n    incrementHour: 'Increment Hour',\n    incrementMinute: 'Increment Minute',\n    incrementSecond: 'Increment Second',\n    locale: DefaultFormatLocalization.locale,\n    nextCentury: 'Next Century',\n    nextDecade: 'Next Decade',\n    nextMonth: 'Next Month',\n    nextYear: 'Next Year',\n    ordinal: DefaultFormatLocalization.ordinal,\n    pickHour: 'Pick Hour',\n    pickMinute: 'Pick Minute',\n    pickSecond: 'Pick Second',\n    previousCentury: 'Previous Century',\n    previousDecade: 'Previous Decade',\n    previousMonth: 'Previous Month',\n    previousYear: 'Previous Year',\n    selectDate: 'Select Date',\n    selectDecade: 'Select Decade',\n    selectMonth: 'Select Month',\n    selectTime: 'Select Time',\n    selectYear: 'Select Year',\n    startOfTheWeek: 0,\n    today: 'Go to today',\n    toggleMeridiem: 'Toggle Meridiem',\n    toggleAriaLabel?: string;\n  },\n  meta: {},\n  multipleDates: false,\n  multipleDatesSeparator: '; ',\n  promptTimeOnDateChange: false,\n  promptTimeOnDateChangeTransitionDelay: 200,\n  restrictions: {\n    minDate: undefined,\n    maxDate: undefined,\n    disabledDates: [],\n    enabledDates: [],\n    daysOfWeekDisabled: [],\n    disabledTimeIntervals: [],\n    disabledHours: [],\n    enabledHours: []\n  },\n  stepping: 1,\n  useCurrent: true,\n  viewDate: new DateTime()\n})</code>\n</pre>\n\n  <div class='row'>\n    <h2 id='dateRange'>dateRange <small>(as of 6.4.1)</small> <a class='anchor-link' aria-label='Anchor' href='#dateRange'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a>\n    </h2>\n    <p>\n      <strong>Accepts</strong> boolean <strong>Defaults:</strong> false<br />\n      <img src='/6/images/date-range.png' class='img-fluid img-thumbnail d-block' alt='date range example'>\n     Date Range work similar to multi date. You should also set multiDateSeparator with what you want the two values to be separated with. This option allows the user to select two dates and highlights all the dates in range between. Validation still takes place. The range will be consider invalid if <strong>any</strong> of the dates in the range are disabled.\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='stepping'>stepping<a class='anchor-link' aria-label='Anchor' href='#stepping'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a>\n    </h2>\n    <p>\n      <strong>Accepts</strong> number <strong>Defaults:</strong> 1<br />\n      Controls how much the minutes are changed by. This also changes the minute selection grid to step by this\n      amount.\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='useCurrent'>useCurrent<a class='anchor-link' aria-label='Anchor' href='#useCurrent'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>\n    <p>\n      <strong>Accepts</strong> true|false <strong>Defaults:</strong> true<br />\n      Determines if the current date/time should be used as the default value when the picker is opened.\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='defaultDate'>defaultDate<a class='anchor-link' aria-label='Anchor' href='#defaultDate'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>\n    <p>\n      <strong>Accepts:</strong> string | Date | DateTime <strong>Defaults:</strong> undefined<br />\n      Sets the picker default date/time. Overrides <code>useCurrent</code>\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='keepInvalid'>keepInvalid<a class='anchor-link' aria-label='Anchor' href='#keepInvalid'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>\n    <p>\n      <strong>Accepts</strong> true|false <strong>Defaults:</strong> false<br />\n      Allows for the user to select a date that is invalid according to the rules. For instance, if a user enters a date\n      pasted the <code>maxDate</code>.\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='debug'>debug<a class='anchor-link' aria-label='Anchor' href='#debug'><i class='fa-solid fa-anchor'\n                                                                                    aria-hidden='true'></i></a></h2>\n    <p>\n      <strong>Accepts</strong> true|false <strong>Defaults:</strong> false<br />\n      Similar to <code>display.keepOpen</code>, if true the picker won't close during any event where that would\n      normally\n      occur. This is useful when trying to debug rules or css changes. Note you can also use <code>window.debug =\n      true</code> in the dev tools console. Using the window object is useful for debugging deployed code without\n      requiring a configuration change.\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='allowInputToggle'>allowInputToggle<a class='anchor-link' aria-label='Anchor' href='#allowInputToggle'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>\n    <p>\n      <a href='/6/repl.html#code/N4IgVgzgwg9gdgMwJYHMDycA2BPEAuAFwCcBXAUwBpwJ8QBDTTGAdwEk4AHEggFRhRSYyeAATFyIKgAsCAW0y1JIGfIByMAmVoAeAMYwAJmQB8DJm07c+AodoD0+o8ZGsEY0pTFSyIjkl0A1mREIsxIjCIQUiwi8GJkAB4EAEYwCSIIMLokEAB0IAC+QA' title='View On REPL'><i class=\"fa-solid fa-microscope\"></i></a>\n\n      <strong>Accepts</strong> true|false <strong>Defaults:</strong> false<br />\n      If true, the picker will show on textbox focus.\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='viewDate'>viewDate<a class='anchor-link' aria-label='Anchor' href='#viewDate'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a>\n    </h2>\n    <p>\n      <strong>Accepts:</strong> string | Date | DateTime <strong>Defaults:</strong> now<br />\n      Set the view date of the picker. Setting this will not change the selected date(s).\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='multipleDates'>multipleDates<a class='anchor-link' aria-label='Anchor' href='#multipleDates'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>\n    <p>\n      <strong>Accepts</strong> true|false <strong>Defaults:</strong> false<br />\n      Allows multiple dates to be selected.\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='multipleDatesSeparator'>multipleDatesSeparator<a class='anchor-link' aria-label='Anchor'\n                                                             href='#multipleDatesSeparator'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a>\n    </h2>\n    <p>\n      <strong>Accepts:</strong> string <strong>Defaults:</strong> <code>;</code><br />\n      When <code>multipleDates</code> is enabled, this value wil be used to separate the selected dates. E.g. <code>08/29/2021,\n      12:00 AM; 08/30/2021, 12:00 AM; 08/23/2021, 12:00 AM</code>\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='promptTimeOnDateChange'>promptTimeOnDateChange<a class='anchor-link' aria-label='Anchor'\n                                                             href='#promptTimeOnDateChange'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a>\n    </h2>\n    <p>\n      <strong>Accepts</strong> true|false <strong>Defaults:</strong> false<br />\n      If enabled and any of the time components are enabled, when a user selects a date the picker will automatically\n      display the clock view after <code>promptTimeOnDateChangeTransitionDelay</code>.\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='promptTimeOnDateChangeTransitionDelay'>promptTimeOnDateChangeTransitionDelay\n      <a class='anchor-link' aria-label='Anchor' href='#promptTimeOnDateChangeTransitionDelay'>\n        <i class='fa-solid fa-anchor' aria-hidden='true'></i>\n      </a>\n    </h2>\n    <p>\n      <strong>Accepts</strong> number <strong>Defaults:</strong> 200<br />\n      Used with <code>promptTimeOnDateChange</code>. The number of milliseconds before the picker will display the\n      clock\n      view.\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='meta'>meta\n      <a class='anchor-link' aria-label='Anchor' href='#meta'>\n        <i class='fa-solid fa-anchor' aria-hidden='true'></i>\n      </a>\n    </h2>\n    <p>\n      <strong>Accepts</strong> object <strong>Defaults:</strong> {}<br />\n      This property is to provide developers a place to store extra information about the picker. You can use this to\n      store database format strings for instance. There are no rules on what you add to this object and the picker\n      will not reference it.\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='container'>container\n      <a class='anchor-link' aria-label='Anchor' href='#container'>\n        <i class='fa-solid fa-anchor' aria-hidden='true'></i>\n      </a>\n    </h2>\n    <p>\n      <strong>Accepts</strong> <code>HTMLElement</code> <strong>Defaults:</strong> undefined<br />\n      Change the target container to use for the widget instead of <code>body</code> (In case of application using\n      shadow DOM for example).\n    </p>\n  </div>\n\n  <div id='subToc' class='d-none'>\n    <nav id='TableOfContents'>\n      <ul>\n        <li><a href='#content'>Overview</a></li>\n        <li><a href='#defaults'>Defaults</a></li>\n        <li><a href='#stepping'>Stepping</a></li>\n        <li><a href='#useCurrent'>Use Current</a></li>\n        <li><a href='#defaultDate'>Default Date</a></li>\n        <li><a href='#keepInvalid'>Keep Invalid</a></li>\n        <li><a href='#debug'>Debug</a></li>\n        <li><a href='#allowInputToggle'>Allow Input Toggle</a></li>\n        <li><a href='#viewDate'>View Date</a></li>\n        <li><a href='#multipleDates'>Multiple Dates</a></li>\n        <li><a href='#multipleDatesSeparator'>Multiple Dates Separator</a></li>\n        <li><a href='#promptTimeOnDateChange'>Prompt Time On Date Change</a></li>\n        <li><a href='#promptTimeOnDateChangeTransitionDelay'>Prompt Time On Date Change Delay</a></li>\n        <li><a href='#meta'>Meta</a></li>\n        <li><a href='#container'>Container</a></li>\n      </ul>\n    </nav>\n  </div>\n\n</div>\n\n<div id=\"page-meta\">\n  <div id=\"title\">Options</div>\n  <div id=\"post-date\">07/08/2021</div>\n  <div id=\"update-date\">07/08/2021</div>\n  <div id=\"excerpt\">How to use Tempus Dominus datetime picker</div>\n  <div id=\"tags\">datepicker, javascript, open source, tempus dominus, eonasdan</div>\n</div>\n"
  },
  {
    "path": "src/docs/partials/options/keyboard-navigation.html",
    "content": "<div id=\"page-body\">\n  <p id='overview'>\n    Thanks to\n    <a href=\"www.dimagi.com\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">Dimagi</a> for sponsoring this feature.\n\n    Keyboard navigation is supported for the date picker dialog. It can be toggled with <code>display.keyboardNavigation</code>. The default is <code>true</code>.\n\n    I tried to adhere to the\n    <a href=\"https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">aria standards</a> as much as possible for date time pickers.\n  </p>\n\n  <div class=\"row\">\n    <section>\n      <section>\n        <h3 id=\"kbd_label_2\">Toggle Date Picker Dialog Button</h3>\n        <div class=\"table-wrap\">\n          <table aria-labelledby=\"kbd_label_2 kbd_label\" class=\"table\">\n            <thead>\n            <tr>\n              <th>Key</th>\n              <th>Function</th>\n            </tr>\n            </thead>\n            <tbody>\n            <tr data-test-id=\"button-space-return\">\n              <th><kbd>Space</kbd>,<br /><kbd>Enter</kbd></th>\n              <td>\n                <ul>\n                  <li>Open the date picker dialog.</li>\n                  <li>\n                    Move focus to selected date, i.e., the date displayed in\n                    the date input text field. If no date has been selected,\n                    places focus on the current date.\n                  </li>\n                </ul>\n              </td>\n            </tr>\n            </tbody>\n          </table>\n        </div>\n      </section>\n\n      <section>\n        <h3 id=\"kbd_label_3\">Date Picker Dialog</h3>\n        <div class=\"table-wrap\">\n          <table\n            aria-labelledby=\"kbd_label_3 kbd_label\"\n            class=\"table table-striped\"\n          >\n            <thead>\n            <tr>\n              <th>Key</th>\n              <th>Function</th>\n            </tr>\n            </thead>\n            <tbody>\n            <tr data-test-id=\"dialog-esc\">\n              <th><kbd>ESC</kbd></th>\n              <td>\n                Closes the dialog and returns focus to the \"Choose Date\"\n                button.\n              </td>\n            </tr>\n            <tr data-test-id=\"dialog-tab\">\n              <th><kbd>Tab</kbd></th>\n              <td>\n                <ul>\n                  <li>\n                    Moves focus to next element in the dialog\n                    <kbd>Tab</kbd> sequence.\n                  </li>\n                  <li>\n                    Note that, as specified in the Grid Pattern, only one\n                    button in the calendar grid is in the\n                    <kbd>Tab</kbd> sequence.\n                  </li>\n                  <li>\n                    If focus is on the last button, moves focus to the first\n                    button.\n                  </li>\n                </ul>\n              </td>\n            </tr>\n            <tr data-test-id=\"dialog-shift-tab\">\n              <th><kbd>Shift</kbd> + <kbd>Tab</kbd></th>\n              <td>\n                <ul>\n                  <li>\n                    Moves focus to previous element in the dialog\n                    <kbd>Tab</kbd> sequence.\n                  </li>\n                  <li>\n                    Note that, as specified in the Grid Pattern, only one\n                    button in the calendar grid is in the\n                    <kbd>Tab</kbd> sequence.\n                  </li>\n                  <li>\n                    If focus is on the first button, moves focus to the last\n                    button.\n                  </li>\n                </ul>\n              </td>\n            </tr>\n            </tbody>\n          </table>\n        </div>\n      </section>\n\n      <section>\n        <h3 id=\"kbd_label_4\">Date Picker Dialog: Month/Year Buttons</h3>\n        <div class=\"table-wrap\">\n          <table\n            aria-labelledby=\"kbd_label_4 kbd_label\"\n            class=\"table table-striped\"\n          >\n            <thead>\n            <tr>\n              <th>Key</th>\n              <th>Function</th>\n            </tr>\n            </thead>\n            <tbody>\n            <tr data-test-id=\"month-year-button-space-return\">\n              <th>Arrow keys</th>\n              <td>\n                On the month, year, decade view, using the arrow keys should\n                navigate around the grid.\n              </td>\n            </tr>\n            </tbody>\n          </table>\n        </div>\n      </section>\n\n      <section>\n        <h3 id=\"kbd_label_5\">Date Picker Dialog: Date Grid</h3>\n        <div class=\"table-wrap\">\n          <table\n            aria-labelledby=\"kbd_label_5 kbd_label\"\n            class=\"table table-striped\"\n          >\n            <thead>\n            <tr>\n              <th>Key</th>\n              <th>Function</th>\n            </tr>\n            </thead>\n            <tbody>\n            <tr data-test-id=\"grid-space-return\">\n              <th><kbd>Space</kbd>,<br /><kbd>Enter</kbd></th>\n              <td>\n                <ul>\n                  <li>\n                    Select the date, close the dialog, and move focus to the\n                    \"Choose Date\" button.\n                  </li>\n                  <li>\n                    Update the value of the \"Date\" input with the selected\n                    date.\n                  </li>\n                  <li>\n                    Update the accessible name of the \"Choose Date\" button to\n                    include the selected date.\n                  </li>\n                </ul>\n              </td>\n            </tr>\n            <tr data-test-id=\"grid-up-arrow\">\n              <th><kbd>Up Arrow</kbd></th>\n              <td>Moves focus to the same day of the previous week.</td>\n            </tr>\n            <tr data-test-id=\"grid-down-arrow\">\n              <th><kbd>Down Arrow</kbd></th>\n              <td>Moves focus to the same day of the next week.</td>\n            </tr>\n            <tr data-test-id=\"grid-right-arrow\">\n              <th><kbd>Right Arrow</kbd></th>\n              <td>Moves focus to the next day.</td>\n            </tr>\n            <tr data-test-id=\"grid-left-arrow\">\n              <th><kbd>Left Arrow</kbd></th>\n              <td>Moves focus to the previous day.</td>\n            </tr>\n            <tr data-test-id=\"grid-home\">\n              <th><kbd>Home</kbd></th>\n              <td>\n                Moves focus to the first day (e.g Sunday) of the current week.\n              </td>\n            </tr>\n            <tr data-test-id=\"grid-end\">\n              <th><kbd>End</kbd></th>\n              <td>\n                Moves focus to the last day (e.g. Saturday) of the current\n                week.\n              </td>\n            </tr>\n            <tr data-test-id=\"grid-pageup\">\n              <th><kbd>Page Up</kbd></th>\n              <td>\n                <ul>\n                  <li>Changes the grid of dates to the previous month.</li>\n                  <li>\n                    Moves focus to the day of the month that has the same\n                    number. If that day does not exist, moves focus to the\n                    last day of the month.\n                  </li>\n                </ul>\n              </td>\n            </tr>\n            <tr data-test-id=\"grid-shift-pageup\">\n              <th><kbd>Shift</kbd> + <kbd>Page Up</kbd></th>\n              <td>\n                <ul>\n                  <li>\n                    Changes the grid of dates to the same month in the\n                    previous year.\n                  </li>\n                  <li>\n                    Moves focus to the day of the month that has the same\n                    number. If that day does not exist, moves focus to the\n                    last day of the month.\n                  </li>\n                </ul>\n              </td>\n            </tr>\n            <tr data-test-id=\"grid-pagedown\">\n              <th><kbd>Page Down</kbd></th>\n              <td>\n                <ul>\n                  <li>Changes the grid of dates to the next month.</li>\n                  <li>\n                    Moves focus to the day of the month that has the same\n                    number. If that day does not exist, moves focus to the\n                    last day of the month.\n                  </li>\n                </ul>\n              </td>\n            </tr>\n            <tr data-test-id=\"grid-shift-pagedown\">\n              <th><kbd>Shift</kbd> + <kbd>Page Down</kbd></th>\n              <td>\n                <ul>\n                  <li>\n                    Changes the grid of dates to the same month in the next\n                    year.\n                  </li>\n                  <li>\n                    Moves focus to the day of the month that has the same\n                    number. If that day does not exist, moves focus to the\n                    last day of the month.\n                  </li>\n                </ul>\n              </td>\n            </tr>\n            </tbody>\n          </table>\n        </div>\n      </section>\n    </section>\n    <section>\n      <h3 id=\"kbd_label_6\">Clock view</h3>\n      <div class=\"table-wrap\">\n        <table aria-labelledby=\"kbd_label_2 kbd_label\" class=\"table\">\n          <thead>\n          <tr>\n            <th>View</th>\n            <th>Function</th>\n          </tr>\n          </thead>\n          <tbody>\n          <tr>\n            <th>Clock</th>\n            <td>\n              Tab moves the focused element. Space/Enter will make a selection\n              such as incrementing hours or minutes.\n            </td>\n          </tr>\n          <tr>\n            <th>Hour/Minute/Seconds</th>\n            <td>\n              Arrow keys will move around the grid. Space/Enter will make a\n              selection.\n            </td>\n          </tr>\n          </tbody>\n        </table>\n      </div>\n    </section>\n  </div>\n</div>\n\n<div id=\"page-meta\">\n  <div id=\"title\">Keyboard Navigation</div>\n  <div id=\"post-date\">02/26/2025</div>\n  <div id=\"update-date\">02/26/2025</div>\n  <div id=\"excerpt\">Keyboard navigation is supported for the date picker dialog. It can be toggled with display.keyboardNavigation. The default is true.</div>\n  <div id=\"tags\">datepicker, javascript, open source, tempus dominus, eonasdan</div>\n</div>\n"
  },
  {
    "path": "src/docs/partials/options/localization.html",
    "content": "<div id=\"page-body\">\n  <div class='row' id='overview'>\n    <div class='col'>\n      <p>\n        Most of the localization options are for title tooltips over icons.\n      </p>\n      <p>\n        You can provide localization options to override the tooltips as well as the day/month display.\n      </p>\n      <p>\n        You could also set this globally via <code>tempusDominus.DefaultOptions.localization = { ...\n        }</code> or by\n        creating a variable e.g. <code>const ru = { today:'Перейти сегодня' ... };</code> then provide\n        the options\n        as\n      </p>\n      <pre>\n<code class='language-javascript'>new tempusDominus.TempusDominus(document.getElementById('datetimepicker1'), {\n   localization: ru\n }</code>\n     </pre>\n    </div>\n  </div>\n\n  <hr />\n\n  <pre id='defaults'>\n<code class='language-js'>new tempusDominus.TempusDominus(document.getElementById('datetimepicker1'),\n  {\n    localization: {\n      today: 'Go to today',\n      clear: 'Clear selection',\n      close: 'Close the picker',\n      selectMonth: 'Select Month',\n      previousMonth: 'Previous Month',\n      nextMonth: 'Next Month',\n      selectYear: 'Select Year',\n      previousYear: 'Previous Year',\n      nextYear: 'Next Year',\n      selectDecade: 'Select Decade',\n      previousDecade: 'Previous Decade',\n      nextDecade: 'Next Decade',\n      previousCentury: 'Previous Century',\n      nextCentury: 'Next Century',\n      pickHour: 'Pick Hour',\n      incrementHour: 'Increment Hour',\n      decrementHour: 'Decrement Hour',\n      pickMinute: 'Pick Minute',\n      incrementMinute: 'Increment Minute',\n      decrementMinute: 'Decrement Minute',\n      pickSecond: 'Pick Second',\n      incrementSecond: 'Increment Second',\n      decrementSecond: 'Decrement Second',\n      toggleMeridiem: 'Toggle Meridiem',\n      selectTime: 'Select Time',\n      selectDate: 'Select Date',\n      dayViewHeaderFormat: { month: 'long', year: '2-digit' },\n      locale: 'default',\n      startOfTheWeek: 0,\n      hourCycle: undefined,\n      dateFormats: {\n        LTS: 'h:mm:ss T',\n        LT: 'h:mm T',\n        L: 'MM/dd/yyyy',\n        LL: 'MMMM d, yyyy',\n        LLL: 'MMMM d, yyyy h:mm T',\n        LLLL: 'dddd, MMMM d, yyyy h:mm T'\n      },\n      ordinal: (n) => n,\n      format: 'L',\n      toggleAriaLabel: 'Change date',\n    }\n  }\n)</code>\n  </pre>\n\n  <div class='row'>\n    <h2 id='today'>today<a class='anchor-link' aria-label='Anchor'\n                           href='#today'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a>\n    </h2>\n    <p>\n      <strong>Defaults:</strong> Go to today<br />\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='clear'>clear<a class='anchor-link' aria-label='Anchor'\n                           href='#clear'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a>\n    </h2>\n    <p>\n      <strong>Defaults:</strong> Clear selection<br />\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='close'>close<a class='anchor-link' aria-label='Anchor'\n                           href='#close'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a>\n    </h2>\n    <p>\n      <strong>Defaults:</strong> Close the picker<br />\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='selectMonth'>selectMonth<a class='anchor-link' aria-label='Anchor'\n                                       href='#selectMonth'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>\n    <p>\n      <strong>Defaults:</strong> Select Month<br />\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='previousMonth'>previousMonth<a class='anchor-link' aria-label='Anchor'\n                                           href='#previousMonth'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>\n    <p>\n      <strong>Defaults:</strong> Previous Month<br />\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='nextMonth'>nextMonth<a class='anchor-link' aria-label='Anchor'\n                                   href='#nextMonth'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>\n    <p>\n      <strong>Defaults:</strong> Next Month<br />\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='selectYear'>selectYear<a class='anchor-link' aria-label='Anchor'\n                                     href='#selectYear'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>\n    <p>\n      <strong>Defaults:</strong> Select Year<br />\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='previousYear'>previousYear<a class='anchor-link' aria-label='Anchor'\n                                         href='#previousYear'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>\n    <p>\n      <strong>Defaults:</strong> Previous Year<br />\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='nextYear'>nextYear<a class='anchor-link' aria-label='Anchor'\n                                 href='#nextYear'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>\n    <p>\n      <strong>Defaults:</strong> Next Year<br />\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='selectDecade'>selectDecade<a class='anchor-link' aria-label='Anchor'\n                                         href='#selectDecade'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>\n    <p>\n      <strong>Defaults:</strong> Select Decade<br />\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='previousDecade'>previousDecade<a class='anchor-link' aria-label='Anchor'\n                                             href='#previousDecade'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>\n    <p>\n      <strong>Defaults:</strong> Previous Decade<br />\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='nextDecade'>nextDecade<a class='anchor-link' aria-label='Anchor'\n                                     href='#nextDecade'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>\n    <p>\n      <strong>Defaults:</strong> Next Decade<br />\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='previousCentury'>previousCentury<a class='anchor-link' aria-label='Anchor'\n                                               href='#previousCentury'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>\n    <p>\n      <strong>Defaults:</strong> Previous Century<br />\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='nextCentury'>nextCentury<a class='anchor-link' aria-label='Anchor'\n                                       href='#nextCentury'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>\n    <p>\n      <strong>Defaults:</strong> Next Century<br />\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='pickHour'>pickHour<a class='anchor-link' aria-label='Anchor'\n                                 href='#pickHour'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>\n    <p>\n      <strong>Defaults:</strong> Pick Hour<br />\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='incrementHour'>incrementHour<a class='anchor-link' aria-label='Anchor'\n                                           href='#incrementHour'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>\n    <p>\n      <strong>Defaults:</strong> Increment Hour<br />\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='decrementHour'>decrementHour<a class='anchor-link' aria-label='Anchor'\n                                           href='#decrementHour'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>\n    <p>\n      <strong>Defaults:</strong> Decrement Hour<br />\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='pickMinute'>pickMinute<a class='anchor-link' aria-label='Anchor'\n                                     href='#pickMinute'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>\n    <p>\n      <strong>Defaults:</strong> Pick Minute<br />\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='incrementMinute'>incrementMinute<a class='anchor-link' aria-label='Anchor'\n                                               href='#incrementMinute'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>\n    <p>\n      <strong>Defaults:</strong> Increment Minute<br />\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='decrementMinute'>decrementMinute<a class='anchor-link' aria-label='Anchor'\n                                               href='#decrementMinute'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>\n    <p>\n      <strong>Defaults:</strong> Decrement Minute<br />\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='pickSecond'>pickSecond<a class='anchor-link' aria-label='Anchor'\n                                     href='#pickSecond'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>\n    <p>\n      <strong>Defaults:</strong> Pick Second<br />\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='incrementSecond'>incrementSecond<a class='anchor-link' aria-label='Anchor'\n                                               href='#incrementSecond'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>\n    <p>\n      <strong>Defaults:</strong> Increment Second<br />\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='decrementSecond'>decrementSecond<a class='anchor-link' aria-label='Anchor'\n                                               href='#decrementSecond'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>\n    <p>\n      <strong>Defaults:</strong> Decrement Second<br />\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='toggleMeridiem'>toggleMeridiem<a class='anchor-link' aria-label='Anchor'\n                                             href='#toggleMeridiem'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>\n    <p>\n      <strong>Defaults:</strong> Toggle Period<br />\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='selectTime'>selectTime<a class='anchor-link' aria-label='Anchor'\n                                     href='#selectTime'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>\n    <p>\n      <strong>Defaults:</strong> Select Time<br />\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='selectDate'>selectDate<a class='anchor-link' aria-label='Anchor'\n                                     href='#selectDate'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>\n    <p>\n      <strong>Defaults:</strong> Select Date<br />\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='dayViewHeaderFormat'>dayViewHeaderFormat<a class='anchor-link'\n                                                       aria-label='Anchor'\n                                                       href='#dayViewHeaderFormat'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a>\n    </h2>\n    <p>\n      <strong>Accepts:</strong> DateTimeFormatOptions <strong>Defaults:</strong>\n      <code>{ month: 'long', year: '2-digit' }</code><br />\n      This should be an appropriate value from the Intl.DateFormat options.\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='locale'>locale<a class='anchor-link' aria-label='Anchor'\n                             href='#locale'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a>\n    </h2>\n    <p>\n      <strong>Defaults:</strong> default<br />\n      This should be a BCP 47 language tag or a value supported by Intl.\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='startOfTheWeek'>startOfTheWeek<a class='anchor-link' aria-label='Anchor'\n                                             href='#startOfTheWeek'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a>\n    </h2>\n    <p>\n      <strong>Accepts:</strong> 0-6 <strong>Defaults:</strong> 0<br />\n      Changes the start of the week to the provided index. Intl/Date does not provide apis to get the\n      locale's start of the week. 0 = Sunday, 6 = Saturday. If you want the calendar view to start on Monday,\n      set this option to 1.\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='maxWeekdayLength'>maxWeekdayLength<a class='anchor-link' aria-label='Anchor'\n                                             href='#maxWeekdayLength'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a>\n    </h2>\n    <p>\n      <strong>Accepts:</strong> number <strong>Defaults:</strong> 0<br />\n      If provided the weekday string will be truncated to this length. This is useful when the Intl values are too long.\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='hourCycle'>hourCycle<a class='anchor-link' aria-label='Anchor'\n                                   href='#hourCycle'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a>\n    </h2>\n    <p>\n      <strong>Accepts:</strong> 'h11' | 'h12' | 'h23' | 'h24' <strong>Defaults:</strong> undefined<br />\n      Changes how the hours are displayed. If left undefined, the picker will attempt to guess.\n    </p>\n    <p id='hourCycle-description'>\n      Here is how the different options affect the start and end of the day.\n    </p>\n    <table class='table table-striped' aria-describedby='hourCycle-description'>\n      <thead>\n      <tr>\n        <th>Hour Cycle</th>\n        <th>Midnight</th>\n        <th>Night</th>\n        <th>Notes</th>\n      </tr>\n      </thead>\n      <tr>\n        <td>h11</td>\n        <td>00 AM</td>\n        <td>11 PM</td>\n        <td>If your locale uses this please let me know.</td>\n      </tr>\n      <tr>\n        <td>h12</td>\n        <td>12 AM</td>\n        <td>11 PM</td>\n        <td></td>\n      </tr>\n      <tr>\n        <td>h23</td>\n        <td>00</td>\n        <td>23</td>\n        <td></td>\n      </tr>\n      <tr>\n        <td>h24</td>\n        <td>01</td>\n        <td>24</td>\n        <td>If your locale uses this please let me know.</td>\n      </tr>\n    </table>\n  </div>\n\n  <div class='row'>\n    <h2 id='dateFormats'>dateFormats<a class='anchor-link' aria-label='Anchor'\n                                       href='#dateFormats'>\n      <i class='fa-solid fa-anchor' aria-hidden='true'></i></a>\n    </h2>\n    <p>\n      These options describe shorthand format strings.\n    </p>\n    <div class='row'>\n      <div class='col offset-1 border-start'>\n        <div>\n          <h4 id='dateFormatsLTS'>LTS<a class='anchor-link' aria-label='Anchor'\n                                        href='#dateFormatsLTS'><i\n            class='fa-solid fa-anchor' aria-hidden='true'></i></a></h4>\n          <p>\n            Long form time format.\n          </p>\n        </div>\n        <div>\n          <h4 id='dateFormatsLT'>LT<a class='anchor-link' aria-label='Anchor'\n                                      href='#dateFormatsLT'><i\n            class='fa-solid fa-anchor' aria-hidden='true'></i></a></h4>\n          <p>\n            Short time format.\n          </p>\n        </div>\n        <div>\n          <h4 id='dateFormatsL'>L<a class='anchor-link' aria-label='Anchor'\n                                    href='#dateFormatsL'><i\n            class='fa-solid fa-anchor' aria-hidden='true'></i></a></h4>\n          <p>\n            Standard date format.\n          </p>\n        </div>\n        <div>\n          <h4 id='dateFormatsLL'>LL<a class='anchor-link' aria-label='Anchor'\n                                      href='#dateFormatsLL'><i\n            class='fa-solid fa-anchor' aria-hidden='true'></i></a></h4>\n          <p>\n            Long form date format. US default is July 4, 2022.\n          </p>\n        </div>\n        <div>\n          <h4 id='dateFormatsLLL'>LLL<a class='anchor-link' aria-label='Anchor'\n                                        href='#dateFormatsLLL'><i\n            class='fa-solid fa-anchor' aria-hidden='true'></i></a></h4>\n          <p>\n            Long form date/time format. US default is July 4, 2022 9:30 AM.\n          </p>\n        </div>\n        <div>\n          <h4 id='dateFormatsLLLL'>LLLL<a class='anchor-link' aria-label='Anchor'\n                                          href='#dateFormatsLLLL'><i\n            class='fa-solid fa-anchor' aria-hidden='true'></i></a></h4>\n          <p>\n            Long form date/time format with weekday. US default is Monday, July 4, 2022 9:30 AM.\n          </p>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class='row'>\n    <h2 id='ordinal'>ordinal<a class='anchor-link' aria-label='Anchor'\n                               href='#ordinal'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a>\n    </h2>\n    <p>\n      Function to convert cardinal numbers to ordinal numbers, e.g. 3 -&gt; third.\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='format'>format<a class='anchor-link' aria-label='Anchor'\n                             href='#format'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a>\n    </h2>\n    <p>\n      Default tokenized format to use. This can be \"L\" or \"dd/MM/yyyy\".\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='toggleAriaLabel'>toggleAriaLabel<a class='anchor-link' aria-label='Anchor'\n                             href='#toggleAriaLabel'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a>\n    </h2>\n    <p>\n      The aria-label to use for the toggle button. Defaults to \"Change date\", unless one more or dates is selected, in which case it will be \"Change date, {dates}\".\n    </p>\n  </div>\n\n  <div id='subToc' class='d-none'>\n    <nav id='TableOfContents'>\n      <ul>\n        <li><a href='#content'>Overview</a></li>\n        <li><a href='#defaults'>Defaults</a></li>\n        <li><a href='#today'>Today</a></li>\n        <li><a href='#clear'>Clear</a></li>\n        <li><a href='#close'>Close</a></li>\n        <li><a href='#selectMonth'>Select Month</a></li>\n        <li><a href='#previousMonth'>Previous Month</a></li>\n        <li><a href='#nextMonth'>Next Month</a></li>\n        <li><a href='#selectYear'>Select Year</a></li>\n        <li><a href='#previousYear'>Previous Year</a></li>\n        <li><a href='#nextYear'>Next Year</a></li>\n        <li><a href='#selectDecade'>Select Decade</a></li>\n        <li><a href='#previousDecade'>Previous Decade</a></li>\n        <li><a href='#nextDecade'>Next Decade</a></li>\n        <li><a href='#previousCentury'>Previous Century</a></li>\n        <li><a href='#nextCentury'>Next Century</a></li>\n        <li><a href='#pickHour'>Pick Hour</a></li>\n        <li><a href='#incrementHour'>Increment Hour</a></li>\n        <li><a href='#decrementHour'>Decrement Hour</a></li>\n        <li><a href='#pickMinute'>Pick Minute</a></li>\n        <li><a href='#incrementMinute'>Increment Minute</a></li>\n        <li><a href='#decrementMinute'>Decrement Minute</a></li>\n        <li><a href='#pickSecond'>Pick Second</a></li>\n        <li><a href='#incrementSecond'>Increment Second</a></li>\n        <li><a href='#decrementSecond'>Decrement Second</a></li>\n        <li><a href='#toggleMeridiem'>Toggle Meridiem</a></li>\n        <li><a href='#selectTime'>Select Time</a></li>\n        <li><a href='#selectDate'>Select Date</a></li>\n        <li><a href='#dayViewHeaderFormat'>Day View Header Format</a></li>\n        <li><a href='#locale'>Locale</a></li>\n        <li><a href='#startOfTheWeek'>Start Of The Week</a></li>\n        <li><a href='#maxWeekdayLength'>Max Weekday Length</a></li>\n        <li><a href='#dateFormats'>Date Formats</a>\n          <ul>\n            <li><a href='#dateFormatsLTS'>LTS</a></li>\n            <li><a href='#dateFormatsLT'>LT</a></li>\n            <li><a href='#dateFormatsL'>L</a></li>\n            <li><a href='#dateFormatsLL'>LL</a></li>\n            <li><a href='#dateFormatsLLL'>LLL</a></li>\n            <li><a href='#dateFormatsLLLL'>LLLL</a></li>\n          </ul>\n        </li>\n        <li><a href='#ordinal'>Ordinal</a></li>\n        <li><a href='#format'>Format</a></li>\n        <li><a href='#toggleAriaLabel'>Toggle Aria Label</a></li>\n      </ul>\n    </nav>\n  </div>\n\n</div>\n\n<div id=\"page-meta\">\n  <div id=\"title\">Localization Options</div>\n  <div id=\"post-date\">08/11/2022</div>\n  <div id=\"update-date\">02/26/2025</div>\n  <div id=\"excerpt\">How to use the restriction options.</div>\n  <div id=\"tags\">datepicker, javascript, open source, tempus dominus, eonasdan</div>\n</div>\n"
  },
  {
    "path": "src/docs/partials/options/restrictions.html",
    "content": "<div id=\"page-body\">\n  <p id='overview'>\n    Restrictions allow you to prevent users from selected dates or times based on a set of rules.\n  </p>\n  <pre id='defaults'>\n<code class='language-js'>new tempusDominus.TempusDominus(document.getElementById('datetimepicker1'),\n  {\n    restrictions: {\n      minDate: undefined,\n      maxDate: undefined,\n      disabledDates: [],\n      enabledDates: [],\n      daysOfWeekDisabled: [],\n      disabledTimeIntervals: [],\n      disabledHours: [],\n      enabledHours: []\n    }\n  }\n)</code>\n  </pre>\n\n  <div class='row'>\n    <h2 id='minDate'>minDate\n      <a class='anchor-link' aria-label='Anchor' href='#minDate'><i\n        class='fa-solid fa-anchor' aria-hidden='true'></i></a>\n    </h2>\n    <p>\n      <strong>Accepts:</strong> string | Date | DateTime <strong>Defaults:</strong> undefined<br />\n      Prevents the user from selecting a date/time before this value. Set to\n      <code>undefined</code> to remove\n      the\n      restriction.\n    </p>\n    <p>\n      Throws <a href='../namespace/errors.html#conflictingConfiguration'>conflictingConfiguration</a>\n      if value is\n      after maxDate.\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='maxDate'>maxDate <a class='anchor-link' aria-label='Anchor'\n                                href='#maxDate'><i\n      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>\n    <p>\n      <strong>Accepts:</strong> string | Date | DateTime <strong>Defaults:</strong> undefined<br />\n      Prevents the user from selecting a date/time after this value. Set to <code>undefined</code>\n      to remove the\n      restriction.\n    </p>\n    <p>\n      Throws <a href='../namespace/errors.html#conflictingConfiguration'>conflictingConfiguration</a>\n      if value is\n      after maxDate.\n    </p>\n  </div>\n\n  <div class='row'>\n    <h2 id='enabledDates'>enabledDates/disabledDates\n      <a class='anchor-link' aria-label='Anchor' href='#enabledDates'><i\n        class='fa-solid fa-anchor' aria-hidden='true'></i></a>\n    </h2>\n    <div>\n      <strong>Accepts:</strong> array of string | Date | DateTime <strong>Defaults:</strong> undefined<br />\n      <div class='alert alert-warning'>\n        Use one or the other, don't provide both enabledDates and disabledDates.\n      </div>\n    </div>\n    <div class='row'>\n      <div class='col offset-1 border-start'>\n        <h4>enabledDates</h4>\n        <p>\n          Allows the user to select only from the provided days. Setting this takes precedence\n          over\n          options.minDate,\n          options.maxDate configuration.\n        </p>\n        <h4>disabledDates</h4>\n        <p>\n          Disallows the user to select any of the provided days. Setting this takes precedence\n          over\n          options.minDate,\n          options.maxDate configuration.\n        </p>\n      </div>\n    </div>\n  </div>\n\n  <div class='row'>\n    <h2 id='enabledHours'>enabledHours/disabledHours\n      <a class='anchor-link' aria-label='Anchor' href='#enabledHours'><i\n        class='fa-solid fa-anchor' aria-hidden='true'></i></a>\n    </h2>\n    <div>\n      <strong>Accepts:</strong> array of number from 0-24 <strong>Defaults:</strong> undefined<br />\n      <div class='alert alert-warning'>\n        Use one or the other, don't provide both enabledHours and disabledHours.\n      </div>\n      <p>\n        Throws <a href='../namespace/errors.html#numbersOutOfRage'>numbersOutOfRage</a> any value is\n        not between 0-23\n      </p>\n    </div>\n    <div class='row'>\n      <div class='col offset-1 border-start'>\n        <h4>enabledHours</h4>\n        <p>\n          Allows the user to select only from the provided hours.\n        </p>\n        <h4>disabledHours</h4>\n        <p>\n          Disallows the user to select any of the provided hours.\n        </p>\n      </div>\n    </div>\n  </div>\n\n  <div class='row'>\n    <h2 id='disabledTimeIntervals'>disabledTimeIntervals\n      <a class='anchor-link' aria-label='Anchor' href='#disabledTimeIntervals'><i\n        class='fa-solid fa-anchor' aria-hidden='true'></i></a>\n    </h2>\n    <p>\n      <strong>Accepts:</strong> array of an object with from: DateTime, to: DateTime\n      <strong>Defaults:</strong>\n      undefined<br />\n      Disables time selection between the given DateTimes.\n    </p>\n\n    <pre>\n<code class='language-javascript'>const later = new tempusDominus.DateTime();\nlater.hours = 8;\nnew tempusDominus.TempusDominus(..., {\n  restrictions: {\n    disabledTimeIntervals: [\n      { from: new tempusDominus.DateTime().startOf('date'), to: later }\n    ]\n  }\n});</code>\n  </pre>\n  </div>\n\n  <div class='row'>\n    <h2 id='daysOfWeekDisabled'>daysOfWeekDisabled\n      <a class='anchor-link' aria-label='Anchor' href='#daysOfWeekDisabled'><i\n        class='fa-solid fa-anchor' aria-hidden='true'></i></a>\n    </h2>\n    <p>\n      <strong>Accepts:</strong> array of numbers from 0-6<br />\n      Disallow the user to select weekdays that exist in this array. This has lower priority over the\n      options.minDate, options.maxDate, options.disabledDates and options.enabledDates configuration\n      settings.\n    </p>\n    <p>\n      Throws <a href='../namespace/errors.html#numbersOutOfRage'>numbersOutOfRage</a> any value is not\n      between 0-6.\n    </p>\n  </div>\n\n  <div id='subToc' class='d-none'>\n    <nav id='TableOfContents'>\n      <ul>\n        <li><a href='#content'>Overview</a></li>\n        <li><a href='#defaults'>Defaults</a></li>\n        <li><a href='#minDate'>Min Date</a></li>\n        <li><a href='#maxDate'>Max Date</a></li>\n        <li><a href='#enabledDates'>Enabled/Disabled Dates</a></li>\n        <li><a href='#enabledHours'>Enabled/Disabled Hours</a></li>\n        <li><a href='#disabledTimeIntervals'>Disabled Time Intervals</a></li>\n        <li><a href='#daysOfWeekDisabled'>Days Of Week Disabled</a></li>\n      </ul>\n    </nav>\n  </div>\n\n</div>\n\n<div id=\"page-meta\">\n  <div id=\"title\">Restrictions Options</div>\n  <div id=\"post-date\">08/11/2022</div>\n  <div id=\"update-date\">08/11/2022</div>\n  <div id=\"excerpt\">How to use the restriction options.</div>\n  <div id=\"tags\">datepicker, javascript, open source, tempus dominus, eonasdan</div>\n</div>\n"
  },
  {
    "path": "src/docs/partials/options.html",
    "content": "<div id=\"page-body\">\n    <meta http-equiv=\"refresh\" content=\"0; URL=https://getdatepicker.com/6/options\">\n    <link rel=\"canonical\" href=\"https://getdatepicker.com/6/options\">\n\n    The options have been split up and moved to a different page.\n\n    Redirecting to <a href=\"https://getdatepicker.com/6/options\">https://getdatepicker.com/6/options</a>\n\n</div>\n\n<div id=\"page-meta\">\n    <div id=\"title\">Redirecting to Options</div>\n    <div id=\"post-date\">07/08/2021</div>\n    <div id=\"update-date\">08/13/2022</div>\n</div>\n"
  },
  {
    "path": "src/docs/partials/plugins/bi1.html",
    "content": "<div id=\"page-body\">\n  <div class='row'>\n    <p>\n      You can use this plugin to set the global default icons to Bootstrap Icons v1. This plugin requires Bootstrap Icons v1 resources to be loaded.\n    </p>\n  </div>\n\n  <div class='row'>\n    <div class='container'>\n      <div class='row'>\n        <div class='col-sm-6'>\n          <label for='datetimepicker1Input' class='form-label'>Simple picker</label>\n          <div\n            class='input-group'\n            id='datetimepicker1'\n            data-td-target-input='nearest'\n            data-td-target-toggle='nearest'\n          >\n            <input\n              id='datetimepicker1Input'\n              type='text'\n              class='form-control'\n              data-td-target='#datetimepicker1'\n            />\n            <span\n              class='input-group-text'\n              data-td-target='#datetimepicker1'\n              data-td-toggle='datetimepicker'\n            >\n               <i class='bi bi-calendar-fill'></i>\n             </span>\n          </div>\n        </div>\n      </div>\n    </div>\n    <script src='/6/js/plugins/bi-one.js'></script>\n    <script type='text/javascript'>\n      tempusDominus.extend(window.tempusDominus.plugins.bi_one.load);\n      const datetimepicker1 = new tempusDominus.TempusDominus(document.getElementById('datetimepicker1'));\n    </script>\n  </div>\n\n  <div class='row'>\n    <pre>\n<code class='language-js'>//example picker\nconst datetimepicker1 = new tempusDominus.TempusDominus(document.getElementById(&#39;datetimepicker1&#39;));\n\n//to set globally\ntempusDominus.extend(window.tempusDominus.plugins.bi_one.load);\n//or\nimport {load, biOneIcons} from '@eonasdan/tempus-dominus/dist/plugins/bi-one'\nextend(load);\n\n\n// otherwise to set icons to an individual picker\ndatetimepicker1.updateOptions({ display: { icons: window.tempusDominus.plugins.bi_one.biOneIcons }});\n//or\ndatetimepicker1.updateOptions({ display: { icons: biOneIcons }});</code>\n    </pre>\n  </div>\n\n  <div class='row'>\n    <h2>Boostrap Icons v1 Icons</h2>\n    <table class='table table-striped'>\n      <caption>Boostrap Icons</caption>\n      <tr>\n        <th>Option</th>\n        <th>Value</th>\n        <th></th>\n      </tr>\n      <tr>\n        <td>type</td>\n        <td>icons</td>\n        <td></td>\n      </tr>\n      <tr>\n        <td>time</td>\n        <td>bi bi-clock</td>\n        <td><i class='bi bi-clock' aria-hidden='true'></i></td>\n      </tr>\n      <tr>\n        <td>date</td>\n        <td>bi bi-calendar-week</td>\n        <td><i class='bi bi-calendar-week' aria-hidden='true'></i></td>\n      </tr>\n      <tr>\n        <td>up</td>\n        <td>bi bi-arrow-up</td>\n        <td><i class='bi bi-arrow-up' aria-hidden='true'></i></td>\n      </tr>\n      <tr>\n        <td>down</td>\n        <td>bi bi-arrow-down</td>\n        <td><i class='bi bi-arrow-down' aria-hidden='true'></i></td>\n      </tr>\n      <tr>\n        <td>previous</td>\n        <td>bi bi-chevron-left</td>\n        <td><i class='bi bi-chevron-left' aria-hidden='true'></i></td>\n      </tr>\n      <tr>\n        <td>next</td>\n        <td>bi bi-chevron-right</td>\n        <td><i class='bi bi-chevron-right' aria-hidden='true'></i></td>\n      </tr>\n      <tr>\n        <td>today</td>\n        <td>bi bi-calendar-check</td>\n        <td><i class='bi bi-calendar-check' aria-hidden='true'></i></td>\n      </tr>\n      <tr>\n        <td>clear</td>\n        <td>bi bi-trash</td>\n        <td><i class='bi bi-trash' aria-hidden='true'></i></td>\n      </tr>\n      <tr>\n        <td>close</td>\n        <td>bi bi-x</td>\n        <td><i class='bi bi-x' aria-hidden='true'></i></td>\n      </tr>\n    </table>\n  </div>\n\n  <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css\">\n</div>\n\n<div id=\"page-meta\">\n  <div id=\"title\">Plugins - Bootstrap Icons v1</div>\n  <div id=\"post-date\">03/15/2023</div>\n  <div id=\"update-date\">03/15/2023</div>\n  <div id=\"excerpt\">How to use Bootstrap Icons v1 plugin with Tempus Dominus.</div>\n  <div id=\"tags\">datepicker, javascript, open source, tempus dominus, eonasdan</div>\n</div>\n"
  },
  {
    "path": "src/docs/partials/plugins/customDateFormat.html",
    "content": "<div id=\"page-body\">\n  <div class='row'>\n    <div class='alert alert-info'>\n      <i class=\"fa-solid fa-exclamation\"></i> This is no longer a plugin. It's now included directly.\n    </div>\n    <p>\n      Use the boxes below to set a format string and the locale of the sample picker and click \"Change\" to update the\n      options.\n    </p>\n  </div>\n\n  <div class='row'>\n    <div class='container'>\n      <div class='row'>\n        <div class='col-6'>\n          <div class='mb-3'>\n            <label for='format' class='form-label'>Format</label>\n            <input\n              type='text'\n              class='form-control'\n              id='format'\n              value='dd/MM/yyyy HH:mm'\n            />\n          </div>\n        </div>\n        <div class='col-6'>\n          <div class='mb-3'>\n            <label for='locale' class='form-label'>Locale</label>\n            <input type='text' class='form-control' id='locale' value='pt-BR' />\n          </div>\n        </div>\n        <div class='col-6'>\n          <div class='mb-3'>\n            <button type='button' class='btn btn-primary' id='change'>\n              Change\n            </button>\n          </div>\n        </div>\n      </div>\n      <div class='row'>\n        <div class='col-sm-6'>\n          <label for='datetimepicker1Input' class='form-label'>Sample picker</label>\n          <div\n            class='input-group'\n            id='datetimepicker1'\n            data-td-target-input='nearest'\n            data-td-target-toggle='nearest'\n          >\n            <input\n              id='datetimepicker1Input'\n              type='text'\n              class='form-control'\n              data-td-target='#datetimepicker1'\n            />\n            <span\n              class='input-group-text'\n              data-td-target='#datetimepicker1'\n              data-td-toggle='datetimepicker'\n            >\n               <span class='fas fa-calendar'></span>\n             </span>\n          </div>\n        </div>\n      </div>\n    </div>\n    <script src='/6/js/plugins/customDateFormat.js'></script>\n    <script type='text/javascript'>\n      const datetimepicker1 = new tempusDominus.TempusDominus(document.getElementById('datetimepicker1'),\n        {\n          localization: {\n            locale: 'pt-BR',\n            format: 'dd/MM/yyyy HH:mm'\n          }\n        });\n\n      document.getElementById('change').addEventListener('click', () => {\n        datetimepicker1.updateOptions({\n          localization: {\n            locale: document.getElementById('locale').value,\n            format: document.getElementById('format').value\n          }\n        });\n        datetimepicker1.dates.setValue(new tempusDominus.DateTime());\n      });\n    </script>\n  </div>\n\n  <div class='row'>\n    <pre>\n<code class='language-js'>//example picker\nconst datetimepicker1 = new tempusDominus.TempusDominus(document.getElementById('datetimepicker'), {\n  localization: {\n    locale: 'pt-BR',\n    format: 'dd/MM/yyyy HH:mm',\n  }\n});\n</code>\n    </pre>\n  </div>\n\n  <div class='row'>\n    <h2>Format Tokens</h2>\n    <div class='col-12'>\n      <p id='token-description'>\n        The format supports the following tokens. Given 2022-07-04T15:13:29.474Z\n      </p>\n      <table class='table table-striped' aria-describedby='token-description'>\n        <thead>\n        <tr>\n          <th>Token</th>\n          <th>Description</th>\n          <th>Result</th>\n        </tr>\n        </thead>\n        <tbody>\n        <tr>\n          <td>yy</td>\n          <td>2 digit year</td>\n          <td>22</td>\n        </tr>\n        <tr>\n          <td>yyyy</td>\n          <td>4 digit year</td>\n          <td>2022</td>\n        </tr>\n        <tr>\n          <td>M</td>\n          <td>1-2 digit month, e.g. 1...12</td>\n          <td>7</td>\n        </tr>\n        <tr>\n          <td>MM</td>\n          <td>2 digit month</td>\n          <td>07</td>\n        </tr>\n        <tr>\n          <td>MMM</td>\n          <td>Short Month</td>\n          <td>Jul</td>\n        </tr>\n        <tr>\n          <td>MMMM</td>\n          <td>Full Month</td>\n          <td>July</td>\n        </tr>\n        <tr>\n          <td>d</td>\n          <td>1-2 digit day, e.g. 1...31</td>\n          <td>4</td>\n        </tr>\n        <tr>\n          <td>dd</td>\n          <td>2 digit day</td>\n          <td>04</td>\n        </tr>\n        <tr>\n          <td>ddd</td>\n          <td>Short Weekday</td>\n          <td>Mon</td>\n        </tr>\n        <tr>\n          <td>dddd</td>\n          <td>Full Weekday</td>\n          <td>Monday</td>\n        </tr>\n        <tr>\n          <td>H</td>\n          <td>1-2 digit hour (24 hour)</td>\n          <td>13</td>\n        </tr>\n        <tr>\n          <td>HH</td>\n          <td>2 digit hour (24 hour)</td>\n          <td>13</td>\n        </tr>\n        <tr>\n          <td>h</td>\n          <td>1-2 digit hour (12 hour)</td>\n          <td>1 (PM)</td>\n        </tr>\n        <tr>\n          <td>hh</td>\n          <td>2 digit hour (12 hour)</td>\n          <td>01 (PM)</td>\n        </tr>\n        <tr>\n          <td>m</td>\n          <td>1-2 digit minute, e.g. 0...59</td>\n          <td>29</td>\n        </tr>\n        <tr>\n          <td>mm</td>\n          <td>2 digit minute, e.g. 0...59</td>\n          <td>29</td>\n        </tr>\n        <tr>\n          <td>s</td>\n          <td>1-2 digit second, e.g. 0...59</td>\n          <td>47</td>\n        </tr>\n        <tr>\n          <td>ss</td>\n          <td>2 digit second, e.g. 0...59</td>\n          <td>47</td>\n        </tr>\n        <tr>\n          <td>T</td>\n          <td>Meridiem</td>\n          <td>PM</td>\n        </tr>\n        </tbody>\n      </table>\n    </div>\n  </div>\n</div>\n\n<div id=\"page-meta\">\n  <div id=\"title\">Custom Date Formats</div>\n  <div id=\"post-date\">01/19/2022</div>\n  <div id=\"update-date\">01/26/2023</div>\n  <div id=\"excerpt\">How to use custom date format plugin with Tempus Dominus.</div>\n  <div id=\"tags\">datepicker, javascript, open source, tempus dominus, eonasdan</div>\n</div>\n"
  },
  {
    "path": "src/docs/partials/plugins/fa5.html",
    "content": "<div id=\"page-body\">\n  <div class='row'>\n    <p>\n      You can use this plugin to set the global default icons to FA5. This plugin requires the FA5 resources to be\n      loaded.\n    </p>\n  </div>\n\n  <div class='row'>\n    <div class='container'>\n      <div class='row'>\n        <div class='col-sm-6'>\n          <label for='datetimepicker1Input' class='form-label'>Simple picker</label>\n          <div\n            class='input-group'\n            id='datetimepicker1'\n            data-td-target-input='nearest'\n            data-td-target-toggle='nearest'\n          >\n            <input\n              id='datetimepicker1Input'\n              type='text'\n              class='form-control'\n              data-td-target='#datetimepicker1'\n            />\n            <span\n              class='input-group-text'\n              data-td-target='#datetimepicker1'\n              data-td-toggle='datetimepicker'\n            >\n               <span class='fas fa-calendar'></span>\n             </span>\n          </div>\n        </div>\n      </div>\n    </div>\n    <script src='/6/js/plugins/fa-five.js'></script>\n    <script type='text/javascript'>\n      tempusDominus.extend(window.tempusDominus.plugins.fa_five.load);\n      const datetimepicker1 = new tempusDominus.TempusDominus(document.getElementById('datetimepicker1'));\n    </script>\n  </div>\n\n  <div class='row'>\n    <pre>\n<code class='language-js'>//example picker\nconst datetimepicker1 = new tempusDominus.TempusDominus(document.getElementById(&#39;datetimepicker1&#39;));\n\n//to set globally\ntempusDominus.extend(window.tempusDominus.plugins.fa_five.load);\n//or\nimport {load, faFiveIcons} from '@eonasdan/tempus-dominus/dist/plugins/fa-five'\nextend(load);\n\n// otherwise to set icons to an individual picker\ndatetimepicker1.updateOptions({ display: { icons: window.tempusDominus.plugins.fa_five.faFiveIcons }});\n//or\ndatetimepicker1.updateOptions({ display: { icons: faFiveIcons }});</code>\n    </pre>\n  </div>\n\n  <div class='row'>\n    <h2>FA 5 Icons</h2>\n    <table class='table table-striped'>\n      <caption>FA icons</caption>\n      <tr>\n        <th>Option</th>\n        <th>Value</th>\n        <th></th>\n      </tr>\n      <tr>\n        <td>type</td>\n        <td>icons</td>\n        <td></td>\n      </tr>\n      <tr>\n        <td>time</td>\n        <td>fas fa-clock</td>\n        <td><i class='fas fa-clock' aria-hidden='true'></i></td>\n      </tr>\n      <tr>\n        <td>date</td>\n        <td>fas fa-calendar</td>\n        <td><i class='fas fa-calendar' aria-hidden='true'></i></td>\n      </tr>\n      <tr>\n        <td>up</td>\n        <td>fas fa-arrow-up</td>\n        <td><i class='fas fa-arrow-up' aria-hidden='true'></i></td>\n      </tr>\n      <tr>\n        <td>down</td>\n        <td>fas fa-arrow-down</td>\n        <td><i class='fas fa-arrow-down' aria-hidden='true'></i></td>\n      </tr>\n      <tr>\n        <td>previous</td>\n        <td>fas fa-chevron-left</td>\n        <td><i class='fas fa-chevron-left' aria-hidden='true'></i></td>\n      </tr>\n      <tr>\n        <td>next</td>\n        <td>fas fa-chevron-right</td>\n        <td><i class='fas fa-chevron-right' aria-hidden='true'></i></td>\n      </tr>\n      <tr>\n        <td>today</td>\n        <td>fas fa-calendar-check</td>\n        <td><i class='fas fa-calendar-check' aria-hidden='true'></i></td>\n      </tr>\n      <tr>\n        <td>clear</td>\n        <td>fas fa-trash</td>\n        <td><i class='fas fa-trash' aria-hidden='true'></i></td>\n      </tr>\n      <tr>\n        <td>close</td>\n        <td>fas fa-xmark</td>\n        <td><i class='fas fa-xmark' aria-hidden='true'></i></td>\n      </tr>\n    </table>\n  </div>\n\n  <script src='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/solid.min.js'\n          integrity='sha512-Qc+cBMt/4/KXJ1F6nNQahXIsgPygHM4S2XWChoumV8qkpZ9oO+gBDBEpOxgbkQQ/6DlHx6cUxa5nBhEbuiR8xw=='\n          crossorigin='anonymous' referrerpolicy='no-referrer'></script>\n  <script defer src='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/fontawesome.min.js'\n          integrity='sha512-KCwrxBJebca0PPOaHELfqGtqkUlFUCuqCnmtydvBSTnJrBirJ55hRG5xcP4R9Rdx9Fz9IF3Yw6Rx40uhuAHR8Q=='\n          crossorigin='anonymous' referrerpolicy='no-referrer'></script>\n</div>\n\n<div id=\"page-meta\">\n  <div id=\"title\">Plugins - Font Awesome 5</div>\n  <div id=\"post-date\">01/19/2022</div>\n  <div id=\"update-date\">07/22/2022</div>\n  <div id=\"excerpt\">How to use font awesome 5 plugin with Tempus Dominus.</div>\n  <div id=\"tags\">datepicker, javascript, open source, tempus dominus, eonasdan</div>\n</div>\n"
  },
  {
    "path": "src/docs/partials/plugins/floating-ui.html",
    "content": "<div id='page-body'>\n  <div class='row'>\n    <h3>Floating UI</h3>\n    <p>\n      By default, @popperJS/core is required for the popper to work correctly. Alternatively, we can remove popper and\n      use\n      <a href='https://github.com/floating-ui/floating-ui' target='_blank' rel='noopener'>FloatingUI</a> by creating a\n      plugin that handles the popup creation.\n    </p>\n  </div>\n\n  <div class='row'>\n    <pre>\n<code class='language-js'>\nimport { computePosition } from '@floating-ui/dom';\n\nconst datetimepicker1 = new tempusDominus.TempusDominus(document.getElementById(&#39;datetimepicker1&#39;));\n\ndatetimepicker1.display.createPopup = computePosition(element, widget, options).then(({ x, y }) => {\n    Object.assign(widget.style, {\n      left: `${x}px`,\n      top: `${y}px`,\n      position: 'absolute',\n    });\n  });\n</code>\n    </pre>\n  </div>\n</div>\n\n<div id='page-meta'>\n  <div id='title'>Plugins - FloatingUI</div>\n  <div id='post-date'>09/13/2022</div>\n  <div id='update-date'>09/13/2022</div>\n  <div id='excerpt'>How to use FloatingUI plugin with Tempus Dominus.</div>\n  <div id='tags'>datepicker, javascript, open source, tempus dominus, eonasdan</div>\n</div>\n"
  },
  {
    "path": "src/docs/partials/plugins/index.html",
    "content": "<div id=\"page-body\">\n  <div class='row'>\n    <h3>Introduction</h3>\n    <p>\n      Plugins allow you to extend the picker by adding new functionality to either Tempus Dominus globally,\n      a single picker or by overwriting existing functionality.\n    </p>\n  </div>\n\n  <div class='row'>\n    <h3 id='creating' class='mt-3'>Creating plugins</h3>\n    <p>\n      There are a few examples in the source like this\n    </p>\n    <pre>\n<code class='language-javascript'>export const load = (option, tdClasses, tdFactory) => {\n  // extend the picker\n  // e.g. add new tempusDominus.TempusDominus(...).someFunction()\n  tdClasses.TempusDominus.prototype.someFunction = (a, logger) => {\n    logger = logger || console.log\n    logger(a);\n  }\n\n  // extend tempusDominus\n  // e.g. add tempusDominus.example()\n  tdFactory.example = (a, logger) => {\n    logger = logger || console.log\n    logger(a);\n  }\n\n  // overriding existing API\n  // e.g. extend new tempusDominus.TempusDominus(...).show()\n  const oldShow = tdClasses.TempusDominus.prototype.show;\n  tdClasses.TempusDominus.prototype.show = function(a, logger) {\n    logger = logger || console.log\n    alert('from plugin');\n    logger(a);\n    oldShow.bind(this)()\n    // return modified result\n  }\n}</code>\n    </pre>\n  </div>\n\n  <div class='row'>\n    <h2 id='using'>Using a plugin</h2>\n    <h3 class='mt-3'>Globally</h3>\n    <p>\n      Using a plugin is easy. Load the plugin script file after you load Tempus Dominus\n    </p>\n    <pre>\n<code class='language-html'>&lt;script src=&quot;/path/to/plugin.js&quot;&gt;&lt;/script&gt;</code>\n<code class='language-js'>tempusDominus.extend(window.tempusDominus.plugins.PLUGINNAME);</code>\n    </pre>\n\n    <p>\n      You can also use import the plugins instead.\n    </p>\n    <pre>\n<code class='language-js'>import { TempusDominus, version, extend } from '@eonasdan/tempus-dominus'; //require also works\nimport sample from '@eonasdan/tempus-dominus/dist/plugins/examples/sample';\n\nextend(sample); // use plugin</code>\n    </pre>\n\n    <h3 class='mt-3'>Per instance</h3>\n    <p>\n      Plugins can also be loaded per picker.\n    </p>\n\n    <pre>\n<code class='language-javascript'>const picker = new tempusdominus\n    .TempusDominus(document.getElementById('datetimepicker1'));\n\npicker.extend(sample);\n</code>\n</pre>\n  </div>\n\n  <div class='row'>\n    <h2 id='perPicker'>Per Instance Overwrites</h2>\n    <p>\n      It is possible to overwrite specific functions per picker instances as well. For instance:\n    </p>\n    <pre>\n<code class='language-js'>const td = new tempusDominus\n  .TempusDominus(document.getElementById('datetimepicker1'));\n\ntd.dates.formatInput = function(date) { {return moment(date).format('MM/DD/YYYY') } }</code>\n</pre>\n    <p>\n      The code above would affect a single picker but not globally. You could easily adapt this code to\n      have a common formatting function taking in a format string.\n    </p>\n  </div>\n\n  <div id='subToc' class='d-none'>\n    <nav id='TableOfContents'>\n      <ul>\n        <li><a href='#content'>Overview</a></li>\n        <li><a href='#creating'>Creating</a></li>\n        <li><a href='#using'>Using</a></li>\n        <li><a href='#perPicker'>Per Picker</a></li>\n      </ul>\n    </nav>\n  </div>\n\n</div>\n\n<div id=\"page-meta\">\n  <div id=\"title\">Plugins</div>\n  <div id=\"post-date\">01/19/2022</div>\n  <div id=\"update-date\">02/05/2022</div>\n  <div id=\"excerpt\">How to use plugins with Tempus Dominus.</div>\n  <div id=\"tags\">datepicker, javascript, open source, tempus dominus, eonasdan</div>\n</div>\n"
  },
  {
    "path": "src/docs/partials/plugins/moment.html",
    "content": "<div id='page-body'>\n  <div class='row'>\n    <p>\n      If you still need to use moment.js, you can load this plugin to use moment to parse input dates.\n    </p>\n  </div>\n\n  <div class='row'>\n    <div class='container'>\n      <div class='row'>\n        <div class='col-sm-6'>\n          <label for='datetimepicker1Input' class='form-label'>Simple picker</label>\n          <div\n            class='input-group'\n            id='datetimepicker1'\n            data-td-target-input='nearest'\n            data-td-target-toggle='nearest'\n          >\n            <input\n              id='datetimepicker1Input'\n              type='text'\n              class='form-control'\n              data-td-target='#datetimepicker1'\n              value='16.02.2022, 12:49 AM'\n            />\n            <span\n              class='input-group-text'\n              data-td-target='#datetimepicker1'\n              data-td-toggle='datetimepicker'\n            >\n               <span class='fas fa-calendar'></span>\n             </span>\n          </div>\n        </div>\n      </div>\n    </div>\n    <script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js'\n            integrity='sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ=='\n            crossorigin='anonymous' referrerpolicy='no-referrer'></script>\n    <script src='/6/js/plugins/moment-parse.js'></script>\n    <script type='text/javascript'>\n      tempusDominus.extend(tempusDominus.plugins.moment_parse, 'DD.MM.yyyy hh:mm a');\n      const datetimepicker1 = new tempusDominus.TempusDominus(document.getElementById('datetimepicker1'));\n    </script>\n  </div>\n  <pre>\n<code class='language-js'>//example picker\n//note that you can optionally provide the format to use.\ntempusDominus.extend(tempusDominus.plugins.moment_parse, 'DD.MM.yyyy hh:mm a');\nconst datetimepicker1 = new tempusDominus.TempusDominus(document.getElementById('datetimepicker1'));</code>\n</pre>\n</div>\n\n<div class='row'>\n  <h3>How it works</h3>\n  <p>\n    This plugin overrides two picker functions <code>setFromInput</code> and <code>formatInput</code>.\n  </p>\n  <p>\n    <code>setFromInput</code> parses and sets a date at the provided index with the textbox value.\n  </p>\n  <p>\n    <code>formatInput</code> is the reverse, it takes a date time object and formats or parses it to a string.\n  </p>\n  <pre>\n<code class='language-js'>//obviously, loading moment js is required.\ndeclare var moment;\nexport const load = (option, tdClasses, tdFactory) => {\n  tdClasses.Dates.prototype.setFromInput = function(value, index) {\n    let converted = moment(value, option);\n    if (converted.isValid()) {\n      let date = tdFactory.DateTime.convert(converted.toDate(), this.optionsStore.options.localization.locale);\n      this.setValue(date, index);\n    }\n    else {\n      console.warn('Momentjs failed to parse the input date.');\n    }\n  }\n\n  tdClasses.Dates.prototype.formatInput = function(date) {\n    return moment(date).format(option);\n  }\n}</code>\n</pre>\n</div>\n\n<div id='page-meta'>\n  <div id='title'>Plugins - Moment</div>\n  <div id='post-date'>02/05/2022</div>\n  <div id='update-date'>02/05/2022</div>\n  <div id='excerpt'>How to use momentjs plugin with Tempus Dominus.</div>\n  <div id='tags'>datepicker, javascript, open source, tempus dominus, eonasdan</div>\n</div>\n"
  },
  {
    "path": "src/docs/partials/plugins/paint.html",
    "content": "<div id=\"page-body\">\n  <div class='row'>\n    <p>\n      You can customize the css classes applied to dates by overwriting the <code>display.paint</code>.\n      The function provides a <a href='../namespace/unit.html'>Unit</a> value (extended to include \"decade\"),\n      the date involved and an array of string that represents the classes that will be applied.\n    </p>\n  </div>\n\n  <div class='row'>\n    <div class='container'>\n      <div class='row'>\n        <div class='col-sm-6'>\n          <label for='datetimepicker1Input' class='form-label'>Simple picker</label>\n          <div\n            class='input-group'\n            id='datetimepicker1'\n            data-td-target-input='nearest'\n            data-td-target-toggle='nearest'\n          >\n            <input\n              id='datetimepicker1Input'\n              type='text'\n              class='form-control'\n              data-td-target='#datetimepicker1'\n            />\n            <span\n              class='input-group-text'\n              data-td-target='#datetimepicker1'\n              data-td-toggle='datetimepicker'\n            >\n               <span class='fas fa-calendar'></span>\n             </span>\n          </div>\n        </div>\n      </div>\n    </div>\n    <script type='text/javascript'>\n      const datetimepicker1 = new tempusDominus.TempusDominus(document.getElementById('datetimepicker1'));\n      datetimepicker1.display.paint = (unit, date, classes, element) => {\n        if (unit === tempusDominus.Unit.date) {\n          if (date.isSame(new tempusDominus.DateTime().manipulate(1, 'date'), unit)) {\n            classes.push('special-day');\n          }\n        }\n      };\n    </script>\n    <style>\n        .special-day {\n            background-color: deeppink !important;\n        }\n    </style>\n  </div>\n\n  <div class='row'>\n  <pre>\n<code class='language-js'>//example picker\nconst datetimepicker1 = new tempusDominus.TempusDominus(document.getElementById(&#39;datetimepicker1&#39;));\n\ndatetimepicker1.display.paint = (unit, date, classes, element) => {\n  if (unit === tempusDominus.Unit.date) {\n    //highlight tomorrow\n    if (date.isSame(new tempusDominus.DateTime().manipulate(1, 'date'), unit)) {\n      classes.push('special-day');\n    }\n  }\n}</code>\n    </pre>\n  </div>\n</div>\n\n<div id=\"page-meta\">\n  <div id=\"title\">Plugins - Paint</div>\n  <div id=\"post-date\">02/05/2022</div>\n  <div id=\"update-date\">03/21/2022</div>\n  <div id=\"excerpt\">How to use add custom classes with Tempus Dominus.</div>\n  <div id=\"tags\">datepicker, javascript, open source, tempus dominus, eonasdan</div>\n</div>\n"
  },
  {
    "path": "src/docs/partials/repl.html",
    "content": "<div id=\"page-body\">\n  <div id='embed'></div>\n\n  <script src=\"https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1.9.0/bundles/sdk.umd.js\" integrity=\"sha256-YRwJRKMWZ1RpAGrke6zzS2ZZmPFGqsB6o9eTNpeF9KA=\" crossorigin=\"anonymous\"></script>\n  <script src='https://cdn.jsdelivr.net/npm/@eonasdan/lz-string@1.0.3/dist/lz-string.min.js'\n          integrity='sha256-mu6oqL9lqHnCZ7uliJ0+a0z2VcMuzS7JgqZqV1jheTM=' crossorigin='anonymous'></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/prettier@2.8.7/standalone.js\" integrity=\"sha256-0szozow+nJCuZKS0rL5ZOayUJ8/uoo57QZTyOdH8SBk=\" crossorigin=\"anonymous\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/prettier@2.8.7/parser-babel.js\" integrity=\"sha256-a5LgZia05/mWM+e3hPjD1uZP4K4ZkR1hvAOZbv1QWrE=\" crossorigin=\"anonymous\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/prettier@2.8.7/parser-html.js\" integrity=\"sha256-T1puTit6YYp6go4c5z9FHvY8k3EeKQYyI7glBZ2qprI=\" crossorigin=\"anonymous\"></script>\n  <script defer>\n    /* global prettier, lzString, StackBlitzSDK, prettierPlugins */\n\n    /**\n     * Code hash object\n     * @typedef {Object} Code-Hash\n     * @property {string} js - JS code for the VM.\n     * @property {string} html - HTML code for the VM.\n     * @property {boolean} jsConfigOnly - If this is true, then look at the JS snapshot and only update the config.\n     * @property {string} htmlNote - If this is true, then look at the JS snapshot and only update the config.\n     */\n\n    const sdk = StackBlitzSDK;\n    const targetJs = 'example.js';\n    const targetHtml = 'index.html';\n    let replData = {};\n\n    class Repl {\n      projectId = 'tempus-dominus-v6-repl';\n      vm = undefined;\n      originalJs = undefined;\n      originalHtml = undefined;\n\n      prettify(code, parser) {\n        return prettier.format(code, {\n          parser: parser,\n          plugins: prettierPlugins,\n          singleQuote: true,\n          tabWidth: 2,\n          htmlWhitespaceSensitivity: 'ignore'\n        });\n      }\n\n      /**\n       *\n       * @return Code-Hash\n       */\n      getQueryCode() {\n        const params = new Proxy(new URLSearchParams(window.location.search), {\n          get: (searchParams, prop) => searchParams.get(prop.toString())\n        });\n\n        let value = (params.code || window.location.hash).replace('#code/', '');\n\n        if (!value) return { js: '', html: '', jsConfigOnly: false, htmlNote: '' };\n\n        try {\n          return JSON.parse(lzString.decompressFromURL(value));\n        } catch {\n          return { js: '', html: '', jsConfigOnly: false, htmlNote: '' };\n        }\n      }\n\n      htmlToElement(html) {\n        const template = document.createElement('template');\n        // Never return a text node of whitespace as the result\n        template.innerHTML = html.trim();\n        return template.content.firstChild;\n      }\n\n      async ready() {\n        this.snapshot = await this.vm.getFsSnapshot();\n        this.originalJs = this.snapshot[targetJs];\n        this.originalHtml = this.htmlToElement(this.snapshot[targetHtml]);\n\n        await this.updateVmAsync();\n      }\n\n      async updateVmAsync(code = '') {\n        if (!code) code = this.getQueryCode();\n        else code = JSON.parse(lzString.decompressFromURL(code));\n\n        if (!code.js && !code.html) return;\n\n        const delta = {\n          create: {},\n          destroy: []\n        };\n\n        if (code.js) {\n          if (code.jsConfigOnly) {\n            delta.create[targetJs] = this.originalJs.replace('//put your config here', code.js);\n          } else delta.create[targetJs] = this.prettify(code.js, 'babel');\n        }\n        if (code.html || code.htmlNote) {\n          const newHtml = this.originalHtml.cloneNode(true);\n          if (code.html) newHtml.querySelector('#htmlTarget').innerHTML = code.html;\n          newHtml.querySelector('#noteTarget').innerHTML = code.htmlNote;\n          delta.create[targetHtml] = this.prettify(newHtml.outerHTML, 'html');\n        }\n\n        await this.vm.applyFsDiff(delta);\n        console.clear();\n      }\n\n      async resetVmAsync() {\n        const delta = {\n          create: {},\n          destroy: []\n        };\n        delta.create[targetJs] = this.originalJs;\n        delta.create[targetHtml] = this.originalHtml.outerHTML;\n\n        await this.vm.applyFsDiff(delta);\n        console.clear();\n      }\n    }\n\n    const repl = new Repl();\n\n    const updateRepl = (name) => {\n      const hash = replData[name];\n\n      const url = new URL(window.location);\n      url.hash = `#code/${hash}`;\n      window.history.pushState({}, '', url);\n      repl.updateVmAsync(hash).then();\n    };\n\n    const resetRepl = () => {\n      repl.resetVmAsync().then();\n\n      const url = new URL(window.location);\n      url.hash = ``;\n      window.history.pushState({}, '', url);\n    };\n\n    document.addEventListener('DOMContentLoaded', async () => {\n      replData = await (await fetch('/6/repl-data.json')).json();\n\n      repl.vm = await sdk\n        .embedProjectId('embed', repl.projectId, {\n          openFile: `${targetHtml},${targetJs}`,\n          hideNavigation: true,\n          settings: {\n            compile: { action: 'refresh' }\n          }\n        });\n      setTimeout(async () => {\n        await repl.ready();\n      }, 2000);\n\n      const mainToc = document.getElementById('mainToc');\n      mainToc.innerHTML = document.getElementById('replToc').innerHTML;\n      mainToc.style.display = 'block';\n    });\n  </script>\n  <style>\n      .bd-intro, #mainToc {\n          display: none;\n      }\n\n      #outerContainer {\n          max-width: 90vw !important;\n      }\n\n      #embed {\n          height: 80vh;\n      }\n\n      @media (min-width: 992px) {\n          .bd-layout {\n              grid-template-columns: 1fr 10fr;\n          }\n\n          .bd-main {\n              grid-template-areas:\n        \"content\";\n              grid-template-columns: 4fr;\n              grid-template-rows: auto 1fr;\n          }\n      }\n  </style>\n\n  <div id='replToc' style='display: none;'>\n    <li class='mb-1'>\n      <strong>\n        Examples\n      </strong>\n      <ul class='list-unstyled fw-normal pb-1 small'>\n        <li><a href='javascript:resetRepl()' class='d-inline-flex align-items-center rounded'>Simple</a>\n        </li>\n\n        <li><a\n          href='javascript:updateRepl(\"iconOnly\")'\n          class='d-inline-flex align-items-center rounded'>Icon Only</a>\n        </li>\n\n        <li><a\n          href='javascript:updateRepl(\"sideBySide\")'\n          class='d-inline-flex align-items-center rounded' aria-current='page'>Side By Side</a></li>\n\n        <li><a\n          href='javascript:updateRepl(\"localization\")'\n          class='d-inline-flex align-items-center rounded' aria-current='page'>Localization</a></li>\n\n        <li><a href='javascript:updateRepl(\"timeOnly\")'\n               class='d-inline-flex align-items-center rounded' aria-current='page'>Time Only</a></li>\n\n        <li><a href='javascript:updateRepl(\"inputOnly\")'\n               class='d-inline-flex align-items-center rounded' aria-current='page'>Input Only</a></li>\n\n        <li><a href='javascript:updateRepl(\"enabledDates\")'\n               class='d-inline-flex align-items-center rounded' aria-current='page'>Enabled/Disabled Dates</a></li>\n\n        <li><a href='javascript:updateRepl(\"linkedPickers\")'\n               class='d-inline-flex align-items-center rounded' aria-current='page'>Linked Pickers</a></li>\n\n        <li><a href='javascript:updateRepl(\"customIcons\")'\n               class='d-inline-flex align-items-center rounded' aria-current='page'>Custom Icons</a></li>\n\n        <li><a href='javascript:updateRepl(\"viewMode\")'\n               class='d-inline-flex align-items-center rounded' aria-current='page'>View Mode</a></li>\n\n        <li><a href='javascript:updateRepl(\"disableWeekday\")'\n               class='d-inline-flex align-items-center rounded' aria-current='page'>Disabled Days of the Week</a></li>\n\n        <li><a href='javascript:updateRepl(\"inline\")'\n               class='d-inline-flex align-items-center rounded' aria-current='page'>Inline</a></li>\n\n        <li><a href='javascript:updateRepl(\"theme\")'\n               class='d-inline-flex align-items-center rounded' aria-current='page'>Theme</a></li>\n\n        <li><a href='javascript:updateRepl(\"multipleDates\")'\n               class='d-inline-flex align-items-center rounded' aria-current='page'>Multiple Dates</a></li>\n\n        <li><a href='javascript:updateRepl(\"updateOptions\")'\n               class='d-inline-flex align-items-center rounded' aria-current='page'>Update Options</a></li>\n\n        <li><a href='javascript:updateRepl(\"parentContainer\")'\n               class='d-inline-flex align-items-center rounded' aria-current='page'>Parent Container</a></li>\n\n        <li><a href='javascript:updateRepl(\"functions\")'\n               class='d-inline-flex align-items-center rounded' aria-current='page'>Functions</a></li>\n\n        <li><a href='javascript:updateRepl(\"plugins\")'\n               class='d-inline-flex align-items-center rounded' aria-current='page'>Plugins</a></li>\n\n<!--        <li><a href='javascript:updateRepl(\"\")'-->\n<!--               class='d-inline-flex align-items-center rounded' aria-current='page'></a></li>-->\n      </ul>\n    </li>\n  </div>\n\n</div>\n\n<div id=\"page-meta\">\n  <div id=\"title\">REPL</div>\n  <div id=\"post-date\">07/08/2021</div>\n  <div id=\"update-date\">07/08/2021</div>\n  <div id=\"excerpt\">How to use Tempus Dominus datetime picker</div>\n  <div id=\"tags\">datepicker, javascript, open source, tempus dominus, eonasdan</div>\n</div>\n"
  },
  {
    "path": "src/docs/site-config.json",
    "content": "{\n  \"root\": \"https://getdatepicker.com\",\n  \"output\" : \"docs/6\"\n}"
  },
  {
    "path": "src/docs/styles/bs5_docs.scss",
    "content": "/*!\n * Bootstrap Docs (https://getbootstrap.com/)\n * Copyright 2011-2021 The Bootstrap Authors\n * Copyright 2011-2021 Twitter, Inc.\n * Licensed under the Creative Commons Attribution 3.0 Unported License.\n * For details, see https://creativecommons.org/licenses/by/3.0/.\n */\n\n.bd-navbar {\n  padding: .75rem 0;\n  background-color: var(--bs-primary);\n\n  .navbar-toggler {\n    padding: 0;\n    border: 0;\n  }\n\n  .navbar-nav .nav-link {\n    padding-right: .25rem;\n    padding-left: .25rem;\n    color: rgba(255, 255, 255, 0.85);\n\n    &:hover, &:focus {\n      color: #fff;\n    }\n\n    &.active {\n      font-weight: 600;\n      color: #fff;\n    }\n  }\n\n  .navbar-nav-svg {\n    width: 1rem;\n    height: 1rem;\n  }\n}\n\n.bd-subnavbar {\n  position: relative;\n  z-index: 1020;\n  background-color: rgba(255, 255, 255, 0.95);\n  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.15);\n\n  .dropdown-menu {\n    font-size: .875rem;\n    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05);\n  }\n\n  .dropdown-item.current {\n    font-weight: 600;\n    background-image: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23292b2c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e\");\n    background-repeat: no-repeat;\n    background-position: right 1rem top 0.6rem;\n    background-size: 0.75rem 0.75rem;\n  }\n}\n\n@media (min-width: 768px) {\n  .bd-subnavbar {\n    position: -webkit-sticky;\n    position: sticky;\n    top: 0;\n  }\n}\n\n.bd-search {\n  position: relative;\n\n  &::after {\n    position: absolute;\n    top: .4rem;\n    right: .4rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 1.5rem;\n    padding-right: .25rem;\n    padding-left: .25rem;\n    font-size: .75rem;\n    color: #6c757d;\n    content: \"Ctrl + /\";\n    border: 1px solid #dee2e6;\n    border-radius: 0.125rem;\n  }\n\n  .form-control {\n    padding-right: 3.75rem;\n\n    &:focus {\n      border-color: #7952b3;\n      box-shadow: 0 0 0 3px rgba(121, 82, 179, 0.25);\n    }\n  }\n}\n\n@media (max-width: 767.98px) {\n  .bd-search {\n    width: 100%;\n  }\n}\n\n.bd-sidebar-toggle {\n  color: #6c757d;\n\n  &:hover {\n    color: #7952b3;\n  }\n\n  &:focus {\n    color: #7952b3;\n    box-shadow: 0 0 0 3px rgba(121, 82, 179, 0.25);\n  }\n\n  .bi-collapse {\n    display: none;\n  }\n\n  &:not(.collapsed) {\n    .bi-expand {\n      display: none;\n    }\n\n    .bi-collapse {\n      display: inline-block;\n    }\n  }\n}\n\n.bd-masthead {\n  padding: 3rem 0;\n\n  h1 {\n    font-size: calc(1.525rem + 3.3vw);\n    line-height: 1;\n  }\n\n  p:not(.lead) {\n    color: #495057;\n  }\n\n  .btn {\n    padding: .8rem 2rem;\n    font-weight: 600;\n  }\n\n  .lead {\n    font-size: calc(1.275rem + .3vw);\n    font-weight: 400;\n    color: #495057;\n  }\n}\n\n@media (min-width: 1200px) {\n  .bd-masthead h1 {\n    font-size: 4rem;\n  }\n}\n\n@media (min-width: 1200px) {\n  .bd-masthead .lead {\n    font-size: 1.5rem;\n  }\n}\n\n@media (min-width: 768px) {\n  .mw-md-75 {\n    max-width: 75%;\n  }\n}\n\n.masthead-followup-icon {\n  padding: .75rem;\n  background-image: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.01));\n  border-radius: .75rem;\n  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);\n}\n\n.masthead-followup-svg {\n  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.125));\n}\n\n@media (min-width: 768px) {\n  :root {\n    scroll-padding-top: 4rem;\n  }\n}\n\n.bd-content > {\n  h2:not(:first-child) {\n    margin-top: 3rem;\n  }\n\n  h3 {\n    margin-top: 2rem;\n  }\n\n  ul li, ol li {\n    margin-bottom: 0.25rem;\n  }\n\n  ul li > p ~ ul, ol li > p ~ ul {\n    margin-top: -.5rem;\n    margin-bottom: 1rem;\n  }\n\n  .table {\n    max-width: 100%;\n    margin-bottom: 1.5rem;\n    font-size: 0.875rem;\n\n    th:first-child, td:first-child {\n      padding-left: 0;\n    }\n\n    th:not(:last-child) {\n      padding-right: 1.5rem;\n    }\n\n    td {\n      &:not(:last-child) {\n        padding-right: 1.5rem;\n      }\n\n      &:first-child > code {\n        white-space: nowrap;\n      }\n    }\n  }\n}\n\n@media (max-width: 991.98px) {\n  .bd-content > .table {\n    display: block;\n    overflow-x: auto;\n\n    &.table-bordered {\n      border: 0;\n    }\n  }\n}\n\n.bd-title {\n  font-size: calc(1.425rem + 2.1vw);\n}\n\n@media (min-width: 1200px) {\n  .bd-title {\n    font-size: 3rem;\n  }\n}\n\n.bd-lead {\n  font-size: calc(1.275rem + .3vw);\n  font-weight: 300;\n}\n\n@media (min-width: 1200px) {\n  .bd-lead {\n    font-size: 1.5rem;\n  }\n}\n\n.bd-text-purple-bright {\n  color: #7952b3;\n}\n\n.bd-bg-purple-bright {\n  background-color: #7952b3;\n}\n\n.skippy {\n  background-color: #563d7c;\n\n  a {\n    color: #fff;\n  }\n}\n\n@media (max-width: 767.98px) {\n  .bd-sidebar {\n    margin: 0 -0.75rem 1rem;\n  }\n}\n\n.bd-links {\n  overflow: auto;\n  font-weight: 600;\n\n  a {\n    padding: .1875rem .5rem;\n    margin-top: .125rem;\n    margin-left: 1.25rem;\n    color: rgba(0, 0, 0, 0.65);\n    text-decoration: none;\n\n    &:hover, &:focus {\n      color: rgba(0, 0, 0, 0.85);\n      background-color: rgba(121, 82, 179, 0.1);\n    }\n  }\n\n  .btn {\n    padding: .25rem .5rem;\n    font-weight: 600;\n    color: rgba(0, 0, 0, 0.65);\n    background-color: transparent;\n    border: 0;\n\n    &:hover {\n      color: rgba(0, 0, 0, 0.85);\n      background-color: rgba(121, 82, 179, 0.1);\n    }\n\n    &:focus {\n      color: rgba(0, 0, 0, 0.85);\n      background-color: rgba(121, 82, 179, 0.1);\n      box-shadow: 0 0 0 1px rgba(121, 82, 179, 0.7);\n    }\n\n    &::before {\n      width: 1.25em;\n      line-height: 0;\n      content: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e\");\n      transition: transform 0.35s ease;\n      transform-origin: 0.5em 50%;\n    }\n\n    &[aria-expanded=\"true\"] {\n      color: rgba(0, 0, 0, 0.85);\n\n      &::before {\n        transform: rotate(90deg);\n      }\n    }\n  }\n\n  .active {\n    font-weight: 600;\n    color: rgba(0, 0, 0, 0.85);\n  }\n}\n\n@media (min-width: 768px) {\n  .bd-links {\n    position: -webkit-sticky;\n    position: sticky;\n    top: 5rem;\n    display: block !important;\n    height: calc(100vh - 7rem);\n    padding-left: .25rem;\n    margin-left: -.25rem;\n    overflow-y: auto;\n  }\n}\n\n@media (max-width: 767.98px) {\n  .bd-links > ul {\n    padding: 1.5rem .75rem;\n    background-color: #f8f9fa;\n    border-bottom: 1px solid #e9ecef;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .bd-links .btn::before {\n    transition: none;\n  }\n}\n\n@media (min-width: 768px) {\n  .bd-layout {\n    display: grid;\n    gap: 1.5rem;\n    grid-template-areas: \"sidebar main\";\n    grid-template-columns: 1fr 3fr;\n  }\n}\n\n@media (min-width: 992px) {\n  .bd-layout {\n    grid-template-columns: 1fr 5fr;\n  }\n}\n\n.bd-sidebar {\n  grid-area: sidebar;\n}\n\n.bd-main {\n  grid-area: main;\n}\n\n@media (min-width: 768px) {\n  .bd-main {\n    display: grid;\n    gap: inherit;\n    grid-template-areas: \"intro\" \"toc\" \"content\";\n    grid-template-rows: auto auto 1fr;\n  }\n}\n\n@media (min-width: 992px) {\n  .bd-main {\n    grid-template-areas: \"intro   toc\" \"content toc\";\n    grid-template-columns: 4fr 1fr;\n    grid-template-rows: auto 1fr;\n  }\n}\n\n.bd-intro {\n  grid-area: intro;\n}\n\n.bd-toc {\n  grid-area: toc;\n}\n\n.bd-content {\n  grid-area: content;\n  min-width: 1px;\n}\n\n@media (min-width: 992px) {\n  .bd-toc {\n    position: -webkit-sticky;\n    position: sticky;\n    top: 5rem;\n    right: 0;\n    z-index: 2;\n    height: calc(100vh - 7rem);\n    overflow-y: auto;\n  }\n}\n\n.bd-toc nav {\n  font-size: 0.875rem;\n\n  ul {\n    padding-left: 0;\n    list-style: none;\n\n    ul {\n      padding-left: 1rem;\n      margin-top: 0.25rem;\n    }\n  }\n\n  li {\n    margin-bottom: 0.25rem;\n  }\n\n  a {\n    color: inherit;\n\n    &:not(:hover) {\n      text-decoration: none;\n    }\n\n    code {\n      font: inherit;\n    }\n  }\n}\n\n.bd-footer a {\n  color: #495057;\n  text-decoration: none;\n\n  &:hover, &:focus {\n    color: #0d6efd;\n    text-decoration: underline;\n  }\n}\n\n.btn-bd-primary {\n  font-weight: 600;\n  color: #fff;\n  background-color: #7952b3;\n  border-color: #7952b3;\n\n  &:hover, &:active {\n    color: #fff;\n    background-color: #61428f;\n    border-color: #61428f;\n  }\n\n  &:focus {\n    box-shadow: 0 0 0 3px rgba(121, 82, 179, 0.25);\n  }\n}\n\n.btn-bd-download {\n  font-weight: 600;\n  color: #ffe484;\n  border-color: #ffe484;\n\n  &:hover, &:active {\n    color: #2a2730;\n    background-color: #ffe484;\n    border-color: #ffe484;\n  }\n\n  &:focus {\n    box-shadow: 0 0 0 3px rgba(255, 228, 132, 0.25);\n  }\n}\n\n.anchor-link {\n  font-size: 1.4rem;\n  font-weight: 400;\n  transition: color 0.15s ease-in-out;\n  padding-left: 0.375em;\n\n  &:focus, &:hover {\n    color: #0d6efd;\n    text-decoration: none;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .anchor-link {\n    transition: none;\n  }\n}\n"
  },
  {
    "path": "src/docs/styles/styles.scss",
    "content": "@use \"../../../node_modules/bootstrap/scss/bootstrap.scss\";\n@use \"bs5_docs\";\n@import \"https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900\";\n\n.show-code {\n  cursor: pointer;\n}\n\n.tab-content > .active {\n  min-height: 35vh;\n  max-height: 35vh;\n  overflow-y: auto;\n}\n\nsection:not(:last-child) {\n  padding-bottom: 1rem;\n  margin-bottom: 1rem;\n  border-bottom: 1px solid grey;\n}\n\nsection h2 {\n  margin-top: 3rem\n}\n\n#migration {\n  textarea {\n    height: 60vh;\n  }\n\n  /* hide the right side toc to give more room */\n  @media (min-width: 768px) {\n    .bd-main {\n      display: grid;\n      gap: inherit;\n      grid-template-areas: \"intro\" \"content\";\n      grid-template-rows: auto auto 1fr;\n    }\n\n    #convertButton, #convertButtonHtml {\n      position: relative;\n      top: 50%;\n    }\n  }\n\n  @media (min-width: 992px) {\n    .bd-main {\n      grid-template-areas: \"intro\" \"content\";\n      grid-template-columns: 4fr;\n      grid-template-rows: auto 1fr;\n    }\n  }\n\n  #alert {\n    max-height: 20vh;\n    overflow-y: scroll;\n  }\n\n  .tab-content > .active {\n    min-height: initial;\n    max-height: initial;\n    overflow-y: initial;\n  }\n}\n\nh2 {\n  border-top: 1px solid #f07534;\n  margin-top: 1.5rem !important;\n  padding-top: 1.5rem;\n}\n\n@media (prefers-color-scheme: dark) {\n  $dark-background: #171717;\n  $dark-font:#e3e3e3;\n  $dark-background-alt: #2d2d2d;\n  $dark-font-alt: #4db2ff;\n  \n  body, .form-control {\n    background-color: $dark-background;\n    color: $dark-font;\n  }\n  \n  a, .show-code, .nav-link {\n    color: $dark-font-alt;\n  }\n\n  .bd-links .btn, .bd-links .btn[aria-expanded=true], .bd-links .active, .bd-links a, .bd-footer a, .bd-masthead .lead,\n  .table > :not(caption) > * > * {\n    color: $dark-font;\n  }\n\n  .bd-links a:hover, .bd-links a:focus, .bd-links .btn:hover, .bd-links .btn:focus, .input-group-text, .form-control:disabled, .form-control[readonly]  {\n    background-color: $dark-background-alt;\n    color: $dark-font;\n  }\n\n  .input-group-text {\n    border-color: $dark-background-alt;\n  }\n\n  .bd-links .btn:focus {\n    box-shadow: 0 0 0 1px rgb(0 0 0 / 5%);\n  }\n\n  .form-control {\n    border-color: rgb(60, 65, 68);\n  }\n\n  .bd-subnavbar {\n    background-color: rgba(24, 26, 27, 0.95);\n    box-shadow: rgb(0 0 0 / 5%) 0 0.5rem 1rem, rgb(0 0 0 / 15%) 0px -1px 0px inset;\n  }\n  \n  .btn {\n    color: $dark-font;\n    \n    &:hover {\n      color: $dark-font;      \n    }\n  }\n\n  .bd-links .btn::before {\n    content: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28227, 227, 227,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e\");\n  }\n\n  .bg-light, .text-muted, .table-striped > tbody > tr:nth-of-type(odd) > *, .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {\n    background-color: $dark-background-alt !important;\n    color: $dark-font !important;\n  }\n\n  .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {\n    border-color: rgb(56, 61, 63) rgb(56, 61, 63) rgb(48, 52, 54);\n  }\n\n  .btn-bd-download:hover, .btn-bd-download:active {\n    color: rgb(205, 200, 194);\n    background-color: rgb(125, 97, 0);\n    border-color: rgb(139, 108, 0);\n  }\n\n  code {\n    color: #A3E170;\n  }\n}\n\n@media (min-width: 768px) {\n  .bd-toc-collapse {\n    display: block !important;\n  }\n}\n\n.bd-toc {\n  background-color: initial !important;\n\n  nav li {\n    list-style: none;\n  }\n}\n\n@media (min-width: 992px) {\n  .bd-toc {\n    position: -webkit-sticky;\n    position: sticky;\n    top: 5rem;\n    right: 0;\n    z-index: 2;\n    height: calc(100vh - 7rem);\n    overflow-y: auto;\n  }\n}\n\n.bd-gutter {\n  --bs-gutter-x: 3rem;\n}\n\n#change-log ul {\n  margin-left: 2rem;\n}\n"
  },
  {
    "path": "src/docs/templates/404.html",
    "content": "<!-- ##### Archive List Posts Area Start ##### -->\n<div class=\"archive-list-posts-area mb-80 mt-3\">\n    <div class=\"container\">\n        <div class=\"row justify-content-center\">\n            <div class=\"col-12\">\n                <!-- Single Post Area -->\n                <div id=\"post-container\">\n                    <h1>Oops! Looks like you find a link that doesn't exist.</h1>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n<!-- ##### Archive List Posts Area End ##### -->"
  },
  {
    "path": "src/docs/templates/index.html",
    "content": "<main>\n  <div class='bd-masthead mb-3' id='content'>\n    <div class='container-xxl bd-gutter'>\n      <div class='col-md-8 mx-auto text-center'>\n        <h1 class='mb-3 fw-semibold'>Powerful and robust date and time picker</h1>\n        <p class='lead mb-4'>\n          Tempus Dominus is the successor to the very popular \"eonasdan/bootstrap-datetimepicker\". The plugin provides\n          a wide array of options that allow developers to provide date and or time selections to users as simple\n          pickers, date of birth selection, appointments and more.\n        </p>\n        <div class='d-flex flex-column flex-lg-row align-items-md-stretch justify-content-md-center gap-3 mb-4'>\n          <div class='d-flex flex-column flex-md-row'>\n            <a href='/6/' class='btn btn-lg btn-primary mb-3 me-md-3'\n               onclick=\"ga('send', 'event', 'Jumbotron actions', 'Get started', 'Get started');\">Get started</a>\n            <a href='/6/installing.html' class='btn btn-lg btn-outline-secondary mb-3'\n               onclick=\"ga('send', 'event', 'Jumbotron actions', 'Download', 'Download 6');\">Download</a>\n          </div>\n        </div>\n        <p class='text-muted mb-0'>\n          Currently <strong>v6.9.4</strong>\n          <span class='px-1'>&middot;</span>\n          <a href='https://getdatepicker.com/5-4/' class='link-secondary'>v5 docs</a>\n        </p>\n        <script async type='text/javascript'\n                src='//cdn.carbonads.com/carbon.js?serve=CK7DC5QN&placement=getdatepickercom'\n                id='_carbonads_js'></script>\n\n      </div>\n    </div>\n  </div>\n\n  <div class='container masthead-followup px-4 px-md-3'>\n    <div class='row g-3 g-md-5 mb-5 pb-5 justify-content-center'>\n      <div class='col-lg-6 py-lg-4 pe-lg-5'>\n        <i class='fa-solid fa-parachute-box fa-2x' aria-hidden='true'></i>\n        <h3 class='fw-semibold'>Installation</h3>\n        <p class='pe-lg-5'>\n          Install Tempus Dominus via npm.\n        </p>\n        <pre tabindex='0'><code class='language-shellsession'>npm install @eonasdan/tempus-dominus</code></pre>\n        <p>\n          <a href='/6/installing.html'>Read installation docs</a>\n        </p>\n      </div>\n      <div class='col-lg-6 py-lg-4 ps-lg-5 border-lg-start'>\n        <i class='fa-solid fa-cloud fa-2x' aria-hidden='true'></i>\n        <h3 class='fw-semibold'>JsDelivr</h3>\n        <p class='lead fw-normal'>\n          We recommend you use a CDN like <a href='https://www.jsdelivr.com/'>jsDelivr</a>.\n        </p>\n        <p>\n          Popper is required and must be included before the main picker script.\n        </p>\n        <pre>\n<code class='language-html'>&lt;!-- Popperjs --&gt;\n&lt;script src=&quot;https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js&quot; integrity=&quot;sha256-BRqBN7dYgABqtY9Hd4ynE+1slnEw+roEPFzQ7TRRfcg=&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;\n&lt;!-- Tempus Dominus JavaScript --&gt;\n&lt;script src=&quot;https://cdn.jsdelivr.net/npm/@eonasdan/tempus-dominus@6.9.4/dist/js/tempus-dominus.min.js&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;\n\n&lt;!-- Tempus Dominus Styles --&gt;\n&lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/@eonasdan/tempus-dominus@6.9.4/dist/css/tempus-dominus.min.css&quot; crossorigin=&quot;anonymous&quot;&gt;</code>\n</pre>\n      </div>\n    </div>\n\n    <div class='row mb-5 pb-md-4 align-items-center'>\n      <div class='container'>\n        <div class='row center-block mt-3 mb-5'>\n          <div class='col-12'>\n            <h4 class='row'>From Creative Tim</h4>\n          </div>\n          <div class='col-sm-12 col-md-3'>\n            <a href='https://www.creative-tim.com/product/material-dashboard-pro?partner=127205' target='_blank'\n               class='affiliate-project' rel='noopener'>\n              Material Pro\n              <img src='https://s3.amazonaws.com/creativetim_bucket/products/51/original/opt_mdp_thumbnail.jpg'\n                   alt='Material Pro' class='img-fluid'>\n            </a>\n          </div>\n          <div class='col-sm-12 col-md-3'>\n            <a href='https://www.creative-tim.com/product/material-dashboard-pro-angular2?partner=127205'\n               target='_blank' class='affiliate-project' rel='noopener'>\n              Material Pro Angular\n              <img src='https://s3.amazonaws.com/creativetim_bucket/products/55/original/opt_mdp_angular_thumbnail.jpg'\n                   alt='Material Pro Angular' class='img-fluid'>\n            </a>\n          </div>\n          <div class='col-sm-12 col-md-3'>\n            <a href='https://www.creative-tim.com/product/argon-dashboard-pro?partner=127205' target='_blank'\n               class='affiliate-project' rel='noopener'>\n              Argon Pro\n              <img\n                src='https://s3.amazonaws.com/creativetim_bucket/products/137/original/argon-dashboard-pro.jpg?1637855868'\n                alt='Argon Pro' class='img-fluid'>\n            </a>\n          </div>\n        </div>\n        <hr/>\n        <div class='row center-block mt-5'>\n          <div class='col-12'>\n            <h4 class='row'>From Flatlogic</h4>\n          </div>\n          <div class='col-sm-12 col-md-3'>\n            <a href='https://flatlogic.com/templates/light-blue-html5?ref=dg1K3bfa8w' target='_blank'\n               class='affiliate-project' rel='noopener'>\n              Light Blue Html5\n              <img\n                src='https://flatlogic.com/assets/templates/lb_html_full-798d1587249f7f3d65c6f8d9a11b2489daa042b4d46c377fac0573575a663f31.webp'\n                alt='Light Blue Vue Admin' class='img-fluid'>\n            </a>\n          </div>\n          <div class='col-sm-12 col-md-3'>\n            <a href='https://flatlogic.com/templates/sing-app-html5?ref=dg1K3bfa8w' target='_blank'\n               class='affiliate-project' rel='noopener'>\n              Sing App Html5\n              <img\n                src='https://flatlogic.com/assets/templates/sing_html5_full-94fa15f9a342fdf7256976aef8ed5ade80ef396c754781cfa764e2cc4e9e0eea.webp'\n                alt=' Sing App Angular Node.js' class='img-fluid'>\n            </a>\n          </div>\n          <div class='col-sm-12 col-md-3'>\n            <a href='https://flatlogic.com/templates/one-bootstrap-template?ref=dg1K3bfa8w' target='_blank'\n               class='affiliate-project' rel='noopener'>\n              Flatlogic One Bootstrap Template\n              <img\n                src='https://flatlogic.com/assets/templates/one_bootstrap_full-afead8dd8432ed7fd0a81ad3a75aadc06d008998570c0fd78e5bbe20740812f9.webp'\n                alt='Light Sing App Vue' class='img-fluid'>\n            </a>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n</main>\n"
  },
  {
    "path": "src/docs/templates/page-template.html",
    "content": "<aside class='bd-sidebar'>\n  <nav class='collapse bd-links' id='bd-docs-nav' aria-label='Docs navigation'>\n    <ul class='list-unstyled mb-0 py-3 pt-md-1' id='mainToc'>\n      <li class='mb-1'>\n        <strong>\n          Getting started\n        </strong>\n\n        <ul class='list-unstyled fw-normal pb-1 small'>\n          <li><a href='/6/'\n                 class='d-inline-flex align-items-center rounded' aria-current='page'>Introduction</a></li>\n          <li><a href='/6/installing.html' class='d-inline-flex align-items-center rounded'>Download</a>\n          </li>\n          <li><a href='/6/change-log.html'\n                 class='d-inline-flex align-items-center rounded' aria-current='page'>Change Log</a></li>\n          <li><a href='/6/datetime.html'\n                 class='d-inline-flex align-items-center rounded' aria-current='page'>DateTime</a></li>\n          <li><a href='/6/locale.html'\n                 class='d-inline-flex align-items-center rounded' aria-current='page'>Locales</a></li>\n          <li>\n            <a href='/6/migration.html' class='d-inline-flex align-items-center rounded'>\n              Migration\n            </a>\n          </li>\n        </ul>\n      </li>\n      <li class='mb-1'>\n        <strong>\n          Options\n        </strong>\n\n        <ul class='list-unstyled fw-normal pb-1 small'>\n          <li><a href='/6/options/' class='d-inline-flex align-items-center rounded'>Overview</a>\n          </li>\n          <li><a href='/6/options/restrictions.html' class='d-inline-flex align-items-center rounded'>Restrictions</a>\n          </li>\n          <li><a href='/6/options/display.html' class='d-inline-flex align-items-center rounded'>Display</a></li>\n          <li><a href='/6/options/localization.html' class='d-inline-flex align-items-center rounded'>Localization</a>\n          </li>\n          <li><a href='/6/options/keyboard-navigation.html' class='d-inline-flex align-items-center rounded'>Keyboard Navigation</a>\n          </li>\n        </ul>\n      </li>\n      <li class='mb-1'>\n        <strong>\n          Functions\n        </strong>\n\n        <ul class='list-unstyled fw-normal pb-1 small'>\n          <li><a href='/6/functions/' class='d-inline-flex align-items-center rounded'>Overview</a>\n          </li>\n          <li><a href='/6/functions/dates.html' class='d-inline-flex align-items-center rounded'>Dates</a></li>\n          <li><a href='/6/functions/display.html' class='d-inline-flex align-items-center rounded'>Display</a></li>\n        </ul>\n      </li>\n      <li class='mb-1'>\n        <strong>\n          Namespace\n        </strong>\n\n        <ul class='list-unstyled fw-normal pb-1 small'>\n          <li><a href='/6/namespace/' class='d-inline-flex align-items-center rounded'>Overview</a>\n          </li>\n          <li><a href='/6/namespace/css.html' class='d-inline-flex align-items-center rounded'>CSS</a></li>\n          <li><a href='/6/namespace/errors.html' class='d-inline-flex align-items-center rounded'>Errors</a>\n          </li>\n          <li><a href='/6/namespace/events.html' class='d-inline-flex align-items-center rounded'>Events</a>\n          </li>\n          <li><a href='/6/namespace/unit.html' class='d-inline-flex align-items-center rounded'>Unit</a></li>\n        </ul>\n      </li>\n\n      <li class='mb-1'>\n        <strong>\n          Plugins\n        </strong>\n\n        <ul class='list-unstyled fw-normal pb-1 small'>\n          <li><a href='/6/plugins/' class='d-inline-flex align-items-center rounded'>Overview</a>\n          </li>\n          <li><a href='/6/plugins/bi1.html' class='d-inline-flex align-items-center rounded'>Bootstrap Icons v1</a></li>\n          <li><a href='/6/plugins/customDateFormat.html' class='d-inline-flex align-items-center rounded'>Custom Date\n            Formats</a>\n          </li>\n          <li><a href='/6/plugins/floating-ui.html' class='d-inline-flex align-items-center rounded'>Floating UI</a>\n          </li>\n          <li><a href='/6/plugins/fa5.html' class='d-inline-flex align-items-center rounded'>Font Awesome\n            5</a></li>\n          <li><a href='/6/plugins/moment.html' class='d-inline-flex align-items-center rounded'>Momentjs</a>\n          </li>\n          <li><a href='/6/plugins/paint.html' class='d-inline-flex align-items-center rounded'>Paint (Custom\n            classes)</a></li>\n        </ul>\n      </li>\n    </ul>\n  </nav>\n\n</aside>\n<main class='bd-main order-1'>\n  <div class='bd-intro ps-lg-4'>\n    <div class='d-md-flex align-items-center justify-content-between'>\n      <h1 class='bd-title title' id='content'>Introduction</h1>\n    </div>\n  </div>\n  <div class='bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted d-none' id='tocContainer'>\n    <button class='btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none'\n            type='button' data-bs-toggle='collapse' data-bs-target='#tocContents' aria-expanded='false'\n            aria-controls='tocContents'>\n      On this page\n      <svg class='bi d-md-none ms-2' aria-hidden='true'>\n        <use xlink:href='#chevron-expand'></use>\n      </svg>\n    </button>\n    <strong class='d-none d-md-block h6 my-2'>On this page</strong>\n    <hr class='d-none d-md-block my-2'>\n    <div class='collapse bd-toc-collapse' id='tocContents'>\n\n    </div>\n  </div>\n  <div id='mainContent' class='bd-content ps-lg-4'>\n  </div>\n</main>\n"
  },
  {
    "path": "src/docs/templates/post-loop.html",
    "content": "<div class=\"single-post-area style-2\">\n    <div class=\"row align-items-center\">\n        <div class=\"col-12 col-md-6\">\n            <div class=\"post-thumbnail\">\n                <img src=\"/img/${post.thumbnail}\" alt=\"${post.title}\" class=\"img-fluid\"/>\n            </div>\n        </div>\n        <div class=\"col-12 col-md-6\">\n            <div class=\"post-content mt-0\">\n                <a href=\"/posts/${post.file}\" class=\"post-title post-link mb-2\">${post.title}</a>\n                <div class=\"post-meta d-flex align-items-center mb-2\">\n                    <span class=\"post-author\">${post.author.name}</span>\n                    <i class=\"far fa-circle\" aria-hidden=\"true\"></i>\n                    <span class=\"post-date\">${post.postDate}</span>\n                </div>\n                <p class=\"mb-2 post-excerpt\">${post.excerpt}</p>\n            </div>\n        </div>\n    </div>\n</div>"
  },
  {
    "path": "src/docs/templates/shell.html",
    "content": "<!DOCTYPE html>\n<html lang='en'>\n\n<head>\n  <meta charset='UTF-8'>\n  <meta name='description' content='A robust and powerful date/time picker component.'>\n  <meta http-equiv='X-UA-Compatible' content='IE=edge'>\n  <meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>\n\n  <title>Official documentation site for Tempus Dominus</title>\n\n  <link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png'>\n  <link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png'>\n  <link rel='icon' type='image/png' sizes='16x16' href='/favicon-16x16.png'>\n  <link rel='manifest' href='/site.webmanifest'>\n  <link rel='mask-icon' href='/safari-pinned-tab.svg' color='#5bbad5'>\n  <meta name='msapplication-TileColor' content='#da532c'>\n  <meta name='theme-color' content='#ffffff'>\n\n  <meta class='metaTitle' name='title' content='Official documentation site for Tempus Dominus' />\n  <meta class='metaDescription' name='description' content='A robust and powerful date/time picker component.' />\n\n  <!-- Open Graph / Facebook -->\n  <meta property='og:type' content='article' />\n  <meta class='metaUrl' property='og:url' content='https://getdatepicker.com' />\n  <meta class='metaTitle' property='og:title' content='Official documentation site for Tempus Dominus' />\n  <meta class='metaDescription' property='og:description' content='A robust and powerful date/time picker component.' />\n  <meta class='metaImage' property='og:image' content='' />\n\n  <meta class='metaPublishedTime' property='article:published_time' content='' />\n  <meta class='metaModifiedTime' property='article:modified_time' content='' />\n  <meta class='metaTag' property='article:tag' content='' />\n  <meta property='article:author' content='Jonathan Peterson' />\n  <meta property='article:section' content='Technology' />\n\n  <!-- Twitter -->\n  <meta property='twitter:card' content='summary_large_image' />\n  <meta property='twitter:site' content='@eonasdan' />\n  <meta property='twitter:creator' content='@eonasdan' />\n  <meta class='metaUrl' property='twitter:url' content='https://eonasdan.com' />\n  <meta class='metaTitle' property='twitter:title' content='' />\n  <meta class='metaDescription' property='twitter:description'\n        content='A robust and powerful date/time picker component.' />\n  <meta class='metaImage' property='twitter:image' content='' />\n  <link rel='stylesheet' href='/css/styles.min.css' />\n\n  <script src='/js/bundle.min.js'></script>\n  <script src='/6/js/tempus-dominus.js'></script>\n  <link rel='stylesheet' href='/6/css/tempus-dominus.css' />\n\n</head>\n\n<body class=\"line-numbers\">\n<div class='skippy visually-hidden-focusable overflow-hidden'>\n  <div class='container-xl'>\n    <a class='d-inline-flex p-2 m-1' href='#content'>Skip to main content</a>\n    <a class='d-none d-md-inline-flex p-2 m-1' href='#bd-docs-nav'>Skip to docs navigation</a>\n  </div>\n</div>\n\n\n<header class='navbar navbar-expand-md navbar-dark bd-navbar'>\n  <nav class='container-xxl flex-wrap flex-md-nowrap' aria-label='Main navigation'>\n    <a class='navbar-brand p-0 me-2' href='/' aria-label='Tempus Dominus'>\n      <img src='https://getdatepicker.com/favicon-32x32.png' alt='home' />\n    </a>\n\n    <button class='navbar-toggler' type='button' data-bs-toggle='collapse' data-bs-target='#bdNavbar'\n            aria-controls='bdNavbar' aria-expanded='false' aria-label='Toggle navigation'>\n      <i class='fa-solid fa-bars' aria-hidden='true'></i>\n    </button>\n\n    <div class='collapse navbar-collapse' id='bdNavbar'>\n      <ul class='navbar-nav flex-row flex-wrap bd-navbar-nav pt-2 py-md-0'>\n        <li class='nav-item col-6 col-md-auto'>\n          <a class='nav-link p-2' href='/'\n             onclick=\"ga('send', 'event', 'Navbar', 'Community links', 'TempusDominus');\">Home</a>\n        </li>\n        <li class='nav-item col-6 col-md-auto'>\n          <a class='nav-link p-2' aria-current='true' href='/6/installing.html'\n             onclick=\"ga('send', 'event', 'Navbar', 'Community links', 'Docs');\">Docs</a>\n        </li>\n        <li class='nav-item col-6 col-md-auto'>\n          <a class='nav-link p-2' aria-current='true' href='/6/repl.html'\n             onclick=\"ga('send', 'event', 'Navbar', 'Community links', 'Docs');\">REPL</a>\n        </li>\n        <li class='nav-item col-6 col-md-auto'>\n          <a class='nav-link p-2' aria-current='true' href='/6/change-log.html'\n             onclick=\"ga('send', 'event', 'Navbar', 'Community links', 'Change Log');\">Change Log</a>\n        </li>\n        <li class='nav-item col-6 col-md-auto'>\n          <a class='nav-link p-2' href='https://eonasdan.com/'\n             onclick=\"ga('send', 'event', 'Navbar', 'Community links', 'Blog');\" target='_blank' rel='noopener'>Blog</a>\n        </li>\n      </ul>\n\n      <hr class='d-md-none text-white-50'>\n\n      <ul class='navbar-nav flex-row flex-wrap ms-md-auto'>\n        <li class='nav-item col-6 col-md-auto'>\n          <a class='nav-link p-2' href='https://github.com/Eonasdan/tempus-dominus' target='_blank' rel='noopener'>\n            <i class='fa-brands fa-github' aria-hidden='true'></i>\n            <small class='d-md-none ms-2'>GitHub</small>\n          </a>\n        </li>\n        <li class='nav-item col-6 col-md-auto'>\n          <a class='nav-link p-2' href='https://twitter.com/eonasdan' target='_blank' rel='noopener'>\n            <i class='fa-brands fa-twitter' aria-hidden='true'></i>\n            <small class='d-md-none ms-2'>Twitter</small>\n          </a>\n        </li>\n        <li class='nav-item col-6 col-md-auto'>\n          <a class='nav-link p-2' href='https://discord.gg/BHS9jw9YPf' target='_blank' rel='noopener'>\n            <i class='fa-brands fa-discord' aria-hidden='true'></i>\n            <small class='d-md-none ms-2'>Discord</small>\n          </a>\n        </li>\n        <li class='nav-item col-6 col-md-auto'>\n          <a class='nav-link p-2' href='https://ko-fi.com/eonasdan' target='_blank' rel='noopener'>\n            <i class='fa-solid fa-coffee' aria-hidden='true'></i>\n            <small class='d-md-none ms-2'>Ko-fi</small>\n          </a>\n        </li>\n      </ul>\n\n      <a class='btn btn-bd-download d-lg-inline-block my-2 my-md-0 ms-md-3' href='/6/installing.html'>Download</a>\n    </div>\n  </nav>\n</header>\n\n<nav class='bd-subnavbar py-2' aria-label='Secondary navigation'>\n  <div class='container-xxl d-flex align-items-md-center'>\n    <div class='dropdown ms-3'>\n      <button class='btn btn-bd-light dropdown-toggle' id='bd-versions' data-bs-toggle='dropdown' aria-expanded='false'\n              data-bs-display='static'>\n        <span class='d-none d-lg-inline'>Tempus Dominus</span> v6.0\n      </button>\n      <ul class='dropdown-menu dropdown-menu-end' aria-labelledby='bd-versions'>\n        <li><a class='dropdown-item current' aria-current='true' href='/6/'>Latest (6.9.4)</a></li>\n        <li>\n          <hr class='dropdown-divider'>\n        </li>\n        <li><a class='dropdown-item' href='/5-4/'>v5.39.0 - Bootstrap 4</a></li>\n        <li><a class='dropdown-item' href='/5-3/'>v5 - Bootstrap 3</a></li>\n        <li><a class='dropdown-item' href='/4/'>v4.17.49</a></li>\n        <li>\n          <hr class='dropdown-divider'>\n        </li>\n        <li><a class='dropdown-item' href='/docs/versions/'>All versions</a></li>\n      </ul>\n    </div>\n\n\n    <button class='btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed' type='button'\n            data-bs-toggle='collapse' data-bs-target='#bd-docs-nav' aria-controls='bd-docs-nav' aria-expanded='false'\n            aria-label='Toggle docs navigation'>\n      <i class='fa-solid fa-expand-arrows-alt' aria-hidden='true'></i>\n      <i class='fa-solid fa-compress-arrows-alt' aria-hidden='true'></i>\n    </button>\n  </div>\n</nav>\n\n<div id='outerContainer' class='container-xxl my-md-4 bd-layout'>\n\n</div>\n\n<footer class='bd-footer py-5 mt-5 bg-light'>\n  <div class='container py-5'>\n    <div class='row'>\n      <div class='col-lg-3 mb-3'>\n        <a class='d-inline-flex align-items-center mb-2 link-dark text-decoration-none' href='/'\n           aria-label='Tempus Dominus'>\n          <img src='https://getdatepicker.com/favicon-32x32.png' alt='home' />\n          <span class='fs-5'>Tempus Dominus</span>\n        </a>\n        <ul class='list-unstyled small text-muted'>\n          <li class='mb-2'>Created by the <a href='https://eonasdan.com'>Eonasdan (Jonathan Peterson)</a> with the help\n            of <a href='https://github.com/Eonasdan/tempus-dominus/graphs/contributors'>our contributors</a>.\n          </li>\n          <li class='mb-2'>Code licensed <a href='https://github.com/Eonasdan/tempus-dominus/blob/master/LICENSE'\n                                            target='_blank' rel='license noopener'>MIT</a>, docs <a\n            href='https://creativecommons.org/licenses/by/3.0/' target='_blank' rel='license noopener'>CC BY 3.0</a>.\n          </li>\n          <li class='mb-2'>Currently v6.9.4</li>\n        </ul>\n      </div>\n      <div class='col-6 col-lg-2 offset-lg-1 mb-3'>\n        <h5>Links</h5>\n        <ul class='list-unstyled'>\n          <li class='mb-2'><a href='/'>Home</a></li>\n          <li class='mb-2'><a href='/docs/6/'>Docs</a></li>\n          <li class='mb-2'><a href='https://eonasdan.com'>Blog</a></li>\n        </ul>\n      </div>\n      <div class='col-6 col-lg-2 mb-3'>\n        <h5>Community</h5>\n        <ul class='list-unstyled'>\n          <li class='mb-2'><a href='https://github.com/Eonasdan/tempus-dominus/issues' target='_blank' rel='noopener'>Issues</a>\n          </li>\n          <li class='mb-2'><a href='https://github.com/Eonasdan/tempus-dominus/discussions' target='_blank'\n                              rel='noopener'>Discussions</a></li>\n          <li class='mb-2'><a href='https://ko-fi.com/eonasdan' target='_blank' rel='noopener'>Support me on Ko-fi</a>\n          </li>\n        </ul>\n      </div>\n    </div>\n  </div>\n</footer>\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/js/solid.min.js\" integrity=\"sha512-dcTe66qF6q/NW1X64tKXnDDcaVyRowrsVQ9wX6u7KSQpYuAl5COzdMIYDg+HqAXhPpIz1LO9ilUCL4qCbHN5Ng==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\"></script>\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/js/brands.min.js\" integrity=\"sha512-1e+6G7fuQ5RdPcZcRTnR3++VY2mjeh0+zFdrD580Ell/XcUw/DQLgad5XSCX+y2p/dmJwboZYBPoiNn77YAL5A==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\"></script>\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/js/fontawesome.min.js\" integrity=\"sha512-j3gF1rYV2kvAKJ0Jo5CdgLgSYS7QYmBVVUjduXdoeBkc4NFV4aSRTi+Rodkiy9ht7ZYEwF+s09S43Z1Y+ujUkA==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\"></script>\n\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/prism.min.js\" integrity=\"sha512-RDQSW3KoqJMiX0L/UBgwBmH1EmRYp8LBOiLaA8rBHIy+7OGP/7Gxg8vbt8wG4ZYd29P0Fnoq6+LOytCqx3cyoQ==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\"></script>\n<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/themes/prism-tomorrow.min.css\" integrity=\"sha512-vswe+cgvic/XBoF1OcM/TeJ2FW0OofqAVdCZiEYkd6dwGXthvkSFWOoGGJgS2CW70VK5dQM5Oh+7ne47s74VTg==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\" />\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/autoloader/prism-autoloader.js\" integrity=\"sha512-F+f/PpuIEHbIF3rrQgkRDU6EN9OmpfDWZiw/94StGTQeQPz9eeDZUWf2mj3/TfRXoiAEqTf/NUs2mGB2EBfDmw==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\"></script>\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/toolbar/prism-toolbar.min.js\" integrity=\"sha512-st608h+ZqzliahyzEpETxzU0f7z7a9acN6AFvYmHvpFhmcFuKT8a22TT5TpKpjDa3pt3Wv7Z3SdQBCBdDPhyWA==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\"></script>\n<script defer src=\"https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js\" integrity=\"sha512-/kVH1uXuObC0iYgxxCKY41JdWOkKOxorFVmip+YVifKsJ4Au/87EisD1wty7vxN2kAhnWh6Yc8o/dSAXj6Oz7A==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\"></script>\n<script defer src=\"https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/line-numbers/prism-line-numbers.min.js\" integrity=\"sha512-BttltKXFyWnGZQcRWj6osIg7lbizJchuAMotOkdLxHxwt/Hyo+cl47bZU0QADg+Qt5DJwni3SbYGXeGMB5cBcw==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\"></script>\n<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/line-numbers/prism-line-numbers.min.css\" integrity=\"sha512-cbQXwDFK7lj2Fqfkuxbo5iD1dSbLlJGXGpfTDqbggqjHJeyzx88I3rfwjS38WJag/ihH7lzuGlGHpDBymLirZQ==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\" />\n<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/toolbar/prism-toolbar.min.css\" integrity=\"sha512-Dqf5696xtofgH089BgZJo2lSWTvev4GFo+gA2o4GullFY65rzQVQLQVlzLvYwTo0Bb2Gpb6IqwxYWtoMonfdhQ==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\" />\n<script>\n  document.addEventListener('DOMContentLoaded', () => {\n    Prism.plugins.autoloader.languages_path = 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/components/';\n  });\n</script>\n\n<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism-tomorrow.min.css'\n      integrity='sha512-vswe+cgvic/XBoF1OcM/TeJ2FW0OofqAVdCZiEYkd6dwGXthvkSFWOoGGJgS2CW70VK5dQM5Oh+7ne47s74VTg=='\n      crossorigin='anonymous' />\n\n<script src='https://storage.ko-fi.com/cdn/scripts/overlay-widget.js'></script>\n<script defer>\n  kofiWidgetOverlay.draw('eonasdan', {\n    'type': 'floating-chat',\n    'floating-chat.donateButton.text': 'Support me',\n    'floating-chat.donateButton.background-color': '#323842',\n    'floating-chat.donateButton.text-color': '#fff'\n  });\n</script>\n<!-- Google tag (gtag.js) -->\n<script async src=\"https://www.googletagmanager.com/gtag/js?id=G-CL5K7E80FB\"></script>\n<script>\n  if (location.hostname === 'getdatepicker.com') {\n    window.dataLayer = window.dataLayer || [];\n    function gtag(){dataLayer.push(arguments);}\n    gtag('js', new Date());\n\n    gtag('config', 'G-CL5K7E80FB');\n  }\n</script>\n<link rel='stylesheet' href='/css/carbon.css' />\n</body>\n</html>\n"
  },
  {
    "path": "src/js/actions.ts",
    "content": "import { DateTime, Unit } from './datetime';\nimport Collapse from './display/collapse';\nimport Namespace from './utilities/namespace';\nimport Dates from './dates';\nimport Validation from './validation';\nimport Display from './display';\nimport { EventEmitters } from './utilities/event-emitter';\nimport { serviceLocator } from './utilities/service-locator.js';\nimport ActionTypes from './utilities/action-types';\nimport CalendarModes from './utilities/calendar-modes';\nimport { OptionsStore } from './utilities/optionsStore';\n\n/**\n * Logic for various click actions\n */\nexport default class Actions {\n  private optionsStore: OptionsStore;\n  private validation: Validation;\n  private dates: Dates;\n  private display: Display;\n  private _eventEmitters: EventEmitters;\n\n  constructor() {\n    this.optionsStore = serviceLocator.locate(OptionsStore);\n    this.dates = serviceLocator.locate(Dates);\n    this.validation = serviceLocator.locate(Validation);\n    this.display = serviceLocator.locate(Display);\n    this._eventEmitters = serviceLocator.locate(EventEmitters);\n\n    this._eventEmitters.action.subscribe((result) => {\n      this.do(result.e, result.action);\n    });\n  }\n\n  /**\n   * Performs the selected `action`. See ActionTypes\n   * @param e This is normally a click event\n   * @param action If not provided, then look for a [data-action]\n   */\n  //eslint-disable-next-line @typescript-eslint/no-explicit-any\n  do(e: any, action?: ActionTypes) {\n    const currentTarget = e?.currentTarget as HTMLElement;\n    if (currentTarget?.classList?.contains(Namespace.css.disabled)) return;\n    action = action || (currentTarget?.dataset?.action as ActionTypes);\n    const lastPicked = (this.dates.lastPicked || this.optionsStore.viewDate)\n      .clone;\n\n    switch (action) {\n      case ActionTypes.next:\n      case ActionTypes.previous:\n        this.handleNextPrevious(action);\n        break;\n      case ActionTypes.changeCalendarView:\n        this.display._showMode(1);\n        this.display._updateCalendarHeader();\n        break;\n      case ActionTypes.selectMonth:\n      case ActionTypes.selectYear:\n      case ActionTypes.selectDecade:\n        this.handleSelectCalendarMode(action, currentTarget);\n        break;\n      case ActionTypes.selectDay:\n        this.handleSelectDay(currentTarget);\n        break;\n      case ActionTypes.selectHour: {\n        let hour = +currentTarget.dataset.value;\n        if (lastPicked.hours >= 12 && this.optionsStore.isTwelveHour)\n          hour += 12;\n        lastPicked.hours = hour;\n        this.dates.setValue(lastPicked, this.dates.lastPickedIndex);\n        this.hideOrClock(e);\n        break;\n      }\n      case ActionTypes.selectMinute: {\n        lastPicked.minutes = +currentTarget.dataset.value;\n        this.dates.setValue(lastPicked, this.dates.lastPickedIndex);\n        this.hideOrClock(e);\n        break;\n      }\n      case ActionTypes.selectSecond: {\n        lastPicked.seconds = +currentTarget.dataset.value;\n        this.dates.setValue(lastPicked, this.dates.lastPickedIndex);\n        this.hideOrClock(e);\n        break;\n      }\n      case ActionTypes.incrementHours:\n        this.manipulateAndSet(lastPicked, Unit.hours);\n        break;\n      case ActionTypes.incrementMinutes:\n        this.manipulateAndSet(\n          lastPicked,\n          Unit.minutes,\n          this.optionsStore.options.stepping\n        );\n        break;\n      case ActionTypes.incrementSeconds:\n        this.manipulateAndSet(lastPicked, Unit.seconds);\n        break;\n      case ActionTypes.decrementHours:\n        this.manipulateAndSet(lastPicked, Unit.hours, -1);\n        break;\n      case ActionTypes.decrementMinutes:\n        this.manipulateAndSet(\n          lastPicked,\n          Unit.minutes,\n          this.optionsStore.options.stepping * -1\n        );\n        break;\n      case ActionTypes.decrementSeconds:\n        this.manipulateAndSet(lastPicked, Unit.seconds, -1);\n        break;\n      case ActionTypes.toggleMeridiem:\n        this.manipulateAndSet(\n          lastPicked,\n          Unit.hours,\n          this.dates.lastPicked.hours >= 12 ? -12 : 12\n        );\n        break;\n      case ActionTypes.togglePicker:\n        this.handleToggle(currentTarget);\n        break;\n      case ActionTypes.showClock:\n      case ActionTypes.showHours:\n      case ActionTypes.showMinutes:\n      case ActionTypes.showSeconds:\n        //make sure the clock is actually displaying\n        if (\n          !this.optionsStore.options.display.sideBySide &&\n          this.optionsStore.currentView !== 'clock'\n        ) {\n          //hide calendar\n          Collapse.hideImmediately(this.display.dateContainer);\n          //show clock\n          Collapse.showImmediately(this.display.timeContainer);\n        }\n        this.handleShowClockContainers(action);\n        break;\n      case ActionTypes.clear:\n        this.dates.setValue(null);\n        this.display._updateCalendarHeader();\n        break;\n      case ActionTypes.close:\n        this.display.hide();\n        break;\n      case ActionTypes.today: {\n        const day = new DateTime().setLocalization(\n          this.optionsStore.options.localization\n        );\n        this._eventEmitters.updateViewDate.emit(day);\n\n        if (!this.validation.isValid(day, Unit.date)) break;\n\n        if (this.optionsStore.options.dateRange) this.handleDateRange(day);\n        else if (this.optionsStore.options.multipleDates) {\n          this.handleMultiDate(day);\n        } else {\n          this.dates.setValue(day, this.dates.lastPickedIndex);\n        }\n        break;\n      }\n    }\n  }\n\n  private handleShowClockContainers(action: ActionTypes) {\n    if (!this.display._hasTime) {\n      Namespace.errorMessages.throwError(\n        'Cannot show clock containers when time is disabled.'\n      );\n      /* ignore coverage: should never happen */\n      return;\n    }\n\n    this.optionsStore.currentView = 'clock';\n    this.display.widget\n      .querySelectorAll(`.${Namespace.css.timeContainer} > div`)\n      .forEach(\n        (htmlElement: HTMLElement) => (htmlElement.style.display = 'none')\n      );\n\n    let classToUse = '';\n    switch (action) {\n      case ActionTypes.showClock:\n        classToUse = Namespace.css.clockContainer;\n        this.display._update('clock');\n        break;\n      case ActionTypes.showHours:\n        classToUse = Namespace.css.hourContainer;\n        this.display._update(Unit.hours);\n        break;\n      case ActionTypes.showMinutes:\n        classToUse = Namespace.css.minuteContainer;\n        this.display._update(Unit.minutes);\n        break;\n      case ActionTypes.showSeconds:\n        classToUse = Namespace.css.secondContainer;\n        this.display._update(Unit.seconds);\n        break;\n    }\n\n    const element = this.display.widget.getElementsByClassName(\n      classToUse\n    )[0] as HTMLElement;\n    element.style.display = 'grid';\n    (<HTMLElement>element.children[0])?.focus();\n  }\n\n  private handleNextPrevious(action: ActionTypes) {\n    const { unit, step } =\n      CalendarModes[this.optionsStore.currentCalendarViewMode];\n    if (action === ActionTypes.next)\n      this.optionsStore.viewDate.manipulate(step, unit);\n    else this.optionsStore.viewDate.manipulate(step * -1, unit);\n    this._eventEmitters.viewUpdate.emit();\n\n    this.display._showMode();\n  }\n\n  /**\n   * After setting the value it will either show the clock or hide the widget.\n   * @param e\n   */\n  private hideOrClock(e) {\n    if (\n      !this.optionsStore.isTwelveHour &&\n      !this.optionsStore.options.display.components.minutes &&\n      !this.optionsStore.options.display.keepOpen &&\n      !this.optionsStore.options.display.inline\n    ) {\n      this.display.hide();\n    } else {\n      this.do(e, ActionTypes.showClock);\n    }\n  }\n\n  /**\n   * Common function to manipulate {@link lastPicked} by `unit`.\n   * @param lastPicked\n   * @param unit\n   * @param value Value to change by\n   */\n  private manipulateAndSet(lastPicked: DateTime, unit: Unit, value = 1) {\n    const newDate = lastPicked.manipulate(value, unit);\n    if (this.validation.isValid(newDate, unit)) {\n      this.dates.setValue(newDate, this.dates.lastPickedIndex);\n    }\n  }\n\n  private handleSelectCalendarMode(\n    action:\n      | ActionTypes.selectMonth\n      | ActionTypes.selectYear\n      | ActionTypes.selectDecade,\n    currentTarget: HTMLElement\n  ) {\n    const value = +currentTarget.dataset.value;\n    switch (action) {\n      case ActionTypes.selectMonth:\n        this.optionsStore.viewDate.month = value;\n        break;\n      case ActionTypes.selectYear:\n      case ActionTypes.selectDecade:\n        this.optionsStore.viewDate.year = value;\n        break;\n    }\n\n    if (\n      this.optionsStore.currentCalendarViewMode ===\n      this.optionsStore.minimumCalendarViewMode\n    ) {\n      this.dates.setValue(\n        this.optionsStore.viewDate,\n        this.dates.lastPickedIndex\n      );\n\n      if (!this.optionsStore.options.display.inline) {\n        this.display.hide();\n      }\n    } else {\n      this.display._showMode(-1);\n    }\n  }\n\n  private handleToggle(currentTarget: HTMLElement) {\n    if (\n      currentTarget.getAttribute('title') ===\n      this.optionsStore.options.localization.selectDate\n    ) {\n      currentTarget.setAttribute(\n        'title',\n        this.optionsStore.options.localization.selectTime\n      );\n      currentTarget.innerHTML = this.display._iconTag(\n        this.optionsStore.options.display.icons.time\n      ).outerHTML;\n\n      this.display._updateCalendarHeader();\n      this.optionsStore.refreshCurrentView();\n    } else {\n      currentTarget.setAttribute(\n        'title',\n        this.optionsStore.options.localization.selectDate\n      );\n      currentTarget.innerHTML = this.display._iconTag(\n        this.optionsStore.options.display.icons.date\n      ).outerHTML;\n      if (this.display._hasTime) {\n        this.handleShowClockContainers(ActionTypes.showClock);\n        this.display._update('clock');\n      }\n    }\n\n    this.display.widget\n      .querySelectorAll(\n        `.${Namespace.css.dateContainer}, .${Namespace.css.timeContainer}`\n      )\n      .forEach((htmlElement: HTMLElement) => Collapse.toggle(htmlElement));\n    this._eventEmitters.viewUpdate.emit();\n    const visible = this.display.widget.querySelector(\n      `.${Namespace.css.collapsing} > div[style*=\"display: grid\"]`\n    ) as HTMLElement;\n    visible?.focus();\n  }\n\n  private handleSelectDay(currentTarget: HTMLElement) {\n    const day = this.optionsStore.viewDate.clone;\n    if (currentTarget.classList.contains(Namespace.css.old)) {\n      day.manipulate(-1, Unit.month);\n    }\n    if (currentTarget.classList.contains(Namespace.css.new)) {\n      day.manipulate(1, Unit.month);\n    }\n\n    day.date = +currentTarget.dataset.day;\n    if (this.optionsStore.options.dateRange) this.handleDateRange(day);\n    else if (this.optionsStore.options.multipleDates) {\n      this.handleMultiDate(day);\n    } else {\n      this.dates.setValue(day, this.dates.lastPickedIndex);\n    }\n\n    if (\n      !this.display._hasTime &&\n      !this.optionsStore.options.display.keepOpen &&\n      !this.optionsStore.options.display.inline &&\n      !this.optionsStore.options.multipleDates &&\n      !this.optionsStore.options.dateRange\n    ) {\n      this.display.hide();\n    }\n  }\n\n  private handleMultiDate(day: DateTime) {\n    let index = this.dates.pickedIndex(day, Unit.date);\n    if (index !== -1) {\n      this.dates.setValue(null, index); //deselect multi-date\n    } else {\n      index = this.dates.lastPickedIndex + 1;\n      if (this.dates.picked.length === 0) index = 0;\n\n      this.dates.setValue(day, index);\n    }\n  }\n\n  private handleDateRange(day: DateTime) {\n    switch (this.dates.picked.length) {\n      case 2: {\n        this.dates.clear();\n        break;\n      }\n      case 1: {\n        const other = this.dates.picked[0];\n        if (day.getTime() === other.getTime()) {\n          this.dates.clear();\n          break;\n        }\n        if (day.isBefore(other)) {\n          this.dates.setValue(day, 0);\n          this.dates.setValue(other, 1);\n          return;\n        } else {\n          this.dates.setValue(day, 1);\n          return;\n        }\n      }\n    }\n\n    this.dates.setValue(day, 0);\n  }\n}\n"
  },
  {
    "path": "src/js/dates.ts",
    "content": "import { DateTime, getFormatByUnit, Unit } from './datetime';\nimport Namespace from './utilities/namespace';\nimport {\n  ChangeEvent,\n  FailEvent,\n  ParseErrorEvent,\n} from './utilities/event-types';\nimport Validation from './validation';\nimport { serviceLocator } from './utilities/service-locator';\nimport { EventEmitters } from './utilities/event-emitter';\nimport { OptionsStore } from './utilities/optionsStore';\nimport { OptionConverter } from './utilities/optionConverter';\n\nexport default class Dates {\n  private _dates: DateTime[] = [];\n  private optionsStore: OptionsStore;\n  private validation: Validation;\n  private _eventEmitters: EventEmitters;\n\n  constructor() {\n    this.optionsStore = serviceLocator.locate(OptionsStore);\n    this.validation = serviceLocator.locate(Validation);\n    this._eventEmitters = serviceLocator.locate(EventEmitters);\n  }\n\n  /**\n   * Returns the array of selected dates\n   */\n  get picked(): DateTime[] {\n    return [...this._dates];\n  }\n\n  /**\n   * Returns the last picked value.\n   */\n  get lastPicked(): DateTime {\n    return this._dates[this.lastPickedIndex]?.clone;\n  }\n\n  /**\n   * Returns the length of picked dates -1 or 0 if none are selected.\n   */\n  get lastPickedIndex(): number {\n    if (this._dates.length === 0) return 0;\n    return this._dates.length - 1;\n  }\n\n  /**\n   * Formats a DateTime object to a string. Used when setting the input value.\n   * @param date\n   */\n  formatInput(date: DateTime): string {\n    if (!date) return '';\n    date.localization = this.optionsStore.options.localization;\n    return date.format();\n  }\n\n  /**\n   * parse the value into a DateTime object.\n   * this can be overwritten to supply your own parsing.\n   */\n  //eslint-disable-next-line @typescript-eslint/no-explicit-any\n  parseInput(value: any): DateTime {\n    try {\n      return OptionConverter.dateConversion(\n        value,\n        'input',\n        this.optionsStore.options.localization\n      );\n    } catch (e) {\n      this._eventEmitters.triggerEvent.emit({\n        type: Namespace.events.error,\n        reason: Namespace.errorMessages.failedToParseInput,\n        format: this.optionsStore.options.localization.format,\n        value: value,\n      } as ParseErrorEvent);\n      return undefined;\n    }\n  }\n\n  /**\n   * Tries to convert the provided value to a DateTime object.\n   * If value is null|undefined then clear the value of the provided index (or 0).\n   * @param value Value to convert or null|undefined\n   * @param index When using multidates this is the index in the array\n   */\n  //eslint-disable-next-line @typescript-eslint/no-explicit-any\n  setFromInput(value: any, index?: number) {\n    if (!value) {\n      this.setValue(undefined, index);\n      return;\n    }\n    const converted = this.parseInput(value);\n    if (converted) {\n      converted.setLocalization(this.optionsStore.options.localization);\n      this.setValue(converted, index);\n    }\n  }\n\n  /**\n   * Adds a new DateTime to selected dates array\n   * @param date\n   */\n  add(date: DateTime): void {\n    this._dates.push(date);\n  }\n\n  /**\n   * Returns true if the `targetDate` is part of the selected dates array.\n   * If `unit` is provided then a granularity to that unit will be used.\n   * @param targetDate\n   * @param unit\n   */\n  isPicked(targetDate: DateTime, unit?: Unit): boolean {\n    if (!DateTime.isValid(targetDate)) return false;\n    if (!unit)\n      return this._dates.find((x) => x.isSame(targetDate)) !== undefined;\n\n    const format = getFormatByUnit(unit);\n\n    const innerDateFormatted = targetDate.format(format);\n\n    return (\n      this._dates\n        .map((x) => x.format(format))\n        .find((x) => x === innerDateFormatted) !== undefined\n    );\n  }\n\n  /**\n   * Returns the index at which `targetDate` is in the array.\n   * This is used for updating or removing a date when multi-date is used\n   * If `unit` is provided then a granularity to that unit will be used.\n   * @param targetDate\n   * @param unit\n   */\n  pickedIndex(targetDate: DateTime, unit?: Unit): number {\n    if (!DateTime.isValid(targetDate)) return -1;\n    if (!unit)\n      return this._dates.map((x) => x.valueOf()).indexOf(targetDate.valueOf());\n\n    const format = getFormatByUnit(unit);\n\n    const innerDateFormatted = targetDate.format(format);\n\n    return this._dates.map((x) => x.format(format)).indexOf(innerDateFormatted);\n  }\n\n  /**\n   * Clears all selected dates.\n   */\n  clear() {\n    this.optionsStore.unset = true;\n    this._eventEmitters.triggerEvent.emit({\n      type: Namespace.events.change,\n      date: undefined,\n      oldDate: this.lastPicked,\n      isClear: true,\n      isValid: true,\n    } as ChangeEvent);\n    this._dates = [];\n    if (this.optionsStore.input) this.optionsStore.input.value = '';\n    this._eventEmitters.updateDisplay.emit('all');\n  }\n\n  /**\n   * Find the \"book end\" years given a `year` and a `factor`\n   * @param factor e.g. 100 for decades\n   * @param year e.g. 2021\n   */\n  static getStartEndYear(\n    factor: number,\n    year: number\n  ): [number, number, number] {\n    const step = factor / 10,\n      startYear = Math.floor(year / factor) * factor,\n      endYear = startYear + step * 9,\n      focusValue = Math.floor(year / step) * step;\n    return [startYear, endYear, focusValue];\n  }\n\n  updateInput(target?: DateTime) {\n    if (!this.optionsStore.input) return;\n\n    let newValue = this.formatInput(target);\n    if (\n      this.optionsStore.options.multipleDates ||\n      this.optionsStore.options.dateRange\n    ) {\n      newValue = this._dates\n        .map((d) => this.formatInput(d))\n        .join(this.optionsStore.options.multipleDatesSeparator);\n    }\n    if (this.optionsStore.input.value != newValue)\n      this.optionsStore.input.value = newValue;\n  }\n\n  /**\n   * Attempts to either clear or set the `target` date at `index`.\n   * If the `target` is null then the date will be cleared.\n   * If multi-date is being used then it will be removed from the array.\n   * If `target` is valid and multi-date is used then if `index` is\n   * provided the date at that index will be replaced, otherwise it is appended.\n   * @param target\n   * @param index\n   */\n  setValue(target?: DateTime, index?: number): void {\n    const noIndex = typeof index === 'undefined',\n      isClear = !target && noIndex;\n    let oldDate = this.optionsStore.unset ? null : this._dates[index]?.clone;\n    if (!oldDate && !this.optionsStore.unset && noIndex && isClear) {\n      oldDate = this.lastPicked;\n    }\n\n    if (target && oldDate?.isSame(target)) {\n      this.updateInput(target);\n      return;\n    }\n\n    // case of calling setValue(null)\n    if (!target) {\n      this._setValueNull(isClear, index, oldDate);\n      return;\n    }\n\n    index = index || 0;\n    target = target.clone;\n\n    // minute stepping is being used, force the minute to the closest value\n    if (this.optionsStore.options.stepping !== 1) {\n      target.minutes =\n        Math.round(target.minutes / this.optionsStore.options.stepping) *\n        this.optionsStore.options.stepping;\n      target.startOf(Unit.minutes);\n    }\n\n    const onUpdate = (isValid: boolean) => {\n      this._dates[index] = target;\n      this._eventEmitters.updateViewDate.emit(target.clone);\n\n      this.updateInput(target);\n\n      this.optionsStore.unset = false;\n      this._eventEmitters.updateDisplay.emit('all');\n      this._eventEmitters.triggerEvent.emit({\n        type: Namespace.events.change,\n        date: target,\n        oldDate,\n        isClear,\n        isValid: isValid,\n      } as ChangeEvent);\n    };\n\n    if (\n      this.validation.isValid(target) &&\n      this.validation.dateRangeIsValid(this.picked, index, target)\n    ) {\n      onUpdate(true);\n      return;\n    }\n\n    if (this.optionsStore.options.keepInvalid) {\n      onUpdate(false);\n    }\n\n    this._eventEmitters.triggerEvent.emit({\n      type: Namespace.events.error,\n      reason: Namespace.errorMessages.failedToSetInvalidDate,\n      date: target,\n      oldDate,\n    } as FailEvent);\n  }\n\n  private _setValueNull(isClear: boolean, index: number, oldDate: DateTime) {\n    if (\n      !this.optionsStore.options.multipleDates ||\n      this._dates.length === 1 ||\n      isClear\n    ) {\n      this.optionsStore.unset = true;\n      this._dates = [];\n    } else {\n      this._dates.splice(index, 1);\n    }\n\n    this.updateInput();\n\n    this._eventEmitters.triggerEvent.emit({\n      type: Namespace.events.change,\n      date: undefined,\n      oldDate,\n      isClear,\n      isValid: true,\n    } as ChangeEvent);\n\n    this._eventEmitters.updateDisplay.emit('all');\n  }\n}\n"
  },
  {
    "path": "src/js/datetime.ts",
    "content": "import { FormatLocalization } from './utilities/options';\nimport Namespace from './utilities/namespace';\nimport DefaultFormatLocalization from './utilities/default-format-localization';\n\ntype parsedTime = {\n  afternoon?: boolean;\n  year?: number;\n  month?: number;\n  day?: number;\n  hours?: number;\n  minutes?: number;\n  seconds?: number;\n  milliseconds?: number;\n  zone?: {\n    offset: number;\n  };\n};\n\nexport enum Unit {\n  seconds = 'seconds',\n  minutes = 'minutes',\n  hours = 'hours',\n  date = 'date',\n  month = 'month',\n  year = 'year',\n}\n\nconst twoDigitTemplate = {\n  month: '2-digit',\n  day: '2-digit',\n  year: 'numeric',\n  hour: '2-digit',\n  minute: '2-digit',\n  second: '2-digit',\n};\n\nexport interface DateTimeFormatOptions extends Intl.DateTimeFormatOptions {\n  timeStyle?: 'short' | 'medium' | 'long';\n  dateStyle?: 'short' | 'medium' | 'long' | 'full';\n  numberingSystem?: string;\n}\n\n/**\n * Returns an Intl format object based on the provided object\n * @param unit\n */\nexport const getFormatByUnit = (unit: Unit): object => {\n  switch (unit) {\n    case 'date':\n      return { dateStyle: 'short' };\n    case 'month':\n      return {\n        month: 'numeric',\n        year: 'numeric',\n      };\n    case 'year':\n      return { year: 'numeric' };\n  }\n};\n\n/**\n * Attempts to guess the hour cycle of the given local\n * @param locale\n */\nexport const guessHourCycle = (locale: string): Intl.LocaleHourCycleKey => {\n  if (!locale) return 'h12';\n\n  // noinspection SpellCheckingInspection\n  const template = {\n    hour: '2-digit',\n    minute: '2-digit',\n    numberingSystem: 'latn',\n  };\n\n  const dt = new DateTime().setLocalization({ locale });\n  dt.hours = 0;\n\n  const start = dt.parts(undefined, template).hour;\n\n  //midnight is 12 so en-US style 12 AM\n  if (start === '12') return 'h12';\n  //midnight is 24 is from 00-24\n  if (start === '24') return 'h24';\n\n  dt.hours = 23;\n  const end = dt.parts(undefined, template).hour;\n\n  //if midnight is 00 and hour 23 is 11 then\n  if (start === '00' && end === '11') return 'h11';\n\n  if (start === '00' && end === '23') return 'h23';\n\n  console.warn(\n    `couldn't determine hour cycle for ${locale}. start: ${start}. end: ${end}`\n  );\n\n  return undefined;\n};\n\ninterface FormatMatch {\n  parser: (obj: parsedTime, input: number) => void;\n  pattern?: RegExp;\n}\n\ninterface FormatMatchString {\n  parser: (obj: parsedTime, input: string) => void;\n  pattern?: RegExp;\n}\n\ninterface FormatExpression {\n  t: FormatMatchString;\n  T: FormatMatchString;\n  fff: FormatMatch;\n  s: FormatMatch;\n  ss: FormatMatch;\n  m: FormatMatch;\n  mm: FormatMatch;\n  H: FormatMatch;\n  h: FormatMatch;\n  HH: FormatMatch;\n  hh: FormatMatch;\n  d: FormatMatch;\n  dd: FormatMatch;\n  Do: FormatMatchString;\n  M: FormatMatch;\n  MM: FormatMatch;\n  MMM: FormatMatchString;\n  MMMM: FormatMatchString;\n  y: FormatMatch;\n  yy: FormatMatch;\n  yyyy: FormatMatch;\n}\n\n/**\n * For the most part this object behaves exactly the same way\n * as the native Date object with a little extra spice.\n */\nexport class DateTime extends Date {\n  localization: FormatLocalization = DefaultFormatLocalization;\n\n  /**\n   * Chainable way to set the {@link locale}\n   * @param value\n   * @deprecated use setLocalization with a FormatLocalization object instead\n   */\n  setLocale(value: string): this {\n    if (!this.localization) {\n      this.localization = DefaultFormatLocalization;\n      this.localization.locale = value;\n    }\n    return this;\n  }\n\n  /**\n   * Chainable way to set the {@link localization}\n   * @param value\n   */\n  setLocalization(value: FormatLocalization): this {\n    this.localization = value;\n    return this;\n  }\n\n  /**\n   * Converts a plain JS date object to a DateTime object.\n   * Doing this allows access to format, etc.\n   * @param  date\n   * @param locale this parameter is deprecated. Use formatLocalization instead.\n   * @param formatLocalization\n   */\n  static convert(\n    date: Date,\n    locale = 'default',\n    formatLocalization: FormatLocalization = undefined\n  ): DateTime {\n    if (!date) throw new Error(`A date is required`);\n\n    if (!formatLocalization) {\n      formatLocalization = DefaultFormatLocalization;\n      formatLocalization.locale = locale;\n    }\n\n    return new DateTime(\n      date.getFullYear(),\n      date.getMonth(),\n      date.getDate(),\n      date.getHours(),\n      date.getMinutes(),\n      date.getSeconds(),\n      date.getMilliseconds()\n    ).setLocalization(formatLocalization);\n  }\n\n  /**\n   * Native date manipulations are not pure functions. This function creates a duplicate of the DateTime object.\n   */\n  get clone() {\n    return new DateTime(\n      this.year,\n      this.month,\n      this.date,\n      this.hours,\n      this.minutes,\n      this.seconds,\n      this.getMilliseconds()\n    ).setLocalization(this.localization);\n  }\n\n  static isValid(d): boolean {\n    if (d === undefined || JSON.stringify(d) === 'null') return false;\n    if (d.constructor.name === DateTime.name) return true;\n    return false;\n  }\n\n  /**\n   * Sets the current date to the start of the {@link unit} provided\n   * Example: Consider a date of \"April 30, 2021, 11:45:32.984 AM\" => new DateTime(2021, 3, 30, 11, 45, 32, 984).startOf('month')\n   * would return April 1, 2021, 12:00:00.000 AM (midnight)\n   * @param unit\n   * @param startOfTheWeek Allows for the changing the start of the week.\n   */\n  startOf(unit: Unit | 'weekDay', startOfTheWeek = 0): this {\n    if (this[unit] === undefined)\n      throw new Error(`Unit '${unit}' is not valid`);\n    switch (unit) {\n      case 'seconds':\n        this.setMilliseconds(0);\n        break;\n      case 'minutes':\n        this.setSeconds(0, 0);\n        break;\n      case 'hours':\n        this.setMinutes(0, 0, 0);\n        break;\n      case 'date':\n        this.setHours(0, 0, 0, 0);\n        break;\n      case 'weekDay': {\n        this.startOf(Unit.date);\n        if (this.weekDay === startOfTheWeek) break;\n        const goBack = (this.weekDay - startOfTheWeek + 7) % 7;\n        this.manipulate(goBack * -1, Unit.date);\n        break;\n      }\n      case 'month':\n        this.startOf(Unit.date);\n        this.setDate(1);\n        break;\n      case 'year':\n        this.startOf(Unit.date);\n        this.setMonth(0, 1);\n        break;\n    }\n    return this;\n  }\n\n  /**\n   * Sets the current date to the end of the {@link unit} provided\n   * Example: Consider a date of \"April 30, 2021, 11:45:32.984 AM\" => new DateTime(2021, 3, 30, 11, 45, 32, 984).endOf('month')\n   * would return April 30, 2021, 11:59:59.999 PM\n   * @param unit\n   * @param startOfTheWeek\n   */\n  endOf(unit: Unit | 'weekDay', startOfTheWeek = 0): this {\n    if (this[unit] === undefined)\n      throw new Error(`Unit '${unit}' is not valid`);\n    switch (unit) {\n      case 'seconds':\n        this.setMilliseconds(999);\n        break;\n      case 'minutes':\n        this.setSeconds(59, 999);\n        break;\n      case 'hours':\n        this.setMinutes(59, 59, 999);\n        break;\n      case 'date':\n        this.setHours(23, 59, 59, 999);\n        break;\n      case 'weekDay': {\n        this.endOf(Unit.date);\n        const endOfWeek = 6 + startOfTheWeek;\n        if (this.weekDay === endOfWeek) break;\n        this.manipulate(endOfWeek - this.weekDay, Unit.date);\n        break;\n      }\n      case 'month':\n        this.endOf(Unit.date);\n        this.manipulate(1, Unit.month);\n        this.setDate(0);\n        break;\n      case 'year':\n        this.endOf(Unit.date);\n        this.setMonth(11, 31);\n        break;\n    }\n    return this;\n  }\n\n  /**\n   * Change a {@link unit} value. Value can be positive or negative\n   * Example: Consider a date of \"April 30, 2021, 11:45:32.984 AM\" => new DateTime(2021, 3, 30, 11, 45, 32, 984).manipulate(1, 'month')\n   * would return May 30, 2021, 11:45:32.984 AM\n   * @param value A positive or negative number\n   * @param unit\n   */\n  manipulate(value: number, unit: Unit): this {\n    if (this[unit] === undefined)\n      throw new Error(`Unit '${unit}' is not valid`);\n    this[unit] += value;\n    return this;\n  }\n\n  /**\n   * Return true if {@link compare} is before this date\n   * @param compare The Date/DateTime to compare\n   * @param unit If provided, uses {@link startOf} for\n   * comparison.\n   */\n  isBefore(compare: DateTime, unit?: Unit): boolean {\n    // If the comparisons is undefined, return false\n    if (!DateTime.isValid(compare)) return false;\n\n    if (!unit) return this.valueOf() < compare.valueOf();\n    if (this[unit] === undefined)\n      throw new Error(`Unit '${unit}' is not valid`);\n    return (\n      this.clone.startOf(unit).valueOf() < compare.clone.startOf(unit).valueOf()\n    );\n  }\n\n  /**\n   * Return true if {@link compare} is after this date\n   * @param compare The Date/DateTime to compare\n   * @param unit If provided, uses {@link startOf} for\n   * comparison.\n   */\n  isAfter(compare: DateTime, unit?: Unit): boolean {\n    // If the comparisons is undefined, return false\n    if (!DateTime.isValid(compare)) return false;\n\n    if (!unit) return this.valueOf() > compare.valueOf();\n    if (this[unit] === undefined)\n      throw new Error(`Unit '${unit}' is not valid`);\n    return (\n      this.clone.startOf(unit).valueOf() > compare.clone.startOf(unit).valueOf()\n    );\n  }\n\n  /**\n   * Return true if {@link compare} is same this date\n   * @param compare The Date/DateTime to compare\n   * @param unit If provided, uses {@link startOf} for\n   * comparison.\n   */\n  isSame(compare: DateTime, unit?: Unit): boolean {\n    // If the comparisons is undefined, return false\n    if (!DateTime.isValid(compare)) return false;\n\n    if (!unit) return this.valueOf() === compare.valueOf();\n    if (this[unit] === undefined)\n      throw new Error(`Unit '${unit}' is not valid`);\n    compare = DateTime.convert(compare);\n    return (\n      this.clone.startOf(unit).valueOf() === compare.startOf(unit).valueOf()\n    );\n  }\n\n  /**\n   * Check if this is between two other DateTimes, optionally looking at unit scale. The match is exclusive.\n   * @param left\n   * @param right\n   * @param unit.\n   * @param inclusivity. A [ indicates inclusion of a value. A ( indicates exclusion.\n   * If the inclusivity parameter is used, both indicators must be passed.\n   */\n  isBetween(\n    left: DateTime,\n    right: DateTime,\n    unit?: Unit,\n    inclusivity: '()' | '[]' | '(]' | '[)' = '()'\n  ): boolean {\n    // If one of the comparisons is undefined, return false\n    if (!DateTime.isValid(left) || !DateTime.isValid(right)) return false;\n    // If a unit is provided and is not a valid property of the DateTime object, throw an error\n    if (unit && this[unit] === undefined) {\n      throw new Error(`Unit '${unit}' is not valid`);\n    }\n\n    const leftInclusivity = inclusivity[0] === '(';\n    const rightInclusivity = inclusivity[1] === ')';\n\n    const isLeftInRange = leftInclusivity\n      ? this.isAfter(left, unit)\n      : !this.isBefore(left, unit);\n    const isRightInRange = rightInclusivity\n      ? this.isBefore(right, unit)\n      : !this.isAfter(right, unit);\n\n    return isLeftInRange && isRightInRange;\n  }\n\n  /**\n   * Returns flattened object of the date. Does not include literals\n   * @param locale\n   * @param template\n   */\n  parts(\n    locale = this.localization.locale,\n    template: Record<string, unknown> = { dateStyle: 'full', timeStyle: 'long' }\n  ): Record<string, string> {\n    const parts = {};\n    new Intl.DateTimeFormat(locale, template)\n      .formatToParts(this)\n      .filter((x) => x.type !== 'literal')\n      .forEach((x) => (parts[x.type] = x.value));\n    return parts;\n  }\n\n  /**\n   * Shortcut to Date.getSeconds()\n   */\n  get seconds(): number {\n    return this.getSeconds();\n  }\n\n  /**\n   * Shortcut to Date.setSeconds()\n   */\n  set seconds(value: number) {\n    this.setSeconds(value);\n  }\n\n  /**\n   * Returns two digit hours\n   */\n  get secondsFormatted(): string {\n    return this.parts(undefined, twoDigitTemplate).second;\n  }\n\n  /**\n   * Shortcut to Date.getMinutes()\n   */\n  get minutes(): number {\n    return this.getMinutes();\n  }\n\n  /**\n   * Shortcut to Date.setMinutes()\n   */\n  set minutes(value: number) {\n    this.setMinutes(value);\n  }\n\n  /**\n   * Returns two digit minutes\n   */\n  get minutesFormatted(): string {\n    return this.parts(undefined, twoDigitTemplate).minute;\n  }\n\n  /**\n   * Shortcut to Date.getHours()\n   */\n  get hours(): number {\n    return this.getHours();\n  }\n\n  /**\n   * Shortcut to Date.setHours()\n   */\n  set hours(value: number) {\n    this.setHours(value);\n  }\n\n  /**\n   * Returns two digit hour, e.g. 01...10\n   * @param hourCycle Providing an hour cycle will change 00 to 24 depending on the given value.\n   */\n  getHoursFormatted(hourCycle: Intl.LocaleHourCycleKey = 'h12') {\n    return this.parts(undefined, { ...twoDigitTemplate, hourCycle: hourCycle })\n      .hour;\n  }\n\n  /**\n   * Get the meridiem of the date. E.g. AM or PM.\n   * If the {@link locale} provides a \"dayPeriod\" then this will be returned,\n   * otherwise it will return AM or PM.\n   * @param locale\n   */\n  meridiem(locale: string = this.localization.locale): string {\n    return new Intl.DateTimeFormat(locale, {\n      hour: 'numeric',\n      hour12: true,\n    })\n      .formatToParts(this)\n      .find((p) => p.type === 'dayPeriod')?.value;\n  }\n\n  /**\n   * Shortcut to Date.getDate()\n   */\n  get date(): number {\n    return this.getDate();\n  }\n\n  /**\n   * Shortcut to Date.setDate()\n   */\n  set date(value: number) {\n    this.setDate(value);\n  }\n\n  /**\n   * Return two digit date\n   */\n  get dateFormatted(): string {\n    return this.parts(undefined, twoDigitTemplate).day;\n  }\n\n  /**\n   * Shortcut to Date.getDay()\n   */\n  get weekDay(): number {\n    return this.getDay();\n  }\n\n  /**\n   * Shortcut to Date.getMonth()\n   */\n  get month(): number {\n    return this.getMonth();\n  }\n\n  /**\n   * Shortcut to Date.setMonth()\n   */\n  set month(value: number) {\n    const targetMonth = new Date(this.year, value + 1);\n    targetMonth.setDate(0);\n    const endOfMonth = targetMonth.getDate();\n    if (this.date > endOfMonth) {\n      this.date = endOfMonth;\n    }\n    this.setMonth(value);\n  }\n\n  /**\n   * Return two digit, human expected month. E.g. January = 1, December = 12\n   */\n  get monthFormatted(): string {\n    return this.parts(undefined, twoDigitTemplate).month;\n  }\n\n  /**\n   * Shortcut to Date.getFullYear()\n   */\n  get year(): number {\n    return this.getFullYear();\n  }\n\n  /**\n   * Shortcut to Date.setFullYear()\n   */\n  set year(value: number) {\n    this.setFullYear(value);\n  }\n\n  // borrowed a bunch of stuff from Luxon\n  /**\n   * Gets the week of the year\n   */\n  get week(): number {\n    const ordinal = this.computeOrdinal(),\n      weekday = this.getUTCDay();\n\n    let weekNumber = Math.floor((ordinal - weekday + 10) / 7);\n\n    if (weekNumber < 1) {\n      weekNumber = this.weeksInWeekYear();\n    } else if (weekNumber > this.weeksInWeekYear()) {\n      weekNumber = 1;\n    }\n\n    return weekNumber;\n  }\n\n  /**\n   * Returns the number of weeks in the year\n   */\n  weeksInWeekYear() {\n    const p1 =\n        (this.year +\n          Math.floor(this.year / 4) -\n          Math.floor(this.year / 100) +\n          Math.floor(this.year / 400)) %\n        7,\n      last = this.year - 1,\n      p2 =\n        (last +\n          Math.floor(last / 4) -\n          Math.floor(last / 100) +\n          Math.floor(last / 400)) %\n        7;\n    return p1 === 4 || p2 === 3 ? 53 : 52;\n  }\n\n  dateToDataValue(): string {\n    if (!DateTime.isValid(this)) return '';\n\n    return `${this.year}-${this.month.toString().padStart(2, '0')}-${this.date\n      .toString()\n      .padStart(2, '0')}`;\n  }\n\n  /**\n   * Returns true or false depending on if the year is a leap year or not.\n   */\n  get isLeapYear() {\n    return (\n      this.year % 4 === 0 && (this.year % 100 !== 0 || this.year % 400 === 0)\n    );\n  }\n\n  private computeOrdinal() {\n    return (\n      this.date +\n      (this.isLeapYear ? this.leapLadder : this.nonLeapLadder)[this.month]\n    );\n  }\n\n  private nonLeapLadder = [\n    0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334,\n  ];\n  private leapLadder = [0, 31, 60, 91, 121, 152, 182, 213, 244, 274, 305, 335];\n\n  //#region CDF stuff\n\n  private dateTimeRegex =\n    //is regex cannot be simplified beyond what it already is\n    /(\\[[^[\\]]*])|y{1,4}|M{1,4}|d{1,4}|H{1,2}|h{1,2}|t|T|m{1,2}|s{1,2}|f{3}/g; //NOSONAR\n\n  private formattingTokens =\n    /(\\[[^[\\]]*])|([-_:/.,()\\s]+)|(T|t|yyyy|yy?|MM?M?M?|Do|dd?d?d?|hh?|HH?|mm?|ss?)/g; //NOSONAR is regex cannot be simplified beyond what it already is\n\n  /**\n   * Returns a list of month values based on the current locale\n   */\n  private getAllMonths(\n    format: '2-digit' | 'numeric' | 'long' | 'short' | 'narrow' = 'long'\n  ) {\n    const applyFormat = new Intl.DateTimeFormat(this.localization.locale, {\n      month: format,\n    }).format;\n    return [...Array(12).keys()].map((m) => applyFormat(new Date(2021, m)));\n  }\n\n  /**\n   * Replaces an expanded token set (e.g. LT/LTS)\n   */\n  private replaceTokens(formatStr, formats) {\n    /***\n     * _ => match\n     * a => first capture group. Anything between [ and ]\n     * b => second capture group\n     */\n    return formatStr.replace(\n      /(\\[[^[\\]]*])|(LTS?|l{1,4}|L{1,4})/g,\n      (_, a, b) => {\n        const B = b && b.toUpperCase();\n        return a || formats[B] || DefaultFormatLocalization.dateFormats[B];\n      }\n    );\n  }\n\n  private match2 = /\\d\\d/; // 00 - 99\n  private match3 = /\\d{3}/; // 000 - 999\n  private match4 = /\\d{4}/; // 0000 - 9999\n  private match1to2 = /\\d\\d?/; // 0 - 99\n  private matchSigned = /[+-]?\\d+/; // -inf - inf\n  private matchOffset = /[+-]\\d\\d:?(\\d\\d)?|Z/; // +00:00 -00:00 +0000 or -0000 +00 or Z\n  private matchWord = /[^\\d_:/,\\-()\\s]+/; // Word\n\n  private parseTwoDigitYear(input: number) {\n    return input + (input > 68 ? 1900 : 2000);\n  }\n\n  private offsetFromString(input: string) {\n    if (!input) return 0;\n    if (input === 'Z') return 0;\n    const [first, second, third] = input.match(/([+-]|\\d\\d)/g);\n    const minutes = +second * 60 + (+third || 0);\n    const signed = first === '+' ? -minutes : minutes;\n    return minutes === 0 ? 0 : signed; // eslint-disable-line no-nested-ternary\n  }\n\n  /**\n   * z = -4, zz = -04, zzz = -0400\n   * @param date\n   * @param style\n   * @private\n   */\n  private zoneInformation(date: DateTime, style: 'z' | 'zz' | 'zzz') {\n    let name = date\n      .parts(this.localization.locale, { timeZoneName: 'longOffset' })\n      .timeZoneName.replace('GMT', '')\n      .replace(':', '');\n\n    const negative = name.includes('-');\n\n    name = name.replace('-', '');\n\n    if (style === 'z') name = name.substring(1, 2);\n    else if (style === 'zz') name = name.substring(0, 2);\n\n    return `${negative ? '-' : ''}${name}`;\n  }\n\n  private zoneExpressions = [\n    this.matchOffset,\n    (obj, input) => {\n      obj.offset = this.offsetFromString(input);\n    },\n  ];\n\n  private addInput(property) {\n    return (obj, input) => {\n      obj[property] = +input;\n    };\n  }\n\n  private getLocaleAfternoon(): string {\n    return new Intl.DateTimeFormat(this.localization.locale, {\n      hour: 'numeric',\n      hour12: true,\n    })\n      .formatToParts(new Date(2022, 3, 4, 13))\n      .find((p) => p.type === 'dayPeriod')\n      ?.value?.replace(/\\s+/g, ' ');\n  }\n\n  private meridiemMatch(input: string) {\n    return input.toLowerCase() === this.getLocaleAfternoon().toLowerCase();\n  }\n\n  private expressions: FormatExpression = {\n    t: {\n      pattern: undefined, //this.matchWord,\n      parser: (obj, input) => {\n        obj.afternoon = this.meridiemMatch(input);\n      },\n    },\n    T: {\n      pattern: undefined, //this.matchWord,\n      parser: (obj, input) => {\n        obj.afternoon = this.meridiemMatch(input);\n      },\n    },\n    fff: {\n      pattern: this.match3,\n      parser: (obj, input) => {\n        obj.milliseconds = +input;\n      },\n    },\n    s: {\n      pattern: this.match1to2,\n      parser: this.addInput('seconds'),\n    },\n    ss: {\n      pattern: this.match1to2,\n      parser: this.addInput('seconds'),\n    },\n    m: {\n      pattern: this.match1to2,\n      parser: this.addInput('minutes'),\n    },\n    mm: {\n      pattern: this.match1to2,\n      parser: this.addInput('minutes'),\n    },\n    H: {\n      pattern: this.match1to2,\n      parser: this.addInput('hours'),\n    },\n    h: {\n      pattern: this.match1to2,\n      parser: this.addInput('hours'),\n    },\n    HH: {\n      pattern: this.match1to2,\n      parser: this.addInput('hours'),\n    },\n    hh: {\n      pattern: this.match1to2,\n      parser: this.addInput('hours'),\n    },\n    d: {\n      pattern: this.match1to2,\n      parser: this.addInput('day'),\n    },\n    dd: {\n      pattern: this.match2,\n      parser: this.addInput('day'),\n    },\n    Do: {\n      pattern: this.matchWord,\n      parser: (obj, input) => {\n        obj.day = +(input.match(/\\d+/)[0] || 1);\n        if (!this.localization.ordinal) return;\n        for (let i = 1; i <= 31; i += 1) {\n          if (this.localization.ordinal(i).replace(/[[\\]]/g, '') === input) {\n            obj.day = i;\n          }\n        }\n      },\n    },\n    M: {\n      pattern: this.match1to2,\n      parser: this.addInput('month'),\n    },\n    MM: {\n      pattern: this.match2,\n      parser: this.addInput('month'),\n    },\n    MMM: {\n      pattern: this.matchWord,\n      parser: (obj, input) => {\n        const months = this.getAllMonths();\n        const monthsShort = this.getAllMonths('short');\n        const matchIndex =\n          (monthsShort || months.map((_) => _.slice(0, 3))).indexOf(input) + 1;\n        if (matchIndex < 1) {\n          throw new Error();\n        }\n        obj.month = matchIndex % 12 || matchIndex;\n      },\n    },\n    MMMM: {\n      pattern: this.matchWord,\n      parser: (obj, input) => {\n        const months = this.getAllMonths();\n        const matchIndex = months.indexOf(input) + 1;\n        if (matchIndex < 1) {\n          throw new Error();\n        }\n        obj.month = matchIndex % 12 || matchIndex;\n      },\n    },\n    y: {\n      pattern: this.matchSigned,\n      parser: this.addInput('year'),\n    },\n    yy: {\n      pattern: this.match2,\n      parser: (obj, input) => {\n        obj.year = this.parseTwoDigitYear(+input);\n      },\n    },\n    yyyy: {\n      pattern: this.match4,\n      parser: this.addInput('year'),\n    },\n    // z: this.zoneExpressions,\n    // zz: this.zoneExpressions,\n    // zzz: this.zoneExpressions\n  };\n\n  private correctHours(time) {\n    const { afternoon } = time;\n    if (afternoon !== undefined) {\n      const { hours } = time;\n      if (afternoon) {\n        if (hours < 12) {\n          time.hours += 12;\n        }\n      } else if (hours === 12) {\n        time.hours = 0;\n      }\n      delete time.afternoon;\n    }\n  }\n\n  private makeParser(format: string) {\n    format = this.replaceTokens(format, this.localization.dateFormats);\n    const matchArray = format.match(this.formattingTokens);\n    const { length } = matchArray;\n    const expressionArray: (FormatMatch | string)[] = [];\n    for (let i = 0; i < length; i += 1) {\n      const token = matchArray[i];\n      const expression = this.expressions[token] as FormatMatch;\n      if (expression?.parser) {\n        expressionArray[i] = expression;\n      } else {\n        expressionArray[i] = (token as string).replace(/^\\[[^[\\]]*]$/g, '');\n      }\n    }\n\n    return (input: string): parsedTime => {\n      const time = {\n        hours: 0,\n        minutes: 0,\n        seconds: 0,\n        milliseconds: 0,\n      };\n      for (let i = 0, start = 0; i < length; i += 1) {\n        const token = expressionArray[i];\n        if (typeof token === 'string') {\n          start += token.length;\n        } else {\n          const part = input.slice(start);\n          let value = part;\n\n          if (token.pattern) {\n            const match = token.pattern.exec(part);\n            value = match[0];\n          }\n          token.parser.call(this, time, value);\n          input = input.replace(value, '');\n        }\n      }\n      this.correctHours(time);\n      return time;\n    };\n  }\n\n  /**\n   * Attempts to create a DateTime from a string.\n   * @param input date as string\n   * @param localization provides the date template the string is in via the format property\n   */\n  //eslint-disable-next-line @typescript-eslint/no-unused-vars\n  static fromString(input: string, localization: FormatLocalization): DateTime {\n    if (!localization?.format) {\n      Namespace.errorMessages.customDateFormatError('No format was provided');\n    }\n    try {\n      const dt = new DateTime();\n      dt.setLocalization(localization);\n      if (['x', 'X'].indexOf(localization.format) > -1)\n        return new DateTime((localization.format === 'X' ? 1000 : 1) * +input);\n\n      input = input.replace(/\\s+/g, ' ');\n      const parser = dt.makeParser(localization.format);\n      const { year, month, day, hours, minutes, seconds, milliseconds, zone } =\n        parser(input);\n      const d = day || (!year && !month ? dt.getDate() : 1);\n      const y = year || dt.getFullYear();\n      let M = 0;\n      if (!(year && !month)) {\n        M = month > 0 ? month - 1 : dt.getMonth();\n      }\n      if (zone) {\n        return new DateTime(\n          Date.UTC(\n            y,\n            M,\n            d,\n            hours,\n            minutes,\n            seconds,\n            milliseconds + zone.offset * 60 * 1000\n          )\n        );\n      }\n      return new DateTime(y, M, d, hours, minutes, seconds, milliseconds);\n    } catch (e) {\n      Namespace.errorMessages.customDateFormatError(\n        `Unable to parse provided input: ${input}, format: ${localization.format}`\n      );\n    }\n  }\n\n  /**\n   * Returns a string format.\n   * See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat\n   * for valid templates and locale objects\n   * @param template An optional object. If provided, method will use Intl., otherwise the localizations format properties\n   * @param locale Can be a string or an array of strings. Uses browser defaults otherwise.\n   */\n  format(\n    template?: DateTimeFormatOptions | string,\n    locale = this.localization.locale\n  ): string {\n    if (template && typeof template === 'object')\n      return new Intl.DateTimeFormat(locale, template).format(this);\n\n    const formatString = this.replaceTokens(\n      //try template first\n      template ||\n        //otherwise try localization format\n        this.localization.format ||\n        //otherwise try date + time\n        `${DefaultFormatLocalization.dateFormats.L}, ${DefaultFormatLocalization.dateFormats.LT}`,\n      this.localization.dateFormats\n    );\n\n    const formatter = (template) =>\n      new Intl.DateTimeFormat(this.localization.locale, template).format(this);\n\n    if (!this.localization.hourCycle)\n      this.localization.hourCycle = guessHourCycle(this.localization.locale);\n\n    //if the format asks for a twenty-four-hour string but the hour cycle is not, then make a base guess\n    const HHCycle = this.localization.hourCycle.startsWith('h1')\n      ? 'h24'\n      : this.localization.hourCycle;\n    const hhCycle = this.localization.hourCycle.startsWith('h2')\n      ? 'h12'\n      : this.localization.hourCycle;\n\n    const matches = {\n      y: this.year,\n      yy: formatter({ year: '2-digit' }),\n      yyyy: this.year,\n      M: formatter({ month: 'numeric' }),\n      MM: this.monthFormatted,\n      MMM: this.getAllMonths('short')[this.getMonth()],\n      MMMM: this.getAllMonths()[this.getMonth()],\n      d: this.date,\n      dd: this.dateFormatted,\n      ddd: formatter({ weekday: 'short' }),\n      dddd: formatter({ weekday: 'long' }),\n      H: this.getHours(),\n      HH: this.getHoursFormatted(HHCycle),\n      h: this.hours > 12 ? this.hours - 12 : this.hours,\n      hh: this.getHoursFormatted(hhCycle),\n      t: this.meridiem(),\n      T: this.meridiem().toUpperCase(),\n      m: this.minutes,\n      mm: this.minutesFormatted,\n      s: this.seconds,\n      ss: this.secondsFormatted,\n      fff: this.getMilliseconds(),\n      // z: this.zoneInformation(dateTime, 'z'), //-4\n      // zz: this.zoneInformation(dateTime, 'zz'), //-04\n      // zzz: this.zoneInformation(dateTime, 'zzz') //-0400\n    };\n\n    return formatString\n      .replace(this.dateTimeRegex, (match, $1) => {\n        return $1 || matches[match];\n      })\n      .replace(/\\[/g, '')\n      .replace(/]/g, '');\n  }\n\n  //#endregion CDF stuff\n}\n"
  },
  {
    "path": "src/js/display/calendar/date-display.ts",
    "content": "import { DateTime, Unit } from '../../datetime';\nimport Namespace from '../../utilities/namespace';\nimport Validation from '../../validation';\nimport Dates from '../../dates';\nimport { Paint } from '../index';\nimport { serviceLocator } from '../../utilities/service-locator';\nimport ActionTypes from '../../utilities/action-types';\nimport { OptionsStore } from '../../utilities/optionsStore';\n\n/**\n * Creates and updates the grid for `date`\n */\nexport default class DateDisplay {\n  private optionsStore: OptionsStore;\n  private dates: Dates;\n  private validation: Validation;\n\n  constructor() {\n    this.optionsStore = serviceLocator.locate(OptionsStore);\n    this.dates = serviceLocator.locate(Dates);\n    this.validation = serviceLocator.locate(Validation);\n  }\n\n  /**\n   * Build the container html for the display\n   * @private\n   */\n  getPicker(): HTMLElement {\n    const container = document.createElement('div');\n    container.classList.add(Namespace.css.daysContainer);\n    container.role = 'grid';\n\n    container.append(...this._daysOfTheWeek());\n\n    if (this.optionsStore.options.display.calendarWeeks) {\n      const div = document.createElement('div');\n      div.classList.add(Namespace.css.calendarWeeks, Namespace.css.noHighlight);\n      container.appendChild(div);\n    }\n\n    const { rangeHoverEvent, rangeHoverOutEvent } =\n      this.handleMouseEvents(container);\n\n    for (let i = 0; i < 42; i++) {\n      if (i !== 0 && i % 7 === 0) {\n        if (this.optionsStore.options.display.calendarWeeks) {\n          const div = document.createElement('div');\n          div.classList.add(\n            Namespace.css.calendarWeeks,\n            Namespace.css.noHighlight\n          );\n          div.tabIndex = -1;\n          container.appendChild(div);\n        }\n      }\n\n      const div = document.createElement('div');\n      div.setAttribute('data-action', ActionTypes.selectDay);\n      div.role = 'gridcell';\n      div.tabIndex = -1;\n      container.appendChild(div);\n\n      // if hover is supported then add the events\n      if (\n        matchMedia('(hover: hover)').matches &&\n        this.optionsStore.options.dateRange\n      ) {\n        div.addEventListener('mouseover', rangeHoverEvent);\n        div.addEventListener('mouseout', rangeHoverOutEvent);\n      }\n    }\n\n    return container;\n  }\n\n  /**\n   * Populates the grid and updates enabled states\n   * @private\n   */\n  _update(widget: HTMLElement, paint: Paint): void {\n    const container = widget.getElementsByClassName(\n      Namespace.css.daysContainer\n    )[0] as HTMLElement;\n\n    this._updateCalendarView(container);\n\n    const innerDate = this.optionsStore.viewDate.clone\n      .startOf(Unit.month)\n      .startOf('weekDay', this.optionsStore.options.localization.startOfTheWeek)\n      .manipulate(12, Unit.hours);\n\n    this._handleCalendarWeeks(container, innerDate.clone);\n\n    container\n      .querySelectorAll(`[data-action=\"${ActionTypes.selectDay}\"]`)\n      .forEach((element: HTMLElement) => {\n        const classes: string[] = [];\n        classes.push(Namespace.css.day);\n\n        if (innerDate.isBefore(this.optionsStore.viewDate, Unit.month)) {\n          classes.push(Namespace.css.old);\n        }\n        if (innerDate.isAfter(this.optionsStore.viewDate, Unit.month)) {\n          classes.push(Namespace.css.new);\n        }\n\n        if (\n          !this.optionsStore.unset &&\n          !this.optionsStore.options.dateRange &&\n          this.dates.isPicked(innerDate, Unit.date)\n        ) {\n          classes.push(Namespace.css.active);\n        }\n        if (!this.validation.isValid(innerDate, Unit.date)) {\n          classes.push(Namespace.css.disabled);\n        }\n        if (innerDate.isSame(new DateTime(), Unit.date)) {\n          classes.push(Namespace.css.today);\n        }\n        if (innerDate.weekDay === 0 || innerDate.weekDay === 6) {\n          classes.push(Namespace.css.weekend);\n        }\n\n        this._handleDateRange(innerDate, classes);\n\n        paint(Unit.date, innerDate, classes, element);\n\n        element.classList.remove(...element.classList);\n        element.classList.add(...classes);\n        element.setAttribute('data-value', innerDate.dateToDataValue());\n        element.setAttribute('data-day', `${innerDate.date}`);\n        element.innerText = innerDate.parts(undefined, {\n          day: 'numeric',\n        }).day;\n        element.ariaLabel = innerDate.format('MMMM dd, yyyy');\n\n        innerDate.manipulate(1, Unit.date);\n      });\n  }\n\n  private _handleDateRange(innerDate: DateTime, classes: string[]) {\n    const rangeStart = this.dates.picked[0];\n    const rangeEnd = this.dates.picked[1];\n\n    if (this.optionsStore.options.dateRange) {\n      if (innerDate.isBetween(rangeStart, rangeEnd, Unit.date)) {\n        classes.push(Namespace.css.rangeIn);\n      }\n\n      if (innerDate.isSame(rangeStart, Unit.date)) {\n        classes.push(Namespace.css.rangeStart);\n      }\n\n      if (innerDate.isSame(rangeEnd, Unit.date)) {\n        classes.push(Namespace.css.rangeEnd);\n      }\n    }\n  }\n\n  private handleMouseEvents(container: HTMLElement) {\n    const rangeHoverEvent = (e: MouseEvent) => {\n      const currentTarget = e?.currentTarget as HTMLElement;\n\n      // if we have 0 or 2 selected or if the target is disabled then ignore\n      if (\n        this.dates.picked.length !== 1 ||\n        currentTarget.classList.contains(Namespace.css.disabled)\n      )\n        return;\n\n      // select all the date divs\n      const allDays = [...container.querySelectorAll('.day')] as HTMLElement[];\n\n      // get the date value from the element being hovered over\n      const attributeValue = currentTarget.getAttribute('data-value');\n\n      // format the string to a date\n      const innerDate = DateTime.fromString(attributeValue, {\n        format: 'yyyy-MM-dd',\n      });\n\n      // find the position of the target in the date container\n      const dayIndex = allDays.findIndex(\n        (e) => e.getAttribute('data-value') === attributeValue\n      );\n\n      // find the first and second selected dates\n      const rangeStart = this.dates.picked[0];\n      const rangeEnd = this.dates.picked[1];\n\n      //format the start date so that it can be found by the attribute\n      const rangeStartFormatted = rangeStart.dateToDataValue();\n      const rangeStartIndex = allDays.findIndex(\n        (e) => e.getAttribute('data-value') === rangeStartFormatted\n      );\n      const rangeStartElement = allDays[rangeStartIndex];\n\n      //make sure we don't leave start/end classes if we don't need them\n      if (!innerDate.isSame(rangeStart, Unit.date)) {\n        currentTarget.classList.remove(Namespace.css.rangeStart);\n      }\n\n      if (!innerDate.isSame(rangeEnd, Unit.date)) {\n        currentTarget.classList.remove(Namespace.css.rangeEnd);\n      }\n\n      // the following figures out which direct from start date is selected\n      // the selection \"cap\" classes are applied if needed\n      // otherwise all the dates between will get the `rangeIn` class.\n      // We make this selection based on the element's index and the rangeStart index\n\n      let lambda: (_, index: number) => boolean;\n\n      if (innerDate.isBefore(rangeStart)) {\n        currentTarget.classList.add(Namespace.css.rangeStart);\n        rangeStartElement?.classList.remove(Namespace.css.rangeStart);\n        rangeStartElement?.classList.add(Namespace.css.rangeEnd);\n        lambda = (_, index) => index > dayIndex && index < rangeStartIndex;\n      } else {\n        currentTarget.classList.add(Namespace.css.rangeEnd);\n        rangeStartElement?.classList.remove(Namespace.css.rangeEnd);\n        rangeStartElement?.classList.add(Namespace.css.rangeStart);\n        lambda = (_, index) => index < dayIndex && index > rangeStartIndex;\n      }\n\n      allDays.filter(lambda).forEach((e) => {\n        e.classList.add(Namespace.css.rangeIn);\n      });\n    };\n\n    const rangeHoverOutEvent = (e: MouseEvent) => {\n      // find all the dates in the container\n      const allDays = [...container.querySelectorAll('.day')] as HTMLElement[];\n\n      // if only the start is selected, remove all the rangeIn classes\n      // we do this because once the user hovers over a new date the range will be recalculated.\n      if (this.dates.picked.length === 1)\n        allDays.forEach((e) => e.classList.remove(Namespace.css.rangeIn));\n\n      // if we have 0 or 2 dates selected then ignore\n      if (this.dates.picked.length !== 1) return;\n\n      const currentTarget = e?.currentTarget as HTMLElement;\n\n      // get the elements date from the attribute value\n      const innerDate = new DateTime(currentTarget.getAttribute('data-value'));\n\n      // verify selections and remove invalid classes\n      if (!innerDate.isSame(this.dates.picked[0], Unit.date)) {\n        currentTarget.classList.remove(Namespace.css.rangeStart);\n      }\n\n      if (!innerDate.isSame(this.dates.picked[1], Unit.date)) {\n        currentTarget.classList.remove(Namespace.css.rangeEnd);\n      }\n    };\n\n    return { rangeHoverEvent, rangeHoverOutEvent };\n  }\n\n  private _updateCalendarView(container: Element) {\n    if (this.optionsStore.currentView !== 'calendar') return;\n    const [previous, switcher, next] = container.parentElement\n      .getElementsByClassName(Namespace.css.calendarHeader)[0]\n      .getElementsByTagName('div');\n    switcher.setAttribute(\n      Namespace.css.daysContainer,\n      this.optionsStore.viewDate.format(\n        this.optionsStore.options.localization.dayViewHeaderFormat\n      )\n    );\n    this.optionsStore.options.display.components.month\n      ? switcher.classList.remove(Namespace.css.disabled)\n      : switcher.classList.add(Namespace.css.disabled);\n\n    this.validation.isValid(\n      this.optionsStore.viewDate.clone.manipulate(-1, Unit.month),\n      Unit.month\n    )\n      ? previous.classList.remove(Namespace.css.disabled)\n      : previous.classList.add(Namespace.css.disabled);\n    this.validation.isValid(\n      this.optionsStore.viewDate.clone.manipulate(1, Unit.month),\n      Unit.month\n    )\n      ? next.classList.remove(Namespace.css.disabled)\n      : next.classList.add(Namespace.css.disabled);\n  }\n\n  /***\n   * Generates a html row that contains the days of the week.\n   * @private\n   */\n  private _daysOfTheWeek(): HTMLElement[] {\n    const innerDate = this.optionsStore.viewDate.clone\n      .startOf('weekDay', this.optionsStore.options.localization.startOfTheWeek)\n      .startOf(Unit.date);\n    const row = [];\n    document.createElement('div');\n\n    if (this.optionsStore.options.display.calendarWeeks) {\n      const htmlDivElement = document.createElement('div');\n      htmlDivElement.classList.add(\n        Namespace.css.calendarWeeks,\n        Namespace.css.noHighlight\n      );\n      htmlDivElement.innerText = '#';\n      row.push(htmlDivElement);\n    }\n\n    for (let i = 0; i < 7; i++) {\n      const htmlDivElement = document.createElement('div');\n      htmlDivElement.classList.add(\n        Namespace.css.dayOfTheWeek,\n        Namespace.css.noHighlight\n      );\n      let weekDay = innerDate.format({ weekday: 'short' });\n      if (this.optionsStore.options.localization.maxWeekdayLength > 0)\n        weekDay = weekDay.substring(\n          0,\n          this.optionsStore.options.localization.maxWeekdayLength\n        );\n      htmlDivElement.innerText = weekDay;\n      htmlDivElement.ariaLabel = innerDate.format({ weekday: 'long' });\n      innerDate.manipulate(1, Unit.date);\n      row.push(htmlDivElement);\n    }\n\n    return row;\n  }\n\n  private _handleCalendarWeeks(container: HTMLElement, innerDate: DateTime) {\n    [...container.querySelectorAll(`.${Namespace.css.calendarWeeks}`)]\n      .filter((e: HTMLElement) => e.innerText !== '#')\n      .forEach((element: HTMLElement) => {\n        element.innerText = `${innerDate.week}`;\n        innerDate.manipulate(7, Unit.date);\n      });\n  }\n}\n"
  },
  {
    "path": "src/js/display/calendar/decade-display.ts",
    "content": "import Dates from '../../dates';\nimport { DateTime, Unit } from '../../datetime';\nimport Namespace from '../../utilities/namespace';\nimport Validation from '../../validation';\nimport { Paint } from '../index';\nimport { serviceLocator } from '../../utilities/service-locator';\nimport ActionTypes from '../../utilities/action-types';\nimport { OptionsStore } from '../../utilities/optionsStore';\n\n/**\n * Creates and updates the grid for `seconds`\n */\nexport default class DecadeDisplay {\n  private _startDecade: DateTime;\n  private _endDecade: DateTime;\n  private optionsStore: OptionsStore;\n  private dates: Dates;\n  private validation: Validation;\n\n  constructor() {\n    this.optionsStore = serviceLocator.locate(OptionsStore);\n    this.dates = serviceLocator.locate(Dates);\n    this.validation = serviceLocator.locate(Validation);\n  }\n\n  /**\n   * Build the container html for the display\n   * @private\n   */\n  getPicker() {\n    const container = document.createElement('div');\n    container.classList.add(Namespace.css.decadesContainer);\n\n    for (let i = 0; i < 12; i++) {\n      const div = document.createElement('div');\n      div.tabIndex = -1;\n      div.setAttribute('data-action', ActionTypes.selectDecade);\n      container.appendChild(div);\n    }\n    return container;\n  }\n\n  /**\n   * Populates the grid and updates enabled states\n   * @private\n   */\n  _update(widget: HTMLElement, paint: Paint) {\n    const [start, end] = Dates.getStartEndYear(\n      100,\n      this.optionsStore.viewDate.year\n    );\n    this._startDecade = this.optionsStore.viewDate.clone.startOf(Unit.year);\n    this._startDecade.year = start;\n    this._endDecade = this.optionsStore.viewDate.clone.startOf(Unit.year);\n    this._endDecade.year = end;\n\n    const container = widget.getElementsByClassName(\n      Namespace.css.decadesContainer\n    )[0] as HTMLElement;\n\n    const [previous, switcher, next] = container.parentElement\n      .getElementsByClassName(Namespace.css.calendarHeader)[0]\n      .getElementsByTagName('div');\n\n    const isPreviousEnabled = this.validation.isValid(\n      this._startDecade,\n      Unit.year\n    );\n    if (this.optionsStore.currentView === 'decades') {\n      switcher.setAttribute(\n        Namespace.css.decadesContainer,\n        `${this._startDecade.format({\n          year: 'numeric',\n        })}-${this._endDecade.format({ year: 'numeric' })}`\n      );\n\n      isPreviousEnabled\n        ? previous.classList.remove(Namespace.css.disabled)\n        : previous.classList.add(Namespace.css.disabled);\n      this.validation.isValid(this._endDecade, Unit.year)\n        ? next.classList.remove(Namespace.css.disabled)\n        : next.classList.add(Namespace.css.disabled);\n    }\n\n    const pickedYears = this.dates.picked.map((x) => x.year);\n\n    container\n      .querySelectorAll(`[data-action=\"${ActionTypes.selectDecade}\"]`)\n      .forEach((containerClone: HTMLElement, index) => {\n        if (index === 0) {\n          containerClone.classList.add(Namespace.css.old);\n          if (this._startDecade.year - 10 < 0) {\n            containerClone.textContent = ' ';\n            previous.classList.add(Namespace.css.disabled);\n            containerClone.classList.add(Namespace.css.disabled);\n            containerClone.setAttribute('data-value', '');\n          }\n          return;\n        }\n\n        const classes = [];\n        classes.push(Namespace.css.decade);\n        const startDecadeYear = this._startDecade.year;\n        const endDecadeYear = this._startDecade.year + 9;\n\n        if (\n          !this.optionsStore.unset &&\n          pickedYears.filter((x) => x >= startDecadeYear && x <= endDecadeYear)\n            .length > 0\n        ) {\n          classes.push(Namespace.css.active);\n        }\n        if (\n          !isPreviousEnabled &&\n          !this.validation.isValid(\n            this._startDecade.clone.manipulate(10, Unit.year),\n            Unit.year\n          )\n        ) {\n          classes.push(Namespace.css.disabled);\n        }\n\n        paint('decade', this._startDecade, classes, containerClone);\n\n        containerClone.classList.remove(...containerClone.classList);\n        containerClone.classList.add(...classes);\n        containerClone.setAttribute('data-value', `${this._startDecade.year}`);\n        containerClone.innerText = `${this._startDecade.format({\n          year: 'numeric',\n        })}`;\n\n        this._startDecade.manipulate(10, Unit.year);\n      });\n  }\n}\n"
  },
  {
    "path": "src/js/display/calendar/month-display.ts",
    "content": "import { Unit } from '../../datetime';\nimport Namespace from '../../utilities/namespace';\nimport Validation from '../../validation';\nimport Dates from '../../dates';\nimport { Paint } from '../index';\nimport { serviceLocator } from '../../utilities/service-locator';\nimport ActionTypes from '../../utilities/action-types';\nimport { OptionsStore } from '../../utilities/optionsStore';\n\n/**\n * Creates and updates the grid for `month`\n */\nexport default class MonthDisplay {\n  private optionsStore: OptionsStore;\n  private dates: Dates;\n  private validation: Validation;\n\n  constructor() {\n    this.optionsStore = serviceLocator.locate(OptionsStore);\n    this.dates = serviceLocator.locate(Dates);\n    this.validation = serviceLocator.locate(Validation);\n  }\n  /**\n   * Build the container html for the display\n   * @private\n   */\n  getPicker(): HTMLElement {\n    const container = document.createElement('div');\n    container.classList.add(Namespace.css.monthsContainer);\n\n    for (let i = 0; i < 12; i++) {\n      const div = document.createElement('div');\n      div.tabIndex = -1;\n      div.setAttribute('data-action', ActionTypes.selectMonth);\n      container.appendChild(div);\n    }\n\n    return container;\n  }\n\n  /**\n   * Populates the grid and updates enabled states\n   * @private\n   */\n  _update(widget: HTMLElement, paint: Paint): void {\n    const container = widget.getElementsByClassName(\n      Namespace.css.monthsContainer\n    )[0] as HTMLElement;\n\n    if (this.optionsStore.currentView === 'months') {\n      const [previous, switcher, next] = container.parentElement\n        .getElementsByClassName(Namespace.css.calendarHeader)[0]\n        .getElementsByTagName('div');\n\n      switcher.setAttribute(\n        Namespace.css.monthsContainer,\n        this.optionsStore.viewDate.format({ year: 'numeric' })\n      );\n\n      this.optionsStore.options.display.components.year\n        ? switcher.classList.remove(Namespace.css.disabled)\n        : switcher.classList.add(Namespace.css.disabled);\n\n      this.validation.isValid(\n        this.optionsStore.viewDate.clone.manipulate(-1, Unit.year),\n        Unit.year\n      )\n        ? previous.classList.remove(Namespace.css.disabled)\n        : previous.classList.add(Namespace.css.disabled);\n\n      this.validation.isValid(\n        this.optionsStore.viewDate.clone.manipulate(1, Unit.year),\n        Unit.year\n      )\n        ? next.classList.remove(Namespace.css.disabled)\n        : next.classList.add(Namespace.css.disabled);\n    }\n\n    const innerDate = this.optionsStore.viewDate.clone.startOf(Unit.year);\n\n    container\n      .querySelectorAll(`[data-action=\"${ActionTypes.selectMonth}\"]`)\n      .forEach((containerClone: HTMLElement, index) => {\n        const classes = [];\n        classes.push(Namespace.css.month);\n\n        if (\n          !this.optionsStore.unset &&\n          this.dates.isPicked(innerDate, Unit.month)\n        ) {\n          classes.push(Namespace.css.active);\n        }\n        if (!this.validation.isValid(innerDate, Unit.month)) {\n          classes.push(Namespace.css.disabled);\n        }\n\n        paint(Unit.month, innerDate, classes, containerClone);\n\n        containerClone.classList.remove(...containerClone.classList);\n        containerClone.classList.add(...classes);\n        containerClone.setAttribute('data-value', `${index}`);\n        containerClone.innerText = `${innerDate.format({ month: 'short' })}`;\n        innerDate.manipulate(1, Unit.month);\n      });\n  }\n}\n"
  },
  {
    "path": "src/js/display/calendar/year-display.ts",
    "content": "import { DateTime, Unit } from '../../datetime';\nimport Namespace from '../../utilities/namespace';\nimport Dates from '../../dates';\nimport Validation from '../../validation';\nimport { Paint } from '../index';\nimport { serviceLocator } from '../../utilities/service-locator';\nimport ActionTypes from '../../utilities/action-types';\nimport { OptionsStore } from '../../utilities/optionsStore';\n\n/**\n * Creates and updates the grid for `year`\n */\nexport default class YearDisplay {\n  private _startYear: DateTime;\n  private _endYear: DateTime;\n  private optionsStore: OptionsStore;\n  private dates: Dates;\n  private validation: Validation;\n\n  constructor() {\n    this.optionsStore = serviceLocator.locate(OptionsStore);\n    this.dates = serviceLocator.locate(Dates);\n    this.validation = serviceLocator.locate(Validation);\n  }\n\n  /**\n   * Build the container html for the display\n   * @private\n   */\n  getPicker(): HTMLElement {\n    const container = document.createElement('div');\n    container.classList.add(Namespace.css.yearsContainer);\n\n    for (let i = 0; i < 12; i++) {\n      const div = document.createElement('div');\n      div.tabIndex = -1;\n      div.setAttribute('data-action', ActionTypes.selectYear);\n      container.appendChild(div);\n    }\n\n    return container;\n  }\n\n  /**\n   * Populates the grid and updates enabled states\n   * @private\n   */\n  _update(widget: HTMLElement, paint: Paint) {\n    this._startYear = this.optionsStore.viewDate.clone.manipulate(\n      -1,\n      Unit.year\n    );\n    this._endYear = this.optionsStore.viewDate.clone.manipulate(10, Unit.year);\n\n    const container = widget.getElementsByClassName(\n      Namespace.css.yearsContainer\n    )[0] as HTMLElement;\n\n    if (this.optionsStore.currentView === 'years') {\n      const [previous, switcher, next] = container.parentElement\n        .getElementsByClassName(Namespace.css.calendarHeader)[0]\n        .getElementsByTagName('div');\n\n      switcher.setAttribute(\n        Namespace.css.yearsContainer,\n        `${this._startYear.format({ year: 'numeric' })}-${this._endYear.format({\n          year: 'numeric',\n        })}`\n      );\n\n      this.optionsStore.options.display.components.decades\n        ? switcher.classList.remove(Namespace.css.disabled)\n        : switcher.classList.add(Namespace.css.disabled);\n\n      this.validation.isValid(this._startYear, Unit.year)\n        ? previous.classList.remove(Namespace.css.disabled)\n        : previous.classList.add(Namespace.css.disabled);\n      this.validation.isValid(this._endYear, Unit.year)\n        ? next.classList.remove(Namespace.css.disabled)\n        : next.classList.add(Namespace.css.disabled);\n    }\n\n    const innerDate = this.optionsStore.viewDate.clone\n      .startOf(Unit.year)\n      .manipulate(-1, Unit.year);\n\n    container\n      .querySelectorAll(`[data-action=\"${ActionTypes.selectYear}\"]`)\n      .forEach((containerClone: HTMLElement) => {\n        const classes = [];\n        classes.push(Namespace.css.year);\n\n        if (\n          !this.optionsStore.unset &&\n          this.dates.isPicked(innerDate, Unit.year)\n        ) {\n          classes.push(Namespace.css.active);\n        }\n        if (!this.validation.isValid(innerDate, Unit.year)) {\n          classes.push(Namespace.css.disabled);\n        }\n\n        paint(Unit.year, innerDate, classes, containerClone);\n\n        containerClone.classList.remove(...containerClone.classList);\n        containerClone.classList.add(...classes);\n        containerClone.setAttribute('data-value', `${innerDate.year}`);\n        containerClone.innerText = innerDate.format({ year: 'numeric' });\n\n        innerDate.manipulate(1, Unit.year);\n      });\n  }\n}\n"
  },
  {
    "path": "src/js/display/collapse.ts",
    "content": "import Namespace from '../utilities/namespace';\n\n/**\n * Provides a collapse functionality to the view changes\n */\nexport default class Collapse {\n  /**\n   * Flips the show/hide state of `target`\n   * @param target html element to affect.\n   */\n  static toggle(target: HTMLElement) {\n    if (target.classList.contains(Namespace.css.show)) {\n      this.hide(target);\n    } else {\n      this.show(target);\n    }\n  }\n\n  /**\n   * Skips any animation or timeouts and immediately set the element to show.\n   * @param target\n   */\n  static showImmediately(target: HTMLElement) {\n    target.classList.remove(Namespace.css.collapsing);\n    target.classList.add(Namespace.css.collapse, Namespace.css.show);\n    target.style.height = '';\n  }\n\n  /**\n   * If `target` is not already showing, then show after the animation.\n   * @param target\n   */\n  static show(target: HTMLElement) {\n    if (\n      target.classList.contains(Namespace.css.collapsing) ||\n      target.classList.contains(Namespace.css.show)\n    )\n      return;\n\n    let timeOut = null;\n    const complete = () => {\n      Collapse.showImmediately(target);\n      timeOut = null;\n    };\n\n    target.style.height = '0';\n    target.classList.remove(Namespace.css.collapse);\n    target.classList.add(Namespace.css.collapsing);\n\n    //eslint-disable-next-line @typescript-eslint/no-unused-vars\n    timeOut = setTimeout(\n      complete,\n      this.getTransitionDurationFromElement(target)\n    );\n    target.style.height = `${target.scrollHeight}px`;\n  }\n\n  /**\n   * Skips any animation or timeouts and immediately set the element to hide.\n   * @param target\n   */\n  static hideImmediately(target: HTMLElement) {\n    if (!target) return;\n    target.classList.remove(Namespace.css.collapsing, Namespace.css.show);\n    target.classList.add(Namespace.css.collapse);\n  }\n\n  /**\n   * If `target` is not already hidden, then hide after the animation.\n   * @param target HTML Element\n   */\n  static hide(target: HTMLElement) {\n    if (\n      target.classList.contains(Namespace.css.collapsing) ||\n      !target.classList.contains(Namespace.css.show)\n    )\n      return;\n\n    let timeOut = null;\n    const complete = () => {\n      Collapse.hideImmediately(target);\n      timeOut = null;\n    };\n\n    target.style.height = `${target.getBoundingClientRect()['height']}px`;\n\n    const reflow = (element) => element.offsetHeight;\n\n    reflow(target);\n\n    target.classList.remove(Namespace.css.collapse, Namespace.css.show);\n    target.classList.add(Namespace.css.collapsing);\n    target.style.height = '';\n\n    //eslint-disable-next-line @typescript-eslint/no-unused-vars\n    timeOut = setTimeout(\n      complete,\n      this.getTransitionDurationFromElement(target)\n    );\n  }\n\n  /**\n   * Gets the transition duration from the `element` by getting css properties\n   * `transition-duration` and `transition-delay`\n   * @param element HTML Element\n   */\n  private static getTransitionDurationFromElement = (element: HTMLElement) => {\n    if (!element) {\n      return 0;\n    }\n\n    // Get transition-duration of the element\n    let { transitionDuration, transitionDelay } =\n      window.getComputedStyle(element);\n\n    const floatTransitionDuration = Number.parseFloat(transitionDuration);\n    const floatTransitionDelay = Number.parseFloat(transitionDelay);\n\n    // Return 0 if element or transition duration is not found\n    if (!floatTransitionDuration && !floatTransitionDelay) {\n      return 0;\n    }\n\n    // If multiple durations are defined, take the first\n    transitionDuration = transitionDuration.split(',')[0];\n    transitionDelay = transitionDelay.split(',')[0];\n\n    return (\n      (Number.parseFloat(transitionDuration) +\n        Number.parseFloat(transitionDelay)) *\n      1000\n    );\n  };\n}\n"
  },
  {
    "path": "src/js/display/index.ts",
    "content": "import DateDisplay from './calendar/date-display';\nimport MonthDisplay from './calendar/month-display';\nimport YearDisplay from './calendar/year-display';\nimport DecadeDisplay from './calendar/decade-display';\nimport TimeDisplay from './time/time-display';\nimport HourDisplay from './time/hour-display';\nimport MinuteDisplay from './time/minute-display';\nimport SecondDisplay from './time/second-display';\nimport { DateTime, Unit } from '../datetime';\nimport Namespace from '../utilities/namespace';\nimport { HideEvent } from '../utilities/event-types';\nimport Collapse from './collapse';\nimport Validation from '../validation';\nimport Dates from '../dates';\nimport { EventEmitters, ViewUpdateValues } from '../utilities/event-emitter';\nimport { serviceLocator } from '../utilities/service-locator';\nimport ActionTypes from '../utilities/action-types';\nimport CalendarModes from '../utilities/calendar-modes';\nimport { OptionsStore } from '../utilities/optionsStore';\n\n/**\n * Main class for all things display related.\n */\nexport default class Display {\n  private _widget: HTMLElement;\n  //eslint-disable-next-line @typescript-eslint/no-explicit-any\n  private _popperInstance: any;\n  private _isVisible = false;\n  private optionsStore: OptionsStore;\n  private validation: Validation;\n  private dates: Dates;\n  private _eventEmitters: EventEmitters;\n  private _keyboardEventBound = this._keyboardEvent.bind(this);\n\n  dateDisplay: DateDisplay;\n  monthDisplay: MonthDisplay;\n  yearDisplay: YearDisplay;\n  decadeDisplay: DecadeDisplay;\n  timeDisplay: TimeDisplay;\n  hourDisplay: HourDisplay;\n  minuteDisplay: MinuteDisplay;\n  secondDisplay: SecondDisplay;\n\n  constructor() {\n    this.optionsStore = serviceLocator.locate(OptionsStore);\n    this.validation = serviceLocator.locate(Validation);\n    this.dates = serviceLocator.locate(Dates);\n\n    this.dateDisplay = serviceLocator.locate(DateDisplay);\n    this.monthDisplay = serviceLocator.locate(MonthDisplay);\n    this.yearDisplay = serviceLocator.locate(YearDisplay);\n    this.decadeDisplay = serviceLocator.locate(DecadeDisplay);\n    this.timeDisplay = serviceLocator.locate(TimeDisplay);\n    this.hourDisplay = serviceLocator.locate(HourDisplay);\n    this.minuteDisplay = serviceLocator.locate(MinuteDisplay);\n    this.secondDisplay = serviceLocator.locate(SecondDisplay);\n    this._eventEmitters = serviceLocator.locate(EventEmitters);\n    this._widget = undefined;\n\n    this._eventEmitters.updateDisplay.subscribe((result: ViewUpdateValues) => {\n      this._update(result);\n    });\n  }\n\n  /**\n   * Returns the widget body or undefined\n   * @private\n   */\n  get widget(): HTMLElement | undefined {\n    return this._widget;\n  }\n\n  get dateContainer(): HTMLElement | undefined {\n    return this.widget?.querySelector(`div.${Namespace.css.dateContainer}`);\n  }\n\n  get timeContainer(): HTMLElement | undefined {\n    return this.widget?.querySelector(`div.${Namespace.css.timeContainer}`);\n  }\n\n  /**\n   * Returns this visible state of the picker (shown)\n   */\n  get isVisible() {\n    return this._isVisible;\n  }\n\n  /**\n   * Updates the table for a particular unit. Used when an option as changed or\n   * whenever the class list might need to be refreshed.\n   * @param unit\n   * @private\n   */\n  _update(unit: ViewUpdateValues): void {\n    if (!this.widget) return;\n    switch (unit) {\n      case Unit.seconds:\n        this.secondDisplay._update(this.widget, this.paint);\n        break;\n      case Unit.minutes:\n        this.minuteDisplay._update(this.widget, this.paint);\n        break;\n      case Unit.hours:\n        this.hourDisplay._update(this.widget, this.paint);\n        break;\n      case Unit.date:\n        this.dateDisplay._update(this.widget, this.paint);\n        break;\n      case Unit.month:\n        this.monthDisplay._update(this.widget, this.paint);\n        break;\n      case Unit.year:\n        this.yearDisplay._update(this.widget, this.paint);\n        break;\n      case 'decade':\n        this.decadeDisplay._update(this.widget, this.paint);\n        break;\n      case 'clock':\n        if (!this._hasTime) break;\n        this.timeDisplay._update(this.widget);\n        this._update(Unit.hours);\n        this._update(Unit.minutes);\n        this._update(Unit.seconds);\n        break;\n      case 'calendar':\n        this._update(Unit.date);\n        this._update(Unit.year);\n        this._update(Unit.month);\n        this.decadeDisplay._update(this.widget, this.paint);\n        this._updateCalendarHeader();\n        break;\n      case 'all':\n        if (this._hasTime) {\n          this._update('clock');\n        }\n        if (this._hasDate) {\n          this._update('calendar');\n        }\n    }\n  }\n\n  // noinspection JSUnusedLocalSymbols\n  /**\n   * Allows developers to add/remove classes from an element.\n   * @param _unit\n   * @param _date\n   * @param _classes\n   * @param _element\n   */\n\n  /* eslint-disable @typescript-eslint/no-unused-vars */\n  paint(\n    _unit: Unit | 'decade',\n    _date: DateTime,\n    _classes: string[],\n    _element: HTMLElement\n  ) {\n    // implemented in plugin\n  }\n\n  /**\n   * Shows the picker and creates a Popper instance if needed.\n   * Add document click event to hide when clicking outside the picker.\n   * fires Events#show\n   */\n  show(): void {\n    if (this.widget == undefined) {\n      this._showSetDefaultIfNeeded();\n\n      this._buildWidget();\n      this._updateTheme();\n\n      this._showSetupViewMode();\n\n      if (!this.optionsStore.options.display.inline) {\n        // If needed to change the parent container\n        const container = this.optionsStore.options?.container || document.body;\n        const placement =\n          this.optionsStore.options?.display?.placement || 'bottom';\n\n        container.appendChild(this.widget);\n        const handleFocus = this._handleFocus.bind(this);\n        this.createPopup(this.optionsStore.element, this.widget, {\n          modifiers: [\n            { name: 'eventListeners', enabled: true },\n            {\n              name: 'focusDate',\n              enabled: true,\n              phase: 'afterWrite',\n              fn() {\n                handleFocus();\n              },\n            },\n          ],\n          //#2400\n          placement:\n            document.documentElement.dir === 'rtl'\n              ? `${placement}-end`\n              : `${placement}-start`,\n        }).then(() => {\n          this._handleFocus();\n        });\n      } else {\n        this.optionsStore.element.appendChild(this.widget);\n      }\n\n      if (this.optionsStore.options.display.viewMode == 'clock') {\n        this._eventEmitters.action.emit({\n          e: null,\n          action: ActionTypes.showClock,\n        });\n      }\n\n      this.widget\n        .querySelectorAll('[data-action]')\n        .forEach((element) =>\n          element.addEventListener('click', this._actionsClickEvent)\n        );\n\n      // show the clock when using sideBySide\n      if (this._hasTime && this.optionsStore.options.display.sideBySide) {\n        this.timeDisplay._update(this.widget);\n        (\n          this.widget.getElementsByClassName(\n            Namespace.css.clockContainer\n          )[0] as HTMLElement\n        ).style.display = 'grid';\n      }\n    }\n\n    this.widget.classList.add(Namespace.css.show);\n    if (!this.optionsStore.options.display.inline) {\n      this.updatePopup();\n      document.addEventListener('click', this._documentClickEvent);\n    }\n    this._eventEmitters.triggerEvent.emit({ type: Namespace.events.show });\n    this._isVisible = true;\n\n    if (this.optionsStore.options.display.keyboardNavigation) {\n      this.widget.addEventListener('keydown', this._keyboardEventBound);\n    }\n  }\n\n  private _showSetupViewMode() {\n    // If modeView is only clock\n    const onlyClock = this._hasTime && !this._hasDate;\n\n    // reset the view to the clock if there's no date components\n    if (onlyClock) {\n      this.optionsStore.currentView = 'clock';\n      this._eventEmitters.action.emit({\n        e: null,\n        action: ActionTypes.showClock,\n      });\n    }\n    // otherwise return to the calendar view\n    else if (!this.optionsStore.currentCalendarViewMode) {\n      this.optionsStore.currentCalendarViewMode =\n        this.optionsStore.minimumCalendarViewMode;\n    }\n\n    if (!onlyClock && this.optionsStore.options.display.viewMode !== 'clock') {\n      if (this._hasTime) {\n        if (!this.optionsStore.options.display.sideBySide) {\n          Collapse.hideImmediately(this.timeContainer);\n        } else {\n          Collapse.show(this.timeContainer);\n        }\n      }\n      Collapse.show(this.dateContainer);\n    }\n\n    if (this._hasDate) {\n      this._showMode();\n    }\n  }\n\n  private _showSetDefaultIfNeeded() {\n    if (this.dates.picked.length != 0) return;\n\n    if (\n      this.optionsStore.options.useCurrent &&\n      !this.optionsStore.options.defaultDate\n    ) {\n      const date = new DateTime().setLocalization(\n        this.optionsStore.options.localization\n      );\n      if (!this.optionsStore.options.keepInvalid) {\n        let tries = 0;\n        let direction = 1;\n        if (this.optionsStore.options.restrictions.maxDate?.isBefore(date)) {\n          direction = -1;\n        }\n        while (!this.validation.isValid(date) && tries > 31) {\n          date.manipulate(direction, Unit.date);\n          tries++;\n        }\n      }\n      this.dates.setValue(date);\n    }\n\n    if (this.optionsStore.options.defaultDate) {\n      this.dates.setValue(this.optionsStore.options.defaultDate);\n    }\n  }\n\n  async createPopup(\n    element: HTMLElement,\n    widget: HTMLElement,\n    //eslint-disable-next-line @typescript-eslint/no-explicit-any\n    options: any\n  ): Promise<void> {\n    let createPopperFunction;\n    //eslint-disable-next-line @typescript-eslint/no-explicit-any\n    if ((window as any)?.Popper) {\n      //eslint-disable-next-line @typescript-eslint/no-explicit-any\n      createPopperFunction = (window as any)?.Popper?.createPopper;\n    } else {\n      const { createPopper } = await import('@popperjs/core');\n      createPopperFunction = createPopper;\n    }\n    if (createPopperFunction) {\n      this._popperInstance = createPopperFunction(element, widget, options);\n    }\n  }\n\n  updatePopup(): void {\n    if (!this._popperInstance) return;\n    this._popperInstance.update();\n    //this._handleFocus();\n  }\n\n  /**\n   * Changes the calendar view mode. E.g. month <-> year\n   * @param direction -/+ number to move currentViewMode\n   * @private\n   */\n  _showMode(direction?: number): void {\n    if (!this.widget) {\n      return;\n    }\n    if (direction) {\n      const max = Math.max(\n        this.optionsStore.minimumCalendarViewMode,\n        Math.min(3, this.optionsStore.currentCalendarViewMode + direction)\n      );\n      if (this.optionsStore.currentCalendarViewMode == max) return;\n      this.optionsStore.currentCalendarViewMode = max;\n    }\n\n    this.widget\n      .querySelectorAll(\n        `.${Namespace.css.dateContainer} > div:not(.${Namespace.css.calendarHeader}), .${Namespace.css.timeContainer} > div:not(.${Namespace.css.clockContainer})`\n      )\n      .forEach((e: HTMLElement) => (e.style.display = 'none'));\n\n    const datePickerMode =\n      CalendarModes[this.optionsStore.currentCalendarViewMode];\n    const picker: HTMLElement = this.widget.querySelector(\n      `.${datePickerMode.className}`\n    );\n\n    switch (datePickerMode.className) {\n      case Namespace.css.decadesContainer:\n        this.decadeDisplay._update(this.widget, this.paint);\n        break;\n      case Namespace.css.yearsContainer:\n        this.yearDisplay._update(this.widget, this.paint);\n        break;\n      case Namespace.css.monthsContainer:\n        this.monthDisplay._update(this.widget, this.paint);\n        break;\n      case Namespace.css.daysContainer:\n        this.dateDisplay._update(this.widget, this.paint);\n        break;\n    }\n\n    picker.style.display = 'grid';\n\n    if (this.optionsStore.options.display.sideBySide)\n      (<HTMLElement>(\n        this.widget.querySelectorAll(`.${Namespace.css.clockContainer}`)[0]\n      )).style.display = 'grid';\n\n    this._updateCalendarHeader();\n    this._eventEmitters.viewUpdate.emit();\n    this.findViewDateElement()?.focus();\n  }\n\n  /**\n   * Changes the theme. E.g. light, dark or auto\n   * @param theme the theme name\n   * @private\n   */\n  _updateTheme(theme?: 'light' | 'dark' | 'auto'): void {\n    if (!this.widget) {\n      return;\n    }\n    if (theme) {\n      if (this.optionsStore.options.display.theme === theme) return;\n      this.optionsStore.options.display.theme = theme;\n    }\n\n    this.widget.classList.remove('light', 'dark');\n    this.widget.classList.add(this._getThemeClass());\n\n    if (this.optionsStore.options.display.theme === 'auto') {\n      window\n        .matchMedia(Namespace.css.isDarkPreferredQuery)\n        .addEventListener('change', () => this._updateTheme());\n    } else {\n      window\n        .matchMedia(Namespace.css.isDarkPreferredQuery)\n        .removeEventListener('change', () => this._updateTheme());\n    }\n  }\n\n  _getThemeClass(): string {\n    const currentTheme = this.optionsStore.options.display.theme || 'auto';\n\n    const isDarkMode =\n      window.matchMedia &&\n      window.matchMedia(Namespace.css.isDarkPreferredQuery).matches;\n\n    switch (currentTheme) {\n      case 'light':\n        return Namespace.css.lightTheme;\n      case 'dark':\n        return Namespace.css.darkTheme;\n      case 'auto':\n        return isDarkMode ? Namespace.css.darkTheme : Namespace.css.lightTheme;\n    }\n  }\n\n  _updateCalendarHeader() {\n    if (!this._hasDate) return;\n    const showing = [\n      ...this.widget.querySelector(\n        `.${Namespace.css.dateContainer} div[style*=\"display: grid\"]`\n      ).classList,\n    ].find((x) => x.startsWith(Namespace.css.dateContainer));\n\n    const [previous, switcher, next] = this.widget\n      .getElementsByClassName(Namespace.css.calendarHeader)[0]\n      .getElementsByTagName('div');\n\n    switch (showing) {\n      case Namespace.css.decadesContainer:\n        previous.setAttribute(\n          'title',\n          this.optionsStore.options.localization.previousCentury\n        );\n        switcher.setAttribute('title', '');\n        next.setAttribute(\n          'title',\n          this.optionsStore.options.localization.nextCentury\n        );\n        break;\n      case Namespace.css.yearsContainer:\n        previous.setAttribute(\n          'title',\n          this.optionsStore.options.localization.previousDecade\n        );\n        switcher.setAttribute(\n          'title',\n          this.optionsStore.options.localization.selectDecade\n        );\n        next.setAttribute(\n          'title',\n          this.optionsStore.options.localization.nextDecade\n        );\n        break;\n      case Namespace.css.monthsContainer:\n        previous.setAttribute(\n          'title',\n          this.optionsStore.options.localization.previousYear\n        );\n        switcher.setAttribute(\n          'title',\n          this.optionsStore.options.localization.selectYear\n        );\n        next.setAttribute(\n          'title',\n          this.optionsStore.options.localization.nextYear\n        );\n        break;\n      case Namespace.css.daysContainer:\n        previous.setAttribute(\n          'title',\n          this.optionsStore.options.localization.previousMonth\n        );\n        switcher.setAttribute(\n          'title',\n          this.optionsStore.options.localization.selectMonth\n        );\n        next.setAttribute(\n          'title',\n          this.optionsStore.options.localization.nextMonth\n        );\n        switcher.setAttribute(\n          showing,\n          this.optionsStore.viewDate.format(\n            this.optionsStore.options.localization.dayViewHeaderFormat\n          )\n        );\n        break;\n    }\n    switcher.innerText = switcher.getAttribute(showing);\n  }\n\n  /**\n   * Hides the picker if needed.\n   * Remove document click event to hide when clicking outside the picker.\n   * fires Events#hide\n   */\n  hide(): void {\n    if (!this.widget || !this._isVisible) return;\n\n    this.widget.classList.remove(Namespace.css.show);\n\n    if (this._isVisible) {\n      this._eventEmitters.triggerEvent.emit({\n        type: Namespace.events.hide,\n        date: this.optionsStore.unset ? null : this.dates.lastPicked?.clone,\n      } as HideEvent);\n      this._isVisible = false;\n    }\n\n    document.removeEventListener('click', this._documentClickEvent);\n    if (this.optionsStore.options.display.keyboardNavigation) {\n      this.widget.removeEventListener('keydown', this._keyboardEventBound);\n    }\n    if (this.optionsStore.toggle) this.optionsStore.toggle.focus();\n    else if (this.optionsStore.input) this.optionsStore.input.focus();\n  }\n\n  /**\n   * Toggles the picker's open state. Fires a show/hide event depending.\n   */\n  toggle() {\n    return this._isVisible ? this.hide() : this.show();\n  }\n\n  /**\n   * Removes document and data-action click listener and reset the widget\n   * @private\n   */\n  _dispose() {\n    document.removeEventListener('click', this._documentClickEvent);\n    if (this._popperInstance) this._popperInstance.destroy();\n    if (!this.widget) return;\n    this.widget\n      .querySelectorAll('[data-action]')\n      .forEach((element) =>\n        element.removeEventListener('click', this._actionsClickEvent)\n      );\n    this.widget.parentNode.removeChild(this.widget);\n    this._widget = undefined;\n  }\n\n  /**\n   * Builds the widgets html template.\n   * @private\n   */\n  private _buildWidget(): HTMLElement {\n    const template = document.createElement('div');\n    template.tabIndex = -1;\n    template.classList.add(Namespace.css.widget);\n    template.setAttribute('role', 'widget');\n\n    const dateView = document.createElement('div');\n    dateView.tabIndex = -1;\n    dateView.classList.add(Namespace.css.dateContainer);\n    dateView.append(\n      this.getHeadTemplate(),\n      this.decadeDisplay.getPicker(),\n      this.yearDisplay.getPicker(),\n      this.monthDisplay.getPicker(),\n      this.dateDisplay.getPicker()\n    );\n\n    const timeView = document.createElement('div');\n    timeView.tabIndex = -1;\n    timeView.classList.add(Namespace.css.timeContainer);\n    timeView.appendChild(this.timeDisplay.getPicker(this._iconTag.bind(this)));\n    timeView.appendChild(this.hourDisplay.getPicker());\n    timeView.appendChild(this.minuteDisplay.getPicker());\n    timeView.appendChild(this.secondDisplay.getPicker());\n\n    const toolbar = document.createElement('div');\n    toolbar.tabIndex = -1;\n    toolbar.classList.add(Namespace.css.toolbar);\n    toolbar.append(...this.getToolbarElements());\n\n    if (this.optionsStore.options.display.inline) {\n      template.classList.add(Namespace.css.inline);\n    }\n\n    if (this.optionsStore.options.display.calendarWeeks) {\n      template.classList.add('calendarWeeks');\n    }\n\n    if (this.optionsStore.options.display.sideBySide && this._hasDateAndTime) {\n      this._buildWidgetSideBySide(template, dateView, timeView, toolbar);\n      return;\n    }\n\n    if (this.optionsStore.options.display.toolbarPlacement === 'top') {\n      template.appendChild(toolbar);\n    }\n\n    const setupComponentView = (\n      hasFirst: boolean,\n      hasSecond: boolean,\n      element: HTMLElement,\n      shouldShow: boolean\n    ) => {\n      if (!hasFirst) return;\n      if (hasSecond) {\n        element.classList.add(Namespace.css.collapse);\n        if (shouldShow) element.classList.add(Namespace.css.show);\n      }\n      template.appendChild(element);\n    };\n\n    setupComponentView(\n      this._hasDate,\n      this._hasTime,\n      dateView,\n      this.optionsStore.options.display.viewMode !== 'clock'\n    );\n\n    setupComponentView(\n      this._hasTime,\n      this._hasDate,\n      timeView,\n      this.optionsStore.options.display.viewMode === 'clock'\n    );\n\n    if (this.optionsStore.options.display.toolbarPlacement === 'bottom') {\n      template.appendChild(toolbar);\n    }\n\n    const arrow = document.createElement('div');\n    arrow.classList.add('arrow');\n    arrow.setAttribute('data-popper-arrow', '');\n    template.appendChild(arrow);\n\n    this._widget = template;\n  }\n\n  private _buildWidgetSideBySide(\n    template: HTMLDivElement,\n    dateView: HTMLDivElement,\n    timeView: HTMLDivElement,\n    toolbar: HTMLDivElement\n  ) {\n    template.classList.add(Namespace.css.sideBySide);\n    if (this.optionsStore.options.display.toolbarPlacement === 'top') {\n      template.appendChild(toolbar);\n    }\n    const row = document.createElement('div');\n    row.classList.add('td-row');\n    dateView.classList.add('td-half');\n    timeView.classList.add('td-half');\n\n    row.appendChild(dateView);\n    row.appendChild(timeView);\n    template.appendChild(row);\n    if (this.optionsStore.options.display.toolbarPlacement === 'bottom') {\n      template.appendChild(toolbar);\n    }\n    this._widget = template;\n  }\n\n  /**\n   * Returns true if the hours, minutes, or seconds component is turned on\n   */\n  get _hasTime(): boolean {\n    return (\n      this.optionsStore.options.display.components.clock &&\n      (this.optionsStore.options.display.components.hours ||\n        this.optionsStore.options.display.components.minutes ||\n        this.optionsStore.options.display.components.seconds)\n    );\n  }\n\n  /**\n   * Returns true if the year, month, or date component is turned on\n   */\n  get _hasDate(): boolean {\n    return (\n      this.optionsStore.options.display.components.calendar &&\n      (this.optionsStore.options.display.components.year ||\n        this.optionsStore.options.display.components.month ||\n        this.optionsStore.options.display.components.date)\n    );\n  }\n\n  get _hasDateAndTime(): boolean {\n    return this._hasDate && this._hasTime;\n  }\n\n  /**\n   * Get the toolbar html based on options like buttons => today\n   * @private\n   */\n  getToolbarElements(): HTMLElement[] {\n    const toolbar = [];\n\n    if (this.optionsStore.options.display.buttons.today) {\n      const div = document.createElement('div');\n      div.tabIndex = -1;\n      div.setAttribute('data-action', ActionTypes.today);\n      div.setAttribute('title', this.optionsStore.options.localization.today);\n\n      div.appendChild(\n        this._iconTag(this.optionsStore.options.display.icons.today)\n      );\n      toolbar.push(div);\n    }\n    if (\n      !this.optionsStore.options.display.sideBySide &&\n      this._hasDate &&\n      this._hasTime\n    ) {\n      let title, icon;\n      if (this.optionsStore.options.display.viewMode === 'clock') {\n        title = this.optionsStore.options.localization.selectDate;\n        icon = this.optionsStore.options.display.icons.date;\n      } else {\n        title = this.optionsStore.options.localization.selectTime;\n        icon = this.optionsStore.options.display.icons.time;\n      }\n\n      const div = document.createElement('div');\n      div.tabIndex = -1;\n      div.setAttribute('data-action', ActionTypes.togglePicker);\n      div.setAttribute('title', title);\n\n      div.appendChild(this._iconTag(icon));\n      toolbar.push(div);\n    }\n    if (this.optionsStore.options.display.buttons.clear) {\n      const div = document.createElement('div');\n      div.tabIndex = -1;\n      div.setAttribute('data-action', ActionTypes.clear);\n      div.setAttribute('title', this.optionsStore.options.localization.clear);\n\n      div.appendChild(\n        this._iconTag(this.optionsStore.options.display.icons.clear)\n      );\n      toolbar.push(div);\n    }\n    if (this.optionsStore.options.display.buttons.close) {\n      const div = document.createElement('div');\n      div.tabIndex = -1;\n      div.setAttribute('data-action', ActionTypes.close);\n      div.setAttribute('title', this.optionsStore.options.localization.close);\n\n      div.appendChild(\n        this._iconTag(this.optionsStore.options.display.icons.close)\n      );\n      toolbar.push(div);\n    }\n\n    return toolbar;\n  }\n\n  /***\n   * Builds the base header template with next and previous icons\n   * @private\n   */\n  getHeadTemplate(): HTMLElement {\n    const calendarHeader = document.createElement('div');\n    calendarHeader.classList.add(Namespace.css.calendarHeader);\n\n    const previous = document.createElement('div');\n    previous.classList.add(Namespace.css.previous);\n    previous.setAttribute('data-action', ActionTypes.previous);\n    previous.appendChild(\n      this._iconTag(this.optionsStore.options.display.icons.previous)\n    );\n    previous.tabIndex = -1;\n\n    const switcher = document.createElement('div');\n    switcher.classList.add(Namespace.css.switch);\n    switcher.setAttribute('data-action', ActionTypes.changeCalendarView);\n    switcher.tabIndex = -1;\n\n    const next = document.createElement('div');\n    next.classList.add(Namespace.css.next);\n    next.setAttribute('data-action', ActionTypes.next);\n    next.appendChild(\n      this._iconTag(this.optionsStore.options.display.icons.next)\n    );\n    next.tabIndex = -1;\n\n    calendarHeader.append(previous, switcher, next);\n    return calendarHeader;\n  }\n\n  /**\n   * Builds an icon tag as either an `<i>`\n   * or with icons => type is `sprites` then a svg tag instead\n   * @param iconClass\n   * @private\n   */\n  _iconTag(iconClass: string): HTMLElement | SVGElement {\n    if (this.optionsStore.options.display.icons.type === 'sprites') {\n      const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');\n\n      const icon = document.createElementNS(\n        'http://www.w3.org/2000/svg',\n        'use'\n      );\n      icon.setAttribute('xlink:href', iconClass); // Deprecated. Included for backward compatibility\n      icon.setAttribute('href', iconClass);\n      svg.appendChild(icon);\n\n      return svg;\n    }\n    const icon = document.createElement('i');\n    icon.classList.add(...iconClass.split(' '));\n    return icon;\n  }\n\n  /**\n   * A document click event to hide the widget if click is outside\n   * @private\n   * @param e MouseEvent\n   */\n  private _documentClickEvent = (e: MouseEvent) => {\n    if (this.optionsStore.options.debug || (window as any).debug) return; //eslint-disable-line @typescript-eslint/no-explicit-any\n\n    if (\n      this._isVisible &&\n      !e.composedPath().includes(this.widget) && // click inside the widget\n      !e.composedPath()?.includes(this.optionsStore.element) // click on the element\n    ) {\n      this.hide();\n    }\n  };\n\n  /**\n   * Click event for any action like selecting a date\n   * @param e MouseEvent\n   * @private\n   */\n  private _actionsClickEvent = (e: MouseEvent) => {\n    this._eventEmitters.action.emit({ e: e });\n  };\n\n  /**\n   * Causes the widget to get rebuilt on next show. If the picker is already open\n   * then hide and reshow it.\n   * @private\n   */\n  _rebuild() {\n    const wasVisible = this._isVisible;\n    this._dispose();\n    if (wasVisible) this.show();\n  }\n\n  refreshCurrentView() {\n    //if the widget is not showing, just destroy it\n    if (!this._isVisible) this._dispose();\n\n    switch (this.optionsStore.currentView) {\n      case 'clock':\n        this._update('clock');\n        break;\n      case 'calendar':\n        this._update(Unit.date);\n        break;\n      case 'months':\n        this._update(Unit.month);\n        break;\n      case 'years':\n        this._update(Unit.year);\n        break;\n      case 'decades':\n        this._update('decade');\n        break;\n    }\n  }\n\n  private _keyboardEvent(event: KeyboardEvent) {\n    if (this.optionsStore.currentView === 'clock') {\n      this._handleKeyDownClock(event);\n      return;\n    }\n    this._handleKeyDownDate(event);\n    return false;\n  }\n\n  public findViewDateElement(): HTMLElement {\n    let selector = '';\n    let dataValue = '';\n\n    switch (this.optionsStore.currentView) {\n      case 'clock':\n        break;\n      case 'calendar':\n        selector = Namespace.css.daysContainer;\n        dataValue = this.optionsStore.viewDate.dateToDataValue();\n        break;\n      case 'months':\n        selector = Namespace.css.monthsContainer;\n        dataValue = this.optionsStore.viewDate.month.toString();\n        break;\n      case 'years':\n        selector = Namespace.css.yearsContainer;\n        dataValue = this.optionsStore.viewDate.year.toString();\n        break;\n      case 'decades':\n        selector = Namespace.css.decadesContainer;\n        dataValue = (\n          Math.floor(this.optionsStore.viewDate.year / 10) * 10\n        ).toString();\n        break;\n    }\n\n    return this.widget.querySelector(\n      `.${selector} > div[data-value=\"${dataValue}\"]`\n    );\n  }\n\n  private _handleKeyDownDate(event: KeyboardEvent) {\n    let flag = false;\n    const activeElement = document.activeElement as HTMLElement;\n\n    let unit = null;\n    let verticalChange = 7;\n    let horizontalChange = 1;\n    let change = 1;\n    const currentView = this.optionsStore.currentView;\n    switch (currentView) {\n      case 'calendar':\n        unit = Unit.date;\n        break;\n      case 'months':\n        unit = Unit.month;\n        verticalChange = 3;\n        horizontalChange = 1;\n        break;\n      case 'years':\n        unit = Unit.year;\n        verticalChange = 3;\n        horizontalChange = 1;\n        break;\n      case 'decades':\n        unit = Unit.year;\n        verticalChange = 30;\n        horizontalChange = 10;\n        break;\n    }\n\n    switch (event.key) {\n      case 'Esc':\n      case 'Escape':\n        this._eventEmitters.action.emit({ e: null, action: ActionTypes.close });\n        break;\n\n      case ' ':\n      case 'Enter':\n        activeElement.click();\n\n        event.stopPropagation();\n        event.preventDefault();\n        return;\n\n      case 'Tab':\n        this._handleTab(activeElement, event);\n        return;\n\n      case 'Right':\n      case 'ArrowRight':\n        change = horizontalChange;\n        flag = true;\n        break;\n\n      case 'Left':\n      case 'ArrowLeft':\n        flag = true;\n        change = -horizontalChange;\n        break;\n\n      case 'Down':\n      case 'ArrowDown':\n        flag = true;\n        change = verticalChange;\n        break;\n\n      case 'Up':\n      case 'ArrowUp':\n        flag = true;\n        change = -verticalChange;\n        break;\n\n      case 'PageDown':\n        switch (currentView) {\n          case 'calendar':\n            unit = event.shiftKey ? Unit.year : Unit.month;\n            change = 1;\n            break;\n          case 'months':\n            unit = Unit.year;\n            change = event.shiftKey ? 10 : 1;\n            break;\n          case 'years':\n          case 'decades':\n            unit = Unit.year;\n            change = event.shiftKey ? 100 : 10;\n            break;\n        }\n        flag = true;\n        break;\n\n      case 'PageUp':\n        switch (currentView) {\n          case 'calendar':\n            unit = event.shiftKey ? Unit.year : Unit.month;\n            change = -1;\n            break;\n          case 'months':\n            unit = Unit.year;\n            change = -(event.shiftKey ? 10 : 1);\n            break;\n          case 'years':\n          case 'decades':\n            unit = Unit.year;\n            change = -(event.shiftKey ? 100 : 10);\n            break;\n        }\n        flag = true;\n        break;\n\n      case 'Home':\n        this.optionsStore.viewDate = this.optionsStore.viewDate.clone.startOf(\n          'weekDay',\n          this.optionsStore.options.localization.startOfTheWeek\n        );\n        flag = true;\n        unit = null;\n        break;\n\n      case 'End':\n        this.optionsStore.viewDate = this.optionsStore.viewDate.clone.endOf(\n          'weekDay',\n          this.optionsStore.options.localization.startOfTheWeek\n        );\n        flag = true;\n        unit = null;\n        break;\n    }\n\n    if (!flag) return;\n\n    let newViewDate = this.optionsStore.viewDate;\n\n    if (unit) {\n      newViewDate = newViewDate.clone.manipulate(change, unit);\n    }\n\n    this._eventEmitters.updateViewDate.emit(newViewDate);\n\n    const divWithValue = this.findViewDateElement();\n    if (divWithValue) {\n      divWithValue.focus();\n    }\n\n    event.stopPropagation();\n    event.preventDefault();\n  }\n\n  private _handleKeyDownClock(event: KeyboardEvent) {\n    let flag = false;\n    const activeElement = document.activeElement as HTMLElement;\n\n    // Should find which of hour, minute, or seconds sub-windows is open\n    const visibleElement = this.widget.querySelector(\n      `.${Namespace.css.timeContainer} > div[style*=\"display: grid\"]`\n    );\n\n    let subView = Namespace.css.clockContainer;\n\n    if (visibleElement.classList.contains(Namespace.css.hourContainer)) {\n      subView = Namespace.css.hourContainer;\n    }\n    if (visibleElement.classList.contains(Namespace.css.minuteContainer)) {\n      subView = Namespace.css.minuteContainer;\n    }\n    if (visibleElement.classList.contains(Namespace.css.secondContainer)) {\n      subView = Namespace.css.secondContainer;\n    }\n\n    switch (event.key) {\n      case 'Esc':\n      case 'Escape':\n        this._eventEmitters.action.emit({ e: null, action: ActionTypes.close });\n        break;\n\n      case ' ':\n      case 'Enter':\n        activeElement.click();\n\n        event.stopPropagation();\n        event.preventDefault();\n        return;\n\n      case 'Tab':\n        this._handleTab(activeElement, event);\n        return;\n    }\n\n    if (subView === Namespace.css.clockContainer) return;\n\n    const cells = [...visibleElement.querySelectorAll('div')];\n    const currentIndex = cells.indexOf(\n      document.activeElement as HTMLDivElement\n    );\n    const columnCount = 4;\n\n    let targetIndex: number;\n    switch (event.key) {\n      case 'Right':\n      case 'ArrowRight':\n        targetIndex = currentIndex < cells.length - 1 ? currentIndex + 1 : null;\n        flag = true;\n        break;\n\n      case 'Left':\n      case 'ArrowLeft':\n        flag = true;\n        targetIndex = currentIndex > 0 ? currentIndex - 1 : null;\n        break;\n\n      case 'Down':\n      case 'ArrowDown':\n        targetIndex =\n          currentIndex + columnCount < cells.length\n            ? currentIndex + columnCount\n            : null;\n        flag = true;\n        break;\n\n      case 'Up':\n      case 'ArrowUp':\n        targetIndex =\n          currentIndex - columnCount >= 0 ? currentIndex - columnCount : null;\n        flag = true;\n        break;\n    }\n\n    if (!flag) return;\n\n    if (targetIndex !== undefined && targetIndex !== null) {\n      cells[targetIndex].focus();\n    }\n\n    event.stopPropagation();\n    event.preventDefault();\n  }\n\n  private _handleTab(activeElement: HTMLElement, event: KeyboardEvent) {\n    const shiftKey = event.shiftKey;\n    // gather tab targets\n    const addCalendarHeaderTargets = () => {\n      const calendarHeaderItems = this.widget.querySelectorAll(\n        `.${Namespace.css.calendarHeader} > div`\n      ) as NodeListOf<HTMLElement>;\n      tabTargets.push(...calendarHeaderItems);\n    };\n\n    const tabTargets: HTMLElement[] = [];\n    console.log(this.optionsStore.currentView);\n    switch (this.optionsStore.currentView) {\n      case 'clock':\n        {\n          tabTargets.push(\n            ...(this.widget.querySelectorAll(\n              `.${Namespace.css.timeContainer} > div[style*=\"display: grid\"] > div[data-action]`\n            ) as NodeListOf<HTMLElement>)\n          );\n\n          const clock = this.widget.querySelectorAll(\n            `.${Namespace.css.clockContainer}`\n          )[0] as HTMLElement;\n\n          // add meridiem if it's in view\n          if (clock?.style.display === 'grid') {\n            tabTargets.push(\n              ...(this.widget.querySelectorAll(\n                `.${Namespace.css.toggleMeridiem}`\n              ) as NodeListOf<HTMLElement>)\n            );\n          }\n        }\n        break;\n      case 'calendar':\n      case 'months':\n      case 'years':\n      case 'decades':\n        addCalendarHeaderTargets();\n        tabTargets.push(this.findViewDateElement());\n        break;\n    }\n\n    const toolbarItems = this.widget.querySelectorAll(\n      `.${Namespace.css.toolbar} > div`\n    ) as NodeListOf<HTMLElement>;\n    tabTargets.push(...toolbarItems);\n\n    const index = tabTargets.indexOf(activeElement);\n    if (index === -1) return;\n\n    if (shiftKey) {\n      if (index === 0) {\n        tabTargets[tabTargets.length - 1].focus();\n      } else {\n        tabTargets[index - 1].focus();\n      }\n    } else {\n      if (index === tabTargets.length - 1) {\n        tabTargets[0].focus();\n      } else {\n        tabTargets[index + 1].focus();\n      }\n    }\n    event.stopPropagation();\n    event.preventDefault();\n  }\n\n  private _handleFocus() {\n    if (this.optionsStore.currentView === 'clock') this._handleFocusClock();\n    else this.findViewDateElement().focus();\n  }\n\n  private _handleFocusClock() {\n    (\n      this.widget.querySelector(\n        `.${Namespace.css.timeContainer} > div[style*=\"display: grid\"]`\n      ).children[0] as HTMLElement\n    ).focus();\n  }\n}\n\nexport type Paint = (\n  unit: Unit | 'decade',\n  innerDate: DateTime,\n  classes: string[],\n  element: HTMLElement\n) => void;\n"
  },
  {
    "path": "src/js/display/time/hour-display.ts",
    "content": "import { Unit } from '../../datetime';\nimport Namespace from '../../utilities/namespace';\nimport Validation from '../../validation';\nimport { serviceLocator } from '../../utilities/service-locator';\nimport { Paint } from '../index';\nimport ActionTypes from '../../utilities/action-types';\nimport { OptionsStore } from '../../utilities/optionsStore';\nimport Dates from '../../dates';\n\n/**\n * Creates and updates the grid for `hours`\n */\nexport default class HourDisplay {\n  private optionsStore: OptionsStore;\n  private validation: Validation;\n  private dates: Dates;\n\n  constructor() {\n    this.optionsStore = serviceLocator.locate(OptionsStore);\n    this.validation = serviceLocator.locate(Validation);\n    this.dates = serviceLocator.locate(Dates);\n  }\n  /**\n   * Build the container html for the display\n   * @private\n   */\n  getPicker(): HTMLElement {\n    const container = document.createElement('div');\n    container.classList.add(Namespace.css.hourContainer);\n\n    for (let i = 0; i < (this.optionsStore.isTwelveHour ? 12 : 24); i++) {\n      const div = document.createElement('div');\n      div.tabIndex = -1;\n      div.setAttribute('data-action', ActionTypes.selectHour);\n      container.appendChild(div);\n    }\n\n    return container;\n  }\n\n  /**\n   * Populates the grid and updates enabled states\n   * @private\n   */\n  _update(widget: HTMLElement, paint: Paint): void {\n    const container = widget.getElementsByClassName(\n      Namespace.css.hourContainer\n    )[0] as HTMLElement;\n\n    const innerDate = this.optionsStore.viewDate.clone.startOf(Unit.date);\n\n    container\n      .querySelectorAll(`[data-action=\"${ActionTypes.selectHour}\"]`)\n      .forEach((containerClone: HTMLElement) => {\n        const classes = [];\n        classes.push(Namespace.css.hour);\n\n        if (!this.validation.isValid(innerDate, Unit.hours)) {\n          classes.push(Namespace.css.disabled);\n        }\n\n        paint(Unit.hours, innerDate, classes, containerClone);\n\n        containerClone.classList.remove(...containerClone.classList);\n        containerClone.classList.add(...classes);\n        containerClone.setAttribute('data-value', `${innerDate.hours}`);\n        containerClone.innerText = innerDate.getHoursFormatted(\n          this.optionsStore.options.localization.hourCycle\n        );\n        innerDate.manipulate(1, Unit.hours);\n      });\n  }\n}\n"
  },
  {
    "path": "src/js/display/time/minute-display.ts",
    "content": "import { Unit } from '../../datetime';\nimport Namespace from '../../utilities/namespace';\nimport Validation from '../../validation';\nimport { serviceLocator } from '../../utilities/service-locator';\nimport { Paint } from '../index';\nimport ActionTypes from '../../utilities/action-types';\nimport { OptionsStore } from '../../utilities/optionsStore';\n\n/**\n * Creates and updates the grid for `minutes`\n */\nexport default class MinuteDisplay {\n  private optionsStore: OptionsStore;\n  private validation: Validation;\n\n  constructor() {\n    this.optionsStore = serviceLocator.locate(OptionsStore);\n    this.validation = serviceLocator.locate(Validation);\n  }\n  /**\n   * Build the container html for the display\n   * @private\n   */\n  getPicker(): HTMLElement {\n    const container = document.createElement('div');\n    container.classList.add(Namespace.css.minuteContainer);\n\n    const step =\n      this.optionsStore.options.stepping === 1\n        ? 5\n        : this.optionsStore.options.stepping;\n    for (let i = 0; i < 60 / step; i++) {\n      const div = document.createElement('div');\n      div.tabIndex = -1;\n      div.setAttribute('data-action', ActionTypes.selectMinute);\n      container.appendChild(div);\n    }\n\n    return container;\n  }\n\n  /**\n   * Populates the grid and updates enabled states\n   * @private\n   */\n  _update(widget: HTMLElement, paint: Paint): void {\n    const container = widget.getElementsByClassName(\n      Namespace.css.minuteContainer\n    )[0] as HTMLElement;\n\n    const innerDate = this.optionsStore.viewDate.clone.startOf(Unit.hours);\n    const step =\n      this.optionsStore.options.stepping === 1\n        ? 5\n        : this.optionsStore.options.stepping;\n\n    container\n      .querySelectorAll(`[data-action=\"${ActionTypes.selectMinute}\"]`)\n      .forEach((containerClone: HTMLElement) => {\n        const classes = [];\n        classes.push(Namespace.css.minute);\n\n        if (!this.validation.isValid(innerDate, Unit.minutes)) {\n          classes.push(Namespace.css.disabled);\n        }\n\n        paint(Unit.minutes, innerDate, classes, containerClone);\n\n        containerClone.classList.remove(...containerClone.classList);\n        containerClone.classList.add(...classes);\n        containerClone.setAttribute('data-value', `${innerDate.minutes}`);\n        containerClone.innerText = innerDate.minutesFormatted;\n        innerDate.manipulate(step, Unit.minutes);\n      });\n  }\n}\n"
  },
  {
    "path": "src/js/display/time/second-display.ts",
    "content": "import { Unit } from '../../datetime';\nimport Namespace from '../../utilities/namespace';\nimport Validation from '../../validation';\nimport { serviceLocator } from '../../utilities/service-locator';\nimport { Paint } from '../index';\nimport ActionTypes from '../../utilities/action-types';\nimport { OptionsStore } from '../../utilities/optionsStore';\n\n/**\n * Creates and updates the grid for `seconds`\n */\nexport default class secondDisplay {\n  private optionsStore: OptionsStore;\n  private validation: Validation;\n\n  constructor() {\n    this.optionsStore = serviceLocator.locate(OptionsStore);\n    this.validation = serviceLocator.locate(Validation);\n  }\n  /**\n   * Build the container html for the display\n   * @private\n   */\n  getPicker(): HTMLElement {\n    const container = document.createElement('div');\n    container.classList.add(Namespace.css.secondContainer);\n\n    for (let i = 0; i < 12; i++) {\n      const div = document.createElement('div');\n      div.setAttribute('data-action', ActionTypes.selectSecond);\n      div.tabIndex = -1;\n      container.appendChild(div);\n    }\n\n    return container;\n  }\n\n  /**\n   * Populates the grid and updates enabled states\n   * @private\n   */\n  _update(widget: HTMLElement, paint: Paint): void {\n    const container = widget.getElementsByClassName(\n      Namespace.css.secondContainer\n    )[0] as HTMLElement;\n\n    const innerDate = this.optionsStore.viewDate.clone.startOf(Unit.minutes);\n\n    container\n      .querySelectorAll(`[data-action=\"${ActionTypes.selectSecond}\"]`)\n      .forEach((containerClone: HTMLElement) => {\n        const classes = [];\n        classes.push(Namespace.css.second);\n\n        if (!this.validation.isValid(innerDate, Unit.seconds)) {\n          classes.push(Namespace.css.disabled);\n        }\n\n        paint(Unit.seconds, innerDate, classes, containerClone);\n\n        containerClone.classList.remove(...containerClone.classList);\n        containerClone.classList.add(...classes);\n        containerClone.setAttribute('data-value', `${innerDate.seconds}`);\n        containerClone.innerText = innerDate.secondsFormatted;\n        innerDate.manipulate(5, Unit.seconds);\n      });\n  }\n}\n"
  },
  {
    "path": "src/js/display/time/time-display.ts",
    "content": "import { Unit } from '../../datetime';\nimport Namespace from '../../utilities/namespace';\nimport Validation from '../../validation';\nimport Dates from '../../dates';\nimport { serviceLocator } from '../../utilities/service-locator';\nimport ActionTypes from '../../utilities/action-types';\nimport { OptionsStore } from '../../utilities/optionsStore';\n\n/**\n * Creates the clock display\n */\nexport default class TimeDisplay {\n  private _gridColumns = '';\n  private optionsStore: OptionsStore;\n  private validation: Validation;\n  private dates: Dates;\n\n  constructor() {\n    this.optionsStore = serviceLocator.locate(OptionsStore);\n    this.dates = serviceLocator.locate(Dates);\n    this.validation = serviceLocator.locate(Validation);\n  }\n\n  /**\n   * Build the container html for the clock display\n   * @private\n   */\n  getPicker(iconTag: (iconClass: string) => HTMLElement): HTMLElement {\n    const container = document.createElement('div');\n    container.classList.add(Namespace.css.clockContainer);\n\n    container.append(...this._grid(iconTag));\n\n    return container;\n  }\n\n  /**\n   * Populates the various elements with in the clock display\n   * like the current hour and if the manipulation icons are enabled.\n   * @private\n   */\n  _update(widget: HTMLElement): void {\n    const timesDiv = <HTMLElement>(\n      widget.getElementsByClassName(Namespace.css.clockContainer)[0]\n    );\n\n    let lastPicked = this.dates.lastPicked?.clone;\n    if (!lastPicked && this.optionsStore.options.useCurrent)\n      lastPicked = this.optionsStore.viewDate.clone;\n\n    timesDiv\n      .querySelectorAll('.disabled')\n      .forEach((element) => element.classList.remove(Namespace.css.disabled));\n\n    if (this.optionsStore.options.display.components.hours) {\n      if (\n        !this.validation.isValid(\n          this.optionsStore.viewDate.clone.manipulate(1, Unit.hours),\n          Unit.hours\n        )\n      ) {\n        timesDiv\n          .querySelector(`[data-action=${ActionTypes.incrementHours}]`)\n          .classList.add(Namespace.css.disabled);\n      }\n\n      if (\n        !this.validation.isValid(\n          this.optionsStore.viewDate.clone.manipulate(-1, Unit.hours),\n          Unit.hours\n        )\n      ) {\n        timesDiv\n          .querySelector(`[data-action=${ActionTypes.decrementHours}]`)\n          .classList.add(Namespace.css.disabled);\n      }\n\n      timesDiv.querySelector<HTMLElement>(\n        `[data-time-component=${Unit.hours}]`\n      ).innerText = lastPicked\n        ? lastPicked.getHoursFormatted(\n            this.optionsStore.options.localization.hourCycle\n          )\n        : '--';\n    }\n\n    if (this.optionsStore.options.display.components.minutes) {\n      if (\n        !this.validation.isValid(\n          this.optionsStore.viewDate.clone.manipulate(1, Unit.minutes),\n          Unit.minutes\n        )\n      ) {\n        timesDiv\n          .querySelector(`[data-action=${ActionTypes.incrementMinutes}]`)\n          .classList.add(Namespace.css.disabled);\n      }\n\n      if (\n        !this.validation.isValid(\n          this.optionsStore.viewDate.clone.manipulate(-1, Unit.minutes),\n          Unit.minutes\n        )\n      ) {\n        timesDiv\n          .querySelector(`[data-action=${ActionTypes.decrementMinutes}]`)\n          .classList.add(Namespace.css.disabled);\n      }\n      timesDiv.querySelector<HTMLElement>(\n        `[data-time-component=${Unit.minutes}]`\n      ).innerText = lastPicked ? lastPicked.minutesFormatted : '--';\n    }\n\n    if (this.optionsStore.options.display.components.seconds) {\n      if (\n        !this.validation.isValid(\n          this.optionsStore.viewDate.clone.manipulate(1, Unit.seconds),\n          Unit.seconds\n        )\n      ) {\n        timesDiv\n          .querySelector(`[data-action=${ActionTypes.incrementSeconds}]`)\n          .classList.add(Namespace.css.disabled);\n      }\n\n      if (\n        !this.validation.isValid(\n          this.optionsStore.viewDate.clone.manipulate(-1, Unit.seconds),\n          Unit.seconds\n        )\n      ) {\n        timesDiv\n          .querySelector(`[data-action=${ActionTypes.decrementSeconds}]`)\n          .classList.add(Namespace.css.disabled);\n      }\n      timesDiv.querySelector<HTMLElement>(\n        `[data-time-component=${Unit.seconds}]`\n      ).innerText = lastPicked ? lastPicked.secondsFormatted : '--';\n    }\n\n    if (this.optionsStore.isTwelveHour) {\n      const toggle = timesDiv.querySelector<HTMLElement>(\n        `[data-action=${ActionTypes.toggleMeridiem}]`\n      );\n\n      const meridiemDate = (lastPicked || this.optionsStore.viewDate).clone;\n\n      toggle.innerText = meridiemDate.meridiem();\n\n      if (\n        !this.validation.isValid(\n          meridiemDate.manipulate(\n            meridiemDate.hours >= 12 ? -12 : 12,\n            Unit.hours\n          )\n        )\n      ) {\n        toggle.classList.add(Namespace.css.disabled);\n      } else {\n        toggle.classList.remove(Namespace.css.disabled);\n      }\n    }\n\n    timesDiv.style.gridTemplateAreas = `\"${this._gridColumns}\"`;\n  }\n\n  /**\n   * Creates the table for the clock display depending on what options are selected.\n   * @private\n   */\n  private _grid(iconTag: (iconClass: string) => HTMLElement): HTMLElement[] {\n    this._gridColumns = '';\n    const top = [],\n      middle = [],\n      bottom = [],\n      separator = document.createElement('div'),\n      upIcon = iconTag(this.optionsStore.options.display.icons.up),\n      downIcon = iconTag(this.optionsStore.options.display.icons.down);\n\n    separator.classList.add(Namespace.css.separator, Namespace.css.noHighlight);\n    const separatorColon = <HTMLElement>separator.cloneNode(true);\n    separatorColon.innerHTML = ':';\n\n    const getSeparator = (colon = false): HTMLElement => {\n      return colon\n        ? <HTMLElement>separatorColon.cloneNode(true)\n        : <HTMLElement>separator.cloneNode(true);\n    };\n\n    if (this.optionsStore.options.display.components.hours) {\n      let divElement = document.createElement('div');\n      divElement.tabIndex = -1;\n      divElement.setAttribute(\n        'title',\n        this.optionsStore.options.localization.incrementHour\n      );\n      divElement.setAttribute('data-action', ActionTypes.incrementHours);\n      divElement.appendChild(upIcon.cloneNode(true));\n      top.push(divElement);\n\n      divElement = document.createElement('div');\n      divElement.tabIndex = -1;\n      divElement.setAttribute(\n        'title',\n        this.optionsStore.options.localization.pickHour\n      );\n      divElement.setAttribute('data-action', ActionTypes.showHours);\n      divElement.setAttribute('data-time-component', Unit.hours);\n      middle.push(divElement);\n\n      divElement = document.createElement('div');\n      divElement.tabIndex = -1;\n      divElement.setAttribute(\n        'title',\n        this.optionsStore.options.localization.decrementHour\n      );\n      divElement.setAttribute('data-action', ActionTypes.decrementHours);\n      divElement.appendChild(downIcon.cloneNode(true));\n      bottom.push(divElement);\n      this._gridColumns += 'a';\n    }\n\n    if (this.optionsStore.options.display.components.minutes) {\n      this._gridColumns += ' a';\n      if (this.optionsStore.options.display.components.hours) {\n        top.push(getSeparator());\n        middle.push(getSeparator(true));\n        bottom.push(getSeparator());\n        this._gridColumns += ' a';\n      }\n      let divElement = document.createElement('div');\n      divElement.tabIndex = -1;\n      divElement.setAttribute(\n        'title',\n        this.optionsStore.options.localization.incrementMinute\n      );\n      divElement.setAttribute('data-action', ActionTypes.incrementMinutes);\n      divElement.appendChild(upIcon.cloneNode(true));\n      top.push(divElement);\n\n      divElement = document.createElement('div');\n      divElement.tabIndex = -1;\n      divElement.setAttribute(\n        'title',\n        this.optionsStore.options.localization.pickMinute\n      );\n      divElement.setAttribute('data-action', ActionTypes.showMinutes);\n      divElement.setAttribute('data-time-component', Unit.minutes);\n      middle.push(divElement);\n\n      divElement = document.createElement('div');\n      divElement.tabIndex = -1;\n      divElement.setAttribute(\n        'title',\n        this.optionsStore.options.localization.decrementMinute\n      );\n      divElement.setAttribute('data-action', ActionTypes.decrementMinutes);\n      divElement.appendChild(downIcon.cloneNode(true));\n      bottom.push(divElement);\n    }\n\n    if (this.optionsStore.options.display.components.seconds) {\n      this._gridColumns += ' a';\n      if (this.optionsStore.options.display.components.minutes) {\n        top.push(getSeparator());\n        middle.push(getSeparator(true));\n        bottom.push(getSeparator());\n        this._gridColumns += ' a';\n      }\n      let divElement = document.createElement('div');\n      divElement.tabIndex = -1;\n      divElement.setAttribute(\n        'title',\n        this.optionsStore.options.localization.incrementSecond\n      );\n      divElement.setAttribute('data-action', ActionTypes.incrementSeconds);\n      divElement.appendChild(upIcon.cloneNode(true));\n      top.push(divElement);\n\n      divElement = document.createElement('div');\n      divElement.tabIndex = -1;\n      divElement.setAttribute(\n        'title',\n        this.optionsStore.options.localization.pickSecond\n      );\n      divElement.setAttribute('data-action', ActionTypes.showSeconds);\n      divElement.setAttribute('data-time-component', Unit.seconds);\n      middle.push(divElement);\n\n      divElement = document.createElement('div');\n      divElement.tabIndex = -1;\n      divElement.setAttribute(\n        'title',\n        this.optionsStore.options.localization.decrementSecond\n      );\n      divElement.setAttribute('data-action', ActionTypes.decrementSeconds);\n      divElement.appendChild(downIcon.cloneNode(true));\n      bottom.push(divElement);\n    }\n\n    if (this.optionsStore.isTwelveHour) {\n      this._gridColumns += ' a';\n      let divElement = getSeparator();\n      top.push(divElement);\n\n      const button = document.createElement('button');\n      button.tabIndex = -1;\n      button.setAttribute('type', 'button');\n      button.setAttribute(\n        'title',\n        this.optionsStore.options.localization.toggleMeridiem\n      );\n      button.setAttribute('data-action', ActionTypes.toggleMeridiem);\n      button.setAttribute('tabindex', '-1');\n      if (Namespace.css.toggleMeridiem.includes(',')) {\n        //todo move this to paint function?\n        button.classList.add(...Namespace.css.toggleMeridiem.split(','));\n      } else button.classList.add(Namespace.css.toggleMeridiem);\n\n      divElement = document.createElement('div');\n      divElement.classList.add(Namespace.css.noHighlight);\n      divElement.appendChild(button);\n      middle.push(divElement);\n\n      divElement = getSeparator();\n      bottom.push(divElement);\n    }\n\n    this._gridColumns = this._gridColumns.trim();\n\n    return [...top, ...middle, ...bottom];\n  }\n}\n"
  },
  {
    "path": "src/js/jQuery-provider.js",
    "content": "///<reference src=\"js/tempus-dominus\"/>\n/*global $, tempusDominus */\n\n/*!\n * Tempus Dominus v6.10.3 (https://getdatepicker.com/)\n * Copyright 2013-2021 Jonathan Peterson\n * Licensed under MIT (https://github.com/Eonasdan/tempus-dominus/blob/master/LICENSE)\n */\ntempusDominus.jQueryInterface = function (option, argument) {\n  if (this.length === 1) {\n    return tempusDominus.jQueryHandleThis(this, option, argument);\n  }\n  // \"this\" is jquery here\n  return this.each(function () {\n    tempusDominus.jQueryHandleThis(this, option, argument);\n  });\n};\n\ntempusDominus.jQueryHandleThis = function (me, option, argument) {\n  let data = $(me).data(tempusDominus.Namespace.dataKey);\n  if (typeof option === 'object') {\n    option = $.extend({}, tempusDominus.DefaultOptions, option);\n  }\n\n  if (!data) {\n    data = new tempusDominus.TempusDominus($(me)[0], option);\n    $(me).data(tempusDominus.Namespace.dataKey, data);\n  }\n\n  if (typeof option === 'string') {\n    if (data[option] === undefined) {\n      throw new Error(`No method named \"${option}\"`);\n    }\n    if (argument === undefined) {\n      return data[option]();\n    } else {\n      if (option === 'date') {\n        data.isDateUpdateThroughDateOptionFromClientCode = true;\n      }\n      const ret = data[option](argument);\n      data.isDateUpdateThroughDateOptionFromClientCode = false;\n      return ret;\n    }\n  }\n};\n\ntempusDominus.getSelectorFromElement = function ($element) {\n  let selector = $element.data('target'),\n    $selector;\n\n  if (!selector) {\n    selector = $element.attr('href') || '';\n    selector = /^#[a-z]/i.test(selector) ? selector : null;\n  }\n  $selector = $(selector);\n  if ($selector.length === 0) {\n    return $element;\n  }\n\n  if (!$selector.data(tempusDominus.Namespace.dataKey)) {\n    $.extend({}, $selector.data(), $(this).data());\n  }\n\n  return $selector;\n};\n\n/**\n * ------------------------------------------------------------------------\n * jQuery\n * ------------------------------------------------------------------------\n */\n$(document)\n  .on(\n    `click${tempusDominus.Namespace.events.key}.data-api`,\n    `[data-toggle=\"${tempusDominus.Namespace.dataKey}\"]`,\n    function () {\n      const $originalTarget = $(this),\n        $target = tempusDominus.getSelectorFromElement($originalTarget),\n        config = $target.data(tempusDominus.Namespace.dataKey);\n      if ($target.length === 0) {\n        return;\n      }\n      if (\n        config._options.allowInputToggle &&\n        $originalTarget.is('input[data-toggle=\"datetimepicker\"]')\n      ) {\n        return;\n      }\n      tempusDominus.jQueryInterface.call($target, 'toggle');\n    }\n  )\n  .on(\n    tempusDominus.Namespace.events.change,\n    `.${tempusDominus.Namespace.NAME}-input`,\n    function (event) {\n      const $target = tempusDominus.getSelectorFromElement($(this));\n      if ($target.length === 0 || event.isInit) {\n        return;\n      }\n      tempusDominus.jQueryInterface.call($target, '_change', event);\n    }\n  )\n  .on(\n    tempusDominus.Namespace.events.blur,\n    `.${tempusDominus.Namespace.NAME}-input`,\n    function (event) {\n      const $target = tempusDominus.getSelectorFromElement($(this)),\n        config = $target.data(tempusDominus.Namespace.dataKey);\n      if ($target.length === 0) {\n        return;\n      }\n      if (config._options.debug || window.debug) {\n        return;\n      }\n      tempusDominus.jQueryInterface.call($target, 'hide', event);\n    }\n  )\n  /*.on(tempusDominus.Namespace.Events.keydown, `.${tempusDominus.Namespace.NAME}-input`, function (event) {\n      const $target = tempusDominus.getSelectorFromElement($(this));\n      if ($target.length === 0) {\n        return;\n      }\n      tempusDominus.jQueryInterface.call($target, '_keydown', event);\n    })\n    .on(tempusDominus.Namespace.Events.keyup, `.${tempusDominus.Namespace.NAME}-input`, function (event) {\n      const $target = tempusDominus.getSelectorFromElement($(this));\n      if ($target.length === 0) {\n        return;\n      }\n      tempusDominus.jQueryInterface.call($target, '_keyup', event);\n    })*/\n  .on(\n    tempusDominus.Namespace.events.focus,\n    `.${tempusDominus.Namespace.NAME}-input`,\n    function (event) {\n      const $target = tempusDominus.getSelectorFromElement($(this)),\n        config = $target.data(tempusDominus.Namespace.dataKey);\n      if ($target.length === 0) {\n        return;\n      }\n      if (!config._options.allowInputToggle) {\n        return;\n      }\n      tempusDominus.jQueryInterface.call($target, 'show', event);\n    }\n  );\nconst name = 'tempusDominus';\nconst JQUERY_NO_CONFLICT = $.fn[name];\n$.fn[name] = tempusDominus.jQueryInterface;\n$.fn[name].Constructor = tempusDominus.TempusDominus;\n$.fn[name].noConflict = function () {\n  $.fn[name] = JQUERY_NO_CONFLICT;\n  return tempusDominus.jQueryInterface;\n};\n"
  },
  {
    "path": "src/js/locales/ar-SA.ts",
    "content": "const name = 'ar-SA';\n\nconst localization = {\n  today: 'اليوم',\n  clear: 'مسح',\n  close: 'إغلاق',\n  selectMonth: 'اختر الشهر',\n  previousMonth: 'الشهر السابق',\n  nextMonth: 'الشهر التالي',\n  selectYear: 'اختر السنة',\n  previousYear: 'العام السابق',\n  nextYear: 'العام التالي',\n  selectDecade: 'اختر العقد',\n  previousDecade: 'العقد السابق',\n  nextDecade: 'العقد التالي',\n  previousCentury: 'القرن السابق',\n  nextCentury: 'القرن التالي',\n  pickHour: 'اختر الساعة',\n  incrementHour: 'أضف ساعة',\n  decrementHour: 'أنقص ساعة',\n  pickMinute: 'اختر الدقيقة',\n  incrementMinute: 'أضف دقيقة',\n  decrementMinute: 'أنقص دقيقة',\n  pickSecond: 'اختر الثانية',\n  incrementSecond: 'أضف ثانية',\n  decrementSecond: 'أنقص ثانية',\n  toggleMeridiem: 'تبديل الفترة',\n  selectTime: 'اخر الوقت',\n  selectDate: 'اختر التاريخ',\n  dayViewHeaderFormat: { month: 'long', year: '2-digit' },\n  locale: 'ar-SA',\n  startOfTheWeek: 1,\n  dateFormats: {\n    LT: 'HH:mm',\n    LTS: 'HH:mm:ss',\n    L: 'dd/MM/yyyy',\n    LL: 'd MMMM yyyy',\n    LLL: 'd MMMM yyyy HH:mm',\n    LLLL: 'dddd d MMMM yyyy HH:mm',\n  },\n  ordinal: (n) => n,\n  format: 'L LT',\n};\n\nexport { localization, name };\n"
  },
  {
    "path": "src/js/locales/ar.ts",
    "content": "const name = 'ar';\n\nconst localization = {\n  today: 'اليوم',\n  clear: 'مسح',\n  close: 'إغلاق',\n  selectMonth: 'اختر الشهر',\n  previousMonth: 'الشهر السابق',\n  nextMonth: 'الشهر التالي',\n  selectYear: 'اختر السنة',\n  previousYear: 'العام السابق',\n  nextYear: 'العام التالي',\n  selectDecade: 'اختر العقد',\n  previousDecade: 'العقد السابق',\n  nextDecade: 'العقد التالي',\n  previousCentury: 'القرن السابق',\n  nextCentury: 'القرن التالي',\n  pickHour: 'اختر الساعة',\n  incrementHour: 'أضف ساعة',\n  decrementHour: 'أنقص ساعة',\n  pickMinute: 'اختر الدقيقة',\n  incrementMinute: 'أضف دقيقة',\n  decrementMinute: 'أنقص دقيقة',\n  pickSecond: 'اختر الثانية',\n  incrementSecond: 'أضف ثانية',\n  decrementSecond: 'أنقص ثانية',\n  toggleMeridiem: 'تبديل الفترة',\n  selectTime: 'اخر الوقت',\n  selectDate: 'اختر التاريخ',\n  dayViewHeaderFormat: { month: 'long', year: '2-digit' },\n  locale: 'ar',\n  startOfTheWeek: 1,\n  dateFormats: {\n    LT: 'HH:mm',\n    LTS: 'HH:mm:ss',\n    L: 'd/M/yyyy',\n    LL: 'd MMMM yyyy',\n    LLL: 'd MMMM yyyy HH:mm',\n    LLLL: 'dddd d MMMM yyyy HH:mm',\n  },\n  ordinal: (n) => n,\n  format: 'L LT',\n};\n\nexport { localization, name };\n"
  },
  {
    "path": "src/js/locales/ca.ts",
    "content": "const name = 'ca';\n\nconst localization = {\n  today: 'Avui',\n  clear: 'Esborrar selecció',\n  close: 'Tancar selector',\n  selectMonth: 'Seleccionar mes',\n  previousMonth: 'Mes anterior',\n  nextMonth: 'Pròxim mes',\n  selectYear: 'Seleccionar any',\n  previousYear: 'Any anterior',\n  nextYear: 'Pròxim any',\n  selectDecade: 'Seleccionar dècada',\n  previousDecade: 'Dècada anterior',\n  nextDecade: 'Pròxima dècada',\n  previousCentury: 'Segle anterior',\n  nextCentury: 'Pròxim segle',\n  pickHour: 'Escollir hora',\n  incrementHour: 'Incrementar hora',\n  decrementHour: 'Decrementar hora',\n  pickMinute: 'Escollir minut',\n  incrementMinute: 'Incrementar minut',\n  decrementMinute: 'Decrementar minut',\n  pickSecond: 'Escollir segon',\n  incrementSecond: 'Incrementar segon',\n  decrementSecond: 'Decrementar segon',\n  toggleMeridiem: 'Canviar AM/PM',\n  selectTime: 'Seleccionar temps',\n  selectDate: 'Seleccionar data',\n  dayViewHeaderFormat: { month: 'long', year: '2-digit' },\n  startOfTheWeek: 1,\n  locale: 'ca',\n  dateFormats: {\n    LT: 'H:mm',\n    LTS: 'H:mm:ss',\n    L: 'dd/MM/yyyy',\n    LL: 'd [de] MMMM [de] yyyy',\n    LLL: 'd [de] MMMM [de] yyyy H:mm',\n    LLLL: 'dddd, d [de] MMMM [de] yyyy H:mm',\n  },\n  ordinal: (n) => `${n}º`,\n  format: 'L LT',\n};\n\nexport { localization, name };\n"
  },
  {
    "path": "src/js/locales/cs.ts",
    "content": "const name = 'cs';\n\nconst localization = {\n  today: 'Dnes',\n  clear: 'Vymazat výběr',\n  close: 'Zavřít výběrové okno',\n  selectMonth: 'Vybrat měsíc',\n  previousMonth: 'Předchozí měsíc',\n  nextMonth: 'Následující měsíc',\n  selectYear: 'Vybrat rok',\n  previousYear: 'Předchozí rok',\n  nextYear: 'Následující rok',\n  selectDecade: 'Vybrat desetiletí',\n  previousDecade: 'Předchozí desetiletí',\n  nextDecade: 'Následující desetiletí',\n  previousCentury: 'Předchozí století',\n  nextCentury: 'Následující století',\n  pickHour: 'Vybrat hodinu',\n  incrementHour: 'Zvýšit hodinu',\n  decrementHour: 'Snížit hodinu',\n  pickMinute: 'Vybrat minutu',\n  incrementMinute: 'Zvýšit minutu',\n  decrementMinute: 'Snížit minutu',\n  pickSecond: 'Vybrat sekundu',\n  incrementSecond: 'Zvýšit sekundu',\n  decrementSecond: 'Snížit sekundu',\n  toggleMeridiem: 'Přepnout ráno / odpoledne',\n  selectTime: 'Vybrat čas',\n  selectDate: 'Vybrat datum',\n  dayViewHeaderFormat: { month: 'long', year: '2-digit' },\n  locale: 'cs',\n  startOfTheWeek: 1,\n  dateFormats: {\n    LTS: 'HH:mm:ss',\n    LT: 'HH:mm',\n    L: 'dd.MM.yyyy',\n    LL: 'd. MMMM yyyy',\n    LLL: 'd. MMMM yyyy HH:mm',\n    LLLL: 'dddd, d. MMMM yyyy HH:mm',\n  },\n  ordinal: (n) => `${n}.`,\n  format: 'L LT',\n};\n\nexport { localization, name };\n"
  },
  {
    "path": "src/js/locales/de.ts",
    "content": "const name = 'de';\n\nconst localization = {\n  today: 'Heute',\n  clear: 'Auswahl löschen',\n  close: 'Auswahlbox schließen',\n  selectMonth: 'Monat wählen',\n  previousMonth: 'Letzter Monat',\n  nextMonth: 'Nächster Monat',\n  selectYear: 'Jahr wählen',\n  previousYear: 'Letztes Jahr',\n  nextYear: 'Nächstes Jahr',\n  selectDecade: 'Jahrzehnt wählen',\n  previousDecade: 'Letztes Jahrzehnt',\n  nextDecade: 'Nächstes Jahrzehnt',\n  previousCentury: 'Letztes Jahrhundert',\n  nextCentury: 'Nächstes Jahrhundert',\n  pickHour: 'Stunde wählen',\n  incrementHour: 'Stunde erhöhen',\n  decrementHour: 'Stunde verringern',\n  pickMinute: 'Minute wählen',\n  incrementMinute: 'Minute erhöhen',\n  decrementMinute: 'Minute verringern',\n  pickSecond: 'Sekunde wählen',\n  incrementSecond: 'Sekunde erhöhen',\n  decrementSecond: 'Sekunde verringern',\n  toggleMeridiem: 'Tageszeit umschalten',\n  selectTime: 'Zeit wählen',\n  selectDate: 'Datum wählen',\n  dayViewHeaderFormat: { month: 'long', year: '2-digit' },\n  locale: 'de',\n  startOfTheWeek: 1,\n  dateFormats: {\n    LTS: 'HH:mm:ss',\n    LT: 'HH:mm',\n    L: 'dd.MM.yyyy',\n    LL: 'd. MMMM yyyy',\n    LLL: 'd. MMMM yyyy HH:mm',\n    LLLL: 'dddd, d. MMMM yyyy HH:mm',\n  },\n  ordinal: (n) => `${n}.`,\n  format: 'L LT',\n};\n\nexport { localization, name };\n"
  },
  {
    "path": "src/js/locales/es.ts",
    "content": "const name = 'es';\n\nconst localization = {\n  today: 'Hoy',\n  clear: 'Borrar selección',\n  close: 'Cerrar selector',\n  selectMonth: 'Seleccionar mes',\n  previousMonth: 'Mes anterior',\n  nextMonth: 'Próximo mes',\n  selectYear: 'Seleccionar año',\n  previousYear: 'Año anterior',\n  nextYear: 'Próximo año',\n  selectDecade: 'Seleccionar década',\n  previousDecade: 'Década anterior',\n  nextDecade: 'Próxima década',\n  previousCentury: 'Siglo anterior',\n  nextCentury: 'Próximo siglo',\n  pickHour: 'Elegir hora',\n  incrementHour: 'Incrementar hora',\n  decrementHour: 'Decrementar hora',\n  pickMinute: 'Elegir minuto',\n  incrementMinute: 'Incrementar minuto',\n  decrementMinute: 'Decrementar minuto',\n  pickSecond: 'Elegir segundo',\n  incrementSecond: 'Incrementar segundo',\n  decrementSecond: 'Decrementar segundo',\n  toggleMeridiem: 'Cambiar AM/PM',\n  selectTime: 'Seleccionar tiempo',\n  selectDate: 'Seleccionar fecha',\n  dayViewHeaderFormat: { month: 'long', year: '2-digit' },\n  startOfTheWeek: 1,\n  locale: 'es',\n  dateFormats: {\n    LT: 'H:mm',\n    LTS: 'H:mm:ss',\n    L: 'dd/MM/yyyy',\n    LL: 'd [de] MMMM [de] yyyy',\n    LLL: 'd [de] MMMM [de] yyyy H:mm',\n    LLLL: 'dddd, d [de] MMMM [de] yyyy H:mm',\n  },\n  ordinal: (n) => `${n}º`,\n  format: 'L LT',\n};\n\nexport { localization, name };\n"
  },
  {
    "path": "src/js/locales/fi.ts",
    "content": "const name = 'fi';\n\nconst localization = {\n  today: 'Tänään',\n  clear: 'Tyhjennä',\n  close: 'Sulje',\n  selectMonth: 'Valitse kuukausi',\n  previousMonth: 'Edellinen kuukausi',\n  nextMonth: 'Seuraava kuukausi',\n  selectYear: 'Valitse vuosi',\n  previousYear: 'Edellinen vuosi',\n  nextYear: 'Seuraava vuosi',\n  selectDecade: 'Valitse vuosikymmen',\n  previousDecade: 'Edellinen vuosikymmen',\n  nextDecade: 'Seuraava vuosikymmen',\n  previousCentury: 'Edellinen vuosisata',\n  nextCentury: 'Seuraava vuosisata',\n  pickHour: 'Valitse tunnit',\n  incrementHour: 'Vähennä tunteja',\n  decrementHour: 'Lisää tunteja',\n  pickMinute: 'Valitse minuutit',\n  incrementMinute: 'Vähennä minuutteja',\n  decrementMinute: 'Lisää minuutteja',\n  pickSecond: 'Valitse sekuntit',\n  incrementSecond: 'Vähennä sekunteja',\n  decrementSecond: 'Lisää sekunteja',\n  toggleMeridiem: 'Vaihda kellonaikaa',\n  selectTime: 'Valitse aika',\n  selectDate: 'Valise päivä',\n  dayViewHeaderFormat: { month: 'long', year: '2-digit' },\n  locale: 'fi',\n  startOfTheWeek: 1,\n  dateFormats: {\n    LT: 'HH.mm',\n    LTS: 'HH.mm.ss',\n    L: 'dd.MM.yyyy',\n    LL: 'd. MMMM[ta] yyyy',\n    LLL: 'd. MMMM[ta] yyyy, [klo] HH.mm',\n    LLLL: 'dddd, d. MMMM[ta] yyyy, [klo] HH.mm',\n  },\n  ordinal: (n) => `${n}.`,\n  format: 'L LT',\n};\n\nexport { localization, name };\n"
  },
  {
    "path": "src/js/locales/fr.ts",
    "content": "const name = 'fr';\n\nconst localization = {\n  today: \"Aujourd'hui\",\n  clear: 'Effacer la sélection',\n  close: 'Fermer',\n  selectMonth: 'Sélectionner le mois',\n  previousMonth: 'Mois précédent',\n  nextMonth: 'Mois suivant',\n  selectYear: \"Sélectionner l'année\",\n  previousYear: 'Année précédente',\n  nextYear: 'Année suivante',\n  selectDecade: 'Sélectionner la décennie',\n  previousDecade: 'Décennie précédente',\n  nextDecade: 'Décennie suivante',\n  previousCentury: 'Siècle précédente',\n  nextCentury: 'Siècle suivante',\n  pickHour: \"Sélectionner l'heure\",\n  incrementHour: \"Incrementer l'heure\",\n  decrementHour: \"Diminuer l'heure\",\n  pickMinute: 'Sélectionner les minutes',\n  incrementMinute: 'Incrementer les minutes',\n  decrementMinute: 'Diminuer les minutes',\n  pickSecond: 'Sélectionner les secondes',\n  incrementSecond: 'Incrementer les secondes',\n  decrementSecond: 'Diminuer les secondes',\n  toggleMeridiem: 'Basculer AM-PM',\n  selectTime: \"Sélectionner l'heure\",\n  selectDate: 'Sélectionner une date',\n  dayViewHeaderFormat: { month: 'long', year: '2-digit' },\n  locale: 'fr',\n  startOfTheWeek: 1,\n  dateFormats: {\n    LT: 'HH:mm',\n    LTS: 'HH:mm:ss',\n    L: 'dd/MM/yyyy',\n    LL: 'd MMMM yyyy',\n    LLL: 'd MMMM yyyy HH:mm',\n    LLLL: 'dddd d MMMM yyyy HH:mm',\n  },\n  ordinal: (n) => {\n    const o = n === 1 ? 'er' : '';\n    return `${n}${o}`;\n  },\n  format: 'L LT',\n};\n\nexport { localization, name };\n"
  },
  {
    "path": "src/js/locales/hr.ts",
    "content": "const name = 'hr';\n\nconst localization = {\n  today: 'Danas',\n  clear: 'Poništi odabir',\n  close: 'Zatvori',\n  selectMonth: 'Odaberi mjesec',\n  previousMonth: 'Prethodni mjesec',\n  nextMonth: 'Sljedeći mjesec',\n  selectYear: 'Odaberi godinu',\n  previousYear: 'Prethodna godina',\n  nextYear: 'Sljedeće godina',\n  selectDecade: 'Odaberi desetljeće',\n  previousDecade: 'Prethodno desetljeće',\n  nextDecade: 'Sljedeće desetljeće',\n  previousCentury: 'Prethodno stoljeće',\n  nextCentury: 'Sljedeće stoljeće',\n  pickHour: 'Odaberi vrijeme',\n  incrementHour: 'Povećaj vrijeme',\n  decrementHour: 'Smanji vrijeme',\n  pickMinute: 'Odaberi minutu',\n  incrementMinute: 'Povećaj minute',\n  decrementMinute: 'Smanji minute',\n  pickSecond: 'Odaberi sekundu',\n  incrementSecond: 'Povećaj sekunde',\n  decrementSecond: 'Smanji sekunde',\n  toggleMeridiem: 'Razmijeni AM-PM',\n  selectTime: 'Odaberi vrijeme',\n  selectDate: 'Odaberi datum',\n  dayViewHeaderFormat: { month: 'long', year: '2-digit' },\n  locale: 'hr',\n  startOfTheWeek: 1,\n  dateFormats: {\n    LT: 'HH:mm',\n    LTS: 'HH:mm:ss',\n    L: 'dd/MM/yyyy',\n    LL: 'd MMMM yyyy',\n    LLL: 'd MMMM yyyy HH:mm',\n    LLLL: 'dddd d MMMM yyyy HH:mm',\n  },\n  ordinal: (n) => `${n}.`,\n  format: 'L LT',\n};\n\nexport { localization, name };\n"
  },
  {
    "path": "src/js/locales/hy.ts",
    "content": "const name = 'hy';\n\nconst localization = {\n  today: 'Այսօր',\n  clear: 'Ջնջել ընտրվածը',\n  close: 'Փակել',\n  selectMonth: 'Ընտրել ամիս',\n  previousMonth: 'Նախորդ ամիս',\n  nextMonth: 'Հաջորդ ամիս',\n  selectYear: 'Ընտրել տարի',\n  previousYear: 'Նախորդ տարի',\n  nextYear: 'Հաջորդ տարի',\n  selectDecade: 'Ընտրել տասնամյակ',\n  previousDecade: 'Նախորդ տասնամյակ',\n  nextDecade: 'Հաջորդ տասնամյակ',\n  previousCentury: 'Նախորդ դար',\n  nextCentury: 'Հաջորդ դար',\n  pickHour: 'Ընտրել ժամ',\n  incrementHour: 'Ավելացնել ժամ',\n  decrementHour: 'Նվազեցնել ժամ',\n  pickMinute: 'Ընտրել րոպե',\n  incrementMinute: 'Ավելացնել րոպե',\n  decrementMinute: 'Նվազեցնել րոպե',\n  pickSecond: 'Ընտրել երկրորդը',\n  incrementSecond: 'Ավելացնել վայրկյան',\n  decrementSecond: 'Նվազեցնել վայրկյան',\n  toggleMeridiem: 'Փոփոխել Ժամանակաշրջանը',\n  selectTime: 'Ընտրել Ժամ',\n  selectDate: 'Ընտրել ամսաթիվ',\n  dayViewHeaderFormat: { month: 'long', year: '2-digit' },\n  locale: 'hy',\n  startOfTheWeek: 1,\n  dateFormats: {\n    LT: 'H:mm',\n    LTS: 'H:mm:ss',\n    L: 'dd.MM.yyyy',\n    LL: 'd MMMM yyyy թ.',\n    LLL: 'd MMMM yyyy թ., H:mm',\n    LLLL: 'dddd, d MMMM yyyy թ., H:mm',\n  },\n  ordinal: (n) => n,\n  format: 'L LTS',\n};\n\nexport { localization, name };\n"
  },
  {
    "path": "src/js/locales/it.ts",
    "content": "const name = 'it';\n\nconst localization = {\n  today: 'Oggi',\n  clear: 'Cancella selezione',\n  close: 'Chiudi',\n  selectMonth: 'Seleziona mese',\n  previousMonth: 'Mese precedente',\n  nextMonth: 'Mese successivo',\n  selectYear: 'Seleziona anno',\n  previousYear: 'Anno precedente',\n  nextYear: 'Anno successivo',\n  selectDecade: 'Seleziona decennio',\n  previousDecade: 'Decennio precedente',\n  nextDecade: 'Decennio successivo',\n  previousCentury: 'Secolo precedente',\n  nextCentury: 'Secolo successivo',\n  pickHour: \"Seleziona l'ora\",\n  incrementHour: \"Incrementa l'ora\",\n  decrementHour: \"Decrementa l'ora\",\n  pickMinute: 'Seleziona i minuti',\n  incrementMinute: 'Incrementa i minuti',\n  decrementMinute: 'Decrementa i minuti',\n  pickSecond: 'Seleziona i secondi',\n  incrementSecond: 'Incrementa i secondi',\n  decrementSecond: 'Decrementa i secondi',\n  toggleMeridiem: 'Scambia AM-PM',\n  selectTime: \"Seleziona l'ora\",\n  selectDate: 'Seleziona una data',\n  dayViewHeaderFormat: { month: 'long', year: '2-digit' },\n  locale: 'it',\n  startOfTheWeek: 1,\n  dateFormats: {\n    LT: 'HH:mm',\n    LTS: 'HH:mm:ss',\n    L: 'dd/MM/yyyy',\n    LL: 'd MMMM yyyy',\n    LLL: 'd MMMM yyyy HH:mm',\n    LLLL: 'dddd d MMMM yyyy HH:mm',\n  },\n  ordinal: (n) => `${n}º`,\n  format: 'L LT',\n};\n\nexport { localization, name };\n"
  },
  {
    "path": "src/js/locales/nl.ts",
    "content": "const name = 'nl';\n\nconst localization = {\n  today: 'Vandaag',\n  clear: 'Verwijder selectie',\n  close: 'Sluit de picker',\n  selectMonth: 'Selecteer een maand',\n  previousMonth: 'Vorige maand',\n  nextMonth: 'Volgende maand',\n  selectYear: 'Selecteer een jaar',\n  previousYear: 'Vorige jaar',\n  nextYear: 'Volgende jaar',\n  selectDecade: 'Selecteer decennium',\n  previousDecade: 'Vorige decennium',\n  nextDecade: 'Volgende decennium',\n  previousCentury: 'Vorige eeuw',\n  nextCentury: 'Volgende eeuw',\n  pickHour: 'Kies een uur',\n  incrementHour: 'Verhoog uur',\n  decrementHour: 'Verlaag uur',\n  pickMinute: 'Kies een minute',\n  incrementMinute: 'Verhoog  minuut',\n  decrementMinute: 'Verlaag minuut',\n  pickSecond: 'Kies een seconde',\n  incrementSecond: 'Verhoog seconde',\n  decrementSecond: 'Verlaag seconde',\n  toggleMeridiem: 'Schakel tussen AM/PM',\n  selectTime: 'Selecteer een tijd',\n  selectDate: 'Selecteer een datum',\n  dayViewHeaderFormat: { month: 'long', year: '2-digit' },\n  locale: 'nl',\n  startOfTheWeek: 1,\n  dateFormats: {\n    LT: 'HH:mm',\n    LTS: 'HH:mm:ss',\n    L: 'dd-MM-yyyy',\n    LL: 'd MMMM yyyy',\n    LLL: 'd MMMM yyyy HH:mm',\n    LLLL: 'dddd d MMMM yyyy HH:mm',\n  },\n  ordinal: (n) => `[${n}${n === 1 || n === 8 || n >= 20 ? 'ste' : 'de'}]`,\n  format: 'L LT',\n};\n\nexport { localization, name };\n"
  },
  {
    "path": "src/js/locales/pl.ts",
    "content": "const name = 'pl';\n\nconst localization = {\n  today: 'Dzisiaj',\n  clear: 'Wyczyść',\n  close: 'Zamknij',\n  selectMonth: 'Wybierz miesiąc',\n  previousMonth: 'Poprzedni miesiąc',\n  nextMonth: 'Następny miesiąc',\n  selectYear: 'Wybierz rok',\n  previousYear: 'Poprzedni rok',\n  nextYear: 'Następny rok',\n  selectDecade: 'Wybierz dekadę',\n  previousDecade: 'Poprzednia dekada',\n  nextDecade: 'Następna dekada',\n  previousCentury: 'Poprzednie stulecie',\n  nextCentury: 'Następne stulecie',\n  pickHour: 'Wybierz godzinę',\n  incrementHour: 'Kolejna godzina',\n  decrementHour: 'Poprzednia godzina',\n  pickMinute: 'Wybierz minutę',\n  incrementMinute: 'Kolejna minuta',\n  decrementMinute: 'Poprzednia minuta',\n  pickSecond: 'Wybierz sekundę',\n  incrementSecond: 'Kolejna sekunda',\n  decrementSecond: 'Poprzednia sekunda',\n  toggleMeridiem: 'Przełącz porę dnia',\n  selectTime: 'Ustaw godzinę',\n  selectDate: 'Ustaw datę',\n  dayViewHeaderFormat: { month: 'long', year: '2-digit' },\n  locale: 'pl',\n  startOfTheWeek: 1,\n  dateFormats: {\n    LT: 'HH:mm',\n    LTS: 'HH:mm:ss',\n    L: 'dd.MM.yyyy',\n    LL: 'd MMMM yyyy',\n    LLL: 'd MMMM yyyy HH:mm',\n    LLLL: 'dddd, d MMMM yyyy HH:mm',\n  },\n  ordinal: (n) => `${n}.`,\n  format: 'L LT',\n};\n\nexport { localization, name };\n"
  },
  {
    "path": "src/js/locales/pt-PT.ts",
    "content": "const name = 'pt-PT';\n\nconst localization = {\n  today: 'Hoje',\n  clear: 'Limpar seleção',\n  close: 'Eliminar seleção',\n  selectMonth: 'Selecionar mês',\n  previousMonth: 'Mês anterior',\n  nextMonth: 'Próximo mês',\n  selectYear: 'Selecionar ano',\n  previousYear: 'Ano anterior',\n  nextYear: 'Próximo ano',\n  selectDecade: 'Seleccionar década',\n  previousDecade: 'Década anterior',\n  nextDecade: 'Próxima década',\n  previousCentury: 'Século anterior',\n  nextCentury: 'Próximo Século',\n  pickHour: 'Seleccionar hora',\n  incrementHour: 'Aumentar hora',\n  decrementHour: 'Diminuir hora',\n  pickMinute: 'Seleccionar minuto',\n  incrementMinute: 'Aumentar minuto',\n  decrementMinute: 'Diminuir minuto',\n  pickSecond: 'Seleccionar segundo',\n  incrementSecond: 'Aumentar segundo',\n  decrementSecond: 'Diminuir segundo',\n  toggleMeridiem: 'Alterar AM/PM',\n  selectTime: 'Selecionar hora',\n  selectDate: 'Seleccionar data',\n  dayViewHeaderFormat: { month: 'long', year: '2-digit' },\n  startOfTheWeek: 1,\n  locale: 'pt-PT',\n  dateFormats: {\n    LT: 'H:mm',\n    LTS: 'H:mm:ss',\n    L: 'dd/MM/yyyy',\n    LL: 'd [de] MMMM [de] yyyy',\n    LLL: 'd [de] MMMM [de] yyyy H:mm',\n    LLLL: 'dddd, d [de] MMMM [de] yyyy H:mm',\n  },\n  ordinal: (n) => `${n}º`,\n  format: 'L LT',\n};\n\nexport { localization, name };\n"
  },
  {
    "path": "src/js/locales/ro.ts",
    "content": "const name = 'ro';\n\nconst localization = {\n  today: 'Mergi la ziua de astăzi',\n  clear: 'Șterge selecția',\n  close: 'Închide calendarul',\n  selectMonth: 'Selectează luna',\n  previousMonth: 'Luna precedentă',\n  nextMonth: 'Luna următoare',\n  selectYear: 'Selectează anul',\n  previousYear: 'Anul precedent',\n  nextYear: 'Anul următor',\n  selectDecade: 'Selectează deceniul',\n  previousDecade: 'Deceniul precedent',\n  nextDecade: 'Deceniul următor',\n  previousCentury: 'Secolul precedent',\n  nextCentury: 'Secolul următor',\n  pickHour: 'Alege ora',\n  incrementHour: 'Incrementează ora',\n  decrementHour: 'Decrementează ora',\n  pickMinute: 'Alege minutul',\n  incrementMinute: 'Incrementează minutul',\n  decrementMinute: 'Decrementează minutul',\n  pickSecond: 'Alege secunda',\n  incrementSecond: 'Incrementează secunda',\n  decrementSecond: 'Decrementează secunda',\n  toggleMeridiem: 'Comută modul AM/PM',\n  selectTime: 'Selectează ora',\n  selectDate: 'Selectează data',\n  dayViewHeaderFormat: { month: 'long', year: '2-digit' },\n  locale: 'ro',\n  startOfTheWeek: 1,\n  dateFormats: {\n    LT: 'H:mm',\n    LTS: 'H:mm:ss',\n    L: 'dd.MM.yyyy',\n    LL: 'd MMMM yyyy',\n    LLL: 'd MMMM yyyy H:mm',\n    LLLL: 'dddd, d MMMM yyyy H:mm',\n  },\n  ordinal: (n) => n,\n  format: 'L LT',\n};\n\nexport { localization, name };\n"
  },
  {
    "path": "src/js/locales/ru.ts",
    "content": "const name = 'ru';\n\nconst localization = {\n  today: 'Перейти сегодня',\n  clear: 'Очистить выделение',\n  close: 'Закрыть сборщик',\n  selectMonth: 'Выбрать месяц',\n  previousMonth: 'Предыдущий месяц',\n  nextMonth: 'В следующем месяце',\n  selectYear: 'Выбрать год',\n  previousYear: 'Предыдущий год',\n  nextYear: 'В следующем году',\n  selectDecade: 'Выбрать десятилетие',\n  previousDecade: 'Предыдущее десятилетие',\n  nextDecade: 'Следующее десятилетие',\n  previousCentury: 'Предыдущий век',\n  nextCentury: 'Следующий век',\n  pickHour: 'Выберите час',\n  incrementHour: 'Время увеличения',\n  decrementHour: 'Уменьшить час',\n  pickMinute: 'Выбрать минуту',\n  incrementMinute: 'Минута приращения',\n  decrementMinute: 'Уменьшить минуту',\n  pickSecond: 'Выбрать второй',\n  incrementSecond: 'Увеличение секунды',\n  decrementSecond: 'Уменьшение секунды',\n  toggleMeridiem: 'Переключить период',\n  selectTime: 'Выбрать время',\n  selectDate: 'Выбрать дату',\n  dayViewHeaderFormat: { month: 'long', year: '2-digit' },\n  locale: 'ru',\n  startOfTheWeek: 1,\n  dateFormats: {\n    LT: 'H:mm',\n    LTS: 'H:mm:ss',\n    L: 'dd.MM.yyyy',\n    LL: 'd MMMM yyyy г.',\n    LLL: 'd MMMM yyyy г., H:mm',\n    LLLL: 'dddd, d MMMM yyyy г., H:mm',\n  },\n  ordinal: (n) => n,\n  format: 'L LT',\n};\n\nexport { localization, name };\n"
  },
  {
    "path": "src/js/locales/sk.ts",
    "content": "const name = 'sk';\n\nconst localization = {\n  today: 'Dnes',\n  clear: 'Vymazať výber',\n  close: 'Zavrieť výberové okno',\n  selectMonth: 'Vybrať mesiac',\n  previousMonth: 'Predchádzajúci mesiac',\n  nextMonth: 'Nasledujúci mesiac',\n  selectYear: 'Vybrať rok',\n  previousYear: 'Predchádzajúci rok',\n  nextYear: 'Nasledujúci rok',\n  selectDecade: 'Vybrať desaťročie',\n  previousDecade: 'Predchádzajúce desaťročie',\n  nextDecade: 'Nasledujúce desaťročie',\n  previousCentury: 'Predchádzajúce storočia',\n  nextCentury: 'Nasledujúce storočia',\n  pickHour: 'Vybrať hodinu',\n  incrementHour: 'Zvýšiť hodinu',\n  decrementHour: 'Znížiť hodinu',\n  pickMinute: 'Vybrať minútu',\n  incrementMinute: 'Zvýšiť minútu',\n  decrementMinute: 'Znížiť minútu',\n  pickSecond: 'Vybrať sekundu',\n  incrementSecond: 'Zvýšiť sekundu',\n  decrementSecond: 'Znížiť sekundu',\n  toggleMeridiem: 'Prepnúť ráno / popoludní',\n  selectTime: 'Vybrať čas',\n  selectDate: 'Vybrať dátum',\n  dayViewHeaderFormat: { month: 'long', year: '2-digit' },\n  locale: 'sk',\n  startOfTheWeek: 1,\n  dateFormats: {\n    LTS: 'HH:mm:ss',\n    LT: 'HH:mm',\n    L: 'dd.MM.yyyy',\n    LL: 'd. MMMM yyyy',\n    LLL: 'd. MMMM yyyy HH:mm',\n    LLLL: 'dddd, d. MMMM yyyy HH:mm',\n  },\n  ordinal: (n) => `${n}.`,\n  format: 'L LT',\n};\n\nexport { localization, name };\n"
  },
  {
    "path": "src/js/locales/sl.ts",
    "content": "const name = 'sl';\n\nconst localization = {\n  today: 'Danes',\n  clear: 'Počisti',\n  close: 'Zapri',\n  selectMonth: 'Izberite mesec',\n  previousMonth: 'Prejšnji mesec',\n  nextMonth: 'Naslednji mesec',\n  selectYear: 'Izberite leto',\n  previousYear: 'Prejšnje Leto',\n  nextYear: 'Naslednje leto',\n  selectDecade: 'Izberite desetletje',\n  previousDecade: 'Prejšnje desetletje',\n  nextDecade: 'Naslednje desetletje',\n  previousCentury: 'Prejšnje stoletje',\n  nextCentury: 'Naslednje stoletje',\n  pickHour: 'Izberite uro',\n  incrementHour: 'Povečaj ure',\n  decrementHour: 'Zmanjšaj uro',\n  pickMinute: 'Izberite minuto',\n  incrementMinute: 'Povečaj minuto',\n  decrementMinute: 'Zmanjšaj minuto',\n  pickSecond: 'Izberite drugo',\n  incrementSecond: 'Povečaj sekundo',\n  decrementSecond: 'Zmanjšaj sekundo',\n  toggleMeridiem: 'Preklop dopoldne/popoldne',\n  selectTime: 'Izberite čas',\n  selectDate: 'Izberite Datum',\n  dayViewHeaderFormat: { month: 'long', year: 'numeric' },\n  locale: 'sl',\n  startOfTheWeek: 1,\n  dateFormats: {\n    LT: 'H:mm',\n    LTS: 'H:mm:ss',\n    L: 'dd.MM.yyyy',\n    LL: 'd. MMMM yyyy',\n    LLL: 'd. MMMM yyyy H:mm',\n    LLLL: 'dddd, d. MMMM yyyy H:mm',\n  },\n  ordinal: (n) => `${n}.`,\n  format: 'L LT',\n};\n\nexport { localization, name };\n"
  },
  {
    "path": "src/js/locales/sr-Latn.ts",
    "content": "const name = 'sr-Latn';\n\nconst localization = {\n  today: 'Danas',\n  clear: 'Izbriši izbor',\n  close: 'Zatvori',\n  selectMonth: 'Izaberi mesec',\n  previousMonth: 'Prethodni mesec',\n  nextMonth: 'Sledeći mesec',\n  selectYear: 'Izaberi godinu',\n  previousYear: 'Prethodna godina',\n  nextYear: 'Sledeća godina',\n  selectDecade: 'Izaberi dekadu',\n  previousDecade: 'Prethodna dekada',\n  nextDecade: 'Sledeća dekada',\n  previousCentury: 'Prethodni vek',\n  nextCentury: 'Sledeći vek',\n  pickHour: 'Izaberi vreme',\n  incrementHour: 'Povećaj vreme',\n  decrementHour: 'Smanji vreme',\n  pickMinute: 'Izaberi minute',\n  incrementMinute: 'Povećaj minute',\n  decrementMinute: 'Smanji minute',\n  pickSecond: 'Izaberi sekunde',\n  incrementSecond: 'Povećaj sekunde',\n  decrementSecond: 'Smanji sekunde',\n  toggleMeridiem: 'Razmeni AM-PM',\n  selectTime: 'Izaberi vreme',\n  selectDate: 'Izaberi datum',\n  dayViewHeaderFormat: { month: 'long', year: '2-digit' },\n  locale: 'sr-Latn',\n  startOfTheWeek: 1,\n  dateFormats: {\n    LT: 'H:mm',\n    LTS: 'H:mm:ss',\n    L: 'D. M. YYYY.',\n    LL: 'D. MMMM YYYY.',\n    LLL: 'D. MMMM YYYY. H:mm',\n    LLLL: 'dddd, D. MMMM YYYY. H:mm',\n  },\n  ordinal: (n) => `${n}.`,\n  format: 'L LT',\n};\n\nexport { localization, name };\n"
  },
  {
    "path": "src/js/locales/sr.ts",
    "content": "const name = 'sr';\n\nconst localization = {\n  today: 'Данас',\n  clear: 'Избриши избор',\n  close: 'Затвори',\n  selectMonth: 'Изабери месец',\n  previousMonth: 'Претходни месец',\n  nextMonth: 'Следећи месец',\n  selectYear: 'Изабери годину',\n  previousYear: 'Претходна година',\n  nextYear: 'Следећа година',\n  selectDecade: 'Изабери декаду',\n  previousDecade: 'Претходна декада',\n  nextDecade: 'Следећа декада',\n  previousCentury: 'Претходни век',\n  nextCentury: 'Следећи век',\n  pickHour: 'Изабери време',\n  incrementHour: 'Повећај време',\n  decrementHour: 'Смањи време',\n  pickMinute: 'Изабери минуте',\n  incrementMinute: 'Повећај минуте',\n  decrementMinute: 'Смањи минуте',\n  pickSecond: 'Изабери секунде',\n  incrementSecond: 'Повећај секунде',\n  decrementSecond: 'Смањи секунде',\n  toggleMeridiem: 'Размени AM-PM',\n  selectTime: 'Изабери време',\n  selectDate: 'Изабери датум',\n  dayViewHeaderFormat: { month: 'long', year: '2-digit' },\n  locale: 'sr',\n  startOfTheWeek: 1,\n  dateFormats: {\n    LT: 'H:mm',\n    LTS: 'H:mm:ss',\n    L: 'D. M. YYYY.',\n    LL: 'D. MMMM YYYY.',\n    LLL: 'D. MMMM YYYY. H:mm',\n    LLLL: 'dddd, D. MMMM YYYY. H:mm',\n  },\n  ordinal: (n) => `${n}.`,\n  format: 'L LT',\n};\n\nexport { localization, name };\n"
  },
  {
    "path": "src/js/locales/tr.ts",
    "content": "const name = 'tr';\n\nconst localization = {\n  today: 'Bugün',\n  clear: 'Temizle',\n  close: 'Kapat',\n  selectMonth: 'Ay seçin',\n  previousMonth: 'Önceki Ay',\n  nextMonth: 'Sonraki Ay',\n  selectYear: 'Yıl seçin',\n  previousYear: 'Önceki yıl',\n  nextYear: 'Sonraki yıl',\n  selectDecade: 'On yıl seçin',\n  previousDecade: 'Önceki on yıl',\n  nextDecade: 'Sonraki on yıl',\n  previousCentury: 'Önceki yüzyıl',\n  nextCentury: 'Sonraki yüzyıl',\n  pickHour: 'Saat seçin',\n  incrementHour: 'Saati ilerlet',\n  decrementHour: 'Saati gerilet',\n  pickMinute: 'Dakika seçin',\n  incrementMinute: 'Dakikayı ilerlet',\n  decrementMinute: 'Dakikayı gerilet',\n  pickSecond: 'Saniye seç',\n  incrementSecond: 'Saniyeyi ilerlet',\n  decrementSecond: 'Saniyeyi gerilet',\n  toggleMeridiem: 'Meridemi Değiştir AM-PM',\n  selectTime: 'Saat seçin',\n  selectDate: 'Tarih seçin',\n  dayViewHeaderFormat: { month: 'long', year: 'numeric' },\n  locale: 'tr',\n  startOfTheWeek: 1,\n  dateFormats: {\n    LT: 'HH:mm',\n    LTS: 'HH:mm:ss',\n    L: 'dd.MM.yyyy',\n    LL: 'd MMMM yyyy',\n    LLL: 'd MMMM yyyy HH:mm',\n    LLLL: 'dddd, d MMMM yyyy HH:mm',\n  },\n  ordinal: (n) => `${n}.`,\n  format: 'L LT',\n};\n\nexport { localization, name };\n"
  },
  {
    "path": "src/js/locales/uk.ts",
    "content": "const name = 'uk';\n\nconst localization = {\n  today: 'Сьогодні',\n  clear: 'Очистити',\n  close: 'Закрити',\n  selectMonth: 'Обрати місяць',\n  previousMonth: 'Попередній місяць',\n  nextMonth: 'У наступному місяці',\n  selectYear: 'Обрати рік',\n  previousYear: 'Попередній рік',\n  nextYear: 'У наступному році',\n  selectDecade: 'Обрати десятиліття',\n  previousDecade: 'Попереднє десятиліття',\n  nextDecade: 'Наступне десятиліття',\n  previousCentury: 'Попереднє століття',\n  nextCentury: 'Наступне століття',\n  pickHour: 'Оберіть годину',\n  incrementHour: 'Час збільшення',\n  decrementHour: 'Зменшити годину',\n  pickMinute: 'Обрати хвилину',\n  incrementMinute: 'Хвилина приросту',\n  decrementMinute: 'Зменшити хвилину',\n  pickSecond: 'Обрати другий',\n  incrementSecond: 'Збільшення секунди',\n  decrementSecond: 'Зменшення секунди',\n  toggleMeridiem: 'Переключити період',\n  selectTime: 'Обрати час',\n  selectDate: 'Обрати дату',\n  dayViewHeaderFormat: { month: 'long', year: 'numeric' },\n  locale: 'uk',\n  startOfTheWeek: 1,\n  dateFormats: {\n    LT: 'H:mm',\n    LTS: 'H:mm:ss',\n    L: 'dd.MM.yyyy',\n    LL: 'd MMMM yyyy р.',\n    LLL: 'd MMMM yyyy р., H:mm',\n    LLLL: 'dddd, d MMMM yyyy р., H:mm',\n  },\n  ordinal: (n) => n,\n  format: 'L LT',\n};\n\nexport { localization, name };\n"
  },
  {
    "path": "src/js/locales/zh-CN.ts",
    "content": "const name = 'zh-CN';\n\nconst localization = {\n  today: '今天',\n  clear: '清空',\n  close: '关闭',\n  selectMonth: '选择月份',\n  previousMonth: '上个月',\n  nextMonth: '下个月',\n  selectYear: '选择年份',\n  previousYear: '上一年',\n  nextYear: '下一年',\n  selectDecade: '选择年代',\n  previousDecade: '下个年代',\n  nextDecade: '上个年代',\n  previousCentury: '上个世纪',\n  nextCentury: '下个世纪',\n  pickHour: '选取时钟',\n  incrementHour: '加一小时',\n  decrementHour: '减一小时',\n  pickMinute: '选取分钟',\n  incrementMinute: '加一分钟',\n  decrementMinute: '减一分钟',\n  pickSecond: '选取秒钟',\n  incrementSecond: '加一秒钟',\n  decrementSecond: '减一秒钟',\n  toggleMeridiem: '切换上下午',\n  selectTime: '选择时间',\n  selectDate: '选择日期',\n  dayViewHeaderFormat: { month: 'long', year: '2-digit' },\n  locale: 'zh-CN',\n  startOfTheWeek: 1,\n  dateFormats: {\n    LT: 'HH:mm',\n    LTS: 'HH:mm:ss',\n    L: 'yyyy/MM/dd',\n    LL: 'yyyy年Md日',\n    LLL: 'yyyy年Md日Th点mm分',\n    LLLL: 'yyyy年Md日ddddTh点mm分',\n  },\n  ordinal: (n) => n,\n  format: 'L LT',\n};\n\nexport { localization, name };\n"
  },
  {
    "path": "src/js/locales/zh-HK.ts",
    "content": "const name = 'zh-HK';\n\nconst localization = {\n  today: '今天',\n  clear: '清空',\n  close: '關閉',\n  selectMonth: '選擇月份',\n  previousMonth: '上個月',\n  nextMonth: '下個月',\n  selectYear: '選擇年份',\n  previousYear: '上一年',\n  nextYear: '下一年',\n  selectDecade: '選擇年代',\n  previousDecade: '下個年代',\n  nextDecade: '上個年代',\n  previousCentury: '上個世紀',\n  nextCentury: '下個世紀',\n  pickHour: '選取時鐘',\n  incrementHour: '加一小時',\n  decrementHour: '減一小時',\n  pickMinute: '選取分鐘',\n  incrementMinute: '加一分鐘',\n  decrementMinute: '減一分鐘',\n  pickSecond: '選取秒鐘',\n  incrementSecond: '加一秒鐘',\n  decrementSecond: '減一秒鐘',\n  toggleMeridiem: '切換上下午',\n  selectTime: '選擇時間',\n  selectDate: '選擇日期',\n  dayViewHeaderFormat: { month: 'long', year: '2-digit' },\n  locale: 'zh-HK',\n  startOfTheWeek: 1,\n  dateFormats: {\n    LT: 'HH:mm',\n    LTS: 'HH:mm:ss',\n    L: 'yyyy/MM/dd',\n    LL: 'yyyy年Md日',\n    LLL: 'yyyy年Md日 HH:mm',\n    LLLL: 'yyyy年Md日dddd HH:mm',\n  },\n  ordinal: (n) => n,\n  format: 'L LT',\n};\n\nexport { localization, name };\n"
  },
  {
    "path": "src/js/locales/zh-MO.ts",
    "content": "const name = 'zh-MO';\n\nconst localization = {\n  today: '今天',\n  clear: '清空',\n  close: '關閉',\n  selectMonth: '選擇月份',\n  previousMonth: '上個月',\n  nextMonth: '下個月',\n  selectYear: '選擇年份',\n  previousYear: '上一年',\n  nextYear: '下一年',\n  selectDecade: '選擇年代',\n  previousDecade: '下個年代',\n  nextDecade: '上個年代',\n  previousCentury: '上個世紀',\n  nextCentury: '下個世紀',\n  pickHour: '選取時鐘',\n  incrementHour: '加一小時',\n  decrementHour: '減一小時',\n  pickMinute: '選取分鐘',\n  incrementMinute: '加一分鐘',\n  decrementMinute: '減一分鐘',\n  pickSecond: '選取秒鐘',\n  incrementSecond: '加一秒鐘',\n  decrementSecond: '減一秒鐘',\n  toggleMeridiem: '切換上下午',\n  selectTime: '選擇時間',\n  selectDate: '選擇日期',\n  dayViewHeaderFormat: { month: 'long', year: '2-digit' },\n  locale: 'zh-MO',\n  startOfTheWeek: 1,\n  dateFormats: {\n    LT: 'HH:mm',\n    LTS: 'HH:mm:ss',\n    L: 'dd/MM/yyyy',\n    LL: 'yyyy年Md日',\n    LLL: 'yyyy年Md日 HH:mm',\n    LLLL: 'yyyy年Md日dddd HH:mm',\n  },\n  ordinal: (n) => n,\n  format: 'L LT',\n};\n\nexport { localization, name };\n"
  },
  {
    "path": "src/js/locales/zh-TW.ts",
    "content": "const name = 'zh-TW';\n\nconst localization = {\n  today: '今天',\n  clear: '清空',\n  close: '關閉',\n  selectMonth: '選擇月份',\n  previousMonth: '上個月',\n  nextMonth: '下個月',\n  selectYear: '選擇年份',\n  previousYear: '上一年',\n  nextYear: '下一年',\n  selectDecade: '選擇年代',\n  previousDecade: '下個年代',\n  nextDecade: '上個年代',\n  previousCentury: '上個世紀',\n  nextCentury: '下個世紀',\n  pickHour: '選取時鐘',\n  incrementHour: '加一小時',\n  decrementHour: '減一小時',\n  pickMinute: '選取分鐘',\n  incrementMinute: '加一分鐘',\n  decrementMinute: '減一分鐘',\n  pickSecond: '選取秒鐘',\n  incrementSecond: '加一秒鐘',\n  decrementSecond: '減一秒鐘',\n  toggleMeridiem: '切換上下午',\n  selectTime: '選擇時間',\n  selectDate: '選擇日期',\n  dayViewHeaderFormat: { month: 'long', year: '2-digit' },\n  locale: 'zh-TW',\n  startOfTheWeek: 1,\n  dateFormats: {\n    LT: 'HH:mm',\n    LTS: 'HH:mm:ss',\n    L: 'yyyy/MM/dd',\n    LL: 'yyyy年MD日',\n    LLL: 'yyyy年MD日 HH:mm',\n    LLLL: 'yyyy年MD日dddd HH:mm',\n  },\n  ordinal: (n) => n,\n  format: 'L LT',\n};\n\nexport { localization, name };\n"
  },
  {
    "path": "src/js/plugins/bi-one/index.ts",
    "content": "// this obviously requires the Bootstrap Icons v1 libraries to be loaded\n\nconst biOneIcons = {\n  type: 'icons',\n  time: 'bi bi-clock',\n  date: 'bi bi-calendar-week',\n  up: 'bi bi-arrow-up',\n  down: 'bi bi-arrow-down',\n  previous: 'bi bi-chevron-left',\n  next: 'bi bi-chevron-right',\n  today: 'bi bi-calendar-check',\n  clear: 'bi bi-trash',\n  close: 'bi bi-x',\n};\n\n// noinspection JSUnusedGlobalSymbols\nconst load = (_, __, tdFactory) => {\n  tdFactory.DefaultOptions.display.icons = biOneIcons;\n};\n\nexport { biOneIcons, load };\n"
  },
  {
    "path": "src/js/plugins/customDateFormat/index.ts",
    "content": "export default () => {\n  console.warn(\n    'This plugin has been merged with the main picker and is now longer required'\n  );\n};\n"
  },
  {
    "path": "src/js/plugins/examples/custom-paint-job.ts",
    "content": "/* eslint-disable */\n// noinspection JSUnusedGlobalSymbols\nexport default (option, tdClasses, tdFactory) => {\n  // noinspection JSUnusedLocalSymbols\n  tdClasses.Display.prototype.paint = (\n    unit,\n    date,\n    classes: string[],\n    element: HTMLElement\n  ) => {\n    if (unit === tdFactory.Unit.date) {\n      if (date.isSame(new tdFactory.DateTime(), unit)) {\n        classes.push('special-day');\n      }\n    }\n  };\n};\n"
  },
  {
    "path": "src/js/plugins/examples/sample.ts",
    "content": "// noinspection JSUnusedGlobalSymbols\n\nexport default (option, tdClasses, tdFactory) => {\n  // extend the picker\n  // e.g. add new tempusDominus.TempusDominus(...).someFunction()\n  tdClasses.TempusDominus.prototype.someFunction = (a, logger) => {\n    logger = logger || console.log;\n    logger(a);\n  };\n\n  // extend tempusDominus\n  // e.g. add tempusDominus.example()\n  tdFactory.example = (a, logger) => {\n    logger = logger || console.log;\n    logger(a);\n  };\n\n  // overriding existing API\n  // e.g. extend new tempusDominus.TempusDominus(...).show()\n  const oldShow = tdClasses.TempusDominus.prototype.show;\n  tdClasses.TempusDominus.prototype.show = function (a, logger) {\n    logger = logger || console.log;\n    alert('from plugin');\n    logger(a);\n    oldShow.bind(this)();\n    // return modified result\n  };\n};\n"
  },
  {
    "path": "src/js/plugins/fa-five/index.ts",
    "content": "// this obviously requires the FA 6 libraries to be loaded\n\nconst faFiveIcons = {\n  type: 'icons',\n  time: 'fas fa-clock',\n  date: 'fas fa-calendar',\n  up: 'fas fa-arrow-up',\n  down: 'fas fa-arrow-down',\n  previous: 'fas fa-chevron-left',\n  next: 'fas fa-chevron-right',\n  today: 'fas fa-calendar-check',\n  clear: 'fas fa-trash',\n  close: 'fas fa-times',\n};\n\n// noinspection JSUnusedGlobalSymbols\nconst load = (_, __, tdFactory) => {\n  tdFactory.DefaultOptions.display.icons = faFiveIcons;\n};\n\nexport { faFiveIcons, load };\n"
  },
  {
    "path": "src/js/plugins/moment-parse/index.ts",
    "content": "//obviously, loading moment js is required.\ndeclare let moment;\nexport default (option, tdClasses, tdFactory) => {\n  tdClasses.Dates.prototype.setFromInput = function (value, index) {\n    const converted = moment(value, option);\n    if (converted.isValid()) {\n      const date = tdFactory.DateTime.convert(\n        converted.toDate(),\n        this.optionsStore.options.localization.locale\n      );\n      this.setValue(date, index);\n    } else {\n      console.warn('Momentjs failed to parse the input date.');\n    }\n  };\n\n  tdClasses.Dates.prototype.formatInput = function (date) {\n    return moment(date).format(option);\n  };\n};\n"
  },
  {
    "path": "src/js/tempus-dominus.ts",
    "content": "import Display from './display/index';\nimport Dates from './dates';\nimport Actions from './actions';\nimport {\n  DateTime,\n  DateTimeFormatOptions,\n  guessHourCycle,\n  Unit,\n} from './datetime';\nimport Namespace from './utilities/namespace';\nimport Options from './utilities/options';\nimport {\n  BaseEvent,\n  ChangeEvent,\n  ViewUpdateEvent,\n} from './utilities/event-types';\nimport { EventEmitters } from './utilities/event-emitter';\nimport {\n  serviceLocator,\n  setupServiceLocator,\n} from './utilities/service-locator';\nimport CalendarModes from './utilities/calendar-modes';\nimport DefaultOptions, {\n  DefaultEnLocalization,\n} from './utilities/default-options';\nimport ActionTypes from './utilities/action-types';\nimport { OptionsStore } from './utilities/optionsStore';\nimport { OptionConverter } from './utilities/optionConverter';\n\n/**\n * A robust and powerful date/time picker component.\n */\nclass TempusDominus {\n  //eslint-disable-next-line @typescript-eslint/no-explicit-any\n  _subscribers: { [key: string]: ((event: any) => Record<string, unknown>)[] } =\n    {};\n  private _isDisabled = false;\n  private _currentPromptTimeTimeout: NodeJS.Timeout;\n  private actions: Actions;\n  private optionsStore: OptionsStore;\n  private _eventEmitters: EventEmitters;\n  display: Display;\n  dates: Dates;\n\n  constructor(element: HTMLElement, options: Options = {} as Options) {\n    setupServiceLocator();\n    this._eventEmitters = serviceLocator.locate(EventEmitters);\n    this.optionsStore = serviceLocator.locate(OptionsStore);\n    this.display = serviceLocator.locate(Display);\n    this.dates = serviceLocator.locate(Dates);\n    this.actions = serviceLocator.locate(Actions);\n\n    if (!element) {\n      Namespace.errorMessages.mustProvideElement();\n    }\n\n    this.optionsStore.element = element;\n    this._initializeOptions(options, DefaultOptions, true);\n    this.optionsStore.viewDate.setLocalization(\n      this.optionsStore.options.localization\n    );\n    this.optionsStore.unset = true;\n\n    this._initializeInput();\n    this._initializeToggle();\n\n    if (this.optionsStore.options.display.inline) this.display.show();\n\n    this._eventEmitters.triggerEvent.subscribe((e) => {\n      this._triggerEvent(e);\n    });\n\n    this._eventEmitters.viewUpdate.subscribe(() => {\n      this._viewUpdate();\n    });\n\n    this._eventEmitters.updateViewDate.subscribe((dateTime) => {\n      this.viewDate = dateTime;\n    });\n  }\n\n  get viewDate() {\n    return this.optionsStore.viewDate;\n  }\n\n  set viewDate(value) {\n    this.optionsStore.viewDate = value;\n    this.optionsStore.viewDate.setLocalization(\n      this.optionsStore.options.localization\n    );\n    this.display._update(\n      this.optionsStore.currentView === 'clock' ? 'clock' : 'calendar'\n    );\n  }\n\n  // noinspection JSUnusedGlobalSymbols\n  /**\n   * Update the picker options. If `reset` is provide `options` will be merged with DefaultOptions instead.\n   * @param options\n   * @param reset\n   * @public\n   */\n  updateOptions(options, reset = false): void {\n    if (reset) this._initializeOptions(options, DefaultOptions);\n    else this._initializeOptions(options, this.optionsStore.options);\n\n    this.optionsStore.viewDate.setLocalization(\n      this.optionsStore.options.localization\n    );\n    this.display.refreshCurrentView();\n  }\n\n  // noinspection JSUnusedGlobalSymbols\n  /**\n   * Toggles the picker open or closed. If the picker is disabled, nothing will happen.\n   * @public\n   */\n  toggle(): void {\n    if (this._isDisabled) return;\n    this.display.toggle();\n  }\n\n  // noinspection JSUnusedGlobalSymbols\n  /**\n   * Shows the picker unless the picker is disabled.\n   * @public\n   */\n  show(): void {\n    if (this._isDisabled) return;\n    this.display.show();\n  }\n\n  // noinspection JSUnusedGlobalSymbols\n  /**\n   * Hides the picker unless the picker is disabled.\n   * @public\n   */\n  hide(): void {\n    this.display.hide();\n  }\n\n  // noinspection JSUnusedGlobalSymbols\n  /**\n   * Disables the picker and the target input field.\n   * @public\n   */\n  disable(): void {\n    this._isDisabled = true;\n    // todo this might be undesired. If a dev disables the input field to\n    // only allow using the picker, this will break that.\n    this.optionsStore.input?.setAttribute('disabled', 'disabled');\n    this.display.hide();\n  }\n\n  // noinspection JSUnusedGlobalSymbols\n  /**\n   * Enables the picker and the target input field.\n   * @public\n   */\n  enable(): void {\n    this._isDisabled = false;\n    this.optionsStore.input?.removeAttribute('disabled');\n  }\n\n  // noinspection JSUnusedGlobalSymbols\n  /**\n   * Clears all the selected dates\n   * @public\n   */\n  clear(): void {\n    this.optionsStore.input.value = '';\n    this.dates.clear();\n  }\n\n  // noinspection JSUnusedGlobalSymbols\n  /**\n   * Allows for a direct subscription to picker events, without having to use addEventListener on the element.\n   * @param eventTypes See Namespace.Events\n   * @param callbacks Function to call when event is triggered\n   * @public\n   */\n  subscribe(\n    eventTypes: string | string[],\n    callbacks: (event: any) => void | ((event: any) => void)[] //eslint-disable-line @typescript-eslint/no-explicit-any\n  ): { unsubscribe: () => void } | { unsubscribe: () => void }[] {\n    if (typeof eventTypes === 'string') {\n      eventTypes = [eventTypes];\n    }\n    let callBackArray: any[]; //eslint-disable-line @typescript-eslint/no-explicit-any\n    if (!Array.isArray(callbacks)) {\n      callBackArray = [callbacks];\n    } else {\n      callBackArray = callbacks;\n    }\n\n    if (eventTypes.length !== callBackArray.length) {\n      Namespace.errorMessages.subscribeMismatch();\n    }\n\n    const returnArray = [];\n\n    for (let i = 0; i < eventTypes.length; i++) {\n      const eventType = eventTypes[i];\n      if (!Array.isArray(this._subscribers[eventType])) {\n        this._subscribers[eventType] = [];\n      }\n\n      this._subscribers[eventType].push(callBackArray[i]);\n\n      returnArray.push({\n        unsubscribe: this._unsubscribe.bind(\n          this,\n          eventType,\n          this._subscribers[eventType].length - 1\n        ),\n      });\n\n      if (eventTypes.length === 1) {\n        return returnArray[0];\n      }\n    }\n\n    return returnArray;\n  }\n\n  // noinspection JSUnusedGlobalSymbols\n  /**\n   * Hides the picker and removes event listeners\n   */\n  dispose() {\n    this.display.hide();\n    // this will clear the document click event listener\n    this.display._dispose();\n    this._eventEmitters.destroy();\n    this.optionsStore.input?.removeEventListener(\n      'change',\n      this._inputChangeEvent\n    );\n    if (this.optionsStore.options.allowInputToggle) {\n      this.optionsStore.input?.removeEventListener(\n        'click',\n        this._openClickEvent\n      );\n      this.optionsStore.input?.removeEventListener(\n        'focus',\n        this._openClickEvent\n      );\n    }\n    this.optionsStore.toggle?.removeEventListener(\n      'click',\n      this._toggleClickEvent\n    );\n    this.optionsStore.toggle?.removeEventListener(\n      'keydown',\n      this._handleToggleKeydown\n    );\n    this._subscribers = {};\n  }\n\n  /**\n   * Updates the options to use the provided language.\n   * THe language file must be loaded first.\n   * @param language\n   */\n  locale(language: string) {\n    const asked = loadedLocales[language];\n    if (!asked) return;\n    this.updateOptions({\n      localization: asked,\n    });\n  }\n\n  /**\n   * Triggers an event like ChangeEvent when the picker has updated the value\n   * of a selected date.\n   * @param event Accepts a BaseEvent object.\n   * @private\n   */\n  private _triggerEvent(event: BaseEvent) {\n    event.viewMode = this.optionsStore.currentView;\n\n    const isChangeEvent = event.type === Namespace.events.change;\n    if (isChangeEvent) {\n      const { date, oldDate, isClear } = event as ChangeEvent;\n      if (\n        (date && oldDate && date.isSame(oldDate)) ||\n        (!isClear && !date && !oldDate)\n      ) {\n        return;\n      }\n      this._handleAfterChangeEvent(event as ChangeEvent);\n\n      this.optionsStore.input?.dispatchEvent(\n        //eslint-disable-next-line @typescript-eslint/no-explicit-any\n        new CustomEvent('change', { detail: event as any })\n      );\n\n      if (this.optionsStore.toggle) {\n        let label = this.optionsStore.options.localization.toggleAriaLabel;\n        if (this.dates.picked.length > 0) {\n          const picked = this.dates.picked.map((x) => x.format()).join(', ');\n          label = `${label}, ${picked}`;\n        }\n\n        this.optionsStore.toggle.ariaLabel = label;\n      }\n    }\n\n    this.optionsStore.element.dispatchEvent(\n      //eslint-disable-next-line @typescript-eslint/no-explicit-any\n      new CustomEvent(event.type, { detail: event as any })\n    );\n\n    //eslint-disable-next-line @typescript-eslint/no-explicit-any\n    if ((window as any).jQuery) {\n      //eslint-disable-next-line @typescript-eslint/no-explicit-any\n      const $ = (window as any).jQuery;\n\n      if (isChangeEvent && this.optionsStore.input) {\n        $(this.optionsStore.input).trigger(event);\n      } else {\n        $(this.optionsStore.element).trigger(event);\n      }\n    }\n\n    this._publish(event);\n  }\n\n  private _publish(event: BaseEvent) {\n    // return if event is not subscribed\n    if (!Array.isArray(this._subscribers[event.type])) {\n      return;\n    }\n\n    // Trigger callback for each subscriber\n    this._subscribers[event.type].forEach((callback) => {\n      callback(event);\n    });\n  }\n\n  /**\n   * Fires a ViewUpdate event when, for example, the month view is changed.\n   * @private\n   */\n  private _viewUpdate() {\n    this._triggerEvent({\n      type: Namespace.events.update,\n      viewDate: this.optionsStore.viewDate.clone,\n    } as ViewUpdateEvent);\n  }\n\n  private _unsubscribe(eventName, index) {\n    this._subscribers[eventName].splice(index, 1);\n  }\n\n  /**\n   * Merges two Option objects together and validates options type\n   * @param config new Options\n   * @param mergeTo Options to merge into\n   * @param includeDataset When true, the elements data-td attributes will be included in the\n   * @private\n   */\n  private _initializeOptions(\n    config: Options,\n    mergeTo: Options,\n    includeDataset = false\n  ): void {\n    let newConfig = OptionConverter.deepCopy(config);\n    newConfig = OptionConverter._mergeOptions(newConfig, mergeTo);\n    if (includeDataset)\n      newConfig = OptionConverter._dataToOptions(\n        this.optionsStore.element,\n        newConfig\n      );\n\n    OptionConverter._validateConflicts(newConfig);\n\n    newConfig.viewDate = newConfig.viewDate.setLocalization(\n      newConfig.localization\n    );\n\n    if (!this.optionsStore.viewDate.isSame(newConfig.viewDate)) {\n      this.optionsStore.viewDate = newConfig.viewDate;\n    }\n\n    /**\n     * Sets the minimum view allowed by the picker. For example the case of only\n     * allowing year and month to be selected but not date.\n     */\n    if (newConfig.display.components.year) {\n      this.optionsStore.minimumCalendarViewMode = 2;\n    }\n    if (newConfig.display.components.month) {\n      this.optionsStore.minimumCalendarViewMode = 1;\n    }\n    if (newConfig.display.components.date) {\n      this.optionsStore.minimumCalendarViewMode = 0;\n    }\n\n    this.optionsStore.currentCalendarViewMode = Math.max(\n      this.optionsStore.minimumCalendarViewMode,\n      this.optionsStore.currentCalendarViewMode\n    );\n\n    // Update view mode if needed\n    if (\n      CalendarModes[this.optionsStore.currentCalendarViewMode].name !==\n      newConfig.display.viewMode\n    ) {\n      this.optionsStore.currentCalendarViewMode = Math.max(\n        CalendarModes.findIndex((x) => x.name === newConfig.display.viewMode),\n        this.optionsStore.minimumCalendarViewMode\n      );\n    }\n\n    if (this.display?.isVisible) {\n      this.display._update('all');\n    }\n\n    if (\n      newConfig.display.components.useTwentyfourHour &&\n      newConfig.localization.hourCycle === undefined\n    )\n      newConfig.localization.hourCycle = 'h24';\n    else if (newConfig.localization.hourCycle === undefined) {\n      newConfig.localization.hourCycle = guessHourCycle(\n        newConfig.localization.locale\n      );\n    }\n\n    this.optionsStore.options = newConfig;\n\n    if (\n      newConfig.restrictions.maxDate &&\n      this.viewDate.isAfter(newConfig.restrictions.maxDate)\n    )\n      this.viewDate = newConfig.restrictions.maxDate.clone;\n\n    if (\n      newConfig.restrictions.minDate &&\n      this.viewDate.isBefore(newConfig.restrictions.minDate)\n    )\n      this.viewDate = newConfig.restrictions.minDate.clone;\n  }\n\n  /**\n   * Checks if an input field is being used, attempts to locate one and sets an\n   * event listener if found.\n   * @private\n   */\n  private _initializeInput() {\n    if (this.optionsStore.element.tagName == 'INPUT') {\n      this.optionsStore.input = this.optionsStore.element as HTMLInputElement;\n    } else {\n      const query = this.optionsStore.element.dataset.tdTargetInput;\n      if (query == undefined || query == 'nearest') {\n        this.optionsStore.input =\n          this.optionsStore.element.querySelector('input');\n      } else {\n        this.optionsStore.input =\n          this.optionsStore.element.querySelector(query);\n      }\n    }\n\n    if (!this.optionsStore.input) return;\n\n    if (!this.optionsStore.input.value && this.optionsStore.options.defaultDate)\n      this.optionsStore.input.value = this.dates.formatInput(\n        this.optionsStore.options.defaultDate\n      );\n\n    this.optionsStore.input.addEventListener('change', this._inputChangeEvent);\n    if (this.optionsStore.options.allowInputToggle) {\n      this.optionsStore.input.addEventListener('click', this._openClickEvent);\n      this.optionsStore.input.addEventListener('focus', this._openClickEvent);\n    }\n\n    if (this.optionsStore.input.value) {\n      this._inputChangeEvent();\n    }\n  }\n\n  /**\n   * Attempts to locate a toggle for the picker and sets an event listener\n   * @private\n   */\n  private _initializeToggle() {\n    if (this.optionsStore.options.display.inline) return;\n    let query = this.optionsStore.element.dataset.tdTargetToggle;\n    if (query == 'nearest') {\n      query = '[data-td-toggle=\"datetimepicker\"]';\n    }\n    this.optionsStore.toggle =\n      query == undefined\n        ? this.optionsStore.element\n        : this.optionsStore.element.querySelector(query);\n\n    if (this.optionsStore.toggle == undefined) return;\n\n    this.optionsStore.toggle.addEventListener('click', this._toggleClickEvent);\n\n    if (this.optionsStore.toggle !== this.optionsStore.element) {\n      this.optionsStore.toggle.addEventListener(\n        'keydown',\n        this._handleToggleKeydown.bind(this)\n      );\n    }\n  }\n\n  /**\n   * If the option is enabled this will render the clock view after a date pick.\n   * @param e change event\n   * @private\n   */\n  private _handleAfterChangeEvent(e: ChangeEvent) {\n    if (\n      // options is disabled\n      !this.optionsStore.options.promptTimeOnDateChange ||\n      this.optionsStore.options.multipleDates ||\n      this.optionsStore.options.display.inline ||\n      this.optionsStore.options.display.sideBySide ||\n      // time is disabled\n      !this.display._hasTime ||\n      // clock component is already showing\n      this.display.widget\n        ?.getElementsByClassName(Namespace.css.show)[0]\n        .classList.contains(Namespace.css.timeContainer)\n    )\n      return;\n\n    // First time ever. If useCurrent option is set to true (default), do nothing\n    // because the first date is selected automatically.\n    // or date didn't change (time did) or date changed because time did.\n    if (\n      (!e.oldDate && this.optionsStore.options.useCurrent) ||\n      (e.oldDate && e.date?.isSame(e.oldDate))\n    ) {\n      return;\n    }\n\n    clearTimeout(this._currentPromptTimeTimeout);\n    this._currentPromptTimeTimeout = setTimeout(() => {\n      if (this.display.widget) {\n        this._eventEmitters.action.emit({\n          e: {\n            currentTarget: this.display.widget.querySelector(\n              '[data-action=\"togglePicker\"]'\n            ),\n          },\n          action: ActionTypes.togglePicker,\n        });\n      }\n    }, this.optionsStore.options.promptTimeOnDateChangeTransitionDelay);\n  }\n\n  /**\n   * Event for when the input field changes. This is a class level method so there's\n   * something for the remove listener function.\n   * @private\n   */\n  //eslint-disable-next-line @typescript-eslint/no-explicit-any\n  private _inputChangeEvent = (event?: any) => {\n    const internallyTriggered = event?.detail;\n    if (internallyTriggered) return;\n\n    const setViewDate = () => {\n      if (this.dates.lastPicked)\n        this.optionsStore.viewDate = this.dates.lastPicked.clone;\n    };\n\n    const value = this.optionsStore.input.value;\n    if (\n      this.optionsStore.options.multipleDates ||\n      this.optionsStore.options.dateRange\n    ) {\n      try {\n        const valueSplit = value.split(\n          this.optionsStore.options.multipleDatesSeparator\n        );\n        for (let i = 0; i < valueSplit.length; i++) {\n          this.dates.setFromInput(valueSplit[i], i);\n        }\n        setViewDate();\n      } catch {\n        console.warn(\n          'TD: Something went wrong trying to set the multipleDates values from the input field.'\n        );\n      }\n    } else {\n      this.dates.setFromInput(value, 0);\n      setViewDate();\n    }\n  };\n\n  /**\n   * Event for when the toggle is clicked. This is a class level method so there's\n   * something for the remove listener function.\n   * @private\n   */\n  private _toggleClickEvent = () => {\n    if (\n      (this.optionsStore.element as HTMLInputElement)?.disabled ||\n      this.optionsStore.input?.disabled ||\n      //if we just have the input and allow input toggle is enabled, then don't cause a toggle\n      (this.optionsStore.toggle.nodeName === 'INPUT' &&\n        (this.optionsStore.toggle as HTMLInputElement)?.type === 'text' &&\n        this.optionsStore.options.allowInputToggle)\n    )\n      return;\n    this.toggle();\n  };\n\n  private _handleToggleKeydown(event: KeyboardEvent) {\n    if (event.key !== ' ' && event.key !== 'Enter') return;\n\n    this.optionsStore.toggle.click();\n\n    event.stopPropagation();\n    event.preventDefault();\n  }\n\n  /**\n   * Event for when the toggle is clicked. This is a class level method so there's\n   * something for the remove listener function.\n   * @private\n   */\n  private _openClickEvent = () => {\n    if (\n      (this.optionsStore.element as HTMLInputElement)?.disabled ||\n      this.optionsStore.input?.disabled\n    )\n      return;\n    if (!this.display.isVisible) this.show();\n  };\n}\n\n/**\n * Whenever a locale is loaded via a plugin then store it here based on the\n * locale name. E.g. loadedLocales['ru']\n */\nconst loadedLocales = {};\n\n// noinspection JSUnusedGlobalSymbols\n/**\n * Called from a locale plugin.\n * @param l locale object for localization options\n */\nconst loadLocale = (l) => {\n  if (loadedLocales[l.name]) return;\n  loadedLocales[l.name] = l.localization;\n};\n\n/**\n * A sets the global localization options to the provided locale name.\n * `loadLocale` MUST be called first.\n * @param l\n */\nconst locale = (l: string) => {\n  const asked = loadedLocales[l];\n  if (!asked) return;\n  DefaultOptions.localization = asked;\n};\n\n// noinspection JSUnusedGlobalSymbols\n/**\n * Called from a plugin to extend or override picker defaults.\n * @param plugin\n * @param option\n */\nconst extend = function (plugin, option = undefined) {\n  if (!plugin) return tempusDominus;\n  if (!plugin.installed) {\n    // install plugin only once\n    plugin(\n      option,\n      { TempusDominus, Dates, Display, DateTime, Namespace },\n      tempusDominus\n    );\n    plugin.installed = true;\n  }\n  return tempusDominus;\n};\n\nconst version = '6.10.3';\n\nconst tempusDominus = {\n  TempusDominus,\n  extend,\n  loadLocale,\n  locale,\n  Namespace,\n  DefaultOptions,\n  DateTime,\n  Unit,\n  version,\n  DefaultEnLocalization,\n};\n\nexport {\n  TempusDominus,\n  extend,\n  loadLocale,\n  locale,\n  Namespace,\n  DefaultOptions,\n  DateTime,\n  Unit,\n  version,\n  DateTimeFormatOptions,\n  Options,\n  DefaultEnLocalization,\n};\n"
  },
  {
    "path": "src/js/utilities/action-types.ts",
    "content": "enum ActionTypes {\n  next = 'next',\n  previous = 'previous',\n  changeCalendarView = 'changeCalendarView',\n  selectMonth = 'selectMonth',\n  selectYear = 'selectYear',\n  selectDecade = 'selectDecade',\n  selectDay = 'selectDay',\n  selectHour = 'selectHour',\n  selectMinute = 'selectMinute',\n  selectSecond = 'selectSecond',\n  incrementHours = 'incrementHours',\n  incrementMinutes = 'incrementMinutes',\n  incrementSeconds = 'incrementSeconds',\n  decrementHours = 'decrementHours',\n  decrementMinutes = 'decrementMinutes',\n  decrementSeconds = 'decrementSeconds',\n  toggleMeridiem = 'toggleMeridiem',\n  togglePicker = 'togglePicker',\n  showClock = 'showClock',\n  showHours = 'showHours',\n  showMinutes = 'showMinutes',\n  showSeconds = 'showSeconds',\n  clear = 'clear',\n  close = 'close',\n  today = 'today',\n}\n\nexport default ActionTypes;\n"
  },
  {
    "path": "src/js/utilities/calendar-modes.ts",
    "content": "import { Unit } from '../datetime';\nimport Namespace from './namespace';\nimport ViewMode from './view-mode';\n\nconst CalendarModes: {\n  name: keyof ViewMode;\n  className: string;\n  unit: Unit;\n  step: number;\n}[] = [\n  {\n    name: 'calendar',\n    className: Namespace.css.daysContainer,\n    unit: Unit.month,\n    step: 1,\n  },\n  {\n    name: 'months',\n    className: Namespace.css.monthsContainer,\n    unit: Unit.year,\n    step: 1,\n  },\n  {\n    name: 'years',\n    className: Namespace.css.yearsContainer,\n    unit: Unit.year,\n    step: 10,\n  },\n  {\n    name: 'decades',\n    className: Namespace.css.decadesContainer,\n    unit: Unit.year,\n    step: 100,\n  },\n];\n\nexport default CalendarModes;\n"
  },
  {
    "path": "src/js/utilities/default-format-localization.ts",
    "content": "import { FormatLocalization } from './options';\n\nconst DefaultFormatLocalization: FormatLocalization = {\n  dateFormats: {\n    LTS: 'h:mm:ss T',\n    LT: 'h:mm T',\n    L: 'MM/dd/yyyy',\n    LL: 'MMMM d, yyyy',\n    LLL: 'MMMM d, yyyy h:mm T',\n    LLLL: 'dddd, MMMM d, yyyy h:mm T',\n  },\n  format: 'L LT',\n  locale: 'default',\n  hourCycle: undefined,\n  ordinal: (n) => {\n    const s = ['th', 'st', 'nd', 'rd'];\n    const v = n % 100;\n    return `[${n}${s[(v - 20) % 10] || s[v] || s[0]}]`;\n  },\n};\n\nexport default { ...DefaultFormatLocalization };\n"
  },
  {
    "path": "src/js/utilities/default-options.ts",
    "content": "import Options, { Localization } from './options';\nimport { DateTime } from '../datetime';\nimport DefaultFormatLocalization from './default-format-localization';\n\nconst defaultEnLocalization: Localization = {\n  clear: 'Clear selection',\n  close: 'Close the picker',\n  dateFormats: DefaultFormatLocalization.dateFormats,\n  dayViewHeaderFormat: { month: 'long', year: '2-digit' },\n  decrementHour: 'Decrement Hour',\n  decrementMinute: 'Decrement Minute',\n  decrementSecond: 'Decrement Second',\n  format: DefaultFormatLocalization.format,\n  hourCycle: DefaultFormatLocalization.hourCycle,\n  incrementHour: 'Increment Hour',\n  incrementMinute: 'Increment Minute',\n  incrementSecond: 'Increment Second',\n  locale: DefaultFormatLocalization.locale,\n  maxWeekdayLength: 0,\n  nextCentury: 'Next Century',\n  nextDecade: 'Next Decade',\n  nextMonth: 'Next Month',\n  nextYear: 'Next Year',\n  ordinal: DefaultFormatLocalization.ordinal,\n  pickHour: 'Pick Hour',\n  pickMinute: 'Pick Minute',\n  pickSecond: 'Pick Second',\n  previousCentury: 'Previous Century',\n  previousDecade: 'Previous Decade',\n  previousMonth: 'Previous Month',\n  previousYear: 'Previous Year',\n  selectDate: 'Select Date',\n  selectDecade: 'Select Decade',\n  selectMonth: 'Select Month',\n  selectTime: 'Select Time',\n  selectYear: 'Select Year',\n  startOfTheWeek: 0,\n  today: 'Go to today',\n  toggleMeridiem: 'Toggle Meridiem',\n  toggleAriaLabel: 'Change date',\n};\n\nconst DefaultOptions: Options = {\n  allowInputToggle: false,\n  container: undefined,\n  dateRange: false,\n  debug: false,\n  defaultDate: undefined,\n  display: {\n    icons: {\n      type: 'icons',\n      time: 'fa-solid fa-clock',\n      date: 'fa-solid fa-calendar',\n      up: 'fa-solid fa-arrow-up',\n      down: 'fa-solid fa-arrow-down',\n      previous: 'fa-solid fa-chevron-left',\n      next: 'fa-solid fa-chevron-right',\n      today: 'fa-solid fa-calendar-check',\n      clear: 'fa-solid fa-trash',\n      close: 'fa-solid fa-xmark',\n    },\n    sideBySide: false,\n    calendarWeeks: false,\n    viewMode: 'calendar',\n    toolbarPlacement: 'bottom',\n    keepOpen: false,\n    buttons: {\n      today: false,\n      clear: false,\n      close: false,\n    },\n    components: {\n      calendar: true,\n      date: true,\n      month: true,\n      year: true,\n      decades: true,\n      clock: true,\n      hours: true,\n      minutes: true,\n      seconds: false,\n      useTwentyfourHour: undefined,\n    },\n    inline: false,\n    theme: 'auto',\n    placement: 'bottom',\n    keyboardNavigation: true,\n  },\n  keepInvalid: false,\n  localization: defaultEnLocalization,\n  meta: {},\n  multipleDates: false,\n  multipleDatesSeparator: '; ',\n  promptTimeOnDateChange: false,\n  promptTimeOnDateChangeTransitionDelay: 200,\n  restrictions: {\n    minDate: undefined,\n    maxDate: undefined,\n    disabledDates: [],\n    enabledDates: [],\n    daysOfWeekDisabled: [],\n    disabledTimeIntervals: [],\n    disabledHours: [],\n    enabledHours: [],\n  },\n  stepping: 1,\n  useCurrent: true,\n  viewDate: new DateTime(),\n};\n\nexport default DefaultOptions;\nexport const DefaultEnLocalization = { ...defaultEnLocalization };\n"
  },
  {
    "path": "src/js/utilities/errors.ts",
    "content": "export class TdError extends Error {\n  code: number;\n}\n\nexport class ErrorMessages {\n  private base = 'TD:';\n\n  //#region out to console\n\n  /**\n   * Throws an error indicating that a key in the options object is invalid.\n   * @param optionName\n   */\n  unexpectedOption(optionName: string) {\n    const error = new TdError(\n      `${this.base} Unexpected option: ${optionName} does not match a known option.`\n    );\n    error.code = 1;\n    throw error;\n  }\n\n  /**\n   * Throws an error indicating that one more keys in the options object is invalid.\n   * @param optionName\n   */\n  unexpectedOptions(optionName: string[]) {\n    const error = new TdError(`${this.base}: ${optionName.join(', ')}`);\n    error.code = 1;\n    throw error;\n  }\n\n  /**\n   * Throws an error when an option is provide an unsupported value.\n   * For example a value of 'cheese' for toolbarPlacement which only supports\n   * 'top', 'bottom', 'default'.\n   * @param optionName\n   * @param badValue\n   * @param validOptions\n   */\n  unexpectedOptionValue(\n    optionName: string,\n    badValue: string,\n    validOptions: string[]\n  ) {\n    const error = new TdError(\n      `${\n        this.base\n      } Unexpected option value: ${optionName} does not accept a value of \"${badValue}\". Valid values are: ${validOptions.join(\n        ', '\n      )}`\n    );\n    error.code = 2;\n    throw error;\n  }\n\n  /**\n   * Throws an error when an option value is the wrong type.\n   * For example a string value was provided to multipleDates which only\n   * supports true or false.\n   * @param optionName\n   * @param badType\n   * @param expectedType\n   */\n  typeMismatch(optionName: string, badType: string, expectedType: string) {\n    const error = new TdError(\n      `${this.base} Mismatch types: ${optionName} has a type of ${badType} instead of the required ${expectedType}`\n    );\n    error.code = 3;\n    throw error;\n  }\n\n  /**\n   * Throws an error when an option value is  outside of the expected range.\n   * For example restrictions.daysOfWeekDisabled excepts a value between 0 and 6.\n   * @param optionName\n   * @param lower\n   * @param upper\n   */\n  numbersOutOfRange(optionName: string, lower: number, upper: number) {\n    const error = new TdError(\n      `${this.base} ${optionName} expected an array of number between ${lower} and ${upper}.`\n    );\n    error.code = 4;\n    throw error;\n  }\n\n  /**\n   * Throws an error when a value for a date options couldn't be parsed. Either\n   * the option was an invalid string or an invalid Date object.\n   * @param optionName\n   * @param date\n   * @param soft If true, logs a warning instead of an error.\n   */\n  //eslint-disable-next-line @typescript-eslint/no-explicit-any\n  failedToParseDate(optionName: string, date: any, soft = false) {\n    const error = new TdError(\n      `${this.base} Could not correctly parse \"${date}\" to a date for ${optionName}.`\n    );\n    error.code = 5;\n    if (!soft) throw error;\n    console.warn(error);\n  }\n\n  /**\n   * Throws when an element to attach to was not provided in the constructor.\n   */\n  mustProvideElement() {\n    const error = new TdError(`${this.base} No element was provided.`);\n    error.code = 6;\n    throw error;\n  }\n\n  /**\n   * Throws if providing an array for the events to subscribe method doesn't have\n   * the same number of callbacks. E.g., subscribe([1,2], [1])\n   */\n  subscribeMismatch() {\n    const error = new TdError(\n      `${this.base} The subscribed events does not match the number of callbacks`\n    );\n    error.code = 7;\n    throw error;\n  }\n\n  /**\n   * Throws if the configuration has conflicting rules e.g. minDate is after maxDate\n   */\n  conflictingConfiguration(message?: string) {\n    const error = new TdError(\n      `${this.base} A configuration value conflicts with another rule. ${message}`\n    );\n    error.code = 8;\n    throw error;\n  }\n\n  /**\n   * customDateFormat errors\n   */\n  customDateFormatError(message?: string) {\n    const error = new TdError(`${this.base} Custom Date Format: ${message}`);\n    error.code = 9;\n    throw error;\n  }\n\n  /**\n   * Logs a warning if a date option value is provided as a string, instead of\n   * a date/datetime object.\n   */\n  dateString() {\n    console.warn(\n      `${this.base} Using a string for date options is not recommended unless you specify an ISO string or use the customDateFormat plugin.`\n    );\n  }\n\n  deprecatedWarning(message: string, remediation?: string) {\n    console.warn(\n      `${this.base} Warning ${message} is deprecated and will be removed in a future version. ${remediation}`\n    );\n  }\n\n  throwError(message) {\n    const error = new TdError(`${this.base} ${message}`);\n    error.code = 9;\n    throw error;\n  }\n\n  //#endregion\n\n  //#region used with notify.error\n\n  /**\n   * Used with an Error Event type if the user selects a date that\n   * fails restriction validation.\n   */\n  failedToSetInvalidDate = 'Failed to set invalid date';\n\n  /**\n   * Used with an Error Event type when a user changes the value of the\n   * input field directly, and does not provide a valid date.\n   */\n  failedToParseInput = 'Failed parse input field';\n\n  //#endregion\n}\n"
  },
  {
    "path": "src/js/utilities/event-emitter.ts",
    "content": "import { DateTime, Unit } from '../datetime';\nimport ActionTypes from './action-types';\nimport { BaseEvent } from './event-types';\n\nexport type ViewUpdateValues = Unit | 'decade' | 'clock' | 'calendar' | 'all';\n\nclass EventEmitter<T> {\n  private subscribers: ((value?: T) => void)[] = [];\n\n  subscribe(callback: (value: T) => void) {\n    this.subscribers.push(callback);\n    return this.unsubscribe.bind(this, this.subscribers.length - 1);\n  }\n\n  unsubscribe(index: number) {\n    this.subscribers.splice(index, 1);\n  }\n\n  emit(value?: T) {\n    this.subscribers.forEach((callback) => {\n      callback(value);\n    });\n  }\n\n  destroy() {\n    this.subscribers = null;\n    this.subscribers = [];\n  }\n}\n\nexport class EventEmitters {\n  triggerEvent = new EventEmitter<BaseEvent>();\n  viewUpdate = new EventEmitter();\n  updateDisplay = new EventEmitter<ViewUpdateValues>();\n  action = new EventEmitter<{ e: any; action?: ActionTypes }>(); //eslint-disable-line @typescript-eslint/no-explicit-any\n  updateViewDate = new EventEmitter<DateTime>();\n\n  destroy() {\n    this.triggerEvent.destroy();\n    this.viewUpdate.destroy();\n    this.updateDisplay.destroy();\n    this.action.destroy();\n    this.updateViewDate.destroy();\n  }\n}\n"
  },
  {
    "path": "src/js/utilities/event-types.ts",
    "content": "import { DateTime } from '../datetime';\nimport ViewMode from './view-mode';\n\ninterface BaseEvent {\n  type: string;\n  viewMode?: keyof ViewMode;\n}\n\ninterface ParseErrorEvent extends BaseEvent {\n  reason: string;\n  value: unknown;\n  format: string;\n}\n\n/**\n * Triggers when setValue fails because of validation rules etc.\n * @event FailEvent\n */\ninterface FailEvent extends BaseEvent {\n  reason: string;\n  date: DateTime;\n  oldDate: DateTime;\n}\n\n/**\n * Triggers when the picker is hidden.\n */\ninterface HideEvent extends BaseEvent {\n  date: DateTime;\n}\n\n/**\n * Triggers when a change is successful.\n */\ninterface ChangeEvent extends BaseEvent {\n  date: DateTime | undefined;\n  oldDate: DateTime;\n  isClear: boolean;\n  isValid: boolean;\n}\n\n/**\n * Triggers when the view is changed for instance from month to year.\n */\ninterface ViewUpdateEvent extends BaseEvent {\n  viewDate: DateTime;\n}\n\nexport {\n  BaseEvent,\n  FailEvent,\n  HideEvent,\n  ChangeEvent,\n  ViewUpdateEvent,\n  ParseErrorEvent,\n};\n"
  },
  {
    "path": "src/js/utilities/namespace.ts",
    "content": "import { ErrorMessages } from './errors';\n// this is not the way I want this to stay but nested classes seemed to blown up once its compiled.\nconst NAME = 'tempus-dominus',\n  dataKey = 'td';\n\n/**\n * Events\n */\nclass Events {\n  key = `.${dataKey}`;\n\n  /**\n   * Change event. Fired when the user selects a date.\n   * See also EventTypes.ChangeEvent\n   */\n  change = `change${this.key}`;\n\n  /**\n   * Emit when the view changes for example from month view to the year view.\n   * See also EventTypes.ViewUpdateEvent\n   */\n  update = `update${this.key}`;\n\n  /**\n   * Emits when a selected date or value from the input field fails to meet the provided validation rules.\n   * See also EventTypes.FailEvent\n   */\n  error = `error${this.key}`;\n\n  /**\n   * Show event\n   * @event Events#show\n   */\n  show = `show${this.key}`;\n\n  /**\n   * Hide event\n   * @event Events#hide\n   */\n  hide = `hide${this.key}`;\n\n  // blur and focus are used in the jQuery provider but are otherwise unused.\n  // keyup/down will be used later for keybinding options\n\n  blur = `blur${this.key}`;\n  focus = `focus${this.key}`;\n  keyup = `keyup${this.key}`;\n  keydown = `keydown${this.key}`;\n}\n\nclass Css {\n  /**\n   * The outer element for the widget.\n   */\n  widget = `${NAME}-widget`;\n\n  /**\n   * Hold the previous, next and switcher divs\n   */\n  calendarHeader = 'calendar-header';\n\n  /**\n   * The element for the action to change the calendar view. E.g. month -> year.\n   */\n  switch = 'picker-switch';\n\n  /**\n   * The elements for all the toolbar options\n   */\n  toolbar = 'toolbar';\n\n  /**\n   * Disables the hover and rounding affect.\n   */\n  noHighlight = 'no-highlight';\n\n  /**\n   * Applied to the widget element when the side by side option is in use.\n   */\n  sideBySide = 'timepicker-sbs';\n\n  /**\n   * The element for the action to change the calendar view, e.g. August -> July\n   */\n  previous = 'previous';\n\n  /**\n   * The element for the action to change the calendar view, e.g. August -> September\n   */\n  next = 'next';\n\n  /**\n   * Applied to any action that would violate any restriction options. ALso applied\n   * to an input field if the disabled function is called.\n   */\n  disabled = 'disabled';\n\n  /**\n   * Applied to any date that is less than requested view,\n   * e.g. the last day of the previous month.\n   */\n  old = 'old';\n\n  /**\n   * Applied to any date that is greater than of requested view,\n   * e.g. the last day of the previous month.\n   */\n  new = 'new';\n\n  /**\n   * Applied to any date that is currently selected.\n   */\n  active = 'active';\n\n  //#region date element\n\n  /**\n   * The outer element for the calendar view.\n   */\n  dateContainer = 'date-container';\n\n  /**\n   * The outer element for the decades view.\n   */\n  decadesContainer = `${this.dateContainer}-decades`;\n\n  /**\n   * Applied to elements within the decade container, e.g. 2020, 2030\n   */\n  decade = 'decade';\n\n  /**\n   * The outer element for the years view.\n   */\n  yearsContainer = `${this.dateContainer}-years`;\n\n  /**\n   * Applied to elements within the years container, e.g. 2021, 2021\n   */\n  year = 'year';\n\n  /**\n   * The outer element for the month view.\n   */\n  monthsContainer = `${this.dateContainer}-months`;\n\n  /**\n   * Applied to elements within the month container, e.g. January, February\n   */\n  month = 'month';\n\n  /**\n   * The outer element for the calendar view.\n   */\n  daysContainer = `${this.dateContainer}-days`;\n\n  /**\n   * Applied to elements within the day container, e.g. 1, 2..31\n   */\n  day = 'day';\n\n  /**\n   * If display.calendarWeeks is enabled, a column displaying the week of year\n   * is shown. This class is applied to each cell in that column.\n   */\n  calendarWeeks = 'cw';\n\n  /**\n   * Applied to the first row of the calendar view, e.g. Sunday, Monday\n   */\n  dayOfTheWeek = 'dow';\n\n  /**\n   * Applied to the current date on the calendar view.\n   */\n  today = 'today';\n\n  /**\n   * Applied to the locale's weekend dates on the calendar view, e.g. Sunday, Saturday\n   */\n  weekend = 'weekend';\n\n  rangeIn = 'range-in';\n  rangeStart = 'range-start';\n  rangeEnd = 'range-end';\n\n  //#endregion\n\n  //#region time element\n\n  /**\n   * The outer element for all time related elements.\n   */\n  timeContainer = 'time-container';\n\n  /**\n   * Applied the separator columns between time elements, e.g. hour *:* minute *:* second\n   */\n  separator = 'separator';\n\n  /**\n   * The outer element for the clock view.\n   */\n  clockContainer = `${this.timeContainer}-clock`;\n\n  /**\n   * The outer element for the hours selection view.\n   */\n  hourContainer = `${this.timeContainer}-hour`;\n\n  /**\n   * The outer element for the minutes selection view.\n   */\n  minuteContainer = `${this.timeContainer}-minute`;\n\n  /**\n   * The outer element for the seconds selection view.\n   */\n  secondContainer = `${this.timeContainer}-second`;\n\n  /**\n   * Applied to each element in the hours selection view.\n   */\n  hour = 'hour';\n\n  /**\n   * Applied to each element in the minutes selection view.\n   */\n  minute = 'minute';\n\n  /**\n   * Applied to each element in the seconds selection view.\n   */\n  second = 'second';\n\n  /**\n   * Applied AM/PM toggle button.\n   */\n  toggleMeridiem = 'toggleMeridiem';\n\n  //#endregion\n\n  //#region collapse\n\n  /**\n   * Applied the element of the current view mode, e.g. calendar or clock.\n   */\n  show = 'show';\n\n  /**\n   * Applied to the currently showing view mode during a transition\n   * between calendar and clock views\n   */\n  collapsing = 'td-collapsing';\n\n  /**\n   * Applied to the currently hidden view mode.\n   */\n  collapse = 'td-collapse';\n\n  //#endregion\n\n  /**\n   * Applied to the widget when the option display.inline is enabled.\n   */\n  inline = 'inline';\n\n  /**\n   * Applied to the widget when the option display.theme is light.\n   */\n  lightTheme = 'light';\n\n  /**\n   * Applied to the widget when the option display.theme is dark.\n   */\n  darkTheme = 'dark';\n\n  /**\n   * Used for detecting if the system color preference is dark mode\n   */\n  isDarkPreferredQuery = '(prefers-color-scheme: dark)';\n}\n\nexport default class Namespace {\n  static NAME = NAME;\n  // noinspection JSUnusedGlobalSymbols\n  static dataKey = dataKey;\n\n  static events = new Events();\n\n  static css = new Css();\n\n  static errorMessages = new ErrorMessages();\n}\n"
  },
  {
    "path": "src/js/utilities/optionConverter.ts",
    "content": "import Namespace from './namespace';\nimport { DateTime } from '../datetime';\nimport DefaultOptions from './default-options';\nimport Options, { FormatLocalization } from './options';\nimport { processKey } from './optionProcessor';\nimport {\n  convertToDateTime,\n  tryConvertToDateTime,\n  typeCheckDateArray,\n  typeCheckNumberArray,\n} from './typeChecker';\n\nexport class OptionConverter {\n  private static ignoreProperties = [\n    'meta',\n    'dayViewHeaderFormat',\n    'container',\n    'dateForms',\n    'ordinal',\n  ];\n\n  static deepCopy(input): Options {\n    const o = {};\n\n    Object.keys(input).forEach((key) => {\n      const inputElement = input[key];\n\n      if (inputElement instanceof DateTime) {\n        o[key] = inputElement.clone;\n        return;\n      } else if (inputElement instanceof Date) {\n        o[key] = new Date(inputElement.valueOf());\n        return;\n      }\n\n      o[key] = inputElement;\n      if (\n        typeof inputElement !== 'object' ||\n        inputElement instanceof HTMLElement ||\n        inputElement instanceof Element\n      )\n        return;\n      if (!Array.isArray(inputElement)) {\n        o[key] = OptionConverter.deepCopy(inputElement);\n      }\n    });\n\n    return o;\n  }\n\n  private static isValue = (a) => a != null; // everything except undefined + null\n\n  /**\n   * Finds value out of an object based on a string, period delimited, path\n   * @param paths\n   * @param obj\n   */\n  static objectPath(paths: string, obj) {\n    if (paths.charAt(0) === '.') paths = paths.slice(1);\n    if (!paths) return obj;\n    return paths\n      .split('.')\n      .reduce(\n        (value, key) =>\n          OptionConverter.isValue(value) || OptionConverter.isValue(value[key])\n            ? value[key]\n            : undefined,\n        obj\n      );\n  }\n\n  /**\n   * The spread operator caused sub keys to be missing after merging.\n   * This is to fix that issue by using spread on the child objects first.\n   * Also handles complex options like disabledDates\n   * @param provided An option from new providedOptions\n   * @param copyTo Destination object. This was added to prevent reference copies\n   * @param localization\n   * @param path\n   */\n  static spread(provided, copyTo, localization: FormatLocalization, path = '') {\n    const defaultOptions = OptionConverter.objectPath(path, DefaultOptions);\n\n    const unsupportedOptions = Object.keys(provided).filter(\n      (x) => !Object.keys(defaultOptions).includes(x)\n    );\n\n    if (unsupportedOptions.length > 0) {\n      const flattenedOptions = OptionConverter.getFlattenDefaultOptions();\n\n      const errors = unsupportedOptions.map((x) => {\n        const d = path ? '.' : '';\n        let error = `\"${path}${d}${x}\" is not a known option.`;\n        const didYouMean = flattenedOptions.find((y) => y.includes(x));\n        if (didYouMean) error += ` Did you mean \"${didYouMean}\"?`;\n        return error;\n      });\n      Namespace.errorMessages.unexpectedOptions(errors);\n    }\n\n    Object.keys(provided)\n      .filter((key) => key !== '__proto__' && key !== 'constructor')\n      .forEach((key) => {\n        path += `.${key}`;\n        if (path.charAt(0) === '.') path = path.slice(1);\n\n        const defaultOptionValue = defaultOptions[key];\n        const providedType = typeof provided[key];\n        const defaultType = typeof defaultOptionValue;\n        const value = provided[key];\n\n        if (value === undefined || value === null) {\n          copyTo[key] = value;\n          path = path.substring(0, path.lastIndexOf(`.${key}`));\n          return;\n        }\n\n        if (\n          typeof defaultOptionValue === 'object' &&\n          !Array.isArray(provided[key]) &&\n          !(\n            defaultOptionValue instanceof Date ||\n            OptionConverter.ignoreProperties.includes(key)\n          )\n        ) {\n          OptionConverter.spread(\n            provided[key],\n            copyTo[key],\n            localization,\n            path\n          );\n        } else {\n          copyTo[key] = OptionConverter.processKey(\n            key,\n            value,\n            providedType,\n            defaultType,\n            path,\n            localization\n          );\n        }\n\n        path = path.substring(0, path.lastIndexOf(`.${key}`));\n      });\n  }\n\n  static processKey(\n    key: string,\n    value: any, //eslint-disable-line @typescript-eslint/no-explicit-any\n    providedType: string,\n    defaultType: string,\n    path: string,\n    localization: FormatLocalization\n  ) {\n    return processKey({\n      key,\n      value,\n      providedType,\n      defaultType,\n      path,\n      localization,\n    });\n  }\n\n  static _mergeOptions(providedOptions: Options, mergeTo: Options): Options {\n    const newConfig = OptionConverter.deepCopy(mergeTo);\n    //see if the options specify a locale\n    const localization =\n      mergeTo.localization?.locale !== 'default'\n        ? mergeTo.localization\n        : providedOptions?.localization || DefaultOptions.localization;\n\n    OptionConverter.spread(providedOptions, newConfig, localization, '');\n\n    return newConfig;\n  }\n\n  static _dataToOptions(element, options: Options): Options {\n    const eData = JSON.parse(JSON.stringify(element.dataset));\n\n    if (eData?.tdTargetInput) delete eData.tdTargetInput;\n    if (eData?.tdTargetToggle) delete eData.tdTargetToggle;\n\n    if (!eData || Object.keys(eData).length === 0) return options;\n    const dataOptions = {} as Options;\n\n    // because dataset returns camelCase including the 'td' key the option\n    // key won't align\n    const objectToNormalized = (object) => {\n      const lowered = {};\n      Object.keys(object).forEach((x) => {\n        lowered[x.toLowerCase()] = x;\n      });\n\n      return lowered;\n    };\n\n    const normalizeObject = this.normalizeObject(objectToNormalized);\n    const optionsLower = objectToNormalized(options);\n\n    Object.keys(eData)\n      .filter((x) => x.startsWith(Namespace.dataKey))\n      .map((x) => x.substring(2))\n      .forEach((key) => {\n        let keyOption = optionsLower[key.toLowerCase()];\n\n        // dataset merges dashes to camelCase... yay\n        // i.e. key = display_components_seconds\n        if (key.includes('_')) {\n          // [display, components, seconds]\n          const split = key.split('_');\n          // display\n          keyOption = optionsLower[split[0].toLowerCase()];\n          if (\n            keyOption !== undefined &&\n            options[keyOption].constructor === Object\n          ) {\n            dataOptions[keyOption] = normalizeObject(\n              split,\n              1,\n              options[keyOption],\n              eData[`td${key}`]\n            );\n          }\n        }\n        // or key = multipleDate\n        else if (keyOption !== undefined) {\n          dataOptions[keyOption] = eData[`td${key}`];\n        }\n      });\n\n    return this._mergeOptions(dataOptions, options);\n  }\n\n  //todo clean this up\n  private static normalizeObject(objectToNormalized: (object) => object) {\n    const normalizeObject = (\n      split: string[],\n      index: number,\n      optionSubgroup: unknown,\n      value: unknown\n    ) => {\n      // first round = display { ... }\n      const normalizedOptions = objectToNormalized(optionSubgroup);\n\n      const keyOption = normalizedOptions[split[index].toLowerCase()];\n      const internalObject = {};\n\n      if (keyOption === undefined) return internalObject;\n\n      // if this is another object, continue down the rabbit hole\n      if (optionSubgroup[keyOption]?.constructor === Object) {\n        index++;\n        internalObject[keyOption] = normalizeObject(\n          split,\n          index,\n          optionSubgroup[keyOption],\n          value\n        );\n      } else {\n        internalObject[keyOption] = value;\n      }\n      return internalObject;\n    };\n    return normalizeObject;\n  }\n\n  /**\n   * Attempts to prove `d` is a DateTime or Date or can be converted into one.\n   * @param d If a string will attempt creating a date from it.\n   * @param localization object containing locale and format settings. Only used with the custom formats\n   * @private\n   */\n  static _dateTypeCheck(\n    d: any, //eslint-disable-line @typescript-eslint/no-explicit-any\n    localization: FormatLocalization\n  ): DateTime | null {\n    return tryConvertToDateTime(d, localization);\n  }\n\n  /**\n   * Type checks that `value` is an array of Date or DateTime\n   * @param optionName Provides text to error messages e.g. disabledDates\n   * @param value Option value\n   * @param providedType Used to provide text to error messages\n   * @param localization\n   */\n  static _typeCheckDateArray(\n    optionName: string,\n    value,\n    providedType: string,\n    localization: FormatLocalization\n  ) {\n    return typeCheckDateArray(optionName, value, providedType, localization);\n  }\n\n  /**\n   * Type checks that `value` is an array of numbers\n   * @param optionName Provides text to error messages e.g. disabledDates\n   * @param value Option value\n   * @param providedType Used to provide text to error messages\n   */\n  static _typeCheckNumberArray(\n    optionName: string,\n    value,\n    providedType: string\n  ) {\n    return typeCheckNumberArray(optionName, value, providedType);\n  }\n\n  /**\n   * Attempts to convert `d` to a DateTime object\n   * @param d value to convert\n   * @param optionName Provides text to error messages e.g. disabledDates\n   * @param localization object containing locale and format settings. Only used with the custom formats\n   */\n  static dateConversion(\n    d: any, //eslint-disable-line @typescript-eslint/no-explicit-any\n    optionName: string,\n    localization: FormatLocalization\n  ): DateTime {\n    return convertToDateTime(d, optionName, localization);\n  }\n\n  private static _flattenDefaults: string[];\n\n  private static getFlattenDefaultOptions(): string[] {\n    if (this._flattenDefaults) return this._flattenDefaults;\n    const deepKeys = (t, pre = []) => {\n      if (Array.isArray(t)) return [];\n      if (Object(t) === t) {\n        return Object.entries(t).flatMap(([k, v]) => deepKeys(v, [...pre, k]));\n      } else {\n        return pre.join('.');\n      }\n    };\n\n    this._flattenDefaults = deepKeys(DefaultOptions);\n\n    return this._flattenDefaults;\n  }\n\n  /**\n   * Some options conflict like min/max date. Verify that these kinds of options\n   * are set correctly.\n   * @param config\n   */\n  static _validateConflicts(config: Options) {\n    if (\n      config.display.sideBySide &&\n      (!config.display.components.clock ||\n        !(\n          config.display.components.hours ||\n          config.display.components.minutes ||\n          config.display.components.seconds\n        ))\n    ) {\n      Namespace.errorMessages.conflictingConfiguration(\n        'Cannot use side by side mode without the clock components'\n      );\n    }\n\n    if (config.restrictions.minDate && config.restrictions.maxDate) {\n      if (config.restrictions.minDate.isAfter(config.restrictions.maxDate)) {\n        Namespace.errorMessages.conflictingConfiguration(\n          'minDate is after maxDate'\n        );\n      }\n\n      if (config.restrictions.maxDate.isBefore(config.restrictions.minDate)) {\n        Namespace.errorMessages.conflictingConfiguration(\n          'maxDate is before minDate'\n        );\n      }\n    }\n\n    if (config.multipleDates && config.dateRange) {\n      Namespace.errorMessages.conflictingConfiguration(\n        'Cannot uss option \"multipleDates\" with \"dateRange\"'\n      );\n    }\n  }\n}\n"
  },
  {
    "path": "src/js/utilities/optionProcessor.ts",
    "content": "import Namespace from './namespace';\nimport type { FormatLocalization } from './options';\nimport {\n  convertToDateTime,\n  typeCheckNumberArray,\n  typeCheckDateArray,\n} from './typeChecker';\n\ninterface OptionProcessorFunctionArguments {\n  key: string;\n  value: any; //eslint-disable-line @typescript-eslint/no-explicit-any\n  providedType: string;\n  defaultType: string;\n  path: string;\n  localization: FormatLocalization;\n}\n\ntype OptionProcessorFunction = (\n  this: void,\n  args: OptionProcessorFunctionArguments\n) => any; //eslint-disable-line @typescript-eslint/no-explicit-any\n\nfunction mandatoryDate(key: string): OptionProcessorFunction {\n  return ({ value, localization }) => {\n    const dateTime = convertToDateTime(value, key, localization);\n    if (dateTime !== undefined) {\n      dateTime.setLocalization(localization);\n      return dateTime;\n    }\n  };\n}\n\nfunction optionalDate(key: string): OptionProcessorFunction {\n  const mandatory = mandatoryDate(key);\n  return (args) => {\n    if (args.value === undefined) {\n      return args.value;\n    }\n    return mandatory(args);\n  };\n}\n\nfunction numbersInRange(\n  key: string,\n  lower: number,\n  upper: number\n): OptionProcessorFunction {\n  return ({ value, providedType }) => {\n    if (value === undefined) {\n      return [];\n    }\n    typeCheckNumberArray(key, value, providedType);\n    if ((value as number[]).some((x) => x < lower || x > upper))\n      Namespace.errorMessages.numbersOutOfRange(key, lower, upper);\n    return value;\n  };\n}\n\nfunction validHourRange(key: string): OptionProcessorFunction {\n  return numbersInRange(key, 0, 23);\n}\n\nfunction validDateArray(key: string): OptionProcessorFunction {\n  return ({ value, providedType, localization }) => {\n    if (value === undefined) {\n      return [];\n    }\n    typeCheckDateArray(key, value, providedType, localization);\n    return value;\n  };\n}\n\nfunction validKeyOption(keyOptions: string[]): OptionProcessorFunction {\n  return ({ value, path }) => {\n    if (!keyOptions.includes(value))\n      Namespace.errorMessages.unexpectedOptionValue(\n        path.substring(1),\n        value,\n        keyOptions\n      );\n    return value;\n  };\n}\n\nconst optionProcessors: { [key: string]: OptionProcessorFunction } =\n  Object.freeze({\n    defaultDate: mandatoryDate('defaultDate'),\n    viewDate: mandatoryDate('viewDate'),\n    minDate: optionalDate('restrictions.minDate'),\n    maxDate: optionalDate('restrictions.maxDate'),\n    disabledHours: validHourRange('restrictions.disabledHours'),\n    enabledHours: validHourRange('restrictions.enabledHours'),\n    disabledDates: validDateArray('restrictions.disabledDates'),\n    enabledDates: validDateArray('restrictions.enabledDates'),\n    daysOfWeekDisabled: numbersInRange('restrictions.daysOfWeekDisabled', 0, 6),\n    disabledTimeIntervals: ({ key, value, providedType, localization }) => {\n      if (value === undefined) {\n        return [];\n      }\n      if (!Array.isArray(value)) {\n        Namespace.errorMessages.typeMismatch(\n          key,\n          providedType,\n          'array of { from: DateTime|Date, to: DateTime|Date }'\n        );\n      }\n      const valueObject = value as { from: any; to: any }[]; //eslint-disable-line @typescript-eslint/no-explicit-any\n      for (let i = 0; i < valueObject.length; i++) {\n        Object.keys(valueObject[i]).forEach((vk) => {\n          const subOptionName = `${key}[${i}].${vk}`;\n          const d = valueObject[i][vk];\n          const dateTime = convertToDateTime(d, subOptionName, localization);\n          dateTime.setLocalization(localization);\n          valueObject[i][vk] = dateTime;\n        });\n      }\n      return valueObject;\n    },\n    toolbarPlacement: validKeyOption(['top', 'bottom', 'default']),\n    type: validKeyOption(['icons', 'sprites']),\n    viewMode: validKeyOption([\n      'clock',\n      'calendar',\n      'months',\n      'years',\n      'decades',\n    ]),\n    theme: validKeyOption(['light', 'dark', 'auto']),\n    placement: validKeyOption(['top', 'bottom']),\n    meta: ({ value }) => value,\n    dayViewHeaderFormat: ({ value }) => value,\n    container: ({ value, path }) => {\n      if (\n        value &&\n        !(\n          value instanceof HTMLElement ||\n          value instanceof Element ||\n          value?.appendChild\n        )\n      ) {\n        Namespace.errorMessages.typeMismatch(\n          path.substring(1),\n          typeof value,\n          'HTMLElement'\n        );\n      }\n      return value;\n    },\n    useTwentyfourHour: ({ value, path, providedType, defaultType }) => {\n      Namespace.errorMessages.deprecatedWarning(\n        'useTwentyfourHour',\n        'Please use \"options.localization.hourCycle\" instead'\n      );\n      if (value === undefined || providedType === 'boolean') return value;\n      Namespace.errorMessages.typeMismatch(path, providedType, defaultType);\n    },\n    hourCycle: validKeyOption(['h11', 'h12', 'h23', 'h24']),\n  });\n\nconst defaultProcessor: OptionProcessorFunction = ({\n  value,\n  defaultType,\n  providedType,\n  path,\n}) => {\n  switch (defaultType) {\n    case 'boolean':\n      return value === 'true' || value === true;\n    case 'number':\n      return +value;\n    case 'string':\n      return value.toString();\n    case 'object':\n      return {};\n    case 'function':\n      return value;\n    default:\n      Namespace.errorMessages.typeMismatch(path, providedType, defaultType);\n  }\n};\n\nexport function processKey(this: void, args: OptionProcessorFunctionArguments) {\n  return (optionProcessors[args.key] || defaultProcessor)(args);\n}\n"
  },
  {
    "path": "src/js/utilities/options.ts",
    "content": "import { DateTime, DateTimeFormatOptions } from '../datetime';\nimport ViewMode from './view-mode';\n\nexport default interface Options {\n  allowInputToggle?: boolean;\n  container?: HTMLElement;\n  dateRange?: boolean;\n  debug?: boolean;\n  defaultDate?: DateTime;\n  display?: {\n    keyboardNavigation?: boolean;\n    toolbarPlacement?: 'top' | 'bottom';\n    components?: {\n      calendar?: boolean;\n      date?: boolean;\n      month?: boolean;\n      year?: boolean;\n      decades?: boolean;\n      clock?: boolean;\n      hours?: boolean;\n      minutes?: boolean;\n      seconds?: boolean;\n      useTwentyfourHour?: boolean;\n    };\n    buttons?: { today?: boolean; close?: boolean; clear?: boolean };\n    calendarWeeks?: boolean;\n    icons?: {\n      clear?: string;\n      close?: string;\n      date?: string;\n      down?: string;\n      next?: string;\n      previous?: string;\n      time?: string;\n      today?: string;\n      type?: 'icons' | 'sprites';\n      up?: string;\n    };\n    viewMode?: keyof ViewMode;\n    sideBySide?: boolean;\n    inline?: boolean;\n    keepOpen?: boolean;\n    theme?: 'light' | 'dark' | 'auto';\n    placement?: 'top' | 'bottom';\n  };\n  keepInvalid?: boolean;\n  localization?: Localization;\n  meta?: Record<string, unknown>;\n  multipleDates?: boolean;\n  multipleDatesSeparator?: string;\n  promptTimeOnDateChange?: boolean;\n  promptTimeOnDateChangeTransitionDelay?: number;\n  restrictions?: {\n    minDate?: DateTime;\n    maxDate?: DateTime;\n    enabledDates?: DateTime[];\n    disabledDates?: DateTime[];\n    enabledHours?: number[];\n    disabledHours?: number[];\n    disabledTimeIntervals?: { from: DateTime; to: DateTime }[];\n    daysOfWeekDisabled?: number[];\n  };\n  stepping?: number;\n  useCurrent?: boolean;\n  viewDate?: DateTime;\n}\n\nexport interface FormatLocalization {\n  dateFormats?: {\n    L?: string;\n    LL?: string;\n    LLL?: string;\n    LLLL?: string;\n    LT?: string;\n    LTS?: string;\n  };\n  format?: string;\n  hourCycle?: Intl.LocaleHourCycleKey;\n  locale?: string;\n  ordinal?: (n: number) => any; //eslint-disable-line @typescript-eslint/no-explicit-any\n}\n\nexport interface Localization extends FormatLocalization {\n  clear?: string;\n  close?: string;\n  dayViewHeaderFormat?: DateTimeFormatOptions;\n  decrementHour?: string;\n  decrementMinute?: string;\n  decrementSecond?: string;\n  incrementHour?: string;\n  incrementMinute?: string;\n  incrementSecond?: string;\n  maxWeekdayLength?: number;\n  nextCentury?: string;\n  nextDecade?: string;\n  nextMonth?: string;\n  nextYear?: string;\n  pickHour?: string;\n  pickMinute?: string;\n  pickSecond?: string;\n  previousCentury?: string;\n  previousDecade?: string;\n  previousMonth?: string;\n  previousYear?: string;\n  selectDate?: string;\n  selectDecade?: string;\n  selectMonth?: string;\n  selectTime?: string;\n  selectYear?: string;\n  startOfTheWeek?: number;\n  today?: string;\n  toggleMeridiem?: string;\n  toggleAriaLabel?: string;\n}\n"
  },
  {
    "path": "src/js/utilities/optionsStore.ts",
    "content": "import { DateTime } from '../datetime';\nimport CalendarModes from './calendar-modes';\nimport ViewMode from './view-mode';\nimport Options from './options';\n\nexport class OptionsStore {\n  options: Options;\n  element: HTMLElement;\n  toggle: HTMLElement;\n  input: HTMLInputElement;\n  unset: boolean;\n  private _currentCalendarViewMode = 0;\n\n  get currentCalendarViewMode() {\n    return this._currentCalendarViewMode;\n  }\n\n  set currentCalendarViewMode(value) {\n    this._currentCalendarViewMode = value;\n    this.currentView = CalendarModes[value].name;\n  }\n\n  _viewDate = new DateTime();\n\n  get viewDate() {\n    return this._viewDate;\n  }\n\n  set viewDate(v) {\n    this._viewDate = v;\n    if (this.options) this.options.viewDate = v;\n  }\n\n  /**\n   * When switching back to the calendar from the clock,\n   * this sets currentView to the correct calendar view.\n   */\n  refreshCurrentView() {\n    this.currentView = CalendarModes[this.currentCalendarViewMode].name;\n  }\n\n  minimumCalendarViewMode = 0;\n  currentView: keyof ViewMode = 'calendar';\n\n  get isTwelveHour() {\n    return ['h12', 'h11'].includes(this.options.localization.hourCycle);\n  }\n}\n"
  },
  {
    "path": "src/js/utilities/service-locator.ts",
    "content": "//eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport declare type Constructable<T> = new (...args: any[]) => T;\n\nclass ServiceLocator {\n  private cache: Map<Constructable<unknown>, unknown | symbol> = new Map();\n\n  locate<T>(identifier: Constructable<T>): T {\n    const service = this.cache.get(identifier);\n    if (service) return service as T;\n    const value = new identifier();\n    this.cache.set(identifier, value);\n    return value;\n  }\n}\nexport const setupServiceLocator = () => {\n  serviceLocator = new ServiceLocator();\n};\n\nexport let serviceLocator: ServiceLocator;\n"
  },
  {
    "path": "src/js/utilities/typeChecker.ts",
    "content": "import Namespace from './namespace';\nimport { DateTime } from '../datetime';\nimport { FormatLocalization } from './options';\nimport DefaultFormatLocalization from './default-format-localization';\n\n/**\n * Attempts to prove `d` is a DateTime or Date or can be converted into one.\n * @param d If a string will attempt creating a date from it.\n * @param localization object containing locale and format settings. Only used with the custom formats\n * @private\n */\nexport function tryConvertToDateTime(\n  this: void,\n  d: DateTime | Date | string,\n  localization: FormatLocalization\n): DateTime | null {\n  if (!d) return null;\n  if (d.constructor.name === DateTime.name) return d as DateTime;\n  if (d.constructor.name === Date.name) {\n    return DateTime.convert(d as Date);\n  }\n  if (typeof d === typeof '') {\n    const dateTime = DateTime.fromString(d as unknown as string, localization);\n    if (JSON.stringify(dateTime) === 'null') {\n      return null;\n    }\n    return dateTime;\n  }\n  return null;\n}\n\n/**\n * Attempts to convert `d` to a DateTime object\n * @param d value to convert\n * @param optionName Provides text to error messages e.g. disabledDates\n * @param localization object containing locale and format settings. Only used with the custom formats\n */\nexport function convertToDateTime(\n  this: void,\n  d: DateTime | Date | string,\n  optionName: string,\n  localization: FormatLocalization\n): DateTime {\n  if (typeof d === typeof '' && optionName !== 'input') {\n    Namespace.errorMessages.dateString();\n  }\n\n  const converted = tryConvertToDateTime(d, localization);\n\n  if (!converted) {\n    Namespace.errorMessages.failedToParseDate(\n      optionName,\n      d,\n      optionName === 'input'\n    );\n  }\n  return converted;\n}\n\n/**\n * Type checks that `value` is an array of Date or DateTime\n * @param optionName Provides text to error messages e.g. disabledDates\n * @param value Option value\n * @param providedType Used to provide text to error messages\n * @param localization\n */\nexport function typeCheckDateArray(\n  this: void,\n  optionName: string,\n  value: any, //eslint-disable-line @typescript-eslint/no-explicit-any\n  providedType: string,\n  localization: FormatLocalization = DefaultFormatLocalization\n) {\n  if (!Array.isArray(value)) {\n    Namespace.errorMessages.typeMismatch(\n      optionName,\n      providedType,\n      'array of DateTime or Date'\n    );\n  }\n  for (let i = 0; i < value.length; i++) {\n    const d = value[i];\n    const dateTime = convertToDateTime(d, optionName, localization);\n    dateTime.setLocalization(localization);\n    value[i] = dateTime;\n  }\n}\n\n/**\n * Type checks that `value` is an array of numbers\n * @param optionName Provides text to error messages e.g. disabledDates\n * @param value Option value\n * @param providedType Used to provide text to error messages\n */\nexport function typeCheckNumberArray(\n  this: void,\n  optionName: string,\n  value: any, //eslint-disable-line @typescript-eslint/no-explicit-any\n  providedType: string\n) {\n  if (!Array.isArray(value) || value.some((x) => typeof x !== typeof 0)) {\n    Namespace.errorMessages.typeMismatch(\n      optionName,\n      providedType,\n      'array of numbers'\n    );\n  }\n}\n"
  },
  {
    "path": "src/js/utilities/view-mode.ts",
    "content": "type ViewMode = {\n  clock;\n  calendar;\n  months;\n  years;\n  decades;\n};\n\nexport default ViewMode;\n"
  },
  {
    "path": "src/js/validation.ts",
    "content": "import { DateTime, Unit } from './datetime';\nimport { serviceLocator } from './utilities/service-locator';\nimport { OptionsStore } from './utilities/optionsStore';\n\n/**\n * Main class for date validation rules based on the options provided.\n */\nexport default class Validation {\n  private optionsStore: OptionsStore;\n\n  constructor() {\n    this.optionsStore = serviceLocator.locate(OptionsStore);\n  }\n\n  /**\n   * Checks to see if the target date is valid based on the rules provided in the options.\n   * Granularity can be provided to check portions of the date instead of the whole.\n   * @param targetDate\n   * @param granularity\n   */\n  isValid(targetDate: DateTime, granularity?: Unit): boolean {\n    if (!this._enabledDisabledDatesIsValid(granularity, targetDate))\n      return false;\n\n    if (\n      granularity !== Unit.month &&\n      granularity !== Unit.year &&\n      this.optionsStore.options.restrictions.daysOfWeekDisabled?.length > 0 &&\n      this.optionsStore.options.restrictions.daysOfWeekDisabled.indexOf(\n        targetDate.weekDay\n      ) !== -1\n    )\n      return false;\n\n    if (!this._minMaxIsValid(granularity, targetDate)) return false;\n\n    if (\n      granularity === Unit.hours ||\n      granularity === Unit.minutes ||\n      granularity === Unit.seconds\n    ) {\n      if (!this._enabledDisabledHoursIsValid(targetDate)) return false;\n\n      if (\n        this.optionsStore.options.restrictions.disabledTimeIntervals?.filter(\n          (internal) => targetDate.isBetween(internal.from, internal.to)\n        ).length !== 0\n      )\n        return false;\n    }\n\n    return true;\n  }\n\n  private _enabledDisabledDatesIsValid(\n    granularity: Unit,\n    targetDate: DateTime\n  ): boolean {\n    if (granularity !== Unit.date) return true;\n\n    if (\n      this.optionsStore.options.restrictions.disabledDates.length > 0 &&\n      this._isInDisabledDates(targetDate)\n    ) {\n      return false;\n    }\n\n    // noinspection RedundantIfStatementJS\n    if (\n      this.optionsStore.options.restrictions.enabledDates.length > 0 &&\n      !this._isInEnabledDates(targetDate)\n    ) {\n      return false;\n    }\n\n    return true;\n  }\n\n  /**\n   * Checks to see if the disabledDates option is in use and returns true (meaning invalid)\n   * if the `testDate` is with in the array. Granularity is by date.\n   * @param testDate\n   * @private\n   */\n  private _isInDisabledDates(testDate: DateTime) {\n    if (\n      !this.optionsStore.options.restrictions.disabledDates ||\n      this.optionsStore.options.restrictions.disabledDates.length === 0\n    )\n      return false;\n\n    return !!this.optionsStore.options.restrictions.disabledDates.find((x) =>\n      x.isSame(testDate, Unit.date)\n    );\n  }\n\n  /**\n   * Checks to see if the enabledDates option is in use and returns true (meaning valid)\n   * if the `testDate` is with in the array. Granularity is by date.\n   * @param testDate\n   * @private\n   */\n  private _isInEnabledDates(testDate: DateTime) {\n    if (\n      !this.optionsStore.options.restrictions.enabledDates ||\n      this.optionsStore.options.restrictions.enabledDates.length === 0\n    )\n      return true;\n\n    return !!this.optionsStore.options.restrictions.enabledDates.find((x) =>\n      x.isSame(testDate, Unit.date)\n    );\n  }\n\n  private _minMaxIsValid(granularity: Unit, targetDate: DateTime) {\n    if (\n      this.optionsStore.options.restrictions.minDate &&\n      targetDate.isBefore(\n        this.optionsStore.options.restrictions.minDate,\n        granularity\n      )\n    ) {\n      return false;\n    }\n\n    // noinspection RedundantIfStatementJS\n    if (\n      this.optionsStore.options.restrictions.maxDate &&\n      targetDate.isAfter(\n        this.optionsStore.options.restrictions.maxDate,\n        granularity\n      )\n    ) {\n      return false;\n    }\n\n    return true;\n  }\n\n  private _enabledDisabledHoursIsValid(targetDate: DateTime) {\n    if (\n      this.optionsStore.options.restrictions.disabledHours.length > 0 &&\n      this._isInDisabledHours(targetDate)\n    ) {\n      return false;\n    }\n\n    // noinspection RedundantIfStatementJS\n    if (\n      this.optionsStore.options.restrictions.enabledHours.length > 0 &&\n      !this._isInEnabledHours(targetDate)\n    ) {\n      return false;\n    }\n\n    return true;\n  }\n\n  /**\n   * Checks to see if the disabledHours option is in use and returns true (meaning invalid)\n   * if the `testDate` is with in the array. Granularity is by hours.\n   * @param testDate\n   * @private\n   */\n  private _isInDisabledHours(testDate: DateTime) {\n    if (\n      !this.optionsStore.options.restrictions.disabledHours ||\n      this.optionsStore.options.restrictions.disabledHours.length === 0\n    )\n      return false;\n\n    const formattedDate = testDate.hours;\n    return this.optionsStore.options.restrictions.disabledHours.includes(\n      formattedDate\n    );\n  }\n\n  /**\n   * Checks to see if the enabledHours option is in use and returns true (meaning valid)\n   * if the `testDate` is with in the array. Granularity is by hours.\n   * @param testDate\n   * @private\n   */\n  private _isInEnabledHours(testDate: DateTime) {\n    if (\n      !this.optionsStore.options.restrictions.enabledHours ||\n      this.optionsStore.options.restrictions.enabledHours.length === 0\n    )\n      return true;\n\n    const formattedDate = testDate.hours;\n    return this.optionsStore.options.restrictions.enabledHours.includes(\n      formattedDate\n    );\n  }\n\n  dateRangeIsValid(dates: DateTime[], index: number, target: DateTime) {\n    // if we're not using the option, then return valid\n    if (!this.optionsStore.options.dateRange) return true;\n\n    // if we've only selected 0..1 dates, and we're not setting the end date\n    // then return valid. We only want to validate the range if both are selected,\n    // because the other validation on the target has already occurred.\n    if (dates.length !== 2 && index !== 1) return true;\n\n    // initialize start date\n    const start = dates[0].clone;\n    // check if start date is not the same as target date\n    if (start.isSame(target, Unit.date)) return true;\n\n    // add one day to start; start has already been validated\n    start.manipulate(1, Unit.date);\n\n    // check each date in the range to make sure it's valid\n    while (!start.isSame(target, Unit.date)) {\n      const valid = this.isValid(start, Unit.date);\n      if (!valid) return false;\n      start.manipulate(1, Unit.date);\n    }\n\n    return true;\n  }\n}\n"
  },
  {
    "path": "src/nuget/TempusDominus.nuspec",
    "content": "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<package xmlns=\"http://schemas.microsoft.com/packaging/2011/08/nuspec.xsd\">\n    <metadata>\n        <id>TempusDominus</id>\n        <version>6.10.1</version>\n        <title>Tempus Dominus</title>\n        <authors>Eonasdan</authors>\n        <owners>Eonasdan</owners>\n        <summary>Tempus Dominus css and javascript</summary>\n        <projectUrl>https://github.com/Eonasdan/tempus-dominus</projectUrl>\n        <requireLicenseAcceptance>false</requireLicenseAcceptance>\n        <description>Powerful and robust date and time picker</description>\n        <readme>README.md</readme>\n        <releaseNotes>https://getdatepicker.com/6/change-log.html</releaseNotes>\n        <tags>date time picker datetimepicker datepicker</tags>\n        <icon>td.png</icon>\n        <licenseUrl>https://github.com/Eonasdan/tempus-dominus/blob/master/LICENSE</licenseUrl>\n        <copyright>Copyright 2013-2022</copyright>\n        <contentFiles>\n            <files include=\"**/*\" buildAction=\"Content\" />\n        </contentFiles>\n    </metadata>\n\t<files>\n        <file src=\"..\\..\\README.md\" target=\"\" />\n        <file src=\"td.png\" target=\"\" />\n\n        <file src=\"..\\..\\dist\\css\\*.*\" target=\"content\\Content\" />\n        <file src=\"..\\..\\dist\\js\\*.*\" target=\"content\\Content\" />\n\n        <file src=\"..\\..\\dist\\css\\*.*\" target=\"contentFiles\\any\\any\\wwwroot\\css\" />\n        <file src=\"..\\..\\dist\\js\\*.*\" target=\"contentFiles\\any\\any\\wwwroot\\js\" />\n    </files>\n</package>\n"
  },
  {
    "path": "src/nuget/TempusDominus.scss.nuspec",
    "content": "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<package xmlns=\"http://schemas.microsoft.com/packaging/2011/08/nuspec.xsd\">\n    <metadata>\n        <id>TempusDominus.scss</id>\n        <version>6.10.1</version>\n        <title>Tempus Dominus</title>\n        <authors>Eonasdan</authors>\n        <owners>Eonasdan</owners>\n        <summary>Tempus Dominus sass and javascript</summary>\n        <projectUrl>https://github.com/Eonasdan/tempus-dominus</projectUrl>\n        <requireLicenseAcceptance>false</requireLicenseAcceptance>\n        <description>Powerful and robust date and time picker</description>\n        <readme>README.md</readme>\n        <releaseNotes>https://getdatepicker.com/6/change-log.html</releaseNotes>\n        <tags>date time picker datetimepicker datepicker</tags>\n        <icon>td.png</icon>\n        <licenseUrl>https://github.com/Eonasdan/tempus-dominus/blob/master/LICENSE</licenseUrl>\n        <copyright>Copyright 2013-2022</copyright>\n        <contentFiles>\n            <files include=\"**/*\" buildAction=\"Content\" />\n        </contentFiles>\n    </metadata>\n\t<files>\n        <file src=\"..\\..\\README.md\" target=\"\" />\n        <file src=\"td.png\" target=\"\" />\n\n        <file src=\"..\\scss\\**\\*.scss\" target=\"content\\Content\\tempusdominus\" />\n        <file src=\"..\\..\\dist\\js\\*.*\" target=\"content\\Content\" />\n\n        <file src=\"..\\scss\\**\\*.scss\" target=\"contentFiles\\any\\any\\wwwroot\\scss\" />\n        <file src=\"..\\..\\dist\\js\\*.*\" target=\"contentFiles\\any\\any\\wwwroot\\js\" />\n    </files>\n</package>\n"
  },
  {
    "path": "src/scss/_variables.scss",
    "content": "@use 'sass:color';\n\n$td-light: #fff !default;\n$td-widget-background: $td-light !default;\n$td-font-color: #000 !default;\n$td-timepicker-font-size: 1.2em !default;\n$td-active-bg: #0d6efd !default;\n$td-range-bg: color.scale($td-active-bg, $lightness: -40%) !default;\n$td-active-color: $td-light !default;\n$td-active-border-color: $td-light !default;\n$td-border-radius: 999px !default;\n$td-btn-hover-bg: #e9ecef !default;\n$td-disabled-color: #6c757d !default;\n$td-alternate-color: rgba(0, 0, 0, 0.38) !default;\n$td-secondary-border-color: #ccc !default;\n$td-secondary-border-color-rgba: rgba(0, 0, 0, 0.2) !default;\n$td-primary-border-color: $td-light !default;\n$td-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25) !default;\n$td-dow-color: rgba(0, 0, 0, 0.5) !default;\n\n$td-dark: #1b1b1b !default;\n$td-dark-widget-background: $td-dark !default;\n$td-dark-font-color: #e3e3e3 !default;\n$td-dark-active-bg: #4db2ff !default;\n$td-dark-range-bg: color.scale($td-dark-active-bg, $lightness: -40%) !default;\n$td-dark-active-color: #fff !default;\n$td-dark-active-border-color: $td-dark !default;\n$td-dark-btn-hover-bg: rgb(35, 38, 39) !default;\n$td-dark-disabled-color: #6c757d !default;\n$td-dark-alternate-color: rgba(232, 230, 227, 0.38) !default;\n$td-dark-secondary-border-color: #ccc !default;\n$td-dark-secondary-border-color-rgba: rgba(232, 230, 227, 0.2) !default;\n$td-dark-primary-border-color: $td-dark !default;\n$td-dark-text-shadow: 0 -1px 0 rgba(232, 230, 227, 0.25) !default;\n$td-dark-dow-color: rgba(232, 230, 227, 0.5) !default;\n\n$td-widget-z-index: 9999 !default;\n\n:root {\n  --td-light: #{$td-light};\n  --td-widget-background: #{$td-widget-background};\n  --td-font-color: #{$td-font-color};\n  --td-timepicker-font-size: #{$td-timepicker-font-size};\n  --td-active-bg: #{$td-active-bg};\n  --td-range-bg: #{$td-range-bg};\n  --td-active-color: #{$td-active-color};\n  --td-active-border-color: #{$td-active-border-color};\n  --td-border-radius: #{$td-border-radius};\n  --td-btn-hover-bg: #{$td-btn-hover-bg};\n  --td-disabled-color: #{$td-disabled-color};\n  --td-alternate-color: #{$td-alternate-color};\n  --td-secondary-border-color: #{$td-secondary-border-color};\n  --td-secondary-border-color-rgba: #{$td-secondary-border-color-rgba};\n  --td-primary-border-color: #{$td-primary-border-color};\n  --td-text-shadow: #{$td-text-shadow};\n  --td-dow-color: #{$td-dow-color};\n\n  --td-dark: #{$td-dark};\n  --td-dark-widget-background: #{$td-dark-widget-background};\n  --td-dark-font-color: #{$td-dark-font-color};\n  --td-dark-active-bg: #{$td-dark-active-bg};\n  --td-dark-range-bg: #{$td-dark-range-bg};\n  --td-dark-active-color: #{$td-dark-active-color};\n  --td-dark-active-border-color: #{$td-dark-active-border-color};\n  --td-dark-btn-hover-bg: #{$td-dark-btn-hover-bg};\n  --td-dark-disabled-color: #{$td-dark-disabled-color};\n  --td-dark-alternate-color: #{$td-dark-alternate-color};\n  --td-dark-secondary-border-color: #{$td-dark-secondary-border-color};\n  --td-dark-secondary-border-color-rgba: #{$td-dark-secondary-border-color-rgba};\n  --td-dark-primary-border-color: #{$td-dark-primary-border-color};\n  --td-dark-text-shadow: #{$td-dark-text-shadow};\n  --td-dark-dow-color: #{$td-dark-dow-color};\n\n  --td-widget-z-index: #{$td-widget-z-index};\n}\n"
  },
  {
    "path": "src/scss/tempus-dominus.scss",
    "content": "@import 'variables';\n\n.visually-hidden {\n  position: absolute !important;\n  width: 1px !important;\n  height: 1px !important;\n  padding: 0 !important;\n  margin: -1px !important; // Fix for https://github.com/twbs/bootstrap/issues/25686\n  overflow: hidden !important;\n  clip: rect(0, 0, 0, 0) !important;\n  white-space: nowrap !important;\n  border: 0 !important;\n}\n\n.tempus-dominus-widget {\n  list-style: none;\n  padding: 4px;\n  width: 19rem;\n  border-radius: 4px;\n  display: none;\n  z-index: var(--td-widget-z-index);\n  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14),\n    0 1px 10px 0 rgba(0, 0, 0, 0.12);\n\n  :focus {\n    outline: 0;\n    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);\n  }\n\n  &.calendarWeeks {\n    width: 21rem;\n\n    & .date-container-days {\n      grid-auto-columns: 12.5%;\n      grid-template-areas: 'a a a a a a a a';\n    }\n  }\n\n  [data-action] {\n    cursor: pointer;\n\n    &::after {\n      @extend .visually-hidden;\n      content: attr(title);\n    }\n\n    &.disabled,\n    &.disabled:hover {\n      background: none;\n      cursor: not-allowed;\n    }\n  }\n\n  //popper\n  .arrow {\n    display: none;\n  }\n\n  //end popper\n\n  &.show {\n    display: block;\n    &.date-container {\n      min-height: 315px;\n    }\n\n    &.time-container {\n      min-height: 217px;\n    }\n  }\n\n  .td-collapse {\n    &:not(.show) {\n      display: none;\n    }\n  }\n\n  .td-collapsing {\n    height: 0;\n    overflow: hidden;\n    transition: height 0.35s ease;\n  }\n\n  &.timepicker-sbs {\n    @media (min-width: 576px) {\n      width: 38em;\n    }\n\n    @media (min-width: 768px) {\n      width: 38em;\n    }\n\n    @media (min-width: 992px) {\n      width: 38em;\n    }\n\n    .td-row {\n      display: flex;\n\n      .td-half {\n        flex: 0 0 auto;\n        width: 50%;\n      }\n    }\n  }\n\n  div[data-action]:active {\n    box-shadow: none;\n  }\n\n  .timepicker-hour,\n  .timepicker-minute,\n  .timepicker-second {\n    width: 54px;\n    font-weight: bold;\n    font-size: $td-timepicker-font-size;\n    margin: 0;\n  }\n\n  button[data-action] {\n    padding: 6px;\n  }\n\n  .toggleMeridiem {\n    text-align: center;\n    height: 38px;\n  }\n\n  .calendar-header {\n    display: grid;\n    grid-template-areas: 'a a a';\n    margin-bottom: 10px;\n    font-weight: bold;\n\n    & .next {\n      text-align: right;\n      padding-right: 10px;\n    }\n\n    & .previous {\n      text-align: left;\n      padding-left: 10px;\n    }\n\n    & .picker-switch {\n      text-align: center;\n    }\n  }\n\n  .toolbar {\n    display: grid;\n    grid-auto-flow: column;\n    grid-auto-rows: 40px;\n\n    & div {\n      border-radius: var(--td-border-radius);\n      align-items: center;\n      justify-content: center;\n      box-sizing: border-box;\n      display: flex;\n    }\n  }\n\n  .date-container-days {\n    display: grid;\n    grid-template-areas: 'a a a a a a a';\n    grid-auto-rows: 40px;\n    grid-auto-columns: calc(100% / 7);\n\n    .range-in {\n      @extend .active;\n      background-color: var(--td-range-bg) !important;\n      border: none;\n      border-radius: 0 !important;\n      box-shadow: -5px 0 0 var(--td-range-bg), 5px 0 0 var(--td-range-bg);\n    }\n\n    .range-end {\n      @extend .active;\n      border-radius: 0 50px 50px 0 !important;\n    }\n\n    .range-start {\n      @extend .active;\n      border-radius: 50px 0 0 50px !important;\n    }\n\n    & .dow {\n      align-items: center;\n      justify-content: center;\n      text-align: center;\n    }\n\n    & .cw {\n      width: 90%;\n      height: 90%;\n      align-items: center;\n      justify-content: center;\n      display: flex;\n      font-size: 0.8em;\n      line-height: 20px;\n      cursor: default;\n    }\n  }\n\n  .date-container-decades,\n  .date-container-years,\n  .date-container-months {\n    display: grid;\n    grid-template-areas: 'a a a';\n    grid-auto-rows: calc(calc(19rem - 2 * 4px) / 7);\n  }\n\n  .time-container-hour,\n  .time-container-minute,\n  .time-container-second {\n    display: grid;\n    grid-template-areas: 'a a a a';\n    grid-auto-rows: calc(calc(19rem - 2 * 4px) / 7);\n  }\n\n  .time-container-clock {\n    display: grid;\n    grid-auto-rows: calc(calc(19rem - 2 * 4px) / 7);\n\n    & .no-highlight {\n      width: 90%;\n      height: 90%;\n      align-items: center;\n      justify-content: center;\n      display: flex;\n    }\n  }\n\n  .date-container-decades,\n  .date-container-years,\n  .date-container-months,\n  .date-container-days,\n  .time-container-clock,\n  .time-container-hour,\n  .time-container-minute,\n  .time-container-second {\n    div:not(.no-highlight) {\n      width: 90%;\n      height: 90%;\n      border-radius: var(--td-border-radius);\n      align-items: center;\n      justify-content: center;\n      box-sizing: border-box;\n      display: flex;\n\n      &.disabled,\n      &.disabled:hover {\n        background: none;\n        cursor: not-allowed;\n      }\n\n      &.today {\n        position: relative;\n\n        &:before {\n          content: '';\n          display: inline-block;\n          border: solid transparent;\n          border-width: 0 0 7px 7px;\n          position: absolute;\n          bottom: 6px;\n          right: 6px;\n        }\n      }\n    }\n  }\n\n  .time-container {\n    margin-bottom: 0.5rem;\n  }\n\n  button {\n    display: inline-block;\n    font-weight: 400;\n    line-height: 1.5;\n    text-align: center;\n    text-decoration: none;\n    vertical-align: middle;\n    cursor: pointer;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    user-select: none;\n    padding: 0.375rem 0.75rem;\n    font-size: 1rem;\n    border-radius: 0.25rem;\n    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,\n      border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n  }\n\n  &.tempus-dominus-widget-readonly {\n    table td.day,\n    table td.hour,\n    table td.minute,\n    table td.second,\n    table td [data-action='incrementHours'],\n    table td [data-action='incrementMinutes'],\n    table td [data-action='incrementSeconds'],\n    table td [data-action='decrementHours'],\n    table td [data-action='decrementMinutes'],\n    table td [data-action='decrementSeconds'],\n    table td [data-action='showHours'],\n    table td [data-action='showMinutes'],\n    table td [data-action='showSeconds'],\n    table td [data-action='togglePeriod'] {\n      pointer-events: none;\n      cursor: default;\n\n      &:hover {\n        background: none;\n      }\n    }\n  }\n\n  &.light {\n    color: var(--td-font-color);\n    background-color: var(--td-widget-background);\n\n    [data-action] {\n      &.disabled,\n      &.disabled:hover {\n        color: var(--td-disabled-color);\n      }\n    }\n\n    .toolbar {\n      & div {\n        &:hover {\n          background: var(--td-btn-hover-bg);\n        }\n      }\n    }\n\n    .date-container-days {\n      & .dow {\n        color: var(--td-dow-color);\n      }\n\n      & .cw {\n        color: var(--td-alternate-color);\n      }\n    }\n\n    .date-container-decades,\n    .date-container-years,\n    .date-container-months,\n    .date-container-days,\n    .time-container-clock,\n    .time-container-hour,\n    .time-container-minute,\n    .time-container-second {\n      div:not(.no-highlight) {\n        &:hover {\n          background: var(--td-btn-hover-bg);\n        }\n\n        &.active {\n          background-color: var(--td-active-bg);\n          color: var(--td-active-color);\n          text-shadow: var(--td-text-shadow);\n\n          &.old,\n          &.new {\n            color: var(--td-active-color);\n          }\n        }\n\n        &.active.today:before {\n          border-bottom-color: var(--td-active-border-color);\n        }\n\n        &.old,\n        &.new {\n          color: var(--td-alternate-color);\n        }\n\n        &.disabled,\n        &.disabled:hover {\n          color: var(--td-disabled-color);\n        }\n\n        &.today {\n          &:before {\n            border-bottom-color: var(--td-active-bg);\n            border-top-color: var(--td-secondary-border-color-rgba);\n          }\n        }\n      }\n    }\n\n    button {\n      color: var(--td-active-color);\n      background-color: var(--td-active-bg);\n      border-color: var(--td-active-bg);\n    }\n  }\n\n  &.dark {\n    color: var(--td-dark-font-color);\n    background-color: var(--td-dark-widget-background);\n\n    [data-action] {\n      &.disabled,\n      &.disabled:hover {\n        color: var(--td-dark-disabled-color);\n      }\n    }\n\n    .toolbar {\n      & div {\n        &:hover {\n          background: var(--td-dark-btn-hover-bg);\n        }\n      }\n    }\n\n    .date-container-days {\n      & .dow {\n        color: var(--td-dark-dow-color);\n      }\n\n      .range-in {\n        background-color: var(--td-dark-range-bg) !important;\n        box-shadow: -5px 0 0 var(--td-dark-range-bg),\n          5px 0 0 var(--td-dark-range-bg);\n      }\n\n      & .cw {\n        color: var(--td-dark-alternate-color);\n      }\n    }\n\n    .date-container-decades,\n    .date-container-years,\n    .date-container-months,\n    .date-container-days,\n    .time-container-clock,\n    .time-container-hour,\n    .time-container-minute,\n    .time-container-second {\n      div:not(.no-highlight) {\n        &:hover {\n          background: var(--td-dark-btn-hover-bg);\n        }\n\n        &.active {\n          background-color: var(--td-dark-active-bg);\n          color: var(--td-dark-active-color);\n          text-shadow: var(--td-dark-text-shadow);\n\n          &.old,\n          &.new {\n            color: var(--td-dark-active-color);\n          }\n        }\n\n        &.active.today:before {\n          border-bottom-color: var(--td-dark-active-border-color);\n        }\n\n        &.old,\n        &.new {\n          color: var(--td-dark-alternate-color);\n        }\n\n        &.disabled,\n        &.disabled:hover {\n          color: var(--td-dark-disabled-color);\n        }\n\n        &.today {\n          &:before {\n            border-bottom-color: var(--td-dark-active-bg);\n            border-top-color: var(--td-dark-secondary-border-color-rgba);\n          }\n        }\n      }\n    }\n\n    button {\n      color: var(--td-dark-active-color);\n      background-color: var(--td-dark-active-bg);\n      border-color: var(--td-dark-active-bg);\n    }\n  }\n}\n"
  },
  {
    "path": "test/actions.test.ts",
    "content": "import {\n  createElementWithClasses,\n  loadFixtures,\n  newDate,\n  reset,\n  store,\n} from './test-utilities';\nimport { afterAll, beforeAll, beforeEach, expect, test, vi } from 'vitest';\nimport Actions from '../src/js/actions';\nimport { FixtureValidation } from './fixtures/validation.fixture';\nimport { FixtureDates } from './fixtures/dates.fixture';\nimport { FixtureDisplay } from './fixtures/display.fixture';\nimport Namespace from '../src/js/utilities/namespace';\nimport ActionTypes from '../src/js/utilities/action-types';\nimport { Unit } from '../src/js/datetime';\nimport { EventEmitters } from '../src/js/utilities/event-emitter';\nimport Display from '../src/js/display';\nimport Dates from '../src/js/dates';\nimport Collapse from '../src/js/display/collapse';\nimport Validation from '../src/js/validation';\nimport { serviceLocator } from '../src/js/utilities/service-locator';\n\nlet validation: Validation;\nlet emitters: EventEmitters;\nlet display: Display;\nlet dates: Dates;\n\nlet actions: Actions;\nlet event;\nlet element: HTMLElement;\n\nlet isValidSpy;\nvi.spyOn(Collapse, 'hideImmediately').mockImplementation(vi.fn());\nvi.spyOn(Collapse, 'showImmediately').mockImplementation(vi.fn());\nvi.spyOn(Collapse, 'toggle').mockImplementation(vi.fn());\n\nbeforeAll(() => {\n  loadFixtures({\n    Validation: FixtureValidation,\n    Dates: FixtureDates,\n    Display: FixtureDisplay,\n  });\n  reset();\n  const ee = serviceLocator.locate(EventEmitters);\n  let callback;\n  ee.action.subscribe = (cb) => {\n    callback = cb;\n  };\n  ee.action.emit = (value) => {\n    callback(value);\n  };\n});\n\nbeforeEach(() => {\n  reset();\n  element = document.createElement('div');\n  event = { currentTarget: element };\n  actions = new Actions();\n  store.viewDate = newDate();\n  // @ts-ignore\n  validation = actions.validation;\n  // @ts-ignore\n  emitters = actions._eventEmitters;\n  // @ts-ignore\n  display = actions.display;\n  // @ts-ignore\n  dates = actions.dates;\n  dates.clear();\n\n  isValidSpy = vi.spyOn(validation, 'isValid');\n  isValidSpy.mockImplementation(() => true);\n\n  // @ts-ignore\n  display._widget = document.createElement('div');\n});\n\nafterAll(() => {\n  vi.restoreAllMocks();\n});\n\ntest('disabled', () => {\n  element.classList.add(Namespace.css.disabled);\n  actions.do(event);\n  //what else could be done here?\n});\n\ntest('next or previous', () => {\n  const viewUpdateSpy = vi.spyOn(emitters.viewUpdate, 'emit');\n  const showModeSpy = vi.spyOn(display, '_showMode');\n\n  expect(store.viewDate).toEqual(newDate());\n\n  //test from dataset\n  element.dataset.action = 'next';\n  actions.do(event);\n  expect(store.viewDate).toEqual(newDate().manipulate(1, Unit.month));\n  expect(viewUpdateSpy).toHaveBeenCalled();\n  expect(showModeSpy).toHaveBeenCalled();\n\n  store.viewDate = newDate();\n  actions.do(event, ActionTypes.previous);\n  expect(store.viewDate).toEqual(newDate().manipulate(-1, Unit.month));\n  expect(viewUpdateSpy).toHaveBeenCalled();\n  expect(showModeSpy).toHaveBeenCalled();\n});\n\ntest('changeCalendarView', () => {\n  const updateCalendarHeaderSpy = vi.spyOn(display, '_updateCalendarHeader');\n  const showModeSpy = vi.spyOn(display, '_showMode');\n\n  actions.do(event, ActionTypes.changeCalendarView);\n  expect(updateCalendarHeaderSpy).toHaveBeenCalled();\n  expect(showModeSpy).toHaveBeenCalled();\n});\n\ntest('handleSelectCalendarMode', () => {\n  const showModeSpy = vi.spyOn(display, '_showMode');\n  const hideSpy = vi.spyOn(display, 'hide');\n  const setValueSpy = vi.spyOn(dates, 'setValue');\n\n  //test selecting month\n  element.dataset.value = '1';\n  actions.do(event, ActionTypes.selectMonth);\n  expect(store.viewDate.month).toBe(1);\n  expect(hideSpy).toHaveBeenCalled();\n  expect(setValueSpy).toHaveBeenCalled();\n\n  //test selecting year\n  store.currentCalendarViewMode = 1;\n  element.dataset.value = '2022';\n  actions.do(event, ActionTypes.selectYear);\n  expect(store.viewDate.year).toBe(2022);\n  expect(showModeSpy).toHaveBeenCalled();\n});\n\ntest('selectDay', () => {\n  const hideSpy = vi.spyOn(display, 'hide');\n  const setValueSpy = vi.spyOn(dates, 'setValue');\n\n  let shouldBe = newDate();\n  shouldBe.date = 21;\n\n  element.dataset.day = `${shouldBe.date}`;\n\n  //test select date without time\n  // @ts-ignore\n  display._hasTime = false;\n  actions.do(event, ActionTypes.selectDay);\n  expect(setValueSpy).toHaveBeenCalled();\n  expect(hideSpy).toHaveBeenCalled();\n  expect(dates.picked).toEqual([shouldBe]);\n\n  //test previous month\n  element.classList.add(Namespace.css.old);\n  actions.do(event, ActionTypes.selectDay);\n  shouldBe.manipulate(-1, Unit.month);\n  expect(dates.picked).toEqual([shouldBe]);\n  expect(hideSpy).toHaveBeenCalled();\n  expect(setValueSpy).toHaveBeenCalled();\n  element.classList.remove(Namespace.css.old);\n  shouldBe.manipulate(1, Unit.month);\n\n  //test next month\n  element.classList.add(Namespace.css.new);\n  actions.do(event, ActionTypes.selectDay);\n  shouldBe.manipulate(1, Unit.month);\n  expect(dates.picked).toEqual([shouldBe]);\n  expect(hideSpy).toHaveBeenCalled();\n  expect(setValueSpy).toHaveBeenCalled();\n  element.classList.remove(Namespace.css.new);\n});\n\ntest('selectDay - range', () => {\n  const setValueSpy = vi.spyOn(dates, 'setValue');\n  const hideSpy = vi.spyOn(display, 'hide');\n  const clearSpy = vi.spyOn(dates, 'clear');\n  const one = newDate().manipulate(1, Unit.date);\n  const two = newDate().manipulate(2, Unit.date);\n\n  let shouldBe = newDate();\n  shouldBe.date = 21;\n\n  element.dataset.day = `${shouldBe.date}`;\n  store.options.dateRange = true;\n\n  //test zero length selection\n  actions.do(event, ActionTypes.selectDay);\n  expect(setValueSpy).toHaveBeenCalled();\n  expect(dates.picked).toEqual([shouldBe]);\n  expect(hideSpy).not.toHaveBeenCalled();\n\n  dates.clear();\n\n  //test already have two selected\n  dates.setValue(one, 0);\n  dates.setValue(two, 1);\n  expect(dates.picked).toEqual([one, two]);\n  actions.do(event, ActionTypes.selectDay);\n  expect(clearSpy).toHaveBeenCalled();\n  expect(setValueSpy).toHaveBeenCalled();\n  expect(dates.picked).toEqual([shouldBe]);\n\n  dates.clear();\n\n  //test one selected\n  dates.setValue(one, 0);\n  expect(dates.picked).toEqual([one]);\n  actions.do(event, ActionTypes.selectDay);\n  expect(dates.picked).toEqual([one, shouldBe]);\n  expect(setValueSpy).toHaveBeenCalled();\n\n  dates.clear();\n\n  //test one selected and new date is the same\n  element.dataset.date = `${shouldBe.date}`;\n  dates.setValue(shouldBe, 0);\n  expect(dates.picked).toEqual([shouldBe]);\n  actions.do(event, ActionTypes.selectDay);\n  expect(clearSpy).toHaveBeenCalled();\n  expect(setValueSpy).toHaveBeenCalled();\n\n  element.dataset.date = `${shouldBe.date}`;\n\n  dates.clear();\n\n  //test new selected date is before currently selected\n  const before = shouldBe.clone.manipulate(14, Unit.date);\n  dates.add(before);\n  expect(dates.picked).toEqual([before]);\n  actions.do(event, ActionTypes.selectDay);\n  expect(dates.picked).toEqual([shouldBe, before]);\n});\n\ntest('select day - multiple dates', () => {\n  const setValueSpy = vi.spyOn(dates, 'setValue');\n  const hideSpy = vi.spyOn(display, 'hide');\n  const pickedIndexSpy = vi.spyOn(dates, 'pickedIndex');\n  const one = newDate().manipulate(1, Unit.date);\n\n  let shouldBe = newDate();\n  shouldBe.date = 21;\n\n  element.dataset.day = `${shouldBe.date}`;\n  store.options.multipleDates = true;\n\n  //test zero length selection\n  pickedIndexSpy.mockImplementationOnce(() => -1);\n  actions.do(event, ActionTypes.selectDay);\n  expect(setValueSpy).toHaveBeenCalled();\n  expect(dates.picked).toEqual([shouldBe]);\n  expect(hideSpy).not.toHaveBeenCalled();\n\n  //test additional date\n  element.dataset.day = `${one.date}`;\n  pickedIndexSpy.mockImplementationOnce(() => -1);\n  actions.do(event, ActionTypes.selectDay);\n  expect(setValueSpy).toHaveBeenCalled();\n  expect(dates.picked).toEqual([shouldBe, one]);\n  expect(hideSpy).not.toHaveBeenCalled();\n\n  //test removing selected date\n  element.dataset.day = `${one.date}`;\n  pickedIndexSpy.mockImplementationOnce(() => 1);\n  actions.do(event, ActionTypes.selectDay);\n  expect(setValueSpy).toHaveBeenCalled();\n  expect(dates.picked).toEqual([shouldBe]);\n  expect(hideSpy).not.toHaveBeenCalled();\n});\n\ntest('select hour', () => {\n  const setValueSpy = vi.spyOn(dates, 'setValue');\n  const hideSpy = vi.spyOn(display, 'hide');\n  // @ts-ignore\n  const hideOrClockSpy = vi.spyOn(actions, 'hideOrClock');\n  hideOrClockSpy.mockImplementation(vi.fn());\n\n  let shouldBe = newDate();\n  element.dataset.value = `1`;\n  actions.do(event, ActionTypes.selectHour);\n  expect(setValueSpy).toHaveBeenCalled();\n  expect(dates.picked).toEqual([shouldBe]);\n  expect(hideSpy).not.toHaveBeenCalled();\n  expect(hideOrClockSpy).toHaveBeenCalled();\n});\n\ntest('select minute', () => {\n  const setValueSpy = vi.spyOn(dates, 'setValue');\n  const hideSpy = vi.spyOn(display, 'hide');\n  // @ts-ignore\n  const hideOrClockSpy = vi.spyOn(actions, 'hideOrClock');\n  hideOrClockSpy.mockImplementation(vi.fn());\n\n  let shouldBe = newDate();\n  element.dataset.value = `25`;\n  actions.do(event, ActionTypes.selectMinute);\n  expect(setValueSpy).toHaveBeenCalled();\n  expect(dates.picked).toEqual([shouldBe]);\n  expect(hideSpy).not.toHaveBeenCalled();\n  expect(hideOrClockSpy).toHaveBeenCalled();\n});\n\ntest('select second', () => {\n  const setValueSpy = vi.spyOn(dates, 'setValue');\n  const hideSpy = vi.spyOn(display, 'hide');\n  // @ts-ignore\n  const hideOrClockSpy = vi.spyOn(actions, 'hideOrClock');\n  hideOrClockSpy.mockImplementation(vi.fn());\n\n  let shouldBe = newDate();\n  element.dataset.value = `42`;\n  actions.do(event, ActionTypes.selectSecond);\n  expect(setValueSpy).toHaveBeenCalled();\n  expect(dates.picked).toEqual([shouldBe]);\n  expect(hideSpy).not.toHaveBeenCalled();\n  expect(hideOrClockSpy).toHaveBeenCalled();\n});\n\ntest('increment/decrement hour', () => {\n  const setValueSpy = vi.spyOn(dates, 'setValue');\n  const hideSpy = vi.spyOn(display, 'hide');\n  // @ts-ignore\n  const hideOrClockSpy = vi.spyOn(actions, 'hideOrClock');\n  hideOrClockSpy.mockImplementation(vi.fn());\n\n  let shouldBe = newDate();\n  shouldBe.manipulate(1, Unit.hours);\n\n  actions.do(event, ActionTypes.incrementHours);\n  expect(setValueSpy).toHaveBeenCalled();\n  expect(dates.picked).toEqual([shouldBe]);\n  expect(hideSpy).not.toHaveBeenCalled();\n  expect(isValidSpy).toHaveBeenCalled();\n\n  shouldBe.manipulate(-1, Unit.hours);\n  actions.do(event, ActionTypes.decrementHours);\n  expect(setValueSpy).toHaveBeenCalled();\n  expect(dates.picked).toEqual([shouldBe]);\n  expect(hideSpy).not.toHaveBeenCalled();\n  expect(isValidSpy).toHaveBeenCalled();\n});\n\ntest('increment/decrement minute', () => {\n  const setValueSpy = vi.spyOn(dates, 'setValue');\n  const hideSpy = vi.spyOn(display, 'hide');\n  // @ts-ignore\n  const hideOrClockSpy = vi.spyOn(actions, 'hideOrClock');\n  hideOrClockSpy.mockImplementation(vi.fn());\n\n  let shouldBe = newDate();\n  shouldBe.manipulate(1, Unit.minutes);\n\n  actions.do(event, ActionTypes.incrementMinutes);\n  expect(setValueSpy).toHaveBeenCalled();\n  expect(dates.picked).toEqual([shouldBe]);\n  expect(hideSpy).not.toHaveBeenCalled();\n  expect(isValidSpy).toHaveBeenCalled();\n\n  shouldBe.manipulate(-1, Unit.minutes);\n  actions.do(event, ActionTypes.decrementMinutes);\n  expect(setValueSpy).toHaveBeenCalled();\n  expect(dates.picked).toEqual([shouldBe]);\n  expect(hideSpy).not.toHaveBeenCalled();\n  expect(isValidSpy).toHaveBeenCalled();\n});\n\ntest('increment/decrement second', () => {\n  const setValueSpy = vi.spyOn(dates, 'setValue');\n  const hideSpy = vi.spyOn(display, 'hide');\n  // @ts-ignore\n  const hideOrClockSpy = vi.spyOn(actions, 'hideOrClock');\n  hideOrClockSpy.mockImplementation(vi.fn());\n\n  let shouldBe = newDate();\n  shouldBe.manipulate(1, Unit.seconds);\n\n  actions.do(event, ActionTypes.incrementSeconds);\n  expect(setValueSpy).toHaveBeenCalled();\n  expect(dates.picked).toEqual([shouldBe]);\n  expect(hideSpy).not.toHaveBeenCalled();\n  expect(isValidSpy).toHaveBeenCalled();\n\n  shouldBe.manipulate(-1, Unit.seconds);\n  actions.do(event, ActionTypes.decrementSeconds);\n  expect(setValueSpy).toHaveBeenCalled();\n  expect(dates.picked).toEqual([shouldBe]);\n  expect(hideSpy).not.toHaveBeenCalled();\n  expect(isValidSpy).toHaveBeenCalled();\n});\n\ntest('toggleMeridiem', () => {\n  const setValueSpy = vi.spyOn(dates, 'setValue');\n  const hideSpy = vi.spyOn(display, 'hide');\n  // @ts-ignore\n  const hideOrClockSpy = vi.spyOn(actions, 'hideOrClock');\n  hideOrClockSpy.mockImplementation(vi.fn());\n\n  let shouldBe = newDate();\n  dates.add(shouldBe);\n\n  //from PM to AM\n  actions.do(event, ActionTypes.toggleMeridiem);\n  expect(setValueSpy).toHaveBeenCalled();\n  expect(dates.picked).toEqual([shouldBe.manipulate(-12, Unit.hours)]);\n  expect(hideSpy).not.toHaveBeenCalled();\n  expect(isValidSpy).toHaveBeenCalled();\n\n  //from AM to PM\n  actions.do(event, ActionTypes.toggleMeridiem);\n  expect(setValueSpy).toHaveBeenCalled();\n  expect(dates.picked).toEqual([shouldBe.manipulate(12, Unit.hours)]);\n  expect(hideSpy).not.toHaveBeenCalled();\n  expect(isValidSpy).toHaveBeenCalled();\n});\n\ntest('togglePicker', () => {\n  const iconTagSpy = vi.spyOn(display, '_iconTag');\n  const updateCalendarHeaderSpy = vi.spyOn(display, '_updateCalendarHeader');\n  const updateSpy = vi.spyOn(display, '_update');\n  const refreshCurrentViewSpy = vi.spyOn(store, 'refreshCurrentView');\n  const viewUpdateSpy = vi.spyOn(emitters.viewUpdate, 'emit');\n\n  const handleShowClockContainersSpy = vi.spyOn(\n    actions,\n    // @ts-ignore\n    'handleShowClockContainers'\n  );\n  handleShowClockContainersSpy.mockImplementation(vi.fn());\n\n  //toggle date to time\n  element.setAttribute('title', store.options.localization.selectDate);\n  actions.do(event, ActionTypes.togglePicker);\n  expect(iconTagSpy).toHaveBeenCalled();\n  expect(updateCalendarHeaderSpy).toHaveBeenCalled();\n  expect(refreshCurrentViewSpy).toHaveBeenCalled();\n  expect(viewUpdateSpy).toHaveBeenCalled();\n\n  //toggle time to date\n  // @ts-ignore\n  display._hasTime = true;\n  element.setAttribute('title', store.options.localization.selectTime);\n  const dateContainer = document.createElement('div');\n  dateContainer.classList.add(Namespace.css.dateContainer);\n  display.widget.appendChild(dateContainer);\n\n  actions.do(event, ActionTypes.togglePicker);\n  expect(iconTagSpy).toHaveBeenCalled();\n  expect(updateCalendarHeaderSpy).toHaveBeenCalled();\n  expect(refreshCurrentViewSpy).toHaveBeenCalled();\n  expect(viewUpdateSpy).toHaveBeenCalled();\n  expect(handleShowClockContainersSpy).toHaveBeenCalled();\n  expect(updateSpy).toHaveBeenCalled();\n});\n\ntest('handleShowClockContainers', () => {\n  const updateSpy = vi.spyOn(display, '_update');\n  store.currentView = 'calendar';\n\n  const timeContainer = createElementWithClasses(\n    'div',\n    Namespace.css.timeContainer\n  );\n  const clockContainer = createElementWithClasses(\n    'div',\n    Namespace.css.clockContainer\n  );\n  const hourContainer = createElementWithClasses(\n    'div',\n    Namespace.css.hourContainer\n  );\n  const minuteContainer = createElementWithClasses(\n    'div',\n    Namespace.css.minuteContainer\n  );\n  const secondContainer = createElementWithClasses(\n    'div',\n    Namespace.css.secondContainer\n  );\n  timeContainer.appendChild(clockContainer);\n  timeContainer.appendChild(hourContainer);\n  timeContainer.appendChild(minuteContainer);\n  timeContainer.appendChild(secondContainer);\n  display.widget.appendChild(timeContainer);\n\n  //test no time\n  // @ts-ignore\n  display._hasTime = false;\n  expect(() => actions.do(event, ActionTypes.showClock)).toThrow(\n    'TD: Cannot show clock containers when time is disabled.'\n  );\n\n  // @ts-ignore\n  display._hasTime = true;\n\n  //test clock\n  actions.do(event, ActionTypes.showClock);\n  expect(updateSpy).toHaveBeenCalled();\n  expect(clockContainer.style.display).toBe('grid');\n  expect(hourContainer.style.display).toBe('none');\n\n  //test hour\n  actions.do(event, ActionTypes.showHours);\n  expect(updateSpy).toHaveBeenCalled();\n  expect(clockContainer.style.display).toBe('none');\n  expect(hourContainer.style.display).toBe('grid');\n\n  //test minute\n  actions.do(event, ActionTypes.showMinutes);\n  expect(updateSpy).toHaveBeenCalled();\n  expect(clockContainer.style.display).toBe('none');\n  expect(minuteContainer.style.display).toBe('grid');\n\n  //test seconds\n  actions.do(event, ActionTypes.showSeconds);\n  expect(updateSpy).toHaveBeenCalled();\n  expect(clockContainer.style.display).toBe('none');\n  expect(secondContainer.style.display).toBe('grid');\n});\n\ntest('clear', () => {\n  const updateCalendarHeaderSpy = vi.spyOn(display, '_updateCalendarHeader');\n  const setValueSpy = vi.spyOn(dates, 'setValue');\n\n  dates.add(newDate());\n  expect(dates.picked).toEqual([newDate()]);\n\n  actions.do(event, ActionTypes.clear);\n  expect(updateCalendarHeaderSpy).toHaveBeenCalled();\n  expect(setValueSpy).toHaveBeenCalled();\n  expect(dates.picked).toEqual([]);\n});\n\ntest('close', () => {\n  const hideSpy = vi.spyOn(display, 'hide');\n\n  actions.do(event, ActionTypes.close);\n  expect(hideSpy).toHaveBeenCalled();\n});\n\ntest('today', () => {\n  const setValueSpy = vi.spyOn(dates, 'setValue');\n  const viewUpdateSpy = vi.spyOn(emitters.updateViewDate, 'emit');\n\n  expect(dates.picked).toEqual([]);\n  actions.do(event, ActionTypes.today);\n  expect(setValueSpy).toHaveBeenCalled();\n  expect(viewUpdateSpy).toHaveBeenCalled();\n});\n\ntest('hideOrClock', () => {\n  const hideSpy = vi.spyOn(display, 'hide');\n  // @ts-ignore\n  const method = actions.hideOrClock.bind(actions);\n  const doSpy = vi.spyOn(actions, 'do');\n  doSpy.mockImplementation(vi.fn());\n\n  //test showClock;\n  method(event);\n  expect(doSpy).toHaveBeenCalled();\n\n  //test should hide\n  // @ts-ignore\n  store.isTwelveHour = false;\n  store.options.display.components.minutes = false;\n  method(event);\n  expect(hideSpy).toHaveBeenCalled();\n});\n\ntest('action emitter', () => {\n  const actionSpy = vi.spyOn(emitters.action, 'emit');\n  const doSpy = vi.spyOn(actions, 'do');\n  doSpy.mockImplementation(vi.fn());\n\n  emitters.action.emit({ e: {}, action: ActionTypes.close });\n  expect(actionSpy).toHaveBeenCalled();\n});\n"
  },
  {
    "path": "test/dates.test.ts",
    "content": "import {\n  loadFixtures,\n  newDate,\n  newDateMinute,\n  newDateStringMinute,\n  reset,\n  secondaryDate,\n  store,\n} from './test-utilities';\nimport { afterAll, beforeAll, beforeEach, expect, test, vi } from 'vitest';\nimport Dates from '../src/js/dates';\nimport { DateTime, Unit } from '../src/js/datetime';\nimport { OptionConverter } from '../src/js/utilities/optionConverter';\nimport Validation from '../src/js/validation';\nimport { FixtureValidation } from './fixtures/validation.fixture';\nimport { EventEmitters } from '../src/js/utilities/event-emitter';\n\nlet dates: Dates;\n\nlet emitters: EventEmitters;\nlet validation: Validation;\nconst dateConversionSpy = vi.spyOn(OptionConverter, 'dateConversion');\n\nlet setValueSpy;\nlet parseInputSpy;\nlet triggerEventSpy;\nlet updateDisplaySpy;\nlet formatInputSpy;\nlet setValueNullSpy;\nlet updateInputSpy;\nlet isValidSpy;\nlet dateRangeIsValidSpy;\nlet updateViewDateSpy;\n\nconst setupSpies = () => {\n  // @ts-ignore\n  validation = dates.validation;\n  // @ts-ignore\n  emitters = dates._eventEmitters;\n\n  triggerEventSpy = vi.spyOn(emitters.triggerEvent, 'emit');\n  updateDisplaySpy = vi.spyOn(emitters.updateDisplay, 'emit');\n  updateViewDateSpy = vi.spyOn(emitters.updateViewDate, 'emit');\n\n  isValidSpy = vi.spyOn(validation, 'isValid');\n  dateRangeIsValidSpy = vi.spyOn(validation, 'dateRangeIsValid');\n\n  setValueSpy = vi.spyOn(dates, 'setValue');\n  parseInputSpy = vi.spyOn(dates, 'parseInput');\n  formatInputSpy = vi.spyOn(dates, 'formatInput');\n  // @ts-ignore\n  setValueNullSpy = vi.spyOn(dates, '_setValueNull');\n  updateInputSpy = vi.spyOn(dates, 'updateInput');\n};\n\nbeforeAll(() => {\n  loadFixtures({ Validation: FixtureValidation });\n  reset();\n});\n\nbeforeEach(() => {\n  reset();\n  dates = new Dates();\n  setupSpies();\n});\n\nafterAll(() => {\n  vi.restoreAllMocks();\n});\n\ntest('Picked getter returns array', () => {\n  expect(dates.picked instanceof Array<DateTime>).toBe(true);\n  expect(dates.picked.length).toBe(0);\n\n  dates.add(newDate());\n\n  expect(dates.picked.length).toBe(1);\n  expect(dates.picked).toEqual([newDate()]);\n});\n\ntest('lastPicked to return last selected date', () => {\n  expect(dates.lastPickedIndex).toBe(0);\n\n  dates.add(new DateTime());\n  dates.add(newDate());\n\n  expect(dates.lastPicked.valueOf()).toBe(newDate().valueOf());\n  expect(dates.lastPickedIndex).toBe(1);\n});\n\ntest('formatInput', () => {\n  expect(dates.formatInput(undefined)).toBe('');\n\n  expect(dates.formatInput(newDate())).toBe(newDateStringMinute);\n});\n\ntest('parseInput', () => {\n  //by default this function just calls the option converter which does way\n  //too much for this unit test, so we'll just verify that the function can be called\n  //with undefined and string. Probably should just hide this from the coverage.\n\n  //test undefined\n  dateConversionSpy.mockImplementationOnce(() => null);\n  expect(dates.parseInput(undefined)).toBe(null);\n  expect(dateConversionSpy).toHaveBeenCalledTimes(1);\n\n  dateConversionSpy.mockImplementationOnce(() => newDateMinute());\n  expect(dates.parseInput(newDateStringMinute).toISOString()).toBe(\n    newDateMinute().toISOString()\n  );\n  expect(dateConversionSpy).toHaveBeenCalledTimes(2);\n});\n\ntest('setFromInput', () => {\n  dates.add(newDate());\n  expect(dates.picked).toEqual([newDate()]);\n\n  //test clearing the selected dates\n\n  setValueSpy.mockImplementationOnce(() => dates.clear());\n  dates.setFromInput(undefined);\n  expect(dates.picked).toEqual([]);\n  expect(setValueSpy).toHaveBeenCalledTimes(1);\n  dates.clear();\n\n  //test setting date from string\n  setValueSpy.mockImplementationOnce(() => dates.add(newDateMinute()));\n  parseInputSpy.mockImplementationOnce(() => newDateMinute());\n  dates.setFromInput(newDateStringMinute);\n  expect(dates.picked).toEqual([newDateMinute()]);\n  expect(parseInputSpy).toHaveBeenCalledTimes(1);\n  expect(setValueSpy).toHaveBeenCalledTimes(2);\n});\n\ntest('isPicked', () => {\n  //test invalid date\n  // @ts-ignore\n  expect(dates.isPicked('foo')).toBe(false);\n\n  //test unselected date\n  expect(dates.isPicked(newDate())).toBe(false);\n\n  //test selected date\n  dates.add(newDate());\n  expect(dates.isPicked(newDate())).toBe(true);\n  dates.clear();\n\n  //test unselected date\n  expect(dates.isPicked(newDate(), Unit.date)).toBe(false);\n\n  //test selected date\n  dates.add(newDate());\n  expect(dates.isPicked(newDate(), Unit.date)).toBe(true);\n});\n\ntest('pickedIndex', () => {\n  //test invalid date\n  // @ts-ignore\n  expect(dates.pickedIndex('foo')).toBe(-1);\n\n  //test unselected date\n  expect(dates.pickedIndex(newDate())).toBe(-1);\n\n  //test selected date\n  dates.add(newDate());\n  expect(dates.pickedIndex(newDate())).toBe(+0);\n  dates.clear();\n\n  //test unselected date\n  expect(dates.pickedIndex(newDate(), Unit.date)).toBe(-1);\n\n  //test selected date\n  dates.add(newDate());\n  expect(dates.pickedIndex(newDate(), Unit.date)).toBe(+0);\n});\n\ntest('clear', () => {\n  expect(store.unset).toBe(undefined);\n\n  //add a date to confirm clear works\n  dates.add(newDate());\n  expect(dates.picked).toEqual([newDate()]);\n\n  //test clear\n  dates.clear();\n  //change event should fire\n  expect(triggerEventSpy).toHaveBeenCalled();\n  //selected dates should be empty\n  expect(dates.picked).toEqual([]);\n  //updateDisplay should fire\n  expect(updateDisplaySpy).toHaveBeenCalled();\n\n  //reset to test clearing input field\n  dates.add(newDate());\n  expect(dates.picked).toEqual([newDate()]);\n  store.input = document.createElement('input');\n  store.input.value = 'foo';\n  expect(store.input.value).toBe('foo');\n\n  dates.clear();\n  expect(triggerEventSpy).toHaveBeenCalled();\n  expect(dates.picked).toEqual([]);\n  expect(updateDisplaySpy).toHaveBeenCalled();\n  expect(store.input.value).toBe('');\n});\n\ntest('getStartEndYear', () => {\n  expect(Dates.getStartEndYear(100, 2023)).toEqual([2000, 2090, 2020]);\n  expect(Dates.getStartEndYear(10, 2023)).toEqual([2020, 2029, 2023]);\n});\n\ntest('updateInput', () => {\n  //test no input\n  dates.updateInput(undefined);\n\n  store.input = document.createElement('input');\n  formatInputSpy.mockImplementation(() => newDateStringMinute);\n\n  //test input\n  dates.updateInput(newDate());\n  expect(store.input.value).toBe('03/14/2023 1:25 PM');\n  expect(formatInputSpy).toHaveBeenCalled();\n\n  //test multipleDates\n  store.options.multipleDates = true;\n  dates.add(newDate());\n  dates.add(newDate());\n\n  dates.updateInput();\n  expect(store.input.value).toBe('03/14/2023 1:25 PM; 03/14/2023 1:25 PM');\n  expect(formatInputSpy).toHaveBeenCalled();\n});\n\ntest('setValue', () => {\n  setValueNullSpy.mockImplementation(vi.fn());\n  updateInputSpy.mockImplementation(vi.fn());\n  //test null value and no index\n  store.unset = true;\n  dates.setValue();\n  expect(setValueNullSpy).toHaveBeenCalled();\n\n  //test getting last picked to clear\n  dates.add(newDate());\n  store.unset = false;\n  dates.setValue();\n  dates.clear();\n\n  //test old date is the same\n  dates.add(newDate());\n  store.unset = false;\n  dates.setValue(newDate(), 0);\n  expect(updateInputSpy).toHaveBeenCalled();\n\n  //test valid date with stepping\n  isValidSpy.mockImplementationOnce(() => true);\n  dateRangeIsValidSpy.mockImplementationOnce(() => true);\n\n  store.options.stepping = 5;\n  dates.setValue(newDate());\n  expect(isValidSpy).toHaveBeenCalled();\n  expect(dateRangeIsValidSpy).toHaveBeenCalled();\n  expect(dates.picked).toEqual([newDate().startOf(Unit.minutes)]);\n  expect(updateViewDateSpy).toHaveBeenCalled();\n  expect(triggerEventSpy).toHaveBeenCalled();\n  expect(store.unset).toBe(false);\n  store.options.stepping = 1;\n\n  //test keep invalid\n  store.options.keepInvalid = true;\n  isValidSpy.mockImplementationOnce(() => false);\n  dates.setValue(newDate());\n  expect(dates.picked).toEqual([newDate()]);\n  store.options.keepInvalid = false;\n  expect(updateViewDateSpy).toHaveBeenCalled();\n  expect(triggerEventSpy).toHaveBeenCalled();\n});\n\ntest('_setValueNull', () => {\n  // @ts-ignore\n  const method = dates._setValueNull.bind(dates);\n  updateInputSpy.mockImplementation(vi.fn());\n\n  //test clear with no options\n  dates.add(newDate());\n  method();\n  expect(store.unset).toBe(true);\n  expect(dates.picked).toEqual([]);\n  expect(triggerEventSpy).toHaveBeenCalled();\n\n  //test clear with multiple dates and one selection\n  store.options.multipleDates = true;\n  dates.add(newDate());\n  method();\n  expect(store.unset).toBe(true);\n  expect(dates.picked).toEqual([]);\n  expect(triggerEventSpy).toHaveBeenCalled();\n\n  //test clear with multiple dates, two dates but passing isClear\n  dates.add(newDate());\n  dates.add(newDate());\n  method(true);\n  expect(store.unset).toBe(true);\n  expect(dates.picked).toEqual([]);\n  expect(triggerEventSpy).toHaveBeenCalled();\n\n  //test clearing given index\n  dates.add(newDate());\n  dates.add(secondaryDate());\n  method(false, 0);\n  expect(store.unset).toBe(true);\n  expect(dates.picked).toEqual([secondaryDate()]);\n  expect(triggerEventSpy).toHaveBeenCalled();\n});\n"
  },
  {
    "path": "test/datetime.test.ts",
    "content": "/* eslint-disable  @typescript-eslint/ban-ts-comment */\nimport {\n  defaultLocalization,\n  newDate,\n  newDateStringMinute,\n} from './test-utilities';\nimport { expect, test } from 'vitest';\nimport {\n  DateTime,\n  getFormatByUnit,\n  guessHourCycle,\n  Unit,\n} from '../src/js/datetime';\n\ntest('getFormatByUnit', () => {\n  expect(getFormatByUnit(Unit.date)).toEqual({ dateStyle: 'short' });\n  expect(getFormatByUnit(Unit.month)).toEqual({\n    month: 'numeric',\n    year: 'numeric',\n  });\n  expect(getFormatByUnit(Unit.year)).toEqual({ year: 'numeric' });\n});\n\ntest('Can create with string (ctor)', () => {\n  const dt = newDate();\n  expect(dt.month).toBe(2); //minus 1 because javascript 🙄\n  expect(dt.date).toBe(14);\n  expect(dt.year).toBe(2023);\n});\n\ntest('Localization is stored', () => {\n  const dt = newDate();\n  expect(dt.localization).toEqual(defaultLocalization());\n  const es = {\n    locale: 'es',\n    dateFormats: {\n      LT: 'H:mm',\n      LTS: 'H:mm:ss',\n      L: 'dd/MM/yyyy',\n      LL: 'd [de] MMMM [de] yyyy',\n      LLL: 'd [de] MMMM [de] yyyy H:mm',\n      LLLL: 'dddd, d [de] MMMM [de] yyyy H:mm',\n    },\n    ordinal: (n) => `${n}º`,\n    format: 'L LT',\n  };\n  dt.setLocalization(es);\n  expect(dt.localization).toEqual(es);\n\n  //check setting just the locale\n  dt.localization = null;\n\n  const fr = defaultLocalization();\n  fr.locale = 'fr';\n  dt.setLocale('fr');\n  expect(dt.localization).toEqual(fr);\n});\n\ntest('Can convert from a Date object', () => {\n  const d = new Date(2022, 11, 14);\n  const dt = DateTime.convert(d);\n\n  expect(dt.valueOf()).toBe(d.valueOf());\n});\n\ntest('Convert fails with no parameter', () => {\n  expect(() => DateTime.convert(null)).toThrow('A date is required');\n});\n\ntest('Can create with string', () => {\n  expect(() => DateTime.fromString('12/31/2022', null)).toThrow(/TD/);\n  const localization = defaultLocalization();\n  localization.format = localization.dateFormats.L;\n  const dt = DateTime.fromString('12/31/2022', localization);\n  expect(dt.month).toBe(12 - 1); //minus 1 because javascript 🙄\n  expect(dt.date).toBe(31);\n  expect(dt.year).toBe(2022);\n});\n\ntest('Can create clone', () => {\n  const dt = new DateTime(2022, 11, 14);\n  const d = dt.clone;\n\n  expect(dt.valueOf()).toBe(d.valueOf());\n});\nnew Date();\ntest('startOf', () => {\n  let dt = new DateTime(2022, 11, 14, 13, 42, 59, 500);\n\n  //12/31/2022 13:42:59:0\n  dt = dt.startOf(Unit.seconds);\n  expect(dt.getMilliseconds()).toBe(0);\n\n  dt = dt.startOf(Unit.minutes);\n  expect(dt.valueOf()).toBe(new Date(2022, 11, 14, 13, 42, 0).valueOf());\n\n  dt = dt.startOf(Unit.hours);\n  expect(dt.valueOf()).toBe(new Date(2022, 11, 14, 13, 0, 0).valueOf());\n\n  dt = dt.startOf(Unit.date);\n  expect(dt.valueOf()).toBe(new Date(2022, 11, 14, 0, 0, 0).valueOf());\n\n  dt = dt.startOf('weekDay');\n  expect(dt.valueOf()).toBe(new Date(2022, 11, 11, 0, 0, 0).valueOf());\n\n  dt = dt.startOf(Unit.month);\n  expect(dt.valueOf()).toBe(new Date(2022, 11, 1, 0, 0, 0).valueOf());\n\n  dt = dt.startOf(Unit.year);\n  expect(dt.valueOf()).toBe(new DateTime(2022, 0, 1, 0, 0, 0).valueOf());\n\n  // @ts-ignore\n  expect(() => dt.startOf('foo')).toThrow(\"Unit 'foo' is not valid\");\n\n  //skip the process of the start of the week is the same weekday\n  dt = new DateTime(2022, 11, 25, 0, 0, 0);\n  dt = dt.startOf('weekDay');\n  expect(dt.valueOf()).toBe(new Date(2022, 11, 25, 0, 0, 0).valueOf());\n\n  //check if weekday works when the week doesn't start on Sunday\n  dt = new DateTime(2022, 11, 18, 0, 0, 0);\n  dt = dt.startOf('weekDay', 1);\n  expect(dt.valueOf()).toBe(new Date(2022, 11, 12, 0, 0, 0).valueOf());\n});\n\ntest('endOf', () => {\n  let dt = new DateTime(2022, 11, 14, 13, 42, 59, 50);\n\n  //12/31/2022 13:42:59:0\n  dt = dt.endOf(Unit.seconds);\n  expect(dt.getMilliseconds()).toBe(999);\n\n  dt = dt.endOf(Unit.minutes);\n  expect(dt.valueOf()).toBe(new Date(2022, 11, 14, 13, 42, 59, 999).valueOf());\n\n  dt = dt.endOf(Unit.hours);\n  expect(dt.valueOf()).toBe(new Date(2022, 11, 14, 13, 59, 59, 999).valueOf());\n\n  dt = dt.endOf(Unit.date);\n  expect(dt.valueOf()).toBe(new Date(2022, 11, 14, 23, 59, 59, 999).valueOf());\n\n  dt = dt.endOf('weekDay');\n  expect(dt.valueOf()).toBe(new Date(2022, 11, 17, 23, 59, 59, 999).valueOf());\n\n  dt = dt.endOf(Unit.month);\n  expect(dt.valueOf()).toBe(new Date(2022, 11, 31, 23, 59, 59, 999).valueOf());\n\n  dt = dt.endOf(Unit.year);\n  expect(dt.valueOf()).toBe(new Date(2022, 11, 31, 23, 59, 59, 999).valueOf());\n\n  // @ts-ignore\n  expect(() => dt.endOf('foo')).toThrow(\"Unit 'foo' is not valid\");\n\n  //skip the process if the end of the week is the same weekday\n  dt = new DateTime(2022, 11, 17, 0, 0, 0);\n  dt = dt.endOf('weekDay');\n  expect(dt.valueOf()).toBe(new Date(2022, 11, 17, 23, 59, 59, 999).valueOf());\n\n  //check if weekday works when the week doesn't start on Sunday\n  dt = new DateTime(2022, 11, 14, 0, 0, 0);\n  dt = dt.endOf('weekDay', 1);\n  expect(dt.valueOf()).toBe(new Date(2022, 11, 18, 23, 59, 59, 999).valueOf());\n});\n\ntest('manipulate throws an error with invalid part', () => {\n  // @ts-ignore\n  expect(() => newDate().manipulate(1, 'foo')).toThrow(\n    \"Unit 'foo' is not valid\"\n  );\n});\n\ntest('Format should return formatted date', () => {\n  const dt = new DateTime(2022, 11, 17, 0, 0, 0);\n\n  expect(dt.format({ dateStyle: 'full' })).toBe('Saturday, December 17, 2022');\n});\n\ntest('isBefore', () => {\n  const dt1 = new DateTime(2022, 11, 16, 0, 0, 0);\n  const dt2 = new DateTime(2022, 11, 17, 0, 0, 0);\n\n  expect(dt1.isBefore(dt2)).toBe(true);\n\n  expect(dt1.isBefore(dt2, Unit.date)).toBe(true);\n\n  // @ts-ignore\n  expect(() => dt1.isBefore(dt2, 'foo')).toThrow(\"Unit 'foo' is not valid\");\n\n  //compare date is not valid\n  expect(dt1.isBefore(undefined, Unit.date)).toBe(false);\n});\n\ntest('isAfter', () => {\n  const dt1 = new DateTime(2022, 11, 16, 0, 0, 0);\n  const dt2 = new DateTime(2022, 11, 17, 0, 0, 0);\n\n  expect(dt2.isAfter(dt1)).toBe(true);\n\n  expect(dt2.isAfter(dt1, Unit.date)).toBe(true);\n\n  // @ts-ignore\n  expect(() => dt2.isAfter(dt1, 'foo')).toThrow(\"Unit 'foo' is not valid\");\n\n  //compare date is not valid\n  expect(dt1.isAfter(undefined, Unit.date)).toBe(false);\n});\n\ntest('isSame', () => {\n  const dt1 = new DateTime(2022, 11, 16, 0, 0, 0);\n  const dt2 = new DateTime(2022, 11, 16, 0, 0, 0);\n\n  expect(dt1.isSame(dt2)).toBe(true);\n\n  expect(dt1.isSame(dt2, Unit.date)).toBe(true);\n\n  //if the compare date is invalid\n  expect(dt1.isSame(undefined, Unit.date)).toBe(false);\n\n  // @ts-ignore\n  expect(() => dt1.isSame(dt2, 'foo')).toThrow(\"Unit 'foo' is not valid\");\n});\n\n//todo this is missing some conditions: https://github.com/moment/moment/blob/master/src/test/moment/is_between.js\n//but it hurts my brain\ntest('isBetween', () => {\n  const dt1 = new DateTime(2022, 11, 16, 0, 0, 0);\n  const left = new DateTime(2022, 11, 15, 0, 0, 0);\n  const right = new DateTime(2022, 11, 17, 0, 0, 0);\n\n  expect(dt1.isBetween(left, right)).toBe(true);\n\n  expect(dt1.isBetween(left, right, Unit.date)).toBe(true);\n\n  // @ts-ignore\n  expect(() => dt1.isBetween(left, right, 'foo')).toThrow(\n    \"Unit 'foo' is not valid\"\n  );\n\n  const dateTime = new DateTime('2016-10-30');\n\n  expect(\n    dateTime.isBetween(dateTime, new DateTime('2016-12-30'), undefined, '()')\n  ).toBe(false);\n  expect(dateTime.isBetween(dateTime, dateTime, undefined, '[]')).toBe(true);\n  expect(\n    dateTime.isBetween(new DateTime('2016-01-01'), dateTime, undefined, '(]')\n  ).toBe(true);\n  expect(\n    dateTime.isBetween(dateTime, new DateTime('2016-12-30'), undefined, '[)')\n  ).toBe(true);\n\n  //compare date is not valid\n  expect(dt1.isBetween(undefined, undefined, Unit.date)).toBe(false);\n\n  //Unit is not valid\n  // @ts-ignore\n  expect(() => dt1.isBetween(dateTime, newDate(), 'foo')).toThrow(\n    \"Unit 'foo' is not valid\"\n  );\n});\n\ntest('Getters/Setters', () => {\n  const dt = new DateTime(2022, 11, 17, 0, 0, 0);\n\n  dt.seconds = 4;\n\n  expect(dt.seconds).toBe(4);\n  expect(dt.secondsFormatted).toBe('04');\n\n  dt.minutes = 4;\n\n  expect(dt.minutes).toBe(4);\n  expect(dt.minutesFormatted).toBe('04');\n\n  dt.hours = 4;\n\n  expect(dt.hours).toBe(4);\n  expect(dt.getHoursFormatted()).toBe('04');\n\n  dt.hours = 14;\n\n  expect(dt.hours).toBe(14);\n  expect(dt.getHoursFormatted('h24')).toBe('14');\n  expect(dt.getHoursFormatted()).toBe('02');\n\n  dt.hours = 0;\n  expect(dt.getHoursFormatted('h11')).toBe('00');\n  expect(dt.getHoursFormatted('h12')).toBe('12');\n  expect(dt.getHoursFormatted('h23')).toBe('00');\n  expect(dt.getHoursFormatted('h24')).toBe('24');\n\n  dt.hours = 23;\n  expect(dt.getHoursFormatted('h11')).toBe('11');\n  expect(dt.getHoursFormatted('h12')).toBe('11');\n  expect(dt.getHoursFormatted('h23')).toBe('23');\n  expect(dt.getHoursFormatted('h24')).toBe('23');\n\n  dt.date = 4;\n\n  expect(dt.date).toBe(4);\n  expect(dt.dateFormatted).toBe('04');\n\n  dt.month = 4;\n\n  expect(dt.month).toBe(4);\n  expect(dt.monthFormatted).toBe('05');\n\n  //test date bubbling. JS doesn't handle a date of May 31st => June 31st but DateTime does.\n  dt.date = 31;\n  dt.month = 5;\n  expect(dt.monthFormatted).toBe('06');\n\n  dt.year = 2023;\n\n  expect(dt.year).toBe(2023);\n\n  expect(dt.week).toBe(26);\n\n  dt.year = 2004;\n\n  expect(dt.weeksInWeekYear()).toBe(53);\n\n  dt.year = 2017;\n\n  expect(dt.weeksInWeekYear()).toBe(52);\n\n  dt.year = 2020;\n\n  expect(dt.weeksInWeekYear()).toBe(53);\n\n  dt.year = 2000;\n  expect(dt.isLeapYear).toBe(true);\n  expect(dt.week).toBe(26);\n\n  dt.year = 2024;\n  expect(dt.isLeapYear).toBe(true);\n\n  dt.year = 2023;\n  expect(dt.isLeapYear).toBe(false);\n\n  dt.year = 2026;\n  expect(dt.weeksInWeekYear()).toBe(53);\n\n  expect(dt.meridiem()).toBe('PM');\n});\n\ntest('Guess hour cycle', () => {\n  // @ts-ignore\n  let guess = guessHourCycle();\n  expect(guess).toBe('h12');\n\n  guess = guessHourCycle('en-US');\n  expect(guess).toBe('h12');\n\n  guess = guessHourCycle('en-GB');\n  expect(guess).toBe('h23');\n\n  guess = guessHourCycle('ar-IQ');\n  expect(guess).toBe('h12');\n\n  guess = guessHourCycle('sv-SE');\n  expect(guess).toBe('h23');\n});\n\ntest('Get ALl Months', () => {\n  // @ts-ignore\n  const months = newDate().getAllMonths();\n  expect(months).toEqual([\n    'January',\n    'February',\n    'March',\n    'April',\n    'May',\n    'June',\n    'July',\n    'August',\n    'September',\n    'October',\n    'November',\n    'December',\n  ]);\n});\n\ntest('replace tokens', () => {\n  const dateTime = newDate();\n\n  // @ts-ignore\n  const replaceTokens = dateTime.replaceTokens;\n\n  expect(replaceTokens('hi LTS', 'LTS')).toBe(\n    `hi ${defaultLocalization().dateFormats.LTS}`\n  );\n\n  expect(replaceTokens('LLLLL', defaultLocalization().dateFormats)).toBe(\n    `dddd, MMMM d, yyyy h:mm TMM/dd/yyyy`\n  );\n});\n\ntest('parseTwoDigitYear', () => {\n  const dateTime = newDate();\n  // @ts-ignore\n  let parsed = dateTime.parseTwoDigitYear(70);\n\n  expect(parsed).toBe(1970);\n\n  // @ts-ignore\n  parsed = dateTime.parseTwoDigitYear(23);\n\n  expect(parsed).toBe(2023);\n});\n\ntest('meridiemMatch', () => {\n  const dateTime = newDate();\n  // @ts-ignore\n  let match = dateTime.meridiemMatch('AM');\n\n  expect(match).toBe(false);\n\n  // @ts-ignore\n  match = dateTime.meridiemMatch('PM');\n\n  expect(match).toBe(true);\n});\n\ntest('expressions', () => {\n  const dateTime = newDate();\n  // @ts-ignore\n  const e = { ...dateTime.expressions };\n  // @ts-ignore\n  const matchWord = dateTime.matchWord;\n  // @ts-ignore\n  const match2 = dateTime.match2;\n  // @ts-ignore\n  const match3 = dateTime.match3;\n  // @ts-ignore\n  const match4 = dateTime.match4;\n  // @ts-ignore\n  const match1to2 = dateTime.match1to2;\n  // @ts-ignore\n  const matchSigned = dateTime.matchSigned;\n\n  const o: any = {};\n\n  //#region meridiem\n  e.t.parser(o, 'AM');\n\n  expect(o.afternoon).toBe(false);\n\n  e.t.parser(o, 'pm');\n\n  expect(o.afternoon).toBe(true);\n\n  e.T.parser(o, 'AM');\n\n  expect(o.afternoon).toBe(false);\n\n  e.T.parser(o, 'pm');\n\n  expect(o.afternoon).toBe(true);\n\n  //#endregion\n\n  expect(e.fff.pattern).toBe(match3);\n\n  e.fff.parser(o, 42);\n\n  expect(o.milliseconds).toBe(42);\n\n  expect(e.s.pattern).toBe(match1to2);\n\n  e.s.parser(o, 5);\n\n  expect(o.seconds).toBe(5);\n\n  expect(e.ss.pattern).toBe(match1to2);\n\n  e.ss.parser(o, 6);\n\n  expect(o.seconds).toBe(6);\n\n  expect(e.m.pattern).toBe(match1to2);\n\n  e.m.parser(o, 7);\n\n  expect(o.minutes).toBe(7);\n\n  expect(e.mm.pattern).toBe(match1to2);\n\n  e.mm.parser(o, 10);\n\n  expect(o.minutes).toBe(10);\n\n  expect(e.h.pattern).toBe(match1to2);\n\n  e.h.parser(o, 11);\n\n  expect(o.hours).toBe(11);\n\n  expect(e.hh.pattern).toBe(match1to2);\n\n  e.hh.parser(o, 12);\n\n  expect(o.hours).toBe(12);\n\n  expect(e.HH.pattern).toBe(match1to2);\n\n  e.HH.parser(o, 13);\n\n  expect(o.hours).toBe(13);\n\n  expect(e.HH.pattern).toBe(match1to2);\n\n  e.HH.parser(o, 14);\n\n  expect(o.hours).toBe(14);\n\n  expect(e.d.pattern).toBe(match1to2);\n\n  e.d.parser(o, 15);\n\n  expect(o.day).toBe(15);\n\n  expect(e.dd.pattern).toBe(match2);\n\n  e.dd.parser(o, 16);\n\n  expect(o.day).toBe(16);\n\n  expect(e.Do.pattern).toBe(matchWord);\n\n  e.Do.parser(o, '1st');\n\n  expect(o.day).toBe(1);\n\n  dateTime.localization.ordinal = undefined;\n\n  e.Do.parser(o, '1st');\n\n  expect(o.day).toBe(1);\n\n  dateTime.localization.ordinal = defaultLocalization().ordinal;\n\n  //#region Months\n\n  expect(e.M.pattern).toBe(match1to2);\n\n  e.M.parser(o, 5);\n\n  expect(o.month).toBe(5);\n\n  expect(e.MM.pattern).toBe(match2);\n\n  e.MM.parser(o, 7);\n\n  expect(o.month).toBe(7);\n\n  expect(e.MMM.pattern).toBe(matchWord);\n\n  e.MMM.parser(o, 'Jan');\n\n  expect(o.month).toBe(1);\n\n  expect(e.MMMM.pattern).toBe(matchWord);\n\n  e.MMMM.parser(o, 'January');\n\n  expect(o.month).toBe(1);\n\n  //#endregion\n\n  //#region Year\n\n  expect(e.y.pattern).toBe(matchSigned);\n\n  e.y.parser(o, 2000);\n\n  expect(o.year).toBe(2000);\n\n  expect(e.yy.pattern).toBe(match2);\n\n  e.yy.parser(o, 20);\n\n  expect(o.year).toBe(2020);\n\n  expect(e.yyyy.pattern).toBe(match4);\n\n  e.yyyy.parser(o, 2023);\n\n  expect(o.year).toBe(2023);\n\n  //#endregion\n});\n\ntest('correctHours', () => {\n  const dateTime = newDate();\n\n  // @ts-ignore\n  const correctHours = dateTime.correctHours;\n\n  const o = {\n    afternoon: true,\n    hours: 8,\n  };\n\n  correctHours(o);\n\n  expect(o.hours).toBe(20);\n  expect(o.afternoon).toBe(undefined);\n\n  o.hours = 12;\n  o.afternoon = false;\n\n  correctHours(o);\n\n  expect(o.hours).toBe(0);\n  expect(o.afternoon).toBe(undefined);\n});\n\ntest('format', () => {\n  const dateTime = newDate();\n\n  dateTime.localization.hourCycle = 'h11';\n\n  expect(dateTime.format()).toBe(newDateStringMinute);\n\n  expect(dateTime.format('L LT')).toBe(newDateStringMinute);\n\n  dateTime.hours = 10;\n\n  expect(dateTime.format('dddd, MMMM, dd yy h:mm:ss:fff')).toBe(\n    'Tuesday, March, 14 23 10:25:42:500'\n  );\n\n  expect(dateTime.format('dd-MMM-yyyy')).toBe('14-Mar-2023');\n\n  //test failure if no format\n  expect(() => DateTime.fromString('', undefined)).toThrow(\n    'TD: Custom Date Format: No format was provided'\n  );\n\n  expect(DateTime.fromString('01-Mar-2023', { format: 'dd-MMM-yyyy' })).toEqual(\n    new DateTime(2023, 3 - 1, 1, 0, 0, 0, 0)\n  );\n\n  //test epoch seconds\n  expect(DateTime.fromString('1678814742', { format: 'X' }).getTime()).toBe(\n    1678814742000\n  );\n\n  //test epoch millisecond\n  expect(DateTime.fromString('1678814742500', { format: 'x' }).getTime()).toBe(\n    1678814742500\n  );\n\n  //test invalid input\n  expect(() => DateTime.fromString('--', { format: 'hjik' })).toThrow(\n    'TD: Custom Date Format: Unable to parse provided input: --, format: hjik'\n  );\n\n  //test no format for defaults\n  const dt2 = newDate();\n  dt2.localization.format = undefined;\n  dt2.localization.hourCycle = undefined;\n  expect(dt2.format()).toBe('03/14/2023, 1:25 PM');\n\n  //test hour cycles\n  const dt3 = newDate();\n  dt3.localization.hourCycle = 'h23';\n  expect(dt3.format('HH')).toBe('13');\n  dt3.localization.hourCycle = 'h11';\n  expect(dt3.format('hh')).toBe('01');\n});\n\ntest('isValid', () => {\n  expect(DateTime.isValid('asdf')).toBe(false);\n  expect(DateTime.isValid(undefined)).toBe(false);\n  expect(DateTime.isValid(newDate())).toBe(true);\n});\n"
  },
  {
    "path": "test/fixtures/dates.fixture.ts",
    "content": "import { vi } from 'vitest';\nimport { DateTime } from '../../src/js/datetime';\nimport { EventEmitters } from '../../src/js/utilities/event-emitter';\nimport { OptionsStore } from '../../src/js/utilities/optionsStore';\nimport Validation from '../../src/js/validation';\n\nexport class FixtureDates {\n  _dates: DateTime[] = [];\n  _eventEmitters: EventEmitters;\n  get lastPicked(): DateTime {\n    return this._dates[this.lastPickedIndex];\n  }\n\n  get lastPickedIndex(): number {\n    if (this._dates.length === 0) return 0;\n    return this._dates.length - 1;\n  }\n\n  optionsStore: OptionsStore;\n\n  get picked(): DateTime[] {\n    return this._dates;\n  }\n\n  validation: Validation;\n\n  add(value) {\n    this._dates.push(value);\n  }\n\n  clear() {\n    this._dates = [];\n  }\n\n  formatInput = vi.fn();\n  isPicked = vi.fn();\n  parseInput = vi.fn();\n  pickedIndex = vi.fn();\n  setFromInput = vi.fn();\n\n  setValue(value, index) {\n    if (!value) this._dates.splice(index, 1);\n    else this._dates[index] = value;\n  }\n\n  updateInput = vi.fn();\n}\n"
  },
  {
    "path": "test/fixtures/display.fixture.ts",
    "content": "import { vi } from 'vitest';\n\nexport class FixtureDisplay {\n  _showMode = vi.fn();\n  _updateCalendarHeader = vi.fn();\n  hide = vi.fn();\n  widget = document.createElement('div');\n\n  _update = vi.fn();\n\n  _iconTag() {\n    const iconSpan = document.createElement('span');\n    iconSpan.innerHTML = 'icon';\n    return iconSpan;\n  }\n\n  _hasTime = true;\n  _hasDate = true;\n\n  get _hasDateAndTime(): boolean {\n    return this._hasDate && this._hasTime;\n  }\n}\n"
  },
  {
    "path": "test/fixtures/eventemitters.fixture.ts",
    "content": "import { vi } from 'vitest';\n\nconst fakeEmitter = () => ({\n  emit: vi.fn(),\n  subscribe: vi.fn(),\n  unsubscribe: vi.fn(),\n  destroy: vi.fn(),\n});\n\nexport class FixtureEventEmitters {\n  triggerEvent = fakeEmitter();\n  viewUpdate = fakeEmitter();\n  updateDisplay = fakeEmitter();\n  action = fakeEmitter();\n  updateViewDate = fakeEmitter();\n\n  destroy = vi.fn();\n}\n"
  },
  {
    "path": "test/fixtures/optionStore.fixture.ts",
    "content": "import { OptionConverter } from '../../src/js/utilities/optionConverter';\nimport DefaultOptions from '../../src/js/utilities/default-options';\nimport { DateTime } from '../../src/js/datetime';\nimport { vi } from 'vitest';\n\nexport class FixtureOptionsStore {\n  options = OptionConverter.deepCopy(DefaultOptions);\n  element: HTMLElement;\n  input: HTMLInputElement;\n  unset: boolean;\n  currentCalendarViewMode = 0;\n  viewDate: DateTime;\n  minimumCalendarViewMode = 0;\n  refreshCurrentView = vi.fn();\n\n  isTwelveHour = true;\n\n  reset() {\n    this.options = OptionConverter.deepCopy(DefaultOptions);\n    this.unset = undefined;\n    this.input = undefined;\n    this.element = undefined;\n    this.currentCalendarViewMode = 0;\n    this.minimumCalendarViewMode = 0;\n    this.options.localization.hourCycle = 'h12';\n  }\n}\n"
  },
  {
    "path": "test/fixtures/serviceLocator.fixture.ts",
    "content": "import { Constructable } from '../../src/js/utilities/service-locator';\n\nexport declare type MockLoad = { [key: string]: Constructable<any> };\n\nexport class FixtureServiceLocator {\n  private cache: Map<string, unknown | symbol> = new Map();\n\n  locate<T>(identifier: Constructable<T>): T {\n    const service = this.cache.get(identifier.name);\n    if (service) return service as T;\n    throw `${identifier.name} Not Mocked`;\n  }\n\n  load(name: string, service: Constructable<any>) {\n    this.cache.set(name, new service());\n  }\n\n  loadEach(toLoad: MockLoad) {\n    Object.entries(toLoad).forEach(([k, v]) => {\n      this.load(k, v);\n    });\n  }\n}\n"
  },
  {
    "path": "test/fixtures/validation.fixture.ts",
    "content": "import { vi } from 'vitest';\n\nexport class FixtureValidation {\n  isValid = vi.fn();\n  dateRangeIsValid = vi.fn();\n}\n"
  },
  {
    "path": "test/tempus-dominus.test.ts",
    "content": "import { beforeEach, expect, test } from 'vitest';\nimport { TempusDominus } from '../src/js/tempus-dominus';\n\nbeforeEach(() => {\n  document.body.innerHTML = `<div class=\"container\">\n<div class=\"row\">\n  <div class=\"col-sm-12\" id=\"htmlTarget\">\n    <label for=\"datetimepicker1Input\" class=\"form-label\">Picker</label>\n    <div\n      class=\"input-group log-event\"\n      id=\"datetimepicker1\"\n      data-td-target-input=\"nearest\"\n      data-td-target-toggle=\"nearest\"\n    >\n      <input\n        id=\"datetimepicker1Input\"\n        type=\"text\"\n        class=\"form-control\"\n        data-td-target=\"#datetimepicker1\"\n      />\n      <span\n        class=\"input-group-text\"\n        data-td-target=\"#datetimepicker1\"\n        data-td-toggle=\"datetimepicker\"\n      >\n        <i class=\"fas fa-calendar\"></i>\n      </span>\n    </div>\n  </div>\n</div>\n</div>\n`;\n});\n\ntest('TD can construct', () => {\n  const element = document.getElementById('datetimepicker1');\n  expect(element).not.toBe(null);\n\n  const td = new TempusDominus(document.getElementById('datetimepicker1'));\n\n  expect(td).not.toBe(null);\n  expect(td instanceof TempusDominus).toBe(true);\n});\n"
  },
  {
    "path": "test/test-import.ts",
    "content": "import { TempusDominus, version, extend } from '../src/js/tempus-dominus';\n//import { localization } from '../src/locales/ru';\nimport * as cdf from '../src/js/plugins/customDateFormat';\n\nextend(cdf, undefined);\n\nconst dp: TempusDominus = new TempusDominus(\n  document.getElementById('datetimepicker1'),\n  {\n    //localization: localization,\n  }\n);\n"
  },
  {
    "path": "test/test-utilities.ts",
    "content": "import { DateTime, Unit } from '../src/js/datetime';\nimport { OptionsStore } from '../src/js/utilities/optionsStore';\nimport DefaultFormatLocalization from '../src/js/utilities/default-format-localization';\nimport { vi } from 'vitest';\nimport {\n  FixtureServiceLocator,\n  MockLoad,\n} from './fixtures/serviceLocator.fixture';\nimport { FixtureOptionsStore } from './fixtures/optionStore.fixture';\nimport { FixtureEventEmitters } from './fixtures/eventemitters.fixture';\n\nconst fixtureServiceLocator = new FixtureServiceLocator();\nfixtureServiceLocator.loadEach({\n  OptionsStore: FixtureOptionsStore,\n  EventEmitters: FixtureEventEmitters,\n});\n\nvi.mock('../src/js/utilities/service-locator', () => ({\n  serviceLocator: fixtureServiceLocator,\n}));\n\n/**\n * March 14th, 2023 1:25:42:500 PM\n */\nconst newDate = () => new DateTime(2023, 3 - 1, 14, 13, 25, 42, 500);\nconst vanillaDate = () => new Date(2023, 3 - 1, 14, 13, 25, 42, 500);\n\n/**\n * July 8th, 2023 3:00 AM\n */\nconst secondaryDate = () => new DateTime(2023, 7 - 1, 8, 3, 0);\n\nconst newDateMinute = () => newDate().startOf(Unit.minutes);\nconst newDateStringMinute = newDateMinute().format('L LT');\nconst newDateStringIso = newDate().toISOString();\n\nlet store = fixtureServiceLocator.locate(OptionsStore);\n\nconst reset = () => {\n  (store as unknown as FixtureOptionsStore).reset();\n  store.viewDate = newDate();\n};\n\nconst loadFixtures = (load: MockLoad) => {\n  fixtureServiceLocator.loadEach(load);\n};\n\nconst defaultLocalization = () => ({ ...DefaultFormatLocalization });\n\nconst createElementWithClasses = (tagName: string, ...classes) => {\n  const tag = document.createElement(tagName);\n  tag.classList.add(...classes);\n  return tag;\n};\n\nreset();\n\nexport {\n  newDate,\n  newDateMinute,\n  newDateStringMinute,\n  newDateStringIso,\n  vanillaDate,\n  secondaryDate,\n  reset,\n  store,\n  defaultLocalization,\n  loadFixtures,\n  createElementWithClasses,\n};\n"
  },
  {
    "path": "test/utilities/optionProccessor.test.ts",
    "content": "import {\n  newDate,\n  newDateMinute,\n  secondaryDate,\n  defaultLocalization,\n} from '../test-utilities';\nimport { expect, test } from 'vitest';\nimport { processKey } from '../../src/js/utilities/optionProcessor';\n\ntest('defaultProcessor', () => {\n  expect(\n    processKey({\n      key: 'foo',\n      value: true,\n      defaultType: 'boolean',\n      providedType: 'boolean',\n      path: '',\n      localization: defaultLocalization(),\n    })\n  ).toBe(true);\n\n  expect(\n    processKey({\n      key: 'foo',\n      value: '42',\n      defaultType: 'number',\n      providedType: 'number',\n      path: '',\n      localization: defaultLocalization(),\n    })\n  ).toBe(42);\n\n  expect(\n    processKey({\n      key: 'foo',\n      value: 'tacos',\n      defaultType: 'string',\n      providedType: 'string',\n      path: '',\n      localization: defaultLocalization(),\n    })\n  ).toBe('tacos');\n\n  expect(\n    processKey({\n      key: 'foo',\n      value: '',\n      defaultType: 'object',\n      providedType: 'object',\n      path: '',\n      localization: defaultLocalization(),\n    })\n  ).toEqual({});\n\n  const func = () => {};\n\n  expect(\n    processKey({\n      key: 'foo',\n      value: func,\n      defaultType: 'function',\n      providedType: 'function',\n      path: '',\n      localization: defaultLocalization(),\n    })\n  ).toBe(func);\n\n  expect(() =>\n    processKey({\n      key: 'foo',\n      value: '',\n      defaultType: 'taco',\n      providedType: 'taco',\n      path: '',\n      localization: defaultLocalization(),\n    })\n  ).toThrow();\n});\n\ntest('mandatoryDate', () => {\n  //invalid date should throw\n  expect(() =>\n    processKey({\n      key: 'defaultDate',\n      value: 42,\n      defaultType: '',\n      providedType: '',\n      path: '',\n      localization: defaultLocalization(),\n    })\n  ).toThrow();\n\n  //valid date should return\n  expect(\n    processKey({\n      key: 'defaultDate',\n      value: newDateMinute().format(),\n      defaultType: '',\n      providedType: '',\n      path: '',\n      localization: defaultLocalization(),\n    })\n  ).toEqual(newDateMinute());\n});\n\ntest('optionalDate', () => {\n  //invalid date should throw\n  expect(() =>\n    processKey({\n      key: 'minDate',\n      value: 42,\n      defaultType: '',\n      providedType: '',\n      path: '',\n      localization: defaultLocalization(),\n    })\n  ).toThrow();\n\n  //valid date should return\n  expect(\n    processKey({\n      key: 'minDate',\n      value: newDateMinute().format(),\n      defaultType: '',\n      providedType: '',\n      path: '',\n      localization: defaultLocalization(),\n    })\n  ).toEqual(newDateMinute());\n\n  //valid date should return\n  expect(\n    processKey({\n      key: 'minDate',\n      value: undefined,\n      defaultType: '',\n      providedType: '',\n      path: '',\n      localization: defaultLocalization(),\n    })\n  ).toEqual(undefined);\n});\n\ntest('validHourRange', () => {\n  //invalid value should throw\n  expect(() =>\n    processKey({\n      key: 'disabledHours',\n      value: 42,\n      defaultType: '',\n      providedType: '',\n      path: '',\n      localization: defaultLocalization(),\n    })\n  ).toThrow();\n\n  //valid should return\n  expect(\n    processKey({\n      key: 'disabledHours',\n      value: [6, 5],\n      defaultType: '',\n      providedType: '',\n      path: '',\n      localization: defaultLocalization(),\n    })\n  ).toEqual([6, 5]);\n\n  //valid undefined should return empty\n  expect(\n    processKey({\n      key: 'disabledHours',\n      value: undefined,\n      defaultType: '',\n      providedType: '',\n      path: '',\n      localization: defaultLocalization(),\n    })\n  ).toEqual([]);\n\n  //invalid range should throw\n  expect(() =>\n    processKey({\n      key: 'disabledHours',\n      value: [42],\n      defaultType: '',\n      providedType: '',\n      path: '',\n      localization: defaultLocalization(),\n    })\n  ).toThrow();\n});\n\ntest('validDateArray', () => {\n  //invalid value should throw\n  expect(() =>\n    processKey({\n      key: 'disabledDates',\n      value: 42,\n      defaultType: '',\n      providedType: '',\n      path: '',\n      localization: defaultLocalization(),\n    })\n  ).toThrow();\n\n  //valid should return\n  expect(\n    processKey({\n      key: 'disabledDates',\n      value: [newDate()],\n      defaultType: '',\n      providedType: '',\n      path: '',\n      localization: defaultLocalization(),\n    })\n  ).toEqual([newDate()]);\n\n  //valid undefined should return empty\n  expect(\n    processKey({\n      key: 'disabledDates',\n      value: undefined,\n      defaultType: '',\n      providedType: '',\n      path: '',\n      localization: defaultLocalization(),\n    })\n  ).toEqual([]);\n\n  //invalid range should throw\n  expect(() =>\n    processKey({\n      key: 'disabledDates',\n      value: [42],\n      defaultType: '',\n      providedType: '',\n      path: '',\n      localization: defaultLocalization(),\n    })\n  ).toThrow();\n});\n\ntest('numbersInRange', () => {\n  //invalid value should throw\n  expect(() =>\n    processKey({\n      key: 'daysOfWeekDisabled',\n      value: 42,\n      defaultType: '',\n      providedType: '',\n      path: '',\n      localization: defaultLocalization(),\n    })\n  ).toThrow();\n\n  //valid should return\n  expect(\n    processKey({\n      key: 'daysOfWeekDisabled',\n      value: [1],\n      defaultType: '',\n      providedType: '',\n      path: '',\n      localization: defaultLocalization(),\n    })\n  ).toEqual([1]);\n\n  //valid undefined should return empty\n  expect(\n    processKey({\n      key: 'daysOfWeekDisabled',\n      value: undefined,\n      defaultType: '',\n      providedType: '',\n      path: '',\n      localization: defaultLocalization(),\n    })\n  ).toEqual([]);\n\n  //invalid range should throw\n  expect(() =>\n    processKey({\n      key: 'daysOfWeekDisabled',\n      value: [42],\n      defaultType: '',\n      providedType: '',\n      path: '',\n      localization: defaultLocalization(),\n    })\n  ).toThrow();\n});\n\ntest('disabledTimeIntervals', () => {\n  //invalid value should throw\n  expect(() =>\n    processKey({\n      key: 'disabledTimeIntervals',\n      value: 42,\n      defaultType: '',\n      providedType: '',\n      path: '',\n      localization: defaultLocalization(),\n    })\n  ).toThrow();\n\n  //valid should return\n  expect(\n    processKey({\n      key: 'disabledTimeIntervals',\n      value: [1],\n      defaultType: '',\n      providedType: '',\n      path: '',\n      localization: defaultLocalization(),\n    })\n  ).toEqual([1]);\n\n  //valid undefined should return empty\n  expect(\n    processKey({\n      key: 'disabledTimeIntervals',\n      value: undefined,\n      defaultType: '',\n      providedType: '',\n      path: '',\n      localization: defaultLocalization(),\n    })\n  ).toEqual([]);\n\n  //invalid range should throw\n  expect(() =>\n    processKey({\n      key: 'disabledTimeIntervals',\n      value: 'taco',\n      defaultType: '',\n      providedType: '',\n      path: '',\n      localization: defaultLocalization(),\n    })\n  ).toThrow();\n\n  //valid undefined should return empty\n  const range = [{ from: newDate(), to: secondaryDate() }];\n  expect(\n    processKey({\n      key: 'disabledTimeIntervals',\n      value: range,\n      defaultType: '',\n      providedType: '',\n      path: '',\n      localization: defaultLocalization(),\n    })\n  ).toEqual(range);\n});\n\ntest('validKeyOption', () => {\n  //invalid value should throw\n  expect(() =>\n    processKey({\n      key: 'toolbarPlacement',\n      value: 42,\n      defaultType: '',\n      providedType: '',\n      path: '',\n      localization: defaultLocalization(),\n    })\n  ).toThrow();\n\n  //otherwise return\n  expect(\n    processKey({\n      key: 'toolbarPlacement',\n      value: 'top',\n      defaultType: '',\n      providedType: '',\n      path: '',\n      localization: defaultLocalization(),\n    })\n  ).toBe('top');\n});\n\ntest('meta', () => {\n  expect(\n    processKey({\n      key: 'meta',\n      value: 'top',\n      defaultType: '',\n      providedType: '',\n      path: '',\n      localization: defaultLocalization(),\n    })\n  ).toBe('top');\n\n  const o = { foo: 'bar' };\n  expect(\n    processKey({\n      key: 'meta',\n      value: o,\n      defaultType: '',\n      providedType: '',\n      path: '',\n      localization: defaultLocalization(),\n    })\n  ).toEqual(o);\n});\n\ntest('dayViewHeaderFormat', () => {\n  expect(\n    processKey({\n      key: 'dayViewHeaderFormat',\n      value: 'top',\n      defaultType: '',\n      providedType: '',\n      path: '',\n      localization: defaultLocalization(),\n    })\n  ).toBe('top');\n\n  const o = { foo: 'bar' };\n  expect(\n    processKey({\n      key: 'dayViewHeaderFormat',\n      value: o,\n      defaultType: '',\n      providedType: '',\n      path: '',\n      localization: defaultLocalization(),\n    })\n  ).toEqual(o);\n});\n\ntest('container', () => {\n  //not an html element\n  expect(() =>\n    processKey({\n      key: 'container',\n      value: 'top',\n      defaultType: '',\n      providedType: '',\n      path: '',\n      localization: defaultLocalization(),\n    })\n  ).toThrow();\n\n  const element = document.createElement('div');\n  expect(\n    processKey({\n      key: 'container',\n      value: element,\n      defaultType: '',\n      providedType: '',\n      path: '',\n      localization: defaultLocalization(),\n    })\n  ).toEqual(element);\n});\n\ntest('useTwentyfourHour', () => {\n  //not an html element\n  expect(() =>\n    processKey({\n      key: 'useTwentyfourHour',\n      value: 'top',\n      defaultType: '',\n      providedType: '',\n      path: '',\n      localization: defaultLocalization(),\n    })\n  ).toThrow();\n\n  expect(\n    processKey({\n      key: 'useTwentyfourHour',\n      value: undefined,\n      defaultType: '',\n      providedType: 'boolean',\n      path: '',\n      localization: defaultLocalization(),\n    })\n  ).toEqual(undefined);\n});\n"
  },
  {
    "path": "test/utilities/optionStore.test.ts",
    "content": "import { newDate, secondaryDate } from '../test-utilities';\nimport { beforeEach, expect, test } from 'vitest';\nimport { OptionsStore } from '../../src/js/utilities/optionsStore';\n\nlet optionStore: OptionsStore;\n\nbeforeEach(() => {\n  optionStore = new OptionsStore();\n  optionStore.viewDate = newDate();\n});\n\ntest('currentCalendarViewMode', () => {\n  //default should be 0 on the calendar view\n  expect(optionStore.currentCalendarViewMode).toBe(0);\n  expect(optionStore.currentView).toBe('calendar');\n\n  //mode 1 should be the months view\n  optionStore.currentCalendarViewMode = 1;\n  expect(optionStore.currentCalendarViewMode).toBe(1);\n  expect(optionStore.currentView).toBe('months');\n\n  //set the view to the clock and then simulate it back to the calendar\n  optionStore.currentView = 'clock';\n  expect(optionStore.currentView).toBe('clock');\n  optionStore.refreshCurrentView();\n  expect(optionStore.currentView).toBe('months');\n});\n\ntest('viewDate', () => {\n  //viewDate should be the initial date\n  expect(optionStore.viewDate).toEqual(newDate());\n\n  //using the setter\n  optionStore.options = {};\n  optionStore.viewDate = secondaryDate();\n  expect(optionStore.viewDate).toEqual(secondaryDate());\n  expect(optionStore.options.viewDate).toEqual(secondaryDate());\n});\n\ntest('isTwelveHour', () => {\n  optionStore.options = { localization: { hourCycle: 'h12' } };\n  expect(optionStore.isTwelveHour).toBe(true);\n\n  optionStore.options = { localization: { hourCycle: 'h23' } };\n  expect(optionStore.isTwelveHour).toBe(false);\n});\n"
  },
  {
    "path": "test/utilities/serviceLocator.test.ts",
    "content": "import { afterEach, expect, test, vi } from 'vitest';\nimport {\n  serviceLocator,\n  setupServiceLocator,\n} from '../../src/js/utilities/service-locator';\n\nclass MyService {\n  count = 0;\n\n  constructor() {\n    this.count++;\n  }\n}\n\nafterEach(() => {\n  vi.restoreAllMocks();\n});\n\ntest('Setup Service Locator creates a new instance', () => {\n  expect(serviceLocator).toBe(undefined);\n  setupServiceLocator();\n  expect(typeof serviceLocator.locate).toBe('function');\n});\n\ntest('Locate creates and caches service', () => {\n  const myService = serviceLocator.locate(MyService);\n  expect(myService).not.toBe(undefined);\n  expect(myService.count).toBe(1);\n});\n\ntest('Locate returns caches service', () => {\n  const myService = serviceLocator.locate(MyService);\n  expect(myService).not.toBe(undefined);\n\n  myService.count++;\n\n  expect(myService.count).toBe(2);\n});\n"
  },
  {
    "path": "test/utilities/typeCechker.test.ts",
    "content": "import {\n  newDate,\n  newDateMinute,\n  vanillaDate,\n  secondaryDate,\n  defaultLocalization,\n} from '../test-utilities';\nimport { expect, test, vi } from 'vitest';\nimport {\n  convertToDateTime,\n  tryConvertToDateTime,\n  typeCheckDateArray,\n  typeCheckNumberArray,\n} from '../../src/js/utilities/typeChecker';\nimport { DateTime } from '../../src/js/datetime';\n\ntest('tryConvertToDateTime', () => {\n  const convertSpy = vi.spyOn(DateTime, 'convert');\n  convertSpy.mockImplementation(() => newDate());\n\n  const fromStringSpy = vi.spyOn(DateTime, 'fromString');\n  fromStringSpy.mockImplementationOnce(() => newDateMinute());\n\n  //null should return null\n  expect(tryConvertToDateTime(null, null)).toBe(null);\n\n  //a DateTime object should just return itself\n  expect(tryConvertToDateTime(newDate(), null)).toEqual(newDate());\n\n  //a Data object should get converted\n  expect(tryConvertToDateTime(vanillaDate(), null)).toEqual(newDate());\n  expect(convertSpy).toHaveBeenCalled();\n\n  //converting from string\n  expect(\n    tryConvertToDateTime('03/14/2023 1:25 PM', defaultLocalization())\n  ).toEqual(newDateMinute());\n  expect(fromStringSpy).toHaveBeenCalled();\n\n  // converting from an invalid string will produce an invalid date\n  fromStringSpy.mockImplementationOnce((a) => new DateTime(a));\n  expect(\n    tryConvertToDateTime('13/70/2023 1:25 PM', defaultLocalization())\n  ).toBe(null);\n  expect(fromStringSpy).toHaveBeenCalled();\n\n  // an invalid type should return null\n  // @ts-ignore\n  expect(tryConvertToDateTime(42, null)).toBe(null);\n});\n\ntest('convertToDateTime', () => {\n  //can't convert empty string\n  expect(() => convertToDateTime('', 'maxDate', null)).toThrow();\n\n  //js date should convert\n  expect(convertToDateTime(vanillaDate(), null, null)).toEqual(newDate());\n});\n\ntest('typeCheckDateArray', () => {\n  //wrong data type\n  expect(() => typeCheckDateArray('disabledDates', 42, '', null)).toThrow();\n\n  //check each excepted type for conversion\n  const dateArray = [newDate(), vanillaDate(), secondaryDate().format()];\n\n  typeCheckDateArray('disabledDates', dateArray, null);\n\n  expect(dateArray[0]).toEqual(newDate());\n  expect(dateArray[1]).toEqual(vanillaDate());\n  expect(dateArray[2]).toEqual(secondaryDate());\n\n  //invalid type should throw\n  expect(() => typeCheckDateArray('', [42], null)).toThrow();\n});\n\ntest('typeCheckNumberArray', () => {\n  //invalid type should throw\n  expect(() => typeCheckNumberArray('disabledHours', null, null)).toThrow();\n\n  //array of numbers is expected\n  expect(() => typeCheckNumberArray('', [42], '')).not.toThrow();\n});\n"
  },
  {
    "path": "test/validation.test.ts",
    "content": "/* eslint-disable  @typescript-eslint/ban-ts-comment */\nimport { newDate, reset, store } from './test-utilities';\nimport { afterAll, beforeAll, beforeEach, expect, test, vi } from 'vitest';\nimport Validation from '../src/js/validation';\nimport { DateTime, Unit } from '../src/js/datetime';\n\nlet validation: Validation;\nbeforeAll(() => {\n  reset();\n});\n\nbeforeEach(() => {\n  reset();\n  validation = new Validation();\n});\n\nafterAll(() => {\n  vi.restoreAllMocks();\n});\n\ntest('isValid', () => {\n  let targetDate = new DateTime();\n\n  //no rules\n  expect(validation.isValid(targetDate, Unit.month)).toBe(true);\n  expect(validation.isValid(targetDate, Unit.date)).toBe(true);\n  expect(validation.isValid(targetDate, Unit.hours)).toBe(true);\n\n  //enabled date\n  store.options.restrictions.enabledDates = [targetDate];\n  expect(validation.isValid(targetDate, Unit.date)).toBe(true);\n\n  store.options.restrictions.enabledDates = [\n    targetDate.clone.manipulate(1, Unit.date),\n  ];\n  expect(validation.isValid(targetDate, Unit.date)).toBe(false);\n\n  store.options.restrictions.enabledDates = [];\n\n  store.options.restrictions.daysOfWeekDisabled = [targetDate.weekDay];\n  expect(validation.isValid(targetDate, Unit.date)).toBe(false);\n  store.options.restrictions.daysOfWeekDisabled = [];\n\n  store.options.restrictions.disabledHours = [targetDate.hours];\n  expect(validation.isValid(targetDate, Unit.hours)).toBe(false);\n  store.options.restrictions.disabledHours = [];\n\n  store.options.restrictions.disabledTimeIntervals = [\n    {\n      from: targetDate.clone.manipulate(-2, Unit.hours),\n      to: targetDate.clone.manipulate(2, Unit.hours),\n    },\n  ];\n  expect(validation.isValid(targetDate, Unit.hours)).toBe(false);\n});\n\ntest('enabledDisabledDatesIsValid ignores granularity', () => {\n  let targetDate = new DateTime();\n  // @ts-ignore\n  const method = validation._enabledDisabledDatesIsValid.bind(validation);\n  //ignore month\n  expect(method(Unit.month, targetDate)).toBe(true);\n});\n\ntest('enabledDisabledDatesIsValid', () => {\n  let targetDate = new DateTime();\n  // @ts-ignore\n  const method = validation._enabledDisabledDatesIsValid.bind(validation);\n  //ignore month\n  expect(method(Unit.month, targetDate)).toBe(true);\n  //no rules\n  expect(method(Unit.date, targetDate)).toBe(true);\n\n  //target date is one of the disabled dates\n  store.options.restrictions.disabledDates = [targetDate];\n  expect(method(Unit.date, targetDate)).toBe(false);\n\n  //target date is not one of the disabled dates\n  store.options.restrictions.disabledDates = [\n    targetDate.clone.manipulate(1, Unit.date),\n  ];\n  expect(method(Unit.date, targetDate)).toBe(true);\n\n  //target date is one of the enabledDates\n  store.options.restrictions.enabledDates = [targetDate];\n  expect(method(Unit.date, targetDate)).toBe(true);\n\n  //target date is not one of the enabledDates\n  store.options.restrictions.enabledDates = [\n    targetDate.clone.manipulate(1, Unit.date),\n  ];\n  expect(method(Unit.date, targetDate)).toBe(false);\n});\n\ntest('isInDisabledDates', () => {\n  let targetDate = new DateTime();\n\n  // @ts-ignore\n  const method = validation._isInDisabledDates.bind(validation);\n\n  //no rules\n  store.options.restrictions.disabledDates = [];\n  expect(method(targetDate)).toBe(false);\n\n  //target date is in the array\n  store.options.restrictions.disabledDates = [targetDate];\n  expect(method(targetDate)).toBe(true);\n\n  //target date is not in the array\n  store.options.restrictions.disabledDates = [\n    targetDate.clone.manipulate(1, Unit.date),\n  ];\n  expect(method(Unit.date, targetDate)).toBe(false);\n});\n\ntest('isInEnabledDates', () => {\n  let targetDate = new DateTime();\n\n  // @ts-ignore\n  const method = validation._isInEnabledDates.bind(validation);\n\n  //no rules\n  store.options.restrictions.enabledDates = [];\n  expect(method(targetDate)).toBe(true);\n\n  //target date is in the array\n  store.options.restrictions.enabledDates = [targetDate];\n  expect(method(targetDate)).toBe(true);\n\n  //target date is not in the array\n  store.options.restrictions.enabledDates = [\n    targetDate.clone.manipulate(1, Unit.date),\n  ];\n  expect(method(Unit.date, targetDate)).toBe(false);\n});\n\ntest('minMaxIsValid', () => {\n  let targetDate = new DateTime();\n  let backOne = targetDate.clone.manipulate(-1, Unit.date);\n  let forwardOne = targetDate.clone.manipulate(1, Unit.date);\n\n  // @ts-ignore\n  const method = validation._minMaxIsValid.bind(validation);\n\n  //no rules\n  expect(method(Unit.date, targetDate)).toBe(true);\n\n  //min date\n  store.options.restrictions.minDate = backOne;\n  expect(method(Unit.date, targetDate)).toBe(true);\n  expect(method(Unit.date, targetDate.clone.manipulate(-2, Unit.date))).toBe(\n    false\n  );\n\n  //max date\n  store.options.restrictions.maxDate = forwardOne;\n  expect(method(Unit.date, targetDate)).toBe(true);\n  expect(method(Unit.date, targetDate.clone.manipulate(2, Unit.date))).toBe(\n    false\n  );\n});\n\ntest('enabledDisabledHoursIsValid', () => {\n  let targetDate = new DateTime();\n  // @ts-ignore\n  const method = validation._enabledDisabledHoursIsValid.bind(validation);\n\n  //no rules\n  expect(method(Unit.date, targetDate)).toBe(true);\n\n  //target date's hour\n  store.options.restrictions.disabledHours = [targetDate.hours];\n  expect(method(targetDate)).toBe(false);\n\n  //target date is not one of the disabled dates\n  store.options.restrictions.disabledHours = [\n    targetDate.clone.manipulate(1, Unit.hours).hours,\n  ];\n  expect(method(targetDate)).toBe(true);\n\n  //target date is one of the enabledDates\n  store.options.restrictions.enabledHours = [targetDate.hours];\n  expect(method(targetDate)).toBe(true);\n\n  //target date is not one of the enabledDates\n  store.options.restrictions.enabledHours = [\n    targetDate.clone.manipulate(1, Unit.hours).hours,\n  ];\n  expect(method(targetDate)).toBe(false);\n});\n\ntest('isInDisabledHours', () => {\n  let targetDate = new DateTime();\n\n  // @ts-ignore\n  const method = validation._isInDisabledHours.bind(validation);\n\n  //no rules\n  store.options.restrictions.disabledHours = [];\n  expect(method(targetDate)).toBe(false);\n\n  //target date's hour is in the array\n  store.options.restrictions.disabledHours = [targetDate.hours];\n  expect(method(targetDate)).toBe(true);\n\n  //target date's hour is not in the array\n  store.options.restrictions.disabledHours = [\n    targetDate.clone.manipulate(1, Unit.hours).hours,\n  ];\n  expect(method(Unit.date, targetDate)).toBe(false);\n});\n\ntest('isInEnabledHours', () => {\n  let targetDate = new DateTime();\n\n  // @ts-ignore\n  const method = validation._isInEnabledHours.bind(validation);\n\n  //no rules\n  store.options.restrictions.enabledHours = [];\n  expect(method(targetDate)).toBe(true);\n\n  //target date's hour is in the array\n  store.options.restrictions.enabledHours = [targetDate.hours];\n  expect(method(targetDate)).toBe(true);\n\n  //target date's hour is in the array\n  store.options.restrictions.enabledHours = [\n    targetDate.clone.manipulate(1, Unit.hours).hours,\n  ];\n  expect(method(Unit.date, targetDate)).toBe(false);\n});\n\ntest('dateRangeIsValid', () => {\n  const isValidSpy = vi.spyOn(validation, 'isValid');\n  let back = newDate().manipulate(-1, Unit.date);\n  let forward = newDate().clone.manipulate(3, Unit.date);\n\n  //no rules\n  expect(validation.dateRangeIsValid([], 0, newDate())).toBe(true);\n\n  //option is enabled but no dates are selected or not testing the end date\n  store.options.dateRange = true;\n  expect(validation.dateRangeIsValid([], 0, newDate())).toBe(true);\n\n  //test start is the same day\n  expect(validation.dateRangeIsValid([newDate(), forward], 0, newDate())).toBe(\n    true\n  );\n\n  store.options.restrictions.maxDate = forward;\n\n  //one of the dates in range fails validation\n  isValidSpy.mockImplementationOnce(() => false);\n  expect(\n    validation.dateRangeIsValid([back], 1, newDate().manipulate(5, Unit.date))\n  ).toBe(false);\n  expect(isValidSpy).toHaveBeenCalled();\n\n  //all dates pass\n  isValidSpy.mockImplementationOnce(() => true);\n  expect(\n    validation.dateRangeIsValid([back], 1, newDate().manipulate(2, Unit.date))\n  ).toBe(true);\n  expect(isValidSpy).toHaveBeenCalled();\n});\n"
  },
  {
    "path": "tsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"module\": \"ES2020\",\n    \"target\": \"ES2020\",\n    \"lib\": [\n      \"es6\",\n      \"dom\",\n      \"es2016\",\n      \"es2017\",\n      \"dom.iterable\",\n      \"es2019\",\n      \"ES2021\"\n    ],\n    \"moduleResolution\": \"node\",\n    \"allowSyntheticDefaultImports\": true,\n    \"paths\": {\n      \"~src/*\": [\"../src/*\"]\n    },\n    \"rootDirs\": [\"./src/js\", \"./test\"],\n    \"declaration\": true,\n    \"declarationDir\": \"./types\",\n    \"emitDecoratorMetadata\": true,\n    \"experimentalDecorators\": true\n  },\n  \"include\": [\"./src/js/**/*.ts\"],\n  \"exclude\": [\n    \"node_modules\",\n    \"./src/js/plugins/**/*.ts\",\n    \"./src/js/locales/**/*.ts\",\n    \"./test\"\n  ]\n}\n"
  },
  {
    "path": "vite.config.ts",
    "content": "import { defineConfig } from 'vitest/config';\nimport GithubActionsReporter from 'vitest-github-actions-reporter';\n\nexport default defineConfig({\n  test: {\n    include: ['test/**/*.test.ts'],\n    coverage: {\n      reporter: ['text', 'json', 'html', 'lcovonly'],\n      exclude: ['**/*.test.ts', '**/*.fixture.ts'],\n    } as any, //eslint-disable-line @typescript-eslint/no-explicit-any\n    reporters: process.env.GITHUB_ACTIONS\n      ? ['default', new GithubActionsReporter()]\n      : 'default',\n    environment: 'jsdom',\n  },\n});\n"
  }
]