@qld-gov-au/qgds-bootstrap5 2.0.11 → 2.0.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (78) hide show
  1. package/.storybook/preview.js +5 -2
  2. package/dist/assets/components/bs5/dateinput/dateinput.hbs +27 -27
  3. package/dist/assets/components/bs5/formcheck/formcheck.hbs +10 -2
  4. package/dist/assets/components/bs5/head/head.hbs +1 -1
  5. package/dist/assets/components/bs5/searchInput/searchInput.hbs +31 -29
  6. package/dist/assets/components/bs5/select/select.hbs +19 -19
  7. package/dist/assets/components/bs5/textarea/textarea.hbs +17 -17
  8. package/dist/assets/components/bs5/textbox/textbox.hbs +17 -18
  9. package/dist/assets/css/qld.bootstrap.css +2 -2
  10. package/dist/assets/css/qld.bootstrap.css.map +3 -3
  11. package/dist/assets/css/qld.bootstrap.legacy.css +2 -2
  12. package/dist/assets/css/qld.bootstrap.legacy.css.map +3 -3
  13. package/dist/assets/js/handlebars.helpers.bundle.js +1 -1
  14. package/dist/assets/js/handlebars.init.min.js +134 -125
  15. package/dist/assets/js/handlebars.init.min.js.map +2 -2
  16. package/dist/assets/js/handlebars.partials.js +134 -125
  17. package/dist/assets/js/handlebars.partials.js.map +2 -2
  18. package/dist/assets/js/qld.bootstrap.min.js +9 -10
  19. package/dist/assets/js/qld.bootstrap.min.js.map +3 -3
  20. package/dist/assets/node/handlebars.init.min.js +51 -7
  21. package/dist/assets/node/handlebars.init.min.js.map +2 -2
  22. package/dist/components/bs5/dateinput/dateinput.hbs +27 -27
  23. package/dist/components/bs5/formcheck/formcheck.hbs +10 -2
  24. package/dist/components/bs5/head/head.hbs +1 -1
  25. package/dist/components/bs5/searchInput/searchInput.hbs +31 -29
  26. package/dist/components/bs5/select/select.hbs +19 -19
  27. package/dist/components/bs5/textarea/textarea.hbs +17 -17
  28. package/dist/components/bs5/textbox/textbox.hbs +17 -18
  29. package/dist/package.json +1 -1
  30. package/dist/sample-data/dateinput/dateinput.data.json +14 -12
  31. package/dist/sample-data/formcheck/stories/checkbox/checkbox.data.json +4 -5
  32. package/dist/sample-data/formcheck/stories/radio/radio.data.json +4 -4
  33. package/dist/sample-data/searchInput/searchInput.data.json +19 -10
  34. package/dist/sample-data/select/select.data.json +12 -10
  35. package/dist/sample-data/textarea/textarea.data.json +14 -11
  36. package/dist/sample-data/textbox/textbox.data.json +13 -10
  37. package/package.json +1 -1
  38. package/src/components/bs5/dateinput/Dateinput.js +26 -11
  39. package/src/components/bs5/dateinput/dateinput.data.json +14 -12
  40. package/src/components/bs5/dateinput/dateinput.hbs +27 -27
  41. package/src/components/bs5/formcheck/Formcheck.js +57 -6
  42. package/src/components/bs5/formcheck/_form-variables.scss +131 -0
  43. package/src/components/bs5/formcheck/formcheck.hbs +10 -2
  44. package/src/components/bs5/formcheck/formcheck.scss +229 -66
  45. package/src/components/bs5/formcheck/stories/bootstrap-validation/bootstrap-validation.stories.js +304 -0
  46. package/src/components/bs5/formcheck/stories/checkbox/checkbox.data.json +4 -5
  47. package/src/components/bs5/formcheck/stories/checkbox/checkbox.stories.js +19 -111
  48. package/src/components/bs5/formcheck/stories/radio/radio.data.json +4 -4
  49. package/src/components/bs5/formcheck/stories/radio/radio.stories.js +30 -122
  50. package/src/components/bs5/inpageAlert/inpageAlert.scss +1 -1
  51. package/src/components/bs5/pageLayout/{ThemeShowcase.stories.js → PaletteShowcase.stories.js} +36 -35
  52. package/src/components/bs5/searchInput/__snapshots__/searchInput.test.js.snap +24 -28
  53. package/src/components/bs5/searchInput/search.functions.js +93 -76
  54. package/src/components/bs5/searchInput/searchInput.data.json +19 -10
  55. package/src/components/bs5/searchInput/searchInput.hbs +31 -29
  56. package/src/components/bs5/searchInput/searchInput.scss +140 -196
  57. package/src/components/bs5/searchInput/searchInput.stories.js +35 -13
  58. package/src/components/bs5/searchInput/searchInput.test.js +5 -1
  59. package/src/components/bs5/select/Select.js +13 -5
  60. package/src/components/bs5/select/Select.stories.js +27 -83
  61. package/src/components/bs5/select/select.data.json +12 -10
  62. package/src/components/bs5/select/select.hbs +19 -19
  63. package/src/components/bs5/textarea/Textarea.js +13 -5
  64. package/src/components/bs5/textarea/Textarea.stories.js +29 -55
  65. package/src/components/bs5/textarea/textarea.data.json +14 -11
  66. package/src/components/bs5/textarea/textarea.hbs +17 -17
  67. package/src/components/bs5/textbox/Textbox.js +16 -5
  68. package/src/components/bs5/textbox/Textbox.stories.js +26 -51
  69. package/src/components/bs5/textbox/textInput.scss +12 -232
  70. package/src/components/bs5/textbox/textbox.data.json +13 -10
  71. package/src/components/bs5/textbox/textbox.hbs +17 -18
  72. package/src/css/functions/_index.scss +2 -0
  73. package/src/css/functions/remify.scss +32 -0
  74. package/src/css/functions/snap-line-height.scss +7 -0
  75. package/src/css/main.scss +1 -1
  76. package/src/css/mixins/focusable.scss +3 -0
  77. package/src/css/{qld-theme.scss → qld-palettes.scss} +30 -23
  78. package/src/components/bs5/formcheck/_formcheck.stories.bak.js +0 -432
package/dist/assets/js/handlebars.partials.js CHANGED
@@ -123,7 +123,7 @@
123
123
  {{/if}}
124
124
  {{/each}}
125
125
  </ol>
126
- </nav>`;var h=`<!-- breadcrumbs-->
126
+ </nav>`;var v=`<!-- breadcrumbs-->
127
127
  <div class="container-fluid alt">
128
128
  <div class="container">
129
129
  <div class="row">
@@ -133,7 +133,7 @@
133
133
  </div>
134
134
  </div>
135
135
  </div>
136
- </div>`;var v=`{{!-- Button icon partial --}}
136
+ </div>`;var h=`{{!-- Button icon partial --}}
137
137
  {{#*inline "buttonIcon"~}}
138
138
  <span class="qld-icon qld-icon-md {{iconClass}} {{iconPosition}}" aria-hidden="true"></span>
139
139
  {{~/inline}}
@@ -387,7 +387,7 @@
387
387
  <div class="row">
388
388
  {{> @partial-block }}
389
389
  </div>
390
- </div>`;var q=`<!DOCTYPE html>
390
+ </div>`;var y=`<!DOCTYPE html>
391
391
  <html lang="en">
392
392
 
393
393
  <head>
@@ -514,7 +514,7 @@
514
514
  </body>
515
515
 
516
516
 
517
- </html>`;var Z=`<!DOCTYPE html>
517
+ </html>`;var q=`<!DOCTYPE html>
518
518
  <html lang="en">
519
519
 
520
520
  <head>
@@ -672,12 +672,12 @@
672
672
  </body>
673
673
 
674
674
 
675
- </html>`;var y=`<!-- Content Wrapper -->
675
+ </html>`;var Z=`<!-- Content Wrapper -->
676
676
  <div class="col-12 col-lg-8 ps-lg-64 qld-content-body" id="content">
677
677
  {{#if title}}<h1>{{title}}</h1>{{/if}}
678
678
  {{> @partial-block }}
679
679
  </div>
680
- `;var x="";var w=`{{#if customLinks }}
680
+ `;var w="";var x=`{{#if customLinks }}
681
681
  <ul class="nav footer-link-list footer-link-list--custom flex-column">
682
682
  {{#each customLinks }}
683
683
  <li><a class="nav-link" href="{{ link }}" {{#if target }} target="_blank" {{/if}}>{{ label }}</a></li>
@@ -685,65 +685,65 @@
685
685
  </ul>
686
686
  {{/if}}`;var T=`<!-- QGDS Component: Date input -->
687
687
 
688
- <!-- Label -->
689
- <label id="dategroup-label"
688
+ <label id="{{id}}-label"
690
689
  class="qld-text-input-label {{#if isRequired}}field-required{{/if}} {{#if isDisabled}}field-disabled{{/if}}"
691
- for="example-1">
690
+ for="{{id}}">
692
691
  {{label-text}}
693
692
  {{#if optional-text}}
694
693
  <span class="label-text-optional">({{optional-text}})</span>
695
694
  {{/if}}
696
695
  </label>
697
696
 
698
- <!-- Hint text -->
699
697
  {{#if hint-text}}
700
- <span class="qld-hint-text" id="example-1-hint">{{hint-text}}</span>
698
+ <span class="qld-hint-text" id="{{id}}-hint">{{hint-text}}</span>
701
699
  {{/if}}
702
700
 
703
- {{#contains "qld-input-success" customClass}}
704
- <span id="text-field-success" class="qld-input-success">
705
- {{successMessageText}}
706
- </span>
707
- {{/contains}}
701
+ {{#contains "qld-input-success" customClass}}{{! legacy support for feedback classes \`qld-input-success\`}}
702
+ <span class="qld-input-success">{{successMessageText}}</span>
703
+ {{else}}
704
+ {{#if successMessageText}}{{! updated bootstrap style classes - \`valid-feedback\`}}
705
+ <div class="valid-feedback">{{successMessageText}}</div>
706
+ {{/if}}{{/contains}}
708
707
 
709
- {{#contains "qld-input-error" customClass}}
710
- <span id="text-field-error" class="qld-input-error">
711
- {{errorMessageText}}
712
- </span>
713
- {{/contains}}
708
+ {{#contains "qld-input-error" customClass}}{{! legacy support for feedback classes \`qld-input-error\`}}
709
+ <span class="qld-input-error">{{errorMessageText}}</span>
710
+ {{else}}
711
+ {{#if errorMessageText}}{{! updated bootstrap style classes - \`invalid-feedback\`}}
712
+ <div class="invalid-feedback">{{errorMessageText}}</div>
713
+ {{/if}}{{/contains}}
714
714
 
715
- <div aria-labelledby="dategroup-label" role="group" class="row date-container {{customClass}}">
715
+ <div aria-labelledby="{{id}}-label" role="group" class="row date-container {{customClass}}">
716
716
  <!-- day group -->
717
717
  <div class="day-group">
718
- <label for="dayinput" class="date-label qld-text-input-label">Day</label>
718
+ <label id="{{id}}-dayinput-label" for="{{id}}-dayinput" class="date-label qld-text-input-label">Day</label>
719
719
  <div>
720
- <input aria-required="true" aria-labelledby="dategroup-label" placeholder="{{day-placeholder}}" type="text"
720
+ <input id="{{id}}-dayinput" aria-required="true" aria-labelledby="{{id}}-label {{id}}-dayinput-label" placeholder="{{day-placeholder}}" type="text"
721
721
  inputmode="numeric" maxlength="2"
722
- class="qld-text-input form-control dayinput {{customClass}} {{#if isFilled}}form-style-filled{{/if}}" id="dayinput" ref="day"
722
+ class="qld-text-input form-control dayinput {{customClass}} {{#if isFilled}}form-style-filled{{/if}} {{#if isValid}}is-valid{{else}}{{#ifCond isValid "===" false}}is-invalid{{/ifCond}}{{/if}}" ref="day"
723
723
  aria-invalid="false" {{#if isDisabled}}disabled{{/if}} {{#if isRequired}}required aria-required="true"
724
724
  {{/if}}>
725
725
  </div>
726
726
  </div>
727
727
  <!-- month group -->
728
728
  <div class="date-group">
729
- <label for="monthinput" class="date-label qld-text-input-label">Month</label>
729
+ <label id="{{id}}-monthinput-label" for="{{id}}-monthinput" class="date-label qld-text-input-label">Month</label>
730
730
  <div>
731
- <input aria-required="true" aria-labelledby="dategroup-label" placeholder="{{month-placeholder}}"
731
+ <input id="{{id}}-monthinput" aria-required="true" aria-labelledby="{{id}}-label {{id}}-monthinput-label" placeholder="{{month-placeholder}}"
732
732
  type="text" inputmode="numeric" maxlength="2"
733
- class="qld-text-input form-control monthinput {{customClass}} {{#if isFilled}}form-style-filled{{/if}}" id="monthinput" ref="month"
733
+ class="qld-text-input form-control monthinput {{customClass}} {{#if isFilled}}form-style-filled{{/if}} {{#if isValid}}is-valid{{else}}{{#ifCond isValid "===" false}}is-invalid{{/ifCond}}{{/if}}" ref="month"
734
734
  aria-invalid="false" {{#if isDisabled}}disabled{{/if}} {{#if isRequired}}required aria-required="true"
735
735
  {{/if}}>
736
736
  </div>
737
737
  </div>
738
738
  <!-- year group -->
739
739
  <div class="date-group">
740
- <label for="yearinput" class="date-label">Year</label>
740
+ <label id="{{id}}-yearinput-label" for="{{id}}-yearinput" class="date-label">Year</label>
741
741
  <div class="year-label">
742
- <input aria-required="true" aria-labelledby="dategroup-label qld-text-input-label"
742
+ <input id="{{id}}-yearinput" aria-required="true" aria-labelledby="{{id}}-label {{id}}-yearinput-label"
743
743
  placeholder="{{year-placeholder}}" type="text" inputmode="numeric" maxlength="4"
744
- class="qld-text-input form-control yearinput {{customClass}} {{#if isFilled}}form-style-filled{{/if}}"
745
- id="yearinput" ref="year" aria-invalid="false" {{#if isDisabled}}disabled{{/if}} {{#if
746
- isRequired}}required aria-required="true" {{/if}}>
744
+ class="qld-text-input form-control yearinput {{customClass}} {{#if isFilled}}form-style-filled{{/if}} {{#if isValid}}is-valid{{else}}{{#ifCond isValid "===" false}}is-invalid{{/ifCond}}{{/if}}"
745
+ ref="year" aria-invalid="false" {{#if isDisabled}}disabled{{/if}} {{#if
746
+ isRequired}}required{{/if}}>
747
747
  </div>
748
748
  </div>
749
749
  </div>
@@ -793,7 +793,7 @@
793
793
  </li>
794
794
  {{/each }}
795
795
  </ul>
796
- {{/if}}`;var P=`<footer class="qld-footer {{ variantClass }}" role="contentinfo">
796
+ {{/if}}`;var O=`<footer class="qld-footer {{ variantClass }}" role="contentinfo">
797
797
  <!-- Footer content container -->
798
798
  <div class="container">
799
799
  {{#if sitename}}
@@ -1036,7 +1036,7 @@
1036
1036
  </div>
1037
1037
  </div>
1038
1038
  </div>
1039
- </footer>`;var O=`
1039
+ </footer>`;var P=`
1040
1040
  {{#if questionLabel}}
1041
1041
  <div class="qld-text-input-label {{listClasses}}">
1042
1042
  {{questionLabel}}
@@ -1049,10 +1049,18 @@
1049
1049
  {{#if hintLabel}}
1050
1050
  <span class="qld-hint-text">{{hintLabel}}</span>
1051
1051
  {{/if}}
1052
+
1053
+ {{#if successMessageText}}
1054
+ <div class="valid-feedback">{{successMessageText}}</div>
1055
+ {{/if}}
1056
+
1057
+ {{#if errorMessageText}}
1058
+ <div class="invalid-feedback">{{errorMessageText}}</div>
1059
+ {{/if}}
1052
1060
 
1053
1061
  {{#each listitems}}
1054
- <div class="form-check">
1055
- <input class="form-check-input" type="{{type}}" name="{{name}}" id="{{id}}" value="{{value}}" {{#if isDisabled}}disabled{{/if}} {{#if isChecked}}checked{{/if}}>
1062
+ <div class="form-check {{#if ../isValid}}is-valid{{else}}{{#ifCond ../isValid "===" false}}is-invalid{{/ifCond}}{{/if}}">
1063
+ <input class="form-check-input" type="{{#if ../type}}{{../type}}{{else}}{{#if type}}{{type}}{{else}}checkbox{{/if}}{{/if}}" name="{{name}}" id="{{id}}" value="{{value}}" {{#if isDisabled}}disabled{{/if}} {{#if isChecked}}checked{{/if}} {{#if isRequired}}required{{/if}} >
1056
1064
  <label class="form-check-label" for="{{id}}">
1057
1065
  {{label}}
1058
1066
  </label>
@@ -1109,7 +1117,7 @@
1109
1117
  </section>
1110
1118
  {{/each }}
1111
1119
  </div>`;var I=`
1112
- <!-- VERSION_DETAILS={"project_id":"@qld-gov-au/qgds-bootstrap5","version":"2.0.11","branch":"HEAD","tag":"v2.0.11","commit":"c1bc176e3a8502826203a87dc48aab0bc1bc8770","majorVersion":"v2"} -->
1120
+ <!-- VERSION_DETAILS={"project_id":"@qld-gov-au/qgds-bootstrap5","version":"2.0.12","branch":"HEAD","tag":"v2.0.12","commit":"8a144c9ab3a88493219cbc779eb61a0ca8b8d059","majorVersion":"v2"} -->
1113
1121
 
1114
1122
  {{! Select environment, used verbatium if not using predefind key
1115
1123
  cdn := PROD|STAGING|BETA|TEST|DEV|???
@@ -2024,68 +2032,70 @@ Reference: https://getbootstrap.com/docs/5.0/components/pagination/
2024
2032
  <span class="btn-icon"></span>
2025
2033
  <span class="btn-label">{{ buttonLabel }}</span>
2026
2034
  </button>
2027
- {{#if suggestions}}
2028
- <div class="suggestions suggestions__group d-none">
2029
- <div class="default-suggestions">
2030
- <div class="suggestions-category mt-16">
2031
- <strong class="suggestions-category-label d-block">Popular services</strong>
2032
- <ul class="mt-2">
2033
- {{#each default_suggestions.popular_services}}
2034
- <li><a href="{{link}}">{{title}}</a></li>
2035
- {{/each}}
2036
- </ul>
2037
- </div>
2038
-
2039
- <div class="suggestions-category mt-16">
2040
- <strong class="suggestions-category-label d-block">Browse by category</strong>
2041
- <ul class="mt-12 mb-0">
2042
- {{#each default_suggestions.categories}}
2043
- <li><a href="{{link}}">{{title}}</a></li>
2044
- {{/each}}
2045
- </ul>
2046
- </div>
2035
+ {{#ifCond hasDynamicSuggestions '||' hasDefaultSuggestions}}
2036
+ <div class="suggestions suggestions__group d-none default">
2037
+ {{#if hasDefaultSuggestions}}
2038
+ <div class="default-suggestions">
2039
+ <div class="suggestions-category">
2040
+ <strong class="suggestions-category-label d-block">{{defaultSuggestions.popularServicesTitle}}</strong>
2041
+ <ul>
2042
+ {{#each defaultSuggestions.popularServices}}
2043
+ <li><a href="{{link}}">{{title}}</a></li>
2044
+ {{/each}}
2045
+ {{#if defaultSuggestions.popularServicesLink}}
2046
+ <li><a href="{{defaultSuggestions.popularServicesLink.href}}" class="view-more">{{#if defaultSuggestions.popularServicesLink.label}}{{defaultSuggestions.popularServicesLink.label}}{{else}}View More{{/if}}</a></li>
2047
+ {{/if}}
2048
+ </ul>
2049
+ </div>
2047
2050
 
2048
- {{#if default_suggestions.options.view_more}}
2049
- <div class="suggestions-category">
2050
- <a class="px-16 pt-12 pb-16 d-block suggestions-category-view-more"
2051
- href="{{default_suggestions.options.href}}">{{default_suggestions.options.label}}</a>
2051
+ <div class="suggestions-category">
2052
+ <strong class="suggestions-category-label d-block">{{defaultSuggestions.categoriesTitle}}</strong>
2053
+ <ul>
2054
+ {{#each defaultSuggestions.categories}}
2055
+ <li><a href="{{link}}">{{title}}</a></li>
2056
+ {{/each}}
2057
+ {{#if defaultSuggestions.categoriesLink}}
2058
+ <li><a href="{{defaultSuggestions.categoriesLink.href}}" class="view-more">{{#if defaultSuggestions.categoriesLink.label}}{{defaultSuggestions.categoriesLink.label}}{{else}}View More{{/if}}</a></li>
2059
+ {{/if}}
2060
+ </ul>
2061
+ </div>
2052
2062
  </div>
2053
- {{/if}}
2054
- </div>
2055
- <div class="dynamic-suggestions"></div>
2063
+ {{/if}}
2064
+ {{#if hasDynamicSuggestions}}
2065
+ <div class="dynamic-suggestions" {{#if dynamicSuggestionsServiceLink.href}}data-view-more="{{dynamicSuggestionsServiceLink.href}}"{{/if}}></div>
2066
+ {{/if}}
2056
2067
  </div>
2057
- {{/if}}
2058
-
2068
+ {{/ifCond}}
2059
2069
  </div>`;var o1=`<!-- QGDS Component: Select -->
2060
2070
 
2061
- <!-- Label for the first input field -->
2062
- <label class="qld-text-input-label {{#if isRequired}}field-required{{/if}} {{#if isDisabled}}field-disabled{{/if}}" for="example-1">
2071
+ <label class="qld-text-input-label {{#if isRequired}}field-required{{/if}} {{#if isDisabled}}field-disabled{{/if}}" for="{{id}}">
2063
2072
  {{label-text}}
2064
2073
  {{#if optional-text}}
2065
- <span class="label-text-optional">({{optional-text}})</span></label>
2074
+ <span class="label-text-optional">({{optional-text}})</span>
2066
2075
  {{/if}}
2076
+ </label>
2067
2077
 
2068
- <!-- Hint text for the first input field -->
2069
2078
  {{#if hint-text}}
2070
- <span class="qld-hint-text" id="example-1-hint">{{hint-text}}</span>
2079
+ <span class="qld-hint-text" id="{{id}}-hint">{{hint-text}}</span>
2071
2080
  {{/if}}
2072
2081
 
2073
- {{#contains "qld-input-success" customClass}}
2074
- <span id="text-field-success" class="qld-input-success">
2075
- {{successMessageText}}
2076
- </span>
2077
- {{/contains}}
2078
-
2079
- {{#contains "qld-input-error" customClass}}
2080
- <span id="text-field-error" class="qld-input-error">
2081
- {{errorMessageText}}
2082
- </span>
2083
- {{/contains}}
2084
-
2085
- <!-- First text input field, described by the hint text above -->
2086
- <select class="qld-text-input form-select qld-select qld-field-width-1-quarter {{customClass}}"
2087
- aria-label="Default select example" {{#if isDisabled}}disabled{{/if}} {{#if isRequired}}required aria-required="true"{{/if}}>
2088
- <option selected>{{placeholder}}</option>
2082
+ {{#contains "qld-input-success" customClass}}{{! legacy support for feedback classes \`qld-input-success\`}}
2083
+ <span class="qld-input-success">{{successMessageText}}</span>
2084
+ {{else}}{{! updated bootstrap style classes - \`valid-feedback\`}}
2085
+ {{#if successMessageText}}
2086
+ <div class="valid-feedback">{{successMessageText}}</div>
2087
+ {{/if}}{{/contains}}
2088
+
2089
+ {{#contains "qld-input-error" customClass}}{{! legacy support for feedback classes \`qld-input-error\`}}
2090
+ <span class="qld-input-error">{{errorMessageText}}</span>
2091
+ {{else}}{{! updated bootstrap style classes - \`invalid-feedback\`}}
2092
+ {{#if errorMessageText}}
2093
+ <div class="invalid-feedback">{{errorMessageText}}</div>
2094
+ {{/if}}{{/contains}}
2095
+
2096
+ <select id={{id}} class="form-select {{#if isFilled}}is-filled{{/if}} {{#if isValid}}is-valid{{else}}{{#ifCond isValid "===" false}}is-invalid{{/ifCond}}{{/if}} {{customClass}}"
2097
+ {{#if hint-text}}aria-describedby="{{id}}-hint"{{/if}} {{#if isDisabled}}disabled{{/if}} {{#if isRequired}}required{{/if}} >
2098
+ <option selected value="">{{placeholder}}</option>
2089
2099
  <option value="1">Option 1</option>
2090
2100
  <option value="2">Option 2</option>
2091
2101
  <option value="3">Option 3</option>
@@ -2297,67 +2307,66 @@ Reference: https://getbootstrap.com/docs/5.0/components/pagination/
2297
2307
  </ul>
2298
2308
  `;var m1=`<!-- QGDS Component: Textarea -->
2299
2309
 
2300
- <!-- Label for the first input field -->
2301
2310
  <label class="qld-text-input-label {{#if isRequired}}field-required{{/if}} {{#if isDisabled}}field-disabled{{/if}}"
2302
- for="example-1">
2311
+ for="{{id}}">
2303
2312
  {{label-text}}
2304
2313
  {{#if optional-text}}
2305
2314
  <span class="label-text-optional">({{optional-text}})</span>
2306
2315
  {{/if}}
2307
2316
  </label>
2308
2317
 
2309
- <!-- Hint text for the first input field -->
2310
2318
  {{#if hint-text}}
2311
- <span class="qld-hint-text" id="example-1-hint">{{hint-text}}</span>
2319
+ <span class="qld-hint-text" id="{{id}}-hint">{{hint-text}}</span>
2312
2320
  {{/if}}
2313
2321
 
2314
- {{#contains "qld-input-success" customClass}}
2315
- <span id="text-field-success" class="qld-input-success">
2316
- {{successMessageText}}
2317
- </span>
2318
- {{/contains}}
2322
+ {{#contains "qld-input-success" customClass}}{{! legacy support for feedback classes \`qld-input-success\`}}
2323
+ <span class="qld-input-success">{{successMessageText}}</span>
2324
+ {{else}}
2325
+ {{#if successMessageText}}{{! updated bootstrap style classes - \`valid-feedback\`}}
2326
+ <div class="valid-feedback">{{successMessageText}}</div>
2327
+ {{/if}}{{/contains}}
2319
2328
 
2320
- {{#contains "qld-input-error" customClass}}
2321
- <span id="text-field-error" class="qld-input-error">
2322
- {{errorMessageText}}
2323
- </span>
2324
- {{/contains}}
2329
+ {{#contains "qld-input-error" customClass}}{{! legacy support for feedback classes \`qld-input-error\`}}
2330
+ <span class="qld-input-error">{{errorMessageText}}</span>
2331
+ {{else}}
2332
+ {{#if errorMessageText}}{{! updated bootstrap style classes - \`invalid-feedback\`}}
2333
+ <div class="invalid-feedback">{{errorMessageText}}</div>
2334
+ {{/if}}{{/contains}}
2325
2335
 
2326
2336
  <!-- First text input field, described by the hint text above -->
2327
- <textarea id="example-1" class="qld-text-input form-control {{customClass}} {{#if isFilled}}form-style-filled{{/if}}"
2328
- placeholder="{{placeholder}}" rows="{{rows}}" {{#if isDisabled}}disabled{{/if}} {{#if isRequired}}required
2329
- aria-required="true" {{/if}}></textarea>`;var g1=`<!-- QGDS Component: Textbox -->
2337
+ <textarea id="{{id}}" class="form-control {{customClass}} {{#if isFilled}}is-filled{{/if}} {{#if isValid}}is-valid{{else}}{{#ifCond isValid "===" false}}is-invalid{{/ifCond}}{{/if}}"
2338
+ placeholder="{{placeholder}}" rows="{{rows}}" {{#if isDisabled}}disabled{{/if}} {{#if isRequired}}required{{/if}}
2339
+ {{#if hint-text}}aria-describedby="{{id}}-hint"{{/if}}>{{value}}</textarea>`;var g1=`<!-- QGDS Component: Textbox -->
2330
2340
 
2331
- <!-- Label for the first input field -->
2332
2341
  <label class="qld-text-input-label {{#if isRequired}}field-required{{/if}} {{#if isDisabled}}field-disabled{{/if}}"
2333
- for="example-1">
2342
+ for="{{id}}">
2334
2343
  {{label-text}}
2335
2344
  {{#if optional-text}}
2336
2345
  <span class="label-text-optional">({{optional-text}})</span>
2337
2346
  {{/if}}
2338
2347
  </label>
2339
2348
 
2340
- <!-- Hint text for the first input field -->
2341
2349
  {{#if hint-text}}
2342
- <span class="qld-hint-text" id="example-1-hint">{{hint-text}}</span>
2350
+ <span class="qld-hint-text" id="{{id}}-hint">{{hint-text}}</span>
2343
2351
  {{/if}}
2344
2352
 
2345
- {{#contains "qld-input-success" customClass}}
2346
- <span id="text-field-success" class="qld-input-success">
2347
- {{successMessageText}}
2348
- </span>
2349
- {{/contains}}
2353
+ {{#contains "qld-input-success" customClass}}{{! legacy support for feedback classes \`qld-input-success\`}}
2354
+ <span class="qld-input-success">{{successMessageText}}</span>
2355
+ {{else}}
2356
+ {{#if successMessageText}}{{! updated bootstrap style classes - \`valid-feedback\`}}
2357
+ <div class="valid-feedback">{{successMessageText}}</div>
2358
+ {{/if}}{{/contains}}
2350
2359
 
2351
- {{#contains "qld-input-error" customClass}}
2352
- <span id="text-field-error" class="qld-input-error">
2353
- {{errorMessageText}}
2354
- </span>
2355
- {{/contains}}
2360
+ {{#contains "qld-input-error" customClass}}{{! legacy support for feedback classes \`qld-input-error\`}}
2361
+ <span class="qld-input-error">{{errorMessageText}}</span>
2362
+ {{else}}
2363
+ {{#if errorMessageText}}{{! updated bootstrap style classes - \`invalid-feedback\`}}
2364
+ <div class="invalid-feedback">{{errorMessageText}}</div>
2365
+ {{/if}}{{/contains}}
2356
2366
 
2357
- <!-- First text input field, described by the hint text above -->
2358
- <input id="example-1" class="qld-text-input form-control {{customClass}} {{#if isFilled}}form-style-filled{{/if}}"
2359
- type="text" placeholder="{{placeholder}}" aria-label="Text input example" {{#if isDisabled}}disabled{{/if}} {{#if
2360
- isRequired}}required aria-required="true" {{/if}} />`;var h1="<!-- QGDS Partial: typography -->";var v1=`<!-- QGDS Component: Video -->
2367
+ <input id={{id}} {{#if value}}value="{{value}}"{{/if}} class="form-control {{customClass}} {{#if isFilled}}is-filled{{/if}} {{#if isValid}}is-valid{{else}}{{#ifCond isValid "===" false}}is-invalid{{/ifCond}}{{/if}}"
2368
+ type="text" placeholder="{{placeholder}}" {{#if isDisabled}}disabled{{/if}} {{#if
2369
+ isRequired}}required{{/if}} {{#if hint-text}}aria-describedby="{{id}}-hint"{{/if}} />`;var v1="<!-- QGDS Partial: typography -->";var h1=`<!-- QGDS Component: Video -->
2361
2370
 
2362
2371
  {{#if analyticsTrackingCode}}
2363
2372
  <script type="text/javascript" defer="defer" src="https://extend.vimeocdn.com/ga/{{analyticsTrackingCode}}.js">
@@ -2403,6 +2412,6 @@ Reference: https://getbootstrap.com/docs/5.0/components/pagination/
2403
2412
  </div>
2404
2413
  {{! Render the transcript content in an accordion template }}
2405
2414
  </section>
2406
- `;function d(e){e.registerPartial("accordion",p),e.registerPartial("backToTop",f),e.registerPartial("banner",u),e.registerPartial("blockquote",m),e.registerPartial("breadcrumbs",g),e.registerPartial("breadcrumbsWrapper",h),e.registerPartial("button",v),e.registerPartial("callout",b),e.registerPartial("callToAction",L),e.registerPartial("card",H),e.registerPartial("containerLayout",V),e.registerPartial("contentFooter",M),e.registerPartial("contentFooterWrapper",k),e.registerPartial("contentPageWithForm",q),e.registerPartial("contentPageWithSideNavigation",Z),e.registerPartial("contentWrapper",y),e.registerPartial("correctincorrect",x),e.registerPartial("customLinks",w),e.registerPartial("dateinput",T),e.registerPartial("directionLinks",S),e.registerPartial("feedbackForm",A),e.registerPartial("followLinks",D),e.registerPartial("footer",P),e.registerPartial("formcheck",O),e.registerPartial("fullPage",R),e.registerPartial("globalAlert",E),e.registerPartial("head",I),e.registerPartial("header",_),e.registerPartial("headerBrand",N),e.registerPartial("homePage",F),e.registerPartial("icon",G),e.registerPartial("image",Q),e.registerPartial("inpageAlert",B),e.registerPartial("inpagenav",j),e.registerPartial("link",W),e.registerPartial("linkColumns",J),e.registerPartial("logo",Y),e.registerPartial("logoCOADeliveringForQLD",U),e.registerPartial("logoCOALandscape",$),e.registerPartial("logoCOALandscape2Lines",z),e.registerPartial("mainContainerWrapper",X),e.registerPartial("metaDcTerms",K),e.registerPartial("metaOpenGraph",e1),e.registerPartial("modal",i1),e.registerPartial("navbar",a1),e.registerPartial("pagination",t1),e.registerPartial("promotionalPanel",C1),e.registerPartial("quickexit",s1),e.registerPartial("searchInput",l1),e.registerPartial("select",o1),e.registerPartial("sidenav",n1),e.registerPartial("sidenavWrapper",r1),e.registerPartial("skipLinks",d1),e.registerPartial("spinner",c1),e.registerPartial("table",p1),e.registerPartial("tabs",f1),e.registerPartial("tag",u1),e.registerPartial("textarea",m1),e.registerPartial("textbox",g1),e.registerPartial("typography",h1),e.registerPartial("video",v1)}typeof Handlebars!="undefined"&&d(Handlebars);var b1=!1;function L1(e){typeof e=="undefined"&&console.error("Handlebars.init requires HandleBars"),typeof e!="undefined"?(b1?console.log("HandleBars Helpers And Partials already loaded, loading again"):b1=!0,r(e),d(e)):console.log("Handlebars not found, init failed")}typeof Handlebars!="undefined"&&L1(Handlebars);})();
2407
- //# @qld-gov-au/qgds-bootstrap5 - v2.0.11
2415
+ `;function d(e){e.registerPartial("accordion",p),e.registerPartial("backToTop",f),e.registerPartial("banner",u),e.registerPartial("blockquote",m),e.registerPartial("breadcrumbs",g),e.registerPartial("breadcrumbsWrapper",v),e.registerPartial("button",h),e.registerPartial("callout",b),e.registerPartial("callToAction",L),e.registerPartial("card",H),e.registerPartial("containerLayout",V),e.registerPartial("contentFooter",M),e.registerPartial("contentFooterWrapper",k),e.registerPartial("contentPageWithForm",y),e.registerPartial("contentPageWithSideNavigation",q),e.registerPartial("contentWrapper",Z),e.registerPartial("correctincorrect",w),e.registerPartial("customLinks",x),e.registerPartial("dateinput",T),e.registerPartial("directionLinks",S),e.registerPartial("feedbackForm",A),e.registerPartial("followLinks",D),e.registerPartial("footer",O),e.registerPartial("formcheck",P),e.registerPartial("fullPage",R),e.registerPartial("globalAlert",E),e.registerPartial("head",I),e.registerPartial("header",_),e.registerPartial("headerBrand",N),e.registerPartial("homePage",F),e.registerPartial("icon",G),e.registerPartial("image",Q),e.registerPartial("inpageAlert",B),e.registerPartial("inpagenav",j),e.registerPartial("link",W),e.registerPartial("linkColumns",J),e.registerPartial("logo",Y),e.registerPartial("logoCOADeliveringForQLD",U),e.registerPartial("logoCOALandscape",$),e.registerPartial("logoCOALandscape2Lines",z),e.registerPartial("mainContainerWrapper",X),e.registerPartial("metaDcTerms",K),e.registerPartial("metaOpenGraph",e1),e.registerPartial("modal",i1),e.registerPartial("navbar",a1),e.registerPartial("pagination",t1),e.registerPartial("promotionalPanel",C1),e.registerPartial("quickexit",s1),e.registerPartial("searchInput",l1),e.registerPartial("select",o1),e.registerPartial("sidenav",n1),e.registerPartial("sidenavWrapper",r1),e.registerPartial("skipLinks",d1),e.registerPartial("spinner",c1),e.registerPartial("table",p1),e.registerPartial("tabs",f1),e.registerPartial("tag",u1),e.registerPartial("textarea",m1),e.registerPartial("textbox",g1),e.registerPartial("typography",v1),e.registerPartial("video",h1)}typeof Handlebars!="undefined"&&d(Handlebars);var b1=!1;function L1(e){typeof e=="undefined"&&console.error("Handlebars.init requires HandleBars"),typeof e!="undefined"?(b1?console.log("HandleBars Helpers And Partials already loaded, loading again"):b1=!0,r(e),d(e)):console.log("Handlebars not found, init failed")}typeof Handlebars!="undefined"&&L1(Handlebars);})();
2416
+ //# @qld-gov-au/qgds-bootstrap5 - v2.0.12
2408
2417
  //# sourceMappingURL=handlebars.partials.js.map