@govtechsg/sgds-web-component 2.1.1 → 2.1.2
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/form-check-element.js +6 -4
- package/base/form-check-element.js.map +1 -1
- package/components/ActionCard/index.umd.js +9 -7
- package/components/ActionCard/index.umd.js.map +1 -1
- package/components/Checkbox/checkbox.js +1 -1
- package/components/Checkbox/index.umd.js +8 -6
- package/components/Checkbox/index.umd.js.map +1 -1
- package/components/ComboBox/index.umd.js +2 -2
- package/components/ComboBox/index.umd.js.map +1 -1
- package/components/Datepicker/index.umd.js +2 -2
- package/components/Datepicker/index.umd.js.map +1 -1
- package/components/Input/index.umd.js +2 -2
- package/components/Input/index.umd.js.map +1 -1
- package/components/Input/sgds-input.js +1 -1
- package/components/Input/sgds-input.js.map +1 -1
- package/components/QuantityToggle/index.umd.js +2 -2
- package/components/QuantityToggle/index.umd.js.map +1 -1
- package/components/Radio/index.umd.js +3 -3
- package/components/Radio/index.umd.js.map +1 -1
- package/components/Radio/radio.js +1 -1
- package/components/Radio/sgds-radio-group.js +1 -1
- package/components/Radio/sgds-radio-group.js.map +1 -1
- package/components/Textarea/index.umd.js +2 -2
- package/components/Textarea/index.umd.js.map +1 -1
- package/components/Textarea/sgds-textarea.js +1 -1
- package/components/Textarea/sgds-textarea.js.map +1 -1
- package/components/index.umd.js +12 -10
- package/components/index.umd.js.map +1 -1
- package/index.umd.js +12 -10
- package/index.umd.js.map +1 -1
- package/package.json +1 -1
- package/react/base/form-check-element.cjs.js +6 -4
- package/react/base/form-check-element.cjs.js.map +1 -1
- package/react/base/form-check-element.js +6 -4
- package/react/base/form-check-element.js.map +1 -1
- package/react/components/Checkbox/checkbox.cjs.js +1 -1
- package/react/components/Checkbox/checkbox.js +1 -1
- package/react/components/Input/sgds-input.cjs.js +1 -1
- package/react/components/Input/sgds-input.cjs.js.map +1 -1
- package/react/components/Input/sgds-input.js +1 -1
- package/react/components/Input/sgds-input.js.map +1 -1
- package/react/components/Radio/radio.cjs.js +1 -1
- package/react/components/Radio/radio.js +1 -1
- package/react/components/Radio/sgds-radio-group.cjs.js +1 -1
- package/react/components/Radio/sgds-radio-group.cjs.js.map +1 -1
- package/react/components/Radio/sgds-radio-group.js +1 -1
- package/react/components/Radio/sgds-radio-group.js.map +1 -1
- package/react/components/Textarea/sgds-textarea.cjs.js +1 -1
- package/react/components/Textarea/sgds-textarea.cjs.js.map +1 -1
- package/react/components/Textarea/sgds-textarea.js +1 -1
- package/react/components/Textarea/sgds-textarea.js.map +1 -1
- package/react/styles/feedback.cjs.js +1 -1
- package/react/styles/feedback.js +1 -1
- package/styles/feedback.js +1 -1
package/index.umd.js
CHANGED
|
@@ -4864,12 +4864,14 @@
|
|
|
4864
4864
|
@keydown=${this._handleKeyDown}
|
|
4865
4865
|
@invalid=${(e) => this._handleInvalid(e)}
|
|
4866
4866
|
/>
|
|
4867
|
-
<
|
|
4868
|
-
|
|
4869
|
-
|
|
4870
|
-
|
|
4867
|
+
<div class="form-check-label-container">
|
|
4868
|
+
<label for="${this._inputId}" aria-label=${ifDefined(this.ariaLabel)} class="form-check-label"
|
|
4869
|
+
><slot></slot
|
|
4870
|
+
></label>
|
|
4871
|
+
${this.hasFeedback && this.invalid
|
|
4871
4872
|
? html$1 `<div id="${this._inputId}-invalid" class="invalid-feedback">${this.invalidFeedback}</div>`
|
|
4872
4873
|
: nothing}
|
|
4874
|
+
</div>
|
|
4873
4875
|
</div>
|
|
4874
4876
|
`;
|
|
4875
4877
|
}
|
|
@@ -4920,9 +4922,9 @@
|
|
|
4920
4922
|
watch("checked", { waitUntilFirstUpdate: true })
|
|
4921
4923
|
], FormCheckElement.prototype, "handleStateChange", null);
|
|
4922
4924
|
|
|
4923
|
-
var css_248z$M = css`:host([checked]) .form-check{--sgds-form-border-color:var(--sgds-form-bg);--sgds-form-bg:var(--sgds-info-filled)}:host(:focus-visible){outline:none}input{font-family:inherit;font-size:inherit;line-height:inherit;margin:0}.form-check{display:
|
|
4925
|
+
var css_248z$M = css`:host([checked]) .form-check{--sgds-form-border-color:var(--sgds-form-bg);--sgds-form-bg:var(--sgds-info-filled)}:host(:focus-visible){outline:none}input{font-family:inherit;font-size:inherit;line-height:inherit;margin:0}.form-check{display:flex;margin-bottom:var(--sgds-spacer-2);min-height:2rem}.form-check .form-check-input{margin-right:var(--sgds-form-input-margin-right)}.form-check-input{appearance:none;background-color:var(--sgds-form-bg);background-image:var(--sgds-radio-bg-image);background-position:50%;background-repeat:no-repeat;background-size:contain;border:var(--sgds-form-border-width) solid var(--sgds-border-color);flex-shrink:0;height:1.125em;margin-top:.4375em;vertical-align:top;width:1.125em}.form-check-input[type=checkbox]{border-radius:.25em}.form-check-input:focus{border-color:var(--sgds-form-border-color);box-shadow:var(--sgds-form-focus-box-shadow);outline:0}.form-check-input:checked,.form-check-input[checked]{background-color:var(--sgds-form-bg);border-color:var(--sgds-form-border-color)}.form-check-input:disabled{border-color:var(--sgds-border-color);cursor:not-allowed;filter:none;opacity:var(--sgds-disabled-opacity)}.form-check-input.is-invalid{border-color:var(--sgds-form-invalid-color)}.form-check-input.is-invalid:checked{background-color:var(--sgds-form-invalid-color)}.form-check-input.is-invalid:focus{box-shadow:var(--sgds-form-focus-invalid-box-shadow)}.form-check-input.is-invalid~.form-check-label-container>.form-check-label{color:var(--sgds-form-invalid-color)}.form-check-inline{display:inline-flex;margin-bottom:0;margin-right:var(--sgds-form-inline-margin-right);vertical-align:text-top}:host([last-of-type]) .form-check{margin-bottom:0}.form-check-input:checked[type=checkbox]{--sgds-radio-bg-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E")}`;
|
|
4924
4926
|
|
|
4925
|
-
var css_248z$L = css`.invalid-feedback{color:var(--sgds-form-invalid-color);
|
|
4927
|
+
var css_248z$L = css`.invalid-feedback{color:var(--sgds-form-invalid-color);font-size:var(--sgds-form-feedback-font-size);width:100%}`;
|
|
4926
4928
|
|
|
4927
4929
|
var css_248z$K = css`.form-label{color:var(--sgds-form-label-color);font-weight:var(--sgds-form-label-font-weight);margin-bottom:0}.form-label.required:after{color:var(--sgds-danger);content:"*"}.form-check-label{color:var(--sgds-form-label-color)}.form-check-input:disabled~.form-check-label,.form-check-input[disabled]~.form-check-label{cursor:not-allowed;opacity:var(--sgds-disabled-opacity)}`;
|
|
4928
4930
|
|
|
@@ -4943,7 +4945,7 @@
|
|
|
4943
4945
|
}
|
|
4944
4946
|
SgdsCheckbox.styles = [...FormCheckElement.styles, css_248z$L, css_248z$K, css_248z$M];
|
|
4945
4947
|
|
|
4946
|
-
var css_248z$J = css`:host([checked]){--sgds-form-bg:var(--sgds-info-filled);--sgds-form-border-color:var(--sgds-form-bg)}:host(:focus-visible){outline:none}input{font-family:inherit;font-size:inherit;line-height:inherit;margin:0}.form-check{display:
|
|
4948
|
+
var css_248z$J = css`:host([checked]){--sgds-form-bg:var(--sgds-info-filled);--sgds-form-border-color:var(--sgds-form-bg)}:host(:focus-visible){outline:none}input{font-family:inherit;font-size:inherit;line-height:inherit;margin:0}.form-check{display:flex;margin-bottom:var(--sgds-spacer-2);min-height:2rem}.form-check .form-check-input{margin-right:var(--sgds-form-input-margin-right)}.form-check-input{appearance:none;background-color:var(--sgds-form-bg);background-image:var(--sgds-radio-bg-image);background-position:50%;background-repeat:no-repeat;background-size:contain;border:var(--sgds-form-border-width) solid var(--sgds-border-color);flex-shrink:0;height:1.125em;margin-top:.4375em;vertical-align:top;width:1.125em}.form-check-input[type=radio]{border-radius:50%}.form-check-input:focus{border-color:var(--sgds-form-border-color);box-shadow:var(--sgds-form-focus-box-shadow);outline:0}.form-check-input:checked,.form-check-input[checked]{background-color:var(--sgds-form-bg);border-color:var(--sgds-form-border-color)}.form-check-input:checked[type=radio],.form-check-input[checked][type=radio]{--sgds-radio-bg-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='2' fill='%23fff'/%3E%3C/svg%3E")}.form-check-input:disabled{border-color:var(--sgds-form-border-color);cursor:not-allowed;filter:none;opacity:var(--sgds-disabled-opacity)}.form-check-input.is-invalid,.form-check-input:invalid{border-color:var(--sgds-form-invalid-color)}.form-check-input.is-invalid:checked,.form-check-input:invalid:checked{background-color:var(--sgds-form-invalid-color)}.form-check-input.is-invalid:focus,.form-check-input:invalid:focus{box-shadow:var(--sgds-form-focus-invalid-box-shadow)}.form-check-input.is-invalid~.form-check-label,.form-check-input:invalid~.form-check-label{color:var(--sgds-form-invalid-color)}.form-check-inline{display:inline-block;margin-bottom:0;margin-right:var(--sgds-form-inline-margin-right)}:host([last-of-type]) .form-check{margin-bottom:0}`;
|
|
4947
4949
|
|
|
4948
4950
|
/**
|
|
4949
4951
|
* @summary Radio allows the user to select one option from a set while seeing all available options.
|
|
@@ -9642,7 +9644,7 @@
|
|
|
9642
9644
|
${this._renderFeedback()} `;
|
|
9643
9645
|
}
|
|
9644
9646
|
_renderFeedback() {
|
|
9645
|
-
return this.hasFeedback
|
|
9647
|
+
return this.hasFeedback && this.invalid
|
|
9646
9648
|
? html `<div id="${this.inputId}-invalid" class="invalid-feedback">${this.invalidFeedback}</div>`
|
|
9647
9649
|
: "";
|
|
9648
9650
|
}
|
|
@@ -23261,7 +23263,7 @@
|
|
|
23261
23263
|
tabindex="-1"
|
|
23262
23264
|
@invalid=${(e) => this._handleInvalid(e)}
|
|
23263
23265
|
/>
|
|
23264
|
-
${this.hasFeedback ? html$1 `<div class="invalid-feedback">${this.invalidFeedback}</div>` : ""}
|
|
23266
|
+
${this.hasFeedback && this.invalid ? html$1 `<div class="invalid-feedback">${this.invalidFeedback}</div>` : ""}
|
|
23265
23267
|
</fieldset>
|
|
23266
23268
|
`;
|
|
23267
23269
|
}
|
|
@@ -24595,7 +24597,7 @@
|
|
|
24595
24597
|
>
|
|
24596
24598
|
</textarea>
|
|
24597
24599
|
|
|
24598
|
-
${this.hasFeedback
|
|
24600
|
+
${this.hasFeedback && this.invalid
|
|
24599
24601
|
? html `<div id="${this.textareaId}-invalid" class="invalid-feedback">${this.invalidFeedback}</div>`
|
|
24600
24602
|
: ""}
|
|
24601
24603
|
`;
|