npm - @ukic/web-components - Versions diffs - 2.5.0 → 2.6.0 - Mend

@ukic/web-components 2.5.0 → 2.6.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 (684) hide show

package/dist/collection/components/ic-checkbox/ic-checkbox.js.map CHANGED Viewed

	@@ -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} from \"../../utils/helpers\";\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 private IC_TEXT_FIELD: string = \"ic-text-field\";\n\n @Element() host: 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 @Prop() dynamicText: string = \"This selection requires additional answers\";\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.host);\n\n addFormResetListener(this.host, this.handleFormReset);\n this.host\n .querySelector(this.IC_TEXT_FIELD)\n ?.addEventListener(\"icChange\", this.eventHandler);\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.host.querySelector(this.IC_TEXT_FIELD);\n if (!this.checked) {\n textfield && textfield.setAttribute(\"disabled\", \"\");\n } else {\n textfield && textfield.removeAttribute(\"disabled\");\n }\n } else {\n if (!this.checked) {\n this.additionalFieldContainer.style.display = \"none\";\n } else {\n this.additionalFieldContainer.style.display = \"flex\";\n }\n }\n }\n\n disconnectedCallback(): void {\n removeFormResetListener(this.host, this.handleFormReset);\n this.host\n .querySelector(this.IC_TEXT_FIELD)\n ?.removeEventListener(\"icChange\", this.eventHandler);\n }\n\n /\n Sets focus on the checkbox.\n */\n @Method()\n async setFocus(): Promise<void> {\n const checkboxEl: HTMLElement =\n this.host.shadowRoot.querySelector(\".checkbox\");\n if (checkboxEl) {\n checkboxEl.focus();\n }\n }\n\n private eventHandler = (event: CustomEvent) => {\n event.stopImmediatePropagation();\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 let id = `ic-checkbox-${\n this.label !== undefined ? this.label : this.value\n }-${this.groupLabel}`;\n\n id = id.replace(/ /g, \"-\");\n\n const parentElementSize = (\n this.host.parentElement as HTMLIcCheckboxGroupElement\n ).size;\n\n this.checked\n ? renderHiddenInput(\n true,\n this.host,\n this.name,\n this.checked && this.value,\n this.disabled\n )\n : removeHiddenInput(this.host);\n\n return (\n <Host\n class={{\n [\"disabled\"]: this.disabled,\n [\"small\"]: this.small,\n [`${this.size \|\| parentElementSize}`]: true,\n }}\n >\n <div class=\"container\">\n {this.checked && !this.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 {this.checked && this.indeterminate && (\n <div class=\"indeterminate-symbol\" />\n )}\n <input\n role=\"checkbox\"\n class={{\n [\"checkbox\"]: true,\n [\"checked\"]: this.checked,\n [\"indeterminate\"]: this.indeterminate,\n }}\n type=\"checkbox\"\n name={this.name}\n id={id}\n value={this.value}\n disabled={this.disabled ? true : null}\n checked={this.checked}\n indeterminate={this.indeterminate}\n onClick={this.handleClick}\n ></input>\n <ic-typography class=\"checkbox-label\" variant=\"body\">\n <label htmlFor={id}>{this.label}</label>\n </ic-typography>\n </div>\n {isSlotUsed(this.host, \"additional-field\") && (\n <div\n class=\"dynamic-container\"\n ref={(el) => (this.additionalFieldContainer = el)}\n >\n {this.additionalFieldDisplay === \"dynamic\" && (\n <div class=\"branch-corner\"></div>\n )}\n <div>\n {this.additionalFieldDisplay === \"dynamic\" && (\n <ic-typography variant=\"caption\">\n <p class=\"dynamic-text\" aria-live=\"polite\">\n {this.dynamicText}\n </p>\n </ic-typography>\n )}\n <div\n class={{\n \"additional-field-wrapper\":\n this.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 private IC_TEXT_FIELD: string = \"ic-text-field\";\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 this.el\n .querySelector(this.IC_TEXT_FIELD)\n ?.addEventListener(\"icChange\", this.eventHandler);\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(this.IC_TEXT_FIELD);\n if (!this.checked) {\n textfield && textfield.setAttribute(\"disabled\", \"\");\n } else {\n textfield && textfield.removeAttribute(\"disabled\");\n }\n } else if (this.additionalFieldContainer) {\n if (!this.checked) {\n this.additionalFieldContainer.style.display = \"none\";\n } else {\n this.additionalFieldContainer.style.display = \"flex\";\n }\n }\n }\n\n disconnectedCallback(): void {\n removeFormResetListener(this.el, this.handleFormReset);\n this.el\n .querySelector(this.IC_TEXT_FIELD)\n ?.removeEventListener(\"icChange\", this.eventHandler);\n }\n\n /\n Sets focus on the checkbox.\n */\n @Method()\n async setFocus(): Promise<void> {\n const checkboxEl: HTMLElement =\n this.el.shadowRoot.querySelector(\".checkbox\");\n if (checkboxEl) {\n checkboxEl.focus();\n }\n }\n\n private eventHandler = (event: CustomEvent) => {\n event.stopImmediatePropagation();\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 let id = `ic-checkbox-${\n isPropDefined(this.label) ? this.label : this.value\n }-${this.groupLabel}`;\n\n id = id.replace(/ /g, \"-\");\n\n const parentElementSize = (\n this.el.parentElement as HTMLIcCheckboxGroupElement\n ).size;\n\n this.checked\n ? renderHiddenInput(\n true,\n this.el,\n this.name,\n this.checked && this.value,\n this.disabled\n )\n : removeHiddenInput(this.el);\n\n return (\n <Host\n class={{\n [\"disabled\"]: this.disabled,\n [\"small\"]: this.small,\n [`${this.size \|\| parentElementSize}`]: true,\n }}\n >\n <div class=\"container\">\n {this.checked && !this.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 {this.checked && this.indeterminate && (\n <div class=\"indeterminate-symbol\" />\n )}\n <input\n role=\"checkbox\"\n class={{\n [\"checkbox\"]: true,\n [\"checked\"]: this.checked,\n [\"indeterminate\"]: this.indeterminate,\n }}\n type=\"checkbox\"\n name={this.name}\n id={id}\n value={this.value}\n disabled={this.disabled ? true : null}\n checked={this.checked}\n indeterminate={this.indeterminate}\n onClick={this.handleClick}\n form={this.form}\n formaction={this.formaction}\n formenctype={this.formenctype}\n formmethod={this.formmethod}\n formnovalidate={this.formnovalidate}\n formtarget={this.formtarget}\n ></input>\n <ic-typography class=\"checkbox-label\" variant=\"body\">\n <label htmlFor={id}>{this.label}</label>\n </ic-typography>\n </div>\n {isSlotUsed(this.el, \"additional-field\") && (\n <div\n class=\"dynamic-container\"\n ref={(el) => (this.additionalFieldContainer = el)}\n >\n {this.additionalFieldDisplay === \"dynamic\" && (\n <div class=\"branch-corner\"></div>\n )}\n <div>\n {this.additionalFieldDisplay === \"dynamic\" && (\n <ic-typography variant=\"caption\">\n <p class=\"dynamic-text\" aria-live=\"polite\">\n {this.dynamicText}\n </p>\n </ic-typography>\n )}\n <div\n class={{\n \"additional-field-wrapper\":\n this.additionalFieldDisplay === \"static\",\n }}\n >\n <slot name=\"additional-field\"></slot>\n </div>\n </div>\n </div>\n )}\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/ic-checkbox-group/ic-checkbox-group.js CHANGED Viewed

@@ -15,10 +15,10 @@ export class CheckboxGroup {
     this.validationText = "";
   }
   componentWillLoad() {
-    removeDisabledFalse(this.disabled, this.host);
+    removeDisabledFalse(this.disabled, this.el);
   }
   componentDidLoad() {
-    Array.from(this.host.querySelectorAll("ic-checkbox")).forEach((checkbox) => {
+    Array.from(this.el.querySelectorAll("ic-checkbox")).forEach((checkbox) => {
       if (!checkbox.name)
         checkbox.name = this.name;
       checkbox.groupLabel = this.label;
@@ -29,7 +29,7 @@ export class CheckboxGroup {
     ], "Checkbox Group");
   }
   selectHandler(ev) {
-    const checkedOptions = Array.from(this.host.querySelectorAll("ic-checkbox")).filter((checkbox) => checkbox.checked && !checkbox.disabled);
+    const checkedOptions = Array.from(this.el.querySelectorAll("ic-checkbox")).filter((checkbox) => checkbox.checked && !checkbox.disabled);
     this.icChange.emit({
       value: checkedOptions.map((opt) => opt.value),
       checkedOptions: checkedOptions.map((opt) => {
@@ -284,7 +284,7 @@ export class CheckboxGroup {
         }
       }];
   }
-  static get elementRef() { return "host"; }
+  static get elementRef() { return "el"; }
   static get listeners() {
     return [{
         "name": "icCheck",

package/dist/collection/components/ic-checkbox-group/ic-checkbox-group.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-checkbox-group.js","sourceRoot":"","sources":["../../../src/components/ic-checkbox-group/ic-checkbox-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,IAAI,EACJ,MAAM,EACN,OAAO,EACP,KAAK,GAEN,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,uBAAuB,EACvB,mBAAmB,EACnB,gCAAgC,EAChC,mBAAmB,GACpB,MAAM,qBAAqB,CAAC;AAS7B,6DAA6D;AAC7D,MAAM,OAAO,aAAa;;oBAMI,KAAK;sBAKJ,EAAE;qBAKF,KAAK;;;oBAeN,KAAK;gBAKR,SAAS;iBAKT,KAAK;4BAKyB,EAAE;0BAKxB,EAAE;;EAOnC,iBAAiB;IACf,mBAAmB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,~~IAAI~~,CAAC,CAAC;~~EAChD~~,CAAC;EAED,gBAAgB;IACd,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,~~IAAI~~,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,~~CAC3D~~,CAAC,QAAQ,EAAE,EAAE;~~MACX~~,IAAI,CAAC,QAAQ,CAAC,IAAI;QAAE,QAAQ,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;MAC9C,QAAQ,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC;IACnC,CAAC,~~CACF~~,CAAC;~~IAEF~~,gCAAgC,CAC9B;MACE,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE;MACvC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE;KACtC,EACD,gBAAgB,CACjB,CAAC;EACJ,CAAC;EAGD,aAAa,CAAC,EAAe;IAC3B,MAAM,cAAc,GAAG,KAAK,CAAC,IAAI,CAC/B,IAAI,CAAC,~~IAAI~~,CAAC,gBAAgB,CAAC,aAAa,CAAC,~~CAC1C~~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","sourcesContent":["import {\n Component,\n Host,\n h,\n Prop,\n Listen,\n Element,\n Event,\n EventEmitter,\n} from \"@stencil/core\";\nimport {\n getInputDescribedByText,\n hasValidationStatus,\n onComponentRequiredPropUndefined,\n removeDisabledFalse,\n} from \"../../utils/helpers\";\nimport { IcInformationStatusOrEmpty, IcSizes } from \"../../utils/types\";\nimport { IcChangeEventDetail } from \"./ic-checkbox-group.types\";\n\n@Component({\n tag: \"ic-checkbox-group\",\n styleUrl: \"ic-checkbox-group.css\",\n shadow: true,\n})\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport class CheckboxGroup {\n @Element() ~~host~~: HTMLIcCheckboxGroupElement;\n\n /*\n If `true`, the checkbox group will be set to the disabled state.\n /\n @Prop() disabled: boolean = false;\n\n /\n The helper text that will be displayed for additional field guidance.\n /\n @Prop() helperText: 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: boolean = false;\n\n /\n The label for the checkbox group to be displayed.\n /\n @Prop() label!: string;\n\n /\n The name for the checkbox group to differentiate from other groups.\n /\n @Prop() name!: string;\n\n /\n If `true`, the checkbox group will require a value.\n /\n @Prop() required: boolean = false;\n\n /\n The size of the checkboxes to be displayed. This does not affect the font size of the label.\n /\n @Prop() size?: IcSizes = \"default\";\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 validation status - e.g. 'error' \| 'warning' \| 'success'.\n /\n @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n\n /\n The validation text - e.g. 'error' \| 'warning' \| 'success'.\n /\n @Prop() validationText: string = \"\";\n\n /\n Emitted when a checkbox is checked.\n */\n @Event() icChange: EventEmitter<IcChangeEventDetail>;\n\n componentWillLoad(): void {\n removeDisabledFalse(this.disabled, this.~~host~~);\n }\n\n componentDidLoad(): void {\n Array.from(this.~~host~~.querySelectorAll(\"ic-checkbox\")).forEach(\n (checkbox) => {\n if (!checkbox.name) checkbox.name = this.name;\n checkbox.groupLabel = this.label;\n }\n );\n\n onComponentRequiredPropUndefined(\n [\n { prop: this.label, propName: \"label\" },\n { prop: this.name, propName: \"name\" },\n ],\n \"Checkbox Group\"\n );\n }\n\n @Listen(\"icCheck\")\n selectHandler(ev: CustomEvent): void {\n const checkedOptions = Array.from(\n this.~~host~~.querySelectorAll(\"ic-checkbox\")\n ).filter((checkbox) => checkbox.checked && !checkbox.disabled);\n this.icChange.emit({\n value: checkedOptions.map((opt) => opt.value),\n checkedOptions: checkedOptions.map((opt) => ({\n checkbox: opt,\n textFieldValue: opt.querySelector(\"ic-text-field\")?.value,\n })),\n selectedOption: ev.target as HTMLIcCheckboxElement,\n });\n }\n\n render() {\n const describedBy = getInputDescribedByText(\n this.name,\n this.helperText !== \"\",\n this.validationStatus !== \"\"\n );\n const hadValidationStatus = hasValidationStatus(\n this.validationStatus,\n this.disabled\n );\n\n return (\n <Host class={{ [\"small\"]: this.small, [`${this.size}`]: true }}>\n {(this.validationStatus === \"error\" \|\|\n this.required \|\|\n this.hideLabel) && (\n <span\n id=\"screenReaderOnlyText\"\n class=\"screen-reader-only-text\"\n aria-hidden=\"true\"\n >\n {this.label}{\" \"}\n {this.validationStatus === \"error\" ? \"invalid data \" : null}{\" \"}\n {this.required ? \"required\" : null}\n </span>\n )}\n <fieldset\n id={this.name}\n aria-labelledby={`${\n this.validationStatus === \"error\" \|\| this.required \|\| this.hideLabel\n ? \"screenReaderOnlyText\"\n : \"\"\n } ${describedBy}`.trim()}\n disabled={this.disabled}\n >\n {!this.hideLabel && (\n <legend>\n <ic-input-label\n class={{ [`${this.validationStatus}`]: true }}\n label={this.label}\n helperText={this.helperText}\n required={this.required}\n disabled={this.disabled}\n for={this.name}\n ></ic-input-label>\n </legend>\n )}\n <div class=\"checkboxes-container\">\n <slot></slot>\n </div>\n </fieldset>\n {hadValidationStatus && (\n <ic-input-validation\n for={this.name}\n ariaLiveMode=\"polite\"\n status={this.validationStatus}\n message={this.validationText}\n ></ic-input-validation>\n )}\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"ic-checkbox-group.js","sourceRoot":"","sources":["../../../src/components/ic-checkbox-group/ic-checkbox-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n h,\n Prop,\n Listen,\n Element,\n Event,\n EventEmitter,\n} from \"@stencil/core\";\nimport {\n getInputDescribedByText,\n hasValidationStatus,\n onComponentRequiredPropUndefined,\n removeDisabledFalse,\n} from \"../../utils/helpers\";\nimport { IcInformationStatusOrEmpty, IcSizes } from \"../../utils/types\";\nimport { IcChangeEventDetail } from \"./ic-checkbox-group.types\";\n\n@Component({\n tag: \"ic-checkbox-group\",\n styleUrl: \"ic-checkbox-group.css\",\n shadow: true,\n})\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport class CheckboxGroup {\n @Element() el: HTMLIcCheckboxGroupElement;\n\n /*\n If `true`, the checkbox group will be set to the disabled state.\n /\n @Prop() disabled: boolean = false;\n\n /\n The helper text that will be displayed for additional field guidance.\n /\n @Prop() helperText: 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: boolean = false;\n\n /\n The label for the checkbox group to be displayed.\n /\n @Prop() label!: string;\n\n /\n The name for the checkbox group to differentiate from other groups.\n /\n @Prop() name!: string;\n\n /\n If `true`, the checkbox group will require a value.\n /\n @Prop() required: boolean = false;\n\n /\n The size of the checkboxes to be displayed. This does not affect the font size of the label.\n /\n @Prop() size?: IcSizes = \"default\";\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 validation status - e.g. 'error' \| 'warning' \| 'success'.\n /\n @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n\n /\n The validation text - e.g. 'error' \| 'warning' \| 'success'.\n /\n @Prop() validationText: string = \"\";\n\n /\n Emitted when a checkbox is checked.\n */\n @Event() icChange: EventEmitter<IcChangeEventDetail>;\n\n componentWillLoad(): void {\n removeDisabledFalse(this.disabled, this.el);\n }\n\n componentDidLoad(): void {\n Array.from(this.el.querySelectorAll(\"ic-checkbox\")).forEach((checkbox) => {\n if (!checkbox.name) checkbox.name = this.name;\n checkbox.groupLabel = this.label;\n });\n\n onComponentRequiredPropUndefined(\n [\n { prop: this.label, propName: \"label\" },\n { prop: this.name, propName: \"name\" },\n ],\n \"Checkbox Group\"\n );\n }\n\n @Listen(\"icCheck\")\n selectHandler(ev: CustomEvent): void {\n const checkedOptions = Array.from(\n this.el.querySelectorAll(\"ic-checkbox\")\n ).filter((checkbox) => checkbox.checked && !checkbox.disabled);\n this.icChange.emit({\n value: checkedOptions.map((opt) => opt.value),\n checkedOptions: checkedOptions.map((opt) => ({\n checkbox: opt,\n textFieldValue: opt.querySelector(\"ic-text-field\")?.value,\n })),\n selectedOption: ev.target as HTMLIcCheckboxElement,\n });\n }\n\n render() {\n const describedBy = getInputDescribedByText(\n this.name,\n this.helperText !== \"\",\n this.validationStatus !== \"\"\n );\n const hadValidationStatus = hasValidationStatus(\n this.validationStatus,\n this.disabled\n );\n\n return (\n <Host class={{ [\"small\"]: this.small, [`${this.size}`]: true }}>\n {(this.validationStatus === \"error\" \|\|\n this.required \|\|\n this.hideLabel) && (\n <span\n id=\"screenReaderOnlyText\"\n class=\"screen-reader-only-text\"\n aria-hidden=\"true\"\n >\n {this.label}{\" \"}\n {this.validationStatus === \"error\" ? \"invalid data \" : null}{\" \"}\n {this.required ? \"required\" : null}\n </span>\n )}\n <fieldset\n id={this.name}\n aria-labelledby={`${\n this.validationStatus === \"error\" \|\| this.required \|\| this.hideLabel\n ? \"screenReaderOnlyText\"\n : \"\"\n } ${describedBy}`.trim()}\n disabled={this.disabled}\n >\n {!this.hideLabel && (\n <legend>\n <ic-input-label\n class={{ [`${this.validationStatus}`]: true }}\n label={this.label}\n helperText={this.helperText}\n required={this.required}\n disabled={this.disabled}\n for={this.name}\n ></ic-input-label>\n </legend>\n )}\n <div class=\"checkboxes-container\">\n <slot></slot>\n </div>\n </fieldset>\n {hadValidationStatus && (\n <ic-input-validation\n for={this.name}\n ariaLiveMode=\"polite\"\n status={this.validationStatus}\n message={this.validationText}\n ></ic-input-validation>\n )}\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/ic-checkbox-group/test/basic/ic-checkbox-group.spec.js CHANGED Viewed

@@ -30,6 +30,13 @@ describe("ic-checkbox-group", () => {
     });
     expect(page.root).toMatchSnapshot("renders-with-helpertext");
   });
+  it("should test checkbox option as submit on form", async () => {
+    const page = await newSpecPage({
+      components: [Checkbox],
+      html: `<form id="new-form"></form><ic-checkbox id="ic-checkbox" label="IC Checkbox Test" value="test-value" form="new-form" selected></ic-checkbox>`,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
   it("should render checked", async () => {
     const page = await newSpecPage({
       components: [CheckboxGroup, Checkbox],

package/dist/collection/components/ic-checkbox-group/test/basic/ic-checkbox-group.spec.js.map CHANGED Viewed

	@@ -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 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"]}
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"]}

package/dist/collection/components/ic-chip/ic-chip.css CHANGED Viewed

@@ -480,7 +480,8 @@ video {
   z-index: 1;
 }
-.chip.outline.hovered:not(:focus-within) {
+.chip.outline.hovered:not(:focus-within),
+.chip.outlined.hovered:not(:focus-within) {
   background-color: var(--ic-action-dark-bg-hover);
 }
@@ -498,21 +499,25 @@ ic-tooltip:focus-within {
   background-color: var(--ic-architectural-100);
 }
-.outline {
+.outline,
+.outlined {
   color: var(--ic-architectural-900);
   border: var(--ic-space-1px) solid var(--ic-architectural-900);
   padding: calc(var(--ic-space-xxs) - var(--ic-space-1px));
 }
-.outline.small {
+.outline.small,
+.outlined.small {
   padding: calc(var(--ic-space-xxxs) - var(--ic-space-1px));
 }
-.outline.large {
+.outline.large,
+.outlined.large {
   padding: calc(var(--ic-space-xs) - var(--ic-space-1px));
 }
-.outline.disabled {
+.outline.disabled,
+.outlined.disabled {
   border: var(--ic-border-disabled);
   background: none;
 }

package/dist/collection/components/ic-chip/ic-chip.js CHANGED Viewed

@@ -19,14 +19,18 @@ export class Chip {
     };
     this.isHovered = false;
     this.visible = true;
-    this.appearance = "filled";
+    this.appearance = undefined;
     this.disabled = false;
     this.dismissible = false;
     this.label = undefined;
     this.size = "default";
+    this.variant = "filled";
   }
   componentWillLoad() {
     removeDisabledFalse(this.disabled, this.el);
+    if (this.appearance === "outline") {
+      this.variant = "outlined";
+    }
   }
   componentDidLoad() {
     var _a;
@@ -47,10 +51,11 @@ export class Chip {
     }
   }
   render() {
-    const { label, appearance, size, dismissible, visible, disabled, isHovered, } = this;
+    const { label, appearance, variant, size, dismissible, visible, disabled, isHovered, } = this;
     return (visible && (h("div", { class: {
         ["chip"]: true,
-        [`${appearance}`]: true,
+        [`${appearance}`]: appearance !== undefined,
+        [`${variant}`]: true,
         [`${size}`]: true,
         ["disabled"]: disabled,
         ["dismissible"]: dismissible,
@@ -91,12 +96,14 @@ export class Chip {
         "required": false,
         "optional": true,
         "docs": {
-          "tags": [],
-          "text": "The emphasis of the chip."
+          "tags": [{
+              "name": "deprecated",
+              "text": "This prop should not be used anymore. Use variant prop instead."
+            }],
+          "text": ""
         },
         "attribute": "appearance",
-        "reflect": false,
-        "defaultValue": "\"filled\""
+        "reflect": false
       },
       "disabled": {
         "type": "boolean",
@@ -174,6 +181,30 @@ export class Chip {
         "attribute": "size",
         "reflect": false,
         "defaultValue": "\"default\""
+      },
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "IcEmphasisType",
+          "resolved": "\"filled\" | \"outlined\"",
+          "references": {
+            "IcEmphasisType": {
+              "location": "import",
+              "path": "../../utils/types",
+              "id": "src/utils/types.ts::IcEmphasisType"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The emphasis of the chip."
+        },
+        "attribute": "variant",
+        "reflect": false,
+        "defaultValue": "\"filled\""
       }
     };
   }

package/dist/collection/components/ic-chip/ic-chip.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-chip.js","sourceRoot":"","sources":["../../../src/components/ic-chip/ic-chip.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,CAAC,EACD,IAAI,EACJ,KAAK,EACL,MAAM,EACN,KAAK,EAEL,OAAO,EACP,MAAM,GACP,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,gCAAgC,EAChC,UAAU,EACV,mBAAmB,GACpB,MAAM,qBAAqB,CAAC;AAG7B,OAAO,WAAW,MAAM,+BAA+B,CAAC;AAExD;;;GAGG;AAQH,MAAM,OAAO,IAAI;;~~IAuEP~~,kBAAa,GAAG,GAAS,EAAE;MACjC,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;MACpB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;IACxB,CAAC,CAAC;IAEM,sBAAiB,GAAG,GAAS,EAAE;MACrC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;IACxB,CAAC,CAAC;IAEM,sBAAiB,GAAG,GAAS,EAAE;MACrC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;IACzB,CAAC,CAAC;~~qBA/E4B~~,KAAK;mBACP,IAAI~~;sBAKQ~~,~~QAAQ;oBAKnB,~~KAAK;uBAKF,KAAK;;gBAUZ,SAAS;;~~EAYlC~~,iBAAiB;IACf,mBAAmB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;~~EAC9C~~,CAAC;EAED,gBAAgB;;IACd,IAAI,CAAC,WAAW;OACd,MAAA,IAAI,CAAC,EAAE,CAAC,UAAU;SACf,aAAa,CAAC,uBAAuB,CAAC,0CACrC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAA,CAAC;IAC1C,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EACzC,MAAM,CACP,CAAC;EACJ,CAAC;EAGD,WAAW;IACT,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;EAC/B,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,QAAQ;IACZ,IAAI,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE;MAC9C,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,KAAK,EAAE,CAAC;KACpD;EACH,CAAC;EAeD,MAAM;IACJ,MAAM,EACJ,KAAK,EACL,UAAU,EACV,IAAI,EACJ,WAAW,EACX,OAAO,EACP,QAAQ,EACR,SAAS,GACV,GAAG,IAAI,CAAC;IAET,OAAO,CACL,OAAO,IAAI,CACT,WACE,KAAK,EAAE;QACL,CAAC,MAAM,CAAC,EAAE,IAAI;QACd,CAAC,GAAG,UAAU,EAAE,CAAC,EAAE,IAAI;~~QACvB~~,CAAC,GAAG,IAAI,EAAE,CAAC,EAAE,IAAI;QACjB,CAAC,UAAU,CAAC,EAAE,QAAQ;QACtB,CAAC,aAAa,CAAC,EAAE,WAAW;QAC5B,CAAC,SAAS,CAAC,EAAE,SAAS;OACvB;MAEA,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,IAAI,CAC9B,WAAK,KAAK,EAAC,MAAM;QACf,YAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACP;MACD,qBACE,OAAO,EAAC,OAAO,4BACS,KAAK,EAC7B,KAAK,EAAC,OAAO;QAEb,gBAAO,KAAK,CAAQ,CACN;MACf,WAAW,IAAI,CACd,kBACE,KAAK,EAAC,SAAS,EACf,MAAM,EAAC,cAAc,EACrB,KAAK,EAAE,EAAE,CAAC,kBAAkB,CAAC,EAAE,QAAQ,EAAE;QAEzC,cACE,EAAE,EAAC,cAAc,EACjB,KAAK,EAAE;YACL,CAAC,cAAc,CAAC,EAAE,IAAI;WACvB,gBACW,WAAW,KAAK,OAAO,EACnC,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAC3B,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,YAAY,EAAE,IAAI,CAAC,iBAAiB,EACpC,YAAY,EAAE,IAAI,CAAC,iBAAiB,EACpC,SAAS,EAAE,WAAW,GACd,CACC,CACd;MACA,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,CAAC,IAAI,YAAM,IAAI,EAAC,OAAO,GAAQ,CACvD,CACP,CACF,CAAC;EACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["import {\n Component,\n h,\n Prop,\n State,\n Listen,\n Event,\n EventEmitter,\n Element,\n Method,\n} from \"@stencil/core\";\nimport {\n onComponentRequiredPropUndefined,\n isSlotUsed,\n removeDisabledFalse,\n} from \"../../utils/helpers\";\nimport { IcChipAppearance } from \"./ic-chip.types\";\nimport { IcSizes } from \"../../utils/types\";\nimport dismissIcon from \"../../assets/dismiss-icon.svg\";\n\n/*\n @slot icon - Content will be rendered at the start of the chip.\n * @slot badge - Badge component overlaying the top right of the chip.\n /\n@Component({\n tag: \"ic-chip\",\n styleUrl: \"ic-chip.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class Chip {\n @Element() el: HTMLIcChipElement;\n\n @State() isHovered: boolean = false;\n @State() visible: boolean = true;\n\n /\n ~~The~~ ~~emphasis~~ of ~~the~~ ~~chip~~.\n /\n @Prop() appearance?: IcChipAppearance ~~= \"filled\"~~;\n\n /\n If `true`, the chip will appear disabled.\n /\n @Prop() disabled?: boolean = false;\n\n /\n If `true`, the chip will have a close button at the end to dismiss it.\n /\n @Prop() dismissible?: boolean = false;\n\n /\n The text rendered within the chip.\n /\n @Prop() label!: string;\n\n /\n The size of the chip.\n /\n @Prop() size?: IcSizes = \"default\";\n\n /\n @deprecated This event should not be used anymore. Use icDismiss instead.\n /\n @Event() dismiss: EventEmitter<void>;\n\n /\n Is emitted when the user dismisses the chip.\n /\n @Event() icDismiss: EventEmitter<void>;\n\n componentWillLoad(): void {\n removeDisabledFalse(this.disabled, this.el);\n }\n\n componentDidLoad(): void {\n this.dismissible &&\n this.el.shadowRoot\n .querySelector(\"span.ic-tooltip-label\")\n ?.setAttribute(\"aria-hidden\", \"true\");\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Chip\"\n );\n }\n\n @Listen(\"icDismiss\", { capture: true })\n handleClick(): void {\n this.visible = !this.visible;\n }\n\n /\n Sets focus on the chip.\n */\n @Method()\n async setFocus(): Promise<void> {\n if (this.el.shadowRoot.querySelector(\"button\")) {\n this.el.shadowRoot.querySelector(\"button\").focus();\n }\n }\n\n private dismissAction = (): void => {\n this.dismiss.emit();\n this.icDismiss.emit();\n };\n\n private mouseEnterHandler = (): void => {\n this.isHovered = true;\n };\n\n private mouseLeaveHandler = (): void => {\n this.isHovered = false;\n };\n\n render() {\n const {\n label,\n appearance,\n size,\n dismissible,\n visible,\n disabled,\n isHovered,\n } = this;\n\n return (\n visible && (\n <div\n class={{\n [\"chip\"]: true,\n [`${appearance}`]: true,\n [`${size}`]: true,\n [\"disabled\"]: disabled,\n [\"dismissible\"]: dismissible,\n [\"hovered\"]: isHovered,\n }}\n >\n {isSlotUsed(this.el, \"icon\") && (\n <div class=\"icon\">\n <slot name=\"icon\" />\n </div>\n )}\n <ic-typography\n variant=\"label\"\n apply-vertical-margins={false}\n class=\"label\"\n >\n <span>{label}</span>\n </ic-typography>\n {dismissible && (\n <ic-tooltip\n label=\"Dismiss\"\n target=\"dismiss-icon\"\n class={{ [\"tooltip-disabled\"]: disabled }}\n >\n <button\n id=\"dismiss-icon\"\n class={{\n [\"dismiss-icon\"]: true,\n }}\n aria-label={`Dismiss ${label} chip`}\n disabled={disabled}\n tabindex={disabled ? -1 : 0}\n onClick={this.dismissAction}\n onMouseEnter={this.mouseEnterHandler}\n onMouseLeave={this.mouseLeaveHandler}\n innerHTML={dismissIcon}\n ></button>\n </ic-tooltip>\n )}\n {isSlotUsed(this.el, \"badge\") && <slot name=\"badge\"></slot>}\n </div>\n )\n );\n }\n}\n"]}
1	+ {"version":3,"file":"ic-chip.js","sourceRoot":"","sources":["../../../src/components/ic-chip/ic-chip.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n h,\n Prop,\n State,\n Listen,\n Event,\n EventEmitter,\n Element,\n Method,\n} from \"@stencil/core\";\nimport {\n onComponentRequiredPropUndefined,\n isSlotUsed,\n removeDisabledFalse,\n} from \"../../utils/helpers\";\nimport { IcChipAppearance } from \"./ic-chip.types\";\nimport { IcEmphasisType, IcSizes } from \"../../utils/types\";\nimport dismissIcon from \"../../assets/dismiss-icon.svg\";\n\n/*\n @slot icon - Content will be rendered at the start of the chip.\n * @slot badge - Badge component overlaying the top right of the chip.\n /\n@Component({\n tag: \"ic-chip\",\n styleUrl: \"ic-chip.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class Chip {\n @Element() el: HTMLIcChipElement;\n\n @State() isHovered: boolean = false;\n @State() visible: boolean = true;\n\n /\n @deprecated This prop should not be used anymore. Use variant prop instead.\n /\n @Prop() appearance?: IcChipAppearance;\n\n /\n If `true`, the chip will appear disabled.\n /\n @Prop() disabled?: boolean = false;\n\n /\n If `true`, the chip will have a close button at the end to dismiss it.\n /\n @Prop() dismissible?: boolean = false;\n\n /\n The text rendered within the chip.\n /\n @Prop() label!: string;\n\n /\n The size of the chip.\n /\n @Prop() size?: IcSizes = \"default\";\n\n /\n The emphasis of the chip.\n /\n @Prop() variant?: IcEmphasisType = \"filled\";\n\n /\n @deprecated This event should not be used anymore. Use icDismiss instead.\n /\n @Event() dismiss: EventEmitter<void>;\n\n /\n Is emitted when the user dismisses the chip.\n /\n @Event() icDismiss: EventEmitter<void>;\n\n componentWillLoad(): void {\n removeDisabledFalse(this.disabled, this.el);\n\n if (this.appearance === \"outline\") {\n this.variant = \"outlined\";\n }\n }\n\n componentDidLoad(): void {\n this.dismissible &&\n this.el.shadowRoot\n .querySelector(\"span.ic-tooltip-label\")\n ?.setAttribute(\"aria-hidden\", \"true\");\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Chip\"\n );\n }\n\n @Listen(\"icDismiss\", { capture: true })\n handleClick(): void {\n this.visible = !this.visible;\n }\n\n /\n Sets focus on the chip.\n */\n @Method()\n async setFocus(): Promise<void> {\n if (this.el.shadowRoot.querySelector(\"button\")) {\n this.el.shadowRoot.querySelector(\"button\").focus();\n }\n }\n\n private dismissAction = (): void => {\n this.dismiss.emit();\n this.icDismiss.emit();\n };\n\n private mouseEnterHandler = (): void => {\n this.isHovered = true;\n };\n\n private mouseLeaveHandler = (): void => {\n this.isHovered = false;\n };\n\n render() {\n const {\n label,\n appearance,\n variant,\n size,\n dismissible,\n visible,\n disabled,\n isHovered,\n } = this;\n\n return (\n visible && (\n <div\n class={{\n [\"chip\"]: true,\n [`${appearance}`]: appearance !== undefined,\n [`${variant}`]: true,\n [`${size}`]: true,\n [\"disabled\"]: disabled,\n [\"dismissible\"]: dismissible,\n [\"hovered\"]: isHovered,\n }}\n >\n {isSlotUsed(this.el, \"icon\") && (\n <div class=\"icon\">\n <slot name=\"icon\" />\n </div>\n )}\n <ic-typography\n variant=\"label\"\n apply-vertical-margins={false}\n class=\"label\"\n >\n <span>{label}</span>\n </ic-typography>\n {dismissible && (\n <ic-tooltip\n label=\"Dismiss\"\n target=\"dismiss-icon\"\n class={{ [\"tooltip-disabled\"]: disabled }}\n >\n <button\n id=\"dismiss-icon\"\n class={{\n [\"dismiss-icon\"]: true,\n }}\n aria-label={`Dismiss ${label} chip`}\n disabled={disabled}\n tabindex={disabled ? -1 : 0}\n onClick={this.dismissAction}\n onMouseEnter={this.mouseEnterHandler}\n onMouseLeave={this.mouseLeaveHandler}\n innerHTML={dismissIcon}\n ></button>\n </ic-tooltip>\n )}\n {isSlotUsed(this.el, \"badge\") && <slot name=\"badge\"></slot>}\n </div>\n )\n );\n }\n}\n"]}

package/dist/collection/components/ic-data-entity/ic-data-entity.js CHANGED Viewed

@@ -1,18 +1,22 @@
 import { Host, h } from "@stencil/core";
+/**
+ * @slot heading - Content will be placed at the top of the data entity.
+ */
 export class DataEntity {
   constructor() {
     this.heading = undefined;
+    this.size = "default";
     this.small = false;
   }
   render() {
-    const { heading, small } = this;
+    const { heading, small, size } = this;
     const children = this.el.children;
-    if (small) {
+    if (small || size === "small") {
       for (let i = 0; i < children.length; i++) {
-        children[i].setAttribute("small", "true");
+        children[i].setAttribute("size", "small");
       }
     }
-    return (h(Host, { class: { ["small"]: small } }, h("div", { class: "heading", id: "data-entity-heading" }, h("slot", { name: "heading" }, h("ic-typography", { variant: "h3" }, heading))), h("div", { class: "divider" }), h("ul", { "aria-labelledby": "data-entity-heading", class: "rows" }, h("slot", null))));
+    return (h(Host, { class: { ["small"]: small || size === "small" } }, h("div", { class: "heading", id: "data-entity-heading" }, h("slot", { name: "heading" }, h("ic-typography", { variant: "h3" }, heading))), h("div", { class: "divider" }), h("ul", { "aria-labelledby": "data-entity-heading", class: "rows" }, h("slot", null))));
   }
   static get is() { return "ic-data-entity"; }
   static get encapsulation() { return "shadow"; }
@@ -45,6 +49,30 @@ export class DataEntity {
         "attribute": "heading",
         "reflect": false
       },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "IcSizesNoLarge",
+          "resolved": "\"default\" | \"small\"",
+          "references": {
+            "IcSizesNoLarge": {
+              "location": "import",
+              "path": "../../utils/types",
+              "id": "src/utils/types.ts::IcSizesNoLarge"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The size of the data entity component."
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "\"default\""
+      },
       "small": {
         "type": "boolean",
         "mutable": false,
@@ -54,10 +82,13 @@ export class DataEntity {
           "references": {}
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
-          "tags": [],
-          "text": "If `true`, the small styling will be applied to the data heading and all child data rows."
+          "tags": [{
+              "name": "deprecated",
+              "text": "This prop should not be used anymore. Set prop `size` to \"small\" instead."
+            }],
+          "text": ""
         },
         "attribute": "small",
         "reflect": false,

package/dist/collection/components/ic-data-entity/ic-data-entity.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-data-entity.js","sourceRoot":"","sources":["../../../src/components/ic-data-entity/ic-data-entity.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;~~AAOlE~~,MAAM,OAAO,UAAU;;;~~iBAWI~~,KAAK;;~~EAE9B~~,MAAM;IACJ,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;~~IAEhC~~,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC;IAElC,IAAI,KAAK,EAAE;~~MACT~~,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QACxC,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,~~OAAO~~,EAAE,~~MAAM~~,CAAC,CAAC;OAC3C;KACF;IAED,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE;~~MAC/B~~,WAAK,KAAK,EAAC,SAAS,EAAC,EAAE,EAAC,qBAAqB;QAC3C,YAAM,IAAI,EAAC,SAAS;UAClB,qBAAe,OAAO,EAAC,IAAI,IAAE,OAAO,CAAiB,CAChD,CACH;MACN,WAAK,KAAK,EAAC,SAAS,GAAG;MACvB,6BAAoB,qBAAqB,EAAC,KAAK,EAAC,MAAM;QACpD,eAAa,CACV,CACA,CACR,CAAC;EACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["import { Component, Element, Host, h, Prop } from \"@stencil/core\";\n\n@Component({\n tag: \"ic-data-entity\",\n styleUrl: \"ic-data-entity.css\",\n shadow: true,\n})\nexport class DataEntity {\n @Element() el: HTMLIcDataEntityElement;\n\n /*\n The title for the data entity.\n /\n @Prop() heading: string;\n\n /\n If ~~`true`,~~ the ~~small~~ ~~styling~~ ~~will~~ be ~~applied~~ to ~~the~~ ~~data~~ ~~heading~~ ~~and~~ ~~all~~ ~~child~~ ~~data~~ ~~rows~~.\n */\n @Prop() small: boolean = false;\n\n render() {\n const { heading, small } = this;\n\n const children = this.el.children;\n\n if (small) {\n for (let i = 0; i < children.length; i++) {\n children[i].setAttribute(\"~~small~~\", \"~~true~~\");\n }\n }\n\n return (\n <Host class={{ [\"small\"]: small }}>\n <div class=\"heading\" id=\"data-entity-heading\">\n <slot name=\"heading\">\n <ic-typography variant=\"h3\">{heading}</ic-typography>\n </slot>\n </div>\n <div class=\"divider\" />\n <ul aria-labelledby=\"data-entity-heading\" class=\"rows\">\n <slot></slot>\n </ul>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"ic-data-entity.js","sourceRoot":"","sources":["../../../src/components/ic-data-entity/ic-data-entity.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAGlE;;GAEG;AAMH,MAAM,OAAO,UAAU;;;gBAWW,SAAS;iBAKf,KAAK;;EAE/B,MAAM;IACJ,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;IAEtC,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC;IAElC,IAAI,KAAK,IAAI,IAAI,KAAK,OAAO,EAAE;MAC7B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QACxC,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;OAC3C;KACF;IAED,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,CAAC,OAAO,CAAC,EAAE,KAAK,IAAI,IAAI,KAAK,OAAO,EAAE;MACnD,WAAK,KAAK,EAAC,SAAS,EAAC,EAAE,EAAC,qBAAqB;QAC3C,YAAM,IAAI,EAAC,SAAS;UAClB,qBAAe,OAAO,EAAC,IAAI,IAAE,OAAO,CAAiB,CAChD,CACH;MACN,WAAK,KAAK,EAAC,SAAS,GAAG;MACvB,6BAAoB,qBAAqB,EAAC,KAAK,EAAC,MAAM;QACpD,eAAa,CACV,CACA,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, h, Prop } from \"@stencil/core\";\nimport { IcSizesNoLarge } from \"../../utils/types\";\n\n/*\n @slot heading - Content will be placed at the top of the data entity.\n /\n@Component({\n tag: \"ic-data-entity\",\n styleUrl: \"ic-data-entity.css\",\n shadow: true,\n})\nexport class DataEntity {\n @Element() el: HTMLIcDataEntityElement;\n\n /\n The title for the data entity.\n /\n @Prop() heading: string;\n\n /\n The size of the data entity component.\n /\n @Prop() size?: IcSizesNoLarge = \"default\";\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 render() {\n const { heading, small, size } = this;\n\n const children = this.el.children;\n\n if (small \|\| size === \"small\") {\n for (let i = 0; i < children.length; i++) {\n children[i].setAttribute(\"size\", \"small\");\n }\n }\n\n return (\n <Host class={{ [\"small\"]: small \|\| size === \"small\" }}>\n <div class=\"heading\" id=\"data-entity-heading\">\n <slot name=\"heading\">\n <ic-typography variant=\"h3\">{heading}</ic-typography>\n </slot>\n </div>\n <div class=\"divider\" />\n <ul aria-labelledby=\"data-entity-heading\" class=\"rows\">\n <slot></slot>\n </ul>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/ic-data-entity/test/basic/ic-data-entity.spec.js CHANGED Viewed

@@ -67,9 +67,9 @@ describe("ic-data-entity", () => {
           <slot></slot>
         </ul>
       </mock:shadow-root>
-     <ic-data-row small="true" label="Label" value="value"></ic-data-row>
-     <ic-data-row small="true" label="Label" value="value"></ic-data-row>
-     <ic-data-row small="true" label="Label" value="value"></ic-data-row>
+     <ic-data-row size="small" label="Label" value="value"></ic-data-row>
+     <ic-data-row size="small" label="Label" value="value"></ic-data-row>
+     <ic-data-row size="small" label="Label" value="value"></ic-data-row>
     </ic-data-entity>
     `);
   });

package/dist/collection/components/ic-data-entity/test/basic/ic-data-entity.spec.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-data-entity.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-data-entity/test/basic/ic-data-entity.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAElD,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;EAC9B,EAAE,CAAC,sCAAsC,EAAE,KAAK,IAAI,EAAE;IACpD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;MACxB,IAAI,EAAE;;;;;;;;;;wBAUY;KACnB,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;KAwB7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,+BAA+B,EAAE,KAAK,IAAI,EAAE;IAC7C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;MACxB,IAAI,EAAE;;;;;wBAKY;KACnB,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;KAmB7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,sCAAsC,EAAE,KAAK,IAAI,EAAE;IACpD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;MACxB,IAAI,EAAE;;;;;;;;;;;wBAWY;KACnB,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;KAyB7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,sDAAsD,EAAE,KAAK,IAAI,EAAE;IACpE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;MACxB,IAAI,EAAE;;;;;;;;;;wBAUY;KACnB,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;KAwB7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { DataEntity } from \"../../ic-data-entity\";\n\ndescribe(\"ic-data-entity\", () => {\n it(\"should render with data-row children\", async () => {\n const page = await newSpecPage({\n components: [DataEntity],\n html: `\n <ic-data-entity heading=\"Heading\">\n <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n </ic-data-entity>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-data-entity heading=\"Heading\">\n <mock:shadow-root>\n <div class=\"heading\" id=\"data-entity-heading\">\n <slot name=\"heading\"> \n <ic-typography variant=\"h3\">\n Heading\n </ic-typography>\n </slot>\n </div>\n <div class=\"divider\"></div>\n <ul aria-labelledby=\"data-entity-heading\" class=\"rows\">\n <slot></slot>\n </ul>\n </mock:shadow-root>\n <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n </ic-data-entity>\n `);\n });\n\n it(\"should render with small prop\", async () => {\n const page = await newSpecPage({\n components: [DataEntity],\n html: `\n <ic-data-entity heading=\"Heading\" small>\n <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n </ic-data-entity>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-data-entity heading=\"Heading\" class=\"small\" small>\n <mock:shadow-root>\n <div class=\"heading\" id=\"data-entity-heading\">\n <slot name=\"heading\"> \n <ic-typography variant=\"h3\">\n Heading\n </ic-typography>\n </slot>\n </div>\n <div class=\"divider\"></div>\n <ul aria-labelledby=\"data-entity-heading\" class=\"rows\">\n <slot></slot>\n </ul>\n </mock:shadow-root>\n <ic-data-row ~~small~~=\"~~true~~\" label=\"Label\" value=\"value\"></ic-data-row>\n <ic-data-row ~~small~~=\"~~true~~\" label=\"Label\" value=\"value\"></ic-data-row>\n <ic-data-row ~~small~~=\"~~true~~\" label=\"Label\" value=\"value\"></ic-data-row>\n </ic-data-entity>\n `);\n });\n\n it(\"should render with a slotted heading\", async () => {\n const page = await newSpecPage({\n components: [DataEntity],\n html: `\n <ic-data-entity>\n <ic-typography variant=\"h3\" slot=\"heading\">Heading</ic-typography>\n <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n </ic-data-entity>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-data-entity>\n <mock:shadow-root>\n <div class=\"heading\" id=\"data-entity-heading\">\n <slot name=\"heading\"> \n <ic-typography variant=\"h3\"></ic-typography>\n </slot>\n </div>\n <div class=\"divider\"></div>\n <ul aria-labelledby=\"data-entity-heading\" class=\"rows\">\n <slot></slot>\n </ul>\n </mock:shadow-root>\n <ic-typography slot=\"heading\" variant=\"h3\">\n Heading\n </ic-typography>\n <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n </ic-data-entity>\n `);\n });\n\n it(\"should render data-row children with slotted content\", async () => {\n const page = await newSpecPage({\n components: [DataEntity],\n html: `\n <ic-data-entity heading=\"Heading\">\n <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n </ic-data-entity>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-data-entity heading=\"Heading\">\n <mock:shadow-root>\n <div class=\"heading\" id=\"data-entity-heading\">\n <slot name=\"heading\"> \n <ic-typography variant=\"h3\">\n Heading\n </ic-typography>\n </slot>\n </div>\n <div class=\"divider\"></div>\n <ul aria-labelledby=\"data-entity-heading\" class=\"rows\">\n <slot></slot>\n </ul>\n </mock:shadow-root>\n <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n </ic-data-entity>\n `);\n });\n});\n"]}
1	+ {"version":3,"file":"ic-data-entity.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-data-entity/test/basic/ic-data-entity.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAElD,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;EAC9B,EAAE,CAAC,sCAAsC,EAAE,KAAK,IAAI,EAAE;IACpD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;MACxB,IAAI,EAAE;;;;;;;;;;wBAUY;KACnB,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;KAwB7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,+BAA+B,EAAE,KAAK,IAAI,EAAE;IAC7C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;MACxB,IAAI,EAAE;;;;;wBAKY;KACnB,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;KAmB7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,sCAAsC,EAAE,KAAK,IAAI,EAAE;IACpD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;MACxB,IAAI,EAAE;;;;;;;;;;;wBAWY;KACnB,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;KAyB7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,sDAAsD,EAAE,KAAK,IAAI,EAAE;IACpE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;MACxB,IAAI,EAAE;;;;;;;;;;wBAUY;KACnB,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;KAwB7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { DataEntity } from \"../../ic-data-entity\";\n\ndescribe(\"ic-data-entity\", () => {\n it(\"should render with data-row children\", async () => {\n const page = await newSpecPage({\n components: [DataEntity],\n html: `\n <ic-data-entity heading=\"Heading\">\n <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n </ic-data-entity>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-data-entity heading=\"Heading\">\n <mock:shadow-root>\n <div class=\"heading\" id=\"data-entity-heading\">\n <slot name=\"heading\"> \n <ic-typography variant=\"h3\">\n Heading\n </ic-typography>\n </slot>\n </div>\n <div class=\"divider\"></div>\n <ul aria-labelledby=\"data-entity-heading\" class=\"rows\">\n <slot></slot>\n </ul>\n </mock:shadow-root>\n <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n </ic-data-entity>\n `);\n });\n\n it(\"should render with small prop\", async () => {\n const page = await newSpecPage({\n components: [DataEntity],\n html: `\n <ic-data-entity heading=\"Heading\" small>\n <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n </ic-data-entity>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-data-entity heading=\"Heading\" class=\"small\" small>\n <mock:shadow-root>\n <div class=\"heading\" id=\"data-entity-heading\">\n <slot name=\"heading\"> \n <ic-typography variant=\"h3\">\n Heading\n </ic-typography>\n </slot>\n </div>\n <div class=\"divider\"></div>\n <ul aria-labelledby=\"data-entity-heading\" class=\"rows\">\n <slot></slot>\n </ul>\n </mock:shadow-root>\n <ic-data-row size=\"small\" label=\"Label\" value=\"value\"></ic-data-row>\n <ic-data-row size=\"small\" label=\"Label\" value=\"value\"></ic-data-row>\n <ic-data-row size=\"small\" label=\"Label\" value=\"value\"></ic-data-row>\n </ic-data-entity>\n `);\n });\n\n it(\"should render with a slotted heading\", async () => {\n const page = await newSpecPage({\n components: [DataEntity],\n html: `\n <ic-data-entity>\n <ic-typography variant=\"h3\" slot=\"heading\">Heading</ic-typography>\n <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n </ic-data-entity>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-data-entity>\n <mock:shadow-root>\n <div class=\"heading\" id=\"data-entity-heading\">\n <slot name=\"heading\"> \n <ic-typography variant=\"h3\"></ic-typography>\n </slot>\n </div>\n <div class=\"divider\"></div>\n <ul aria-labelledby=\"data-entity-heading\" class=\"rows\">\n <slot></slot>\n </ul>\n </mock:shadow-root>\n <ic-typography slot=\"heading\" variant=\"h3\">\n Heading\n </ic-typography>\n <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n </ic-data-entity>\n `);\n });\n\n it(\"should render data-row children with slotted content\", async () => {\n const page = await newSpecPage({\n components: [DataEntity],\n html: `\n <ic-data-entity heading=\"Heading\">\n <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n </ic-data-entity>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-data-entity heading=\"Heading\">\n <mock:shadow-root>\n <div class=\"heading\" id=\"data-entity-heading\">\n <slot name=\"heading\"> \n <ic-typography variant=\"h3\">\n Heading\n </ic-typography>\n </slot>\n </div>\n <div class=\"divider\"></div>\n <ul aria-labelledby=\"data-entity-heading\" class=\"rows\">\n <slot></slot>\n </ul>\n </mock:shadow-root>\n <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n </ic-data-entity>\n `);\n });\n});\n"]}