@govtechsg/sgds-web-component 3.30.1-rc.1 → 3.30.1-rc.10

package/components/Checkbox/sgds-checkbox.d.ts

@@ -22,7 +22,7 @@ export declare class SgdsCheckbox extends SgdsCheckbox_base implements SgdsFormC
     static dependencies: {
         "sgds-icon": typeof SgdsIcon;
     };
-    /** Value of the HTML form control. Primarily used to differentiate a list of related checkboxes that have the same name. */
+    /** Value submitted in FormData when the checkbox is checked. Defaults to `"on"` when not set, matching native checkbox behaviour. When unchecked, the key is absent from FormData. */
     value: string;
     /** Draws the checkbox in a checked state. */
     checked: boolean;
@@ -52,6 +52,12 @@ export declare class SgdsCheckbox extends SgdsCheckbox_base implements SgdsFormC
     private _handleBlur;
     private _handleFocus;
     private _handleInvalid;
+    /** Override mixin to match native checkbox: send value only when checked, default to "on". */
+    private _mixinSetFormValue;
+    /** @internal */
+    _handleCheckedChange(): void;
+    /** @internal */
+    _handleValueChange(): void;
     /** @internal */
     _handleDisabledChange(): void;
     _handleIsTouched(): void;

package/components/Checkbox/sgds-checkbox.js

@@ -92,6 +92,18 @@ var SgdsCheckbox = class extends SgdsFormValidatorMixin(FormControlElement) {
 		e.preventDefault();
 		this.invalid = true;
 	}
+	/** Override mixin to match native checkbox: send value only when checked, default to "on". */
+	_mixinSetFormValue() {
+		super._mixinSetFormValue(this.checked ? this.value ?? "on" : null);
+	}
+	/** @internal */
+	_handleCheckedChange() {
+		this._mixinSetFormValue();
+	}
+	/** @internal */
+	_handleValueChange() {
+		this._mixinSetFormValue();
+	}
 	/** @internal */
 	_handleDisabledChange() {
 		this.setInvalid(false);
@@ -218,6 +230,8 @@ __decorate([property({
 	reflect: true
 })], SgdsCheckbox.prototype, "invalidFeedback", void 0);
 __decorate([state()], SgdsCheckbox.prototype, "_isTouched", void 0);
+__decorate([watch("checked", { waitUntilFirstUpdate: true })], SgdsCheckbox.prototype, "_handleCheckedChange", null);
+__decorate([watch("value", { waitUntilFirstUpdate: true })], SgdsCheckbox.prototype, "_handleValueChange", null);
 __decorate([watch("disabled", { waitUntilFirstUpdate: true })], SgdsCheckbox.prototype, "_handleDisabledChange", null);
 __decorate([watch("_isTouched", { waitUntilFirstUpdate: true })], SgdsCheckbox.prototype, "_handleIsTouched", null);
 //#endregion

package/components/Checkbox/sgds-checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-checkbox.js","names":["formCheckStyles","checkboxStyle"],"sources":["../../../src/components/Checkbox/sgds-checkbox.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { live } from \"lit/directives/live.js\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport { SgdsFormControl } from \"../../utils/formSubmitController\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport checkboxStyle from \"./checkbox.css\";\nimport formCheckStyles from \"../../styles/form-check.css\";\n\n/**\n * @summary Checkbox component is used when you require users to select multiple items from a list.\n *\n * @slot default - The label of checkbox.\n *\n * @event sgds-change - Emitted when the checked state changes.\n * @event sgds-blur - Emitted when input is not in focus.\n * @event sgds-focus - Emitted when input is in focus.\n * @event sgds-check - Emitted when checkbox is checked\n * @event sgds-uncheck - Emitted when checkbox is unchecked\n * @event sgds-invalid - Emitted when the checkbox's invalid state is set to true.\n * @event sgds-valid - Emitted when the checkbox's invalid state is set to false.\n */\nexport class SgdsCheckbox extends SgdsFormValidatorMixin(FormControlElement) implements SgdsFormControl {\n  static styles = [...FormControlElement.styles, formCheckStyles, checkboxStyle];\n\n  private readonly hasSlotController = new HasSlotController(this, \"[default]\");\n\n  /**@internal */\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon\n  };\n\n  /** Value of the HTML form control. Primarily used to differentiate a list of related checkboxes that have the same name. */\n  @property({ type: String, reflect: true }) value: string;\n\n  /** Draws the checkbox in a checked state. */\n  @property({ type: Boolean, reflect: true }) checked = false;\n\n  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n  @property({ type: String, reflect: true }) hasFeedback: \"style\" | \"text\" | \"both\";\n\n  /** @internal Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */\n  @defaultValue(\"checked\")\n  defaultChecked = false;\n\n  /** Marks the checkbox input as indeterminate , with indeterminate logo  */\n  @property({ type: Boolean, reflect: true }) indeterminate = false;\n\n  /** Makes the checkbox a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /** Disables native and sgds validation for the checkbox. */\n  @property({ type: Boolean, reflect: true }) noValidate = false;\n\n  /** Accessible label forwarded to the internal input's aria-label. Use when no visible label slot is used. */\n  @property({ type: String }) ariaLabel = \"\";\n\n  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback = \"\";\n\n  @state() private _isTouched = false;\n\n  /** Simulates a click on the checkbox. */\n  public click() {\n    this.input.click();\n  }\n  /** Sets focus on the checkbox. */\n  public focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  /** Removes focus from the checkbox. */\n  public blur() {\n    this.input.blur();\n  }\n\n  private _handleChange(e: Event) {\n    if (this.indeterminate) {\n      this.indeterminate = !this.indeterminate;\n    }\n\n    this.checked = !this.checked;\n    super._mixinHandleChange(e);\n    this.emit(\"sgds-change\", { detail: { checked: this.checked, value: this.value } });\n\n    this.checked\n      ? this.emit(\"sgds-check\", { detail: { value: this.value } })\n      : this.emit(\"sgds-uncheck\", { detail: { value: this.value } });\n  }\n\n  private _handleKeyDown(event: KeyboardEvent) {\n    const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;\n    if (event.key === \"Enter\" && !hasModifier) {\n      this.click();\n    }\n  }\n\n  private _handleBlur() {\n    this._isTouched = true;\n    this.emit(\"sgds-blur\");\n  }\n\n  private _handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  private _handleInvalid(e: Event) {\n    e.preventDefault();\n    this.invalid = true;\n  }\n\n  /** @internal */\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabledChange() {\n    // Disabled form controls are always valid, so we need to recheck validity when the state changes\n    this.setInvalid(false);\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    }\n  }\n\n  private _mixinResetFormControl() {\n    this._isTouched = false;\n    this.checked = this.input.checked = this.defaultChecked;\n    this.input.dispatchEvent(new InputEvent(\"reset\"));\n    this._mixinResetValidity(this.input);\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() {\n    return this._mixinGetValidationMessage();\n  }\n\n  firstUpdated(_changedProperties) {\n    super.firstUpdated(_changedProperties);\n    this.checked && this.emit(\"sgds-check\", { detail: { value: this.value } });\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(\"click\", this._handleHostClick);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener(\"click\", this._handleHostClick);\n  }\n\n  // Delegates host-targeted clicks to the internal input so that clicking anywhere\n  // on the sgds-checkbox element (e.g. expanded padding inside sgds-dropdown-item) toggles\n  // the checkbox. Clicks already originating from inside the shadow DOM are left alone.\n  private _handleHostClick = (e: Event) => {\n    if (e.composedPath()[0] === this) {\n      e.stopPropagation();\n      this.input.click();\n    }\n  };\n  render() {\n    const displayFeedbackStyle = this.hasFeedback === \"both\" || this.hasFeedback === \"style\";\n    const displayFeedbackText = this.hasFeedback === \"both\" || this.hasFeedback === \"text\";\n    const hasDefaultSlot = this.hasSlotController.test(\"[default]\");\n\n    return html`\n      <div class=\"form-check\">\n        <input\n          class=${classMap({\n            \"form-check-input\": true,\n            \"is-invalid\": displayFeedbackStyle && this.invalid\n          })}\n          type=\"checkbox\"\n          id=${this._controlId}\n          aria-invalid=${this.invalid ? \"true\" : \"false\"}\n          aria-label=${ifDefined(this.ariaLabel || undefined)}\n          name=${ifDefined(this.name)}\n          ?indeterminate=${this.indeterminate}\n          ?required=${this.required}\n          aria-disabled=${this.disabled ? \"true\" : \"false\"}\n          aria-checked=${this.checked ? \"true\" : \"false\"}\n          @change=${(e: Event) => this._handleChange(e)}\n          @keydown=${this._handleKeyDown}\n          @invalid=${(e: Event) => this._handleInvalid(e)}\n          ?checked=${live(this.checked)}\n          .disabled=${this.disabled}\n          .required=${this.required}\n          @blur=${this._handleBlur}\n          @focus=${this._handleFocus}\n        />\n        ${hasDefaultSlot\n          ? html`<label for=\"${this._controlId}\" class=\"form-check-label\" id=\"${this._labelId}\"><slot></slot></label>`\n          : nothing}\n      </div>\n      ${displayFeedbackText && this.invalid\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-feedback\" tabindex=\"0\" class=\"invalid-feedback\">\n                ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n              </div>\n            </div>\n          `\n        : nothing}\n    `;\n  }\n}\n\nexport default SgdsCheckbox;\n"],"mappings":"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"}
+{"version":3,"file":"sgds-checkbox.js","names":["formCheckStyles","checkboxStyle"],"sources":["../../../src/components/Checkbox/sgds-checkbox.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { live } from \"lit/directives/live.js\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport { SgdsFormControl } from \"../../utils/formSubmitController\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport checkboxStyle from \"./checkbox.css\";\nimport formCheckStyles from \"../../styles/form-check.css\";\n\n/**\n * @summary Checkbox component is used when you require users to select multiple items from a list.\n *\n * @slot default - The label of checkbox.\n *\n * @event sgds-change - Emitted when the checked state changes.\n * @event sgds-blur - Emitted when input is not in focus.\n * @event sgds-focus - Emitted when input is in focus.\n * @event sgds-check - Emitted when checkbox is checked\n * @event sgds-uncheck - Emitted when checkbox is unchecked\n * @event sgds-invalid - Emitted when the checkbox's invalid state is set to true.\n * @event sgds-valid - Emitted when the checkbox's invalid state is set to false.\n */\nexport class SgdsCheckbox extends SgdsFormValidatorMixin(FormControlElement) implements SgdsFormControl {\n  static styles = [...FormControlElement.styles, formCheckStyles, checkboxStyle];\n\n  private readonly hasSlotController = new HasSlotController(this, \"[default]\");\n\n  /**@internal */\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon\n  };\n\n  /** Value submitted in FormData when the checkbox is checked. Defaults to `\"on\"` when not set, matching native checkbox behaviour. When unchecked, the key is absent from FormData. */\n  @property({ type: String, reflect: true }) value: string;\n\n  /** Draws the checkbox in a checked state. */\n  @property({ type: Boolean, reflect: true }) checked = false;\n\n  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n  @property({ type: String, reflect: true }) hasFeedback: \"style\" | \"text\" | \"both\";\n\n  /** @internal Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */\n  @defaultValue(\"checked\")\n  defaultChecked = false;\n\n  /** Marks the checkbox input as indeterminate , with indeterminate logo  */\n  @property({ type: Boolean, reflect: true }) indeterminate = false;\n\n  /** Makes the checkbox a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /** Disables native and sgds validation for the checkbox. */\n  @property({ type: Boolean, reflect: true }) noValidate = false;\n\n  /** Accessible label forwarded to the internal input's aria-label. Use when no visible label slot is used. */\n  @property({ type: String }) ariaLabel = \"\";\n\n  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback = \"\";\n\n  @state() private _isTouched = false;\n\n  /** Simulates a click on the checkbox. */\n  public click() {\n    this.input.click();\n  }\n  /** Sets focus on the checkbox. */\n  public focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  /** Removes focus from the checkbox. */\n  public blur() {\n    this.input.blur();\n  }\n\n  private _handleChange(e: Event) {\n    if (this.indeterminate) {\n      this.indeterminate = !this.indeterminate;\n    }\n\n    this.checked = !this.checked;\n    super._mixinHandleChange(e);\n    this.emit(\"sgds-change\", { detail: { checked: this.checked, value: this.value } });\n\n    this.checked\n      ? this.emit(\"sgds-check\", { detail: { value: this.value } })\n      : this.emit(\"sgds-uncheck\", { detail: { value: this.value } });\n  }\n\n  private _handleKeyDown(event: KeyboardEvent) {\n    const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;\n    if (event.key === \"Enter\" && !hasModifier) {\n      this.click();\n    }\n  }\n\n  private _handleBlur() {\n    this._isTouched = true;\n    this.emit(\"sgds-blur\");\n  }\n\n  private _handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  private _handleInvalid(e: Event) {\n    e.preventDefault();\n    this.invalid = true;\n  }\n\n  /** Override mixin to match native checkbox: send value only when checked, default to \"on\". */\n  private _mixinSetFormValue() {\n    super._mixinSetFormValue(this.checked ? this.value ?? \"on\" : null);\n  }\n\n  /** @internal */\n  @watch(\"checked\", { waitUntilFirstUpdate: true })\n  _handleCheckedChange() {\n    this._mixinSetFormValue();\n  }\n\n  /** @internal */\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  _handleValueChange() {\n    this._mixinSetFormValue();\n  }\n\n  /** @internal */\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabledChange() {\n    // Disabled form controls are always valid, so we need to recheck validity when the state changes\n    this.setInvalid(false);\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    }\n  }\n\n  private _mixinResetFormControl() {\n    this._isTouched = false;\n    this.checked = this.input.checked = this.defaultChecked;\n    this.input.dispatchEvent(new InputEvent(\"reset\"));\n    this._mixinResetValidity(this.input);\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() {\n    return this._mixinGetValidationMessage();\n  }\n\n  firstUpdated(_changedProperties) {\n    super.firstUpdated(_changedProperties);\n    this.checked && this.emit(\"sgds-check\", { detail: { value: this.value } });\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(\"click\", this._handleHostClick);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener(\"click\", this._handleHostClick);\n  }\n\n  // Delegates host-targeted clicks to the internal input so that clicking anywhere\n  // on the sgds-checkbox element (e.g. expanded padding inside sgds-dropdown-item) toggles\n  // the checkbox. Clicks already originating from inside the shadow DOM are left alone.\n  private _handleHostClick = (e: Event) => {\n    if (e.composedPath()[0] === this) {\n      e.stopPropagation();\n      this.input.click();\n    }\n  };\n  render() {\n    const displayFeedbackStyle = this.hasFeedback === \"both\" || this.hasFeedback === \"style\";\n    const displayFeedbackText = this.hasFeedback === \"both\" || this.hasFeedback === \"text\";\n    const hasDefaultSlot = this.hasSlotController.test(\"[default]\");\n\n    return html`\n      <div class=\"form-check\">\n        <input\n          class=${classMap({\n            \"form-check-input\": true,\n            \"is-invalid\": displayFeedbackStyle && this.invalid\n          })}\n          type=\"checkbox\"\n          id=${this._controlId}\n          aria-invalid=${this.invalid ? \"true\" : \"false\"}\n          aria-label=${ifDefined(this.ariaLabel || undefined)}\n          name=${ifDefined(this.name)}\n          ?indeterminate=${this.indeterminate}\n          ?required=${this.required}\n          aria-disabled=${this.disabled ? \"true\" : \"false\"}\n          aria-checked=${this.checked ? \"true\" : \"false\"}\n          @change=${(e: Event) => this._handleChange(e)}\n          @keydown=${this._handleKeyDown}\n          @invalid=${(e: Event) => this._handleInvalid(e)}\n          ?checked=${live(this.checked)}\n          .disabled=${this.disabled}\n          .required=${this.required}\n          @blur=${this._handleBlur}\n          @focus=${this._handleFocus}\n        />\n        ${hasDefaultSlot\n          ? html`<label for=\"${this._controlId}\" class=\"form-check-label\" id=\"${this._labelId}\"><slot></slot></label>`\n          : nothing}\n      </div>\n      ${displayFeedbackText && this.invalid\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-feedback\" tabindex=\"0\" class=\"invalid-feedback\">\n                ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n              </div>\n            </div>\n          `\n        : nothing}\n    `;\n  }\n}\n\nexport default SgdsCheckbox;\n"],"mappings":"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"}