@ukic/web-components 2.21.0 → 2.22.0

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 (105) hide show
  1. package/dist/cjs/core.cjs.js +1 -1
  2. package/dist/cjs/ic-button_3.cjs.entry.js +1 -1
  3. package/dist/cjs/ic-button_3.cjs.entry.js.map +1 -1
  4. package/dist/cjs/ic-checkbox.cjs.entry.js +2 -1
  5. package/dist/cjs/ic-checkbox.cjs.entry.js.map +1 -1
  6. package/dist/cjs/ic-dialog.cjs.entry.js +1 -1
  7. package/dist/cjs/ic-dialog.cjs.entry.js.map +1 -1
  8. package/dist/cjs/ic-input-component-container_3.cjs.entry.js +5 -7
  9. package/dist/cjs/ic-input-component-container_3.cjs.entry.js.map +1 -1
  10. package/dist/cjs/ic-input-label_2.cjs.entry.js.map +1 -1
  11. package/dist/cjs/ic-navigation-item.cjs.entry.js.map +1 -1
  12. package/dist/cjs/ic-search-bar.cjs.entry.js.map +1 -1
  13. package/dist/cjs/ic-side-navigation.cjs.entry.js +1 -1
  14. package/dist/cjs/ic-side-navigation.cjs.entry.js.map +1 -1
  15. package/dist/cjs/ic-step.cjs.entry.js.map +1 -1
  16. package/dist/cjs/ic-toggle-button.cjs.entry.js +4 -2
  17. package/dist/cjs/ic-toggle-button.cjs.entry.js.map +1 -1
  18. package/dist/cjs/loader.cjs.js +1 -1
  19. package/dist/collection/components/ic-button/ic-button.css +41 -171
  20. package/dist/collection/components/ic-checkbox/ic-checkbox.js +20 -1
  21. package/dist/collection/components/ic-checkbox/ic-checkbox.js.map +1 -1
  22. package/dist/collection/components/ic-checkbox-group/test/basic/ic-checkbox-group.spec.js +11 -2
  23. package/dist/collection/components/ic-checkbox-group/test/basic/ic-checkbox-group.spec.js.map +1 -1
  24. package/dist/collection/components/ic-dialog/ic-dialog.css +10 -5
  25. package/dist/collection/components/ic-input-label/ic-input-label.css +11 -0
  26. package/dist/collection/components/ic-menu/ic-menu.css +1 -0
  27. package/dist/collection/components/ic-menu/ic-menu.js +4 -6
  28. package/dist/collection/components/ic-menu/ic-menu.js.map +1 -1
  29. package/dist/collection/components/ic-navigation-item/ic-navigation-item.js +1 -0
  30. package/dist/collection/components/ic-navigation-item/ic-navigation-item.js.map +1 -1
  31. package/dist/collection/components/ic-search-bar/ic-search-bar.js.map +1 -1
  32. package/dist/collection/components/ic-side-navigation/ic-side-navigation.css +4 -0
  33. package/dist/collection/components/ic-step/ic-step.css +13 -0
  34. package/dist/collection/components/ic-toggle-button/ic-toggle-button.css +5 -0
  35. package/dist/collection/components/ic-toggle-button/ic-toggle-button.js +3 -1
  36. package/dist/collection/components/ic-toggle-button/ic-toggle-button.js.map +1 -1
  37. package/dist/components/ic-button2.js +1 -1
  38. package/dist/components/ic-button2.js.map +1 -1
  39. package/dist/components/ic-checkbox.js +3 -1
  40. package/dist/components/ic-checkbox.js.map +1 -1
  41. package/dist/components/ic-dialog.js +1 -1
  42. package/dist/components/ic-dialog.js.map +1 -1
  43. package/dist/components/ic-input-label2.js.map +1 -1
  44. package/dist/components/ic-menu2.js +5 -7
  45. package/dist/components/ic-menu2.js.map +1 -1
  46. package/dist/components/ic-navigation-item.js.map +1 -1
  47. package/dist/components/ic-search-bar.js.map +1 -1
  48. package/dist/components/ic-side-navigation.js +1 -1
  49. package/dist/components/ic-side-navigation.js.map +1 -1
  50. package/dist/components/ic-step.js.map +1 -1
  51. package/dist/components/ic-toggle-button.js +4 -2
  52. package/dist/components/ic-toggle-button.js.map +1 -1
  53. package/dist/core/core.esm.js +1 -1
  54. package/dist/core/core.esm.js.map +1 -1
  55. package/dist/core/p-26793ea2.entry.js +2 -0
  56. package/dist/core/p-26793ea2.entry.js.map +1 -0
  57. package/dist/core/{p-de40b0b1.entry.js → p-27bdf6e5.entry.js} +2 -2
  58. package/dist/core/p-27bdf6e5.entry.js.map +1 -0
  59. package/dist/core/p-4a0acd0f.entry.js.map +1 -1
  60. package/dist/core/p-687af4e5.entry.js.map +1 -1
  61. package/dist/core/p-7dbd0a9f.entry.js.map +1 -1
  62. package/dist/core/p-9de95c50.entry.js +2 -0
  63. package/dist/core/p-9de95c50.entry.js.map +1 -0
  64. package/dist/core/p-bbfe15b5.entry.js +2 -0
  65. package/dist/core/p-bbfe15b5.entry.js.map +1 -0
  66. package/dist/core/{p-adecaedd.entry.js → p-c698064f.entry.js} +2 -2
  67. package/dist/core/p-c698064f.entry.js.map +1 -0
  68. package/dist/core/p-e6a8f0de.entry.js +2 -0
  69. package/dist/core/p-e6a8f0de.entry.js.map +1 -0
  70. package/dist/core/p-e70c6b33.entry.js.map +1 -1
  71. package/dist/esm/core.js +1 -1
  72. package/dist/esm/ic-button_3.entry.js +1 -1
  73. package/dist/esm/ic-button_3.entry.js.map +1 -1
  74. package/dist/esm/ic-checkbox.entry.js +2 -1
  75. package/dist/esm/ic-checkbox.entry.js.map +1 -1
  76. package/dist/esm/ic-dialog.entry.js +1 -1
  77. package/dist/esm/ic-dialog.entry.js.map +1 -1
  78. package/dist/esm/ic-input-component-container_3.entry.js +5 -7
  79. package/dist/esm/ic-input-component-container_3.entry.js.map +1 -1
  80. package/dist/esm/ic-input-label_2.entry.js.map +1 -1
  81. package/dist/esm/ic-navigation-item.entry.js.map +1 -1
  82. package/dist/esm/ic-search-bar.entry.js.map +1 -1
  83. package/dist/esm/ic-side-navigation.entry.js +1 -1
  84. package/dist/esm/ic-side-navigation.entry.js.map +1 -1
  85. package/dist/esm/ic-step.entry.js.map +1 -1
  86. package/dist/esm/ic-toggle-button.entry.js +4 -2
  87. package/dist/esm/ic-toggle-button.entry.js.map +1 -1
  88. package/dist/esm/loader.js +1 -1
  89. package/dist/types/components/ic-checkbox/ic-checkbox.d.ts +4 -0
  90. package/dist/types/components/ic-navigation-item/ic-navigation-item.d.ts +1 -0
  91. package/dist/types/components/ic-toggle-button/ic-toggle-button.d.ts +1 -0
  92. package/dist/types/components.d.ts +8 -0
  93. package/hydrate/index.js +16 -13
  94. package/package.json +2 -2
  95. package/vscode-data.json +4 -0
  96. package/dist/core/p-adecaedd.entry.js.map +0 -1
  97. package/dist/core/p-cbba9c7c.entry.js +0 -2
  98. package/dist/core/p-cbba9c7c.entry.js.map +0 -1
  99. package/dist/core/p-d3f10067.entry.js +0 -2
  100. package/dist/core/p-d3f10067.entry.js.map +0 -1
  101. package/dist/core/p-dae27567.entry.js +0 -2
  102. package/dist/core/p-dae27567.entry.js.map +0 -1
  103. package/dist/core/p-de40b0b1.entry.js.map +0 -1
  104. package/dist/core/p-fe702898.entry.js +0 -2
  105. package/dist/core/p-fe702898.entry.js.map +0 -1
@@ -32,6 +32,7 @@ export class Checkbox {
32
32
  this.size = undefined;
33
33
  this.small = false;
34
34
  this.value = undefined;
35
+ this.hideLabel = false;
35
36
  }
36
37
  componentWillLoad() {
37
38
  removeDisabledFalse(this.disabled, this.el);
@@ -92,7 +93,7 @@ export class Checkbox {
92
93
  checkbox: true,
93
94
  checked,
94
95
  indeterminate,
95
- }, type: "checkbox", name: name, id: id, value: value, disabled: disabled ? true : null, checked: checked, indeterminate: indeterminate, onClick: this.handleClick, form: form, formaction: formaction, formenctype: formenctype, formmethod: formmethod, formnovalidate: formnovalidate, formtarget: formtarget }), h("ic-typography", { class: "checkbox-label", variant: "body" }, h("label", { htmlFor: id }, label))), isSlotUsed(el, "additional-field") && (h("div", { class: "dynamic-container", ref: (el) => (this.additionalFieldContainer = el) }, additionalFieldDisplay === "dynamic" && (h("div", { class: "branch-corner" })), h("div", null, additionalFieldDisplay === "dynamic" && (h("ic-typography", { variant: "caption" }, h("p", { class: "dynamic-text", "aria-live": "polite" }, dynamicText))), h("div", { class: {
96
+ }, type: "checkbox", name: name, id: id, value: value, disabled: disabled ? true : null, checked: checked, indeterminate: indeterminate, onClick: this.handleClick, form: form, formaction: formaction, formenctype: formenctype, formmethod: formmethod, formnovalidate: formnovalidate, formtarget: formtarget, "aria-label": this.hideLabel ? this.label : undefined }), !this.hideLabel && (h("ic-typography", { class: "checkbox-label", variant: "body" }, h("label", { htmlFor: id }, label)))), isSlotUsed(el, "additional-field") && (h("div", { class: "dynamic-container", ref: (el) => (this.additionalFieldContainer = el) }, additionalFieldDisplay === "dynamic" && (h("div", { class: "branch-corner" })), h("div", null, additionalFieldDisplay === "dynamic" && (h("ic-typography", { variant: "caption" }, h("p", { class: "dynamic-text", "aria-live": "polite" }, dynamicText))), h("div", { class: {
96
97
  "additional-field-wrapper": additionalFieldDisplay === "static",
97
98
  } }, h("slot", { name: "additional-field" })))))));
98
99
  }
@@ -420,6 +421,24 @@ export class Checkbox {
420
421
  },
421
422
  "attribute": "value",
422
423
  "reflect": false
424
+ },
425
+ "hideLabel": {
426
+ "type": "boolean",
427
+ "mutable": false,
428
+ "complexType": {
429
+ "original": "boolean",
430
+ "resolved": "boolean",
431
+ "references": {}
432
+ },
433
+ "required": false,
434
+ "optional": false,
435
+ "docs": {
436
+ "tags": [],
437
+ "text": "If `true`, the label will be hidden and the required label value will be applied as an aria-label."
438
+ },
439
+ "attribute": "hide-label",
440
+ "reflect": false,
441
+ "defaultValue": "false"
423
442
  }
424
443
  };
425
444
  }
@@ -1 +1 @@
1
- {"version":3,"file":"ic-checkbox.js","sourceRoot":"","sources":["../../../src/components/ic-checkbox/ic-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n h,\n Prop,\n Element,\n Event,\n EventEmitter,\n State,\n Method,\n} from \"@stencil/core\";\nimport { IcAdditionalFieldTypes, IcSizes } from \"../../utils/types\";\nimport {\n isSlotUsed,\n onComponentRequiredPropUndefined,\n renderHiddenInput,\n removeHiddenInput,\n addFormResetListener,\n removeFormResetListener,\n removeDisabledFalse,\n isPropDefined,\n} from \"../../utils/helpers\";\n\n/**\n * @slot additional-field - Content to be displayed alongside a checkbox.\n */\n@Component({\n tag: \"ic-checkbox\",\n styleUrl: \"ic-checkbox.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport class Checkbox {\n private additionalFieldContainer: HTMLDivElement;\n\n @Element() el: HTMLIcCheckboxElement;\n\n /**\n * The style of additionalField that will be displayed if used.\n */\n @Prop({ reflect: true }) additionalFieldDisplay: IcAdditionalFieldTypes =\n \"static\";\n\n /**\n * If `true`, the checkbox will be set to the checked state.\n */\n @Prop({ reflect: true, mutable: true }) checked?: boolean = false;\n @State() initiallyChecked = this.checked;\n\n /**\n * If `true`, the checkbox will be set to the disabled state.\n */\n @Prop() disabled?: boolean = false;\n\n /**\n * The text to be displayed when dynamic.\n */\n\n @Prop() dynamicText: string = \"This selection requires additional answers\";\n\n /**\n * The <form> element to associate the checkbox with.\n */\n @Prop() form?: string;\n\n /**\n * The URL that processes the information submitted by the checkbox. It overrides the action attribute of the checkbox's form owner. Does nothing if there is no form owner.\n */\n @Prop() formaction?: string;\n\n /**\n * The way the submitted form data is encoded.\n */\n @Prop() formenctype?: string;\n\n /**\n * The HTTP method used to submit the form.\n */\n @Prop() formmethod?: string;\n\n /**\n * If `true`, the form will not be validated when submitted.\n */\n @Prop() formnovalidate?: boolean;\n\n /**\n * The place to display the response from submitting the form. It overrides the target attribute of the checkbox's form owner.\n */\n @Prop() formtarget?: string;\n\n /**\n * The group label for the checkbox.\n */\n @Prop() groupLabel: string;\n\n /**\n * If `true`, the indeterminate state will be displayed when checked.\n */\n @Prop() indeterminate: boolean = false;\n\n /**\n * The label for the checkbox.\n */\n @Prop() label!: string;\n\n /**\n * The name for the checkbox. If not set when used in a checkbox group, the name will be based on the group name.\n */\n @Prop() name: string;\n\n /**\n * The size of the checkbox to be displayed. This does not affect the font size of the label. If a checkbox is contained in a checkbox group, this will override the size set on checkbox group.\n */\n @Prop() size?: IcSizes;\n\n /**\n * @deprecated This prop should not be used anymore. Set prop `size` to \"small\" instead.\n */\n @Prop() small?: boolean = false;\n\n /**\n * The value for the checkbox.\n */\n @Prop() value!: string;\n\n /**\n * @deprecated This event should not be used anymore. Use icCheck instead.\n */\n @Event() checkboxChecked: EventEmitter<void>;\n\n /**\n * Emitted when a checkbox has been checked.\n */\n @Event() icCheck: EventEmitter<void>;\n\n componentWillLoad(): void {\n removeDisabledFalse(this.disabled, this.el);\n\n addFormResetListener(this.el, this.handleFormReset);\n\n const checkboxGroup = this.el.parentElement as HTMLIcCheckboxGroupElement;\n if (checkboxGroup) {\n if (!this.name) this.name = checkboxGroup.name;\n this.groupLabel = checkboxGroup.label;\n }\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [\n { prop: this.label, propName: \"label\" },\n { prop: this.value, propName: \"value\" },\n ],\n \"Checkbox\"\n );\n }\n\n componentDidRender(): void {\n if (this.additionalFieldDisplay === \"static\") {\n const textfield = this.el.querySelector(\"ic-text-field\");\n if (!this.checked) {\n textfield?.setAttribute(\"disabled\", \"\");\n } else {\n textfield?.removeAttribute(\"disabled\");\n }\n } else if (this.additionalFieldContainer) {\n this.additionalFieldContainer.style.display = !this.checked\n ? \"none\"\n : \"flex\";\n }\n }\n\n disconnectedCallback(): void {\n removeFormResetListener(this.el, this.handleFormReset);\n }\n\n /**\n * Sets focus on the checkbox.\n */\n @Method()\n async setFocus(): Promise<void> {\n this.el.shadowRoot.querySelector<HTMLElement>(\".checkbox\")?.focus();\n }\n\n private handleClick = () => {\n this.checked = !this.checked;\n this.icCheck.emit();\n this.checkboxChecked.emit();\n };\n\n private handleFormReset = (): void => {\n this.checked = this.initiallyChecked;\n };\n\n render() {\n const {\n additionalFieldDisplay,\n checked,\n disabled,\n dynamicText,\n el,\n form,\n formaction,\n formenctype,\n formmethod,\n formnovalidate,\n formtarget,\n indeterminate,\n groupLabel,\n label,\n name,\n size,\n small,\n value,\n } = this;\n\n const id = `ic-checkbox-${\n isPropDefined(label) || value\n }-${groupLabel}`.replace(/ /g, \"-\");\n\n const parentElementSize = (el.parentElement as HTMLIcCheckboxGroupElement)\n .size;\n\n checked\n ? renderHiddenInput(true, el, name, checked && value, disabled)\n : removeHiddenInput(el);\n\n return (\n <Host\n class={{\n disabled,\n small,\n [`${size || parentElementSize}`]: true,\n }}\n >\n <div class=\"container\">\n {checked &&\n (!indeterminate ? (\n <svg\n class=\"checkmark\"\n width=\"1.5rem\"\n height=\"1.5rem\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n >\n <title>checkmark icon</title>\n <path d=\"M21 6.285l-11.16 12.733-6.84-6.018 1.319-1.49 5.341 4.686 9.865-11.196 1.475 1.285z\" />\n </svg>\n ) : (\n <div class=\"indeterminate-symbol\" />\n ))}\n <input\n role=\"checkbox\"\n class={{\n checkbox: true,\n checked,\n indeterminate,\n }}\n type=\"checkbox\"\n name={name}\n id={id}\n value={value}\n disabled={disabled ? true : null}\n checked={checked}\n indeterminate={indeterminate}\n onClick={this.handleClick}\n form={form}\n formaction={formaction}\n formenctype={formenctype}\n formmethod={formmethod}\n formnovalidate={formnovalidate}\n formtarget={formtarget}\n ></input>\n <ic-typography class=\"checkbox-label\" variant=\"body\">\n <label htmlFor={id}>{label}</label>\n </ic-typography>\n </div>\n {isSlotUsed(el, \"additional-field\") && (\n <div\n class=\"dynamic-container\"\n ref={(el) => (this.additionalFieldContainer = el)}\n >\n {additionalFieldDisplay === \"dynamic\" && (\n <div class=\"branch-corner\"></div>\n )}\n <div>\n {additionalFieldDisplay === \"dynamic\" && (\n <ic-typography variant=\"caption\">\n <p class=\"dynamic-text\" aria-live=\"polite\">\n {dynamicText}\n </p>\n </ic-typography>\n )}\n <div\n class={{\n \"additional-field-wrapper\":\n additionalFieldDisplay === \"static\",\n }}\n >\n <slot name=\"additional-field\"></slot>\n </div>\n </div>\n </div>\n )}\n </Host>\n );\n }\n}\n"]}
1
+ {"version":3,"file":"ic-checkbox.js","sourceRoot":"","sources":["../../../src/components/ic-checkbox/ic-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n h,\n Prop,\n Element,\n Event,\n EventEmitter,\n State,\n Method,\n} from \"@stencil/core\";\nimport { IcAdditionalFieldTypes, IcSizes } from \"../../utils/types\";\nimport {\n isSlotUsed,\n onComponentRequiredPropUndefined,\n renderHiddenInput,\n removeHiddenInput,\n addFormResetListener,\n removeFormResetListener,\n removeDisabledFalse,\n isPropDefined,\n} from \"../../utils/helpers\";\n\n/**\n * @slot additional-field - Content to be displayed alongside a checkbox.\n */\n@Component({\n tag: \"ic-checkbox\",\n styleUrl: \"ic-checkbox.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport class Checkbox {\n private additionalFieldContainer: HTMLDivElement;\n\n @Element() el: HTMLIcCheckboxElement;\n\n /**\n * The style of additionalField that will be displayed if used.\n */\n @Prop({ reflect: true }) additionalFieldDisplay: IcAdditionalFieldTypes =\n \"static\";\n\n /**\n * If `true`, the checkbox will be set to the checked state.\n */\n @Prop({ reflect: true, mutable: true }) checked?: boolean = false;\n @State() initiallyChecked = this.checked;\n\n /**\n * If `true`, the checkbox will be set to the disabled state.\n */\n @Prop() disabled?: boolean = false;\n\n /**\n * The text to be displayed when dynamic.\n */\n\n @Prop() dynamicText: string = \"This selection requires additional answers\";\n\n /**\n * The <form> element to associate the checkbox with.\n */\n @Prop() form?: string;\n\n /**\n * The URL that processes the information submitted by the checkbox. It overrides the action attribute of the checkbox's form owner. Does nothing if there is no form owner.\n */\n @Prop() formaction?: string;\n\n /**\n * The way the submitted form data is encoded.\n */\n @Prop() formenctype?: string;\n\n /**\n * The HTTP method used to submit the form.\n */\n @Prop() formmethod?: string;\n\n /**\n * If `true`, the form will not be validated when submitted.\n */\n @Prop() formnovalidate?: boolean;\n\n /**\n * The place to display the response from submitting the form. It overrides the target attribute of the checkbox's form owner.\n */\n @Prop() formtarget?: string;\n\n /**\n * The group label for the checkbox.\n */\n @Prop() groupLabel: string;\n\n /**\n * If `true`, the indeterminate state will be displayed when checked.\n */\n @Prop() indeterminate: boolean = false;\n\n /**\n * The label for the checkbox.\n */\n @Prop() label!: string;\n\n /**\n * The name for the checkbox. If not set when used in a checkbox group, the name will be based on the group name.\n */\n @Prop() name: string;\n\n /**\n * The size of the checkbox to be displayed. This does not affect the font size of the label. If a checkbox is contained in a checkbox group, this will override the size set on checkbox group.\n */\n @Prop() size?: IcSizes;\n\n /**\n * @deprecated This prop should not be used anymore. Set prop `size` to \"small\" instead.\n */\n @Prop() small?: boolean = false;\n\n /**\n * The value for the checkbox.\n */\n @Prop() value!: string;\n\n /**\n * If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n */\n @Prop() hideLabel = false;\n\n /**\n * @deprecated This event should not be used anymore. Use icCheck instead.\n */\n @Event() checkboxChecked: EventEmitter<void>;\n\n /**\n * Emitted when a checkbox has been checked.\n */\n @Event() icCheck: EventEmitter<void>;\n\n componentWillLoad(): void {\n removeDisabledFalse(this.disabled, this.el);\n\n addFormResetListener(this.el, this.handleFormReset);\n\n const checkboxGroup = this.el.parentElement as HTMLIcCheckboxGroupElement;\n if (checkboxGroup) {\n if (!this.name) this.name = checkboxGroup.name;\n this.groupLabel = checkboxGroup.label;\n }\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [\n { prop: this.label, propName: \"label\" },\n { prop: this.value, propName: \"value\" },\n ],\n \"Checkbox\"\n );\n }\n\n componentDidRender(): void {\n if (this.additionalFieldDisplay === \"static\") {\n const textfield = this.el.querySelector(\"ic-text-field\");\n if (!this.checked) {\n textfield?.setAttribute(\"disabled\", \"\");\n } else {\n textfield?.removeAttribute(\"disabled\");\n }\n } else if (this.additionalFieldContainer) {\n this.additionalFieldContainer.style.display = !this.checked\n ? \"none\"\n : \"flex\";\n }\n }\n\n disconnectedCallback(): void {\n removeFormResetListener(this.el, this.handleFormReset);\n }\n\n /**\n * Sets focus on the checkbox.\n */\n @Method()\n async setFocus(): Promise<void> {\n this.el.shadowRoot.querySelector<HTMLElement>(\".checkbox\")?.focus();\n }\n\n private handleClick = () => {\n this.checked = !this.checked;\n this.icCheck.emit();\n this.checkboxChecked.emit();\n };\n\n private handleFormReset = (): void => {\n this.checked = this.initiallyChecked;\n };\n\n render() {\n const {\n additionalFieldDisplay,\n checked,\n disabled,\n dynamicText,\n el,\n form,\n formaction,\n formenctype,\n formmethod,\n formnovalidate,\n formtarget,\n indeterminate,\n groupLabel,\n label,\n name,\n size,\n small,\n value,\n } = this;\n\n const id = `ic-checkbox-${\n isPropDefined(label) || value\n }-${groupLabel}`.replace(/ /g, \"-\");\n\n const parentElementSize = (el.parentElement as HTMLIcCheckboxGroupElement)\n .size;\n\n checked\n ? renderHiddenInput(true, el, name, checked && value, disabled)\n : removeHiddenInput(el);\n\n return (\n <Host\n class={{\n disabled,\n small,\n [`${size || parentElementSize}`]: true,\n }}\n >\n <div class=\"container\">\n {checked &&\n (!indeterminate ? (\n <svg\n class=\"checkmark\"\n width=\"1.5rem\"\n height=\"1.5rem\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n >\n <title>checkmark icon</title>\n <path d=\"M21 6.285l-11.16 12.733-6.84-6.018 1.319-1.49 5.341 4.686 9.865-11.196 1.475 1.285z\" />\n </svg>\n ) : (\n <div class=\"indeterminate-symbol\" />\n ))}\n <input\n role=\"checkbox\"\n class={{\n checkbox: true,\n checked,\n indeterminate,\n }}\n type=\"checkbox\"\n name={name}\n id={id}\n value={value}\n disabled={disabled ? true : null}\n checked={checked}\n indeterminate={indeterminate}\n onClick={this.handleClick}\n form={form}\n formaction={formaction}\n formenctype={formenctype}\n formmethod={formmethod}\n formnovalidate={formnovalidate}\n formtarget={formtarget}\n aria-label={this.hideLabel ? this.label : undefined}\n ></input>\n {!this.hideLabel && (\n <ic-typography class=\"checkbox-label\" variant=\"body\">\n <label htmlFor={id}>{label}</label>\n </ic-typography>\n )}\n </div>\n {isSlotUsed(el, \"additional-field\") && (\n <div\n class=\"dynamic-container\"\n ref={(el) => (this.additionalFieldContainer = el)}\n >\n {additionalFieldDisplay === \"dynamic\" && (\n <div class=\"branch-corner\"></div>\n )}\n <div>\n {additionalFieldDisplay === \"dynamic\" && (\n <ic-typography variant=\"caption\">\n <p class=\"dynamic-text\" aria-live=\"polite\">\n {dynamicText}\n </p>\n </ic-typography>\n )}\n <div\n class={{\n \"additional-field-wrapper\":\n additionalFieldDisplay === \"static\",\n }}\n >\n <slot name=\"additional-field\"></slot>\n </div>\n </div>\n </div>\n )}\n </Host>\n );\n }\n}\n"]}
@@ -55,15 +55,24 @@ describe("ic-checkbox-group", () => {
55
55
  });
56
56
  expect(page.root).toMatchSnapshot("renders-indeterminate");
57
57
  });
58
- it("should render an aria label when label hidden", async () => {
58
+ it("should render an aria label when group label hidden", async () => {
59
59
  const page = await newSpecPage({
60
60
  components: [CheckboxGroup, Checkbox],
61
61
  html: `<ic-checkbox-group label="test label" hide-label name="test">
62
- <ic-checkbox value="test" label="test label"></ic-checkbox>
62
+ <ic-checkbox value="test" label="test label"></ic-checkbox>
63
63
  </ic-checkbox-group>`,
64
64
  });
65
65
  expect(page.root).toMatchSnapshot("renders-hidden-label");
66
66
  });
67
+ it("should render an aria label when checkbox label hidden", async () => {
68
+ const page = await newSpecPage({
69
+ components: [CheckboxGroup, Checkbox],
70
+ html: `<ic-checkbox-group label="test label" name="test">
71
+ <ic-checkbox value="test" label="test label" hide-label></ic-checkbox>
72
+ </ic-checkbox-group>`,
73
+ });
74
+ expect(page.root).toMatchSnapshot("renders-hidden-checkbox-label");
75
+ });
67
76
  it("should render in a disabled state", async () => {
68
77
  const page = await newSpecPage({
69
78
  components: [CheckboxGroup, Checkbox],
@@ -1 +1 @@
1
- {"version":3,"file":"ic-checkbox-group.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-checkbox-group/test/basic/ic-checkbox-group.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { CheckboxGroup } from \"../../ic-checkbox-group\";\nimport { Checkbox } from \"../../../ic-checkbox/ic-checkbox\";\nimport { TextField } from \"../../../ic-text-field/ic-text-field\";\n\ndescribe(\"ic-checkbox-group\", () => {\n it(\"should render\", async () => {\n const page = await newSpecPage({\n components: [CheckboxGroup, Checkbox],\n html: `<ic-checkbox-group label=\"test label\" name=\"test\">\n <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox> \n </ic-checkbox-group>`,\n });\n\n expect(page.root).toMatchSnapshot(\"renders\");\n });\n\n it(\"should render as required\", async () => {\n const page = await newSpecPage({\n components: [CheckboxGroup, Checkbox],\n html: `<ic-checkbox-group label=\"test label\" name=\"test\" required>\n <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox> \n </ic-checkbox-group>`,\n });\n\n expect(page.root).toMatchSnapshot(\"renders-required\");\n });\n\n it(\"should render as helper text\", async () => {\n const page = await newSpecPage({\n components: [CheckboxGroup, Checkbox],\n html: `<ic-checkbox-group label=\"test label\" name=\"test\" helper-text=\"helper test\">\n <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox> \n </ic-checkbox-group>`,\n });\n\n expect(page.root).toMatchSnapshot(\"renders-with-helpertext\");\n });\n\n it(\"should test checkbox option as submit on form\", async () => {\n const page = await newSpecPage({\n components: [Checkbox],\n html: `<form id=\"new-form\"></form><ic-checkbox id=\"ic-checkbox\" label=\"IC Checkbox Test\" value=\"test-value\" form=\"new-form\" selected></ic-checkbox>`,\n });\n\n expect(page.root).toMatchSnapshot();\n });\n\n it(\"should render checked\", async () => {\n const page = await newSpecPage({\n components: [CheckboxGroup, Checkbox],\n html: `<ic-checkbox-group label=\"test label\" name=\"test\">\n <ic-checkbox value=\"test\" checked label=\"test label\"></ic-checkbox> \n </ic-checkbox-group>`,\n });\n\n expect(page.root).toMatchSnapshot(\"renders-checked\");\n });\n\n it(\"should render indeterminate\", async () => {\n const page = await newSpecPage({\n components: [CheckboxGroup, Checkbox],\n html: `<ic-checkbox-group label=\"test label\" name=\"test\">\n <ic-checkbox value=\"test\" checked indeterminate label=\"test label\"></ic-checkbox> \n </ic-checkbox-group>`,\n });\n\n expect(page.root).toMatchSnapshot(\"renders-indeterminate\");\n });\n\n it(\"should render an aria label when label hidden\", async () => {\n const page = await newSpecPage({\n components: [CheckboxGroup, Checkbox],\n html: `<ic-checkbox-group label=\"test label\" hide-label name=\"test\">\n <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox> \n </ic-checkbox-group>`,\n });\n\n expect(page.root).toMatchSnapshot(\"renders-hidden-label\");\n });\n\n it(\"should render in a disabled state\", async () => {\n const page = await newSpecPage({\n components: [CheckboxGroup, Checkbox],\n html: `<ic-checkbox-group label=\"test label\" name=\"test\">\n <ic-checkbox value=\"test\" disabled label=\"test label\"></ic-checkbox> \n </ic-checkbox-group>`,\n });\n\n expect(page.root).toMatchSnapshot(\"renders-disabled\");\n });\n\n it(\"should render with validation status\", async () => {\n const page = await newSpecPage({\n components: [CheckboxGroup, Checkbox],\n html: `<ic-checkbox-group label=\"test label\" hide-label name=\"test\" validation-status=\"error\">\n <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox> \n </ic-checkbox-group>`,\n });\n\n expect(page.root).toMatchSnapshot(\"renders-with-validation\");\n });\n\n it(\"should render with hidden dynamic additional field\", async () => {\n const page = await newSpecPage({\n components: [CheckboxGroup, Checkbox, TextField],\n html: `<ic-checkbox-group label=\"test label\" hide-label name=\"test\" validation-status=\"error\">\n <ic-checkbox value=\"test\" additional-field-display=\"dynamic\" label=\"test label\">\n <ic-text-field slot=\"additional-field\" placeholder=\"Placeholder\" label=\"Test label\"></ic-text-field>\n </ic-checkbox> \n </ic-checkbox-group>`,\n });\n\n expect(page.root).toMatchSnapshot(\"renders-with-dynamic-field\");\n });\n\n it(\"should render with dynamic additional field when checked\", async () => {\n const page = await newSpecPage({\n components: [CheckboxGroup, Checkbox, TextField],\n html: `<ic-checkbox-group label=\"test label\" hide-label name=\"test\" validation-status=\"error\">\n <ic-checkbox value=\"test\" label=\"test label\" additional-field-display=\"dynamic\" checked>\n <ic-text-field slot=\"additional-field\" placeholder=\"Placeholder\" label=\"Test label\"></ic-text-field>\n </ic-checkbox> \n </ic-checkbox-group>`,\n });\n\n expect(page.root).toMatchSnapshot(\n \"renders-with-dynamic-field-when-checked\"\n );\n });\n\n it(\"should render with disabled static additional field\", async () => {\n const page = await newSpecPage({\n components: [CheckboxGroup, Checkbox, TextField],\n html: `<ic-checkbox-group label=\"test label\" hide-label name=\"test\" validation-status=\"error\">\n <ic-checkbox value=\"test\" label=\"test label\" additional-field-display=\"static\">\n <ic-text-field slot=\"additional-field\" placeholder=\"Placeholder\" label=\"Test label\"></ic-text-field>\n </ic-checkbox> \n </ic-checkbox-group>`,\n });\n\n expect(page.root).toMatchSnapshot(\"renders-with-disabled-additional-field\");\n });\n\n it(\"should remove disabled attribute from static additional field when checked\", async () => {\n const page = await newSpecPage({\n components: [CheckboxGroup, Checkbox, TextField],\n html: `<ic-checkbox-group label=\"test label\" hide-label name=\"test\" validation-status=\"error\">\n <ic-checkbox value=\"test\" label=\"test label\" additional-field-display=\"static\" checked>\n <ic-text-field slot=\"additional-field\" placeholder=\"Placeholder\" label=\"Test label\"></ic-text-field>\n </ic-checkbox> \n </ic-checkbox-group>`,\n });\n\n expect(page.root).toMatchSnapshot(\n \"renders-with-disabled-attribute-removed-from-field\"\n );\n });\n\n it(\"should pass the size on the checkbox group to the child checkboxes when there's no size set on them individually\", async () => {\n const page = await newSpecPage({\n components: [CheckboxGroup, Checkbox],\n html: `<ic-checkbox-group label=\"test label\" name=\"test\" size=\"small\">\n <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox>\n <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox> \n </ic-checkbox-group>`,\n });\n\n expect(page.root).toMatchSnapshot();\n\n const checkboxes = page.root.querySelectorAll(\"ic-checkbox\");\n\n checkboxes.forEach((checkbox) => {\n expect(checkbox.classList.contains(\"small\")).toBe(true);\n });\n });\n\n it(\"should prioritise the size on an individual checkbox over the size on the checkbox group\", async () => {\n const page = await newSpecPage({\n components: [CheckboxGroup, Checkbox],\n html: `<ic-checkbox-group label=\"test label\" name=\"test\" size=\"large\">\n <ic-checkbox value=\"test\" label=\"test label\" id=\"large-checkbox\"></ic-checkbox>\n <ic-checkbox value=\"test\" label=\"test label\" size=\"small\" id=\"small-checkbox\"></ic-checkbox> \n </ic-checkbox-group>`,\n });\n\n const smallCheckbox = page.root.querySelector(\n \"ic-checkbox#small-checkbox\"\n ) as HTMLIcCheckboxElement;\n expect(smallCheckbox[\"size\"]).toMatch(\"small\");\n\n const largeCheckbox = page.root.querySelector(\n \"ic-checkbox:not(#small-checkbox)\"\n ) as HTMLIcCheckboxElement;\n expect(largeCheckbox.classList.contains(\"large\")).toBe(true);\n\n expect(page.root).toMatchSnapshot();\n });\n\n it(\"should change checked state\", async () => {\n const page = await newSpecPage({\n components: [Checkbox],\n html: `<ic-checkbox value=\"test\" label=\"test label\" checked></ic-checkbox>`,\n });\n\n expect(page.root.checked).toBe(true);\n\n page.rootInstance.handleClick();\n await page.waitForChanges();\n\n expect(page.root.checked).toBe(false);\n });\n\n it(\"should call 'setFocus' when checkbox is focused\", async () => {\n const page = await newSpecPage({\n components: [Checkbox],\n html: `<ic-checkbox value=\"test\" label=\"test label\" checked></ic-checkbox>`,\n });\n\n //Can't expect anything in this test - this is to increase code coverage only\n await page.rootInstance.setFocus().toHaveBeenCalled;\n });\n\n it(\"should emit icCheck on click\", async () => {\n const page = await newSpecPage({\n components: [CheckboxGroup, Checkbox],\n html: `<ic-checkbox-group label=\"test label\" name=\"test\">\n <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox> \n </ic-checkbox-group>`,\n });\n\n const eventSpy = jest.fn();\n\n page.win.addEventListener(\"icCheck\", eventSpy);\n\n page.root\n .querySelector(\"ic-checkbox\")\n .shadowRoot.querySelector(\"input\")\n .click();\n\n await page.waitForChanges();\n\n expect(eventSpy).toHaveBeenCalled();\n });\n\n it(\"should test form reset event\", async () => {\n const page = await newSpecPage({\n components: [Checkbox],\n html: `<form>\n <ic-checkbox value=\"test\" label=\"test label\" checked></ic-checkbox> \n <button id=\"resetButton\" type=\"reset\">Reset</button> \n </form>`,\n });\n\n expect(page.root.checked).toBe(true);\n\n page.root.checked = false;\n await page.waitForChanges();\n\n expect(page.root.checked).toBe(false);\n\n await page.rootInstance.handleFormReset();\n await page.waitForChanges();\n\n expect(page.root.checked).toBe(true);\n\n //test disconnected callback\n page.setContent(\"\");\n });\n\n it(\"should test labelNameHandler\", async () => {\n const page = await newSpecPage({\n components: [Checkbox, CheckboxGroup],\n html: `<ic-checkbox-group label=\"test label\" name=\"test\">\n <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox> \n </ic-checkbox-group>`,\n });\n\n expect(page.root).toMatchSnapshot();\n\n page.root.label = \"new label\";\n await page.waitForChanges();\n\n expect(page.root).toMatchSnapshot();\n });\n});\n"]}
1
+ {"version":3,"file":"ic-checkbox-group.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-checkbox-group/test/basic/ic-checkbox-group.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { CheckboxGroup } from \"../../ic-checkbox-group\";\nimport { Checkbox } from \"../../../ic-checkbox/ic-checkbox\";\nimport { TextField } from \"../../../ic-text-field/ic-text-field\";\n\ndescribe(\"ic-checkbox-group\", () => {\n it(\"should render\", async () => {\n const page = await newSpecPage({\n components: [CheckboxGroup, Checkbox],\n html: `<ic-checkbox-group label=\"test label\" name=\"test\">\n <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox> \n </ic-checkbox-group>`,\n });\n\n expect(page.root).toMatchSnapshot(\"renders\");\n });\n\n it(\"should render as required\", async () => {\n const page = await newSpecPage({\n components: [CheckboxGroup, Checkbox],\n html: `<ic-checkbox-group label=\"test label\" name=\"test\" required>\n <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox> \n </ic-checkbox-group>`,\n });\n\n expect(page.root).toMatchSnapshot(\"renders-required\");\n });\n\n it(\"should render as helper text\", async () => {\n const page = await newSpecPage({\n components: [CheckboxGroup, Checkbox],\n html: `<ic-checkbox-group label=\"test label\" name=\"test\" helper-text=\"helper test\">\n <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox> \n </ic-checkbox-group>`,\n });\n\n expect(page.root).toMatchSnapshot(\"renders-with-helpertext\");\n });\n\n it(\"should test checkbox option as submit on form\", async () => {\n const page = await newSpecPage({\n components: [Checkbox],\n html: `<form id=\"new-form\"></form><ic-checkbox id=\"ic-checkbox\" label=\"IC Checkbox Test\" value=\"test-value\" form=\"new-form\" selected></ic-checkbox>`,\n });\n\n expect(page.root).toMatchSnapshot();\n });\n\n it(\"should render checked\", async () => {\n const page = await newSpecPage({\n components: [CheckboxGroup, Checkbox],\n html: `<ic-checkbox-group label=\"test label\" name=\"test\">\n <ic-checkbox value=\"test\" checked label=\"test label\"></ic-checkbox> \n </ic-checkbox-group>`,\n });\n\n expect(page.root).toMatchSnapshot(\"renders-checked\");\n });\n\n it(\"should render indeterminate\", async () => {\n const page = await newSpecPage({\n components: [CheckboxGroup, Checkbox],\n html: `<ic-checkbox-group label=\"test label\" name=\"test\">\n <ic-checkbox value=\"test\" checked indeterminate label=\"test label\"></ic-checkbox> \n </ic-checkbox-group>`,\n });\n\n expect(page.root).toMatchSnapshot(\"renders-indeterminate\");\n });\n\n it(\"should render an aria label when group label hidden\", async () => {\n const page = await newSpecPage({\n components: [CheckboxGroup, Checkbox],\n html: `<ic-checkbox-group label=\"test label\" hide-label name=\"test\">\n <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox>\n </ic-checkbox-group>`,\n });\n\n expect(page.root).toMatchSnapshot(\"renders-hidden-label\");\n });\n\n it(\"should render an aria label when checkbox label hidden\", async () => {\n const page = await newSpecPage({\n components: [CheckboxGroup, Checkbox],\n html: `<ic-checkbox-group label=\"test label\" name=\"test\">\n <ic-checkbox value=\"test\" label=\"test label\" hide-label></ic-checkbox> \n </ic-checkbox-group>`,\n });\n\n expect(page.root).toMatchSnapshot(\"renders-hidden-checkbox-label\");\n });\n\n it(\"should render in a disabled state\", async () => {\n const page = await newSpecPage({\n components: [CheckboxGroup, Checkbox],\n html: `<ic-checkbox-group label=\"test label\" name=\"test\">\n <ic-checkbox value=\"test\" disabled label=\"test label\"></ic-checkbox> \n </ic-checkbox-group>`,\n });\n\n expect(page.root).toMatchSnapshot(\"renders-disabled\");\n });\n\n it(\"should render with validation status\", async () => {\n const page = await newSpecPage({\n components: [CheckboxGroup, Checkbox],\n html: `<ic-checkbox-group label=\"test label\" hide-label name=\"test\" validation-status=\"error\">\n <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox> \n </ic-checkbox-group>`,\n });\n\n expect(page.root).toMatchSnapshot(\"renders-with-validation\");\n });\n\n it(\"should render with hidden dynamic additional field\", async () => {\n const page = await newSpecPage({\n components: [CheckboxGroup, Checkbox, TextField],\n html: `<ic-checkbox-group label=\"test label\" hide-label name=\"test\" validation-status=\"error\">\n <ic-checkbox value=\"test\" additional-field-display=\"dynamic\" label=\"test label\">\n <ic-text-field slot=\"additional-field\" placeholder=\"Placeholder\" label=\"Test label\"></ic-text-field>\n </ic-checkbox> \n </ic-checkbox-group>`,\n });\n\n expect(page.root).toMatchSnapshot(\"renders-with-dynamic-field\");\n });\n\n it(\"should render with dynamic additional field when checked\", async () => {\n const page = await newSpecPage({\n components: [CheckboxGroup, Checkbox, TextField],\n html: `<ic-checkbox-group label=\"test label\" hide-label name=\"test\" validation-status=\"error\">\n <ic-checkbox value=\"test\" label=\"test label\" additional-field-display=\"dynamic\" checked>\n <ic-text-field slot=\"additional-field\" placeholder=\"Placeholder\" label=\"Test label\"></ic-text-field>\n </ic-checkbox> \n </ic-checkbox-group>`,\n });\n\n expect(page.root).toMatchSnapshot(\n \"renders-with-dynamic-field-when-checked\"\n );\n });\n\n it(\"should render with disabled static additional field\", async () => {\n const page = await newSpecPage({\n components: [CheckboxGroup, Checkbox, TextField],\n html: `<ic-checkbox-group label=\"test label\" hide-label name=\"test\" validation-status=\"error\">\n <ic-checkbox value=\"test\" label=\"test label\" additional-field-display=\"static\">\n <ic-text-field slot=\"additional-field\" placeholder=\"Placeholder\" label=\"Test label\"></ic-text-field>\n </ic-checkbox> \n </ic-checkbox-group>`,\n });\n\n expect(page.root).toMatchSnapshot(\"renders-with-disabled-additional-field\");\n });\n\n it(\"should remove disabled attribute from static additional field when checked\", async () => {\n const page = await newSpecPage({\n components: [CheckboxGroup, Checkbox, TextField],\n html: `<ic-checkbox-group label=\"test label\" hide-label name=\"test\" validation-status=\"error\">\n <ic-checkbox value=\"test\" label=\"test label\" additional-field-display=\"static\" checked>\n <ic-text-field slot=\"additional-field\" placeholder=\"Placeholder\" label=\"Test label\"></ic-text-field>\n </ic-checkbox> \n </ic-checkbox-group>`,\n });\n\n expect(page.root).toMatchSnapshot(\n \"renders-with-disabled-attribute-removed-from-field\"\n );\n });\n\n it(\"should pass the size on the checkbox group to the child checkboxes when there's no size set on them individually\", async () => {\n const page = await newSpecPage({\n components: [CheckboxGroup, Checkbox],\n html: `<ic-checkbox-group label=\"test label\" name=\"test\" size=\"small\">\n <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox>\n <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox> \n </ic-checkbox-group>`,\n });\n\n expect(page.root).toMatchSnapshot();\n\n const checkboxes = page.root.querySelectorAll(\"ic-checkbox\");\n\n checkboxes.forEach((checkbox) => {\n expect(checkbox.classList.contains(\"small\")).toBe(true);\n });\n });\n\n it(\"should prioritise the size on an individual checkbox over the size on the checkbox group\", async () => {\n const page = await newSpecPage({\n components: [CheckboxGroup, Checkbox],\n html: `<ic-checkbox-group label=\"test label\" name=\"test\" size=\"large\">\n <ic-checkbox value=\"test\" label=\"test label\" id=\"large-checkbox\"></ic-checkbox>\n <ic-checkbox value=\"test\" label=\"test label\" size=\"small\" id=\"small-checkbox\"></ic-checkbox> \n </ic-checkbox-group>`,\n });\n\n const smallCheckbox = page.root.querySelector(\n \"ic-checkbox#small-checkbox\"\n ) as HTMLIcCheckboxElement;\n expect(smallCheckbox[\"size\"]).toMatch(\"small\");\n\n const largeCheckbox = page.root.querySelector(\n \"ic-checkbox:not(#small-checkbox)\"\n ) as HTMLIcCheckboxElement;\n expect(largeCheckbox.classList.contains(\"large\")).toBe(true);\n\n expect(page.root).toMatchSnapshot();\n });\n\n it(\"should change checked state\", async () => {\n const page = await newSpecPage({\n components: [Checkbox],\n html: `<ic-checkbox value=\"test\" label=\"test label\" checked></ic-checkbox>`,\n });\n\n expect(page.root.checked).toBe(true);\n\n page.rootInstance.handleClick();\n await page.waitForChanges();\n\n expect(page.root.checked).toBe(false);\n });\n\n it(\"should call 'setFocus' when checkbox is focused\", async () => {\n const page = await newSpecPage({\n components: [Checkbox],\n html: `<ic-checkbox value=\"test\" label=\"test label\" checked></ic-checkbox>`,\n });\n\n //Can't expect anything in this test - this is to increase code coverage only\n await page.rootInstance.setFocus().toHaveBeenCalled;\n });\n\n it(\"should emit icCheck on click\", async () => {\n const page = await newSpecPage({\n components: [CheckboxGroup, Checkbox],\n html: `<ic-checkbox-group label=\"test label\" name=\"test\">\n <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox> \n </ic-checkbox-group>`,\n });\n\n const eventSpy = jest.fn();\n\n page.win.addEventListener(\"icCheck\", eventSpy);\n\n page.root\n .querySelector(\"ic-checkbox\")\n .shadowRoot.querySelector(\"input\")\n .click();\n\n await page.waitForChanges();\n\n expect(eventSpy).toHaveBeenCalled();\n });\n\n it(\"should test form reset event\", async () => {\n const page = await newSpecPage({\n components: [Checkbox],\n html: `<form>\n <ic-checkbox value=\"test\" label=\"test label\" checked></ic-checkbox> \n <button id=\"resetButton\" type=\"reset\">Reset</button> \n </form>`,\n });\n\n expect(page.root.checked).toBe(true);\n\n page.root.checked = false;\n await page.waitForChanges();\n\n expect(page.root.checked).toBe(false);\n\n await page.rootInstance.handleFormReset();\n await page.waitForChanges();\n\n expect(page.root.checked).toBe(true);\n\n //test disconnected callback\n page.setContent(\"\");\n });\n\n it(\"should test labelNameHandler\", async () => {\n const page = await newSpecPage({\n components: [Checkbox, CheckboxGroup],\n html: `<ic-checkbox-group label=\"test label\" name=\"test\">\n <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox> \n </ic-checkbox-group>`,\n });\n\n expect(page.root).toMatchSnapshot();\n\n page.root.label = \"new label\";\n await page.waitForChanges();\n\n expect(page.root).toMatchSnapshot();\n });\n});\n"]}
@@ -455,7 +455,10 @@ video {
455
455
  background: rgb(0 0 0 / 60%);
456
456
  z-index: var(--ic-z-index-dialog);
457
457
  opacity: 0;
458
- transition: opacity var(--ic-easing-transition-slow);
458
+ }
459
+
460
+ :host(.fade-in) {
461
+ opacity: 1;
459
462
  }
460
463
 
461
464
  :host(.disable-height-constraint) {
@@ -474,11 +477,15 @@ video {
474
477
  }
475
478
 
476
479
  @media (prefers-reduced-motion: no-preference) {
477
- :host(.fade-in) {
478
- opacity: 1;
480
+ :host {
479
481
  transition: opacity var(--ic-easing-transition-slow);
480
482
  }
481
483
 
484
+ .dialog {
485
+ transform: translateY(-3rem);
486
+ transition: transform 1000s;
487
+ }
488
+
482
489
  :host(.fade-in) .dialog {
483
490
  transform: translateY(0);
484
491
  transition: transform var(--ic-easing-transition-slow);
@@ -495,8 +502,6 @@ video {
495
502
  border: var(--ic-border-default);
496
503
  border-radius: var(--ic-border-radius);
497
504
  padding: var(--ic-space-xs) 0 var(--ic-space-md);
498
- transform: translateY(-3rem);
499
- transition: transform 1000s;
500
505
  display: flex;
501
506
  flex-direction: column;
502
507
  box-sizing: border-box;
@@ -33,3 +33,14 @@ ic-input-label .error-label {
33
33
  ic-input-label .dark {
34
34
  color: var(--ic-architectural-white);
35
35
  }
36
+
37
+ /* Add back in after storybook has the `color-scheme: light dark` code */
38
+
39
+ /* @media (prefers-color-scheme: dark) and (not (forced-colors: active)) {
40
+ ic-input-label,
41
+ ic-input-label .helpertext-normal,
42
+ ic-input-label .readonly-label,
43
+ ic-input-label .helpertext-readonly {
44
+ color: var(--ic-architectural-white);
45
+ }
46
+ } */
@@ -517,6 +517,7 @@ video {
517
517
  cursor: pointer;
518
518
  display: flex;
519
519
  align-items: center;
520
+ overflow-wrap: anywhere;
520
521
  }
521
522
 
522
523
  .option:not(.loading-option) {
@@ -102,7 +102,6 @@ export class Menu {
102
102
  };
103
103
  this.manSetInputValueKeyboardOpen = (event) => {
104
104
  const menuOptions = this.setMenuOptions();
105
- this.keyboardNav = false;
106
105
  const highlightedOptionIndex = menuOptions.findIndex((option) => option[this.valueField] === this.optionHighlighted);
107
106
  const getOptionId = (index) => { var _a; return (_a = Array.from(this.host.querySelectorAll("li"))[index]) === null || _a === void 0 ? void 0 : _a.id; };
108
107
  const isOpen = this.isSearchBar || this.isSearchableSelect || this.open;
@@ -163,6 +162,7 @@ export class Menu {
163
162
  });
164
163
  break;
165
164
  case " ":
165
+ this.keyboardNav = false;
166
166
  if (this.isSearchBar || this.isSearchableSelect) {
167
167
  break;
168
168
  }
@@ -174,6 +174,7 @@ export class Menu {
174
174
  break;
175
175
  case "Enter":
176
176
  event.preventDefault();
177
+ this.keyboardNav = false;
177
178
  if (isOpen) {
178
179
  if (highlightedOptionIndex >= 0) {
179
180
  if (menuOptions[highlightedOptionIndex] !== undefined) {
@@ -211,6 +212,7 @@ export class Menu {
211
212
  this.preventIncorrectTabOrder = true;
212
213
  break;
213
214
  default:
215
+ this.keyboardNav = false;
214
216
  this.focusOnSearchOrSelectInput(menuOptions, highlightedOptionIndex);
215
217
  break;
216
218
  }
@@ -507,9 +509,6 @@ export class Menu {
507
509
  }
508
510
  componentDidUpdate() {
509
511
  const inputValueInOptions = this.options.some((option) => option[this.valueField] === this.value);
510
- const optionHighlightedIsSet = this.optionHighlighted !== null &&
511
- this.optionHighlighted !== undefined &&
512
- this.optionHighlighted !== "";
513
512
  if (this.open && this.options.length !== 0) {
514
513
  if (this.value &&
515
514
  this.keyboardNav &&
@@ -522,7 +521,7 @@ export class Menu {
522
521
  this.inputEl.tagName !== "INPUT") {
523
522
  this.menu.focus();
524
523
  }
525
- else if (optionHighlightedIsSet &&
524
+ else if (!!this.optionHighlighted &&
526
525
  !this.focusFromSearchKeypress &&
527
526
  !this.preventIncorrectTabOrder) {
528
527
  const highlightedEl = this.host.querySelector(`li[data-value="${this.optionHighlighted}"]`);
@@ -559,7 +558,6 @@ export class Menu {
559
558
  * @param {KeyboardEvent} event The keyboard event which is available when handleKeyboardOpen is invoked.
560
559
  */
561
560
  async handleKeyboardOpen(event) {
562
- this.keyboardNav = false;
563
561
  if (this.activationType === "automatic") {
564
562
  this.autoSetInputValueKeyboardOpen(event);
565
563
  }