@govtechsg/sgds-web-component 3.0.0-rc.1 → 3.0.0-rc.2

package/react/components/Checkbox/sgds-checkbox-group.cjs.js

@@ -12,10 +12,15 @@ var formLabel = require('../../styles/form-label.cjs.js');
 var checkboxGroup = require('./checkbox-group.cjs.js');
 var formHint = require('../../styles/form-hint.cjs.js');
 
+/**
+ * @summary CheckboxGroup is the container that group multiple checkboxes under a single question field.
+ * It handles the display of validation feedback of its checkboxes children.
+ *
+ * @slot default - Pass in `sgds-checkbox` into the default slot
+ */
 class SgdsCheckboxGroup extends sgdsElement["default"] {
     constructor() {
         super();
-        /**@internal */
         this.hasInvalidCheckbox = false;
         /** The checkbox group's label  */
         this.label = "";
@@ -27,6 +32,7 @@ class SgdsCheckboxGroup extends sgdsElement["default"] {
         this.hintText = "";
         this.addEventListener("sgds-validity-change", (e) => {
             this.hasInvalidCheckbox = e.detail.invalid;
+            this.validationMessage = e.detail.validationMessage;
         });
     }
     _checkInvalidState() {
@@ -54,7 +60,7 @@ class SgdsCheckboxGroup extends sgdsElement["default"] {
           ${this._renderHintText()}
         </div>
         <div class="checkbox-container">
-          <slot name="checkbox"></slot>
+          <slot></slot>
         </div>
         ${this.hasInvalidCheckbox && this.hasFeedback
             ? lit.html `
@@ -65,7 +71,9 @@ class SgdsCheckboxGroup extends sgdsElement["default"] {
                     fill="#B90000"
                   />
                 </svg>
-                <div id="checkbox-feedback" tabindex="0" class="invalid-feedback">${this.invalidFeedback}</div>
+                <div id="checkbox-feedback" tabindex="0" class="invalid-feedback">
+                  ${this.invalidFeedback ? this.invalidFeedback : this.validationMessage}
+                </div>
               </div>
             `
             : lit.nothing}
@@ -75,11 +83,14 @@ class SgdsCheckboxGroup extends sgdsElement["default"] {
 }
 SgdsCheckboxGroup.styles = [...sgdsElement["default"].styles, feedback["default"], formLabel["default"], checkboxGroup["default"], formHint["default"]];
 tslib.__decorate([
-    decorators_js.queryAssignedElements({ slot: "checkbox", flatten: true })
+    decorators_js.queryAssignedElements({ flatten: true })
 ], SgdsCheckboxGroup.prototype, "checkboxes", void 0);
 tslib.__decorate([
     decorators_js.state()
 ], SgdsCheckboxGroup.prototype, "hasInvalidCheckbox", void 0);
+tslib.__decorate([
+    decorators_js.state()
+], SgdsCheckboxGroup.prototype, "validationMessage", void 0);
 tslib.__decorate([
     decorators_js.property({ reflect: true })
 ], SgdsCheckboxGroup.prototype, "label", void 0);

package/react/components/Checkbox/sgds-checkbox-group.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-checkbox-group.cjs.js","sources":["../../../../src/components/Checkbox/sgds-checkbox-group.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { queryAssignedElements, state, property } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport feedbackStyles from \"../../styles/feedback.css\";\nimport formLabelStyles from \"../../styles/form-label.css\";\nimport checkboxGroupStyles from \"./checkbox-group.css\";\nimport formHintStyles from \"../../styles/form-hint.css\";\nimport SgdsCheckbox from \"./sgds-checkbox\";\n\nexport class SgdsCheckboxGroup extends SgdsElement {\n  static styles = [...SgdsElement.styles, feedbackStyles, formLabelStyles, checkboxGroupStyles, formHintStyles];\n  /**@internal */\n  @queryAssignedElements({ slot: \"checkbox\", flatten: true }) private checkboxes!: NodeListOf<SgdsCheckbox>;\n  /**@internal */\n  @state() private hasInvalidCheckbox = false;\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 = \"\";\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  constructor() {\n    super();\n    this.addEventListener(\"sgds-validity-change\", (e: CustomEvent) => {\n      this.hasInvalidCheckbox = e.detail.invalid;\n    });\n  }\n\n  private _checkInvalidState() {\n    this.hasInvalidCheckbox = Array.from(this.checkboxes).some(checkbox => checkbox.invalid);\n  }\n  /** Overrides hasFeedback from individual SgdsCheckbox  */\n  private _forwardHasFeedback() {\n    Array.from(this.checkboxes).forEach(checkbox => (checkbox.hasFeedback = this.hasFeedback));\n  }\n\n  protected _renderHintText() {\n    const hintTextTemplate = html` <div class=\"form-text\">${this.hintText}</div> `;\n    return this.hintText && hintTextTemplate;\n  }\n\n  firstUpdated() {\n    this._forwardHasFeedback();\n  }\n  updated() {\n    this._checkInvalidState();\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 name=\"checkbox\"></slot>\n        </div>\n        ${this.hasInvalidCheckbox && this.hasFeedback\n          ? html`\n              <div class=\"invalid-feedback-container\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n                  <path\n                    d=\"M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10ZM10 6.25C9.49805 6.25 9.10584 6.68339 9.15578 7.18285L9.48461 10.4711C9.51109 10.7359 9.7339 10.9375 10 10.9375C10.2661 10.9375 10.4889 10.7359 10.5154 10.4711L10.8442 7.18285C10.8942 6.68339 10.5019 6.25 10 6.25ZM10.0014 11.875C9.48368 11.875 9.06394 12.2947 9.06394 12.8125C9.06394 13.3303 9.48368 13.75 10.0014 13.75C10.5192 13.75 10.9389 13.3303 10.9389 12.8125C10.9389 12.2947 10.5192 11.875 10.0014 11.875Z\"\n                    fill=\"#B90000\"\n                  />\n                </svg>\n                <div id=\"checkbox-feedback\" tabindex=\"0\" class=\"invalid-feedback\">${this.invalidFeedback}</div>\n              </div>\n            `\n          : nothing}\n      </fieldset>\n    `;\n  }\n}\n\nexport default SgdsCheckboxGroup;\n"],"names":["SgdsElement","html","nothing","feedbackStyles","formLabelStyles","checkboxGroupStyles","formHintStyles","__decorate","queryAssignedElements","state","property"],"mappings":"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"}
+{"version":3,"file":"sgds-checkbox-group.cjs.js","sources":["../../../../src/components/Checkbox/sgds-checkbox-group.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { queryAssignedElements, state, property } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport feedbackStyles from \"../../styles/feedback.css\";\nimport formLabelStyles from \"../../styles/form-label.css\";\nimport checkboxGroupStyles from \"./checkbox-group.css\";\nimport formHintStyles from \"../../styles/form-hint.css\";\nimport SgdsCheckbox from \"./sgds-checkbox\";\n/**\n * @summary CheckboxGroup is the container that group multiple checkboxes under a single question field.\n * It handles the display of validation feedback of its checkboxes children.\n *\n * @slot default - Pass in `sgds-checkbox` into the default slot\n */\nexport class SgdsCheckboxGroup extends SgdsElement {\n  static styles = [...SgdsElement.styles, feedbackStyles, formLabelStyles, checkboxGroupStyles, formHintStyles];\n  /**@internal */\n  @queryAssignedElements({ flatten: true }) private checkboxes!: NodeListOf<SgdsCheckbox>;\n  @state() private hasInvalidCheckbox = false;\n  @state() private validationMessage: string;\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 = \"\";\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  constructor() {\n    super();\n    this.addEventListener(\"sgds-validity-change\", (e: CustomEvent) => {\n      this.hasInvalidCheckbox = e.detail.invalid;\n      this.validationMessage = e.detail.validationMessage;\n    });\n  }\n\n  private _checkInvalidState() {\n    this.hasInvalidCheckbox = Array.from(this.checkboxes).some(checkbox => checkbox.invalid);\n  }\n  /** Overrides hasFeedback from individual SgdsCheckbox  */\n  private _forwardHasFeedback() {\n    Array.from(this.checkboxes).forEach(checkbox => (checkbox.hasFeedback = this.hasFeedback));\n  }\n\n  protected _renderHintText() {\n    const hintTextTemplate = html` <div class=\"form-text\">${this.hintText}</div> `;\n    return this.hintText && hintTextTemplate;\n  }\n\n  firstUpdated() {\n    this._forwardHasFeedback();\n  }\n  updated() {\n    this._checkInvalidState();\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></slot>\n        </div>\n        ${this.hasInvalidCheckbox && this.hasFeedback\n          ? html`\n              <div class=\"invalid-feedback-container\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n                  <path\n                    d=\"M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10ZM10 6.25C9.49805 6.25 9.10584 6.68339 9.15578 7.18285L9.48461 10.4711C9.51109 10.7359 9.7339 10.9375 10 10.9375C10.2661 10.9375 10.4889 10.7359 10.5154 10.4711L10.8442 7.18285C10.8942 6.68339 10.5019 6.25 10 6.25ZM10.0014 11.875C9.48368 11.875 9.06394 12.2947 9.06394 12.8125C9.06394 13.3303 9.48368 13.75 10.0014 13.75C10.5192 13.75 10.9389 13.3303 10.9389 12.8125C10.9389 12.2947 10.5192 11.875 10.0014 11.875Z\"\n                    fill=\"#B90000\"\n                  />\n                </svg>\n                <div id=\"checkbox-feedback\" tabindex=\"0\" class=\"invalid-feedback\">\n                  ${this.invalidFeedback ? this.invalidFeedback : this.validationMessage}\n                </div>\n              </div>\n            `\n          : nothing}\n      </fieldset>\n    `;\n  }\n}\n\nexport default SgdsCheckboxGroup;\n"],"names":["SgdsElement","html","nothing","feedbackStyles","formLabelStyles","checkboxGroupStyles","formHintStyles","__decorate","queryAssignedElements","state","property"],"mappings":"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"}

package/react/components/Checkbox/sgds-checkbox-group.js

@@ -8,10 +8,15 @@ import css_248z$1 from '../../styles/form-label.js';
 import css_248z$2 from './checkbox-group.js';
 import css_248z$3 from '../../styles/form-hint.js';
 
+/**
+ * @summary CheckboxGroup is the container that group multiple checkboxes under a single question field.
+ * It handles the display of validation feedback of its checkboxes children.
+ *
+ * @slot default - Pass in `sgds-checkbox` into the default slot
+ */
 class SgdsCheckboxGroup extends SgdsElement {
     constructor() {
         super();
-        /**@internal */
         this.hasInvalidCheckbox = false;
         /** The checkbox group's label  */
         this.label = "";
@@ -23,6 +28,7 @@ class SgdsCheckboxGroup extends SgdsElement {
         this.hintText = "";
         this.addEventListener("sgds-validity-change", (e) => {
             this.hasInvalidCheckbox = e.detail.invalid;
+            this.validationMessage = e.detail.validationMessage;
         });
     }
     _checkInvalidState() {
@@ -50,7 +56,7 @@ class SgdsCheckboxGroup extends SgdsElement {
           ${this._renderHintText()}
         </div>
         <div class="checkbox-container">
-          <slot name="checkbox"></slot>
+          <slot></slot>
         </div>
         ${this.hasInvalidCheckbox && this.hasFeedback
             ? html `
@@ -61,7 +67,9 @@ class SgdsCheckboxGroup extends SgdsElement {
                     fill="#B90000"
                   />
                 </svg>
-                <div id="checkbox-feedback" tabindex="0" class="invalid-feedback">${this.invalidFeedback}</div>
+                <div id="checkbox-feedback" tabindex="0" class="invalid-feedback">
+                  ${this.invalidFeedback ? this.invalidFeedback : this.validationMessage}
+                </div>
               </div>
             `
             : nothing}
@@ -71,11 +79,14 @@ class SgdsCheckboxGroup extends SgdsElement {
 }
 SgdsCheckboxGroup.styles = [...SgdsElement.styles, css_248z, css_248z$1, css_248z$2, css_248z$3];
 __decorate([
-    queryAssignedElements({ slot: "checkbox", flatten: true })
+    queryAssignedElements({ flatten: true })
 ], SgdsCheckboxGroup.prototype, "checkboxes", void 0);
 __decorate([
     state()
 ], SgdsCheckboxGroup.prototype, "hasInvalidCheckbox", void 0);
+__decorate([
+    state()
+], SgdsCheckboxGroup.prototype, "validationMessage", void 0);
 __decorate([
     property({ reflect: true })
 ], SgdsCheckboxGroup.prototype, "label", void 0);

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-checkbox-group.js","sources":["../../../../src/components/Checkbox/sgds-checkbox-group.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { queryAssignedElements, state, property } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport feedbackStyles from \"../../styles/feedback.css\";\nimport formLabelStyles from \"../../styles/form-label.css\";\nimport checkboxGroupStyles from \"./checkbox-group.css\";\nimport formHintStyles from \"../../styles/form-hint.css\";\nimport SgdsCheckbox from \"./sgds-checkbox\";\n\nexport class SgdsCheckboxGroup extends SgdsElement {\n  static styles = [...SgdsElement.styles, feedbackStyles, formLabelStyles, checkboxGroupStyles, formHintStyles];\n  /**@internal */\n  @queryAssignedElements({ slot: \"checkbox\", flatten: true }) private checkboxes!: NodeListOf<SgdsCheckbox>;\n  /**@internal */\n  @state() private hasInvalidCheckbox = false;\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 = \"\";\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  constructor() {\n    super();\n    this.addEventListener(\"sgds-validity-change\", (e: CustomEvent) => {\n      this.hasInvalidCheckbox = e.detail.invalid;\n    });\n  }\n\n  private _checkInvalidState() {\n    this.hasInvalidCheckbox = Array.from(this.checkboxes).some(checkbox => checkbox.invalid);\n  }\n  /** Overrides hasFeedback from individual SgdsCheckbox  */\n  private _forwardHasFeedback() {\n    Array.from(this.checkboxes).forEach(checkbox => (checkbox.hasFeedback = this.hasFeedback));\n  }\n\n  protected _renderHintText() {\n    const hintTextTemplate = html` <div class=\"form-text\">${this.hintText}</div> `;\n    return this.hintText && hintTextTemplate;\n  }\n\n  firstUpdated() {\n    this._forwardHasFeedback();\n  }\n  updated() {\n    this._checkInvalidState();\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 name=\"checkbox\"></slot>\n        </div>\n        ${this.hasInvalidCheckbox && this.hasFeedback\n          ? html`\n              <div class=\"invalid-feedback-container\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n                  <path\n                    d=\"M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10ZM10 6.25C9.49805 6.25 9.10584 6.68339 9.15578 7.18285L9.48461 10.4711C9.51109 10.7359 9.7339 10.9375 10 10.9375C10.2661 10.9375 10.4889 10.7359 10.5154 10.4711L10.8442 7.18285C10.8942 6.68339 10.5019 6.25 10 6.25ZM10.0014 11.875C9.48368 11.875 9.06394 12.2947 9.06394 12.8125C9.06394 13.3303 9.48368 13.75 10.0014 13.75C10.5192 13.75 10.9389 13.3303 10.9389 12.8125C10.9389 12.2947 10.5192 11.875 10.0014 11.875Z\"\n                    fill=\"#B90000\"\n                  />\n                </svg>\n                <div id=\"checkbox-feedback\" tabindex=\"0\" class=\"invalid-feedback\">${this.invalidFeedback}</div>\n              </div>\n            `\n          : nothing}\n      </fieldset>\n    `;\n  }\n}\n\nexport default SgdsCheckboxGroup;\n"],"names":["feedbackStyles","formLabelStyles","checkboxGroupStyles","formHintStyles"],"mappings":"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"}
+{"version":3,"file":"sgds-checkbox-group.js","sources":["../../../../src/components/Checkbox/sgds-checkbox-group.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { queryAssignedElements, state, property } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport feedbackStyles from \"../../styles/feedback.css\";\nimport formLabelStyles from \"../../styles/form-label.css\";\nimport checkboxGroupStyles from \"./checkbox-group.css\";\nimport formHintStyles from \"../../styles/form-hint.css\";\nimport SgdsCheckbox from \"./sgds-checkbox\";\n/**\n * @summary CheckboxGroup is the container that group multiple checkboxes under a single question field.\n * It handles the display of validation feedback of its checkboxes children.\n *\n * @slot default - Pass in `sgds-checkbox` into the default slot\n */\nexport class SgdsCheckboxGroup extends SgdsElement {\n  static styles = [...SgdsElement.styles, feedbackStyles, formLabelStyles, checkboxGroupStyles, formHintStyles];\n  /**@internal */\n  @queryAssignedElements({ flatten: true }) private checkboxes!: NodeListOf<SgdsCheckbox>;\n  @state() private hasInvalidCheckbox = false;\n  @state() private validationMessage: string;\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 = \"\";\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  constructor() {\n    super();\n    this.addEventListener(\"sgds-validity-change\", (e: CustomEvent) => {\n      this.hasInvalidCheckbox = e.detail.invalid;\n      this.validationMessage = e.detail.validationMessage;\n    });\n  }\n\n  private _checkInvalidState() {\n    this.hasInvalidCheckbox = Array.from(this.checkboxes).some(checkbox => checkbox.invalid);\n  }\n  /** Overrides hasFeedback from individual SgdsCheckbox  */\n  private _forwardHasFeedback() {\n    Array.from(this.checkboxes).forEach(checkbox => (checkbox.hasFeedback = this.hasFeedback));\n  }\n\n  protected _renderHintText() {\n    const hintTextTemplate = html` <div class=\"form-text\">${this.hintText}</div> `;\n    return this.hintText && hintTextTemplate;\n  }\n\n  firstUpdated() {\n    this._forwardHasFeedback();\n  }\n  updated() {\n    this._checkInvalidState();\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></slot>\n        </div>\n        ${this.hasInvalidCheckbox && this.hasFeedback\n          ? html`\n              <div class=\"invalid-feedback-container\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n                  <path\n                    d=\"M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10ZM10 6.25C9.49805 6.25 9.10584 6.68339 9.15578 7.18285L9.48461 10.4711C9.51109 10.7359 9.7339 10.9375 10 10.9375C10.2661 10.9375 10.4889 10.7359 10.5154 10.4711L10.8442 7.18285C10.8942 6.68339 10.5019 6.25 10 6.25ZM10.0014 11.875C9.48368 11.875 9.06394 12.2947 9.06394 12.8125C9.06394 13.3303 9.48368 13.75 10.0014 13.75C10.5192 13.75 10.9389 13.3303 10.9389 12.8125C10.9389 12.2947 10.5192 11.875 10.0014 11.875Z\"\n                    fill=\"#B90000\"\n                  />\n                </svg>\n                <div id=\"checkbox-feedback\" tabindex=\"0\" class=\"invalid-feedback\">\n                  ${this.invalidFeedback ? this.invalidFeedback : this.validationMessage}\n                </div>\n              </div>\n            `\n          : nothing}\n      </fieldset>\n    `;\n  }\n}\n\nexport default SgdsCheckboxGroup;\n"],"names":["feedbackStyles","formLabelStyles","checkboxGroupStyles","formHintStyles"],"mappings":"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"}

package/react/components/Checkbox/sgds-checkbox.cjs.js

@@ -4,17 +4,16 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
-var formCheckElement = require('../../base/form-check-element.cjs.js');
-var generateId = require('../../utils/generateId.cjs.js');
-var checkbox = require('./checkbox.cjs.js');
-var form = require('../../utils/form.cjs.js');
-var sgdsElement = require('../../base/sgds-element.cjs.js');
-var decorators_js = require('lit/decorators.js');
-var defaultvalue = require('../../utils/defaultvalue.cjs.js');
-var watch = require('../../utils/watch.cjs.js');
 var lit = require('lit');
+var decorators_js = require('lit/decorators.js');
 var classMap_js = require('lit/directives/class-map.js');
 var ifDefined_js = require('lit/directives/if-defined.js');
+var live_js = require('lit/directives/live.js');
+var formControlElement = require('../../base/form-control-element.cjs.js');
+var defaultvalue = require('../../utils/defaultvalue.cjs.js');
+var validatorMixin = require('../../utils/validatorMixin.cjs.js');
+var watch = require('../../utils/watch.cjs.js');
+var checkbox = require('./checkbox.cjs.js');
 
 /**
  * @summary Checkbox component is used when you require users to select multiple items from a list.
@@ -22,36 +21,29 @@ var ifDefined_js = require('lit/directives/if-defined.js');
  * @slot default - The label of checkbox.
  *
  * @event sgds-change - Emitted when the checked state changes.
+ * @event sgds-blur - Emitted when input is not in focus.
+ * @event sgds-focus - Emitted when input is in focus.
  * @event sgds-validity-change - Emitted when the invalid state changes. This event is used by sgds-checkbox-group to check the invalid state change of its children
  */
-class SgdsCheckbox extends sgdsElement["default"] {
+class SgdsCheckbox extends validatorMixin.SgdsFormValidatorMixin(formControlElement["default"]) {
     constructor() {
         super(...arguments);
-        /**@internal */
-        this.formSubmitController = new form.FormSubmitController(this, {
-            value: (control) => (control.checked ? control.value : undefined),
-            defaultValue: (control) => control.defaultChecked,
-            setValue: (control, checked) => (control.checked = checked)
-        });
-        /** Makes the checkbox a required field. */
-        this.required = false;
         /** Draws the checkbox in a checked state. */
         this.checked = false;
-        /** Disables the checkbox (so the user can't check / uncheck it). */
-        this.disabled = false;
         /** Allows invalidFeedback, invalid and valid styles to be visible with the input */
         this.hasFeedback = false;
         /** 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. */
         this.defaultChecked = false;
-        /** Marks the checkbox input as invalid. Replace the pseudo :invalid selector for absent in custom elements */
-        this.invalid = false;
         /** Marks the checkbox input as indeterminate , with indeterminate logo  */
         this.indeterminate = false;
-        /** @internal For Id/For pair of the HTML form control and label. */
-        this._inputId = generateId["default"]("checkbox");
+        /** Makes the checkbox a required field. */
+        this.required = false;
+        this._isTouched = false;
     }
     _handleInvalidChange() {
-        this.emit("sgds-validity-change", { detail: { invalid: this.invalid } });
+        this.emit("sgds-validity-change", {
+            detail: { invalid: this.invalid, validationMessage: this.input.validationMessage }
+        });
     }
     /** Simulates a click on the checkbox. */
     click() {
@@ -65,19 +57,13 @@ class SgdsCheckbox extends sgdsElement["default"] {
     blur() {
         this.input.blur();
     }
-    /** Checks for validity and shows the browser's validation message if the control is invalid. */
-    reportValidity() {
-        if (!this.input.reportValidity()) {
-            this.invalid = !this.input.checkValidity();
-        }
-        return this.input.reportValidity();
-    }
-    _handleChange() {
+    _handleChange(e) {
         if (this.indeterminate) {
             this.indeterminate = !this.indeterminate;
         }
         this.checked = !this.checked;
         this.value = this.input.value;
+        super._mixinHandleChange(e);
         this.emit("sgds-change", { detail: { checked: this.checked, value: this.value } });
     }
     _handleKeyDown(event) {
@@ -86,6 +72,13 @@ class SgdsCheckbox extends sgdsElement["default"] {
             this.click();
         }
     }
+    _handleBlur() {
+        this._isTouched = true;
+        this.emit("sgds-blur");
+    }
+    _handleFocus() {
+        this.emit("sgds-focus");
+    }
     _handleInvalid(e) {
         e.preventDefault();
         this.invalid = true;
@@ -93,12 +86,43 @@ class SgdsCheckbox extends sgdsElement["default"] {
     /** @internal */
     _handleDisabledChange() {
         // Disabled form controls are always valid, so we need to recheck validity when the state changes
-        this.input.disabled = this.disabled;
-        this.invalid = !this.input.checkValidity();
+        this.setInvalid(false);
     }
-    /** @internal */
-    _handleStateChange() {
-        this.invalid = !this.input.checkValidity();
+    _handleIsTouched() {
+        if (this._isTouched) {
+            this.invalid = !this.input.checkValidity();
+        }
+    }
+    _mixinResetFormControl() {
+        this._isTouched = false;
+        this.checked = this.input.checked = this.defaultChecked;
+        this.input.dispatchEvent(new InputEvent("reset"));
+        this._mixinResetValidity(this.input);
+    }
+    /**
+     * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state
+     * 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
+     */
+    reportValidity() {
+        return this._mixinReportValidity();
+    }
+    /**
+     * Checks for validity without any native error popup message
+     */
+    checkValidity() {
+        return this._mixinCheckValidity();
+    }
+    /**
+     * Returns the ValidityState object
+     */
+    get validity() {
+        return this._mixinGetValidity();
+    }
+    /**
+     * Returns the validation message based on the ValidityState
+     */
+    get validationMessage() {
+        return this._mixinGetValidationMessage();
     }
     render() {
         return lit.html `
@@ -110,45 +134,35 @@ class SgdsCheckbox extends sgdsElement["default"] {
             "is-invalid": this.hasFeedback && this.invalid
         })}
             type="checkbox"
-            id=${this._inputId}
+            id=${this._controlId}
             aria-invalid=${this.invalid ? "true" : "false"}
             name=${ifDefined_js.ifDefined(this.name)}
-            value=${ifDefined_js.ifDefined(this.value)}
-            ?checked=${this.checked}
             ?indeterminate=${this.indeterminate}
-            ?disabled=${this.disabled}
             ?required=${this.required}
             aria-disabled=${this.disabled ? "true" : "false"}
             aria-checked=${this.checked ? "true" : "false"}
-            @change=${this._handleChange}
+            @change=${(e) => this._handleChange(e)}
             @keydown=${this._handleKeyDown}
             @invalid=${(e) => this._handleInvalid(e)}
+            .checked=${live_js.live(this.checked)}
+            .disabled=${this.disabled}
+            .required=${this.required}
+            @blur=${this._handleBlur}
+            @focus=${this._handleFocus}
           />
         </div>
-        <label for="${this._inputId}" class="form-check-label"><slot></slot></label>
+        <label for="${this._controlId}" class="form-check-label" id="${this._labelId}"><slot></slot></label>
       </div>
     `;
     }
 }
-SgdsCheckbox.styles = [...formCheckElement.FormCheckElement.styles, checkbox["default"]];
-tslib.__decorate([
-    decorators_js.query('input[type="checkbox"]')
-], SgdsCheckbox.prototype, "input", void 0);
-tslib.__decorate([
-    decorators_js.property({ type: String, reflect: true })
-], SgdsCheckbox.prototype, "name", void 0);
+SgdsCheckbox.styles = [...formControlElement["default"].styles, checkbox["default"]];
 tslib.__decorate([
     decorators_js.property({ type: String, reflect: true })
 ], SgdsCheckbox.prototype, "value", void 0);
-tslib.__decorate([
-    decorators_js.property({ type: Boolean, reflect: true })
-], SgdsCheckbox.prototype, "required", void 0);
 tslib.__decorate([
     decorators_js.property({ type: Boolean, reflect: true })
 ], SgdsCheckbox.prototype, "checked", void 0);
-tslib.__decorate([
-    decorators_js.property({ type: Boolean, reflect: true })
-], SgdsCheckbox.prototype, "disabled", void 0);
 tslib.__decorate([
     decorators_js.property({ type: Boolean, reflect: true })
 ], SgdsCheckbox.prototype, "hasFeedback", void 0);
@@ -157,10 +171,13 @@ tslib.__decorate([
 ], SgdsCheckbox.prototype, "defaultChecked", void 0);
 tslib.__decorate([
     decorators_js.property({ type: Boolean, reflect: true })
-], SgdsCheckbox.prototype, "invalid", void 0);
+], SgdsCheckbox.prototype, "indeterminate", void 0);
 tslib.__decorate([
     decorators_js.property({ type: Boolean, reflect: true })
-], SgdsCheckbox.prototype, "indeterminate", void 0);
+], SgdsCheckbox.prototype, "required", void 0);
+tslib.__decorate([
+    decorators_js.state()
+], SgdsCheckbox.prototype, "_isTouched", void 0);
 tslib.__decorate([
     watch.watch("invalid", { waitUntilFirstUpdate: true })
 ], SgdsCheckbox.prototype, "_handleInvalidChange", null);
@@ -168,8 +185,8 @@ tslib.__decorate([
     watch.watch("disabled", { waitUntilFirstUpdate: true })
 ], SgdsCheckbox.prototype, "_handleDisabledChange", null);
 tslib.__decorate([
-    watch.watch("checked", { waitUntilFirstUpdate: true })
-], SgdsCheckbox.prototype, "_handleStateChange", null);
+    watch.watch("_isTouched", { waitUntilFirstUpdate: true })
+], SgdsCheckbox.prototype, "_handleIsTouched", null);
 
 exports.SgdsCheckbox = SgdsCheckbox;
 exports["default"] = SgdsCheckbox;

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-checkbox.cjs.js","sources":["../../../../src/components/Checkbox/sgds-checkbox.ts"],"sourcesContent":["import FormCheckElement from \"../../base/form-check-element\";\nimport genId from \"../../utils/generateId\";\nimport checkboxStyle from \"./checkbox.css\";\nimport { FormSubmitController, SgdsFormControl } from \"../../utils/form\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { property, query } from \"lit/decorators.js\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport { watch } from \"../../utils/watch\";\nimport { html } from \"lit\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\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-validity-change - Emitted when the invalid state changes. This event is used by sgds-checkbox-group to check the invalid state change of its children\n */\nexport class SgdsCheckbox extends SgdsElement implements SgdsFormControl {\n  static styles = [...FormCheckElement.styles, checkboxStyle];\n  /**@internal */\n  @query('input[type=\"checkbox\"]') input: HTMLInputElement;\n  /**@internal */\n  private readonly formSubmitController = new FormSubmitController(this, {\n    value: (control: FormCheckElement) => (control.checked ? control.value : undefined),\n    defaultValue: (control: FormCheckElement) => control.defaultChecked,\n    setValue: (control: FormCheckElement, checked: boolean) => (control.checked = checked)\n  });\n  /** Name of the HTML form control. Submitted with the form as part of a name/value pair. */\n  @property({ type: String, reflect: true }) name: string;\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  /** Makes the checkbox a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /** Draws the checkbox in a checked state. */\n  @property({ type: Boolean, reflect: true }) checked = false;\n\n  /** Disables the checkbox (so the user can't check / uncheck it). */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n  @property({ type: Boolean, reflect: true }) hasFeedback = false;\n\n  /** 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  /** Marks the checkbox input as invalid. Replace the pseudo :invalid selector for absent in custom elements */\n  @property({ type: Boolean, reflect: true }) invalid = false;\n\n  /** Marks the checkbox input as indeterminate , with indeterminate logo  */\n  @property({ type: Boolean, reflect: true }) indeterminate = false;\n\n  @watch(\"invalid\", { waitUntilFirstUpdate: true })\n  _handleInvalidChange() {\n    this.emit(\"sgds-validity-change\", { detail: { invalid: this.invalid } });\n  }\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  /** Checks for validity and shows the browser's validation message if the control is invalid. */\n  public reportValidity() {\n    if (!this.input.reportValidity()) {\n      this.invalid = !this.input.checkValidity();\n    }\n    return this.input.reportValidity();\n  }\n\n  private _handleChange() {\n    if (this.indeterminate) {\n      this.indeterminate = !this.indeterminate;\n    }\n\n    this.checked = !this.checked;\n    this.value = this.input.value;\n    this.emit(\"sgds-change\", { detail: { checked: this.checked, 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 _handleInvalid(e: Event) {\n    e.preventDefault();\n    this.invalid = true;\n  }\n  /** @internal For Id/For pair of the HTML form control and label. */\n  private _inputId = genId(\"checkbox\");\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.input.disabled = this.disabled;\n    this.invalid = !this.input.checkValidity();\n  }\n  /** @internal */\n  @watch(\"checked\", { waitUntilFirstUpdate: true })\n  _handleStateChange() {\n    this.invalid = !this.input.checkValidity();\n  }\n\n  render() {\n    return html`\n      <div class=\"form-check\">\n        <div class=\"form-check-input-container\">\n          <input\n            class=${classMap({\n              \"form-check-input\": true,\n              \"is-invalid\": this.hasFeedback && this.invalid\n            })}\n            type=\"checkbox\"\n            id=${this._inputId}\n            aria-invalid=${this.invalid ? \"true\" : \"false\"}\n            name=${ifDefined(this.name)}\n            value=${ifDefined(this.value)}\n            ?checked=${this.checked}\n            ?indeterminate=${this.indeterminate}\n            ?disabled=${this.disabled}\n            ?required=${this.required}\n            aria-disabled=${this.disabled ? \"true\" : \"false\"}\n            aria-checked=${this.checked ? \"true\" : \"false\"}\n            @change=${this._handleChange}\n            @keydown=${this._handleKeyDown}\n            @invalid=${(e: Event) => this._handleInvalid(e)}\n          />\n        </div>\n        <label for=\"${this._inputId}\" class=\"form-check-label\"><slot></slot></label>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsCheckbox;\n"],"names":["SgdsElement","FormSubmitController","genId","html","classMap","ifDefined","FormCheckElement","checkboxStyle","__decorate","query","property","defaultValue","watch"],"mappings":";;;;;;;;;;;;;;;;;;AAYA;;;;;;;AAOG;AACG,MAAO,YAAa,SAAQA,sBAAW,CAAA;AAA7C,IAAA,WAAA,GAAA;;;AAKmB,QAAA,IAAA,CAAA,oBAAoB,GAAG,IAAIC,yBAAoB,CAAC,IAAI,EAAE;YACrE,KAAK,EAAE,CAAC,OAAyB,MAAM,OAAO,CAAC,OAAO,GAAG,OAAO,CAAC,KAAK,GAAG,SAAS,CAAC;YACnF,YAAY,EAAE,CAAC,OAAyB,KAAK,OAAO,CAAC,cAAc;AACnE,YAAA,QAAQ,EAAE,CAAC,OAAyB,EAAE,OAAgB,MAAM,OAAO,CAAC,OAAO,GAAG,OAAO,CAAC;AACvF,SAAA,CAAC,CAAC;;QAQyC,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;;QAGjB,IAAO,CAAA,OAAA,GAAG,KAAK,CAAC;;QAGhB,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;;QAGjB,IAAW,CAAA,WAAA,GAAG,KAAK,CAAC;;QAIhE,IAAc,CAAA,cAAA,GAAG,KAAK,CAAC;;QAEqB,IAAO,CAAA,OAAA,GAAG,KAAK,CAAC;;QAGhB,IAAa,CAAA,aAAA,GAAG,KAAK,CAAC;;AAkD1D,QAAA,IAAA,CAAA,QAAQ,GAAGC,qBAAK,CAAC,UAAU,CAAC,CAAC;KA4CtC;IA3FC,oBAAoB,GAAA;AAClB,QAAA,IAAI,CAAC,IAAI,CAAC,sBAAsB,EAAE,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;KAC1E;;IAGM,KAAK,GAAA;AACV,QAAA,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;KACpB;;AAEM,IAAA,KAAK,CAAC,OAAsB,EAAA;AACjC,QAAA,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;KAC3B;;IAGM,IAAI,GAAA;AACT,QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;KACnB;;IAEM,cAAc,GAAA;QACnB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE,EAAE;YAChC,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,CAAC;SAC5C;AACD,QAAA,OAAO,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE,CAAC;KACpC;IAEO,aAAa,GAAA;AACnB,QAAA,IAAI,IAAI,CAAC,aAAa,EAAE;AACtB,YAAA,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC;SAC1C;AAED,QAAA,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;QAC9B,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;KACpF;AAEO,IAAA,cAAc,CAAC,KAAoB,EAAA;AACzC,QAAA,MAAM,WAAW,GAAG,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,MAAM,CAAC;QACrF,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,WAAW,EAAE;YACzC,IAAI,CAAC,KAAK,EAAE,CAAC;SACd;KACF;AAEO,IAAA,cAAc,CAAC,CAAQ,EAAA;QAC7B,CAAC,CAAC,cAAc,EAAE,CAAC;AACnB,QAAA,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;KACrB;;IAMD,qBAAqB,GAAA;;QAEnB,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;QACpC,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,CAAC;KAC5C;;IAGD,kBAAkB,GAAA;QAChB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,CAAC;KAC5C;IAED,MAAM,GAAA;AACJ,QAAA,OAAOC,QAAI,CAAA,CAAA;;;;AAIK,kBAAA,EAAAC,oBAAQ,CAAC;AACf,YAAA,kBAAkB,EAAE,IAAI;AACxB,YAAA,YAAY,EAAE,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,OAAO;SAC/C,CAAC,CAAA;;AAEG,eAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;2BACH,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO,CAAA;AACvC,iBAAA,EAAAC,sBAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;AACnB,kBAAA,EAAAA,sBAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;AAClB,qBAAA,EAAA,IAAI,CAAC,OAAO,CAAA;AACN,2BAAA,EAAA,IAAI,CAAC,aAAa,CAAA;AACvB,sBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;AACb,sBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;4BACT,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;2BACjC,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO,CAAA;AACpC,oBAAA,EAAA,IAAI,CAAC,aAAa,CAAA;AACjB,qBAAA,EAAA,IAAI,CAAC,cAAc,CAAA;uBACnB,CAAC,CAAQ,KAAK,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,CAAA;;;AAGrC,oBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;;KAE9B,CAAC;KACH;;AA/HM,YAAM,CAAA,MAAA,GAAG,CAAC,GAAGC,iCAAgB,CAAC,MAAM,EAAEC,mBAAa,CAA7C,CAA+C;AAE3BC,gBAAA,CAAA;IAAhCC,mBAAK,CAAC,wBAAwB,CAAC;AAAyB,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAQdD,gBAAA,CAAA;IAA1CE,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAc,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGbF,gBAAA,CAAA;IAA1CE,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAe,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGbF,gBAAA,CAAA;IAA3CE,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkB,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGjBF,gBAAA,CAAA;IAA3CE,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAiB,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGhBF,gBAAA,CAAA;IAA3CE,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkB,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGjBF,gBAAA,CAAA;IAA3CE,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAqB,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIhEF,gBAAA,CAAA;IADCG,yBAAY,CAAC,SAAS,CAAC;AACD,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,gBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEqBH,gBAAA,CAAA;IAA3CE,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAiB,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGhBF,gBAAA,CAAA;IAA3CE,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAuB,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,eAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGlEF,gBAAA,CAAA;IADCI,WAAK,CAAC,SAAS,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;AAGhD,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,sBAAA,EAAA,IAAA,CAAA,CAAA;AAiDDJ,gBAAA,CAAA;IADCI,WAAK,CAAC,UAAU,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;AAKjD,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,uBAAA,EAAA,IAAA,CAAA,CAAA;AAGDJ,gBAAA,CAAA;IADCI,WAAK,CAAC,SAAS,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;AAGhD,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,oBAAA,EAAA,IAAA,CAAA;;;;;"}
+{"version":3,"file":"sgds-checkbox.cjs.js","sources":["../../../../src/components/Checkbox/sgds-checkbox.ts"],"sourcesContent":["import { html } 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 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 checkboxStyle from \"./checkbox.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-validity-change - Emitted when the invalid state changes. This event is used by sgds-checkbox-group to check the invalid state change of its children\n */\nexport class SgdsCheckbox extends SgdsFormValidatorMixin(FormControlElement) implements SgdsFormControl {\n  static styles = [...FormControlElement.styles, checkboxStyle];\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: Boolean, reflect: true }) hasFeedback = false;\n\n  /** 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  @state() private _isTouched = false;\n\n  @watch(\"invalid\", { waitUntilFirstUpdate: true })\n  _handleInvalidChange() {\n    this.emit(\"sgds-validity-change\", {\n      detail: { invalid: this.invalid, validationMessage: this.input.validationMessage }\n    });\n  }\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    this.value = this.input.value;\n    super._mixinHandleChange(e);\n    this.emit(\"sgds-change\", { detail: { checked: this.checked, 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._isTouched) {\n      this.invalid = !this.input.checkValidity();\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  render() {\n    return html`\n      <div class=\"form-check\">\n        <div class=\"form-check-input-container\">\n          <input\n            class=${classMap({\n              \"form-check-input\": true,\n              \"is-invalid\": this.hasFeedback && this.invalid\n            })}\n            type=\"checkbox\"\n            id=${this._controlId}\n            aria-invalid=${this.invalid ? \"true\" : \"false\"}\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        </div>\n        <label for=\"${this._controlId}\" class=\"form-check-label\" id=\"${this._labelId}\"><slot></slot></label>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsCheckbox;\n"],"names":["SgdsFormValidatorMixin","FormControlElement","html","classMap","ifDefined","live","checkboxStyle","__decorate","property","defaultValue","state","watch"],"mappings":"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"}