@govtechsg/sgds-web-component 3.23.0-rc.1 → 3.23.0-rc.3
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.
- package/base/select-element.d.ts +4 -0
- package/base/select-element.js +6 -0
- package/base/select-element.js.map +1 -1
- package/components/Checkbox/checkbox-group.js +1 -1
- package/components/Checkbox/index.umd.min.js +3 -3
- package/components/Checkbox/index.umd.min.js.map +1 -1
- package/components/Checkbox/sgds-checkbox-group.d.ts +5 -0
- package/components/Checkbox/sgds-checkbox-group.js +10 -0
- package/components/Checkbox/sgds-checkbox-group.js.map +1 -1
- package/components/Checkbox/sgds-checkbox.d.ts +5 -1
- package/components/Checkbox/sgds-checkbox.js +10 -1
- package/components/Checkbox/sgds-checkbox.js.map +1 -1
- package/components/ComboBox/index.umd.min.js +7 -6
- package/components/ComboBox/index.umd.min.js.map +1 -1
- package/components/ComboBox/sgds-combo-box.d.ts +11 -0
- package/components/ComboBox/sgds-combo-box.js +34 -0
- package/components/ComboBox/sgds-combo-box.js.map +1 -1
- package/components/Datepicker/index.umd.min.js +1 -1
- package/components/Datepicker/index.umd.min.js.map +1 -1
- package/components/Drawer/index.umd.min.js +10 -5
- package/components/Drawer/index.umd.min.js.map +1 -1
- package/components/Drawer/sgds-drawer.js +5 -4
- package/components/Drawer/sgds-drawer.js.map +1 -1
- package/components/FileUpload/index.umd.min.js +7 -7
- package/components/FileUpload/index.umd.min.js.map +1 -1
- package/components/Input/index.umd.min.js +2 -2
- package/components/Input/index.umd.min.js.map +1 -1
- package/components/Input/input.js +1 -1
- package/components/Mainnav/index.umd.min.js +3 -1
- package/components/Mainnav/index.umd.min.js.map +1 -1
- package/components/Mainnav/sgds-mainnav-dropdown.d.ts +4 -0
- package/components/Mainnav/sgds-mainnav-dropdown.js +6 -0
- package/components/Mainnav/sgds-mainnav-dropdown.js.map +1 -1
- package/components/QuantityToggle/index.umd.min.js +2 -2
- package/components/QuantityToggle/index.umd.min.js.map +1 -1
- package/components/Radio/index.umd.min.js +3 -3
- package/components/Radio/index.umd.min.js.map +1 -1
- package/components/Radio/sgds-radio-group.d.ts +4 -0
- package/components/Radio/sgds-radio-group.js +9 -0
- package/components/Radio/sgds-radio-group.js.map +1 -1
- package/components/Select/index.umd.min.js +3 -3
- package/components/Select/index.umd.min.js.map +1 -1
- package/components/Select/sgds-select.d.ts +4 -0
- package/components/Select/sgds-select.js +10 -1
- package/components/Select/sgds-select.js.map +1 -1
- package/components/Switch/index.umd.min.js +1 -1
- package/components/Switch/index.umd.min.js.map +1 -1
- package/components/Textarea/index.umd.min.js +1 -1
- package/components/Textarea/index.umd.min.js.map +1 -1
- package/components/index.umd.min.js +80 -77
- package/components/index.umd.min.js.map +1 -1
- package/custom-elements.json +309 -28
- package/index.umd.min.js +83 -80
- package/index.umd.min.js.map +1 -1
- package/package.json +1 -1
- package/react/base/select-element.cjs.js +6 -0
- package/react/base/select-element.cjs.js.map +1 -1
- package/react/base/select-element.js +6 -0
- package/react/base/select-element.js.map +1 -1
- package/react/checkbox/index.cjs.js +3 -1
- package/react/checkbox/index.cjs.js.map +1 -1
- package/react/checkbox/index.js +3 -1
- package/react/checkbox/index.js.map +1 -1
- package/react/checkbox-group/index.cjs.js +3 -1
- package/react/checkbox-group/index.cjs.js.map +1 -1
- package/react/checkbox-group/index.js +3 -1
- package/react/checkbox-group/index.js.map +1 -1
- package/react/combo-box/index.cjs.js +1 -0
- package/react/combo-box/index.cjs.js.map +1 -1
- package/react/combo-box/index.js +1 -0
- package/react/combo-box/index.js.map +1 -1
- package/react/components/Checkbox/checkbox-group.cjs.js +1 -1
- package/react/components/Checkbox/checkbox-group.js +1 -1
- package/react/components/Checkbox/sgds-checkbox-group.cjs.js +10 -0
- package/react/components/Checkbox/sgds-checkbox-group.cjs.js.map +1 -1
- package/react/components/Checkbox/sgds-checkbox-group.js +10 -0
- package/react/components/Checkbox/sgds-checkbox-group.js.map +1 -1
- package/react/components/Checkbox/sgds-checkbox.cjs.js +10 -1
- package/react/components/Checkbox/sgds-checkbox.cjs.js.map +1 -1
- package/react/components/Checkbox/sgds-checkbox.js +10 -1
- package/react/components/Checkbox/sgds-checkbox.js.map +1 -1
- package/react/components/ComboBox/sgds-combo-box.cjs.js +34 -0
- package/react/components/ComboBox/sgds-combo-box.cjs.js.map +1 -1
- package/react/components/ComboBox/sgds-combo-box.js +34 -0
- package/react/components/ComboBox/sgds-combo-box.js.map +1 -1
- package/react/components/Drawer/sgds-drawer.cjs.js +4 -3
- package/react/components/Drawer/sgds-drawer.cjs.js.map +1 -1
- package/react/components/Drawer/sgds-drawer.js +5 -4
- package/react/components/Drawer/sgds-drawer.js.map +1 -1
- package/react/components/Input/input.cjs.js +1 -1
- package/react/components/Input/input.js +1 -1
- package/react/components/Mainnav/sgds-mainnav-dropdown.cjs.js +6 -0
- package/react/components/Mainnav/sgds-mainnav-dropdown.cjs.js.map +1 -1
- package/react/components/Mainnav/sgds-mainnav-dropdown.js +6 -0
- package/react/components/Mainnav/sgds-mainnav-dropdown.js.map +1 -1
- package/react/components/Radio/sgds-radio-group.cjs.js +9 -0
- package/react/components/Radio/sgds-radio-group.cjs.js.map +1 -1
- package/react/components/Radio/sgds-radio-group.js +9 -0
- package/react/components/Radio/sgds-radio-group.js.map +1 -1
- package/react/components/Select/sgds-select.cjs.js +9 -0
- package/react/components/Select/sgds-select.cjs.js.map +1 -1
- package/react/components/Select/sgds-select.js +10 -1
- package/react/components/Select/sgds-select.js.map +1 -1
- package/react/radio-group/index.cjs.js +3 -1
- package/react/radio-group/index.cjs.js.map +1 -1
- package/react/radio-group/index.js +3 -1
- package/react/radio-group/index.js.map +1 -1
- package/react/select/index.cjs.js +2 -0
- package/react/select/index.cjs.js.map +1 -1
- package/react/select/index.js +2 -0
- package/react/select/index.js.map +1 -1
- package/react/styles/form-label.cjs.js +1 -1
- package/react/styles/form-label.js +1 -1
- package/react/styles/form-text-control.cjs.js +1 -1
- package/react/styles/form-text-control.js +1 -1
- package/react/utils/validatorMixin.cjs.js +9 -11
- package/react/utils/validatorMixin.cjs.js.map +1 -1
- package/react/utils/validatorMixin.js +9 -11
- package/react/utils/validatorMixin.js.map +1 -1
- package/styles/form-label.js +1 -1
- package/styles/form-text-control.js +1 -1
- package/types/react.d.ts +30 -3
- package/utils/validatorMixin.js +9 -11
- package/utils/validatorMixin.js.map +1 -1
package/package.json
CHANGED
|
@@ -105,6 +105,12 @@ class SelectElement extends validatorMixin.SgdsFormValidatorMixin(dropdownListEl
|
|
|
105
105
|
reportValidity() {
|
|
106
106
|
return this._mixinReportValidity();
|
|
107
107
|
}
|
|
108
|
+
/**
|
|
109
|
+
* Sets the validity state of the element
|
|
110
|
+
*/
|
|
111
|
+
setValidity(flags, message, anchor) {
|
|
112
|
+
return this._mixinSetValidity(flags, message, anchor);
|
|
113
|
+
}
|
|
108
114
|
/**
|
|
109
115
|
* Checks for validity without any native error popup message
|
|
110
116
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select-element.cjs.js","sources":["../../../src/base/select-element.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, queryAsync, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { size } from \"@floating-ui/dom\";\nimport dropdownMenuStyle from \"../components/Dropdown/dropdown-menu.css\";\nimport feedbackStyles from \"../styles/feedback.css\";\nimport hintTextStyles from \"../styles/form-hint.css\";\nimport formControlStyles from \"../styles/form-text-control.css\";\nimport { defaultValue } from \"../utils/defaultvalue\";\nimport { SgdsFormControl } from \"../utils/formSubmitController\";\nimport generateId from \"../utils/generateId\";\nimport { SgdsFormValidatorMixin } from \"../utils/validatorMixin\";\nimport { DropdownListElement } from \"./dropdown-list-element\";\nimport { OptionElement } from \"./option-element\";\nimport selectStyles from \"./select.css\";\n\n// Abstract base class to enforce static abstract childName\nabstract class AbstractSelectBase {\n static childName: string;\n}\n\nexport class SelectElement\n extends SgdsFormValidatorMixin(DropdownListElement)\n implements SgdsFormControl, AbstractSelectBase\n{\n static styles = [\n ...DropdownListElement.styles,\n dropdownMenuStyle,\n hintTextStyles,\n feedbackStyles,\n formControlStyles,\n selectStyles\n ];\n /** The input's label */\n @property({ reflect: true }) label = \"\";\n\n /** The input's hint text below the label */\n @property({ reflect: true }) hintText = \"\";\n\n /** The input's name attribute */\n @property({ reflect: true }) name: string;\n\n /** The input's placeholder text. */\n @property({ type: String, reflect: true }) placeholder: string;\n\n /** Autofocus the input */\n @property({ type: Boolean, reflect: true }) autofocus = false;\n\n /** Disables the input. */\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /** Makes the input a required field. */\n @property({ type: Boolean, reflect: true }) required = false;\n\n /** Sets the loading state of the component */\n @property({ type: Boolean, reflect: true }) loading = false;\n\n /**\n * IMPORTANT:\n * We still expose `.value` externally, but this is now the underlying ID or data\n * (e.g. 1, 2, 'abc', ...), not the label that appears in the input box.\n */\n @property({ type: String, reflect: true })\n value = \"\";\n\n @state()\n displayValue = \"\";\n\n /** @internal Gets or sets the default value used to reset this element. */\n @defaultValue()\n defaultValue = \"\";\n\n /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n @property({ type: Boolean, reflect: true }) hasFeedback = false;\n\n /** Feedback text for error state when validated */\n @property({ type: String, reflect: true }) invalidFeedback = \"\";\n\n /** Marks the component as invalid. Replace the pseudo :invalid selector. */\n @property({ type: Boolean, reflect: true }) invalid = false;\n\n /** Controlling of autocomplete behaviour */\n @property({ type: String, reflect: true }) autocomplete = \"on\";\n\n /** Programatically sets the invalid state of the component. Pass in boolean value in the argument */\n public setInvalid(bool: boolean) {\n this.invalid = bool;\n if (bool) {\n this.emit(\"sgds-invalid\");\n } else {\n this.emit(\"sgds-valid\");\n }\n }\n\n /** The list of items to display in the dropdown.\n * `interface SgdsComboBoxItemData {\n * label: string;\n * value: string;\n * }`\n * @deprecated\n * Deprecated in favour of slots\n */\n @property({ type: Array }) menuList: SgdsOptionData[] = [];\n /** Track selected items (even for single-select, but it will have at most one). */\n @state()\n protected selectedItems: SgdsOptionData[] = [];\n /** @internal Managed filtered menu on the fly with input change*/\n @state()\n protected filteredList: SgdsOptionData[] = [];\n\n protected _isTouched = false;\n\n constructor() {\n super();\n\n this.floatingOpts = {\n middleware: [\n size({\n apply({ rects, elements }) {\n elements.floating.style.width = `${rects.reference.width}px`;\n }\n })\n ]\n };\n }\n\n @queryAsync(\"input.form-control\") protected _input: Promise<HTMLInputElement>;\n\n connectedCallback(): void {\n super.connectedCallback();\n this.addEventListener(\"blur\", async e => {\n if (this._mixinShouldSkipSgdsValidation()) return;\n const childName = (this.constructor as typeof SelectElement).childName;\n /** If user clicks the menu, we want to keep the input valid */\n const isSelf = (e.relatedTarget as HTMLElement)?.tagName.toLowerCase() === childName;\n this.invalid = isSelf ? false : !this._mixinReportValidity();\n });\n }\n\n /**\n * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n */\n public reportValidity(): boolean {\n return this._mixinReportValidity();\n }\n /**\n * Checks for validity without any native error popup message\n */\n public checkValidity(): boolean {\n return this._mixinCheckValidity();\n }\n /**\n * Returns the ValidityState object\n */\n public get validity(): ValidityState {\n return this._mixinGetValidity();\n }\n /**\n * Returns the validation message based on the ValidityState\n */\n public get validationMessage(): string {\n return this._mixinGetValidationMessage();\n }\n protected _controlId = generateId(\"input\");\n protected _renderFeedback() {\n return this.invalid && this.hasFeedback\n ? html` <div class=\"invalid-feedback-container\">\n <slot name=\"invalidIcon\">\n <sgds-icon name=\"exclamation-circle-fill\" size=\"md\"></sgds-icon>\n </slot>\n <div id=\"${this._controlId}-invalid\" class=\"invalid-feedback\">\n ${this.invalidFeedback ? this.invalidFeedback : this.validationMessage}\n </div>\n </div>`\n : html`${this._renderHintText()}`;\n }\n\n protected _renderHintText() {\n const hintTextTemplate = html` <div id=\"${this._controlId}Help\" class=\"form-text\">${this.hintText}</div> `;\n return this.hintText && hintTextTemplate;\n }\n protected _labelId = generateId(\"label\");\n protected _renderLabel() {\n const labelTemplate = html`\n <label\n for=${this._controlId}\n id=${this._labelId}\n class=${classMap({\n \"form-label\": true,\n required: this.required\n })}\n >${this.label}</label\n >\n `;\n return this.label && labelTemplate;\n }\n\n protected _handleClick() {\n if (this.readonly) {\n return null;\n }\n if (!this.menuIsOpen) {\n this.showMenu();\n } else {\n this.hideMenu();\n }\n }\n protected async _getMenuListFromOptions(assignedElements: Element[]): Promise<SgdsOptionData[]> {\n const readyOptions = assignedElements.map(async (e: OptionElement) => {\n await e.updateComplete;\n return e;\n });\n const options = await Promise.all(readyOptions);\n return options?.map((el: OptionElement) => ({\n label: el.innerText,\n value: el.getAttribute(\"value\"),\n disabled: el.disabled ?? undefined\n }));\n }\n protected _renderEmptyMenu() {\n return html` <div class=\"empty-menu\">No options</div> `;\n }\n protected _renderLoadingMenu() {\n return html`<div class=\"loading-menu\"><sgds-spinner size=\"xs\" tone=\"brand\"></sgds-spinner>Loading...</div>`;\n }\n protected declare options: OptionElement[];\n declare static childName: string;\n}\n\nexport interface SgdsOptionData {\n label: string;\n value: string;\n disabled?: boolean;\n}\n"],"names":["SgdsFormValidatorMixin","DropdownListElement","generateId","size","html","classMap","dropdownMenuStyle","hintTextStyles","feedbackStyles","formControlStyles","selectStyles","__decorate","property","state","defaultValue","queryAsync"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"select-element.cjs.js","sources":["../../../src/base/select-element.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, queryAsync, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { size } from \"@floating-ui/dom\";\nimport dropdownMenuStyle from \"../components/Dropdown/dropdown-menu.css\";\nimport feedbackStyles from \"../styles/feedback.css\";\nimport hintTextStyles from \"../styles/form-hint.css\";\nimport formControlStyles from \"../styles/form-text-control.css\";\nimport { defaultValue } from \"../utils/defaultvalue\";\nimport { SgdsFormControl } from \"../utils/formSubmitController\";\nimport generateId from \"../utils/generateId\";\nimport { SgdsFormValidatorMixin } from \"../utils/validatorMixin\";\nimport { DropdownListElement } from \"./dropdown-list-element\";\nimport { OptionElement } from \"./option-element\";\nimport selectStyles from \"./select.css\";\n\n// Abstract base class to enforce static abstract childName\nabstract class AbstractSelectBase {\n static childName: string;\n}\n\nexport class SelectElement\n extends SgdsFormValidatorMixin(DropdownListElement)\n implements SgdsFormControl, AbstractSelectBase\n{\n static styles = [\n ...DropdownListElement.styles,\n dropdownMenuStyle,\n hintTextStyles,\n feedbackStyles,\n formControlStyles,\n selectStyles\n ];\n /** The input's label */\n @property({ reflect: true }) label = \"\";\n\n /** The input's hint text below the label */\n @property({ reflect: true }) hintText = \"\";\n\n /** The input's name attribute */\n @property({ reflect: true }) name: string;\n\n /** The input's placeholder text. */\n @property({ type: String, reflect: true }) placeholder: string;\n\n /** Autofocus the input */\n @property({ type: Boolean, reflect: true }) autofocus = false;\n\n /** Disables the input. */\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /** Makes the input a required field. */\n @property({ type: Boolean, reflect: true }) required = false;\n\n /** Sets the loading state of the component */\n @property({ type: Boolean, reflect: true }) loading = false;\n\n /**\n * IMPORTANT:\n * We still expose `.value` externally, but this is now the underlying ID or data\n * (e.g. 1, 2, 'abc', ...), not the label that appears in the input box.\n */\n @property({ type: String, reflect: true })\n value = \"\";\n\n @state()\n displayValue = \"\";\n\n /** @internal Gets or sets the default value used to reset this element. */\n @defaultValue()\n defaultValue = \"\";\n\n /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n @property({ type: Boolean, reflect: true }) hasFeedback = false;\n\n /** Feedback text for error state when validated */\n @property({ type: String, reflect: true }) invalidFeedback = \"\";\n\n /** Marks the component as invalid. Replace the pseudo :invalid selector. */\n @property({ type: Boolean, reflect: true }) invalid = false;\n\n /** Controlling of autocomplete behaviour */\n @property({ type: String, reflect: true }) autocomplete = \"on\";\n\n /** Programatically sets the invalid state of the component. Pass in boolean value in the argument */\n public setInvalid(bool: boolean) {\n this.invalid = bool;\n if (bool) {\n this.emit(\"sgds-invalid\");\n } else {\n this.emit(\"sgds-valid\");\n }\n }\n\n /** The list of items to display in the dropdown.\n * `interface SgdsComboBoxItemData {\n * label: string;\n * value: string;\n * }`\n * @deprecated\n * Deprecated in favour of slots\n */\n @property({ type: Array }) menuList: SgdsOptionData[] = [];\n /** Track selected items (even for single-select, but it will have at most one). */\n @state()\n protected selectedItems: SgdsOptionData[] = [];\n /** @internal Managed filtered menu on the fly with input change*/\n @state()\n protected filteredList: SgdsOptionData[] = [];\n\n protected _isTouched = false;\n\n constructor() {\n super();\n\n this.floatingOpts = {\n middleware: [\n size({\n apply({ rects, elements }) {\n elements.floating.style.width = `${rects.reference.width}px`;\n }\n })\n ]\n };\n }\n\n @queryAsync(\"input.form-control\") protected _input: Promise<HTMLInputElement>;\n\n connectedCallback(): void {\n super.connectedCallback();\n this.addEventListener(\"blur\", async e => {\n if (this._mixinShouldSkipSgdsValidation()) return;\n const childName = (this.constructor as typeof SelectElement).childName;\n /** If user clicks the menu, we want to keep the input valid */\n const isSelf = (e.relatedTarget as HTMLElement)?.tagName.toLowerCase() === childName;\n this.invalid = isSelf ? false : !this._mixinReportValidity();\n });\n }\n\n /**\n * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n */\n public reportValidity(): boolean {\n return this._mixinReportValidity();\n }\n /**\n * Sets the validity state of the element\n */\n public setValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void {\n return this._mixinSetValidity(flags, message, anchor);\n }\n /**\n * Checks for validity without any native error popup message\n */\n public checkValidity(): boolean {\n return this._mixinCheckValidity();\n }\n /**\n * Returns the ValidityState object\n */\n public get validity(): ValidityState {\n return this._mixinGetValidity();\n }\n /**\n * Returns the validation message based on the ValidityState\n */\n public get validationMessage(): string {\n return this._mixinGetValidationMessage();\n }\n protected _controlId = generateId(\"input\");\n protected _renderFeedback() {\n return this.invalid && this.hasFeedback\n ? html` <div class=\"invalid-feedback-container\">\n <slot name=\"invalidIcon\">\n <sgds-icon name=\"exclamation-circle-fill\" size=\"md\"></sgds-icon>\n </slot>\n <div id=\"${this._controlId}-invalid\" class=\"invalid-feedback\">\n ${this.invalidFeedback ? this.invalidFeedback : this.validationMessage}\n </div>\n </div>`\n : html`${this._renderHintText()}`;\n }\n\n protected _renderHintText() {\n const hintTextTemplate = html` <div id=\"${this._controlId}Help\" class=\"form-text\">${this.hintText}</div> `;\n return this.hintText && hintTextTemplate;\n }\n protected _labelId = generateId(\"label\");\n protected _renderLabel() {\n const labelTemplate = html`\n <label\n for=${this._controlId}\n id=${this._labelId}\n class=${classMap({\n \"form-label\": true,\n required: this.required\n })}\n >${this.label}</label\n >\n `;\n return this.label && labelTemplate;\n }\n\n protected _handleClick() {\n if (this.readonly) {\n return null;\n }\n if (!this.menuIsOpen) {\n this.showMenu();\n } else {\n this.hideMenu();\n }\n }\n protected async _getMenuListFromOptions(assignedElements: Element[]): Promise<SgdsOptionData[]> {\n const readyOptions = assignedElements.map(async (e: OptionElement) => {\n await e.updateComplete;\n return e;\n });\n const options = await Promise.all(readyOptions);\n return options?.map((el: OptionElement) => ({\n label: el.innerText,\n value: el.getAttribute(\"value\"),\n disabled: el.disabled ?? undefined\n }));\n }\n protected _renderEmptyMenu() {\n return html` <div class=\"empty-menu\">No options</div> `;\n }\n protected _renderLoadingMenu() {\n return html`<div class=\"loading-menu\"><sgds-spinner size=\"xs\" tone=\"brand\"></sgds-spinner>Loading...</div>`;\n }\n protected declare options: OptionElement[];\n declare static childName: string;\n}\n\nexport interface SgdsOptionData {\n label: string;\n value: string;\n disabled?: boolean;\n}\n"],"names":["SgdsFormValidatorMixin","DropdownListElement","generateId","size","html","classMap","dropdownMenuStyle","hintTextStyles","feedbackStyles","formControlStyles","selectStyles","__decorate","property","state","defaultValue","queryAsync"],"mappings":"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"}
|
|
@@ -101,6 +101,12 @@ class SelectElement extends SgdsFormValidatorMixin(DropdownListElement) {
|
|
|
101
101
|
reportValidity() {
|
|
102
102
|
return this._mixinReportValidity();
|
|
103
103
|
}
|
|
104
|
+
/**
|
|
105
|
+
* Sets the validity state of the element
|
|
106
|
+
*/
|
|
107
|
+
setValidity(flags, message, anchor) {
|
|
108
|
+
return this._mixinSetValidity(flags, message, anchor);
|
|
109
|
+
}
|
|
104
110
|
/**
|
|
105
111
|
* Checks for validity without any native error popup message
|
|
106
112
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select-element.js","sources":["../../../src/base/select-element.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, queryAsync, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { size } from \"@floating-ui/dom\";\nimport dropdownMenuStyle from \"../components/Dropdown/dropdown-menu.css\";\nimport feedbackStyles from \"../styles/feedback.css\";\nimport hintTextStyles from \"../styles/form-hint.css\";\nimport formControlStyles from \"../styles/form-text-control.css\";\nimport { defaultValue } from \"../utils/defaultvalue\";\nimport { SgdsFormControl } from \"../utils/formSubmitController\";\nimport generateId from \"../utils/generateId\";\nimport { SgdsFormValidatorMixin } from \"../utils/validatorMixin\";\nimport { DropdownListElement } from \"./dropdown-list-element\";\nimport { OptionElement } from \"./option-element\";\nimport selectStyles from \"./select.css\";\n\n// Abstract base class to enforce static abstract childName\nabstract class AbstractSelectBase {\n static childName: string;\n}\n\nexport class SelectElement\n extends SgdsFormValidatorMixin(DropdownListElement)\n implements SgdsFormControl, AbstractSelectBase\n{\n static styles = [\n ...DropdownListElement.styles,\n dropdownMenuStyle,\n hintTextStyles,\n feedbackStyles,\n formControlStyles,\n selectStyles\n ];\n /** The input's label */\n @property({ reflect: true }) label = \"\";\n\n /** The input's hint text below the label */\n @property({ reflect: true }) hintText = \"\";\n\n /** The input's name attribute */\n @property({ reflect: true }) name: string;\n\n /** The input's placeholder text. */\n @property({ type: String, reflect: true }) placeholder: string;\n\n /** Autofocus the input */\n @property({ type: Boolean, reflect: true }) autofocus = false;\n\n /** Disables the input. */\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /** Makes the input a required field. */\n @property({ type: Boolean, reflect: true }) required = false;\n\n /** Sets the loading state of the component */\n @property({ type: Boolean, reflect: true }) loading = false;\n\n /**\n * IMPORTANT:\n * We still expose `.value` externally, but this is now the underlying ID or data\n * (e.g. 1, 2, 'abc', ...), not the label that appears in the input box.\n */\n @property({ type: String, reflect: true })\n value = \"\";\n\n @state()\n displayValue = \"\";\n\n /** @internal Gets or sets the default value used to reset this element. */\n @defaultValue()\n defaultValue = \"\";\n\n /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n @property({ type: Boolean, reflect: true }) hasFeedback = false;\n\n /** Feedback text for error state when validated */\n @property({ type: String, reflect: true }) invalidFeedback = \"\";\n\n /** Marks the component as invalid. Replace the pseudo :invalid selector. */\n @property({ type: Boolean, reflect: true }) invalid = false;\n\n /** Controlling of autocomplete behaviour */\n @property({ type: String, reflect: true }) autocomplete = \"on\";\n\n /** Programatically sets the invalid state of the component. Pass in boolean value in the argument */\n public setInvalid(bool: boolean) {\n this.invalid = bool;\n if (bool) {\n this.emit(\"sgds-invalid\");\n } else {\n this.emit(\"sgds-valid\");\n }\n }\n\n /** The list of items to display in the dropdown.\n * `interface SgdsComboBoxItemData {\n * label: string;\n * value: string;\n * }`\n * @deprecated\n * Deprecated in favour of slots\n */\n @property({ type: Array }) menuList: SgdsOptionData[] = [];\n /** Track selected items (even for single-select, but it will have at most one). */\n @state()\n protected selectedItems: SgdsOptionData[] = [];\n /** @internal Managed filtered menu on the fly with input change*/\n @state()\n protected filteredList: SgdsOptionData[] = [];\n\n protected _isTouched = false;\n\n constructor() {\n super();\n\n this.floatingOpts = {\n middleware: [\n size({\n apply({ rects, elements }) {\n elements.floating.style.width = `${rects.reference.width}px`;\n }\n })\n ]\n };\n }\n\n @queryAsync(\"input.form-control\") protected _input: Promise<HTMLInputElement>;\n\n connectedCallback(): void {\n super.connectedCallback();\n this.addEventListener(\"blur\", async e => {\n if (this._mixinShouldSkipSgdsValidation()) return;\n const childName = (this.constructor as typeof SelectElement).childName;\n /** If user clicks the menu, we want to keep the input valid */\n const isSelf = (e.relatedTarget as HTMLElement)?.tagName.toLowerCase() === childName;\n this.invalid = isSelf ? false : !this._mixinReportValidity();\n });\n }\n\n /**\n * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n */\n public reportValidity(): boolean {\n return this._mixinReportValidity();\n }\n /**\n * Checks for validity without any native error popup message\n */\n public checkValidity(): boolean {\n return this._mixinCheckValidity();\n }\n /**\n * Returns the ValidityState object\n */\n public get validity(): ValidityState {\n return this._mixinGetValidity();\n }\n /**\n * Returns the validation message based on the ValidityState\n */\n public get validationMessage(): string {\n return this._mixinGetValidationMessage();\n }\n protected _controlId = generateId(\"input\");\n protected _renderFeedback() {\n return this.invalid && this.hasFeedback\n ? html` <div class=\"invalid-feedback-container\">\n <slot name=\"invalidIcon\">\n <sgds-icon name=\"exclamation-circle-fill\" size=\"md\"></sgds-icon>\n </slot>\n <div id=\"${this._controlId}-invalid\" class=\"invalid-feedback\">\n ${this.invalidFeedback ? this.invalidFeedback : this.validationMessage}\n </div>\n </div>`\n : html`${this._renderHintText()}`;\n }\n\n protected _renderHintText() {\n const hintTextTemplate = html` <div id=\"${this._controlId}Help\" class=\"form-text\">${this.hintText}</div> `;\n return this.hintText && hintTextTemplate;\n }\n protected _labelId = generateId(\"label\");\n protected _renderLabel() {\n const labelTemplate = html`\n <label\n for=${this._controlId}\n id=${this._labelId}\n class=${classMap({\n \"form-label\": true,\n required: this.required\n })}\n >${this.label}</label\n >\n `;\n return this.label && labelTemplate;\n }\n\n protected _handleClick() {\n if (this.readonly) {\n return null;\n }\n if (!this.menuIsOpen) {\n this.showMenu();\n } else {\n this.hideMenu();\n }\n }\n protected async _getMenuListFromOptions(assignedElements: Element[]): Promise<SgdsOptionData[]> {\n const readyOptions = assignedElements.map(async (e: OptionElement) => {\n await e.updateComplete;\n return e;\n });\n const options = await Promise.all(readyOptions);\n return options?.map((el: OptionElement) => ({\n label: el.innerText,\n value: el.getAttribute(\"value\"),\n disabled: el.disabled ?? undefined\n }));\n }\n protected _renderEmptyMenu() {\n return html` <div class=\"empty-menu\">No options</div> `;\n }\n protected _renderLoadingMenu() {\n return html`<div class=\"loading-menu\"><sgds-spinner size=\"xs\" tone=\"brand\"></sgds-spinner>Loading...</div>`;\n }\n protected declare options: OptionElement[];\n declare static childName: string;\n}\n\nexport interface SgdsOptionData {\n label: string;\n value: string;\n disabled?: boolean;\n}\n"],"names":["generateId","dropdownMenuStyle","hintTextStyles","feedbackStyles","formControlStyles","selectStyles"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"select-element.js","sources":["../../../src/base/select-element.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, queryAsync, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { size } from \"@floating-ui/dom\";\nimport dropdownMenuStyle from \"../components/Dropdown/dropdown-menu.css\";\nimport feedbackStyles from \"../styles/feedback.css\";\nimport hintTextStyles from \"../styles/form-hint.css\";\nimport formControlStyles from \"../styles/form-text-control.css\";\nimport { defaultValue } from \"../utils/defaultvalue\";\nimport { SgdsFormControl } from \"../utils/formSubmitController\";\nimport generateId from \"../utils/generateId\";\nimport { SgdsFormValidatorMixin } from \"../utils/validatorMixin\";\nimport { DropdownListElement } from \"./dropdown-list-element\";\nimport { OptionElement } from \"./option-element\";\nimport selectStyles from \"./select.css\";\n\n// Abstract base class to enforce static abstract childName\nabstract class AbstractSelectBase {\n static childName: string;\n}\n\nexport class SelectElement\n extends SgdsFormValidatorMixin(DropdownListElement)\n implements SgdsFormControl, AbstractSelectBase\n{\n static styles = [\n ...DropdownListElement.styles,\n dropdownMenuStyle,\n hintTextStyles,\n feedbackStyles,\n formControlStyles,\n selectStyles\n ];\n /** The input's label */\n @property({ reflect: true }) label = \"\";\n\n /** The input's hint text below the label */\n @property({ reflect: true }) hintText = \"\";\n\n /** The input's name attribute */\n @property({ reflect: true }) name: string;\n\n /** The input's placeholder text. */\n @property({ type: String, reflect: true }) placeholder: string;\n\n /** Autofocus the input */\n @property({ type: Boolean, reflect: true }) autofocus = false;\n\n /** Disables the input. */\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /** Makes the input a required field. */\n @property({ type: Boolean, reflect: true }) required = false;\n\n /** Sets the loading state of the component */\n @property({ type: Boolean, reflect: true }) loading = false;\n\n /**\n * IMPORTANT:\n * We still expose `.value` externally, but this is now the underlying ID or data\n * (e.g. 1, 2, 'abc', ...), not the label that appears in the input box.\n */\n @property({ type: String, reflect: true })\n value = \"\";\n\n @state()\n displayValue = \"\";\n\n /** @internal Gets or sets the default value used to reset this element. */\n @defaultValue()\n defaultValue = \"\";\n\n /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n @property({ type: Boolean, reflect: true }) hasFeedback = false;\n\n /** Feedback text for error state when validated */\n @property({ type: String, reflect: true }) invalidFeedback = \"\";\n\n /** Marks the component as invalid. Replace the pseudo :invalid selector. */\n @property({ type: Boolean, reflect: true }) invalid = false;\n\n /** Controlling of autocomplete behaviour */\n @property({ type: String, reflect: true }) autocomplete = \"on\";\n\n /** Programatically sets the invalid state of the component. Pass in boolean value in the argument */\n public setInvalid(bool: boolean) {\n this.invalid = bool;\n if (bool) {\n this.emit(\"sgds-invalid\");\n } else {\n this.emit(\"sgds-valid\");\n }\n }\n\n /** The list of items to display in the dropdown.\n * `interface SgdsComboBoxItemData {\n * label: string;\n * value: string;\n * }`\n * @deprecated\n * Deprecated in favour of slots\n */\n @property({ type: Array }) menuList: SgdsOptionData[] = [];\n /** Track selected items (even for single-select, but it will have at most one). */\n @state()\n protected selectedItems: SgdsOptionData[] = [];\n /** @internal Managed filtered menu on the fly with input change*/\n @state()\n protected filteredList: SgdsOptionData[] = [];\n\n protected _isTouched = false;\n\n constructor() {\n super();\n\n this.floatingOpts = {\n middleware: [\n size({\n apply({ rects, elements }) {\n elements.floating.style.width = `${rects.reference.width}px`;\n }\n })\n ]\n };\n }\n\n @queryAsync(\"input.form-control\") protected _input: Promise<HTMLInputElement>;\n\n connectedCallback(): void {\n super.connectedCallback();\n this.addEventListener(\"blur\", async e => {\n if (this._mixinShouldSkipSgdsValidation()) return;\n const childName = (this.constructor as typeof SelectElement).childName;\n /** If user clicks the menu, we want to keep the input valid */\n const isSelf = (e.relatedTarget as HTMLElement)?.tagName.toLowerCase() === childName;\n this.invalid = isSelf ? false : !this._mixinReportValidity();\n });\n }\n\n /**\n * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n */\n public reportValidity(): boolean {\n return this._mixinReportValidity();\n }\n /**\n * Sets the validity state of the element\n */\n public setValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void {\n return this._mixinSetValidity(flags, message, anchor);\n }\n /**\n * Checks for validity without any native error popup message\n */\n public checkValidity(): boolean {\n return this._mixinCheckValidity();\n }\n /**\n * Returns the ValidityState object\n */\n public get validity(): ValidityState {\n return this._mixinGetValidity();\n }\n /**\n * Returns the validation message based on the ValidityState\n */\n public get validationMessage(): string {\n return this._mixinGetValidationMessage();\n }\n protected _controlId = generateId(\"input\");\n protected _renderFeedback() {\n return this.invalid && this.hasFeedback\n ? html` <div class=\"invalid-feedback-container\">\n <slot name=\"invalidIcon\">\n <sgds-icon name=\"exclamation-circle-fill\" size=\"md\"></sgds-icon>\n </slot>\n <div id=\"${this._controlId}-invalid\" class=\"invalid-feedback\">\n ${this.invalidFeedback ? this.invalidFeedback : this.validationMessage}\n </div>\n </div>`\n : html`${this._renderHintText()}`;\n }\n\n protected _renderHintText() {\n const hintTextTemplate = html` <div id=\"${this._controlId}Help\" class=\"form-text\">${this.hintText}</div> `;\n return this.hintText && hintTextTemplate;\n }\n protected _labelId = generateId(\"label\");\n protected _renderLabel() {\n const labelTemplate = html`\n <label\n for=${this._controlId}\n id=${this._labelId}\n class=${classMap({\n \"form-label\": true,\n required: this.required\n })}\n >${this.label}</label\n >\n `;\n return this.label && labelTemplate;\n }\n\n protected _handleClick() {\n if (this.readonly) {\n return null;\n }\n if (!this.menuIsOpen) {\n this.showMenu();\n } else {\n this.hideMenu();\n }\n }\n protected async _getMenuListFromOptions(assignedElements: Element[]): Promise<SgdsOptionData[]> {\n const readyOptions = assignedElements.map(async (e: OptionElement) => {\n await e.updateComplete;\n return e;\n });\n const options = await Promise.all(readyOptions);\n return options?.map((el: OptionElement) => ({\n label: el.innerText,\n value: el.getAttribute(\"value\"),\n disabled: el.disabled ?? undefined\n }));\n }\n protected _renderEmptyMenu() {\n return html` <div class=\"empty-menu\">No options</div> `;\n }\n protected _renderLoadingMenu() {\n return html`<div class=\"loading-menu\"><sgds-spinner size=\"xs\" tone=\"brand\"></sgds-spinner>Loading...</div>`;\n }\n protected declare options: OptionElement[];\n declare static childName: string;\n}\n\nexport interface SgdsOptionData {\n label: string;\n value: string;\n disabled?: boolean;\n}\n"],"names":["generateId","dropdownMenuStyle","hintTextStyles","feedbackStyles","formControlStyles","selectStyles"],"mappings":"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"}
|
|
@@ -38,7 +38,9 @@ var index = react.createComponent({
|
|
|
38
38
|
onSgdsBlur: "sgds-blur",
|
|
39
39
|
onSgdsFocus: "sgds-focus",
|
|
40
40
|
onSgdsCheck: "sgds-check",
|
|
41
|
-
onSgdsUncheck: "sgds-uncheck"
|
|
41
|
+
onSgdsUncheck: "sgds-uncheck",
|
|
42
|
+
onSgdsInvalid: "sgds-invalid",
|
|
43
|
+
onSgdsValid: "sgds-valid"
|
|
42
44
|
}
|
|
43
45
|
});
|
|
44
46
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs.js","sources":["../../../src/react/checkbox/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit/react\";\nimport Component from \"../../components/Checkbox/sgds-checkbox\";\nimport { register } from \"../../utils/ce-registry\";\n\nregister(\"sgds-checkbox\", Component);\n\nexport default createComponent({\n react: React,\n tagName: \"sgds-checkbox\",\n elementClass: Component,\n events: {\n onSgdsChange: \"sgds-change\",\n onSgdsBlur: \"sgds-blur\",\n onSgdsFocus: \"sgds-focus\",\n onSgdsCheck: \"sgds-check\",\n onSgdsUncheck: \"sgds-uncheck\"\n }\n});\n"],"names":["register","Component","createComponent","React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKAA,mBAAQ,CAAC,eAAe,EAAEC,yBAAS,CAAC,CAAC;AAErC,YAAeC,qBAAe,CAAC;AAC7B,IAAA,KAAK,EAAEC,gBAAK;AACZ,IAAA,OAAO,EAAE,eAAe;AACxB,IAAA,YAAY,EAAEF,yBAAS;AACvB,IAAA,MAAM,EAAE;AACN,QAAA,YAAY,EAAE,aAAa;AAC3B,QAAA,UAAU,EAAE,WAAW;AACvB,QAAA,WAAW,EAAE,YAAY;AACzB,QAAA,WAAW,EAAE,YAAY;AACzB,QAAA,aAAa,EAAE,cAAc;
|
|
1
|
+
{"version":3,"file":"index.cjs.js","sources":["../../../src/react/checkbox/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit/react\";\nimport Component from \"../../components/Checkbox/sgds-checkbox\";\nimport { register } from \"../../utils/ce-registry\";\n\nregister(\"sgds-checkbox\", Component);\n\nexport default createComponent({\n react: React,\n tagName: \"sgds-checkbox\",\n elementClass: Component,\n events: {\n onSgdsChange: \"sgds-change\",\n onSgdsBlur: \"sgds-blur\",\n onSgdsFocus: \"sgds-focus\",\n onSgdsCheck: \"sgds-check\",\n onSgdsUncheck: \"sgds-uncheck\",\n onSgdsInvalid: \"sgds-invalid\",\n onSgdsValid: \"sgds-valid\"\n }\n});\n"],"names":["register","Component","createComponent","React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKAA,mBAAQ,CAAC,eAAe,EAAEC,yBAAS,CAAC,CAAC;AAErC,YAAeC,qBAAe,CAAC;AAC7B,IAAA,KAAK,EAAEC,gBAAK;AACZ,IAAA,OAAO,EAAE,eAAe;AACxB,IAAA,YAAY,EAAEF,yBAAS;AACvB,IAAA,MAAM,EAAE;AACN,QAAA,YAAY,EAAE,aAAa;AAC3B,QAAA,UAAU,EAAE,WAAW;AACvB,QAAA,WAAW,EAAE,YAAY;AACzB,QAAA,WAAW,EAAE,YAAY;AACzB,QAAA,aAAa,EAAE,cAAc;AAC7B,QAAA,aAAa,EAAE,cAAc;AAC7B,QAAA,WAAW,EAAE,YAAY;AAC1B,KAAA;AACF,CAAA,CAAC;;;;"}
|
package/react/checkbox/index.js
CHANGED
|
@@ -14,7 +14,9 @@ var index = createComponent({
|
|
|
14
14
|
onSgdsBlur: "sgds-blur",
|
|
15
15
|
onSgdsFocus: "sgds-focus",
|
|
16
16
|
onSgdsCheck: "sgds-check",
|
|
17
|
-
onSgdsUncheck: "sgds-uncheck"
|
|
17
|
+
onSgdsUncheck: "sgds-uncheck",
|
|
18
|
+
onSgdsInvalid: "sgds-invalid",
|
|
19
|
+
onSgdsValid: "sgds-valid"
|
|
18
20
|
}
|
|
19
21
|
});
|
|
20
22
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/react/checkbox/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit/react\";\nimport Component from \"../../components/Checkbox/sgds-checkbox\";\nimport { register } from \"../../utils/ce-registry\";\n\nregister(\"sgds-checkbox\", Component);\n\nexport default createComponent({\n react: React,\n tagName: \"sgds-checkbox\",\n elementClass: Component,\n events: {\n onSgdsChange: \"sgds-change\",\n onSgdsBlur: \"sgds-blur\",\n onSgdsFocus: \"sgds-focus\",\n onSgdsCheck: \"sgds-check\",\n onSgdsUncheck: \"sgds-uncheck\"\n }\n});\n"],"names":["Component"],"mappings":";;;;;;AAKA,QAAQ,CAAC,eAAe,EAAEA,YAAS,CAAC,CAAC;AAErC,YAAe,eAAe,CAAC;AAC7B,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,OAAO,EAAE,eAAe;AACxB,IAAA,YAAY,EAAEA,YAAS;AACvB,IAAA,MAAM,EAAE;AACN,QAAA,YAAY,EAAE,aAAa;AAC3B,QAAA,UAAU,EAAE,WAAW;AACvB,QAAA,WAAW,EAAE,YAAY;AACzB,QAAA,WAAW,EAAE,YAAY;AACzB,QAAA,aAAa,EAAE,cAAc;
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/react/checkbox/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit/react\";\nimport Component from \"../../components/Checkbox/sgds-checkbox\";\nimport { register } from \"../../utils/ce-registry\";\n\nregister(\"sgds-checkbox\", Component);\n\nexport default createComponent({\n react: React,\n tagName: \"sgds-checkbox\",\n elementClass: Component,\n events: {\n onSgdsChange: \"sgds-change\",\n onSgdsBlur: \"sgds-blur\",\n onSgdsFocus: \"sgds-focus\",\n onSgdsCheck: \"sgds-check\",\n onSgdsUncheck: \"sgds-uncheck\",\n onSgdsInvalid: \"sgds-invalid\",\n onSgdsValid: \"sgds-valid\"\n }\n});\n"],"names":["Component"],"mappings":";;;;;;AAKA,QAAQ,CAAC,eAAe,EAAEA,YAAS,CAAC,CAAC;AAErC,YAAe,eAAe,CAAC;AAC7B,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,OAAO,EAAE,eAAe;AACxB,IAAA,YAAY,EAAEA,YAAS;AACvB,IAAA,MAAM,EAAE;AACN,QAAA,YAAY,EAAE,aAAa;AAC3B,QAAA,UAAU,EAAE,WAAW;AACvB,QAAA,WAAW,EAAE,YAAY;AACzB,QAAA,WAAW,EAAE,YAAY;AACzB,QAAA,aAAa,EAAE,cAAc;AAC7B,QAAA,aAAa,EAAE,cAAc;AAC7B,QAAA,WAAW,EAAE,YAAY;AAC1B,KAAA;AACF,CAAA,CAAC;;;;"}
|
|
@@ -34,7 +34,9 @@ var index = react.createComponent({
|
|
|
34
34
|
tagName: "sgds-checkbox-group",
|
|
35
35
|
elementClass: sgdsCheckboxGroup.SgdsCheckboxGroup,
|
|
36
36
|
events: {
|
|
37
|
-
onSgdsChange: "sgds-change"
|
|
37
|
+
onSgdsChange: "sgds-change",
|
|
38
|
+
onSgdsInvalid: "sgds-invalid",
|
|
39
|
+
onSgdsValid: "sgds-valid"
|
|
38
40
|
}
|
|
39
41
|
});
|
|
40
42
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs.js","sources":["../../../src/react/checkbox-group/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit/react\";\nimport Component from \"../../components/Checkbox/sgds-checkbox-group\";\nimport { register } from \"../../utils/ce-registry\";\n\nregister(\"sgds-checkbox-group\", Component);\n\nexport default createComponent({\n react: React,\n tagName: \"sgds-checkbox-group\",\n elementClass: Component,\n events: {\n onSgdsChange: \"sgds-change\"\n }\n});\n"],"names":["register","Component","createComponent","React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKAA,mBAAQ,CAAC,qBAAqB,EAAEC,mCAAS,CAAC,CAAC;AAE3C,YAAeC,qBAAe,CAAC;AAC7B,IAAA,KAAK,EAAEC,gBAAK;AACZ,IAAA,OAAO,EAAE,qBAAqB;AAC9B,IAAA,YAAY,EAAEF,mCAAS;AACvB,IAAA,MAAM,EAAE;AACN,QAAA,YAAY,EAAE,aAAa;
|
|
1
|
+
{"version":3,"file":"index.cjs.js","sources":["../../../src/react/checkbox-group/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit/react\";\nimport Component from \"../../components/Checkbox/sgds-checkbox-group\";\nimport { register } from \"../../utils/ce-registry\";\n\nregister(\"sgds-checkbox-group\", Component);\n\nexport default createComponent({\n react: React,\n tagName: \"sgds-checkbox-group\",\n elementClass: Component,\n events: {\n onSgdsChange: \"sgds-change\",\n onSgdsInvalid: \"sgds-invalid\",\n onSgdsValid: \"sgds-valid\"\n }\n});\n"],"names":["register","Component","createComponent","React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKAA,mBAAQ,CAAC,qBAAqB,EAAEC,mCAAS,CAAC,CAAC;AAE3C,YAAeC,qBAAe,CAAC;AAC7B,IAAA,KAAK,EAAEC,gBAAK;AACZ,IAAA,OAAO,EAAE,qBAAqB;AAC9B,IAAA,YAAY,EAAEF,mCAAS;AACvB,IAAA,MAAM,EAAE;AACN,QAAA,YAAY,EAAE,aAAa;AAC3B,QAAA,aAAa,EAAE,cAAc;AAC7B,QAAA,WAAW,EAAE,YAAY;AAC1B,KAAA;AACF,CAAA,CAAC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/react/checkbox-group/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit/react\";\nimport Component from \"../../components/Checkbox/sgds-checkbox-group\";\nimport { register } from \"../../utils/ce-registry\";\n\nregister(\"sgds-checkbox-group\", Component);\n\nexport default createComponent({\n react: React,\n tagName: \"sgds-checkbox-group\",\n elementClass: Component,\n events: {\n onSgdsChange: \"sgds-change\"\n }\n});\n"],"names":["Component"],"mappings":";;;;;;AAKA,QAAQ,CAAC,qBAAqB,EAAEA,iBAAS,CAAC,CAAC;AAE3C,YAAe,eAAe,CAAC;AAC7B,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,OAAO,EAAE,qBAAqB;AAC9B,IAAA,YAAY,EAAEA,iBAAS;AACvB,IAAA,MAAM,EAAE;AACN,QAAA,YAAY,EAAE,aAAa;
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/react/checkbox-group/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit/react\";\nimport Component from \"../../components/Checkbox/sgds-checkbox-group\";\nimport { register } from \"../../utils/ce-registry\";\n\nregister(\"sgds-checkbox-group\", Component);\n\nexport default createComponent({\n react: React,\n tagName: \"sgds-checkbox-group\",\n elementClass: Component,\n events: {\n onSgdsChange: \"sgds-change\",\n onSgdsInvalid: \"sgds-invalid\",\n onSgdsValid: \"sgds-valid\"\n }\n});\n"],"names":["Component"],"mappings":";;;;;;AAKA,QAAQ,CAAC,qBAAqB,EAAEA,iBAAS,CAAC,CAAC;AAE3C,YAAe,eAAe,CAAC;AAC7B,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,OAAO,EAAE,qBAAqB;AAC9B,IAAA,YAAY,EAAEA,iBAAS;AACvB,IAAA,MAAM,EAAE;AACN,QAAA,YAAY,EAAE,aAAa;AAC3B,QAAA,aAAa,EAAE,cAAc;AAC7B,QAAA,WAAW,EAAE,YAAY;AAC1B,KAAA;AACF,CAAA,CAAC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs.js","sources":["../../../src/react/combo-box/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit/react\";\nimport Component from \"../../components/ComboBox/sgds-combo-box\";\nimport { register } from \"../../utils/ce-registry\";\n\nregister(\"sgds-combo-box\", Component);\n\nexport default createComponent({\n react: React,\n tagName: \"sgds-combo-box\",\n elementClass: Component,\n events: {\n onSgdsSelect: \"sgds-select\",\n onSgdsChange: \"sgds-change\",\n onSgdsInput: \"sgds-input\",\n onSgdsFocus: \"sgds-focus\",\n onSgdsBlur: \"sgds-blur\",\n onSgdsInvalid: \"sgds-invalid\",\n onSgdsValid: \"sgds-valid\",\n onSgdsShow: \"sgds-show\",\n onSgdsAfterShow: \"sgds-after-show\",\n onSgdsHide: \"sgds-hide\",\n onSgdsAfterHide: \"sgds-after-hide\"\n }\n});\n"],"names":["register","Component","createComponent","React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKAA,mBAAQ,CAAC,gBAAgB,EAAEC,yBAAS,CAAC,CAAC;AAEtC,YAAeC,qBAAe,CAAC;AAC7B,IAAA,KAAK,EAAEC,gBAAK;AACZ,IAAA,OAAO,EAAE,gBAAgB;AACzB,IAAA,YAAY,EAAEF,yBAAS;AACvB,IAAA,MAAM,EAAE;AACN,QAAA,YAAY,EAAE,aAAa;AAC3B,QAAA,YAAY,EAAE,aAAa;AAC3B,QAAA,WAAW,EAAE,YAAY;AACzB,QAAA,WAAW,EAAE,YAAY;AACzB,QAAA,UAAU,EAAE,WAAW;AACvB,QAAA,aAAa,EAAE,cAAc;AAC7B,QAAA,WAAW,EAAE,YAAY;AACzB,QAAA,UAAU,EAAE,WAAW;AACvB,QAAA,eAAe,EAAE,iBAAiB;AAClC,QAAA,UAAU,EAAE,WAAW;AACvB,QAAA,eAAe,EAAE,iBAAiB;AACnC,KAAA;AACF,CAAA,CAAC;;;;"}
|
|
1
|
+
{"version":3,"file":"index.cjs.js","sources":["../../../src/react/combo-box/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit/react\";\nimport Component from \"../../components/ComboBox/sgds-combo-box\";\nimport { register } from \"../../utils/ce-registry\";\n\nregister(\"sgds-combo-box\", Component);\n\nexport default createComponent({\n react: React,\n tagName: \"sgds-combo-box\",\n elementClass: Component,\n events: {\n onSgdsSelect: \"sgds-select\",\n onSgdsChange: \"sgds-change\",\n onSgdsInput: \"sgds-input\",\n onSgdsFocus: \"sgds-focus\",\n onSgdsBlur: \"sgds-blur\",\n onSgdsInvalid: \"sgds-invalid\",\n onSgdsValid: \"sgds-valid\",\n onSgdsScrollEnd: \"sgds-scroll-end\",\n onSgdsShow: \"sgds-show\",\n onSgdsAfterShow: \"sgds-after-show\",\n onSgdsHide: \"sgds-hide\",\n onSgdsAfterHide: \"sgds-after-hide\"\n }\n});\n"],"names":["register","Component","createComponent","React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKAA,mBAAQ,CAAC,gBAAgB,EAAEC,yBAAS,CAAC,CAAC;AAEtC,YAAeC,qBAAe,CAAC;AAC7B,IAAA,KAAK,EAAEC,gBAAK;AACZ,IAAA,OAAO,EAAE,gBAAgB;AACzB,IAAA,YAAY,EAAEF,yBAAS;AACvB,IAAA,MAAM,EAAE;AACN,QAAA,YAAY,EAAE,aAAa;AAC3B,QAAA,YAAY,EAAE,aAAa;AAC3B,QAAA,WAAW,EAAE,YAAY;AACzB,QAAA,WAAW,EAAE,YAAY;AACzB,QAAA,UAAU,EAAE,WAAW;AACvB,QAAA,aAAa,EAAE,cAAc;AAC7B,QAAA,WAAW,EAAE,YAAY;AACzB,QAAA,eAAe,EAAE,iBAAiB;AAClC,QAAA,UAAU,EAAE,WAAW;AACvB,QAAA,eAAe,EAAE,iBAAiB;AAClC,QAAA,UAAU,EAAE,WAAW;AACvB,QAAA,eAAe,EAAE,iBAAiB;AACnC,KAAA;AACF,CAAA,CAAC;;;;"}
|
package/react/combo-box/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/react/combo-box/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit/react\";\nimport Component from \"../../components/ComboBox/sgds-combo-box\";\nimport { register } from \"../../utils/ce-registry\";\n\nregister(\"sgds-combo-box\", Component);\n\nexport default createComponent({\n react: React,\n tagName: \"sgds-combo-box\",\n elementClass: Component,\n events: {\n onSgdsSelect: \"sgds-select\",\n onSgdsChange: \"sgds-change\",\n onSgdsInput: \"sgds-input\",\n onSgdsFocus: \"sgds-focus\",\n onSgdsBlur: \"sgds-blur\",\n onSgdsInvalid: \"sgds-invalid\",\n onSgdsValid: \"sgds-valid\",\n onSgdsShow: \"sgds-show\",\n onSgdsAfterShow: \"sgds-after-show\",\n onSgdsHide: \"sgds-hide\",\n onSgdsAfterHide: \"sgds-after-hide\"\n }\n});\n"],"names":["Component"],"mappings":";;;;;;AAKA,QAAQ,CAAC,gBAAgB,EAAEA,YAAS,CAAC,CAAC;AAEtC,YAAe,eAAe,CAAC;AAC7B,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,OAAO,EAAE,gBAAgB;AACzB,IAAA,YAAY,EAAEA,YAAS;AACvB,IAAA,MAAM,EAAE;AACN,QAAA,YAAY,EAAE,aAAa;AAC3B,QAAA,YAAY,EAAE,aAAa;AAC3B,QAAA,WAAW,EAAE,YAAY;AACzB,QAAA,WAAW,EAAE,YAAY;AACzB,QAAA,UAAU,EAAE,WAAW;AACvB,QAAA,aAAa,EAAE,cAAc;AAC7B,QAAA,WAAW,EAAE,YAAY;AACzB,QAAA,UAAU,EAAE,WAAW;AACvB,QAAA,eAAe,EAAE,iBAAiB;AAClC,QAAA,UAAU,EAAE,WAAW;AACvB,QAAA,eAAe,EAAE,iBAAiB;AACnC,KAAA;AACF,CAAA,CAAC;;;;"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/react/combo-box/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit/react\";\nimport Component from \"../../components/ComboBox/sgds-combo-box\";\nimport { register } from \"../../utils/ce-registry\";\n\nregister(\"sgds-combo-box\", Component);\n\nexport default createComponent({\n react: React,\n tagName: \"sgds-combo-box\",\n elementClass: Component,\n events: {\n onSgdsSelect: \"sgds-select\",\n onSgdsChange: \"sgds-change\",\n onSgdsInput: \"sgds-input\",\n onSgdsFocus: \"sgds-focus\",\n onSgdsBlur: \"sgds-blur\",\n onSgdsInvalid: \"sgds-invalid\",\n onSgdsValid: \"sgds-valid\",\n onSgdsScrollEnd: \"sgds-scroll-end\",\n onSgdsShow: \"sgds-show\",\n onSgdsAfterShow: \"sgds-after-show\",\n onSgdsHide: \"sgds-hide\",\n onSgdsAfterHide: \"sgds-after-hide\"\n }\n});\n"],"names":["Component"],"mappings":";;;;;;AAKA,QAAQ,CAAC,gBAAgB,EAAEA,YAAS,CAAC,CAAC;AAEtC,YAAe,eAAe,CAAC;AAC7B,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,OAAO,EAAE,gBAAgB;AACzB,IAAA,YAAY,EAAEA,YAAS;AACvB,IAAA,MAAM,EAAE;AACN,QAAA,YAAY,EAAE,aAAa;AAC3B,QAAA,YAAY,EAAE,aAAa;AAC3B,QAAA,WAAW,EAAE,YAAY;AACzB,QAAA,WAAW,EAAE,YAAY;AACzB,QAAA,UAAU,EAAE,WAAW;AACvB,QAAA,aAAa,EAAE,cAAc;AAC7B,QAAA,WAAW,EAAE,YAAY;AACzB,QAAA,eAAe,EAAE,iBAAiB;AAClC,QAAA,UAAU,EAAE,WAAW;AACvB,QAAA,eAAe,EAAE,iBAAiB;AAClC,QAAA,UAAU,EAAE,WAAW;AACvB,QAAA,eAAe,EAAE,iBAAiB;AACnC,KAAA;AACF,CAAA,CAAC;;;;"}
|
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
|
|
6
6
|
var lit = require('lit');
|
|
7
7
|
|
|
8
|
-
var css_248z = lit.css`:host{--sgds-checkbox-group-gap:var(--sgds-spacer-2)}fieldset{border:0;gap:var(--sgds-form-gap-md);margin:0;min-width:0;padding:0}.label-hint-container,fieldset{display:flex;flex-direction:column}.label-hint-container{gap:var(--sgds-form-gap-sm)}.label-hint-container .form-label{color:var(--sgds-form-color-default);font-size:var(--sgds-font-size-label-md);font-weight:var(--sgds-font-weight-
|
|
8
|
+
var css_248z = lit.css`:host{--sgds-checkbox-group-gap:var(--sgds-spacer-2)}fieldset{border:0;gap:var(--sgds-form-gap-md);margin:0;min-width:0;padding:0}.label-hint-container,fieldset{display:flex;flex-direction:column}.label-hint-container{gap:var(--sgds-form-gap-sm)}.label-hint-container .form-label{color:var(--sgds-form-color-default);font-size:var(--sgds-font-size-label-md);font-weight:var(--sgds-font-weight-semibold)}.checkbox-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md);padding:var(--sgds-form-padding-inline-sm) 0}.checkbox-group-validation-input{display:none}:host([disabled]) .label-hint-container{cursor:not-allowed;opacity:var(--sgds-opacity-40)}`;
|
|
9
9
|
|
|
10
10
|
exports["default"] = css_248z;
|
|
11
11
|
//# sourceMappingURL=checkbox-group.cjs.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { css } from 'lit';
|
|
3
3
|
|
|
4
|
-
var css_248z = css`:host{--sgds-checkbox-group-gap:var(--sgds-spacer-2)}fieldset{border:0;gap:var(--sgds-form-gap-md);margin:0;min-width:0;padding:0}.label-hint-container,fieldset{display:flex;flex-direction:column}.label-hint-container{gap:var(--sgds-form-gap-sm)}.label-hint-container .form-label{color:var(--sgds-form-color-default);font-size:var(--sgds-font-size-label-md);font-weight:var(--sgds-font-weight-
|
|
4
|
+
var css_248z = css`:host{--sgds-checkbox-group-gap:var(--sgds-spacer-2)}fieldset{border:0;gap:var(--sgds-form-gap-md);margin:0;min-width:0;padding:0}.label-hint-container,fieldset{display:flex;flex-direction:column}.label-hint-container{gap:var(--sgds-form-gap-sm)}.label-hint-container .form-label{color:var(--sgds-form-color-default);font-size:var(--sgds-font-size-label-md);font-weight:var(--sgds-font-weight-semibold)}.checkbox-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md);padding:var(--sgds-form-padding-inline-sm) 0}.checkbox-group-validation-input{display:none}:host([disabled]) .label-hint-container{cursor:not-allowed;opacity:var(--sgds-opacity-40)}`;
|
|
5
5
|
|
|
6
6
|
export { css_248z as default };
|
|
7
7
|
//# sourceMappingURL=checkbox-group.js.map
|
|
@@ -18,6 +18,8 @@ var checkboxGroup = require('./checkbox-group.cjs.js');
|
|
|
18
18
|
* @summary CheckboxGroup is a form component for multiselection of checkboxes.
|
|
19
19
|
*
|
|
20
20
|
* @event sgds-change - Emitted when the value of the CheckboxGroup changes. This happens when checkboxes are checked or unchecked.
|
|
21
|
+
* @event sgds-invalid - Emitted when the checkbox group's invalid state is set to true.
|
|
22
|
+
* @event sgds-valid - Emitted when the checkbox group's invalid state is set to false.
|
|
21
23
|
*
|
|
22
24
|
* @slot default - Pass in `sgds-checkbox` into the default slot
|
|
23
25
|
* @slot invalidIcon - The slot for invalid icon
|
|
@@ -36,9 +38,12 @@ class SgdsCheckboxGroup extends validatorMixin.SgdsFormValidatorMixin(formContro
|
|
|
36
38
|
this.hintText = "";
|
|
37
39
|
/** Makes the checkbox group a required field. Only available for when multiselect is true */
|
|
38
40
|
this.required = false;
|
|
41
|
+
/** Disables native and sgds validation for the checkbox group. */
|
|
42
|
+
this.noValidate = false;
|
|
39
43
|
/** Consolidates the values of its child checked checkboxes into a single string with semi-colon delimiter. Only available when required is true */
|
|
40
44
|
this.value = "";
|
|
41
45
|
this._isTouched = false;
|
|
46
|
+
/** @internal */
|
|
42
47
|
this.defaultValue = "";
|
|
43
48
|
this._blurredCheckboxes = new Set();
|
|
44
49
|
}
|
|
@@ -117,6 +122,8 @@ class SgdsCheckboxGroup extends validatorMixin.SgdsFormValidatorMixin(formContro
|
|
|
117
122
|
this._updateInvalid();
|
|
118
123
|
}
|
|
119
124
|
_handleIsTouched() {
|
|
125
|
+
if (this._mixinShouldSkipSgdsValidation())
|
|
126
|
+
return;
|
|
120
127
|
if (this._isTouched) {
|
|
121
128
|
this.invalid = !this.input.checkValidity();
|
|
122
129
|
this._updateInvalid();
|
|
@@ -226,6 +233,9 @@ tslib.__decorate([
|
|
|
226
233
|
tslib.__decorate([
|
|
227
234
|
decorators_js.property({ type: Boolean, reflect: true })
|
|
228
235
|
], SgdsCheckboxGroup.prototype, "required", void 0);
|
|
236
|
+
tslib.__decorate([
|
|
237
|
+
decorators_js.property({ type: Boolean, reflect: true })
|
|
238
|
+
], SgdsCheckboxGroup.prototype, "noValidate", void 0);
|
|
229
239
|
tslib.__decorate([
|
|
230
240
|
decorators_js.property({ reflect: true })
|
|
231
241
|
], SgdsCheckboxGroup.prototype, "value", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sgds-checkbox-group.cjs.js","sources":["../../../../src/components/Checkbox/sgds-checkbox-group.ts"],"sourcesContent":["import { html, nothing, PropertyValueMap } from \"lit\";\nimport { property, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { live } from \"lit/directives/live.js\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport SgdsCheckbox from \"./sgds-checkbox\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport checkboxGroupStyles from \"./checkbox-group.css\";\n/**\n * @summary CheckboxGroup is a form component for multiselection of checkboxes.\n *\n * @event sgds-change - Emitted when the value of the CheckboxGroup changes. This happens when checkboxes are checked or unchecked.\n *\n * @slot default - Pass in `sgds-checkbox` into the default slot\n * @slot invalidIcon - The slot for invalid icon\n *\n */\nexport class SgdsCheckboxGroup extends SgdsFormValidatorMixin(FormControlElement) {\n static styles = [...FormControlElement.styles, checkboxGroupStyles];\n\n /**@internal */\n static dependencies = {\n \"sgds-icon\": SgdsIcon\n };\n\n /** The checkbox group's label */\n @property({ reflect: true }) label = \"\";\n\n /**Feedback text for error state when validated */\n @property({ type: String, reflect: true }) invalidFeedback = \"Please tick at least one box if you want to proceed\";\n\n /** Allows invalidFeedback, invalid styles to be visible. When SgdsCheckboxGroup is used, it overrides the value of hasFeedback on SgdsCheckbox with its own value. */\n @property({ type: Boolean, reflect: true }) hasFeedback = false;\n\n /** The checkbox group's hint text */\n @property({ reflect: true }) hintText = \"\";\n\n /** Makes the checkbox group a required field. Only available for when multiselect is true */\n @property({ type: Boolean, reflect: true }) required = false;\n\n /** Consolidates the values of its child checked checkboxes into a single string with semi-colon delimiter. Only available when required is true */\n @property({ reflect: true }) value = \"\";\n\n @state() private _isTouched = false;\n\n @defaultValue()\n defaultValue = \"\";\n\n @state()\n private _blurredCheckboxes = new Set<SgdsCheckbox>();\n\n @state()\n private formEvent: FormEvent;\n\n connectedCallback() {\n super.connectedCallback();\n this.addEventListener(\"sgds-check\", (e: CustomEvent) => {\n const { value } = e.detail;\n !this.value.includes(value) && this._addValue(value);\n });\n this.addEventListener(\"sgds-uncheck\", (e: CustomEvent) => {\n const { value } = e.detail;\n this._removeValue(value);\n });\n /** Blurring when all checkboxes are blurred */\n this.addEventListener(\"sgds-blur\", e => {\n const checkbox = e.target as SgdsCheckbox;\n this._blurredCheckboxes.add(checkbox);\n if (Array.from(this._blurredCheckboxes).length === this._checkboxes.length) {\n this._isTouched = true;\n this._blurredCheckboxes.clear();\n }\n });\n }\n firstUpdated(changedProperties: PropertyValueMap<this>) {\n super.firstUpdated(changedProperties);\n if (this.value) {\n this._updateInputValue();\n }\n\n if (this.invalid) {\n this._updateInvalid();\n }\n }\n\n protected _renderHintText() {\n const hintTextTemplate = html` <div class=\"form-text\" id=\"${this._controlId}Help\">${this.hintText}</div> `;\n return this.hintText && hintTextTemplate;\n }\n\n @queryAssignedElements()\n private _checkboxes!: Array<SgdsCheckbox>;\n\n private _addValue(newValue: string) {\n const valueArray = this.value ? this.value.split(\";\") : [];\n valueArray.push(newValue);\n this.value = valueArray.join(\";\");\n }\n private _removeValue(oldValue: string) {\n const valueArray = this.value ? this.value.split(\";\") : [];\n const newValueArray = valueArray.filter(v => v !== oldValue);\n this.value = newValueArray.join(\";\");\n }\n\n private _sanitizeSlot() {\n const checkboxes = this._checkboxes;\n checkboxes.forEach(checkbox => {\n checkbox.checked = checkbox.defaultChecked = this.value.includes(checkbox.value);\n\n checkbox.hasFeedback = this.hasFeedback ? \"style\" : null;\n if (checkbox.required) {\n console.error(\"Checkboxes in a group cannot have required or hasFeedback prop set to true\");\n checkbox.remove();\n }\n });\n this._disabledChildCheckboxes();\n }\n\n private _disabledChildCheckboxes() {\n if (this.disabled) {\n const checkboxes = this._checkboxes;\n checkboxes.forEach(checkbox => (checkbox.disabled = this.disabled));\n }\n }\n\n @watch(\"value\", { waitUntilFirstUpdate: true })\n _handleValueChange() {\n if (this.formEvent === \"reset\" && this.value === this.defaultValue) {\n this.formEvent = null;\n return;\n }\n\n this.emit(\"sgds-change\");\n const checkboxes = this._checkboxes;\n checkboxes.forEach(checkbox => {\n checkbox.checked = this.value.includes(checkbox.value);\n });\n this._updateInputValue();\n this._updateInvalid();\n }\n\n @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n _handleIsTouched() {\n if (this._isTouched) {\n this.invalid = !this.input.checkValidity();\n this._updateInvalid();\n }\n }\n @watch(\"invalid\", { waitUntilFirstUpdate: true })\n _updateInvalid() {\n const checkboxes = this._checkboxes;\n checkboxes.forEach(ch => (ch.invalid = this.invalid));\n }\n\n /**\n * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n */\n public reportValidity(): boolean {\n return this._mixinReportValidity();\n }\n /**\n * Checks for validity without any native error popup message\n */\n public checkValidity(): boolean {\n return this._mixinCheckValidity();\n }\n\n /**\n * Returns the ValidityState object\n */\n public get validity(): ValidityState {\n return this._mixinGetValidity();\n }\n /**\n * Returns the validation message based on the ValidityState\n */\n public get validationMessage() {\n return this._mixinGetValidationMessage();\n }\n /**\n * checkbox requries a custom _mixinResetFormControl as the update of input value\n * requires to fire a reset event manually\n * */\n private _mixinResetFormControl() {\n this.value = this.input.value = this.defaultValue;\n this._updateInputValue(\"reset\");\n this._mixinResetValidity(this.input);\n }\n /**\n * when input value is set programatically, need to manually dispatch a change event\n * In order to prevent race conditions and ensure sequence of events, set input's value here instead of binding to value prop of input\n */\n private async _updateInputValue(eventName: FormEvent = \"change\") {\n this.input.value = this.value;\n\n this.input.dispatchEvent(new InputEvent(eventName));\n this.formEvent = eventName;\n }\n\n render() {\n return html`\n <fieldset>\n <div class=\"label-hint-container\">\n <label class=\"form-label\">${this.label}</label>\n ${this._renderHintText()}\n </div>\n <div class=\"checkbox-container\">\n <slot @slotchange=${this._sanitizeSlot}></slot>\n </div>\n <input\n type=\"text\"\n class=\"checkbox-group-validation-input\"\n ?required=${this.required}\n tabindex=\"-1\"\n @change=${(e: Event) => {\n super._mixinHandleChange(e);\n }}\n .value=${live(this.value)}\n aria-describedby=${this.invalid && this.hasFeedback ? \"checkbox-group-feedback\" : `${this._controlId}Help`}\n />\n ${this.invalid && this.hasFeedback\n ? html`\n <div class=\"invalid-feedback-container\">\n <slot name=\"invalidIcon\">\n <sgds-icon name=\"exclamation-circle-fill\" size=\"md\"></sgds-icon>\n </slot>\n <div id=\"checkbox-group-feedback\" class=\"invalid-feedback\">\n ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n </div>\n </div>\n `\n : nothing}\n </fieldset>\n `;\n }\n}\n\nexport default SgdsCheckboxGroup;\n\ntype FormEvent = \"reset\" | \"change\" | null;\n"],"names":["SgdsFormValidatorMixin","FormControlElement","html","live","nothing","checkboxGroupStyles","SgdsIcon","__decorate","property","state","defaultValue","queryAssignedElements","watch"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"sgds-checkbox-group.cjs.js","sources":["../../../../src/components/Checkbox/sgds-checkbox-group.ts"],"sourcesContent":["import { html, nothing, PropertyValueMap } from \"lit\";\nimport { property, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { live } from \"lit/directives/live.js\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport SgdsCheckbox from \"./sgds-checkbox\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport checkboxGroupStyles from \"./checkbox-group.css\";\n/**\n * @summary CheckboxGroup is a form component for multiselection of checkboxes.\n *\n * @event sgds-change - Emitted when the value of the CheckboxGroup changes. This happens when checkboxes are checked or unchecked.\n * @event sgds-invalid - Emitted when the checkbox group's invalid state is set to true.\n * @event sgds-valid - Emitted when the checkbox group's invalid state is set to false.\n *\n * @slot default - Pass in `sgds-checkbox` into the default slot\n * @slot invalidIcon - The slot for invalid icon\n *\n */\nexport class SgdsCheckboxGroup extends SgdsFormValidatorMixin(FormControlElement) {\n static styles = [...FormControlElement.styles, checkboxGroupStyles];\n\n /**@internal */\n static dependencies = {\n \"sgds-icon\": SgdsIcon\n };\n\n /** The checkbox group's label */\n @property({ reflect: true }) label = \"\";\n\n /**Feedback text for error state when validated */\n @property({ type: String, reflect: true }) invalidFeedback = \"Please tick at least one box if you want to proceed\";\n\n /** Allows invalidFeedback, invalid styles to be visible. When SgdsCheckboxGroup is used, it overrides the value of hasFeedback on SgdsCheckbox with its own value. */\n @property({ type: Boolean, reflect: true }) hasFeedback = false;\n\n /** The checkbox group's hint text */\n @property({ reflect: true }) hintText = \"\";\n\n /** Makes the checkbox group a required field. Only available for when multiselect is true */\n @property({ type: Boolean, reflect: true }) required = false;\n\n /** Disables native and sgds validation for the checkbox group. */\n @property({ type: Boolean, reflect: true }) noValidate = false;\n\n /** Consolidates the values of its child checked checkboxes into a single string with semi-colon delimiter. Only available when required is true */\n @property({ reflect: true }) value = \"\";\n\n @state() private _isTouched = false;\n\n /** @internal */\n @defaultValue()\n defaultValue = \"\";\n\n @state()\n private _blurredCheckboxes = new Set<SgdsCheckbox>();\n\n @state()\n private formEvent: FormEvent;\n\n connectedCallback() {\n super.connectedCallback();\n this.addEventListener(\"sgds-check\", (e: CustomEvent) => {\n const { value } = e.detail;\n !this.value.includes(value) && this._addValue(value);\n });\n this.addEventListener(\"sgds-uncheck\", (e: CustomEvent) => {\n const { value } = e.detail;\n this._removeValue(value);\n });\n /** Blurring when all checkboxes are blurred */\n this.addEventListener(\"sgds-blur\", e => {\n const checkbox = e.target as SgdsCheckbox;\n this._blurredCheckboxes.add(checkbox);\n if (Array.from(this._blurredCheckboxes).length === this._checkboxes.length) {\n this._isTouched = true;\n this._blurredCheckboxes.clear();\n }\n });\n }\n firstUpdated(changedProperties: PropertyValueMap<this>) {\n super.firstUpdated(changedProperties);\n if (this.value) {\n this._updateInputValue();\n }\n\n if (this.invalid) {\n this._updateInvalid();\n }\n }\n\n protected _renderHintText() {\n const hintTextTemplate = html` <div class=\"form-text\" id=\"${this._controlId}Help\">${this.hintText}</div> `;\n return this.hintText && hintTextTemplate;\n }\n\n @queryAssignedElements()\n private _checkboxes!: Array<SgdsCheckbox>;\n\n private _addValue(newValue: string) {\n const valueArray = this.value ? this.value.split(\";\") : [];\n valueArray.push(newValue);\n this.value = valueArray.join(\";\");\n }\n private _removeValue(oldValue: string) {\n const valueArray = this.value ? this.value.split(\";\") : [];\n const newValueArray = valueArray.filter(v => v !== oldValue);\n this.value = newValueArray.join(\";\");\n }\n\n private _sanitizeSlot() {\n const checkboxes = this._checkboxes;\n checkboxes.forEach(checkbox => {\n checkbox.checked = checkbox.defaultChecked = this.value.includes(checkbox.value);\n\n checkbox.hasFeedback = this.hasFeedback ? \"style\" : null;\n if (checkbox.required) {\n console.error(\"Checkboxes in a group cannot have required or hasFeedback prop set to true\");\n checkbox.remove();\n }\n });\n this._disabledChildCheckboxes();\n }\n\n private _disabledChildCheckboxes() {\n if (this.disabled) {\n const checkboxes = this._checkboxes;\n checkboxes.forEach(checkbox => (checkbox.disabled = this.disabled));\n }\n }\n\n @watch(\"value\", { waitUntilFirstUpdate: true })\n _handleValueChange() {\n if (this.formEvent === \"reset\" && this.value === this.defaultValue) {\n this.formEvent = null;\n return;\n }\n\n this.emit(\"sgds-change\");\n const checkboxes = this._checkboxes;\n checkboxes.forEach(checkbox => {\n checkbox.checked = this.value.includes(checkbox.value);\n });\n this._updateInputValue();\n this._updateInvalid();\n }\n\n @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n _handleIsTouched() {\n if (this._mixinShouldSkipSgdsValidation()) return;\n if (this._isTouched) {\n this.invalid = !this.input.checkValidity();\n this._updateInvalid();\n }\n }\n @watch(\"invalid\", { waitUntilFirstUpdate: true })\n _updateInvalid() {\n const checkboxes = this._checkboxes;\n checkboxes.forEach(ch => (ch.invalid = this.invalid));\n }\n\n /**\n * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n */\n public reportValidity(): boolean {\n return this._mixinReportValidity();\n }\n /**\n * Checks for validity without any native error popup message\n */\n public checkValidity(): boolean {\n return this._mixinCheckValidity();\n }\n\n /**\n * Returns the ValidityState object\n */\n public get validity(): ValidityState {\n return this._mixinGetValidity();\n }\n /**\n * Returns the validation message based on the ValidityState\n */\n public get validationMessage() {\n return this._mixinGetValidationMessage();\n }\n /**\n * checkbox requries a custom _mixinResetFormControl as the update of input value\n * requires to fire a reset event manually\n * */\n private _mixinResetFormControl() {\n this.value = this.input.value = this.defaultValue;\n this._updateInputValue(\"reset\");\n this._mixinResetValidity(this.input);\n }\n /**\n * when input value is set programatically, need to manually dispatch a change event\n * In order to prevent race conditions and ensure sequence of events, set input's value here instead of binding to value prop of input\n */\n private async _updateInputValue(eventName: FormEvent = \"change\") {\n this.input.value = this.value;\n\n this.input.dispatchEvent(new InputEvent(eventName));\n this.formEvent = eventName;\n }\n\n render() {\n return html`\n <fieldset>\n <div class=\"label-hint-container\">\n <label class=\"form-label\">${this.label}</label>\n ${this._renderHintText()}\n </div>\n <div class=\"checkbox-container\">\n <slot @slotchange=${this._sanitizeSlot}></slot>\n </div>\n <input\n type=\"text\"\n class=\"checkbox-group-validation-input\"\n ?required=${this.required}\n tabindex=\"-1\"\n @change=${(e: Event) => {\n super._mixinHandleChange(e);\n }}\n .value=${live(this.value)}\n aria-describedby=${this.invalid && this.hasFeedback ? \"checkbox-group-feedback\" : `${this._controlId}Help`}\n />\n ${this.invalid && this.hasFeedback\n ? html`\n <div class=\"invalid-feedback-container\">\n <slot name=\"invalidIcon\">\n <sgds-icon name=\"exclamation-circle-fill\" size=\"md\"></sgds-icon>\n </slot>\n <div id=\"checkbox-group-feedback\" class=\"invalid-feedback\">\n ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n </div>\n </div>\n `\n : nothing}\n </fieldset>\n `;\n }\n}\n\nexport default SgdsCheckboxGroup;\n\ntype FormEvent = \"reset\" | \"change\" | null;\n"],"names":["SgdsFormValidatorMixin","FormControlElement","html","live","nothing","checkboxGroupStyles","SgdsIcon","__decorate","property","state","defaultValue","queryAssignedElements","watch"],"mappings":"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"}
|
|
@@ -14,6 +14,8 @@ import css_248z from './checkbox-group.js';
|
|
|
14
14
|
* @summary CheckboxGroup is a form component for multiselection of checkboxes.
|
|
15
15
|
*
|
|
16
16
|
* @event sgds-change - Emitted when the value of the CheckboxGroup changes. This happens when checkboxes are checked or unchecked.
|
|
17
|
+
* @event sgds-invalid - Emitted when the checkbox group's invalid state is set to true.
|
|
18
|
+
* @event sgds-valid - Emitted when the checkbox group's invalid state is set to false.
|
|
17
19
|
*
|
|
18
20
|
* @slot default - Pass in `sgds-checkbox` into the default slot
|
|
19
21
|
* @slot invalidIcon - The slot for invalid icon
|
|
@@ -32,9 +34,12 @@ class SgdsCheckboxGroup extends SgdsFormValidatorMixin(FormControlElement) {
|
|
|
32
34
|
this.hintText = "";
|
|
33
35
|
/** Makes the checkbox group a required field. Only available for when multiselect is true */
|
|
34
36
|
this.required = false;
|
|
37
|
+
/** Disables native and sgds validation for the checkbox group. */
|
|
38
|
+
this.noValidate = false;
|
|
35
39
|
/** Consolidates the values of its child checked checkboxes into a single string with semi-colon delimiter. Only available when required is true */
|
|
36
40
|
this.value = "";
|
|
37
41
|
this._isTouched = false;
|
|
42
|
+
/** @internal */
|
|
38
43
|
this.defaultValue = "";
|
|
39
44
|
this._blurredCheckboxes = new Set();
|
|
40
45
|
}
|
|
@@ -113,6 +118,8 @@ class SgdsCheckboxGroup extends SgdsFormValidatorMixin(FormControlElement) {
|
|
|
113
118
|
this._updateInvalid();
|
|
114
119
|
}
|
|
115
120
|
_handleIsTouched() {
|
|
121
|
+
if (this._mixinShouldSkipSgdsValidation())
|
|
122
|
+
return;
|
|
116
123
|
if (this._isTouched) {
|
|
117
124
|
this.invalid = !this.input.checkValidity();
|
|
118
125
|
this._updateInvalid();
|
|
@@ -222,6 +229,9 @@ __decorate([
|
|
|
222
229
|
__decorate([
|
|
223
230
|
property({ type: Boolean, reflect: true })
|
|
224
231
|
], SgdsCheckboxGroup.prototype, "required", void 0);
|
|
232
|
+
__decorate([
|
|
233
|
+
property({ type: Boolean, reflect: true })
|
|
234
|
+
], SgdsCheckboxGroup.prototype, "noValidate", void 0);
|
|
225
235
|
__decorate([
|
|
226
236
|
property({ reflect: true })
|
|
227
237
|
], SgdsCheckboxGroup.prototype, "value", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sgds-checkbox-group.js","sources":["../../../../src/components/Checkbox/sgds-checkbox-group.ts"],"sourcesContent":["import { html, nothing, PropertyValueMap } from \"lit\";\nimport { property, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { live } from \"lit/directives/live.js\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport SgdsCheckbox from \"./sgds-checkbox\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport checkboxGroupStyles from \"./checkbox-group.css\";\n/**\n * @summary CheckboxGroup is a form component for multiselection of checkboxes.\n *\n * @event sgds-change - Emitted when the value of the CheckboxGroup changes. This happens when checkboxes are checked or unchecked.\n *\n * @slot default - Pass in `sgds-checkbox` into the default slot\n * @slot invalidIcon - The slot for invalid icon\n *\n */\nexport class SgdsCheckboxGroup extends SgdsFormValidatorMixin(FormControlElement) {\n static styles = [...FormControlElement.styles, checkboxGroupStyles];\n\n /**@internal */\n static dependencies = {\n \"sgds-icon\": SgdsIcon\n };\n\n /** The checkbox group's label */\n @property({ reflect: true }) label = \"\";\n\n /**Feedback text for error state when validated */\n @property({ type: String, reflect: true }) invalidFeedback = \"Please tick at least one box if you want to proceed\";\n\n /** Allows invalidFeedback, invalid styles to be visible. When SgdsCheckboxGroup is used, it overrides the value of hasFeedback on SgdsCheckbox with its own value. */\n @property({ type: Boolean, reflect: true }) hasFeedback = false;\n\n /** The checkbox group's hint text */\n @property({ reflect: true }) hintText = \"\";\n\n /** Makes the checkbox group a required field. Only available for when multiselect is true */\n @property({ type: Boolean, reflect: true }) required = false;\n\n /** Consolidates the values of its child checked checkboxes into a single string with semi-colon delimiter. Only available when required is true */\n @property({ reflect: true }) value = \"\";\n\n @state() private _isTouched = false;\n\n @defaultValue()\n defaultValue = \"\";\n\n @state()\n private _blurredCheckboxes = new Set<SgdsCheckbox>();\n\n @state()\n private formEvent: FormEvent;\n\n connectedCallback() {\n super.connectedCallback();\n this.addEventListener(\"sgds-check\", (e: CustomEvent) => {\n const { value } = e.detail;\n !this.value.includes(value) && this._addValue(value);\n });\n this.addEventListener(\"sgds-uncheck\", (e: CustomEvent) => {\n const { value } = e.detail;\n this._removeValue(value);\n });\n /** Blurring when all checkboxes are blurred */\n this.addEventListener(\"sgds-blur\", e => {\n const checkbox = e.target as SgdsCheckbox;\n this._blurredCheckboxes.add(checkbox);\n if (Array.from(this._blurredCheckboxes).length === this._checkboxes.length) {\n this._isTouched = true;\n this._blurredCheckboxes.clear();\n }\n });\n }\n firstUpdated(changedProperties: PropertyValueMap<this>) {\n super.firstUpdated(changedProperties);\n if (this.value) {\n this._updateInputValue();\n }\n\n if (this.invalid) {\n this._updateInvalid();\n }\n }\n\n protected _renderHintText() {\n const hintTextTemplate = html` <div class=\"form-text\" id=\"${this._controlId}Help\">${this.hintText}</div> `;\n return this.hintText && hintTextTemplate;\n }\n\n @queryAssignedElements()\n private _checkboxes!: Array<SgdsCheckbox>;\n\n private _addValue(newValue: string) {\n const valueArray = this.value ? this.value.split(\";\") : [];\n valueArray.push(newValue);\n this.value = valueArray.join(\";\");\n }\n private _removeValue(oldValue: string) {\n const valueArray = this.value ? this.value.split(\";\") : [];\n const newValueArray = valueArray.filter(v => v !== oldValue);\n this.value = newValueArray.join(\";\");\n }\n\n private _sanitizeSlot() {\n const checkboxes = this._checkboxes;\n checkboxes.forEach(checkbox => {\n checkbox.checked = checkbox.defaultChecked = this.value.includes(checkbox.value);\n\n checkbox.hasFeedback = this.hasFeedback ? \"style\" : null;\n if (checkbox.required) {\n console.error(\"Checkboxes in a group cannot have required or hasFeedback prop set to true\");\n checkbox.remove();\n }\n });\n this._disabledChildCheckboxes();\n }\n\n private _disabledChildCheckboxes() {\n if (this.disabled) {\n const checkboxes = this._checkboxes;\n checkboxes.forEach(checkbox => (checkbox.disabled = this.disabled));\n }\n }\n\n @watch(\"value\", { waitUntilFirstUpdate: true })\n _handleValueChange() {\n if (this.formEvent === \"reset\" && this.value === this.defaultValue) {\n this.formEvent = null;\n return;\n }\n\n this.emit(\"sgds-change\");\n const checkboxes = this._checkboxes;\n checkboxes.forEach(checkbox => {\n checkbox.checked = this.value.includes(checkbox.value);\n });\n this._updateInputValue();\n this._updateInvalid();\n }\n\n @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n _handleIsTouched() {\n if (this._isTouched) {\n this.invalid = !this.input.checkValidity();\n this._updateInvalid();\n }\n }\n @watch(\"invalid\", { waitUntilFirstUpdate: true })\n _updateInvalid() {\n const checkboxes = this._checkboxes;\n checkboxes.forEach(ch => (ch.invalid = this.invalid));\n }\n\n /**\n * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n */\n public reportValidity(): boolean {\n return this._mixinReportValidity();\n }\n /**\n * Checks for validity without any native error popup message\n */\n public checkValidity(): boolean {\n return this._mixinCheckValidity();\n }\n\n /**\n * Returns the ValidityState object\n */\n public get validity(): ValidityState {\n return this._mixinGetValidity();\n }\n /**\n * Returns the validation message based on the ValidityState\n */\n public get validationMessage() {\n return this._mixinGetValidationMessage();\n }\n /**\n * checkbox requries a custom _mixinResetFormControl as the update of input value\n * requires to fire a reset event manually\n * */\n private _mixinResetFormControl() {\n this.value = this.input.value = this.defaultValue;\n this._updateInputValue(\"reset\");\n this._mixinResetValidity(this.input);\n }\n /**\n * when input value is set programatically, need to manually dispatch a change event\n * In order to prevent race conditions and ensure sequence of events, set input's value here instead of binding to value prop of input\n */\n private async _updateInputValue(eventName: FormEvent = \"change\") {\n this.input.value = this.value;\n\n this.input.dispatchEvent(new InputEvent(eventName));\n this.formEvent = eventName;\n }\n\n render() {\n return html`\n <fieldset>\n <div class=\"label-hint-container\">\n <label class=\"form-label\">${this.label}</label>\n ${this._renderHintText()}\n </div>\n <div class=\"checkbox-container\">\n <slot @slotchange=${this._sanitizeSlot}></slot>\n </div>\n <input\n type=\"text\"\n class=\"checkbox-group-validation-input\"\n ?required=${this.required}\n tabindex=\"-1\"\n @change=${(e: Event) => {\n super._mixinHandleChange(e);\n }}\n .value=${live(this.value)}\n aria-describedby=${this.invalid && this.hasFeedback ? \"checkbox-group-feedback\" : `${this._controlId}Help`}\n />\n ${this.invalid && this.hasFeedback\n ? html`\n <div class=\"invalid-feedback-container\">\n <slot name=\"invalidIcon\">\n <sgds-icon name=\"exclamation-circle-fill\" size=\"md\"></sgds-icon>\n </slot>\n <div id=\"checkbox-group-feedback\" class=\"invalid-feedback\">\n ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n </div>\n </div>\n `\n : nothing}\n </fieldset>\n `;\n }\n}\n\nexport default SgdsCheckboxGroup;\n\ntype FormEvent = \"reset\" | \"change\" | null;\n"],"names":["checkboxGroupStyles"],"mappings":";;;;;;;;;;;;AAUA;;;;;;;;AAQG;MACU,iBAAkB,SAAQ,sBAAsB,CAAC,kBAAkB,CAAC,CAAA;AAAjF,IAAA,WAAA,GAAA;;;QAS+B,IAAK,CAAA,KAAA,GAAG,EAAE,CAAC;;QAGG,IAAe,CAAA,eAAA,GAAG,qDAAqD,CAAC;;QAGvE,IAAW,CAAA,WAAA,GAAG,KAAK,CAAC;;QAGnC,IAAQ,CAAA,QAAA,GAAG,EAAE,CAAC;;QAGC,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;;QAGhC,IAAK,CAAA,KAAA,GAAG,EAAE,CAAC;QAEvB,IAAU,CAAA,UAAA,GAAG,KAAK,CAAC;QAGpC,IAAY,CAAA,YAAA,GAAG,EAAE,CAAC;AAGV,QAAA,IAAA,CAAA,kBAAkB,GAAG,IAAI,GAAG,EAAgB,CAAC;KA2LtD;IAtLC,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,gBAAgB,CAAC,YAAY,EAAE,CAAC,CAAc,KAAI;AACrD,YAAA,MAAM,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC;AAC3B,YAAA,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;AACvD,SAAC,CAAC,CAAC;QACH,IAAI,CAAC,gBAAgB,CAAC,cAAc,EAAE,CAAC,CAAc,KAAI;AACvD,YAAA,MAAM,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC;AAC3B,YAAA,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;AAC3B,SAAC,CAAC,CAAC;;AAEH,QAAA,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE,CAAC,IAAG;AACrC,YAAA,MAAM,QAAQ,GAAG,CAAC,CAAC,MAAsB,CAAC;AAC1C,YAAA,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;AACtC,YAAA,IAAI,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,MAAM,KAAK,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE;AAC1E,gBAAA,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;AACvB,gBAAA,IAAI,CAAC,kBAAkB,CAAC,KAAK,EAAE,CAAC;aACjC;AACH,SAAC,CAAC,CAAC;KACJ;AACD,IAAA,YAAY,CAAC,iBAAyC,EAAA;AACpD,QAAA,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;AACtC,QAAA,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,IAAI,CAAC,iBAAiB,EAAE,CAAC;SAC1B;AAED,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,IAAI,CAAC,cAAc,EAAE,CAAC;SACvB;KACF;IAES,eAAe,GAAA;AACvB,QAAA,MAAM,gBAAgB,GAAG,IAAI,CAAA,CAA+B,4BAAA,EAAA,IAAI,CAAC,UAAU,CAAS,MAAA,EAAA,IAAI,CAAC,QAAQ,SAAS,CAAC;AAC3G,QAAA,OAAO,IAAI,CAAC,QAAQ,IAAI,gBAAgB,CAAC;KAC1C;AAKO,IAAA,SAAS,CAAC,QAAgB,EAAA;QAChC,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC;AAC3D,QAAA,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC1B,IAAI,CAAC,KAAK,GAAG,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KACnC;AACO,IAAA,YAAY,CAAC,QAAgB,EAAA;QACnC,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC;AAC3D,QAAA,MAAM,aAAa,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,KAAK,QAAQ,CAAC,CAAC;QAC7D,IAAI,CAAC,KAAK,GAAG,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KACtC;IAEO,aAAa,GAAA;AACnB,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC;AACpC,QAAA,UAAU,CAAC,OAAO,CAAC,QAAQ,IAAG;AAC5B,YAAA,QAAQ,CAAC,OAAO,GAAG,QAAQ,CAAC,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;AAEjF,YAAA,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,GAAG,OAAO,GAAG,IAAI,CAAC;AACzD,YAAA,IAAI,QAAQ,CAAC,QAAQ,EAAE;AACrB,gBAAA,OAAO,CAAC,KAAK,CAAC,4EAA4E,CAAC,CAAC;gBAC5F,QAAQ,CAAC,MAAM,EAAE,CAAC;aACnB;AACH,SAAC,CAAC,CAAC;QACH,IAAI,CAAC,wBAAwB,EAAE,CAAC;KACjC;IAEO,wBAAwB,GAAA;AAC9B,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACjB,YAAA,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC;AACpC,YAAA,UAAU,CAAC,OAAO,CAAC,QAAQ,KAAK,QAAQ,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;SACrE;KACF;IAGD,kBAAkB,GAAA;AAChB,QAAA,IAAI,IAAI,CAAC,SAAS,KAAK,OAAO,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,YAAY,EAAE;AAClE,YAAA,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;YACtB,OAAO;SACR;AAED,QAAA,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;AACzB,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC;AACpC,QAAA,UAAU,CAAC,OAAO,CAAC,QAAQ,IAAG;AAC5B,YAAA,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;AACzD,SAAC,CAAC,CAAC;QACH,IAAI,CAAC,iBAAiB,EAAE,CAAC;QACzB,IAAI,CAAC,cAAc,EAAE,CAAC;KACvB;IAGD,gBAAgB,GAAA;AACd,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,CAAC;YAC3C,IAAI,CAAC,cAAc,EAAE,CAAC;SACvB;KACF;IAED,cAAc,GAAA;AACZ,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC;AACpC,QAAA,UAAU,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;KACvD;AAED;;;AAGG;IACI,cAAc,GAAA;AACnB,QAAA,OAAO,IAAI,CAAC,oBAAoB,EAAE,CAAC;KACpC;AACD;;AAEG;IACI,aAAa,GAAA;AAClB,QAAA,OAAO,IAAI,CAAC,mBAAmB,EAAE,CAAC;KACnC;AAED;;AAEG;AACH,IAAA,IAAW,QAAQ,GAAA;AACjB,QAAA,OAAO,IAAI,CAAC,iBAAiB,EAAE,CAAC;KACjC;AACD;;AAEG;AACH,IAAA,IAAW,iBAAiB,GAAA;AAC1B,QAAA,OAAO,IAAI,CAAC,0BAA0B,EAAE,CAAC;KAC1C;AACD;;;AAGK;IACG,sBAAsB,GAAA;AAC5B,QAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC;AAClD,QAAA,IAAI,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC;AAChC,QAAA,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACtC;AACD;;;AAGG;AACK,IAAA,MAAM,iBAAiB,CAAC,SAAA,GAAuB,QAAQ,EAAA;QAC7D,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;QAE9B,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,IAAI,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC;AACpD,QAAA,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;KAC5B;IAED,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;;;AAGuB,oCAAA,EAAA,IAAI,CAAC,KAAK,CAAA;YACpC,IAAI,CAAC,eAAe,EAAE,CAAA;;;AAGJ,4BAAA,EAAA,IAAI,CAAC,aAAa,CAAA;;;;;AAK1B,oBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;;oBAEf,CAAC,CAAQ,KAAI;AACrB,YAAA,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC;SAC7B,CAAA;AACQ,iBAAA,EAAA,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;AACN,2BAAA,EAAA,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,WAAW,GAAG,yBAAyB,GAAG,GAAG,IAAI,CAAC,UAAU,CAAM,IAAA,CAAA,CAAA;;AAE1G,QAAA,EAAA,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,WAAW;cAC9B,IAAI,CAAA,CAAA;;;;;;AAMI,kBAAA,EAAA,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAA;;;AAGjF,YAAA,CAAA;AACH,cAAE,OAAO,CAAA;;KAEd,CAAC;KACH;;AAzNM,iBAAM,CAAA,MAAA,GAAG,CAAC,GAAG,kBAAkB,CAAC,MAAM,EAAEA,QAAmB,CAArD,CAAuD;AAEpE;AACO,iBAAA,CAAA,YAAY,GAAG;AACpB,IAAA,WAAW,EAAE,QAAQ;AACtB,CAFkB,CAEjB;AAG2B,UAAA,CAAA;AAA5B,IAAA,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAY,CAAA,EAAA,iBAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGG,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAyE,CAAA,EAAA,iBAAA,CAAA,SAAA,EAAA,iBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGvE,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAqB,CAAA,EAAA,iBAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGnC,UAAA,CAAA;AAA5B,IAAA,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAe,CAAA,EAAA,iBAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGC,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkB,CAAA,EAAA,iBAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGhC,UAAA,CAAA;AAA5B,IAAA,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAY,CAAA,EAAA,iBAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEvB,UAAA,CAAA;AAAhB,IAAA,KAAK,EAAE;AAA4B,CAAA,EAAA,iBAAA,CAAA,SAAA,EAAA,YAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGpC,UAAA,CAAA;AADC,IAAA,YAAY,EAAE;AACG,CAAA,EAAA,iBAAA,CAAA,SAAA,EAAA,cAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGV,UAAA,CAAA;AADP,IAAA,KAAK,EAAE;AAC6C,CAAA,EAAA,iBAAA,CAAA,SAAA,EAAA,oBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAG7C,UAAA,CAAA;AADP,IAAA,KAAK,EAAE;AACqB,CAAA,EAAA,iBAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAuCrB,UAAA,CAAA;AADP,IAAA,qBAAqB,EAAE;AACkB,CAAA,EAAA,iBAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAmC1C,UAAA,CAAA;IADC,KAAK,CAAC,OAAO,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;AAc9C,CAAA,EAAA,iBAAA,CAAA,SAAA,EAAA,oBAAA,EAAA,IAAA,CAAA,CAAA;AAGD,UAAA,CAAA;IADC,KAAK,CAAC,YAAY,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;AAMnD,CAAA,EAAA,iBAAA,CAAA,SAAA,EAAA,kBAAA,EAAA,IAAA,CAAA,CAAA;AAED,UAAA,CAAA;IADC,KAAK,CAAC,SAAS,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;AAIhD,CAAA,EAAA,iBAAA,CAAA,SAAA,EAAA,gBAAA,EAAA,IAAA,CAAA;;;;"}
|
|
1
|
+
{"version":3,"file":"sgds-checkbox-group.js","sources":["../../../../src/components/Checkbox/sgds-checkbox-group.ts"],"sourcesContent":["import { html, nothing, PropertyValueMap } from \"lit\";\nimport { property, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { live } from \"lit/directives/live.js\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport SgdsCheckbox from \"./sgds-checkbox\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport checkboxGroupStyles from \"./checkbox-group.css\";\n/**\n * @summary CheckboxGroup is a form component for multiselection of checkboxes.\n *\n * @event sgds-change - Emitted when the value of the CheckboxGroup changes. This happens when checkboxes are checked or unchecked.\n * @event sgds-invalid - Emitted when the checkbox group's invalid state is set to true.\n * @event sgds-valid - Emitted when the checkbox group's invalid state is set to false.\n *\n * @slot default - Pass in `sgds-checkbox` into the default slot\n * @slot invalidIcon - The slot for invalid icon\n *\n */\nexport class SgdsCheckboxGroup extends SgdsFormValidatorMixin(FormControlElement) {\n static styles = [...FormControlElement.styles, checkboxGroupStyles];\n\n /**@internal */\n static dependencies = {\n \"sgds-icon\": SgdsIcon\n };\n\n /** The checkbox group's label */\n @property({ reflect: true }) label = \"\";\n\n /**Feedback text for error state when validated */\n @property({ type: String, reflect: true }) invalidFeedback = \"Please tick at least one box if you want to proceed\";\n\n /** Allows invalidFeedback, invalid styles to be visible. When SgdsCheckboxGroup is used, it overrides the value of hasFeedback on SgdsCheckbox with its own value. */\n @property({ type: Boolean, reflect: true }) hasFeedback = false;\n\n /** The checkbox group's hint text */\n @property({ reflect: true }) hintText = \"\";\n\n /** Makes the checkbox group a required field. Only available for when multiselect is true */\n @property({ type: Boolean, reflect: true }) required = false;\n\n /** Disables native and sgds validation for the checkbox group. */\n @property({ type: Boolean, reflect: true }) noValidate = false;\n\n /** Consolidates the values of its child checked checkboxes into a single string with semi-colon delimiter. Only available when required is true */\n @property({ reflect: true }) value = \"\";\n\n @state() private _isTouched = false;\n\n /** @internal */\n @defaultValue()\n defaultValue = \"\";\n\n @state()\n private _blurredCheckboxes = new Set<SgdsCheckbox>();\n\n @state()\n private formEvent: FormEvent;\n\n connectedCallback() {\n super.connectedCallback();\n this.addEventListener(\"sgds-check\", (e: CustomEvent) => {\n const { value } = e.detail;\n !this.value.includes(value) && this._addValue(value);\n });\n this.addEventListener(\"sgds-uncheck\", (e: CustomEvent) => {\n const { value } = e.detail;\n this._removeValue(value);\n });\n /** Blurring when all checkboxes are blurred */\n this.addEventListener(\"sgds-blur\", e => {\n const checkbox = e.target as SgdsCheckbox;\n this._blurredCheckboxes.add(checkbox);\n if (Array.from(this._blurredCheckboxes).length === this._checkboxes.length) {\n this._isTouched = true;\n this._blurredCheckboxes.clear();\n }\n });\n }\n firstUpdated(changedProperties: PropertyValueMap<this>) {\n super.firstUpdated(changedProperties);\n if (this.value) {\n this._updateInputValue();\n }\n\n if (this.invalid) {\n this._updateInvalid();\n }\n }\n\n protected _renderHintText() {\n const hintTextTemplate = html` <div class=\"form-text\" id=\"${this._controlId}Help\">${this.hintText}</div> `;\n return this.hintText && hintTextTemplate;\n }\n\n @queryAssignedElements()\n private _checkboxes!: Array<SgdsCheckbox>;\n\n private _addValue(newValue: string) {\n const valueArray = this.value ? this.value.split(\";\") : [];\n valueArray.push(newValue);\n this.value = valueArray.join(\";\");\n }\n private _removeValue(oldValue: string) {\n const valueArray = this.value ? this.value.split(\";\") : [];\n const newValueArray = valueArray.filter(v => v !== oldValue);\n this.value = newValueArray.join(\";\");\n }\n\n private _sanitizeSlot() {\n const checkboxes = this._checkboxes;\n checkboxes.forEach(checkbox => {\n checkbox.checked = checkbox.defaultChecked = this.value.includes(checkbox.value);\n\n checkbox.hasFeedback = this.hasFeedback ? \"style\" : null;\n if (checkbox.required) {\n console.error(\"Checkboxes in a group cannot have required or hasFeedback prop set to true\");\n checkbox.remove();\n }\n });\n this._disabledChildCheckboxes();\n }\n\n private _disabledChildCheckboxes() {\n if (this.disabled) {\n const checkboxes = this._checkboxes;\n checkboxes.forEach(checkbox => (checkbox.disabled = this.disabled));\n }\n }\n\n @watch(\"value\", { waitUntilFirstUpdate: true })\n _handleValueChange() {\n if (this.formEvent === \"reset\" && this.value === this.defaultValue) {\n this.formEvent = null;\n return;\n }\n\n this.emit(\"sgds-change\");\n const checkboxes = this._checkboxes;\n checkboxes.forEach(checkbox => {\n checkbox.checked = this.value.includes(checkbox.value);\n });\n this._updateInputValue();\n this._updateInvalid();\n }\n\n @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n _handleIsTouched() {\n if (this._mixinShouldSkipSgdsValidation()) return;\n if (this._isTouched) {\n this.invalid = !this.input.checkValidity();\n this._updateInvalid();\n }\n }\n @watch(\"invalid\", { waitUntilFirstUpdate: true })\n _updateInvalid() {\n const checkboxes = this._checkboxes;\n checkboxes.forEach(ch => (ch.invalid = this.invalid));\n }\n\n /**\n * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n */\n public reportValidity(): boolean {\n return this._mixinReportValidity();\n }\n /**\n * Checks for validity without any native error popup message\n */\n public checkValidity(): boolean {\n return this._mixinCheckValidity();\n }\n\n /**\n * Returns the ValidityState object\n */\n public get validity(): ValidityState {\n return this._mixinGetValidity();\n }\n /**\n * Returns the validation message based on the ValidityState\n */\n public get validationMessage() {\n return this._mixinGetValidationMessage();\n }\n /**\n * checkbox requries a custom _mixinResetFormControl as the update of input value\n * requires to fire a reset event manually\n * */\n private _mixinResetFormControl() {\n this.value = this.input.value = this.defaultValue;\n this._updateInputValue(\"reset\");\n this._mixinResetValidity(this.input);\n }\n /**\n * when input value is set programatically, need to manually dispatch a change event\n * In order to prevent race conditions and ensure sequence of events, set input's value here instead of binding to value prop of input\n */\n private async _updateInputValue(eventName: FormEvent = \"change\") {\n this.input.value = this.value;\n\n this.input.dispatchEvent(new InputEvent(eventName));\n this.formEvent = eventName;\n }\n\n render() {\n return html`\n <fieldset>\n <div class=\"label-hint-container\">\n <label class=\"form-label\">${this.label}</label>\n ${this._renderHintText()}\n </div>\n <div class=\"checkbox-container\">\n <slot @slotchange=${this._sanitizeSlot}></slot>\n </div>\n <input\n type=\"text\"\n class=\"checkbox-group-validation-input\"\n ?required=${this.required}\n tabindex=\"-1\"\n @change=${(e: Event) => {\n super._mixinHandleChange(e);\n }}\n .value=${live(this.value)}\n aria-describedby=${this.invalid && this.hasFeedback ? \"checkbox-group-feedback\" : `${this._controlId}Help`}\n />\n ${this.invalid && this.hasFeedback\n ? html`\n <div class=\"invalid-feedback-container\">\n <slot name=\"invalidIcon\">\n <sgds-icon name=\"exclamation-circle-fill\" size=\"md\"></sgds-icon>\n </slot>\n <div id=\"checkbox-group-feedback\" class=\"invalid-feedback\">\n ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n </div>\n </div>\n `\n : nothing}\n </fieldset>\n `;\n }\n}\n\nexport default SgdsCheckboxGroup;\n\ntype FormEvent = \"reset\" | \"change\" | null;\n"],"names":["checkboxGroupStyles"],"mappings":"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"}
|