@govtechsg/sgds-web-component 2.1.0 → 2.1.2

package/components/Checkbox/sgds-checkbox.js

@@ -1,4 +1,3 @@
-'use client';
 import { FormCheckElement } from '../../base/form-check-element.js';
 import genId from '../../utils/generateId.js';
 import css_248z$2 from './checkbox.js';

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-checkbox.js","sources":["../../../src/components/Checkbox/sgds-checkbox.ts"],"sourcesContent":["import FormCheckElement from \"../../base/form-check-element\";\nimport genId from \"../../utils/generateId\";\nimport checkboxStyle from \"./checkbox.css\";\nimport feedbackStyle from \"../../styles/feedback.css\";\nimport formLabelStyle from \"../../styles/form-label.css\";\n/**\n * @summary Checkbox component is used when you require users to select multiple items from a list.\n *\n * @slot default - The label of checkbox.\n *\n * @event sgds-change - Emitted when the checked state changes.\n *\n */\nexport class SgdsCheckbox extends FormCheckElement {\n  static styles = [...FormCheckElement.styles, feedbackStyle, formLabelStyle, checkboxStyle];\n\n  constructor() {\n    super();\n    /** @internal */\n    this._inputId = genId(\"checkbox\");\n  }\n}\n\nexport default SgdsCheckbox;\n"],"names":["feedbackStyle","formLabelStyle","checkboxStyle"],"mappings":";;;;;;;AAKA;;;;;;;AAOG;AACG,MAAO,YAAa,SAAQ,gBAAgB,CAAA;AAGhD,IAAA,WAAA,GAAA;AACE,QAAA,KAAK,EAAE,CAAC;;AAER,QAAA,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC;KACnC;;AANM,YAAA,CAAA,MAAM,GAAG,CAAC,GAAG,gBAAgB,CAAC,MAAM,EAAEA,QAAa,EAAEC,UAAc,EAAEC,UAAa,CAAC;;;;"}
+{"version":3,"file":"sgds-checkbox.js","sources":["../../../src/components/Checkbox/sgds-checkbox.ts"],"sourcesContent":["import FormCheckElement from \"../../base/form-check-element\";\nimport genId from \"../../utils/generateId\";\nimport checkboxStyle from \"./checkbox.css\";\nimport feedbackStyle from \"../../styles/feedback.css\";\nimport formLabelStyle from \"../../styles/form-label.css\";\n/**\n * @summary Checkbox component is used when you require users to select multiple items from a list.\n *\n * @slot default - The label of checkbox.\n *\n * @event sgds-change - Emitted when the checked state changes.\n *\n */\nexport class SgdsCheckbox extends FormCheckElement {\n  static styles = [...FormCheckElement.styles, feedbackStyle, formLabelStyle, checkboxStyle];\n\n  constructor() {\n    super();\n    /** @internal */\n    this._inputId = genId(\"checkbox\");\n  }\n}\n\nexport default SgdsCheckbox;\n"],"names":["feedbackStyle","formLabelStyle","checkboxStyle"],"mappings":";;;;;;AAKA;;;;;;;AAOG;AACG,MAAO,YAAa,SAAQ,gBAAgB,CAAA;AAGhD,IAAA,WAAA,GAAA;AACE,QAAA,KAAK,EAAE,CAAC;;AAER,QAAA,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC;KACnC;;AANM,YAAA,CAAA,MAAM,GAAG,CAAC,GAAG,gBAAgB,CAAC,MAAM,EAAEA,QAAa,EAAEC,UAAc,EAAEC,UAAa,CAAC;;;;"}

package/components/ComboBox/combo-box.js

@@ -1,4 +1,3 @@
-'use client';
 import { css } from 'lit';
 
 var css_248z = css`.sgds.combobox .form-control-icon{align-items:center;display:flex;font-size:1rem;height:3rem;justify-content:center;position:absolute;width:3rem;z-index:4}.sgds.combobox{align-items:stretch;display:flex;flex-wrap:wrap;justify-content:flex-end;position:relative;width:-webkit-fill-available;width:-moz-available}.sgds.combobox .dropdown-toggle{width:100%}.sgds.combobox>.dropdown-menu{min-width:100%}.form-control-icon{bottom:0}`;

package/components/ComboBox/combo-box.js.map

@@ -1 +1 @@
-{"version":3,"file":"combo-box.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
+{"version":3,"file":"combo-box.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/components/ComboBox/index.umd.js

@@ -7925,7 +7925,7 @@
 
   var css_248z$4 = css`.form-control{appearance:none;background-clip:padding-box;background-color:var(--sgds-body-bg);border:var(--sgds-form-border-width) solid var(--sgds-form-border-color);border-radius:var(--sgds-border-radius);color:var(--sgds-body-color);display:block;font-size:var(--sgds-body-font-size);font-weight:var(--sgds-body-font-weight);line-height:var(--sgds-body-line-height);padding:var(--sgds-input-btn-padding-y) var(--sgds-input-btn-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:-webkit-fill-available;width:-moz-available}@media (prefers-reduced-motion:reduce){.form-control{transition:none}}.form-control:focus{background-color:var(--sgds-body-bg);border:var(--sgds-form-border-width) solid var(--sgds-link);box-shadow:var(--sgds-form-focus-box-shadow);outline:0}.form-control::placeholder{color:var(--sgds-gray-400);opacity:1}.form-control:disabled{background-color:var(--sgds-disabled-bg);color:var(--sgds-disabled-color);opacity:1}:host(.quantity-toggle) input::-webkit-inner-spin-button{appearance:none;margin:0}:host(.quantity-toggle) input{text-align:center}.sgds.form-control-group .form-control-icon{align-items:center;display:flex;font-size:1rem;height:3rem;justify-content:center;position:absolute;width:3rem;z-index:4}.sgds.form-control-group>.form-control{padding-left:3rem}.sgds.form-control-group>.form-control:focus{z-index:3}.form-control.is-invalid{border-color:var(--sgds-form-invalid-color)}.form-control.is-invalid:focus{box-shadow:var(--sgds-form-focus-invalid-box-shadow)}.form-control-container{display:flex;flex-direction:column}`;
 
-  var css_248z$3 = css`.invalid-feedback{color:var(--sgds-form-invalid-color);display:none;font-size:var(--sgds-form-feedback-font-size);width:100%}.is-invalid~.invalid-feedback,.was-validated :invalid~.invalid-feedback{display:block}`;
+  var css_248z$3 = css`.invalid-feedback{color:var(--sgds-form-invalid-color);font-size:var(--sgds-form-feedback-font-size);width:100%}`;
 
   var css_248z$2 = css`.form-text{color:var(--sgds-form-hint-text-color);display:block;font-size:var(--sgds-body-font-size);font-weight:var(--sgds-form-hint-text-font-weight)}`;
 
@@ -8060,7 +8060,7 @@
       ${this._renderFeedback()} `;
       }
       _renderFeedback() {
-          return this.hasFeedback
+          return this.hasFeedback && this.invalid
               ? html `<div id="${this.inputId}-invalid" class="invalid-feedback">${this.invalidFeedback}</div>`
               : "";
       }