@govtechsg/sgds-web-component 2.1.1 → 2.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@govtechsg/sgds-web-component",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "description": "",
   "main": "./index.umd.js",
   "module": "./index.js",

package/react/base/form-check-element.cjs.js

@@ -111,12 +111,14 @@ class FormCheckElement extends sgdsElement["default"] {
           @keydown=${this._handleKeyDown}
           @invalid=${(e) => this._handleInvalid(e)}
         />
-        <label for="${this._inputId}" aria-label=${ifDefined_js.ifDefined(this.ariaLabel)} class="form-check-label"
-          ><slot></slot
-        ></label>
-        ${this.hasFeedback
+        <div class="form-check-label-container">
+          <label for="${this._inputId}" aria-label=${ifDefined_js.ifDefined(this.ariaLabel)} class="form-check-label"
+            ><slot></slot
+          ></label>
+          ${this.hasFeedback && this.invalid
             ? lit.html `<div id="${this._inputId}-invalid" class="invalid-feedback">${this.invalidFeedback}</div>`
             : lit.nothing}
+        </div>
       </div>
     `;
     }

package/react/base/form-check-element.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-check-element.cjs.js","sources":["../../../src/base/form-check-element.ts"],"sourcesContent":["import { property, query } from \"lit/decorators.js\";\nimport { defaultValue } from \"../utils/defaultvalue\";\nimport { FormSubmitController, SgdsFormControl } from \"../utils/form\";\nimport { watch } from \"../utils/watch\";\nimport SgdsElement from \"./sgds-element\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { html, nothing } from \"lit\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\n\nexport class FormCheckElement extends SgdsElement implements SgdsFormControl {\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\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  /** For aria-label when there is no appropriate text label visible */\n  @property({ type: String, reflect: true }) ariaLabel = \"checkbox\";\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  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback?: string;\n\n  /** Aligns the checkbox horizontally */\n  @property({ type: Boolean, reflect: true }) isInline = 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 invalid. Replace the pseudo :invalid selector for absent in custom elements */\n  @property({ type: Boolean, reflect: true }) invalid = 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  /** 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  protected _handleChange() {\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  protected _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  protected _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  protected _inputId: string;\n\n  /**@internal */\n  @property({ type: String }) protected _size: string;\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  render() {\n    return html`\n      <div\n        class=${classMap({\n          \"form-check\": true,\n          \"form-check-inline\": this.isInline\n        })}\n      >\n        <input\n          class=${classMap({\n            \"form-check-input\": true,\n            \"is-invalid\": this.hasFeedback && this.invalid,\n            md: this._size === \"md\"\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          ?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        <label for=\"${this._inputId}\" aria-label=${ifDefined(this.ariaLabel)} class=\"form-check-label\"\n          ><slot></slot\n        ></label>\n        ${this.hasFeedback\n          ? html`<div id=\"${this._inputId}-invalid\" class=\"invalid-feedback\">${this.invalidFeedback}</div>`\n          : nothing}\n      </div>\n    `;\n  }\n}\n\nexport default FormCheckElement;\n"],"names":["SgdsElement","FormSubmitController","html","classMap","ifDefined","nothing","__decorate","query","property","defaultValue","watch"],"mappings":"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"}
+{"version":3,"file":"form-check-element.cjs.js","sources":["../../../src/base/form-check-element.ts"],"sourcesContent":["import { property, query } from \"lit/decorators.js\";\nimport { defaultValue } from \"../utils/defaultvalue\";\nimport { FormSubmitController, SgdsFormControl } from \"../utils/form\";\nimport { watch } from \"../utils/watch\";\nimport SgdsElement from \"./sgds-element\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { html, nothing } from \"lit\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\n\nexport class FormCheckElement extends SgdsElement implements SgdsFormControl {\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\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  /** For aria-label when there is no appropriate text label visible */\n  @property({ type: String, reflect: true }) ariaLabel = \"checkbox\";\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  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback?: string;\n\n  /** Aligns the checkbox horizontally */\n  @property({ type: Boolean, reflect: true }) isInline = 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 invalid. Replace the pseudo :invalid selector for absent in custom elements */\n  @property({ type: Boolean, reflect: true }) invalid = 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  /** 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  protected _handleChange() {\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  protected _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  protected _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  protected _inputId: string;\n\n  /**@internal */\n  @property({ type: String }) protected _size: string;\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  render() {\n    return html`\n      <div\n        class=${classMap({\n          \"form-check\": true,\n          \"form-check-inline\": this.isInline\n        })}\n      >\n        <input\n          class=${classMap({\n            \"form-check-input\": true,\n            \"is-invalid\": this.hasFeedback && this.invalid,\n            md: this._size === \"md\"\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          ?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 class=\"form-check-label-container\">\n          <label for=\"${this._inputId}\" aria-label=${ifDefined(this.ariaLabel)} class=\"form-check-label\"\n            ><slot></slot\n          ></label>\n          ${this.hasFeedback && this.invalid\n            ? html`<div id=\"${this._inputId}-invalid\" class=\"invalid-feedback\">${this.invalidFeedback}</div>`\n            : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default FormCheckElement;\n"],"names":["SgdsElement","FormSubmitController","html","classMap","ifDefined","nothing","__decorate","query","property","defaultValue","watch"],"mappings":"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"}

package/react/base/form-check-element.js

@@ -107,12 +107,14 @@ class FormCheckElement extends SgdsElement {
           @keydown=${this._handleKeyDown}
           @invalid=${(e) => this._handleInvalid(e)}
         />
-        <label for="${this._inputId}" aria-label=${ifDefined(this.ariaLabel)} class="form-check-label"
-          ><slot></slot
-        ></label>
-        ${this.hasFeedback
+        <div class="form-check-label-container">
+          <label for="${this._inputId}" aria-label=${ifDefined(this.ariaLabel)} class="form-check-label"
+            ><slot></slot
+          ></label>
+          ${this.hasFeedback && this.invalid
             ? html `<div id="${this._inputId}-invalid" class="invalid-feedback">${this.invalidFeedback}</div>`
             : nothing}
+        </div>
       </div>
     `;
     }

package/react/base/form-check-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-check-element.js","sources":["../../../src/base/form-check-element.ts"],"sourcesContent":["import { property, query } from \"lit/decorators.js\";\nimport { defaultValue } from \"../utils/defaultvalue\";\nimport { FormSubmitController, SgdsFormControl } from \"../utils/form\";\nimport { watch } from \"../utils/watch\";\nimport SgdsElement from \"./sgds-element\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { html, nothing } from \"lit\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\n\nexport class FormCheckElement extends SgdsElement implements SgdsFormControl {\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\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  /** For aria-label when there is no appropriate text label visible */\n  @property({ type: String, reflect: true }) ariaLabel = \"checkbox\";\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  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback?: string;\n\n  /** Aligns the checkbox horizontally */\n  @property({ type: Boolean, reflect: true }) isInline = 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 invalid. Replace the pseudo :invalid selector for absent in custom elements */\n  @property({ type: Boolean, reflect: true }) invalid = 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  /** 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  protected _handleChange() {\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  protected _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  protected _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  protected _inputId: string;\n\n  /**@internal */\n  @property({ type: String }) protected _size: string;\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  render() {\n    return html`\n      <div\n        class=${classMap({\n          \"form-check\": true,\n          \"form-check-inline\": this.isInline\n        })}\n      >\n        <input\n          class=${classMap({\n            \"form-check-input\": true,\n            \"is-invalid\": this.hasFeedback && this.invalid,\n            md: this._size === \"md\"\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          ?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        <label for=\"${this._inputId}\" aria-label=${ifDefined(this.ariaLabel)} class=\"form-check-label\"\n          ><slot></slot\n        ></label>\n        ${this.hasFeedback\n          ? html`<div id=\"${this._inputId}-invalid\" class=\"invalid-feedback\">${this.invalidFeedback}</div>`\n          : nothing}\n      </div>\n    `;\n  }\n}\n\nexport default FormCheckElement;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"form-check-element.js","sources":["../../../src/base/form-check-element.ts"],"sourcesContent":["import { property, query } from \"lit/decorators.js\";\nimport { defaultValue } from \"../utils/defaultvalue\";\nimport { FormSubmitController, SgdsFormControl } from \"../utils/form\";\nimport { watch } from \"../utils/watch\";\nimport SgdsElement from \"./sgds-element\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { html, nothing } from \"lit\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\n\nexport class FormCheckElement extends SgdsElement implements SgdsFormControl {\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\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  /** For aria-label when there is no appropriate text label visible */\n  @property({ type: String, reflect: true }) ariaLabel = \"checkbox\";\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  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback?: string;\n\n  /** Aligns the checkbox horizontally */\n  @property({ type: Boolean, reflect: true }) isInline = 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 invalid. Replace the pseudo :invalid selector for absent in custom elements */\n  @property({ type: Boolean, reflect: true }) invalid = 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  /** 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  protected _handleChange() {\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  protected _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  protected _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  protected _inputId: string;\n\n  /**@internal */\n  @property({ type: String }) protected _size: string;\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  render() {\n    return html`\n      <div\n        class=${classMap({\n          \"form-check\": true,\n          \"form-check-inline\": this.isInline\n        })}\n      >\n        <input\n          class=${classMap({\n            \"form-check-input\": true,\n            \"is-invalid\": this.hasFeedback && this.invalid,\n            md: this._size === \"md\"\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          ?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 class=\"form-check-label-container\">\n          <label for=\"${this._inputId}\" aria-label=${ifDefined(this.ariaLabel)} class=\"form-check-label\"\n            ><slot></slot\n          ></label>\n          ${this.hasFeedback && this.invalid\n            ? html`<div id=\"${this._inputId}-invalid\" class=\"invalid-feedback\">${this.invalidFeedback}</div>`\n            : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default FormCheckElement;\n"],"names":[],"mappings":"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"}

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.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:block;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{color:var(--sgds-form-invalid-color)}.form-check-inline{display:inline-block;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")}`;
+var css_248z = lit.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")}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=checkbox.cjs.js.map

package/react/components/Checkbox/checkbox.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = 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:block;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{color:var(--sgds-form-invalid-color)}.form-check-inline{display:inline-block;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")}`;
+var css_248z = 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")}`;
 
 export { css_248z as default };
 //# sourceMappingURL=checkbox.js.map

package/react/components/Input/sgds-input.cjs.js

@@ -149,7 +149,7 @@ class SgdsInput extends sgdsElement["default"] {
       ${this._renderFeedback()} `;
     }
     _renderFeedback() {
-        return this.hasFeedback
+        return this.hasFeedback && this.invalid
             ? staticHtml_js.html `<div id="${this.inputId}-invalid" class="invalid-feedback">${this.invalidFeedback}</div>`
             : "";
     }

package/react/components/Input/sgds-input.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-input.cjs.js","sources":["../../../../src/components/Input/sgds-input.ts"],"sourcesContent":["import { property, query } 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 { unsafeSVG } from \"lit/directives/unsafe-svg.js\";\nimport { html } from \"lit/static-html.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport type { SgdsFormControl } from \"../../utils/form\";\nimport { FormSubmitController } from \"../../utils/form\";\nimport genId from \"../../utils/generateId\";\nimport { watch } from \"../../utils/watch\";\nimport inputStyle from \"./input.css\";\nimport feedbackStyles from \"../../styles/feedback.css\";\nimport formHintStyles from \"../../styles/form-hint.css\";\nimport formLabelStyles from \"../../styles/form-label.css\";\n/**\n * @summary Text inputs allow your users to enter letters, numbers and symbols on a single line.\n *\n * @event sgds-change - Emitted when an alteration to the control's value is committed by the user.\n * @event sgds-input - Emitted when the control receives input and its value changes.\n * @event sgds-focus - Emitted when input is in focus.\n * @event sgds-blur - Emitted when input is not in focus.\n *\n */\nexport class SgdsInput extends SgdsElement implements SgdsFormControl {\n  static styles = [...SgdsElement.styles, feedbackStyles, formHintStyles, formLabelStyles, inputStyle];\n  /**@internal */\n  @query(\"input.form-control\") input: HTMLInputElement;\n  /**@internal */\n  protected readonly formSubmitController = new FormSubmitController(this);\n  /** The type of input which works the same as HTMLInputElement */\n  @property({ reflect: true }) type: \"email\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"time\" | \"url\" =\n    \"text\";\n  /** The input's label  */\n  @property({ reflect: true }) label = \"\";\n  /** The input's hint text below the label */\n  @property({ reflect: true }) hintText = \"\";\n  /**The input's name attribute */\n  @property({ reflect: true }) name: string;\n  /**Optional. Pass svg html of icons in string form*/\n  @property({ type: String }) icon: string;\n  /**Sets the minimum length of the input */\n  @property({ type: Number, reflect: true }) minlength: number;\n  /**Sets the maximum length of the input */\n  @property({ type: Number, reflect: true }) maxlength: number;\n  /**The input's placeholder text. */\n  @property({ type: String, reflect: true }) placeholder = \"placeholder\";\n  /**A pattern to validate input against. */\n  @property({ type: String }) pattern: string;\n  /**Autofocus the input */\n  @property({ type: Boolean, reflect: true }) autofocus = false;\n  /**Disables the input. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n  /**Makes the input a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n  /**Makes the input readonly. */\n  @property({ type: Boolean, reflect: true }) readonly = false;\n  /** The input's minimum value. Only applies number input types. */\n  @property() min: number | string;\n\n  /** The input's maximum value. Only applies number input types. */\n  @property() max: number | string;\n\n  /**\n   * Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is\n   * implied, allowing any numeric value. Only applies to number input types.\n   */\n  @property() step: number | \"any\";\n\n  /**The input's value attribute. */\n  @property({ reflect: true }) value = \"\";\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()\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  /**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 for absent in custom elements */\n  @property({ type: Boolean, reflect: true }) invalid = false;\n\n  /**@internal */\n  protected inputId: string = genId(\"input\", this.type);\n\n  protected labelId: string = genId(\"label\");\n\n  /** Sets focus on the input. */\n  public focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n  /** Sets blur on the input. */\n  public blur() {\n    this.input.blur();\n  }\n\n  /** Checks for validity and shows the browser's validation message if the control is invalid. */\n  public reportValidity() {\n    return this.input.reportValidity();\n  }\n  public setCustomValidity(err: string) {\n    return this.input.setCustomValidity(err);\n  }\n  public setInvalid(bool: boolean) {\n    this.invalid = bool;\n  }\n  protected _handleChange(event: string) {\n    this.value = this.input.value;\n    this.emit(event);\n  }\n\n  protected _handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  protected _handleBlur() {\n    this.emit(\"sgds-blur\");\n  }\n\n  protected _handleKeyDown(event: KeyboardEvent) {\n    const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;\n\n    // Pressing enter when focused on an input should submit the form like a native input, but we wait a tick before\n    // submitting to allow users to cancel the keydown event if they need to\n    if (event.key === \"Enter\" && !hasModifier) {\n      setTimeout(() => {\n        // Prevent submission when enter is click on a submission in an Input Method Editor with isComposing\n        if (!event.defaultPrevented && !event.isComposing) {\n          this.formSubmitController.submit();\n        }\n      });\n    }\n  }\n\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\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  _handleValueChange() {\n    this.invalid = !this.input.checkValidity();\n  }\n  protected _renderInput() {\n    return html`<input\n        class=${classMap({\n          \"form-control\": true,\n          \"is-invalid\": this.hasFeedback && this.invalid\n        })}\n        type=${this.type}\n        id=${this.inputId}\n        name=${ifDefined(this.name)}\n        placeholder=${ifDefined(this.placeholder)}\n        aria-invalid=${this.invalid ? \"true\" : \"false\"}\n        pattern=${ifDefined(this.pattern)}\n        ?autofocus=${this.autofocus}\n        ?disabled=${this.disabled}\n        ?readonly=${this.readonly}\n        ?required=${this.required}\n        .value=${live(this.value)}\n        minlength=${ifDefined(this.minlength)}\n        maxlength=${ifDefined(this.maxlength)}\n        min=${ifDefined(this.min)}\n        max=${ifDefined(this.max)}\n        step=${ifDefined(this.step as number)}\n        @input=${() => this._handleChange(\"sgds-input\")}\n        @change=${() => this._handleChange(\"sgds-change\")}\n        @keydown=${this._handleKeyDown}\n        @invalid=${() => this.setInvalid(true)}\n        @focus=${this._handleFocus}\n        @blur=${this._handleBlur}\n        aria-describedby=${ifDefined(this.invalid && this.hasFeedback ? `${this.inputId}-invalid` : undefined)}\n        aria-labelledby=\"${this.labelId} ${this.inputId}Help ${this.invalid && this.hasFeedback\n          ? `${this.inputId}-invalid`\n          : \"\"}\"\n      />\n      ${this._renderFeedback()} `;\n  }\n  protected _renderFeedback() {\n    return this.hasFeedback\n      ? html`<div id=\"${this.inputId}-invalid\" class=\"invalid-feedback\">${this.invalidFeedback}</div>`\n      : \"\";\n  }\n  protected _renderLabel() {\n    const labelTemplate = html`\n      <label\n        for=${this.inputId}\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  protected _renderHintText() {\n    const hintTextTemplate = html` <small id=\"${this.inputId}Help\" class=\"form-text\">${this.hintText}</small> `;\n    return this.hintText && hintTextTemplate;\n  }\n  render() {\n    const input = html`${this._renderInput()}`;\n    // if iconName is defined\n    const inputWithIcon = html`\n      <div class=\"sgds form-control-group\">\n        <span class=\"form-control-icon\"> ${unsafeSVG(this.icon)} </span>\n        ${input}\n      </div>\n    `;\n    // if hintText is defined\n\n    return html`\n      <div class=\"form-control-container\">\n        ${html`${this._renderLabel()} ${this._renderHintText()} ${this.icon ? inputWithIcon : input} `}\n      </div>\n    `;\n  }\n}\n\nexport default SgdsInput;\n"],"names":["SgdsElement","FormSubmitController","genId","html","classMap","ifDefined","live","unsafeSVG","feedbackStyles","formHintStyles","formLabelStyles","inputStyle","__decorate","query","property","defaultValue","watch"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAgBA;;;;;;;;AAQG;AACG,MAAO,SAAU,SAAQA,sBAAW,CAAA;AAA1C,IAAA,WAAA,GAAA;;;AAKqB,QAAA,IAAA,CAAA,oBAAoB,GAAG,IAAIC,yBAAoB,CAAC,IAAI,CAAC,CAAC;;QAE5C,IAAI,CAAA,IAAA,GAC/B,MAAM,CAAC;;QAEoB,IAAK,CAAA,KAAA,GAAG,EAAE,CAAC;;QAEX,IAAQ,CAAA,QAAA,GAAG,EAAE,CAAC;;QAUA,IAAW,CAAA,WAAA,GAAG,aAAa,CAAC;;QAI3B,IAAS,CAAA,SAAA,GAAG,KAAK,CAAC;;QAElB,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;;QAEjB,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;;QAEjB,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;;QAchC,IAAK,CAAA,KAAA,GAAG,EAAE,CAAC;;QAGxC,IAAY,CAAA,YAAA,GAAG,EAAE,CAAC;;QAG0B,IAAW,CAAA,WAAA,GAAG,KAAK,CAAC;;QAErB,IAAe,CAAA,eAAA,GAAG,EAAE,CAAC;;QAGpB,IAAO,CAAA,OAAA,GAAG,KAAK,CAAC;;QAGlD,IAAO,CAAA,OAAA,GAAWC,qBAAK,CAAC,OAAO,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;AAE5C,QAAA,IAAA,CAAA,OAAO,GAAWA,qBAAK,CAAC,OAAO,CAAC,CAAC;KAuI5C;;AApIQ,IAAA,KAAK,CAAC,OAAsB,EAAA;AACjC,QAAA,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;KAC3B;;IAEM,IAAI,GAAA;AACT,QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;KACnB;;IAGM,cAAc,GAAA;AACnB,QAAA,OAAO,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE,CAAC;KACpC;AACM,IAAA,iBAAiB,CAAC,GAAW,EAAA;QAClC,OAAO,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC;KAC1C;AACM,IAAA,UAAU,CAAC,IAAa,EAAA;AAC7B,QAAA,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;KACrB;AACS,IAAA,aAAa,CAAC,KAAa,EAAA;QACnC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;AAC9B,QAAA,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAClB;IAES,YAAY,GAAA;AACpB,QAAA,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;KACzB;IAES,WAAW,GAAA;AACnB,QAAA,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KACxB;AAES,IAAA,cAAc,CAAC,KAAoB,EAAA;AAC3C,QAAA,MAAM,WAAW,GAAG,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,MAAM,CAAC;;;QAIrF,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,WAAW,EAAE;YACzC,UAAU,CAAC,MAAK;;gBAEd,IAAI,CAAC,KAAK,CAAC,gBAAgB,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE;AACjD,oBAAA,IAAI,CAAC,oBAAoB,CAAC,MAAM,EAAE,CAAC;iBACpC;AACH,aAAC,CAAC,CAAC;SACJ;KACF;IAGD,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;IACS,YAAY,GAAA;AACpB,QAAA,OAAOC,kBAAI,CAAA,CAAA;AACC,cAAA,EAAAC,oBAAQ,CAAC;AACf,YAAA,cAAc,EAAE,IAAI;AACpB,YAAA,YAAY,EAAE,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,OAAO;SAC/C,CAAC,CAAA;AACK,aAAA,EAAA,IAAI,CAAC,IAAI,CAAA;AACX,WAAA,EAAA,IAAI,CAAC,OAAO,CAAA;AACV,aAAA,EAAAC,sBAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;AACb,oBAAA,EAAAA,sBAAS,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA;uBAC1B,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO,CAAA;AACpC,gBAAA,EAAAA,sBAAS,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;AACpB,mBAAA,EAAA,IAAI,CAAC,SAAS,CAAA;AACf,kBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;AACb,kBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;AACb,kBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;AAChB,eAAA,EAAAC,YAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;AACb,kBAAA,EAAAD,sBAAS,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;AACzB,kBAAA,EAAAA,sBAAS,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;AAC/B,YAAA,EAAAA,sBAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;AACnB,YAAA,EAAAA,sBAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;AAClB,aAAA,EAAAA,sBAAS,CAAC,IAAI,CAAC,IAAc,CAAC,CAAA;AAC5B,eAAA,EAAA,MAAM,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,CAAA;AACrC,gBAAA,EAAA,MAAM,IAAI,CAAC,aAAa,CAAC,aAAa,CAAC,CAAA;AACtC,iBAAA,EAAA,IAAI,CAAC,cAAc,CAAA;AACnB,iBAAA,EAAA,MAAM,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAA;AAC7B,eAAA,EAAA,IAAI,CAAC,YAAY,CAAA;AAClB,cAAA,EAAA,IAAI,CAAC,WAAW,CAAA;2BACLA,sBAAS,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,WAAW,GAAG,CAAG,EAAA,IAAI,CAAC,OAAO,CAAA,QAAA,CAAU,GAAG,SAAS,CAAC,CAAA;AACnF,yBAAA,EAAA,IAAI,CAAC,OAAO,CAAI,CAAA,EAAA,IAAI,CAAC,OAAO,CAAQ,KAAA,EAAA,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,WAAW;AACrF,cAAE,CAAA,EAAG,IAAI,CAAC,OAAO,CAAU,QAAA,CAAA;AAC3B,cAAE,EAAE,CAAA;;AAEN,MAAA,EAAA,IAAI,CAAC,eAAe,EAAE,CAAA,CAAA,CAAG,CAAC;KAC/B;IACS,eAAe,GAAA;QACvB,OAAO,IAAI,CAAC,WAAW;cACnBF,kBAAI,CAAA,CAAY,SAAA,EAAA,IAAI,CAAC,OAAO,CAAsC,mCAAA,EAAA,IAAI,CAAC,eAAe,CAAQ,MAAA,CAAA;cAC9F,EAAE,CAAC;KACR;IACS,YAAY,GAAA;QACpB,MAAM,aAAa,GAAGA,kBAAI,CAAA,CAAA;;AAEhB,YAAA,EAAA,IAAI,CAAC,OAAO,CAAA;AACb,WAAA,EAAA,IAAI,CAAC,OAAO,CAAA;AACT,cAAA,EAAAC,oBAAQ,CAAC;AACf,YAAA,YAAY,EAAE,IAAI;YAClB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC,CAAA;AACC,SAAA,EAAA,IAAI,CAAC,KAAK,CAAA;;KAEhB,CAAC;AACF,QAAA,OAAO,IAAI,CAAC,KAAK,IAAI,aAAa,CAAC;KACpC;IACS,eAAe,GAAA;AACvB,QAAA,MAAM,gBAAgB,GAAGD,kBAAI,CAAA,CAAe,YAAA,EAAA,IAAI,CAAC,OAAO,CAA2B,wBAAA,EAAA,IAAI,CAAC,QAAQ,WAAW,CAAC;AAC5G,QAAA,OAAO,IAAI,CAAC,QAAQ,IAAI,gBAAgB,CAAC;KAC1C;IACD,MAAM,GAAA;QACJ,MAAM,KAAK,GAAGA,kBAAI,CAAA,CAAA,EAAG,IAAI,CAAC,YAAY,EAAE,CAAA,CAAE,CAAC;;QAE3C,MAAM,aAAa,GAAGA,kBAAI,CAAA,CAAA;;AAEa,yCAAA,EAAAI,sBAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;UACrD,KAAK,CAAA;;KAEV,CAAC;;AAGF,QAAA,OAAOJ,kBAAI,CAAA,CAAA;;UAELA,kBAAI,CAAA,GAAG,IAAI,CAAC,YAAY,EAAE,CAAA,CAAA,EAAI,IAAI,CAAC,eAAe,EAAE,IAAI,IAAI,CAAC,IAAI,GAAG,aAAa,GAAG,KAAK,CAAG,CAAA,CAAA,CAAA;;KAEjG,CAAC;KACH;;AAnMM,SAAA,CAAA,MAAM,GAAG,CAAC,GAAGH,sBAAW,CAAC,MAAM,EAAEQ,mBAAc,EAAEC,mBAAc,EAAEC,oBAAe,EAAEC,gBAAU,CAAC,CAAC;AAExEC,gBAAA,CAAA;IAA5BC,mBAAK,CAAC,oBAAoB,CAAC;AAAyB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIxBD,gBAAA,CAAA;AAA5B,IAAAE,sBAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AACnB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEoBF,gBAAA,CAAA;AAA5B,IAAAE,sBAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAY,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEXF,gBAAA,CAAA;AAA5B,IAAAE,sBAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAe,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEdF,gBAAA,CAAA;AAA5B,IAAAE,sBAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAc,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEdF,gBAAA,CAAA;AAA3B,IAAAE,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AAAc,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEEF,gBAAA,CAAA;IAA1CE,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAmB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAElBF,gBAAA,CAAA;IAA1CE,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAmB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAElBF,gBAAA,CAAA;IAA1CE,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAA6B,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAE3CF,gBAAA,CAAA;AAA3B,IAAAE,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AAAiB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEAF,gBAAA,CAAA;IAA3CE,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAmB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAElBF,gBAAA,CAAA;IAA3CE,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEjBF,gBAAA,CAAA;IAA3CE,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEjBF,gBAAA,CAAA;IAA3CE,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEjDF,gBAAA,CAAA;AAAX,IAAAE,sBAAQ,EAAE;AAAsB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,KAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGrBF,gBAAA,CAAA;AAAX,IAAAE,sBAAQ,EAAE;AAAsB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,KAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAMrBF,gBAAA,CAAA;AAAX,IAAAE,sBAAQ,EAAE;AAAsB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGJF,gBAAA,CAAA;AAA5B,IAAAE,sBAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAY,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGxCF,gBAAA,CAAA;AADC,IAAAG,yBAAY,EAAE;AACG,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,cAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAG0BH,gBAAA,CAAA;IAA3CE,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAqB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAErBF,gBAAA,CAAA;IAA1CE,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAsB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,iBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGpBF,gBAAA,CAAA;IAA3CE,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAiB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAuD5DF,gBAAA,CAAA;IADCI,WAAK,CAAC,UAAU,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;AAKjD,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,uBAAA,EAAA,IAAA,CAAA,CAAA;AAGDJ,gBAAA,CAAA;IADCI,WAAK,CAAC,OAAO,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;AAG9C,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,oBAAA,EAAA,IAAA,CAAA;;;;;"}
+{"version":3,"file":"sgds-input.cjs.js","sources":["../../../../src/components/Input/sgds-input.ts"],"sourcesContent":["import { property, query } 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 { unsafeSVG } from \"lit/directives/unsafe-svg.js\";\nimport { html } from \"lit/static-html.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport type { SgdsFormControl } from \"../../utils/form\";\nimport { FormSubmitController } from \"../../utils/form\";\nimport genId from \"../../utils/generateId\";\nimport { watch } from \"../../utils/watch\";\nimport inputStyle from \"./input.css\";\nimport feedbackStyles from \"../../styles/feedback.css\";\nimport formHintStyles from \"../../styles/form-hint.css\";\nimport formLabelStyles from \"../../styles/form-label.css\";\n/**\n * @summary Text inputs allow your users to enter letters, numbers and symbols on a single line.\n *\n * @event sgds-change - Emitted when an alteration to the control's value is committed by the user.\n * @event sgds-input - Emitted when the control receives input and its value changes.\n * @event sgds-focus - Emitted when input is in focus.\n * @event sgds-blur - Emitted when input is not in focus.\n *\n */\nexport class SgdsInput extends SgdsElement implements SgdsFormControl {\n  static styles = [...SgdsElement.styles, feedbackStyles, formHintStyles, formLabelStyles, inputStyle];\n  /**@internal */\n  @query(\"input.form-control\") input: HTMLInputElement;\n  /**@internal */\n  protected readonly formSubmitController = new FormSubmitController(this);\n  /** The type of input which works the same as HTMLInputElement */\n  @property({ reflect: true }) type: \"email\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"time\" | \"url\" =\n    \"text\";\n  /** The input's label  */\n  @property({ reflect: true }) label = \"\";\n  /** The input's hint text below the label */\n  @property({ reflect: true }) hintText = \"\";\n  /**The input's name attribute */\n  @property({ reflect: true }) name: string;\n  /**Optional. Pass svg html of icons in string form*/\n  @property({ type: String }) icon: string;\n  /**Sets the minimum length of the input */\n  @property({ type: Number, reflect: true }) minlength: number;\n  /**Sets the maximum length of the input */\n  @property({ type: Number, reflect: true }) maxlength: number;\n  /**The input's placeholder text. */\n  @property({ type: String, reflect: true }) placeholder = \"placeholder\";\n  /**A pattern to validate input against. */\n  @property({ type: String }) pattern: string;\n  /**Autofocus the input */\n  @property({ type: Boolean, reflect: true }) autofocus = false;\n  /**Disables the input. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n  /**Makes the input a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n  /**Makes the input readonly. */\n  @property({ type: Boolean, reflect: true }) readonly = false;\n  /** The input's minimum value. Only applies number input types. */\n  @property() min: number | string;\n\n  /** The input's maximum value. Only applies number input types. */\n  @property() max: number | string;\n\n  /**\n   * Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is\n   * implied, allowing any numeric value. Only applies to number input types.\n   */\n  @property() step: number | \"any\";\n\n  /**The input's value attribute. */\n  @property({ reflect: true }) value = \"\";\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()\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  /**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 for absent in custom elements */\n  @property({ type: Boolean, reflect: true }) invalid = false;\n\n  /**@internal */\n  protected inputId: string = genId(\"input\", this.type);\n\n  protected labelId: string = genId(\"label\");\n\n  /** Sets focus on the input. */\n  public focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n  /** Sets blur on the input. */\n  public blur() {\n    this.input.blur();\n  }\n\n  /** Checks for validity and shows the browser's validation message if the control is invalid. */\n  public reportValidity() {\n    return this.input.reportValidity();\n  }\n  public setCustomValidity(err: string) {\n    return this.input.setCustomValidity(err);\n  }\n  public setInvalid(bool: boolean) {\n    this.invalid = bool;\n  }\n  protected _handleChange(event: string) {\n    this.value = this.input.value;\n    this.emit(event);\n  }\n\n  protected _handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  protected _handleBlur() {\n    this.emit(\"sgds-blur\");\n  }\n\n  protected _handleKeyDown(event: KeyboardEvent) {\n    const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;\n\n    // Pressing enter when focused on an input should submit the form like a native input, but we wait a tick before\n    // submitting to allow users to cancel the keydown event if they need to\n    if (event.key === \"Enter\" && !hasModifier) {\n      setTimeout(() => {\n        // Prevent submission when enter is click on a submission in an Input Method Editor with isComposing\n        if (!event.defaultPrevented && !event.isComposing) {\n          this.formSubmitController.submit();\n        }\n      });\n    }\n  }\n\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\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  _handleValueChange() {\n    this.invalid = !this.input.checkValidity();\n  }\n  protected _renderInput() {\n    return html`<input\n        class=${classMap({\n          \"form-control\": true,\n          \"is-invalid\": this.hasFeedback && this.invalid\n        })}\n        type=${this.type}\n        id=${this.inputId}\n        name=${ifDefined(this.name)}\n        placeholder=${ifDefined(this.placeholder)}\n        aria-invalid=${this.invalid ? \"true\" : \"false\"}\n        pattern=${ifDefined(this.pattern)}\n        ?autofocus=${this.autofocus}\n        ?disabled=${this.disabled}\n        ?readonly=${this.readonly}\n        ?required=${this.required}\n        .value=${live(this.value)}\n        minlength=${ifDefined(this.minlength)}\n        maxlength=${ifDefined(this.maxlength)}\n        min=${ifDefined(this.min)}\n        max=${ifDefined(this.max)}\n        step=${ifDefined(this.step as number)}\n        @input=${() => this._handleChange(\"sgds-input\")}\n        @change=${() => this._handleChange(\"sgds-change\")}\n        @keydown=${this._handleKeyDown}\n        @invalid=${() => this.setInvalid(true)}\n        @focus=${this._handleFocus}\n        @blur=${this._handleBlur}\n        aria-describedby=${ifDefined(this.invalid && this.hasFeedback ? `${this.inputId}-invalid` : undefined)}\n        aria-labelledby=\"${this.labelId} ${this.inputId}Help ${this.invalid && this.hasFeedback\n          ? `${this.inputId}-invalid`\n          : \"\"}\"\n      />\n      ${this._renderFeedback()} `;\n  }\n  protected _renderFeedback() {\n    return this.hasFeedback && this.invalid\n      ? html`<div id=\"${this.inputId}-invalid\" class=\"invalid-feedback\">${this.invalidFeedback}</div>`\n      : \"\";\n  }\n  protected _renderLabel() {\n    const labelTemplate = html`\n      <label\n        for=${this.inputId}\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  protected _renderHintText() {\n    const hintTextTemplate = html` <small id=\"${this.inputId}Help\" class=\"form-text\">${this.hintText}</small> `;\n    return this.hintText && hintTextTemplate;\n  }\n  render() {\n    const input = html`${this._renderInput()}`;\n    // if iconName is defined\n    const inputWithIcon = html`\n      <div class=\"sgds form-control-group\">\n        <span class=\"form-control-icon\"> ${unsafeSVG(this.icon)} </span>\n        ${input}\n      </div>\n    `;\n    // if hintText is defined\n\n    return html`\n      <div class=\"form-control-container\">\n        ${html`${this._renderLabel()} ${this._renderHintText()} ${this.icon ? inputWithIcon : input} `}\n      </div>\n    `;\n  }\n}\n\nexport default SgdsInput;\n"],"names":["SgdsElement","FormSubmitController","genId","html","classMap","ifDefined","live","unsafeSVG","feedbackStyles","formHintStyles","formLabelStyles","inputStyle","__decorate","query","property","defaultValue","watch"],"mappings":"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"}

package/react/components/Input/sgds-input.js

@@ -145,7 +145,7 @@ class SgdsInput extends SgdsElement {
       ${this._renderFeedback()} `;
     }
     _renderFeedback() {
-        return this.hasFeedback
+        return this.hasFeedback && this.invalid
             ? html `<div id="${this.inputId}-invalid" class="invalid-feedback">${this.invalidFeedback}</div>`
             : "";
     }

package/react/components/Input/sgds-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-input.js","sources":["../../../../src/components/Input/sgds-input.ts"],"sourcesContent":["import { property, query } 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 { unsafeSVG } from \"lit/directives/unsafe-svg.js\";\nimport { html } from \"lit/static-html.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport type { SgdsFormControl } from \"../../utils/form\";\nimport { FormSubmitController } from \"../../utils/form\";\nimport genId from \"../../utils/generateId\";\nimport { watch } from \"../../utils/watch\";\nimport inputStyle from \"./input.css\";\nimport feedbackStyles from \"../../styles/feedback.css\";\nimport formHintStyles from \"../../styles/form-hint.css\";\nimport formLabelStyles from \"../../styles/form-label.css\";\n/**\n * @summary Text inputs allow your users to enter letters, numbers and symbols on a single line.\n *\n * @event sgds-change - Emitted when an alteration to the control's value is committed by the user.\n * @event sgds-input - Emitted when the control receives input and its value changes.\n * @event sgds-focus - Emitted when input is in focus.\n * @event sgds-blur - Emitted when input is not in focus.\n *\n */\nexport class SgdsInput extends SgdsElement implements SgdsFormControl {\n  static styles = [...SgdsElement.styles, feedbackStyles, formHintStyles, formLabelStyles, inputStyle];\n  /**@internal */\n  @query(\"input.form-control\") input: HTMLInputElement;\n  /**@internal */\n  protected readonly formSubmitController = new FormSubmitController(this);\n  /** The type of input which works the same as HTMLInputElement */\n  @property({ reflect: true }) type: \"email\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"time\" | \"url\" =\n    \"text\";\n  /** The input's label  */\n  @property({ reflect: true }) label = \"\";\n  /** The input's hint text below the label */\n  @property({ reflect: true }) hintText = \"\";\n  /**The input's name attribute */\n  @property({ reflect: true }) name: string;\n  /**Optional. Pass svg html of icons in string form*/\n  @property({ type: String }) icon: string;\n  /**Sets the minimum length of the input */\n  @property({ type: Number, reflect: true }) minlength: number;\n  /**Sets the maximum length of the input */\n  @property({ type: Number, reflect: true }) maxlength: number;\n  /**The input's placeholder text. */\n  @property({ type: String, reflect: true }) placeholder = \"placeholder\";\n  /**A pattern to validate input against. */\n  @property({ type: String }) pattern: string;\n  /**Autofocus the input */\n  @property({ type: Boolean, reflect: true }) autofocus = false;\n  /**Disables the input. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n  /**Makes the input a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n  /**Makes the input readonly. */\n  @property({ type: Boolean, reflect: true }) readonly = false;\n  /** The input's minimum value. Only applies number input types. */\n  @property() min: number | string;\n\n  /** The input's maximum value. Only applies number input types. */\n  @property() max: number | string;\n\n  /**\n   * Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is\n   * implied, allowing any numeric value. Only applies to number input types.\n   */\n  @property() step: number | \"any\";\n\n  /**The input's value attribute. */\n  @property({ reflect: true }) value = \"\";\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()\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  /**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 for absent in custom elements */\n  @property({ type: Boolean, reflect: true }) invalid = false;\n\n  /**@internal */\n  protected inputId: string = genId(\"input\", this.type);\n\n  protected labelId: string = genId(\"label\");\n\n  /** Sets focus on the input. */\n  public focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n  /** Sets blur on the input. */\n  public blur() {\n    this.input.blur();\n  }\n\n  /** Checks for validity and shows the browser's validation message if the control is invalid. */\n  public reportValidity() {\n    return this.input.reportValidity();\n  }\n  public setCustomValidity(err: string) {\n    return this.input.setCustomValidity(err);\n  }\n  public setInvalid(bool: boolean) {\n    this.invalid = bool;\n  }\n  protected _handleChange(event: string) {\n    this.value = this.input.value;\n    this.emit(event);\n  }\n\n  protected _handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  protected _handleBlur() {\n    this.emit(\"sgds-blur\");\n  }\n\n  protected _handleKeyDown(event: KeyboardEvent) {\n    const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;\n\n    // Pressing enter when focused on an input should submit the form like a native input, but we wait a tick before\n    // submitting to allow users to cancel the keydown event if they need to\n    if (event.key === \"Enter\" && !hasModifier) {\n      setTimeout(() => {\n        // Prevent submission when enter is click on a submission in an Input Method Editor with isComposing\n        if (!event.defaultPrevented && !event.isComposing) {\n          this.formSubmitController.submit();\n        }\n      });\n    }\n  }\n\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\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  _handleValueChange() {\n    this.invalid = !this.input.checkValidity();\n  }\n  protected _renderInput() {\n    return html`<input\n        class=${classMap({\n          \"form-control\": true,\n          \"is-invalid\": this.hasFeedback && this.invalid\n        })}\n        type=${this.type}\n        id=${this.inputId}\n        name=${ifDefined(this.name)}\n        placeholder=${ifDefined(this.placeholder)}\n        aria-invalid=${this.invalid ? \"true\" : \"false\"}\n        pattern=${ifDefined(this.pattern)}\n        ?autofocus=${this.autofocus}\n        ?disabled=${this.disabled}\n        ?readonly=${this.readonly}\n        ?required=${this.required}\n        .value=${live(this.value)}\n        minlength=${ifDefined(this.minlength)}\n        maxlength=${ifDefined(this.maxlength)}\n        min=${ifDefined(this.min)}\n        max=${ifDefined(this.max)}\n        step=${ifDefined(this.step as number)}\n        @input=${() => this._handleChange(\"sgds-input\")}\n        @change=${() => this._handleChange(\"sgds-change\")}\n        @keydown=${this._handleKeyDown}\n        @invalid=${() => this.setInvalid(true)}\n        @focus=${this._handleFocus}\n        @blur=${this._handleBlur}\n        aria-describedby=${ifDefined(this.invalid && this.hasFeedback ? `${this.inputId}-invalid` : undefined)}\n        aria-labelledby=\"${this.labelId} ${this.inputId}Help ${this.invalid && this.hasFeedback\n          ? `${this.inputId}-invalid`\n          : \"\"}\"\n      />\n      ${this._renderFeedback()} `;\n  }\n  protected _renderFeedback() {\n    return this.hasFeedback\n      ? html`<div id=\"${this.inputId}-invalid\" class=\"invalid-feedback\">${this.invalidFeedback}</div>`\n      : \"\";\n  }\n  protected _renderLabel() {\n    const labelTemplate = html`\n      <label\n        for=${this.inputId}\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  protected _renderHintText() {\n    const hintTextTemplate = html` <small id=\"${this.inputId}Help\" class=\"form-text\">${this.hintText}</small> `;\n    return this.hintText && hintTextTemplate;\n  }\n  render() {\n    const input = html`${this._renderInput()}`;\n    // if iconName is defined\n    const inputWithIcon = html`\n      <div class=\"sgds form-control-group\">\n        <span class=\"form-control-icon\"> ${unsafeSVG(this.icon)} </span>\n        ${input}\n      </div>\n    `;\n    // if hintText is defined\n\n    return html`\n      <div class=\"form-control-container\">\n        ${html`${this._renderLabel()} ${this._renderHintText()} ${this.icon ? inputWithIcon : input} `}\n      </div>\n    `;\n  }\n}\n\nexport default SgdsInput;\n"],"names":["feedbackStyles","formHintStyles","formLabelStyles","inputStyle"],"mappings":"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"}
+{"version":3,"file":"sgds-input.js","sources":["../../../../src/components/Input/sgds-input.ts"],"sourcesContent":["import { property, query } 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 { unsafeSVG } from \"lit/directives/unsafe-svg.js\";\nimport { html } from \"lit/static-html.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport type { SgdsFormControl } from \"../../utils/form\";\nimport { FormSubmitController } from \"../../utils/form\";\nimport genId from \"../../utils/generateId\";\nimport { watch } from \"../../utils/watch\";\nimport inputStyle from \"./input.css\";\nimport feedbackStyles from \"../../styles/feedback.css\";\nimport formHintStyles from \"../../styles/form-hint.css\";\nimport formLabelStyles from \"../../styles/form-label.css\";\n/**\n * @summary Text inputs allow your users to enter letters, numbers and symbols on a single line.\n *\n * @event sgds-change - Emitted when an alteration to the control's value is committed by the user.\n * @event sgds-input - Emitted when the control receives input and its value changes.\n * @event sgds-focus - Emitted when input is in focus.\n * @event sgds-blur - Emitted when input is not in focus.\n *\n */\nexport class SgdsInput extends SgdsElement implements SgdsFormControl {\n  static styles = [...SgdsElement.styles, feedbackStyles, formHintStyles, formLabelStyles, inputStyle];\n  /**@internal */\n  @query(\"input.form-control\") input: HTMLInputElement;\n  /**@internal */\n  protected readonly formSubmitController = new FormSubmitController(this);\n  /** The type of input which works the same as HTMLInputElement */\n  @property({ reflect: true }) type: \"email\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"time\" | \"url\" =\n    \"text\";\n  /** The input's label  */\n  @property({ reflect: true }) label = \"\";\n  /** The input's hint text below the label */\n  @property({ reflect: true }) hintText = \"\";\n  /**The input's name attribute */\n  @property({ reflect: true }) name: string;\n  /**Optional. Pass svg html of icons in string form*/\n  @property({ type: String }) icon: string;\n  /**Sets the minimum length of the input */\n  @property({ type: Number, reflect: true }) minlength: number;\n  /**Sets the maximum length of the input */\n  @property({ type: Number, reflect: true }) maxlength: number;\n  /**The input's placeholder text. */\n  @property({ type: String, reflect: true }) placeholder = \"placeholder\";\n  /**A pattern to validate input against. */\n  @property({ type: String }) pattern: string;\n  /**Autofocus the input */\n  @property({ type: Boolean, reflect: true }) autofocus = false;\n  /**Disables the input. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n  /**Makes the input a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n  /**Makes the input readonly. */\n  @property({ type: Boolean, reflect: true }) readonly = false;\n  /** The input's minimum value. Only applies number input types. */\n  @property() min: number | string;\n\n  /** The input's maximum value. Only applies number input types. */\n  @property() max: number | string;\n\n  /**\n   * Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is\n   * implied, allowing any numeric value. Only applies to number input types.\n   */\n  @property() step: number | \"any\";\n\n  /**The input's value attribute. */\n  @property({ reflect: true }) value = \"\";\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()\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  /**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 for absent in custom elements */\n  @property({ type: Boolean, reflect: true }) invalid = false;\n\n  /**@internal */\n  protected inputId: string = genId(\"input\", this.type);\n\n  protected labelId: string = genId(\"label\");\n\n  /** Sets focus on the input. */\n  public focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n  /** Sets blur on the input. */\n  public blur() {\n    this.input.blur();\n  }\n\n  /** Checks for validity and shows the browser's validation message if the control is invalid. */\n  public reportValidity() {\n    return this.input.reportValidity();\n  }\n  public setCustomValidity(err: string) {\n    return this.input.setCustomValidity(err);\n  }\n  public setInvalid(bool: boolean) {\n    this.invalid = bool;\n  }\n  protected _handleChange(event: string) {\n    this.value = this.input.value;\n    this.emit(event);\n  }\n\n  protected _handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  protected _handleBlur() {\n    this.emit(\"sgds-blur\");\n  }\n\n  protected _handleKeyDown(event: KeyboardEvent) {\n    const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;\n\n    // Pressing enter when focused on an input should submit the form like a native input, but we wait a tick before\n    // submitting to allow users to cancel the keydown event if they need to\n    if (event.key === \"Enter\" && !hasModifier) {\n      setTimeout(() => {\n        // Prevent submission when enter is click on a submission in an Input Method Editor with isComposing\n        if (!event.defaultPrevented && !event.isComposing) {\n          this.formSubmitController.submit();\n        }\n      });\n    }\n  }\n\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\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  _handleValueChange() {\n    this.invalid = !this.input.checkValidity();\n  }\n  protected _renderInput() {\n    return html`<input\n        class=${classMap({\n          \"form-control\": true,\n          \"is-invalid\": this.hasFeedback && this.invalid\n        })}\n        type=${this.type}\n        id=${this.inputId}\n        name=${ifDefined(this.name)}\n        placeholder=${ifDefined(this.placeholder)}\n        aria-invalid=${this.invalid ? \"true\" : \"false\"}\n        pattern=${ifDefined(this.pattern)}\n        ?autofocus=${this.autofocus}\n        ?disabled=${this.disabled}\n        ?readonly=${this.readonly}\n        ?required=${this.required}\n        .value=${live(this.value)}\n        minlength=${ifDefined(this.minlength)}\n        maxlength=${ifDefined(this.maxlength)}\n        min=${ifDefined(this.min)}\n        max=${ifDefined(this.max)}\n        step=${ifDefined(this.step as number)}\n        @input=${() => this._handleChange(\"sgds-input\")}\n        @change=${() => this._handleChange(\"sgds-change\")}\n        @keydown=${this._handleKeyDown}\n        @invalid=${() => this.setInvalid(true)}\n        @focus=${this._handleFocus}\n        @blur=${this._handleBlur}\n        aria-describedby=${ifDefined(this.invalid && this.hasFeedback ? `${this.inputId}-invalid` : undefined)}\n        aria-labelledby=\"${this.labelId} ${this.inputId}Help ${this.invalid && this.hasFeedback\n          ? `${this.inputId}-invalid`\n          : \"\"}\"\n      />\n      ${this._renderFeedback()} `;\n  }\n  protected _renderFeedback() {\n    return this.hasFeedback && this.invalid\n      ? html`<div id=\"${this.inputId}-invalid\" class=\"invalid-feedback\">${this.invalidFeedback}</div>`\n      : \"\";\n  }\n  protected _renderLabel() {\n    const labelTemplate = html`\n      <label\n        for=${this.inputId}\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  protected _renderHintText() {\n    const hintTextTemplate = html` <small id=\"${this.inputId}Help\" class=\"form-text\">${this.hintText}</small> `;\n    return this.hintText && hintTextTemplate;\n  }\n  render() {\n    const input = html`${this._renderInput()}`;\n    // if iconName is defined\n    const inputWithIcon = html`\n      <div class=\"sgds form-control-group\">\n        <span class=\"form-control-icon\"> ${unsafeSVG(this.icon)} </span>\n        ${input}\n      </div>\n    `;\n    // if hintText is defined\n\n    return html`\n      <div class=\"form-control-container\">\n        ${html`${this._renderLabel()} ${this._renderHintText()} ${this.icon ? inputWithIcon : input} `}\n      </div>\n    `;\n  }\n}\n\nexport default SgdsInput;\n"],"names":["feedbackStyles","formHintStyles","formLabelStyles","inputStyle"],"mappings":"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"}

package/react/components/Radio/radio.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.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:block;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}`;
+var css_248z = lit.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}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=radio.cjs.js.map

package/react/components/Radio/radio.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = 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:block;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}`;
+var css_248z = 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}`;
 
 export { css_248z as default };
 //# sourceMappingURL=radio.js.map

package/react/components/Radio/sgds-radio-group.cjs.js

@@ -197,7 +197,7 @@ class SgdsRadioGroup extends sgdsElement["default"] {
           tabindex="-1"
           @invalid=${(e) => this._handleInvalid(e)}
         />
-        ${this.hasFeedback ? lit.html `<div class="invalid-feedback">${this.invalidFeedback}</div>` : ""}
+        ${this.hasFeedback && this.invalid ? lit.html `<div class="invalid-feedback">${this.invalidFeedback}</div>` : ""}
       </fieldset>
     `;
     }

package/react/components/Radio/sgds-radio-group.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-radio-group.cjs.js","sources":["../../../../src/components/Radio/sgds-radio-group.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, query, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { FormSubmitController } from \"../../utils/form\";\nimport { watch } from \"../../utils/watch\";\nimport radioGroupStyles from \"./radio-group.css\";\nimport SgdsRadio from \"./sgds-radio\";\nimport feedbackStyles from \"../../styles/feedback.css\";\nimport formLabelStyles from \"../../styles/form-label.css\";\n\n/**\n * @summary RadioGroup group multiple radios so they function as a single form control.\n *\n * @slot default - The default slot where sgds-radio are placed.\n *\n * @event sgds-change - Emitted when the radio group's selected value changes.\n *\n *\n */\nexport class SgdsRadioGroup extends SgdsElement {\n  static styles = [...SgdsElement.styles, feedbackStyles, formLabelStyles, radioGroupStyles];\n  /**@internal */\n  protected readonly formSubmitController = new FormSubmitController(this, {\n    defaultValue: (control: SgdsRadioGroup) => control.defaultValue\n  });\n  /**@internal */\n  @query(\"slot:not([name])\") defaultSlot: HTMLSlotElement;\n  /**@internal */\n  @query(\".radio-group-validation-input\") input: HTMLInputElement;\n  /**@internal */\n  @state() defaultValue = \"\";\n  /**@internal */\n  @state() private customErrorMessage = \"\";\n  /**  This will be true when the control is in an invalid state. */\n  @property({ type: Boolean, reflect: true }) invalid = false;\n\n  /** The selected value of the control. */\n  @property({ reflect: true }) value = \"\";\n\n  /** The name assigned to the radio controls. */\n  @property({ reflect: true }) name = \"option\";\n\n  /** Ensures a child radio is checked before allowing the containing form to submit. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback = \"\";\n  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n  @property({ type: Boolean, reflect: true }) hasFeedback = false;\n\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  _handleValueChange() {\n    this.emit(\"sgds-change\", { detail: { value: this.value } });\n    this._updateCheckedRadio();\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.defaultValue = this.value;\n  }\n\n  firstUpdated() {\n    const radios = this._radios;\n    radios.forEach((item, index) => {\n      if (radios.length > 1) {\n        switch (index) {\n          case 0:\n            item.setAttribute(\"first-of-type\", \"\");\n            break;\n\n          case radios.length - 1:\n            item.setAttribute(\"last-of-type\", \"\");\n            break;\n\n          default:\n            item.setAttribute(\"nth-of-type\", \"\");\n        }\n      }\n    });\n  }\n\n  /** Gets and return the ValidityState object.  */\n  get validity(): ValidityState {\n    const hasMissingData = !((this.value && this.required) || !this.required);\n    const hasCustomError = this.customErrorMessage !== \"\";\n    return {\n      badInput: false,\n      customError: hasCustomError,\n      patternMismatch: false,\n      rangeOverflow: false,\n      rangeUnderflow: false,\n      stepMismatch: false,\n      tooLong: false,\n      tooShort: false,\n      typeMismatch: false,\n      valid: hasMissingData ? false : true,\n      valueMissing: !hasMissingData\n    };\n  }\n\n  /** Checks for validity and shows the browser's validation message if the control is invalid. */\n  public reportValidity(): boolean {\n    const validity = this.validity;\n\n    this.invalid = !validity.valid;\n\n    if (!validity.valid) {\n      this._showNativeErrorMessage();\n    }\n\n    return !this.invalid;\n  }\n  /**@internal */\n  @queryAssignedElements()\n  private _radios!: Array<SgdsRadio>;\n\n  private _handleRadioClick(event: MouseEvent) {\n    const target = event.target as SgdsRadio;\n\n    if (target.disabled) {\n      return;\n    }\n\n    this.value = target.value;\n    const radios = this._radios;\n    radios.forEach(radio => (radio.checked = radio === target));\n  }\n\n  private _handleKeyDown(event: KeyboardEvent) {\n    if (![\"ArrowUp\", \"ArrowDown\", \"ArrowLeft\", \"ArrowRight\", \" \"].includes(event.key)) {\n      return;\n    }\n\n    const radios = this._radios.filter(radio => !radio.disabled);\n    const checkedRadio = radios.find(radio => radio.checked) ?? radios[0];\n    //if eventkey is space, index increment is 0, if eventkey arrowup/arrowleft, index is -1, arrowright/arrowdown, index incr is 1\n    const incr = event.key === \" \" ? 0 : [\"ArrowUp\", \"ArrowLeft\"].includes(event.key) ? -1 : 1;\n    let index = radios.indexOf(checkedRadio) + incr;\n    if (index < 0) {\n      index = radios.length - 1;\n    }\n    if (index > radios.length - 1) {\n      index = 0;\n    }\n\n    this._radios.forEach(radio => {\n      radio.checked = false;\n      radio.tabIndex = -1;\n    });\n\n    this.value = radios[index].value;\n    radios[index].checked = true;\n    radios[index].tabIndex = 0;\n    radios[index].focus();\n\n    event.preventDefault();\n  }\n\n  private _handleLabelClick() {\n    const radios = this._radios;\n    const checked = radios.find(radio => radio.checked);\n    const radioToFocus = checked || radios[0];\n\n    // Move focus to the checked radio (or the first one if none are checked) when clicking the label\n    if (radioToFocus) {\n      radioToFocus.focus();\n    }\n  }\n\n  private _handleSlotChange() {\n    const radios = this._radios;\n\n    radios.forEach(radio => (radio.checked = radio.value === this.value));\n\n    if (!radios.some(radio => radio.checked)) {\n      if (radios[0]) radios[0].tabIndex = 0;\n    }\n  }\n\n  private _handleInvalid(e: Event) {\n    e.preventDefault();\n    this.invalid = true;\n    this._radios.forEach(radio => (radio.invalid = true));\n  }\n\n  private _showNativeErrorMessage() {\n    this.input.reportValidity();\n  }\n\n  private _updateCheckedRadio() {\n    const radios = this._radios;\n    radios.forEach(radio => (radio.checked = radio.value === this.value));\n    this.invalid = !this.validity.valid;\n    this._radios.forEach(radio => (radio.invalid = this.invalid));\n  }\n\n  render() {\n    const defaultSlot = html`\n      <div>\n        <slot\n          @click=${this._handleRadioClick}\n          @keydown=${this._handleKeyDown}\n          @slotchange=${this._handleSlotChange}\n          role=\"presentation\"\n        ></slot>\n      </div>\n    `;\n    return html`\n      <fieldset name=${this.name}>\n        <label\n          @click=${this._handleLabelClick}\n          class=${classMap({\n            \"form-label\": true,\n            required: this.required\n          })}\n        >\n          <slot name=\"label\"></slot>\n        </label>\n        ${defaultSlot}\n        <input\n          type=\"text\"\n          class=\"radio-group-validation-input ${classMap({\n            \"is-invalid\": this.hasFeedback && this.invalid\n          })}\"\n          ?required=${this.required}\n          tabindex=\"-1\"\n          @invalid=${(e: Event) => this._handleInvalid(e)}\n        />\n        ${this.hasFeedback ? html`<div class=\"invalid-feedback\">${this.invalidFeedback}</div>` : \"\"}\n      </fieldset>\n    `;\n  }\n}\n\nexport default SgdsRadioGroup;\n"],"names":["SgdsElement","FormSubmitController","html","classMap","feedbackStyles","formLabelStyles","radioGroupStyles","__decorate","query","state","property","watch","queryAssignedElements"],"mappings":"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"}
+{"version":3,"file":"sgds-radio-group.cjs.js","sources":["../../../../src/components/Radio/sgds-radio-group.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, query, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { FormSubmitController } from \"../../utils/form\";\nimport { watch } from \"../../utils/watch\";\nimport radioGroupStyles from \"./radio-group.css\";\nimport SgdsRadio from \"./sgds-radio\";\nimport feedbackStyles from \"../../styles/feedback.css\";\nimport formLabelStyles from \"../../styles/form-label.css\";\n\n/**\n * @summary RadioGroup group multiple radios so they function as a single form control.\n *\n * @slot default - The default slot where sgds-radio are placed.\n *\n * @event sgds-change - Emitted when the radio group's selected value changes.\n *\n *\n */\nexport class SgdsRadioGroup extends SgdsElement {\n  static styles = [...SgdsElement.styles, feedbackStyles, formLabelStyles, radioGroupStyles];\n  /**@internal */\n  protected readonly formSubmitController = new FormSubmitController(this, {\n    defaultValue: (control: SgdsRadioGroup) => control.defaultValue\n  });\n  /**@internal */\n  @query(\"slot:not([name])\") defaultSlot: HTMLSlotElement;\n  /**@internal */\n  @query(\".radio-group-validation-input\") input: HTMLInputElement;\n  /**@internal */\n  @state() defaultValue = \"\";\n  /**@internal */\n  @state() private customErrorMessage = \"\";\n  /**  This will be true when the control is in an invalid state. */\n  @property({ type: Boolean, reflect: true }) invalid = false;\n\n  /** The selected value of the control. */\n  @property({ reflect: true }) value = \"\";\n\n  /** The name assigned to the radio controls. */\n  @property({ reflect: true }) name = \"option\";\n\n  /** Ensures a child radio is checked before allowing the containing form to submit. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback = \"\";\n  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n  @property({ type: Boolean, reflect: true }) hasFeedback = false;\n\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  _handleValueChange() {\n    this.emit(\"sgds-change\", { detail: { value: this.value } });\n    this._updateCheckedRadio();\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.defaultValue = this.value;\n  }\n\n  firstUpdated() {\n    const radios = this._radios;\n    radios.forEach((item, index) => {\n      if (radios.length > 1) {\n        switch (index) {\n          case 0:\n            item.setAttribute(\"first-of-type\", \"\");\n            break;\n\n          case radios.length - 1:\n            item.setAttribute(\"last-of-type\", \"\");\n            break;\n\n          default:\n            item.setAttribute(\"nth-of-type\", \"\");\n        }\n      }\n    });\n  }\n\n  /** Gets and return the ValidityState object.  */\n  get validity(): ValidityState {\n    const hasMissingData = !((this.value && this.required) || !this.required);\n    const hasCustomError = this.customErrorMessage !== \"\";\n    return {\n      badInput: false,\n      customError: hasCustomError,\n      patternMismatch: false,\n      rangeOverflow: false,\n      rangeUnderflow: false,\n      stepMismatch: false,\n      tooLong: false,\n      tooShort: false,\n      typeMismatch: false,\n      valid: hasMissingData ? false : true,\n      valueMissing: !hasMissingData\n    };\n  }\n\n  /** Checks for validity and shows the browser's validation message if the control is invalid. */\n  public reportValidity(): boolean {\n    const validity = this.validity;\n\n    this.invalid = !validity.valid;\n\n    if (!validity.valid) {\n      this._showNativeErrorMessage();\n    }\n\n    return !this.invalid;\n  }\n  /**@internal */\n  @queryAssignedElements()\n  private _radios!: Array<SgdsRadio>;\n\n  private _handleRadioClick(event: MouseEvent) {\n    const target = event.target as SgdsRadio;\n\n    if (target.disabled) {\n      return;\n    }\n\n    this.value = target.value;\n    const radios = this._radios;\n    radios.forEach(radio => (radio.checked = radio === target));\n  }\n\n  private _handleKeyDown(event: KeyboardEvent) {\n    if (![\"ArrowUp\", \"ArrowDown\", \"ArrowLeft\", \"ArrowRight\", \" \"].includes(event.key)) {\n      return;\n    }\n\n    const radios = this._radios.filter(radio => !radio.disabled);\n    const checkedRadio = radios.find(radio => radio.checked) ?? radios[0];\n    //if eventkey is space, index increment is 0, if eventkey arrowup/arrowleft, index is -1, arrowright/arrowdown, index incr is 1\n    const incr = event.key === \" \" ? 0 : [\"ArrowUp\", \"ArrowLeft\"].includes(event.key) ? -1 : 1;\n    let index = radios.indexOf(checkedRadio) + incr;\n    if (index < 0) {\n      index = radios.length - 1;\n    }\n    if (index > radios.length - 1) {\n      index = 0;\n    }\n\n    this._radios.forEach(radio => {\n      radio.checked = false;\n      radio.tabIndex = -1;\n    });\n\n    this.value = radios[index].value;\n    radios[index].checked = true;\n    radios[index].tabIndex = 0;\n    radios[index].focus();\n\n    event.preventDefault();\n  }\n\n  private _handleLabelClick() {\n    const radios = this._radios;\n    const checked = radios.find(radio => radio.checked);\n    const radioToFocus = checked || radios[0];\n\n    // Move focus to the checked radio (or the first one if none are checked) when clicking the label\n    if (radioToFocus) {\n      radioToFocus.focus();\n    }\n  }\n\n  private _handleSlotChange() {\n    const radios = this._radios;\n\n    radios.forEach(radio => (radio.checked = radio.value === this.value));\n\n    if (!radios.some(radio => radio.checked)) {\n      if (radios[0]) radios[0].tabIndex = 0;\n    }\n  }\n\n  private _handleInvalid(e: Event) {\n    e.preventDefault();\n    this.invalid = true;\n    this._radios.forEach(radio => (radio.invalid = true));\n  }\n\n  private _showNativeErrorMessage() {\n    this.input.reportValidity();\n  }\n\n  private _updateCheckedRadio() {\n    const radios = this._radios;\n    radios.forEach(radio => (radio.checked = radio.value === this.value));\n    this.invalid = !this.validity.valid;\n    this._radios.forEach(radio => (radio.invalid = this.invalid));\n  }\n\n  render() {\n    const defaultSlot = html`\n      <div>\n        <slot\n          @click=${this._handleRadioClick}\n          @keydown=${this._handleKeyDown}\n          @slotchange=${this._handleSlotChange}\n          role=\"presentation\"\n        ></slot>\n      </div>\n    `;\n    return html`\n      <fieldset name=${this.name}>\n        <label\n          @click=${this._handleLabelClick}\n          class=${classMap({\n            \"form-label\": true,\n            required: this.required\n          })}\n        >\n          <slot name=\"label\"></slot>\n        </label>\n        ${defaultSlot}\n        <input\n          type=\"text\"\n          class=\"radio-group-validation-input ${classMap({\n            \"is-invalid\": this.hasFeedback && this.invalid\n          })}\"\n          ?required=${this.required}\n          tabindex=\"-1\"\n          @invalid=${(e: Event) => this._handleInvalid(e)}\n        />\n        ${this.hasFeedback && this.invalid ? html`<div class=\"invalid-feedback\">${this.invalidFeedback}</div>` : \"\"}\n      </fieldset>\n    `;\n  }\n}\n\nexport default SgdsRadioGroup;\n"],"names":["SgdsElement","FormSubmitController","html","classMap","feedbackStyles","formLabelStyles","radioGroupStyles","__decorate","query","state","property","watch","queryAssignedElements"],"mappings":";;;;;;;;;;;;;;;;AAWA;;;;;;;;AAQG;AACG,MAAO,cAAe,SAAQA,sBAAW,CAAA;AAA/C,IAAA,WAAA,GAAA;;;AAGqB,QAAA,IAAA,CAAA,oBAAoB,GAAG,IAAIC,yBAAoB,CAAC,IAAI,EAAE;YACvE,YAAY,EAAE,CAAC,OAAuB,KAAK,OAAO,CAAC,YAAY;AAChE,SAAA,CAAC,CAAC;;QAMM,IAAY,CAAA,YAAA,GAAG,EAAE,CAAC;;QAEV,IAAkB,CAAA,kBAAA,GAAG,EAAE,CAAC;;QAEG,IAAO,CAAA,OAAA,GAAG,KAAK,CAAC;;QAG/B,IAAK,CAAA,KAAA,GAAG,EAAE,CAAC;;QAGX,IAAI,CAAA,IAAA,GAAG,QAAQ,CAAC;;QAGD,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;;QAGlB,IAAe,CAAA,eAAA,GAAG,EAAE,CAAC;;QAEpB,IAAW,CAAA,WAAA,GAAG,KAAK,CAAC;KAwLjE;IArLC,kBAAkB,GAAA;AAChB,QAAA,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;QAC5D,IAAI,CAAC,mBAAmB,EAAE,CAAC;KAC5B;IAED,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;AAC1B,QAAA,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC;KAChC;IAED,YAAY,GAAA;AACV,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC;QAC5B,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,KAAI;AAC7B,YAAA,IAAI,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE;gBACrB,QAAQ,KAAK;AACX,oBAAA,KAAK,CAAC;AACJ,wBAAA,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,EAAE,CAAC,CAAC;wBACvC,MAAM;AAER,oBAAA,KAAK,MAAM,CAAC,MAAM,GAAG,CAAC;AACpB,wBAAA,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC;wBACtC,MAAM;AAER,oBAAA;AACE,wBAAA,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,EAAE,CAAC,CAAC;iBACxC;aACF;AACH,SAAC,CAAC,CAAC;KACJ;;AAGD,IAAA,IAAI,QAAQ,GAAA;AACV,QAAA,MAAM,cAAc,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,QAAQ,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;AAC1E,QAAA,MAAM,cAAc,GAAG,IAAI,CAAC,kBAAkB,KAAK,EAAE,CAAC;QACtD,OAAO;AACL,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,WAAW,EAAE,cAAc;AAC3B,YAAA,eAAe,EAAE,KAAK;AACtB,YAAA,aAAa,EAAE,KAAK;AACpB,YAAA,cAAc,EAAE,KAAK;AACrB,YAAA,YAAY,EAAE,KAAK;AACnB,YAAA,OAAO,EAAE,KAAK;AACd,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,YAAY,EAAE,KAAK;YACnB,KAAK,EAAE,cAAc,GAAG,KAAK,GAAG,IAAI;YACpC,YAAY,EAAE,CAAC,cAAc;SAC9B,CAAC;KACH;;IAGM,cAAc,GAAA;AACnB,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;AAE/B,QAAA,IAAI,CAAC,OAAO,GAAG,CAAC,QAAQ,CAAC,KAAK,CAAC;AAE/B,QAAA,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE;YACnB,IAAI,CAAC,uBAAuB,EAAE,CAAC;SAChC;AAED,QAAA,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC;KACtB;AAKO,IAAA,iBAAiB,CAAC,KAAiB,EAAA;AACzC,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAAmB,CAAC;AAEzC,QAAA,IAAI,MAAM,CAAC,QAAQ,EAAE;YACnB,OAAO;SACR;AAED,QAAA,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;AAC1B,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC;AAC5B,QAAA,MAAM,CAAC,OAAO,CAAC,KAAK,KAAK,KAAK,CAAC,OAAO,GAAG,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC;KAC7D;AAEO,IAAA,cAAc,CAAC,KAAoB,EAAA;;QACzC,IAAI,CAAC,CAAC,SAAS,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,GAAG,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;YACjF,OAAO;SACR;AAED,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;QAC7D,MAAM,YAAY,GAAG,CAAA,EAAA,GAAA,MAAM,CAAC,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,OAAO,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAI,MAAM,CAAC,CAAC,CAAC,CAAC;;AAEtE,QAAA,MAAM,IAAI,GAAG,KAAK,CAAC,GAAG,KAAK,GAAG,GAAG,CAAC,GAAG,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;QAC3F,IAAI,KAAK,GAAG,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC;AAChD,QAAA,IAAI,KAAK,GAAG,CAAC,EAAE;AACb,YAAA,KAAK,GAAG,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;SAC3B;QACD,IAAI,KAAK,GAAG,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE;YAC7B,KAAK,GAAG,CAAC,CAAC;SACX;AAED,QAAA,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,KAAK,IAAG;AAC3B,YAAA,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC;AACtB,YAAA,KAAK,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;AACtB,SAAC,CAAC,CAAC;QAEH,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC;AACjC,QAAA,MAAM,CAAC,KAAK,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC;AAC7B,QAAA,MAAM,CAAC,KAAK,CAAC,CAAC,QAAQ,GAAG,CAAC,CAAC;AAC3B,QAAA,MAAM,CAAC,KAAK,CAAC,CAAC,KAAK,EAAE,CAAC;QAEtB,KAAK,CAAC,cAAc,EAAE,CAAC;KACxB;IAEO,iBAAiB,GAAA;AACvB,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC;AAC5B,QAAA,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC;QACpD,MAAM,YAAY,GAAG,OAAO,IAAI,MAAM,CAAC,CAAC,CAAC,CAAC;;QAG1C,IAAI,YAAY,EAAE;YAChB,YAAY,CAAC,KAAK,EAAE,CAAC;SACtB;KACF;IAEO,iBAAiB,GAAA;AACvB,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC;QAE5B,MAAM,CAAC,OAAO,CAAC,KAAK,KAAK,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;AAEtE,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,OAAO,CAAC,EAAE;YACxC,IAAI,MAAM,CAAC,CAAC,CAAC;AAAE,gBAAA,MAAM,CAAC,CAAC,CAAC,CAAC,QAAQ,GAAG,CAAC,CAAC;SACvC;KACF;AAEO,IAAA,cAAc,CAAC,CAAQ,EAAA;QAC7B,CAAC,CAAC,cAAc,EAAE,CAAC;AACnB,QAAA,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;AACpB,QAAA,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,KAAK,KAAK,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC,CAAC;KACvD;IAEO,uBAAuB,GAAA;AAC7B,QAAA,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE,CAAC;KAC7B;IAEO,mBAAmB,GAAA;AACzB,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC;QAC5B,MAAM,CAAC,OAAO,CAAC,KAAK,KAAK,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;QACtE,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;AACpC,QAAA,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,KAAK,KAAK,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;KAC/D;IAED,MAAM,GAAA;QACJ,MAAM,WAAW,GAAGC,QAAI,CAAA,CAAA;;;AAGT,iBAAA,EAAA,IAAI,CAAC,iBAAiB,CAAA;AACpB,mBAAA,EAAA,IAAI,CAAC,cAAc,CAAA;AAChB,sBAAA,EAAA,IAAI,CAAC,iBAAiB,CAAA;;;;KAIzC,CAAC;AACF,QAAA,OAAOA,QAAI,CAAA,CAAA;AACQ,qBAAA,EAAA,IAAI,CAAC,IAAI,CAAA;;AAEb,iBAAA,EAAA,IAAI,CAAC,iBAAiB,CAAA;AACvB,gBAAA,EAAAC,oBAAQ,CAAC;AACf,YAAA,YAAY,EAAE,IAAI;YAClB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC,CAAA;;;;UAIF,WAAW,CAAA;;;AAG2B,8CAAA,EAAAA,oBAAQ,CAAC;AAC7C,YAAA,YAAY,EAAE,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,OAAO;SAC/C,CAAC,CAAA;AACU,oBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;;qBAEd,CAAC,CAAQ,KAAK,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,CAAA;;AAE/C,QAAA,EAAA,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,OAAO,GAAGD,QAAI,CAAA,CAAA,8BAAA,EAAiC,IAAI,CAAC,eAAe,QAAQ,GAAG,EAAE,CAAA;;KAE9G,CAAC;KACH;;AAnNM,cAAA,CAAA,MAAM,GAAG,CAAC,GAAGF,sBAAW,CAAC,MAAM,EAAEI,mBAAc,EAAEC,oBAAe,EAAEC,qBAAgB,CAAC,CAAC;AAMhEC,gBAAA,CAAA;IAA1BC,mBAAK,CAAC,kBAAkB,CAAC;AAA8B,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEhBD,gBAAA,CAAA;IAAvCC,mBAAK,CAAC,+BAA+B,CAAC;AAAyB,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEvDD,gBAAA,CAAA;AAAR,IAAAE,mBAAK,EAAE;AAAmB,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,cAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEVF,gBAAA,CAAA;AAAhB,IAAAE,mBAAK,EAAE;AAAiC,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,oBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEGF,gBAAA,CAAA;IAA3CG,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAiB,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAG/BH,gBAAA,CAAA;AAA5B,IAAAG,sBAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAY,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGXH,gBAAA,CAAA;AAA5B,IAAAG,sBAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAiB,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGDH,gBAAA,CAAA;IAA3CG,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkB,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGlBH,gBAAA,CAAA;IAA1CG,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAsB,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,iBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEpBH,gBAAA,CAAA;IAA3CG,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAqB,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGhEH,gBAAA,CAAA;IADCI,WAAK,CAAC,OAAO,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;AAI9C,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,oBAAA,EAAA,IAAA,CAAA,CAAA;AA4DOJ,gBAAA,CAAA;AADP,IAAAK,mCAAqB,EAAE;AACW,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA;;;;;"}

package/react/components/Radio/sgds-radio-group.js

@@ -193,7 +193,7 @@ class SgdsRadioGroup extends SgdsElement {
           tabindex="-1"
           @invalid=${(e) => this._handleInvalid(e)}
         />
-        ${this.hasFeedback ? html `<div class="invalid-feedback">${this.invalidFeedback}</div>` : ""}
+        ${this.hasFeedback && this.invalid ? html `<div class="invalid-feedback">${this.invalidFeedback}</div>` : ""}
       </fieldset>
     `;
     }