@ukic/web-components 2.21.0 → 2.22.0
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/core.cjs.js +1 -1
- package/dist/cjs/ic-button_3.cjs.entry.js +1 -1
- package/dist/cjs/ic-button_3.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-checkbox.cjs.entry.js +2 -1
- package/dist/cjs/ic-checkbox.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-dialog.cjs.entry.js +1 -1
- package/dist/cjs/ic-dialog.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-input-component-container_3.cjs.entry.js +5 -7
- package/dist/cjs/ic-input-component-container_3.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-input-label_2.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-navigation-item.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-search-bar.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-side-navigation.cjs.entry.js +1 -1
- package/dist/cjs/ic-side-navigation.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-step.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-toggle-button.cjs.entry.js +4 -2
- package/dist/cjs/ic-toggle-button.cjs.entry.js.map +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/ic-button/ic-button.css +41 -171
- package/dist/collection/components/ic-checkbox/ic-checkbox.js +20 -1
- package/dist/collection/components/ic-checkbox/ic-checkbox.js.map +1 -1
- package/dist/collection/components/ic-checkbox-group/test/basic/ic-checkbox-group.spec.js +11 -2
- package/dist/collection/components/ic-checkbox-group/test/basic/ic-checkbox-group.spec.js.map +1 -1
- package/dist/collection/components/ic-dialog/ic-dialog.css +10 -5
- package/dist/collection/components/ic-input-label/ic-input-label.css +11 -0
- package/dist/collection/components/ic-menu/ic-menu.css +1 -0
- package/dist/collection/components/ic-menu/ic-menu.js +4 -6
- package/dist/collection/components/ic-menu/ic-menu.js.map +1 -1
- package/dist/collection/components/ic-navigation-item/ic-navigation-item.js +1 -0
- package/dist/collection/components/ic-navigation-item/ic-navigation-item.js.map +1 -1
- package/dist/collection/components/ic-search-bar/ic-search-bar.js.map +1 -1
- package/dist/collection/components/ic-side-navigation/ic-side-navigation.css +4 -0
- package/dist/collection/components/ic-step/ic-step.css +13 -0
- package/dist/collection/components/ic-toggle-button/ic-toggle-button.css +5 -0
- package/dist/collection/components/ic-toggle-button/ic-toggle-button.js +3 -1
- package/dist/collection/components/ic-toggle-button/ic-toggle-button.js.map +1 -1
- package/dist/components/ic-button2.js +1 -1
- package/dist/components/ic-button2.js.map +1 -1
- package/dist/components/ic-checkbox.js +3 -1
- package/dist/components/ic-checkbox.js.map +1 -1
- package/dist/components/ic-dialog.js +1 -1
- package/dist/components/ic-dialog.js.map +1 -1
- package/dist/components/ic-input-label2.js.map +1 -1
- package/dist/components/ic-menu2.js +5 -7
- package/dist/components/ic-menu2.js.map +1 -1
- package/dist/components/ic-navigation-item.js.map +1 -1
- package/dist/components/ic-search-bar.js.map +1 -1
- package/dist/components/ic-side-navigation.js +1 -1
- package/dist/components/ic-side-navigation.js.map +1 -1
- package/dist/components/ic-step.js.map +1 -1
- package/dist/components/ic-toggle-button.js +4 -2
- package/dist/components/ic-toggle-button.js.map +1 -1
- package/dist/core/core.esm.js +1 -1
- package/dist/core/core.esm.js.map +1 -1
- package/dist/core/p-26793ea2.entry.js +2 -0
- package/dist/core/p-26793ea2.entry.js.map +1 -0
- package/dist/core/{p-de40b0b1.entry.js → p-27bdf6e5.entry.js} +2 -2
- package/dist/core/p-27bdf6e5.entry.js.map +1 -0
- package/dist/core/p-4a0acd0f.entry.js.map +1 -1
- package/dist/core/p-687af4e5.entry.js.map +1 -1
- package/dist/core/p-7dbd0a9f.entry.js.map +1 -1
- package/dist/core/p-9de95c50.entry.js +2 -0
- package/dist/core/p-9de95c50.entry.js.map +1 -0
- package/dist/core/p-bbfe15b5.entry.js +2 -0
- package/dist/core/p-bbfe15b5.entry.js.map +1 -0
- package/dist/core/{p-adecaedd.entry.js → p-c698064f.entry.js} +2 -2
- package/dist/core/p-c698064f.entry.js.map +1 -0
- package/dist/core/p-e6a8f0de.entry.js +2 -0
- package/dist/core/p-e6a8f0de.entry.js.map +1 -0
- package/dist/core/p-e70c6b33.entry.js.map +1 -1
- package/dist/esm/core.js +1 -1
- package/dist/esm/ic-button_3.entry.js +1 -1
- package/dist/esm/ic-button_3.entry.js.map +1 -1
- package/dist/esm/ic-checkbox.entry.js +2 -1
- package/dist/esm/ic-checkbox.entry.js.map +1 -1
- package/dist/esm/ic-dialog.entry.js +1 -1
- package/dist/esm/ic-dialog.entry.js.map +1 -1
- package/dist/esm/ic-input-component-container_3.entry.js +5 -7
- package/dist/esm/ic-input-component-container_3.entry.js.map +1 -1
- package/dist/esm/ic-input-label_2.entry.js.map +1 -1
- package/dist/esm/ic-navigation-item.entry.js.map +1 -1
- package/dist/esm/ic-search-bar.entry.js.map +1 -1
- package/dist/esm/ic-side-navigation.entry.js +1 -1
- package/dist/esm/ic-side-navigation.entry.js.map +1 -1
- package/dist/esm/ic-step.entry.js.map +1 -1
- package/dist/esm/ic-toggle-button.entry.js +4 -2
- package/dist/esm/ic-toggle-button.entry.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/types/components/ic-checkbox/ic-checkbox.d.ts +4 -0
- package/dist/types/components/ic-navigation-item/ic-navigation-item.d.ts +1 -0
- package/dist/types/components/ic-toggle-button/ic-toggle-button.d.ts +1 -0
- package/dist/types/components.d.ts +8 -0
- package/hydrate/index.js +16 -13
- package/package.json +2 -2
- package/vscode-data.json +4 -0
- package/dist/core/p-adecaedd.entry.js.map +0 -1
- package/dist/core/p-cbba9c7c.entry.js +0 -2
- package/dist/core/p-cbba9c7c.entry.js.map +0 -1
- package/dist/core/p-d3f10067.entry.js +0 -2
- package/dist/core/p-d3f10067.entry.js.map +0 -1
- package/dist/core/p-dae27567.entry.js +0 -2
- package/dist/core/p-dae27567.entry.js.map +0 -1
- package/dist/core/p-de40b0b1.entry.js.map +0 -1
- package/dist/core/p-fe702898.entry.js +0 -2
- 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":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,IAAI,EACJ,OAAO,EACP,KAAK,EAEL,KAAK,EACL,MAAM,GACP,MAAM,eAAe,CAAC;AAEvB,OAAO,EACL,UAAU,EACV,gCAAgC,EAChC,iBAAiB,EACjB,iBAAiB,EACjB,oBAAoB,EACpB,uBAAuB,EACvB,mBAAmB,EACnB,aAAa,GACd,MAAM,qBAAqB,CAAC;AAE7B;;GAEG;AAQH,6DAA6D;AAC7D,MAAM,OAAO,QAAQ;;QAwJX,gBAAW,GAAG,GAAG,EAAE;YACzB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;YAC7B,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;YACpB,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC;QAC9B,CAAC,CAAC;QAEM,oBAAe,GAAG,GAAS,EAAE;YACnC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,gBAAgB,CAAC;QACvC,CAAC,CAAC;sCAvJA,QAAQ;uBAKkD,KAAK;gCACrC,IAAI,CAAC,OAAO;wBAKX,KAAK;2BAMJ,4CAA4C;;;;;;;;6BAwCzC,KAAK;;;;qBAoBZ,KAAK;;;IAiB/B,iBAAiB;QACf,mBAAmB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;QAE5C,oBAAoB,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;QAEpD,MAAM,aAAa,GAAG,IAAI,CAAC,EAAE,CAAC,aAA2C,CAAC;QAC1E,IAAI,aAAa,EAAE,CAAC;YAClB,IAAI,CAAC,IAAI,CAAC,IAAI;gBAAE,IAAI,CAAC,IAAI,GAAG,aAAa,CAAC,IAAI,CAAC;YAC/C,IAAI,CAAC,UAAU,GAAG,aAAa,CAAC,KAAK,CAAC;QACxC,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,gCAAgC,CAC9B;YACE,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE;YACvC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE;SACxC,EACD,UAAU,CACX,CAAC;IACJ,CAAC;IAED,kBAAkB;QAChB,IAAI,IAAI,CAAC,sBAAsB,KAAK,QAAQ,EAAE,CAAC;YAC7C,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;YACzD,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;gBAClB,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;YAC1C,CAAC;iBAAM,CAAC;gBACN,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,eAAe,CAAC,UAAU,CAAC,CAAC;YACzC,CAAC;QACH,CAAC;aAAM,IAAI,IAAI,CAAC,wBAAwB,EAAE,CAAC;YACzC,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO;gBACzD,CAAC,CAAC,MAAM;gBACR,CAAC,CAAC,MAAM,CAAC;QACb,CAAC;IACH,CAAC;IAED,oBAAoB;QAClB,uBAAuB,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;IACzD,CAAC;IAED;;OAEG;IAEH,KAAK,CAAC,QAAQ;;QACZ,MAAA,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAc,WAAW,CAAC,0CAAE,KAAK,EAAE,CAAC;IACtE,CAAC;IAYD,MAAM;QACJ,MAAM,EACJ,sBAAsB,EACtB,OAAO,EACP,QAAQ,EACR,WAAW,EACX,EAAE,EACF,IAAI,EACJ,UAAU,EACV,WAAW,EACX,UAAU,EACV,cAAc,EACd,UAAU,EACV,aAAa,EACb,UAAU,EACV,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,KAAK,GACN,GAAG,IAAI,CAAC;QAET,MAAM,EAAE,GAAG,eACT,aAAa,CAAC,KAAK,CAAC,IAAI,KAC1B,IAAI,UAAU,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;QAEpC,MAAM,iBAAiB,GAAI,EAAE,CAAC,aAA4C;aACvE,IAAI,CAAC;QAER,OAAO;YACL,CAAC,CAAC,iBAAiB,CAAC,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,IAAI,KAAK,EAAE,QAAQ,CAAC;YAC/D,CAAC,CAAC,iBAAiB,CAAC,EAAE,CAAC,CAAC;QAE1B,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;gBACL,QAAQ;gBACR,KAAK;gBACL,CAAC,GAAG,IAAI,IAAI,iBAAiB,EAAE,CAAC,EAAE,IAAI;aACvC;YAED,WAAK,KAAK,EAAC,WAAW;gBACnB,OAAO;oBACN,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,CAChB,WACE,KAAK,EAAC,WAAW,EACjB,KAAK,EAAC,QAAQ,EACd,MAAM,EAAC,QAAQ,EACf,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,4BAA4B,eACxB,SAAS,eACT,SAAS;wBAEnB,kCAA6B;wBAC7B,YAAM,CAAC,EAAC,qFAAqF,GAAG,CAC5F,CACP,CAAC,CAAC,CAAC,CACF,WAAK,KAAK,EAAC,sBAAsB,GAAG,CACrC,CAAC;gBACJ,aACE,IAAI,EAAC,UAAU,EACf,KAAK,EAAE;wBACL,QAAQ,EAAE,IAAI;wBACd,OAAO;wBACP,aAAa;qBACd,EACD,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,EAChC,OAAO,EAAE,OAAO,EAChB,aAAa,EAAE,aAAa,EAC5B,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,UAAU,EACtB,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,EACtB,cAAc,EAAE,cAAc,EAC9B,UAAU,EAAE,UAAU,GACf;gBACT,qBAAe,KAAK,EAAC,gBAAgB,EAAC,OAAO,EAAC,MAAM;oBAClD,aAAO,OAAO,EAAE,EAAE,IAAG,KAAK,CAAS,CACrB,CACZ;YACL,UAAU,CAAC,EAAE,EAAE,kBAAkB,CAAC,IAAI,CACrC,WACE,KAAK,EAAC,mBAAmB,EACzB,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,wBAAwB,GAAG,EAAE,CAAC;gBAEhD,sBAAsB,KAAK,SAAS,IAAI,CACvC,WAAK,KAAK,EAAC,eAAe,GAAO,CAClC;gBACD;oBACG,sBAAsB,KAAK,SAAS,IAAI,CACvC,qBAAe,OAAO,EAAC,SAAS;wBAC9B,SAAG,KAAK,EAAC,cAAc,eAAW,QAAQ,IACvC,WAAW,CACV,CACU,CACjB;oBACD,WACE,KAAK,EAAE;4BACL,0BAA0B,EACxB,sBAAsB,KAAK,QAAQ;yBACtC;wBAED,YAAM,IAAI,EAAC,kBAAkB,GAAQ,CACjC,CACF,CACF,CACP,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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],
|
package/dist/collection/components/ic-checkbox-group/test/basic/ic-checkbox-group.spec.js.map
CHANGED
@@ -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
|
-
|
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
|
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
|
+
} */
|
@@ -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 (
|
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
|
}
|