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

package/react/components/Stepper/stepper.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`.stepper{display:flex;flex-wrap:wrap}.stepper.vertical{flex-direction:column}.stepper.horizontal .stepper-item-container{align-items:center;display:flex;flex-basis:1em;flex-direction:column;flex-grow:1;flex-shrink:1;position:relative}.stepper.vertical .stepper-item-container{position:relative;width:fit-content}.stepper .stepper-item{align-items:center;display:flex;flex-direction:column;gap:var(--sgds-gap-sm)}.stepper.vertical .stepper-item{align-items:flex-start;flex-direction:row}.stepper .stepper-item:focus,.stepper .stepper-item:focus-visible{outline:0}.stepper .stepper-item.is-clickable:focus,.stepper .stepper-item.is-clickable:focus-visible{box-shadow:var(--sgds-box-shadow-focus)}.stepper.horizontal .stepper-item-container:not(:first-child) .stepper-item:before{background:var(--sgds-default-bg-translucent);bottom:0;content:" ";height:var(--sgds-dimension-2);left:calc(-50% + 16px);position:absolute;top:15px;width:calc(100% - var(--sgds-dimension-32));z-index:-1}.stepper.vertical .stepper-item-container:not(:last-child) .stepper-item:after{background:var(--sgds-default-bg-translucent);bottom:0;content:" ";height:calc(100% - var(--sgds-dimension-32));left:15px;position:absolute;top:32px;width:var(--sgds-dimension-2);z-index:-1}.stepper.horizontal .stepper-item-container .stepper-item.is-active:before,.stepper.horizontal .stepper-item-container .stepper-item.is-completed:before,.stepper.vertical .stepper-item-container .stepper-item.is-completed:after{background:var(--sgds-primary-bg)}.stepper .stepper-item.is-clickable{cursor:pointer}.stepper .stepper-marker{align-items:center;background:var(--sgds-default-bg-translucent);border:var(--sgds-border-width-2) solid var(--sgds-default-border-color-transparent);border-radius:50%;color:var(--sgds-default-color);display:flex;height:var(--sgds-dimension-32);justify-content:center;width:var(--sgds-dimension-32);z-index:1}.stepper:not(.vertical) .stepper-detail{max-width:var(--sgds-dimension-128);text-align:center}.stepper.vertical .stepper-detail{padding:var(--sgds-padding-2-xs) 0 var(--sgds-padding-xl);text-align:left}.stepper .stepper-item:not(.is-active):not(.is-completed) .stepper-detail{color:var(--sgds-default-color-subtle)}.stepper .stepper-item.is-clickable:hover .stepper-marker{background-color:var(--sgds-primary-bg-emphasis);border-color:var(--sgds-default-border-color-transparent);color:var(--sgds-default-color-on-dark)}.stepper .stepper-item.is-clickable .stepper-detail,.stepper.clickable .stepper-item.is-active .stepper-detail{color:var(--sgds-primary-color)}.stepper .stepper-item.is-active .stepper-marker{background-color:var(--sgds-primary-bg);color:var(--sgds-default-color-on-dark)}.stepper .stepper-item.is-completed .stepper-marker{background-color:var(--sgds-default-bg);border:var(--sgds-border-width-2) solid var(--sgds-primary-border-color);color:var(--sgds-primary-color)}`;
+var css_248z = lit.css`.stepper{display:flex;flex-wrap:wrap}.stepper.vertical{flex-direction:column}.stepper.horizontal .stepper-item-container{align-items:center;display:flex;flex-basis:1em;flex-direction:column;flex-grow:1;flex-shrink:1;position:relative}.stepper.vertical .stepper-item-container{position:relative;width:fit-content}.stepper .stepper-item{align-items:center;display:flex;flex-direction:column;gap:var(--sgds-gap-sm)}.stepper.vertical .stepper-item{align-items:flex-start;flex-direction:row}.stepper .stepper-item:focus,.stepper .stepper-item:focus-visible{outline:0}.stepper .stepper-item.is-clickable:focus,.stepper .stepper-item.is-clickable:focus-visible{box-shadow:var(--sgds-box-shadow-focus)}.stepper.horizontal .stepper-item-container:not(:first-child) .stepper-item:before{background:var(--sgds-default-bg-translucent);bottom:0;content:" ";height:var(--sgds-dimension-2);left:calc(-50% + 16px);position:absolute;top:15px;width:calc(100% - var(--sgds-dimension-32))}.stepper.vertical .stepper-item-container:not(:last-child) .stepper-item:after{background:var(--sgds-default-bg-translucent);bottom:0;content:" ";height:calc(100% - var(--sgds-dimension-32));left:15px;position:absolute;top:32px;width:var(--sgds-dimension-2)}.stepper.horizontal .stepper-item-container .stepper-item.is-active:before,.stepper.horizontal .stepper-item-container .stepper-item.is-completed:before,.stepper.vertical .stepper-item-container .stepper-item.is-completed:after{background:var(--sgds-primary-bg)}.stepper .stepper-item.is-clickable{cursor:pointer}.stepper .stepper-marker{align-items:center;background:var(--sgds-default-bg-translucent);border:var(--sgds-border-width-2) solid var(--sgds-default-border-color-transparent);border-radius:50%;color:var(--sgds-default-color);display:flex;height:var(--sgds-dimension-32);justify-content:center;width:var(--sgds-dimension-32);z-index:1}.stepper:not(.vertical) .stepper-detail{max-width:var(--sgds-dimension-128);text-align:center}.stepper.vertical .stepper-detail{padding:var(--sgds-padding-2-xs) 0 var(--sgds-padding-xl);text-align:left}.stepper .stepper-item:not(.is-active):not(.is-completed) .stepper-detail{color:var(--sgds-default-color-subtle)}.stepper .stepper-item.is-clickable:hover .stepper-marker{background-color:var(--sgds-primary-bg-emphasis);border-color:var(--sgds-default-border-color-transparent);color:var(--sgds-default-color-on-dark)}.stepper .stepper-item.is-clickable .stepper-detail,.stepper.clickable .stepper-item.is-active .stepper-detail{color:var(--sgds-primary-color)}.stepper .stepper-item.is-active .stepper-marker{background-color:var(--sgds-primary-bg);color:var(--sgds-default-color-on-dark)}.stepper .stepper-item.is-completed .stepper-marker{background-color:var(--sgds-default-bg);border:var(--sgds-border-width-2) solid var(--sgds-primary-border-color);color:var(--sgds-primary-color)}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=stepper.cjs.js.map

package/react/components/Stepper/stepper.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`.stepper{display:flex;flex-wrap:wrap}.stepper.vertical{flex-direction:column}.stepper.horizontal .stepper-item-container{align-items:center;display:flex;flex-basis:1em;flex-direction:column;flex-grow:1;flex-shrink:1;position:relative}.stepper.vertical .stepper-item-container{position:relative;width:fit-content}.stepper .stepper-item{align-items:center;display:flex;flex-direction:column;gap:var(--sgds-gap-sm)}.stepper.vertical .stepper-item{align-items:flex-start;flex-direction:row}.stepper .stepper-item:focus,.stepper .stepper-item:focus-visible{outline:0}.stepper .stepper-item.is-clickable:focus,.stepper .stepper-item.is-clickable:focus-visible{box-shadow:var(--sgds-box-shadow-focus)}.stepper.horizontal .stepper-item-container:not(:first-child) .stepper-item:before{background:var(--sgds-default-bg-translucent);bottom:0;content:" ";height:var(--sgds-dimension-2);left:calc(-50% + 16px);position:absolute;top:15px;width:calc(100% - var(--sgds-dimension-32));z-index:-1}.stepper.vertical .stepper-item-container:not(:last-child) .stepper-item:after{background:var(--sgds-default-bg-translucent);bottom:0;content:" ";height:calc(100% - var(--sgds-dimension-32));left:15px;position:absolute;top:32px;width:var(--sgds-dimension-2);z-index:-1}.stepper.horizontal .stepper-item-container .stepper-item.is-active:before,.stepper.horizontal .stepper-item-container .stepper-item.is-completed:before,.stepper.vertical .stepper-item-container .stepper-item.is-completed:after{background:var(--sgds-primary-bg)}.stepper .stepper-item.is-clickable{cursor:pointer}.stepper .stepper-marker{align-items:center;background:var(--sgds-default-bg-translucent);border:var(--sgds-border-width-2) solid var(--sgds-default-border-color-transparent);border-radius:50%;color:var(--sgds-default-color);display:flex;height:var(--sgds-dimension-32);justify-content:center;width:var(--sgds-dimension-32);z-index:1}.stepper:not(.vertical) .stepper-detail{max-width:var(--sgds-dimension-128);text-align:center}.stepper.vertical .stepper-detail{padding:var(--sgds-padding-2-xs) 0 var(--sgds-padding-xl);text-align:left}.stepper .stepper-item:not(.is-active):not(.is-completed) .stepper-detail{color:var(--sgds-default-color-subtle)}.stepper .stepper-item.is-clickable:hover .stepper-marker{background-color:var(--sgds-primary-bg-emphasis);border-color:var(--sgds-default-border-color-transparent);color:var(--sgds-default-color-on-dark)}.stepper .stepper-item.is-clickable .stepper-detail,.stepper.clickable .stepper-item.is-active .stepper-detail{color:var(--sgds-primary-color)}.stepper .stepper-item.is-active .stepper-marker{background-color:var(--sgds-primary-bg);color:var(--sgds-default-color-on-dark)}.stepper .stepper-item.is-completed .stepper-marker{background-color:var(--sgds-default-bg);border:var(--sgds-border-width-2) solid var(--sgds-primary-border-color);color:var(--sgds-primary-color)}`;
+var css_248z = css`.stepper{display:flex;flex-wrap:wrap}.stepper.vertical{flex-direction:column}.stepper.horizontal .stepper-item-container{align-items:center;display:flex;flex-basis:1em;flex-direction:column;flex-grow:1;flex-shrink:1;position:relative}.stepper.vertical .stepper-item-container{position:relative;width:fit-content}.stepper .stepper-item{align-items:center;display:flex;flex-direction:column;gap:var(--sgds-gap-sm)}.stepper.vertical .stepper-item{align-items:flex-start;flex-direction:row}.stepper .stepper-item:focus,.stepper .stepper-item:focus-visible{outline:0}.stepper .stepper-item.is-clickable:focus,.stepper .stepper-item.is-clickable:focus-visible{box-shadow:var(--sgds-box-shadow-focus)}.stepper.horizontal .stepper-item-container:not(:first-child) .stepper-item:before{background:var(--sgds-default-bg-translucent);bottom:0;content:" ";height:var(--sgds-dimension-2);left:calc(-50% + 16px);position:absolute;top:15px;width:calc(100% - var(--sgds-dimension-32))}.stepper.vertical .stepper-item-container:not(:last-child) .stepper-item:after{background:var(--sgds-default-bg-translucent);bottom:0;content:" ";height:calc(100% - var(--sgds-dimension-32));left:15px;position:absolute;top:32px;width:var(--sgds-dimension-2)}.stepper.horizontal .stepper-item-container .stepper-item.is-active:before,.stepper.horizontal .stepper-item-container .stepper-item.is-completed:before,.stepper.vertical .stepper-item-container .stepper-item.is-completed:after{background:var(--sgds-primary-bg)}.stepper .stepper-item.is-clickable{cursor:pointer}.stepper .stepper-marker{align-items:center;background:var(--sgds-default-bg-translucent);border:var(--sgds-border-width-2) solid var(--sgds-default-border-color-transparent);border-radius:50%;color:var(--sgds-default-color);display:flex;height:var(--sgds-dimension-32);justify-content:center;width:var(--sgds-dimension-32);z-index:1}.stepper:not(.vertical) .stepper-detail{max-width:var(--sgds-dimension-128);text-align:center}.stepper.vertical .stepper-detail{padding:var(--sgds-padding-2-xs) 0 var(--sgds-padding-xl);text-align:left}.stepper .stepper-item:not(.is-active):not(.is-completed) .stepper-detail{color:var(--sgds-default-color-subtle)}.stepper .stepper-item.is-clickable:hover .stepper-marker{background-color:var(--sgds-primary-bg-emphasis);border-color:var(--sgds-default-border-color-transparent);color:var(--sgds-default-color-on-dark)}.stepper .stepper-item.is-clickable .stepper-detail,.stepper.clickable .stepper-item.is-active .stepper-detail{color:var(--sgds-primary-color)}.stepper .stepper-item.is-active .stepper-marker{background-color:var(--sgds-primary-bg);color:var(--sgds-default-color-on-dark)}.stepper .stepper-item.is-completed .stepper-marker{background-color:var(--sgds-default-bg);border:var(--sgds-border-width-2) solid var(--sgds-primary-border-color);color:var(--sgds-primary-color)}`;
 
 export { css_248z as default };
 //# sourceMappingURL=stepper.js.map

package/react/components/Switch/sgds-switch.cjs.js

@@ -7,7 +7,6 @@ var tslib = require('tslib');
 var lit = require('lit');
 var decorators_js = require('lit/decorators.js');
 var classMap_js = require('lit/directives/class-map.js');
-var formCheckElement = require('../../base/form-check-element.cjs.js');
 var sgdsElement = require('../../base/sgds-element.cjs.js');
 var defaultvalue = require('../../utils/defaultvalue.cjs.js');
 var generateId = require('../../utils/generateId.cjs.js');
@@ -95,7 +94,7 @@ class SgdsSwitch extends sgdsElement["default"] {
     `;
     }
 }
-SgdsSwitch.styles = [...formCheckElement.FormCheckElement.styles, formLabel["default"], _switch["default"]];
+SgdsSwitch.styles = [...sgdsElement["default"].styles, formLabel["default"], _switch["default"]];
 tslib.__decorate([
     decorators_js.property({ reflect: true, type: String })
 ], SgdsSwitch.prototype, "size", void 0);

package/react/components/Switch/sgds-switch.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-switch.cjs.js","sources":["../../../../src/components/Switch/sgds-switch.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, query, queryAssignedNodes } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport FormCheckElement from \"../../base/form-check-element\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport genId from \"../../utils/generateId\";\nimport { watch } from \"../../utils/watch\";\nimport formLabelStyles from \"../../styles/form-label.css\";\nimport switchStyle from \"./switch.css\";\n\n/**\n * @summary Switch component is used to toggle on and off or yes or no action.\n *\n * @slot default - The default label of switch on the right side of the switch\n * @slot leftLabel - The label on the left side of the switch\n *\n * @event sgds-change - Emitted when the checked state changes.\n *\n */\nexport class SgdsSwitch extends SgdsElement {\n  static styles = [...FormCheckElement.styles, formLabelStyles, switchStyle];\n\n  /** The size of the switch. By default, it is small size */\n  @property({ reflect: true, type: String }) size: \"sm\" | \"md\" | \"lg\" = \"md\";\n  /** When enabled, icon appears in the switch */\n  @property({ reflect: true, type: Boolean }) icon = false;\n\n  /**@internal */\n  @query('input[type=\"checkbox\"]') input: HTMLInputElement;\n\n  /** Draws the switch in a checked state. */\n  @property({ type: Boolean, reflect: true }) checked = false;\n\n  /** Disables the switch (so the user can't check / uncheck it). */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** @internal Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */\n  @defaultValue(\"checked\")\n  defaultChecked = false;\n\n  /** Simulates a click on the switch. */\n  public click() {\n    this.input.click();\n  }\n  /** Sets focus on the switch. */\n  public focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  /** Removes focus from the switch. */\n  public blur() {\n    this.input.blur();\n  }\n\n  private _handleChange() {\n    this.checked = !this.checked;\n    this.emit(\"sgds-change\", { detail: { checked: this.checked } });\n  }\n\n  private _handleKeyDown(event: KeyboardEvent) {\n    const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;\n    if (event.key === \"Enter\" && !hasModifier) {\n      this.click();\n    }\n  }\n\n  /** @internal For Id/For pair of the HTML form control and label. */\n  private _inputId = genId(\"switch\");\n\n  /** @internal */\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabledChange() {\n    // Disabled form controls are always valid, so we need to recheck validity when the state changes\n    this.input.disabled = this.disabled;\n  }\n  @queryAssignedNodes({ slot: \"leftLabel\", flatten: true })\n  private _leftIconNodes!: Array<Node>;\n\n  firstUpdated() {\n    if (this._leftIconNodes.length === 0) {\n      return this.shadowRoot.querySelector(\".form-check-label.left-label\")?.classList.add(\"d-none\");\n    }\n  }\n\n  render() {\n    return html`\n      <div class=\"form-check\">\n        <label for=\"${this._inputId}\" class=\"form-check-label left-label\"><slot name=\"leftLabel\"></slot></label>\n        <input\n          class=${classMap({\n            \"form-check-input\": true\n          })}\n          type=\"checkbox\"\n          id=${this._inputId}\n          ?checked=${this.checked}\n          ?disabled=${this.disabled}\n          aria-disabled=${this.disabled ? \"true\" : \"false\"}\n          aria-checked=${this.checked ? \"true\" : \"false\"}\n          @change=${this._handleChange}\n          @keydown=${this._handleKeyDown}\n        />\n        <label for=\"${this._inputId}\" class=\"form-check-label\"><slot></slot></label>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsSwitch;\n"],"names":["SgdsElement","genId","html","classMap","FormCheckElement","formLabelStyles","switchStyle","__decorate","property","query","defaultValue","watch","queryAssignedNodes"],"mappings":";;;;;;;;;;;;;;;;;AAWA;;;;;;;;AAQG;AACG,MAAO,UAAW,SAAQA,sBAAW,CAAA;AAA3C,IAAA,WAAA,GAAA;;;QAI6C,IAAI,CAAA,IAAA,GAAuB,IAAI,CAAC;;QAE/B,IAAI,CAAA,IAAA,GAAG,KAAK,CAAC;;QAMb,IAAO,CAAA,OAAA,GAAG,KAAK,CAAC;;QAGhB,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;;QAI7D,IAAc,CAAA,cAAA,GAAG,KAAK,CAAC;;AA6Bf,QAAA,IAAA,CAAA,QAAQ,GAAGC,qBAAK,CAAC,QAAQ,CAAC,CAAC;KAsCpC;;IAhEQ,KAAK,GAAA;AACV,QAAA,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;KACpB;;AAEM,IAAA,KAAK,CAAC,OAAsB,EAAA;AACjC,QAAA,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;KAC3B;;IAGM,IAAI,GAAA;AACT,QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;KACnB;IAEO,aAAa,GAAA;AACnB,QAAA,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;AAC7B,QAAA,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;KACjE;AAEO,IAAA,cAAc,CAAC,KAAoB,EAAA;AACzC,QAAA,MAAM,WAAW,GAAG,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,MAAM,CAAC;QACrF,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,WAAW,EAAE;YACzC,IAAI,CAAC,KAAK,EAAE,CAAC;SACd;KACF;;IAOD,qBAAqB,GAAA;;QAEnB,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;KACrC;IAID,YAAY,GAAA;;QACV,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,KAAK,CAAC,EAAE;AACpC,YAAA,OAAO,MAAA,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,8BAA8B,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;SAC/F;KACF;IAED,MAAM,GAAA;AACJ,QAAA,OAAOC,QAAI,CAAA,CAAA;;AAEO,oBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;;AAEjB,gBAAA,EAAAC,oBAAQ,CAAC;AACf,YAAA,kBAAkB,EAAE,IAAI;SACzB,CAAC,CAAA;;AAEG,aAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;AACP,mBAAA,EAAA,IAAI,CAAC,OAAO,CAAA;AACX,oBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;0BACT,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;yBACjC,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO,CAAA;AACpC,kBAAA,EAAA,IAAI,CAAC,aAAa,CAAA;AACjB,mBAAA,EAAA,IAAI,CAAC,cAAc,CAAA;;AAElB,oBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;;KAE9B,CAAC;KACH;;AApFM,UAAA,CAAA,MAAM,GAAG,CAAC,GAAGC,iCAAgB,CAAC,MAAM,EAAEC,oBAAe,EAAEC,kBAAW,CAA5D,CAA8D;AAGhCC,gBAAA,CAAA;IAA1CC,sBAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AAAiC,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAE/BD,gBAAA,CAAA;IAA3CC,sBAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;AAAc,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGxBD,gBAAA,CAAA;IAAhCE,mBAAK,CAAC,wBAAwB,CAAC;AAAyB,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGbF,gBAAA,CAAA;IAA3CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAiB,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGhBD,gBAAA,CAAA;IAA3CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkB,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAI7DD,gBAAA,CAAA;IADCG,yBAAY,CAAC,SAAS,CAAC;AACD,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,gBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAiCvBH,gBAAA,CAAA;IADCI,WAAK,CAAC,UAAU,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;AAIjD,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,uBAAA,EAAA,IAAA,CAAA,CAAA;AAEOJ,gBAAA,CAAA;IADPK,gCAAkB,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AACpB,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,gBAAA,EAAA,KAAA,CAAA,CAAA;;;;;"}
+{"version":3,"file":"sgds-switch.cjs.js","sources":["../../../../src/components/Switch/sgds-switch.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, query, queryAssignedNodes } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport genId from \"../../utils/generateId\";\nimport { watch } from \"../../utils/watch\";\nimport formLabelStyles from \"../../styles/form-label.css\";\nimport switchStyle from \"./switch.css\";\n\n/**\n * @summary Switch component is used to toggle on and off or yes or no action.\n *\n * @slot default - The default label of switch on the right side of the switch\n * @slot leftLabel - The label on the left side of the switch\n *\n * @event sgds-change - Emitted when the checked state changes.\n *\n */\nexport class SgdsSwitch extends SgdsElement {\n  static styles = [...SgdsElement.styles, formLabelStyles, switchStyle];\n\n  /** The size of the switch. By default, it is small size */\n  @property({ reflect: true, type: String }) size: \"sm\" | \"md\" | \"lg\" = \"md\";\n  /** When enabled, icon appears in the switch */\n  @property({ reflect: true, type: Boolean }) icon = false;\n\n  /**@internal */\n  @query('input[type=\"checkbox\"]') input: HTMLInputElement;\n\n  /** Draws the switch in a checked state. */\n  @property({ type: Boolean, reflect: true }) checked = false;\n\n  /** Disables the switch (so the user can't check / uncheck it). */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** @internal Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */\n  @defaultValue(\"checked\")\n  defaultChecked = false;\n\n  /** Simulates a click on the switch. */\n  public click() {\n    this.input.click();\n  }\n  /** Sets focus on the switch. */\n  public focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  /** Removes focus from the switch. */\n  public blur() {\n    this.input.blur();\n  }\n\n  private _handleChange() {\n    this.checked = !this.checked;\n    this.emit(\"sgds-change\", { detail: { checked: this.checked } });\n  }\n\n  private _handleKeyDown(event: KeyboardEvent) {\n    const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;\n    if (event.key === \"Enter\" && !hasModifier) {\n      this.click();\n    }\n  }\n\n  /** @internal For Id/For pair of the HTML form control and label. */\n  private _inputId = genId(\"switch\");\n\n  /** @internal */\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabledChange() {\n    // Disabled form controls are always valid, so we need to recheck validity when the state changes\n    this.input.disabled = this.disabled;\n  }\n  @queryAssignedNodes({ slot: \"leftLabel\", flatten: true })\n  private _leftIconNodes!: Array<Node>;\n\n  firstUpdated() {\n    if (this._leftIconNodes.length === 0) {\n      return this.shadowRoot.querySelector(\".form-check-label.left-label\")?.classList.add(\"d-none\");\n    }\n  }\n\n  render() {\n    return html`\n      <div class=\"form-check\">\n        <label for=\"${this._inputId}\" class=\"form-check-label left-label\"><slot name=\"leftLabel\"></slot></label>\n        <input\n          class=${classMap({\n            \"form-check-input\": true\n          })}\n          type=\"checkbox\"\n          id=${this._inputId}\n          ?checked=${this.checked}\n          ?disabled=${this.disabled}\n          aria-disabled=${this.disabled ? \"true\" : \"false\"}\n          aria-checked=${this.checked ? \"true\" : \"false\"}\n          @change=${this._handleChange}\n          @keydown=${this._handleKeyDown}\n        />\n        <label for=\"${this._inputId}\" class=\"form-check-label\"><slot></slot></label>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsSwitch;\n"],"names":["SgdsElement","genId","html","classMap","formLabelStyles","switchStyle","__decorate","property","query","defaultValue","watch","queryAssignedNodes"],"mappings":"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"}

package/react/components/Switch/sgds-switch.js

@@ -3,7 +3,6 @@ import { __decorate } from 'tslib';
 import { html } from 'lit';
 import { property, query, queryAssignedNodes } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { FormCheckElement } from '../../base/form-check-element.js';
 import SgdsElement from '../../base/sgds-element.js';
 import { defaultValue } from '../../utils/defaultvalue.js';
 import genId from '../../utils/generateId.js';
@@ -91,7 +90,7 @@ class SgdsSwitch extends SgdsElement {
     `;
     }
 }
-SgdsSwitch.styles = [...FormCheckElement.styles, css_248z, css_248z$1];
+SgdsSwitch.styles = [...SgdsElement.styles, css_248z, css_248z$1];
 __decorate([
     property({ reflect: true, type: String })
 ], SgdsSwitch.prototype, "size", void 0);

package/react/components/Switch/sgds-switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-switch.js","sources":["../../../../src/components/Switch/sgds-switch.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, query, queryAssignedNodes } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport FormCheckElement from \"../../base/form-check-element\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport genId from \"../../utils/generateId\";\nimport { watch } from \"../../utils/watch\";\nimport formLabelStyles from \"../../styles/form-label.css\";\nimport switchStyle from \"./switch.css\";\n\n/**\n * @summary Switch component is used to toggle on and off or yes or no action.\n *\n * @slot default - The default label of switch on the right side of the switch\n * @slot leftLabel - The label on the left side of the switch\n *\n * @event sgds-change - Emitted when the checked state changes.\n *\n */\nexport class SgdsSwitch extends SgdsElement {\n  static styles = [...FormCheckElement.styles, formLabelStyles, switchStyle];\n\n  /** The size of the switch. By default, it is small size */\n  @property({ reflect: true, type: String }) size: \"sm\" | \"md\" | \"lg\" = \"md\";\n  /** When enabled, icon appears in the switch */\n  @property({ reflect: true, type: Boolean }) icon = false;\n\n  /**@internal */\n  @query('input[type=\"checkbox\"]') input: HTMLInputElement;\n\n  /** Draws the switch in a checked state. */\n  @property({ type: Boolean, reflect: true }) checked = false;\n\n  /** Disables the switch (so the user can't check / uncheck it). */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** @internal Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */\n  @defaultValue(\"checked\")\n  defaultChecked = false;\n\n  /** Simulates a click on the switch. */\n  public click() {\n    this.input.click();\n  }\n  /** Sets focus on the switch. */\n  public focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  /** Removes focus from the switch. */\n  public blur() {\n    this.input.blur();\n  }\n\n  private _handleChange() {\n    this.checked = !this.checked;\n    this.emit(\"sgds-change\", { detail: { checked: this.checked } });\n  }\n\n  private _handleKeyDown(event: KeyboardEvent) {\n    const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;\n    if (event.key === \"Enter\" && !hasModifier) {\n      this.click();\n    }\n  }\n\n  /** @internal For Id/For pair of the HTML form control and label. */\n  private _inputId = genId(\"switch\");\n\n  /** @internal */\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabledChange() {\n    // Disabled form controls are always valid, so we need to recheck validity when the state changes\n    this.input.disabled = this.disabled;\n  }\n  @queryAssignedNodes({ slot: \"leftLabel\", flatten: true })\n  private _leftIconNodes!: Array<Node>;\n\n  firstUpdated() {\n    if (this._leftIconNodes.length === 0) {\n      return this.shadowRoot.querySelector(\".form-check-label.left-label\")?.classList.add(\"d-none\");\n    }\n  }\n\n  render() {\n    return html`\n      <div class=\"form-check\">\n        <label for=\"${this._inputId}\" class=\"form-check-label left-label\"><slot name=\"leftLabel\"></slot></label>\n        <input\n          class=${classMap({\n            \"form-check-input\": true\n          })}\n          type=\"checkbox\"\n          id=${this._inputId}\n          ?checked=${this.checked}\n          ?disabled=${this.disabled}\n          aria-disabled=${this.disabled ? \"true\" : \"false\"}\n          aria-checked=${this.checked ? \"true\" : \"false\"}\n          @change=${this._handleChange}\n          @keydown=${this._handleKeyDown}\n        />\n        <label for=\"${this._inputId}\" class=\"form-check-label\"><slot></slot></label>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsSwitch;\n"],"names":["formLabelStyles","switchStyle"],"mappings":"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"}
+{"version":3,"file":"sgds-switch.js","sources":["../../../../src/components/Switch/sgds-switch.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, query, queryAssignedNodes } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport genId from \"../../utils/generateId\";\nimport { watch } from \"../../utils/watch\";\nimport formLabelStyles from \"../../styles/form-label.css\";\nimport switchStyle from \"./switch.css\";\n\n/**\n * @summary Switch component is used to toggle on and off or yes or no action.\n *\n * @slot default - The default label of switch on the right side of the switch\n * @slot leftLabel - The label on the left side of the switch\n *\n * @event sgds-change - Emitted when the checked state changes.\n *\n */\nexport class SgdsSwitch extends SgdsElement {\n  static styles = [...SgdsElement.styles, formLabelStyles, switchStyle];\n\n  /** The size of the switch. By default, it is small size */\n  @property({ reflect: true, type: String }) size: \"sm\" | \"md\" | \"lg\" = \"md\";\n  /** When enabled, icon appears in the switch */\n  @property({ reflect: true, type: Boolean }) icon = false;\n\n  /**@internal */\n  @query('input[type=\"checkbox\"]') input: HTMLInputElement;\n\n  /** Draws the switch in a checked state. */\n  @property({ type: Boolean, reflect: true }) checked = false;\n\n  /** Disables the switch (so the user can't check / uncheck it). */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** @internal Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */\n  @defaultValue(\"checked\")\n  defaultChecked = false;\n\n  /** Simulates a click on the switch. */\n  public click() {\n    this.input.click();\n  }\n  /** Sets focus on the switch. */\n  public focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  /** Removes focus from the switch. */\n  public blur() {\n    this.input.blur();\n  }\n\n  private _handleChange() {\n    this.checked = !this.checked;\n    this.emit(\"sgds-change\", { detail: { checked: this.checked } });\n  }\n\n  private _handleKeyDown(event: KeyboardEvent) {\n    const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;\n    if (event.key === \"Enter\" && !hasModifier) {\n      this.click();\n    }\n  }\n\n  /** @internal For Id/For pair of the HTML form control and label. */\n  private _inputId = genId(\"switch\");\n\n  /** @internal */\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabledChange() {\n    // Disabled form controls are always valid, so we need to recheck validity when the state changes\n    this.input.disabled = this.disabled;\n  }\n  @queryAssignedNodes({ slot: \"leftLabel\", flatten: true })\n  private _leftIconNodes!: Array<Node>;\n\n  firstUpdated() {\n    if (this._leftIconNodes.length === 0) {\n      return this.shadowRoot.querySelector(\".form-check-label.left-label\")?.classList.add(\"d-none\");\n    }\n  }\n\n  render() {\n    return html`\n      <div class=\"form-check\">\n        <label for=\"${this._inputId}\" class=\"form-check-label left-label\"><slot name=\"leftLabel\"></slot></label>\n        <input\n          class=${classMap({\n            \"form-check-input\": true\n          })}\n          type=\"checkbox\"\n          id=${this._inputId}\n          ?checked=${this.checked}\n          ?disabled=${this.disabled}\n          aria-disabled=${this.disabled ? \"true\" : \"false\"}\n          aria-checked=${this.checked ? \"true\" : \"false\"}\n          @change=${this._handleChange}\n          @keydown=${this._handleKeyDown}\n        />\n        <label for=\"${this._inputId}\" class=\"form-check-label\"><slot></slot></label>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsSwitch;\n"],"names":["formLabelStyles","switchStyle"],"mappings":"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"}

package/react/components/Textarea/sgds-textarea.cjs.js

@@ -4,21 +4,17 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
+var lit = require('lit');
 var decorators_js = require('lit/decorators.js');
 var classMap_js = require('lit/directives/class-map.js');
 var ifDefined_js = require('lit/directives/if-defined.js');
 var live_js = require('lit/directives/live.js');
 var staticHtml_js = require('lit/static-html.js');
-var sgdsElement = require('../../base/sgds-element.cjs.js');
+var formControlElement = require('../../base/form-control-element.cjs.js');
 var defaultvalue = require('../../utils/defaultvalue.cjs.js');
-var form = require('../../utils/form.cjs.js');
-var generateId = require('../../utils/generateId.cjs.js');
+var validatorMixin = require('../../utils/validatorMixin.cjs.js');
 var watch = require('../../utils/watch.cjs.js');
 var textarea = require('./textarea.cjs.js');
-var feedback = require('../../styles/feedback.cjs.js');
-var formLabel = require('../../styles/form-label.cjs.js');
-var formHint = require('../../styles/form-hint.cjs.js');
-var formPlaceholder = require('../../styles/form-placeholder.cjs.js');
 
 /**
  * @summary Text areas allow for the collection of input longer than a single line.
@@ -28,13 +24,9 @@ var formPlaceholder = require('../../styles/form-placeholder.cjs.js');
  * @event sgds-focus - Emitted when textarea is in focus.
  * @event sgds-blur - Emitted when textarea loses focus.
  */
-class SgdsTextarea extends sgdsElement["default"] {
+class SgdsTextarea extends validatorMixin.SgdsFormValidatorMixin(formControlElement["default"]) {
     constructor() {
         super(...arguments);
-        /**@internal */
-        this.formSubmitController = new form.FormSubmitController(this);
-        /**The textarea's label */
-        this.label = "label";
         /**The textarea's value attribute. */
         this.value = "";
         /**Enables spell checking on the textarea */
@@ -43,14 +35,10 @@ class SgdsTextarea extends sgdsElement["default"] {
         this.rows = 4;
         /**The textarea's placeholder text. */
         this.placeholder = "Placeholder";
-        /**Feedback text for error state when validated */
+        /** Custom feedback text for error state when validated */
         this.invalidFeedback = "";
         /**Autofocus the textarea */
         this.autofocus = false;
-        /**Disables the textarea. */
-        this.disabled = false;
-        /**Makes the textarea a required field. */
-        this.required = false;
         /** Makes the textarea readonly. */
         this.readonly = false;
         /** Controls how the textarea can be resized. */
@@ -59,32 +47,44 @@ class SgdsTextarea extends sgdsElement["default"] {
         this.defaultValue = "";
         /** Allows invalidFeedback, invalid and valid styles to be visible with the input */
         this.hasFeedback = false;
-        /** Marks the component as invalid. Replace the pseudo :invalid selector for absent in custom elements */
-        this.invalid = false;
+        /** Makes the textarea as a required field. */
+        this.required = false;
         /** The textarea's hint text */
         this.hintText = "";
-        /** @internal The textarea's unique id */
-        this.textareaId = generateId["default"]("textarea", "input");
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.resizeObserver = new ResizeObserver(() => this._setTextareaHeight());
-        this.updateComplete.then(() => {
-            this._setTextareaHeight();
-            this.resizeObserver.observe(this.textarea);
-        });
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.resizeObserver.unobserve(this.textarea);
+        this._isTouched = false;
     }
     /** Sets focus on the textarea. */
     focus(options) {
         this.textarea.focus(options);
     }
-    /** Checks for validity and shows the browser's validation message if the control is invalid. */
+    /** Sets blur on the textarea. */
+    blur() {
+        this.textarea.blur();
+    }
+    /**
+     * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state
+     * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput
+     */
     reportValidity() {
-        return this.textarea.reportValidity();
+        return this._mixinReportValidity();
+    }
+    /**
+     * Checks for validity without any native error popup message
+     */
+    checkValidity() {
+        return this._mixinCheckValidity();
+    }
+    /**
+     * Returns the ValidityState object
+     */
+    get validity() {
+        return this._mixinGetValidity();
+    }
+    /**
+     * Returns the validation message based on the ValidityState
+     */
+    get validationMessage() {
+        return this._mixinGetValidationMessage();
     }
     /** Selects all the text in the textarea. */
     select() {
@@ -94,14 +94,21 @@ class SgdsTextarea extends sgdsElement["default"] {
         e.preventDefault();
         this.invalid = true;
     }
-    _handleChange(event) {
-        this.value = this.textarea.value;
-        this.emit(event);
+    _handleChange(e) {
+        this.value = this.input.value;
+        this.emit("sgds-change");
+        super._mixinHandleChange(e);
+    }
+    _handleInputChange(e) {
+        this.value = this.input.value;
+        this.emit("sgds-input");
+        super._mixinHandleInputChange(e);
     }
     _handleFocus() {
         this.emit("sgds-focus");
     }
-    handleBlur() {
+    _handleBlur() {
+        this._isTouched = true;
         this.emit("sgds-blur");
     }
     /** @internal */
@@ -118,23 +125,26 @@ class SgdsTextarea extends sgdsElement["default"] {
         }
     }
     /** @internal */
+    _handleIsTouched() {
+        if (this._isTouched) {
+            this.invalid = !this.textarea.checkValidity();
+        }
+    }
+    /** @internal */
     _handleDisabledChange() {
         // Disabled form controls are always valid, so we need to recheck validity when the state changes
-        this.textarea.disabled = this.disabled;
-        this.invalid = !this.textarea.checkValidity();
+        this.setInvalid(false);
     }
     /** @internal */
     _handleValueChange() {
-        this.invalid = !this.textarea.checkValidity();
         this.updateComplete.then(() => this._setTextareaHeight());
     }
     _renderHintText() {
-        const hintTextTemplate = staticHtml_js.html ` <div id="${this.textareaId}Help" class="form-text">${this.hintText}</div> `;
+        const hintTextTemplate = staticHtml_js.html ` <div id="${this._controlId}Help" class="form-text">${this.hintText}</div> `;
         return this.hintText && hintTextTemplate;
     }
-    render() {
-        // if maxlength is defined
-        const wordCount = staticHtml_js.html `
+    _wordCount() {
+        return staticHtml_js.html `
       <div
         class="form-text word-count ${classMap_js.classMap({
             "invalid-feedback": this.invalid && this.hasFeedback
@@ -143,13 +153,15 @@ class SgdsTextarea extends sgdsElement["default"] {
         ${this.value.length}/${this.maxlength}
       </div>
     `;
+    }
+    render() {
         return staticHtml_js.html `
       <div
         class="form-control-container ${classMap_js.classMap({
             disabled: this.disabled
         })}"
       >
-        <label for=${this.textareaId} class="form-label">${this.label}</label>
+        <label for=${this._controlId} class="form-label">${this.label}</label>
         <textarea
           class=${classMap_js.classMap({
             "form-control": true,
@@ -158,7 +170,7 @@ class SgdsTextarea extends sgdsElement["default"] {
             "textarea-resize-vertical": this.resize === "vertical",
             "textarea-resize-auto": this.resize === "auto"
         })}
-          id=${this.textareaId}
+          id=${this._controlId}
           name=${ifDefined_js.ifDefined(this.name)}
           rows=${ifDefined_js.ifDefined(this.rows)}
           placeholder=${ifDefined_js.ifDefined(this.placeholder)}
@@ -173,13 +185,12 @@ class SgdsTextarea extends sgdsElement["default"] {
           ?autofocus=${this.autofocus}
           autocorrect=${ifDefined_js.ifDefined(this.autocorrect)}
           inputmode=${ifDefined_js.ifDefined(this.inputmode)}
-          @input=${() => this._handleChange("sgds-input")}
-          @change=${() => this._handleChange("sgds-change")}
+          @input=${(e) => this._handleInputChange(e)}
+          @change=${(e) => this._handleChange(e)}
           @invalid=${(e) => this._handleInvalid(e)}
           @focus=${this._handleFocus}
-          @blur=${this.handleBlur}
-        >
-        </textarea>
+          @blur=${this._handleBlur}
+        ></textarea>
         <div class="textarea-info-container">
           ${this.invalid && this.hasFeedback
             ? staticHtml_js.html `
@@ -190,30 +201,22 @@ class SgdsTextarea extends sgdsElement["default"] {
                       fill="#B90000"
                     />
                   </svg>
-                  <div id="${this.textareaId}-invalid" class="invalid-feedback">${this.invalidFeedback}</div>
+                  <div id="${this._controlId}-invalid" class="invalid-feedback">
+                    ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}
+                  </div>
                 </div>
               `
             : staticHtml_js.html `${this._renderHintText()}`}
-          ${this.maxlength > 0 ? wordCount : undefined}
+          ${this.maxlength > 0 ? this._wordCount() : lit.nothing}
         </div>
       </div>
     `;
     }
 }
-SgdsTextarea.styles = [
-    ...sgdsElement["default"].styles,
-    formHint["default"],
-    formLabel["default"],
-    feedback["default"],
-    formPlaceholder["default"],
-    textarea["default"]
-];
+SgdsTextarea.styles = [...formControlElement["default"].styles, textarea["default"]];
 tslib.__decorate([
     decorators_js.query("textarea.form-control")
 ], SgdsTextarea.prototype, "textarea", void 0);
-tslib.__decorate([
-    decorators_js.property({ type: String, reflect: true })
-], SgdsTextarea.prototype, "label", void 0);
 tslib.__decorate([
     decorators_js.property({ type: String, reflect: true })
 ], SgdsTextarea.prototype, "name", void 0);
@@ -241,12 +244,6 @@ tslib.__decorate([
 tslib.__decorate([
     decorators_js.property({ type: Boolean, reflect: true })
 ], SgdsTextarea.prototype, "autofocus", void 0);
-tslib.__decorate([
-    decorators_js.property({ type: Boolean, reflect: true })
-], SgdsTextarea.prototype, "disabled", void 0);
-tslib.__decorate([
-    decorators_js.property({ type: Boolean, reflect: true })
-], SgdsTextarea.prototype, "required", void 0);
 tslib.__decorate([
     decorators_js.property({ type: Boolean, reflect: true })
 ], SgdsTextarea.prototype, "readonly", void 0);
@@ -267,13 +264,19 @@ tslib.__decorate([
 ], SgdsTextarea.prototype, "hasFeedback", void 0);
 tslib.__decorate([
     decorators_js.property({ type: Boolean, reflect: true })
-], SgdsTextarea.prototype, "invalid", void 0);
+], SgdsTextarea.prototype, "required", void 0);
 tslib.__decorate([
     decorators_js.property({ reflect: true })
 ], SgdsTextarea.prototype, "hintText", void 0);
+tslib.__decorate([
+    decorators_js.state()
+], SgdsTextarea.prototype, "_isTouched", void 0);
 tslib.__decorate([
     watch.watch("rows", { waitUntilFirstUpdate: true })
 ], SgdsTextarea.prototype, "_handleRowsChange", null);
+tslib.__decorate([
+    watch.watch("_isTouched", { waitUntilFirstUpdate: true })
+], SgdsTextarea.prototype, "_handleIsTouched", null);
 tslib.__decorate([
     watch.watch("disabled", { waitUntilFirstUpdate: true })
 ], SgdsTextarea.prototype, "_handleDisabledChange", null);

package/react/components/Textarea/sgds-textarea.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-textarea.cjs.js","sources":["../../../../src/components/Textarea/sgds-textarea.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 { html } from \"lit/static-html.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport { FormSubmitController, SgdsFormControl } from \"../../utils/form\";\nimport genId from \"../../utils/generateId\";\nimport { watch } from \"../../utils/watch\";\nimport textareaStyle from \"./textarea.css\";\nimport feedbackStyles from \"../../styles/feedback.css\";\nimport formLabelStyles from \"../../styles/form-label.css\";\nimport formHintStyles from \"../../styles/form-hint.css\";\nimport fromPlaceholderStyles from \"../../styles/form-placeholder.css\";\n\n/**\n * @summary Text areas allow for the collection of input longer than 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 textarea is in focus.\n * @event sgds-blur - Emitted when textarea loses focus.\n */\nexport class SgdsTextarea extends SgdsElement implements SgdsFormControl {\n  static styles = [\n    ...SgdsElement.styles,\n    formHintStyles,\n    formLabelStyles,\n    feedbackStyles,\n    fromPlaceholderStyles,\n    textareaStyle\n  ];\n  /**@internal */\n  @query(\"textarea.form-control\") textarea: HTMLTextAreaElement;\n  /**@internal */\n  private readonly formSubmitController = new FormSubmitController(this);\n  /**@internal */\n  private resizeObserver: ResizeObserver;\n  /**The textarea's label */\n  @property({ type: String, reflect: true }) label = \"label\";\n  /**The textarea's name attribute */\n  @property({ type: String, reflect: true }) name: string;\n  /**The textarea's value attribute. */\n  @property({ type: String, reflect: true }) value = \"\";\n  /**Sets the minimum length of the textarea */\n  @property({ type: Number, reflect: true }) minlength: number;\n  /**Sets the maximum length of the textarea */\n  @property({ type: Number, reflect: true }) maxlength: number;\n  /**Enables spell checking on the textarea */\n  @property({ type: Boolean, reflect: true }) spellcheck = false;\n  /** The number of rows to display by default. */\n  @property({ type: Number }) rows = 4;\n  /**The textarea's placeholder text. */\n  @property({ type: String, reflect: true }) placeholder = \"Placeholder\";\n  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback = \"\";\n  /**Autofocus the textarea */\n  @property({ type: Boolean, reflect: true }) autofocus = false;\n  /**Disables the textarea. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n  /**Makes the textarea a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n  /** Makes the textarea readonly. */\n  @property({ type: Boolean, reflect: true }) readonly = false;\n\n  /** Controls how the textarea can be resized. */\n  @property({ type: String, reflect: true }) resize: \"none\" | \"vertical\" | \"auto\" = \"vertical\";\n  /** The native textarea's inputmode attribute. It hints at the type of data that might be entered by the user while editing the element or its contents. This allows a browser to display an appropriate virtual keyboard. */\n  @property({ type: String, reflect: true }) inputmode:\n    | \"none\"\n    | \"text\"\n    | \"decimal\"\n    | \"numeric\"\n    | \"tel\"\n    | \"search\"\n    | \"email\"\n    | \"url\";\n  /** The native textarea's autocorrect attribute. */\n  @property({ type: String, reflect: true }) autocorrect: string;\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  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n  @property({ type: Boolean, reflect: true }) hasFeedback = false;\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  /** The textarea's hint text */\n  @property({ reflect: true }) hintText = \"\";\n\n  /** @internal The textarea's unique id */\n  private textareaId = genId(\"textarea\", \"input\");\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.resizeObserver = new ResizeObserver(() => this._setTextareaHeight());\n\n    this.updateComplete.then(() => {\n      this._setTextareaHeight();\n      this.resizeObserver.observe(this.textarea);\n    });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.resizeObserver.unobserve(this.textarea);\n  }\n\n  /** Sets focus on the textarea. */\n  public focus(options?: FocusOptions) {\n    this.textarea.focus(options);\n  }\n\n  /** Checks for validity and shows the browser's validation message if the control is invalid. */\n  public reportValidity() {\n    return this.textarea.reportValidity();\n  }\n  /** Selects all the text in the textarea. */\n  public select() {\n    this.textarea.select();\n  }\n  private _handleInvalid(e: Event) {\n    e.preventDefault();\n    this.invalid = true;\n  }\n\n  private _handleChange(event: string) {\n    this.value = this.textarea.value;\n    this.emit(event);\n  }\n\n  private _handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  private handleBlur() {\n    this.emit(\"sgds-blur\");\n  }\n\n  /** @internal */\n  @watch(\"rows\", { waitUntilFirstUpdate: true })\n  _handleRowsChange() {\n    this._setTextareaHeight();\n  }\n\n  private _setTextareaHeight() {\n    if (this.resize === \"auto\") {\n      this.textarea.style.height = \"auto\";\n      this.textarea.style.height = `${this.textarea.scrollHeight}px`;\n    } else {\n      (this.textarea.style.height as string | undefined) = undefined;\n    }\n  }\n\n  /** @internal */\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabledChange() {\n    // Disabled form controls are always valid, so we need to recheck validity when the state changes\n    this.textarea.disabled = this.disabled;\n    this.invalid = !this.textarea.checkValidity();\n  }\n\n  /** @internal */\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  _handleValueChange() {\n    this.invalid = !this.textarea.checkValidity();\n    this.updateComplete.then(() => this._setTextareaHeight());\n  }\n\n  protected _renderHintText() {\n    const hintTextTemplate = html` <div id=\"${this.textareaId}Help\" class=\"form-text\">${this.hintText}</div> `;\n    return this.hintText && hintTextTemplate;\n  }\n\n  render() {\n    // if maxlength is defined\n    const wordCount = html`\n      <div\n        class=\"form-text word-count ${classMap({\n          \"invalid-feedback\": this.invalid && this.hasFeedback\n        })}\"\n      >\n        ${this.value.length}/${this.maxlength}\n      </div>\n    `;\n\n    return html`\n      <div\n        class=\"form-control-container ${classMap({\n          disabled: this.disabled\n        })}\"\n      >\n        <label for=${this.textareaId} class=\"form-label\">${this.label}</label>\n        <textarea\n          class=${classMap({\n            \"form-control\": true,\n            \"is-invalid\": this.hasFeedback && this.invalid,\n            \"textarea-resize-none\": this.resize === \"none\",\n            \"textarea-resize-vertical\": this.resize === \"vertical\",\n            \"textarea-resize-auto\": this.resize === \"auto\"\n          })}\n          id=${this.textareaId}\n          name=${ifDefined(this.name)}\n          rows=${ifDefined(this.rows)}\n          placeholder=${ifDefined(this.placeholder)}\n          minlength=${ifDefined(this.minlength)}\n          maxlength=${ifDefined(this.maxlength)}\n          .value=${live(this.value)}\n          aria-invalid=${this.invalid ? \"true\" : \"false\"}\n          spellcheck=${ifDefined(this.spellcheck)}\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          ?required=${this.required}\n          ?autofocus=${this.autofocus}\n          autocorrect=${ifDefined(this.autocorrect)}\n          inputmode=${ifDefined(this.inputmode)}\n          @input=${() => this._handleChange(\"sgds-input\")}\n          @change=${() => this._handleChange(\"sgds-change\")}\n          @invalid=${(e: Event) => this._handleInvalid(e)}\n          @focus=${this._handleFocus}\n          @blur=${this.handleBlur}\n        >\n        </textarea>\n        <div class=\"textarea-info-container\">\n          ${this.invalid && this.hasFeedback\n            ? html`\n                <div class=\"invalid-feedback-container\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n                    <path\n                      d=\"M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10ZM10 6.25C9.49805 6.25 9.10584 6.68339 9.15578 7.18285L9.48461 10.4711C9.51109 10.7359 9.7339 10.9375 10 10.9375C10.2661 10.9375 10.4889 10.7359 10.5154 10.4711L10.8442 7.18285C10.8942 6.68339 10.5019 6.25 10 6.25ZM10.0014 11.875C9.48368 11.875 9.06394 12.2947 9.06394 12.8125C9.06394 13.3303 9.48368 13.75 10.0014 13.75C10.5192 13.75 10.9389 13.3303 10.9389 12.8125C10.9389 12.2947 10.5192 11.875 10.0014 11.875Z\"\n                      fill=\"#B90000\"\n                    />\n                  </svg>\n                  <div id=\"${this.textareaId}-invalid\" class=\"invalid-feedback\">${this.invalidFeedback}</div>\n                </div>\n              `\n            : html`${this._renderHintText()}`}\n          ${this.maxlength > 0 ? wordCount : undefined}\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsTextarea;\n"],"names":["SgdsElement","FormSubmitController","genId","html","classMap","ifDefined","live","formHintStyles","formLabelStyles","feedbackStyles","fromPlaceholderStyles","textareaStyle","__decorate","query","property","defaultValue","watch"],"mappings":"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"}
+{"version":3,"file":"sgds-textarea.cjs.js","sources":["../../../../src/components/Textarea/sgds-textarea.ts"],"sourcesContent":["import { nothing } from \"lit\";\nimport { property, query, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { live } from \"lit/directives/live.js\";\nimport { html } from \"lit/static-html.js\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport { SgdsFormControl } from \"../../utils/formSubmitController\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport textareaStyle from \"./textarea.css\";\n\n/**\n * @summary Text areas allow for the collection of input longer than 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 textarea is in focus.\n * @event sgds-blur - Emitted when textarea loses focus.\n */\nexport class SgdsTextarea extends SgdsFormValidatorMixin(FormControlElement) implements SgdsFormControl {\n  static styles = [...FormControlElement.styles, textareaStyle];\n  /**@internal */\n  @query(\"textarea.form-control\") textarea: HTMLTextAreaElement;\n  /**@internal */\n  private resizeObserver: ResizeObserver;\n  /**The textarea's name attribute */\n  @property({ type: String, reflect: true }) name: string;\n  /**The textarea's value attribute. */\n  @property({ type: String, reflect: true }) value = \"\";\n  /**Sets the minimum length of the textarea */\n  @property({ type: Number, reflect: true }) minlength: number;\n  /**Sets the maximum length of the textarea. When maxlength is defined, a word count appears on bottom right of the input*/\n  @property({ type: Number, reflect: true }) maxlength: number;\n  /**Enables spell checking on the textarea */\n  @property({ type: Boolean, reflect: true }) spellcheck = false;\n  /** The number of rows to display by default. */\n  @property({ type: Number }) rows = 4;\n  /**The textarea's placeholder text. */\n  @property({ type: String, reflect: true }) placeholder = \"Placeholder\";\n  /** Custom feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback = \"\";\n  /**Autofocus the textarea */\n  @property({ type: Boolean, reflect: true }) autofocus = false;\n  /** Makes the textarea readonly. */\n  @property({ type: Boolean, reflect: true }) readonly = false;\n\n  /** Controls how the textarea can be resized. */\n  @property({ type: String, reflect: true }) resize: \"none\" | \"vertical\" | \"auto\" = \"vertical\";\n  /** The native textarea's inputmode attribute. It hints at the type of data that might be entered by the user while editing the element or its contents. This allows a browser to display an appropriate virtual keyboard. */\n  @property({ type: String, reflect: true }) inputmode:\n    | \"none\"\n    | \"text\"\n    | \"decimal\"\n    | \"numeric\"\n    | \"tel\"\n    | \"search\"\n    | \"email\"\n    | \"url\";\n  /** The native textarea's autocorrect attribute. */\n  @property({ type: String, reflect: true }) autocorrect: string;\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  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n  @property({ type: Boolean, reflect: true }) hasFeedback = false;\n\n  /** Makes the textarea as a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /** The textarea's hint text */\n  @property({ reflect: true }) hintText = \"\";\n\n  @state() private _isTouched = false;\n\n  /** Sets focus on the textarea. */\n  public focus(options?: FocusOptions) {\n    this.textarea.focus(options);\n  }\n  /** Sets blur on the textarea. */\n  public blur() {\n    this.textarea.blur();\n  }\n\n  /**\n   * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n   * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n   */\n  public reportValidity(): boolean {\n    return this._mixinReportValidity();\n  }\n  /**\n   * Checks for validity without any native error popup message\n   */\n  public checkValidity(): boolean {\n    return this._mixinCheckValidity();\n  }\n  /**\n   * Returns the ValidityState object\n   */\n  public get validity(): ValidityState {\n    return this._mixinGetValidity();\n  }\n  /**\n   * Returns the validation message based on the ValidityState\n   */\n  public get validationMessage() {\n    return this._mixinGetValidationMessage();\n  }\n\n  /** Selects all the text in the textarea. */\n  public select() {\n    this.textarea.select();\n  }\n  private _handleInvalid(e: Event) {\n    e.preventDefault();\n    this.invalid = true;\n  }\n\n  protected _handleChange(e: Event) {\n    this.value = this.input.value;\n    this.emit(\"sgds-change\");\n    super._mixinHandleChange(e);\n  }\n  private _handleInputChange(e: Event) {\n    this.value = this.input.value;\n    this.emit(\"sgds-input\");\n    super._mixinHandleInputChange(e);\n  }\n\n  private _handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  private _handleBlur() {\n    this._isTouched = true;\n    this.emit(\"sgds-blur\");\n  }\n\n  /** @internal */\n  @watch(\"rows\", { waitUntilFirstUpdate: true })\n  _handleRowsChange() {\n    this._setTextareaHeight();\n  }\n\n  private _setTextareaHeight() {\n    if (this.resize === \"auto\") {\n      this.textarea.style.height = \"auto\";\n      this.textarea.style.height = `${this.textarea.scrollHeight}px`;\n    } else {\n      (this.textarea.style.height as string | undefined) = undefined;\n    }\n  }\n  /** @internal */\n  @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n  _handleIsTouched() {\n    if (this._isTouched) {\n      this.invalid = !this.textarea.checkValidity();\n    }\n  }\n\n  /** @internal */\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabledChange() {\n    // Disabled form controls are always valid, so we need to recheck validity when the state changes\n    this.setInvalid(false);\n  }\n\n  /** @internal */\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  _handleValueChange() {\n    this.updateComplete.then(() => this._setTextareaHeight());\n  }\n\n  protected _renderHintText() {\n    const hintTextTemplate = html` <div id=\"${this._controlId}Help\" class=\"form-text\">${this.hintText}</div> `;\n    return this.hintText && hintTextTemplate;\n  }\n\n  private _wordCount() {\n    return html`\n      <div\n        class=\"form-text word-count ${classMap({\n          \"invalid-feedback\": this.invalid && this.hasFeedback\n        })}\"\n      >\n        ${this.value.length}/${this.maxlength}\n      </div>\n    `;\n  }\n  render() {\n    return html`\n      <div\n        class=\"form-control-container ${classMap({\n          disabled: this.disabled\n        })}\"\n      >\n        <label for=${this._controlId} class=\"form-label\">${this.label}</label>\n        <textarea\n          class=${classMap({\n            \"form-control\": true,\n            \"is-invalid\": this.hasFeedback && this.invalid,\n            \"textarea-resize-none\": this.resize === \"none\",\n            \"textarea-resize-vertical\": this.resize === \"vertical\",\n            \"textarea-resize-auto\": this.resize === \"auto\"\n          })}\n          id=${this._controlId}\n          name=${ifDefined(this.name)}\n          rows=${ifDefined(this.rows)}\n          placeholder=${ifDefined(this.placeholder)}\n          minlength=${ifDefined(this.minlength)}\n          maxlength=${ifDefined(this.maxlength)}\n          .value=${live(this.value)}\n          aria-invalid=${this.invalid ? \"true\" : \"false\"}\n          spellcheck=${ifDefined(this.spellcheck)}\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          ?required=${this.required}\n          ?autofocus=${this.autofocus}\n          autocorrect=${ifDefined(this.autocorrect)}\n          inputmode=${ifDefined(this.inputmode)}\n          @input=${(e: Event) => this._handleInputChange(e)}\n          @change=${(e: Event) => this._handleChange(e)}\n          @invalid=${(e: Event) => this._handleInvalid(e)}\n          @focus=${this._handleFocus}\n          @blur=${this._handleBlur}\n        ></textarea>\n        <div class=\"textarea-info-container\">\n          ${this.invalid && this.hasFeedback\n            ? html`\n                <div class=\"invalid-feedback-container\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n                    <path\n                      d=\"M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10ZM10 6.25C9.49805 6.25 9.10584 6.68339 9.15578 7.18285L9.48461 10.4711C9.51109 10.7359 9.7339 10.9375 10 10.9375C10.2661 10.9375 10.4889 10.7359 10.5154 10.4711L10.8442 7.18285C10.8942 6.68339 10.5019 6.25 10 6.25ZM10.0014 11.875C9.48368 11.875 9.06394 12.2947 9.06394 12.8125C9.06394 13.3303 9.48368 13.75 10.0014 13.75C10.5192 13.75 10.9389 13.3303 10.9389 12.8125C10.9389 12.2947 10.5192 11.875 10.0014 11.875Z\"\n                      fill=\"#B90000\"\n                    />\n                  </svg>\n                  <div id=\"${this._controlId}-invalid\" class=\"invalid-feedback\">\n                    ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n                  </div>\n                </div>\n              `\n            : html`${this._renderHintText()}`}\n          ${this.maxlength > 0 ? this._wordCount() : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsTextarea;\n"],"names":["SgdsFormValidatorMixin","FormControlElement","html","classMap","ifDefined","live","nothing","textareaStyle","__decorate","query","property","defaultValue","state","watch"],"mappings":"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"}