RubyGems - govuk_publishing_components - Versions diffs - 17.21.0 → 18.0.0 - Mend

govuk_publishing_components 17.21.0 → 18.0.0

Files changed (476) hide show

data/node_modules/accessible-autocomplete/examples/index.html DELETED Viewed

@@ -1,665 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Accessible Autocomplete examples</title>
-    <style>
-      /* Example page specific styling. */
-      html {
-        color: #111;
-        background: #FFF;
-        font-family: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif;
-        font-size: 16px;
-        line-height: 1.5;
-      }
-      body {
-        padding-left: 1rem;
-        padding-right: 1rem;
-      }
-      h1, h2, h3, h4, h5, h6 {
-        line-height: normal;
-      }
-      label {
-        display: block;
-        margin-bottom: .5rem;
-      }
-      code {
-        padding-left: .5em;
-        padding-right: .5em;
-        background: #EFEFEF;
-        font-weight: normal;
-        font-family: monospace;
-      }
-      main {
-        max-width: 40em;
-        margin-left: auto;
-        margin-right: auto;
-      }
-      .autocomplete-wrapper {
-        max-width: 20em;
-        margin-bottom: 4rem;
-      }
-    </style>
-    <link rel="stylesheet" href="../dist/accessible-autocomplete.min.css">
-  </head>
-  <body>
-    <main>
-      <h1>Accessible Autocomplete examples</h1>
-      <p><a href="form.html">Example in a real HTML form that you can submit</a></p>
-      <h2>Options</h2>
-      <h3><code>{ element, id, source }</code></h3>
-      <p>This illustrates usage with only the required arguments.</p>
-      <label for="autocomplete-default">Select your country</label>
-      <div id="tt-default" class="autocomplete-wrapper"></div>
-      <h3><code>{ minLength: 2 }</code></h3>
-      <p>
-        This option will prevent displaying suggestions if less than 2 characters are
-        typed in.
-      </p>
-      <label for="autocomplete-minLength">Select your country</label>
-      <div id="tt-minLength" class="autocomplete-wrapper"></div>
-      <h3><code>{ displayMenu: 'overlay' }</code></h3>
-      <p>This option will display the menu as an absolutely positioned overlay.</p>
-      <label for="autocomplete-overlay">Select your country</label>
-      <div id="tt-overlay" class="autocomplete-wrapper"></div>
-      <h3><code>{ autoselect: true }</code></h3>
-      <p>This option will automatically select the first suggestion.</p>
-      <label for="autocomplete-autoselect">Select your country</label>
-      <div id="tt-autoselect" class="autocomplete-wrapper"></div>
-      <h3><code>{ defaultValue: 'Germany' }</code></h3>
-      <p>This option will prefill the input with a value.</p>
-      <label for="autocomplete-defaultValue">Select your country</label>
-      <div id="tt-defaultValue" class="autocomplete-wrapper"></div>
-      <h3><code>{ confirmOnBlur: false }</code></h3>
-      <p>
-        This option will toggle automatically confirming a selection on blur. In the other
-        examples, if you select an option using the arrow keys and then click out, it will
-        confirm the selection.
-      </p>
-      <label for="autocomplete-confirmOnBlur">Select your country</label>
-      <div id="tt-confirmOnBlur" class="autocomplete-wrapper"></div>
-      <h3><code>{ placeholder: 'Search for a country' }</code></h3>
-      <p>This option will populate the placeholder attribute on the input element.</p>
-      <label for="autocomplete-placeholder">Select your country</label>
-      <div id="tt-placeholder" class="autocomplete-wrapper"></div>
-      <h3><code>{ showNoOptionsFound: false }</code></h3>
-      <p>This option will toggle displaying the "No results found" message.</p>
-      <label for="autocomplete-showNoOptionsFound">Select your country</label>
-      <div id="tt-showNoOptionsFound" class="autocomplete-wrapper"></div>
-      <h3><code>{ showAllValues: true }</code></h3>
-      <p>
-        This option will toggle showing all values when the input is clicked, like a
-        default dropdown.
-      </p>
-      <label for="autocomplete-showAllValues">Select your country</label>
-      <div id="tt-showAllValues" class="autocomplete-wrapper"></div>
-      <h3><code>{ showAllValues: true, dropdownArrow: () => '' }</code></h3>
-      <p>
-        When <code>showAllValues</code> is <code>true</code> a dropdown arrow
-        will be displayed. It can be customized using a function that receives a
-        `{ className: string }` object and returns a string or (P)React component.
-      </p>
-      <label for="autocomplete-customDropdownArrow">Select your country</label>
-      <div id="tt-customDropdownArrow" class="autocomplete-wrapper"></div>
-      <h2>Advanced features</h2>
-      <h3>Progressive enhancement</h3>
-      <p>
-        This example demonstrates how to turn a server-rendered <code>&lt;select&gt;</code> element
-        into a autocomplete. Turn off JavaScript to see the <code>&lt;select&gt;</code> element.
-      </p>
-      <p>Uses <code>accessibleAutocomplete.enhanceSelectElement</code>.</p>
-      <label for="autocomplete-progressiveEnhancement">Select your country</label>
-      <div class="autocomplete-wrapper">
-        <select id="autocomplete-progressiveEnhancement">
-          <option value="fr">France</option>
-          <option value="de">Germany</option>
-          <option value="gb" selected>United Kingdom</option>
-        </select>
-      </div>
-      <h3>Custom results</h3>
-      <p>
-        This example demonstrates how to allow users to search for a country by either
-        its english name or its endonym. The suggestions are user-defined objects and
-        they are displayed using a user-defined template. Confirming a suggestion will
-        populate the input with the english country name.
-      </p>
-      <p>Uses the <code>{ templates: { inputValue, suggestion } }</code> options.</p>
-      <label for="autocomplete-customTemplates">Select your country</label>
-      <div id="tt-customTemplates" class="autocomplete-wrapper"></div>
-      <h3>Translating texts</h3>
-      <p>
-        This example demonstrates how to translate the texts emitted by the component.
-      </p>
-      <p>Uses the <code>{ tStatusQueryTooShort: (minQueryLength) => '',
-        tStatusNoResults: () => '',
-        tStatusSelectedOption: (selectedOption, length) => '',
-        tStatusResults: () => '' }</code> options.</p>
-      <label for="autocomplete-i18n">Select your country</label>
-      <div id="tt-i18n" class="autocomplete-wrapper"></div>
-      <h3>Multiselect</h3>
-      <p>
-        This example demonstrates how to use the autocomplete on a multiselect <code>&lt;select multiple&gt;</code> element
-        Turn off JavaScript to see the <code>&lt;select multiple&gt;</code> element.
-      </p>
-      <p>Uses <code>accessibleAutocomplete.enhanceSelectElement</code>.</p>
-      <label for="multiselect-autocomplete-progressiveEnhancement">Select your country</label>
-      <div class="autocomplete-wrapper">
-        <select multiple id="multiselect-autocomplete-progressiveEnhancement">
-          <option value="fr">France</option>
-          <option value="de" selected>Germany</option>
-          <option value="gb" selected>United Kingdom</option>
-        </select>
-      </div>
-      <h3>Custom attributes</h3>
-      <p>
-        This example demonstrates how to add custom attributes to the component.
-      </p>
-      <p>Uses the <code>{ customAttributes: {
-        "data-hello": "hey",
-        "data-goodbye": "bye"
-      } }</code> options.</p>
-      <label for="autocomplete-custom-attributes">Select your country</label>
-      <div id="custom-attributes" class="autocomplete-wrapper"></div>
-    </main>
-    <script type="text/javascript" src="../dist/accessible-autocomplete.min.js"></script>
-    <script type="text/javascript">
-      var countries = [
-        'Afghanistan',
-        'Akrotiri',
-        'Albania',
-        'Algeria',
-        'American Samoa',
-        'Andorra',
-        'Angola',
-        'Anguilla',
-        'Antarctica',
-        'Antigua and Barbuda',
-        'Argentina',
-        'Armenia',
-        'Aruba',
-        'Ashmore and Cartier Islands',
-        'Australia',
-        'Austria',
-        'Azerbaijan',
-        'Bahamas, The',
-        'Bahrain',
-        'Bangladesh',
-        'Barbados',
-        'Bassas da India',
-        'Belarus',
-        'Belgium',
-        'Belize',
-        'Benin',
-        'Bermuda',
-        'Bhutan',
-        'Bolivia',
-        'Bosnia and Herzegovina',
-        'Botswana',
-        'Bouvet Island',
-        'Brazil',
-        'British Indian Ocean Territory',
-        'British Virgin Islands',
-        'Brunei',
-        'Bulgaria',
-        'Burkina Faso',
-        'Burma',
-        'Burundi',
-        'Cambodia',
-        'Cameroon',
-        'Canada',
-        'Cape Verde',
-        'Cayman Islands',
-        'Central African Republic',
-        'Chad',
-        'Chile',
-        'China',
-        'Christmas Island',
-        'Clipperton Island',
-        'Cocos (Keeling) Islands',
-        'Colombia',
-        'Comoros',
-        'Congo',
-        'Cook Islands',
-        'Coral Sea Islands',
-        'Costa Rica',
-        'Cote d\'Ivoire',
-        'Croatia',
-        'Cuba',
-        'Cyprus',
-        'Czech Republic',
-        'Denmark',
-        'Dhekelia',
-        'Djibouti',
-        'Dominica',
-        'Dominican Republic',
-        'Ecuador',
-        'Egypt',
-        'El Salvador',
-        'Equatorial Guinea',
-        'Eritrea',
-        'Estonia',
-        'Ethiopia',
-        'Europa Island',
-        'Falkland Islands',
-        'Faroe Islands',
-        'Fiji',
-        'Finland',
-        'France',
-        'French Guiana',
-        'French Polynesia',
-        'French Southern and Antarctic Lands',
-        'Gabon',
-        'Gambia,',
-        'Gaza Strip',
-        'Georgia',
-        'Germany',
-        'Ghana',
-        'Gibraltar',
-        'Glorioso Islands',
-        'Greece',
-        'Greenland',
-        'Grenada',
-        'Guadeloupe',
-        'Guam',
-        'Guatemala',
-        'Guernsey',
-        'Guinea',
-        'Guinea-Bissau',
-        'Guyana',
-        'Haiti',
-        'Heard Island and McDonald Islands',
-        'Holy See (Vatican City)',
-        'Honduras',
-        'Hong Kong',
-        'Hungary',
-        'Iceland',
-        'India',
-        'Indonesia',
-        'Iran',
-        'Iraq',
-        'Ireland',
-        'Isle of Man',
-        'Israel',
-        'Italy',
-        'Jamaica',
-        'Jan Mayen',
-        'Japan',
-        'Jersey',
-        'Jordan',
-        'Juan de Nova Island',
-        'Kazakhstan',
-        'Kenya',
-        'Kiribati',
-        'Korea, North',
-        'Korea, South',
-        'Kuwait',
-        'Kyrgyzstan',
-        'Laos',
-        'Latvia',
-        'Lebanon',
-        'Lesotho',
-        'Liberia',
-        'Libya',
-        'Liechtenstein',
-        'Lithuania',
-        'Luxembourg',
-        'Macau',
-        'Macedonia',
-        'Madagascar',
-        'Malawi',
-        'Malaysia',
-        'Maldives',
-        'Mali',
-        'Malta',
-        'Marshall Islands',
-        'Martinique',
-        'Mauritania',
-        'Mauritius',
-        'Mayotte',
-        'Mexico',
-        'Micronesia, Federated States of',
-        'Moldova',
-        'Monaco',
-        'Mongolia',
-        'Montserrat',
-        'Morocco',
-        'Mozambique',
-        'Namibia',
-        'Nauru',
-        'Navassa Island',
-        'Nepal',
-        'Netherlands',
-        'Netherlands Antilles',
-        'New Caledonia',
-        'New Zealand',
-        'Nicaragua',
-        'Niger',
-        'Nigeria',
-        'Niue',
-        'Norfolk Island',
-        'Northern Mariana Islands',
-        'Norway',
-        'Oman',
-        'Pakistan',
-        'Palau',
-        'Panama',
-        'Papua New Guinea',
-        'Paracel Islands',
-        'Paraguay',
-        'Peru',
-        'Philippines',
-        'Pitcairn Islands',
-        'Poland',
-        'Portugal',
-        'Puerto Rico',
-        'Qatar',
-        'Reunion',
-        'Romania',
-        'Russia',
-        'Rwanda',
-        'Saint Helena',
-        'Saint Kitts and Nevis',
-        'Saint Lucia',
-        'Saint Pierre and Miquelon',
-        'Saint Vincent and the Grenadines',
-        'Samoa',
-        'San Marino',
-        'Sao Tome and Principe',
-        'Saudi Arabia',
-        'Senegal',
-        'Serbia and Montenegro',
-        'Seychelles',
-        'Sierra Leone',
-        'Singapore',
-        'Slovakia',
-        'Slovenia',
-        'Solomon Islands',
-        'Somalia',
-        'South Africa',
-        'South Georgia and the South Sandwich Islands',
-        'Spain',
-        'Spratly Islands',
-        'Sri Lanka',
-        'Sudan',
-        'Suriname',
-        'Svalbard',
-        'Swaziland',
-        'Sweden',
-        'Switzerland',
-        'Syria',
-        'Taiwan',
-        'Tajikistan',
-        'Tanzania',
-        'Thailand',
-        'Timor-Leste',
-        'Togo',
-        'Tokelau',
-        'Tonga',
-        'Trinidad and Tobago',
-        'Tromelin Island',
-        'Tunisia',
-        'Turkey',
-        'Turkmenistan',
-        'Turks and Caicos Islands',
-        'Tuvalu',
-        'Uganda',
-        'Ukraine',
-        'United Arab Emirates',
-        'United Kingdom',
-        'United States',
-        'Uruguay',
-        'Uzbekistan',
-        'Vanuatu',
-        'Venezuela',
-        'Vietnam',
-        'Virgin Islands',
-        'Wake Island',
-        'Wallis and Futuna',
-        'West Bank',
-        'Western Sahara',
-        'Yemen',
-        'Zambia',
-        'Zimbabwe'
-      ]
-    </script>
-    <script type="text/javascript">
-      var element = document.querySelector('#tt-default')
-      var id = 'autocomplete-default'
-      accessibleAutocomplete({
-        element: element,
-        id: id,
-        source: countries
-      })
-    </script>
-    <script type="text/javascript">
-      element = document.querySelector('#tt-minLength')
-      id = 'autocomplete-minLength'
-      accessibleAutocomplete({
-        element: element,
-        id: id,
-        minLength: 2,
-        source: countries
-      })
-    </script>
-    <script type="text/javascript">
-      element = document.querySelector('#tt-autoselect')
-      id = 'autocomplete-autoselect'
-      accessibleAutocomplete({
-        autoselect: true,
-        element: element,
-        id: id,
-        source: countries
-      })
-    </script>
-    <script type="text/javascript">
-      element = document.querySelector('#tt-overlay')
-      id = 'autocomplete-overlay'
-      accessibleAutocomplete({
-        displayMenu: 'overlay',
-        element: element,
-        id: id,
-        source: countries
-      })
-    </script>
-    <script type="text/javascript">
-      element = document.querySelector('#tt-defaultValue')
-      id = 'autocomplete-defaultValue'
-      accessibleAutocomplete({
-        defaultValue: 'Germany',
-        element: element,
-        id: id,
-        source: countries
-      })
-    </script>
-    <script type="text/javascript">
-      element = document.querySelector('#autocomplete-progressiveEnhancement')
-      accessibleAutocomplete.enhanceSelectElement({
-        selectElement: element
-      })
-    </script>
-    <script type="text/javascript">
-      element = document.querySelector('#multiselect-autocomplete-progressiveEnhancement')
-      accessibleAutocomplete.enhanceSelectElement({
-        minLength: 3,
-        selectElement: element
-      })
-    </script>
-    <script type="text/javascript">
-      function customSuggest (query, syncResults) {
-        var results = [
-          { endonymLang: 'fr', endonym: 'République Française', name: 'France' },
-          { endonymLang: 'de', endonym: 'Deutschland', name: 'Germany' },
-          { endonymLang: 'en', endonym: 'Great Britain', name: 'United Kingdom' }
-        ]
-        syncResults(query
-          ? results.filter(function (result) {
-              var resultContains = result.name.toLowerCase().indexOf(query.toLowerCase()) !== -1
-              var endonymContains = result.endonym.toLowerCase().indexOf(query.toLowerCase()) !== -1
-              return resultContains || endonymContains
-            })
-          : []
-        )
-      }
-      function inputValueTemplate (result) {
-        return result && result.name
-      }
-      function suggestionTemplate (result) {
-        return result && '<strong>' + result.name + '</strong>' +
-          ' (<span lang=' + result.endonymLang + '>' + result.endonym + '</span>)'
-      }
-      element = document.querySelector('#tt-customTemplates')
-      id = 'autocomplete-customTemplates'
-      accessibleAutocomplete({
-        element: element,
-        id: id,
-        source: customSuggest,
-        templates: {
-          inputValue: inputValueTemplate,
-          suggestion: suggestionTemplate
-        }
-      })
-    </script>
-    <script type="text/javascript">
-      element = document.querySelector('#tt-confirmOnBlur')
-      id = 'autocomplete-confirmOnBlur'
-      accessibleAutocomplete({
-        element: element,
-        id: id,
-        confirmOnBlur: false,
-        source: countries
-      })
-    </script>
-    <script type="text/javascript">
-      element = document.querySelector('#tt-placeholder')
-      id = 'autocomplete-placeholder'
-      accessibleAutocomplete({
-        element: element,
-        id: id,
-        placeholder: 'Search for a country',
-        source: countries
-      })
-    </script>
-    <script type="text/javascript">
-      element = document.querySelector('#tt-showNoOptionsFound')
-      id = 'autocomplete-showNoOptionsFound'
-      accessibleAutocomplete({
-        element: element,
-        id: id,
-        showNoOptionsFound: false,
-        source: countries
-      })
-    </script>
-    <script type="text/javascript">
-      element = document.querySelector('#tt-showAllValues')
-      id = 'autocomplete-showAllValues'
-      accessibleAutocomplete({
-        element: element,
-        id: id,
-        showAllValues: true,
-        source: countries
-      })
-    </script>
-    <script type="text/javascript">
-      element = document.querySelector('#tt-i18n')
-      id = 'autocomplete-i18n'
-      accessibleAutocomplete({
-        element: element,
-        id: id,
-        showAllValues: false,
-        source: countries,
-        tStatusQueryTooShort: function (minQueryLength) {
-          return 'Tippe mindestens ' + minQueryLength + ' Zeichen ein für Resultate.'
-        },
-        tStatusNoResults: function () {
-          return 'Keine Resultate.'
-        },
-        tStatusSelectedOption: function (selectedOption, length) {
-          return selectedOption + ' (1 von ' + length + ') ist ausgewählt.'
-        },
-        tStatusResults: function (length, contentSelectedOption) {
-          var words = {
-            result: (length === 1) ? 'Resultat' : 'Resultate',
-            is: (length === 1) ? 'ist' : 'sind'
-          }
-          return length + ' ' + words.result + ' ' + words.is + ' verfügbar. ' + contentSelectedOption
-        },
-        tNoResults: function () {
-          return 'Keine Resultate'
-        }
-      })
-    </script>
-    <script type="text/javascript">
-      element = document.querySelector('#tt-customDropdownArrow')
-      id = 'autocomplete-customDropdownArrow'
-      accessibleAutocomplete({
-        element: element,
-        id: id,
-        showAllValues: true,
-        source: countries,
-        dropdownArrow: function (config) {
-          return '<svg class="' + config.className + '" style="top: 8px;" viewBox="0 0 512 512" ><path d="M256,298.3L256,298.3L256,298.3l174.2-167.2c4.3-4.2,11.4-4.1,15.8,0.2l30.6,29.9c4.4,4.3,4.5,11.3,0.2,15.5L264.1,380.9  c-2.2,2.2-5.2,3.2-8.1,3c-3,0.1-5.9-0.9-8.1-3L35.2,176.7c-4.3-4.2-4.2-11.2,0.2-15.5L66,131.3c4.4-4.3,11.5-4.4,15.8-0.2L256,298.3  z"/></svg>'
-        }
-      })
-    </script>
-    <script type="text/javascript">
-      element = document.querySelector('#custom-attributes')
-      id = 'autocomplete-custom-attributes'
-      accessibleAutocomplete({
-        element: element,
-        id: id,
-        showAllValues: false,
-        source: countries,
-        customAttributes: {
-          "data-hello": "hey",
-          "data-goodbye": "bye"
-        }
-      })
-    </script>
-  </body>
-</html>