@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
@@ -623,7 +623,7 @@ var init_customLinks = __esm({
623
623
  var dateinput_default;
624
624
  var init_dateinput = __esm({
625
625
  "src/components/bs5/dateinput/dateinput.hbs?raw"() {
626
- dateinput_default = '<!-- QGDS Component: Date input -->\n\n<!-- Label -->\n<label id="dategroup-label"\n class="qld-text-input-label {{#if isRequired}}field-required{{/if}} {{#if isDisabled}}field-disabled{{/if}}"\n for="example-1">\n {{label-text}}\n {{#if optional-text}}\n <span class="label-text-optional">({{optional-text}})</span>\n {{/if}}\n</label>\n\n<!-- Hint text -->\n{{#if hint-text}}\n<span class="qld-hint-text" id="example-1-hint">{{hint-text}}</span>\n{{/if}}\n\n{{#contains "qld-input-success" customClass}}\n<span id="text-field-success" class="qld-input-success">\n {{successMessageText}}\n</span>\n{{/contains}}\n\n{{#contains "qld-input-error" customClass}}\n<span id="text-field-error" class="qld-input-error">\n {{errorMessageText}}\n</span>\n{{/contains}}\n\n<div aria-labelledby="dategroup-label" role="group" class="row date-container {{customClass}}">\n <!-- day group -->\n <div class="day-group">\n <label for="dayinput" class="date-label qld-text-input-label">Day</label>\n <div>\n <input aria-required="true" aria-labelledby="dategroup-label" placeholder="{{day-placeholder}}" type="text"\n inputmode="numeric" maxlength="2"\n class="qld-text-input form-control dayinput {{customClass}} {{#if isFilled}}form-style-filled{{/if}}" id="dayinput" ref="day"\n aria-invalid="false" {{#if isDisabled}}disabled{{/if}} {{#if isRequired}}required aria-required="true"\n {{/if}}>\n </div>\n </div>\n <!-- month group -->\n <div class="date-group">\n <label for="monthinput" class="date-label qld-text-input-label">Month</label>\n <div>\n <input aria-required="true" aria-labelledby="dategroup-label" placeholder="{{month-placeholder}}"\n type="text" inputmode="numeric" maxlength="2"\n class="qld-text-input form-control monthinput {{customClass}} {{#if isFilled}}form-style-filled{{/if}}" id="monthinput" ref="month"\n aria-invalid="false" {{#if isDisabled}}disabled{{/if}} {{#if isRequired}}required aria-required="true"\n {{/if}}>\n </div>\n </div>\n <!-- year group -->\n <div class="date-group">\n <label for="yearinput" class="date-label">Year</label>\n <div class="year-label">\n <input aria-required="true" aria-labelledby="dategroup-label qld-text-input-label"\n placeholder="{{year-placeholder}}" type="text" inputmode="numeric" maxlength="4"\n class="qld-text-input form-control yearinput {{customClass}} {{#if isFilled}}form-style-filled{{/if}}"\n id="yearinput" ref="year" aria-invalid="false" {{#if isDisabled}}disabled{{/if}} {{#if\n isRequired}}required aria-required="true" {{/if}}>\n </div>\n </div>\n</div>\n';
626
+ dateinput_default = '<!-- QGDS Component: Date input -->\n\n<label id="{{id}}-label"\n class="qld-text-input-label {{#if isRequired}}field-required{{/if}} {{#if isDisabled}}field-disabled{{/if}}"\n for="{{id}}">\n {{label-text}}\n {{#if optional-text}}\n <span class="label-text-optional">({{optional-text}})</span>\n {{/if}}\n</label>\n\n{{#if hint-text}}\n<span class="qld-hint-text" id="{{id}}-hint">{{hint-text}}</span>\n{{/if}}\n\n{{#contains "qld-input-success" customClass}}{{! legacy support for feedback classes `qld-input-success`}}\n<span class="qld-input-success">{{successMessageText}}</span>\n{{else}}\n{{#if successMessageText}}{{! updated bootstrap style classes - `valid-feedback`}}\n<div class="valid-feedback">{{successMessageText}}</div>\n{{/if}}{{/contains}}\n\n{{#contains "qld-input-error" customClass}}{{! legacy support for feedback classes `qld-input-error`}}\n<span class="qld-input-error">{{errorMessageText}}</span>\n{{else}}\n{{#if errorMessageText}}{{! updated bootstrap style classes - `invalid-feedback`}}\n<div class="invalid-feedback">{{errorMessageText}}</div>\n{{/if}}{{/contains}}\n\n<div aria-labelledby="{{id}}-label" role="group" class="row date-container {{customClass}}">\n <!-- day group -->\n <div class="day-group">\n <label id="{{id}}-dayinput-label" for="{{id}}-dayinput" class="date-label qld-text-input-label">Day</label>\n <div>\n <input id="{{id}}-dayinput" aria-required="true" aria-labelledby="{{id}}-label {{id}}-dayinput-label" placeholder="{{day-placeholder}}" type="text"\n inputmode="numeric" maxlength="2"\n 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"\n aria-invalid="false" {{#if isDisabled}}disabled{{/if}} {{#if isRequired}}required aria-required="true"\n {{/if}}>\n </div>\n </div>\n <!-- month group -->\n <div class="date-group">\n <label id="{{id}}-monthinput-label" for="{{id}}-monthinput" class="date-label qld-text-input-label">Month</label>\n <div>\n <input id="{{id}}-monthinput" aria-required="true" aria-labelledby="{{id}}-label {{id}}-monthinput-label" placeholder="{{month-placeholder}}"\n type="text" inputmode="numeric" maxlength="2"\n 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"\n aria-invalid="false" {{#if isDisabled}}disabled{{/if}} {{#if isRequired}}required aria-required="true"\n {{/if}}>\n </div>\n </div>\n <!-- year group -->\n <div class="date-group">\n <label id="{{id}}-yearinput-label" for="{{id}}-yearinput" class="date-label">Year</label>\n <div class="year-label">\n <input id="{{id}}-yearinput" aria-required="true" aria-labelledby="{{id}}-label {{id}}-yearinput-label"\n placeholder="{{year-placeholder}}" type="text" inputmode="numeric" maxlength="4"\n 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}}"\n ref="year" aria-invalid="false" {{#if isDisabled}}disabled{{/if}} {{#if\n isRequired}}required{{/if}}>\n </div>\n </div>\n</div>\n';
627
627
  }
628
628
  });
629
629
 
@@ -906,7 +906,7 @@ var init_footer = __esm({
906
906
  var formcheck_default;
907
907
  var init_formcheck = __esm({
908
908
  "src/components/bs5/formcheck/formcheck.hbs?raw"() {
909
- formcheck_default = ' \n {{#if questionLabel}}\n <div class="qld-text-input-label {{listClasses}}">\n {{questionLabel}}\n {{#if optionalLabel}}\n <span class="label-text-optional">{{optionalLabel}}</span>\n {{/if}}\n </div>\n {{/if}}\n\n {{#if hintLabel}}\n <span class="qld-hint-text">{{hintLabel}}</span>\n {{/if}}\n \n {{#each listitems}}\n <div class="form-check">\n <input class="form-check-input" type="{{type}}" name="{{name}}" id="{{id}}" value="{{value}}" {{#if isDisabled}}disabled{{/if}} {{#if isChecked}}checked{{/if}}>\n <label class="form-check-label" for="{{id}}">\n {{label}}\n </label>\n </div>\n {{/each}}\n ';
909
+ formcheck_default = ' \n {{#if questionLabel}}\n <div class="qld-text-input-label {{listClasses}}">\n {{questionLabel}}\n {{#if optionalLabel}}\n <span class="label-text-optional">{{optionalLabel}}</span>\n {{/if}}\n </div>\n {{/if}}\n\n {{#if hintLabel}}\n <span class="qld-hint-text">{{hintLabel}}</span>\n {{/if}}\n\n {{#if successMessageText}}\n <div class="valid-feedback">{{successMessageText}}</div>\n {{/if}}\n\n {{#if errorMessageText}}\n <div class="invalid-feedback">{{errorMessageText}}</div>\n {{/if}}\n \n {{#each listitems}}\n <div class="form-check {{#if ../isValid}}is-valid{{else}}{{#ifCond ../isValid "===" false}}is-invalid{{/ifCond}}{{/if}}">\n <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}} >\n <label class="form-check-label" for="{{id}}">\n {{label}}\n </label>\n </div>\n {{/each}}\n ';
910
910
  }
911
911
  });
912
912
 
@@ -966,7 +966,7 @@ var head_default;
966
966
  var init_head = __esm({
967
967
  "src/components/bs5/head/head.hbs?raw"() {
968
968
  head_default = `
969
- <!-- VERSION_DETAILS={"project_id":"@qld-gov-au/qgds-bootstrap5","version":"2.0.11","branch":"HEAD","tag":"v2.0.11","commit":"c1bc176e3a8502826203a87dc48aab0bc1bc8770","majorVersion":"v2"} -->
969
+ <!-- VERSION_DETAILS={"project_id":"@qld-gov-au/qgds-bootstrap5","version":"2.0.12","branch":"HEAD","tag":"v2.0.12","commit":"8a144c9ab3a88493219cbc779eb61a0ca8b8d059","majorVersion":"v2"} -->
970
970
 
971
971
  {{! Select environment, used verbatium if not using predefind key
972
972
  cdn := PROD|STAGING|BETA|TEST|DEV|???
@@ -1369,7 +1369,51 @@ var init_quickexit = __esm({
1369
1369
  var searchInput_default;
1370
1370
  var init_searchInput = __esm({
1371
1371
  "src/components/bs5/searchInput/searchInput.hbs?raw"() {
1372
- searchInput_default = '<!-- \n QGDS Component: Search input \n-->\n<div class="qld-search-input {{customClass}}">\n <input id="{{ inputID }}" name="{{ inputName }}" class="form-control" type="text" autocomplete="off"\n aria-label="{{ ariaLabel }}" {{#each tags}} data-{{@key}}="{{this}}" {{/each}} />\n <button class="btn btn-primary" type="{{ buttonType }}" id="{{ buttonID }}">\n <span class="btn-icon"></span>\n <span class="btn-label">{{ buttonLabel }}</span>\n </button>\n {{#if suggestions}}\n <div class="suggestions suggestions__group d-none">\n <div class="default-suggestions">\n <div class="suggestions-category mt-16">\n <strong class="suggestions-category-label d-block">Popular services</strong>\n <ul class="mt-2">\n {{#each default_suggestions.popular_services}}\n <li><a href="{{link}}">{{title}}</a></li>\n {{/each}}\n </ul>\n </div>\n\n <div class="suggestions-category mt-16">\n <strong class="suggestions-category-label d-block">Browse by category</strong>\n <ul class="mt-12 mb-0">\n {{#each default_suggestions.categories}}\n <li><a href="{{link}}">{{title}}</a></li>\n {{/each}}\n </ul>\n </div>\n\n {{#if default_suggestions.options.view_more}}\n <div class="suggestions-category">\n <a class="px-16 pt-12 pb-16 d-block suggestions-category-view-more"\n href="{{default_suggestions.options.href}}">{{default_suggestions.options.label}}</a>\n </div>\n {{/if}}\n </div>\n <div class="dynamic-suggestions"></div>\n </div>\n {{/if}}\n \n</div>';
1372
+ searchInput_default = `<!--
1373
+ QGDS Component: Search input
1374
+ -->
1375
+ <div class="qld-search-input {{customClass}}">
1376
+ <input id="{{ inputID }}" name="{{ inputName }}" class="form-control" type="text" autocomplete="off"
1377
+ aria-label="{{ ariaLabel }}" {{#each tags}} data-{{@key}}="{{this}}" {{/each}} />
1378
+ <button class="btn btn-primary" type="{{ buttonType }}" id="{{ buttonID }}">
1379
+ <span class="btn-icon"></span>
1380
+ <span class="btn-label">{{ buttonLabel }}</span>
1381
+ </button>
1382
+ {{#ifCond hasDynamicSuggestions '||' hasDefaultSuggestions}}
1383
+ <div class="suggestions suggestions__group d-none default">
1384
+ {{#if hasDefaultSuggestions}}
1385
+ <div class="default-suggestions">
1386
+ <div class="suggestions-category">
1387
+ <strong class="suggestions-category-label d-block">{{defaultSuggestions.popularServicesTitle}}</strong>
1388
+ <ul>
1389
+ {{#each defaultSuggestions.popularServices}}
1390
+ <li><a href="{{link}}">{{title}}</a></li>
1391
+ {{/each}}
1392
+ {{#if defaultSuggestions.popularServicesLink}}
1393
+ <li><a href="{{defaultSuggestions.popularServicesLink.href}}" class="view-more">{{#if defaultSuggestions.popularServicesLink.label}}{{defaultSuggestions.popularServicesLink.label}}{{else}}View More{{/if}}</a></li>
1394
+ {{/if}}
1395
+ </ul>
1396
+ </div>
1397
+
1398
+ <div class="suggestions-category">
1399
+ <strong class="suggestions-category-label d-block">{{defaultSuggestions.categoriesTitle}}</strong>
1400
+ <ul>
1401
+ {{#each defaultSuggestions.categories}}
1402
+ <li><a href="{{link}}">{{title}}</a></li>
1403
+ {{/each}}
1404
+ {{#if defaultSuggestions.categoriesLink}}
1405
+ <li><a href="{{defaultSuggestions.categoriesLink.href}}" class="view-more">{{#if defaultSuggestions.categoriesLink.label}}{{defaultSuggestions.categoriesLink.label}}{{else}}View More{{/if}}</a></li>
1406
+ {{/if}}
1407
+ </ul>
1408
+ </div>
1409
+ </div>
1410
+ {{/if}}
1411
+ {{#if hasDynamicSuggestions}}
1412
+ <div class="dynamic-suggestions" {{#if dynamicSuggestionsServiceLink.href}}data-view-more="{{dynamicSuggestionsServiceLink.href}}"{{/if}}></div>
1413
+ {{/if}}
1414
+ </div>
1415
+ {{/ifCond}}
1416
+ </div>`;
1373
1417
  }
1374
1418
  });
1375
1419
 
@@ -1377,7 +1421,7 @@ var init_searchInput = __esm({
1377
1421
  var select_default;
1378
1422
  var init_select = __esm({
1379
1423
  "src/components/bs5/select/select.hbs?raw"() {
1380
- select_default = '<!-- QGDS Component: Select -->\n\n<!-- Label for the first input field -->\n<label class="qld-text-input-label {{#if isRequired}}field-required{{/if}} {{#if isDisabled}}field-disabled{{/if}}" for="example-1">\n {{label-text}}\n {{#if optional-text}}\n <span class="label-text-optional">({{optional-text}})</span></label>\n {{/if}}\n\n<!-- Hint text for the first input field -->\n{{#if hint-text}}\n<span class="qld-hint-text" id="example-1-hint">{{hint-text}}</span>\n{{/if}}\n\n{{#contains "qld-input-success" customClass}}\n<span id="text-field-success" class="qld-input-success">\n {{successMessageText}}\n</span>\n{{/contains}}\n\n{{#contains "qld-input-error" customClass}}\n<span id="text-field-error" class="qld-input-error">\n {{errorMessageText}}\n</span>\n{{/contains}}\n\n<!-- First text input field, described by the hint text above -->\n<select class="qld-text-input form-select qld-select qld-field-width-1-quarter {{customClass}}"\n aria-label="Default select example" {{#if isDisabled}}disabled{{/if}} {{#if isRequired}}required aria-required="true"{{/if}}>\n <option selected>{{placeholder}}</option>\n <option value="1">Option 1</option>\n <option value="2">Option 2</option>\n <option value="3">Option 3</option>\n</select>\n';
1424
+ select_default = '<!-- QGDS Component: Select -->\n\n<label class="qld-text-input-label {{#if isRequired}}field-required{{/if}} {{#if isDisabled}}field-disabled{{/if}}" for="{{id}}">\n {{label-text}}\n {{#if optional-text}}\n <span class="label-text-optional">({{optional-text}})</span>\n {{/if}}\n</label>\n\n{{#if hint-text}}\n<span class="qld-hint-text" id="{{id}}-hint">{{hint-text}}</span>\n{{/if}}\n\n{{#contains "qld-input-success" customClass}}{{! legacy support for feedback classes `qld-input-success`}}\n<span class="qld-input-success">{{successMessageText}}</span>\n{{else}}{{! updated bootstrap style classes - `valid-feedback`}}\n{{#if successMessageText}}\n<div class="valid-feedback">{{successMessageText}}</div>\n{{/if}}{{/contains}}\n\n{{#contains "qld-input-error" customClass}}{{! legacy support for feedback classes `qld-input-error`}}\n<span class="qld-input-error">{{errorMessageText}}</span>\n{{else}}{{! updated bootstrap style classes - `invalid-feedback`}}\n{{#if errorMessageText}}\n<div class="invalid-feedback">{{errorMessageText}}</div>\n{{/if}}{{/contains}}\n\n<select id={{id}} class="form-select {{#if isFilled}}is-filled{{/if}} {{#if isValid}}is-valid{{else}}{{#ifCond isValid "===" false}}is-invalid{{/ifCond}}{{/if}} {{customClass}}" \n {{#if hint-text}}aria-describedby="{{id}}-hint"{{/if}} {{#if isDisabled}}disabled{{/if}} {{#if isRequired}}required{{/if}} >\n <option selected value="">{{placeholder}}</option>\n <option value="1">Option 1</option>\n <option value="2">Option 2</option>\n <option value="3">Option 3</option>\n</select>\n';
1381
1425
  }
1382
1426
  });
1383
1427
 
@@ -1486,7 +1530,7 @@ var init_tag = __esm({
1486
1530
  var textarea_default;
1487
1531
  var init_textarea = __esm({
1488
1532
  "src/components/bs5/textarea/textarea.hbs?raw"() {
1489
- textarea_default = '<!-- QGDS Component: Textarea -->\n\n<!-- Label for the first input field -->\n<label class="qld-text-input-label {{#if isRequired}}field-required{{/if}} {{#if isDisabled}}field-disabled{{/if}}"\n for="example-1">\n {{label-text}}\n {{#if optional-text}}\n <span class="label-text-optional">({{optional-text}})</span>\n {{/if}}\n</label>\n\n<!-- Hint text for the first input field -->\n{{#if hint-text}}\n<span class="qld-hint-text" id="example-1-hint">{{hint-text}}</span>\n{{/if}}\n\n{{#contains "qld-input-success" customClass}}\n<span id="text-field-success" class="qld-input-success">\n {{successMessageText}}\n</span>\n{{/contains}}\n\n{{#contains "qld-input-error" customClass}}\n<span id="text-field-error" class="qld-input-error">\n {{errorMessageText}}\n</span>\n{{/contains}}\n\n<!-- First text input field, described by the hint text above -->\n<textarea id="example-1" class="qld-text-input form-control {{customClass}} {{#if isFilled}}form-style-filled{{/if}}"\n placeholder="{{placeholder}}" rows="{{rows}}" {{#if isDisabled}}disabled{{/if}} {{#if isRequired}}required\n aria-required="true" {{/if}}></textarea>';
1533
+ textarea_default = '<!-- QGDS Component: Textarea -->\n\n<label class="qld-text-input-label {{#if isRequired}}field-required{{/if}} {{#if isDisabled}}field-disabled{{/if}}"\n for="{{id}}">\n {{label-text}}\n {{#if optional-text}}\n <span class="label-text-optional">({{optional-text}})</span>\n {{/if}}\n</label>\n\n{{#if hint-text}}\n<span class="qld-hint-text" id="{{id}}-hint">{{hint-text}}</span>\n{{/if}}\n\n{{#contains "qld-input-success" customClass}}{{! legacy support for feedback classes `qld-input-success`}}\n<span class="qld-input-success">{{successMessageText}}</span>\n{{else}}\n{{#if successMessageText}}{{! updated bootstrap style classes - `valid-feedback`}}\n<div class="valid-feedback">{{successMessageText}}</div>\n{{/if}}{{/contains}}\n\n{{#contains "qld-input-error" customClass}}{{! legacy support for feedback classes `qld-input-error`}}\n<span class="qld-input-error">{{errorMessageText}}</span>\n{{else}}\n{{#if errorMessageText}}{{! updated bootstrap style classes - `invalid-feedback`}}\n<div class="invalid-feedback">{{errorMessageText}}</div>\n{{/if}}{{/contains}}\n\n<!-- First text input field, described by the hint text above -->\n<textarea id="{{id}}" class="form-control {{customClass}} {{#if isFilled}}is-filled{{/if}} {{#if isValid}}is-valid{{else}}{{#ifCond isValid "===" false}}is-invalid{{/ifCond}}{{/if}}"\n placeholder="{{placeholder}}" rows="{{rows}}" {{#if isDisabled}}disabled{{/if}} {{#if isRequired}}required{{/if}}\n {{#if hint-text}}aria-describedby="{{id}}-hint"{{/if}}>{{value}}</textarea>';
1490
1534
  }
1491
1535
  });
1492
1536
 
@@ -1494,7 +1538,7 @@ var init_textarea = __esm({
1494
1538
  var textbox_default;
1495
1539
  var init_textbox = __esm({
1496
1540
  "src/components/bs5/textbox/textbox.hbs?raw"() {
1497
- textbox_default = '<!-- QGDS Component: Textbox -->\n\n<!-- Label for the first input field -->\n<label class="qld-text-input-label {{#if isRequired}}field-required{{/if}} {{#if isDisabled}}field-disabled{{/if}}"\n for="example-1">\n {{label-text}}\n {{#if optional-text}}\n <span class="label-text-optional">({{optional-text}})</span>\n {{/if}}\n</label>\n\n<!-- Hint text for the first input field -->\n{{#if hint-text}}\n<span class="qld-hint-text" id="example-1-hint">{{hint-text}}</span>\n{{/if}}\n\n{{#contains "qld-input-success" customClass}}\n<span id="text-field-success" class="qld-input-success">\n {{successMessageText}}\n</span>\n{{/contains}}\n\n{{#contains "qld-input-error" customClass}}\n<span id="text-field-error" class="qld-input-error">\n {{errorMessageText}}\n</span>\n{{/contains}}\n\n<!-- First text input field, described by the hint text above -->\n<input id="example-1" class="qld-text-input form-control {{customClass}} {{#if isFilled}}form-style-filled{{/if}}"\n type="text" placeholder="{{placeholder}}" aria-label="Text input example" {{#if isDisabled}}disabled{{/if}} {{#if\n isRequired}}required aria-required="true" {{/if}} />';
1541
+ textbox_default = '<!-- QGDS Component: Textbox -->\n\n<label class="qld-text-input-label {{#if isRequired}}field-required{{/if}} {{#if isDisabled}}field-disabled{{/if}}"\n for="{{id}}">\n {{label-text}}\n {{#if optional-text}}\n <span class="label-text-optional">({{optional-text}})</span>\n {{/if}}\n</label>\n\n{{#if hint-text}}\n<span class="qld-hint-text" id="{{id}}-hint">{{hint-text}}</span>\n{{/if}}\n\n{{#contains "qld-input-success" customClass}}{{! legacy support for feedback classes `qld-input-success`}}\n<span class="qld-input-success">{{successMessageText}}</span>\n{{else}}\n{{#if successMessageText}}{{! updated bootstrap style classes - `valid-feedback`}}\n<div class="valid-feedback">{{successMessageText}}</div>\n{{/if}}{{/contains}}\n\n{{#contains "qld-input-error" customClass}}{{! legacy support for feedback classes `qld-input-error`}}\n<span class="qld-input-error">{{errorMessageText}}</span>\n{{else}}\n{{#if errorMessageText}}{{! updated bootstrap style classes - `invalid-feedback`}}\n<div class="invalid-feedback">{{errorMessageText}}</div>\n{{/if}}{{/contains}}\n\n<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}}"\n type="text" placeholder="{{placeholder}}" {{#if isDisabled}}disabled{{/if}} {{#if\n isRequired}}required{{/if}} {{#if hint-text}}aria-describedby="{{id}}-hint"{{/if}} />';
1498
1542
  }
1499
1543
  });
1500
1544