@govtechsg/sgds-web-component 3.5.2-rc.2 → 3.5.2-rc.4

package/base/option-element.js

@@ -41,7 +41,7 @@ __decorate([
     property({ type: Boolean, reflect: true })
 ], OptionElement.prototype, "disabled", void 0);
 __decorate([
-    property({ type: String })
+    property({ type: String, reflect: true })
 ], OptionElement.prototype, "value", void 0);
 
 export { OptionElement };

package/base/option-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"option-element.js","sources":["../../src/base/option-element.ts"],"sourcesContent":["import { html, TemplateResult } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport optionStyles from \"./option.css\";\nimport SgdsElement from \"./sgds-element\";\n\nexport class OptionElement extends SgdsElement {\n  static styles = [optionStyles];\n  /**\n   * @internal when true, sets the active stylings.\n   * This property is controlled by its nearest parent e.g. Select or Combo box\n   */\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  /** Disables the Item */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** The value of the option item */\n  @property({ type: String }) value: string;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute(\"role\", \"menuitem\");\n    this.setAttribute(\"aria-disabled\", `${this.disabled}`);\n  }\n  render() {\n    const classes = {\n      disabled: this.disabled,\n      active: this.active\n    };\n    return html`\n      <div class=\"dropdown-item ${classMap(classes)}\" tabindex=${this.disabled ? \"-1\" : \"0\"}>\n        ${this._renderItemContent()}\n      </div>\n    `;\n  }\n\n  protected declare _renderItemContent: () => TemplateResult<1>;\n}\n"],"names":["optionStyles"],"mappings":";;;;;;;AAMM,MAAO,aAAc,SAAQ,WAAW,CAAA;AAA9C,IAAA,WAAA,GAAA;;AAEE;;;AAGG;QACyC,IAAM,CAAA,MAAA,GAAG,KAAK,CAAC;;QAGf,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;KAuB9D;IAlBC,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;AAC1B,QAAA,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;QACtC,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,CAAG,EAAA,IAAI,CAAC,QAAQ,CAAE,CAAA,CAAC,CAAC;KACxD;IACD,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;YACd,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,MAAM,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC;AACF,QAAA,OAAO,IAAI,CAAA,CAAA;AACmB,gCAAA,EAAA,QAAQ,CAAC,OAAO,CAAC,CAAA,WAAA,EAAc,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,GAAG,CAAA;UACjF,IAAI,CAAC,kBAAkB,EAAE,CAAA;;KAE9B,CAAC;KACH;;AA5BM,aAAA,CAAA,MAAM,GAAG,CAACA,QAAY,CAAC,CAAC;AAKa,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAgB,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGf,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkB,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGjC,UAAA,CAAA;AAA3B,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AAAe,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA;;;;"}
+{"version":3,"file":"option-element.js","sources":["../../src/base/option-element.ts"],"sourcesContent":["import { html, TemplateResult } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport optionStyles from \"./option.css\";\nimport SgdsElement from \"./sgds-element\";\n\nexport class OptionElement extends SgdsElement {\n  static styles = [optionStyles];\n  /**\n   * @internal when true, sets the active stylings.\n   * This property is controlled by its nearest parent e.g. Select or Combo box\n   */\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  /** Disables the Item */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** The value of the option item */\n  @property({ type: String, reflect: true }) value: string;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute(\"role\", \"menuitem\");\n    this.setAttribute(\"aria-disabled\", `${this.disabled}`);\n  }\n  render() {\n    const classes = {\n      disabled: this.disabled,\n      active: this.active\n    };\n    return html`\n      <div class=\"dropdown-item ${classMap(classes)}\" tabindex=${this.disabled ? \"-1\" : \"0\"}>\n        ${this._renderItemContent()}\n      </div>\n    `;\n  }\n\n  protected declare _renderItemContent: () => TemplateResult<1>;\n}\n"],"names":["optionStyles"],"mappings":";;;;;;;AAMM,MAAO,aAAc,SAAQ,WAAW,CAAA;AAA9C,IAAA,WAAA,GAAA;;AAEE;;;AAGG;QACyC,IAAM,CAAA,MAAA,GAAG,KAAK,CAAC;;QAGf,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;KAuB9D;IAlBC,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;AAC1B,QAAA,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;QACtC,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,CAAG,EAAA,IAAI,CAAC,QAAQ,CAAE,CAAA,CAAC,CAAC;KACxD;IACD,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;YACd,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,MAAM,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC;AACF,QAAA,OAAO,IAAI,CAAA,CAAA;AACmB,gCAAA,EAAA,QAAQ,CAAC,OAAO,CAAC,CAAA,WAAA,EAAc,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,GAAG,CAAA;UACjF,IAAI,CAAC,kBAAkB,EAAE,CAAA;;KAE9B,CAAC;KACH;;AA5BM,aAAA,CAAA,MAAM,GAAG,CAACA,QAAY,CAAC,CAAC;AAKa,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAgB,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGf,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkB,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGlB,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAe,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA;;;;"}

package/components/ComboBox/index.umd.min.js

@@ -2034,7 +2034,7 @@ class extends ct{constructor(e){if(super(e),e.type!==at&&e.type!==ot&&e.type!==n
       <div class="dropdown-item ${dt(e)}" tabindex=${this.disabled?"-1":"0"}>
         ${this._renderItemContent()}
       </div>
-    `}}Ol.styles=[Il],e([Ye({type:Boolean,reflect:!0})],Ol.prototype,"active",void 0),e([Ye({type:Boolean,reflect:!0})],Ol.prototype,"disabled",void 0),e([Ye({type:String})],Ol.prototype,"value",void 0);var Rl=Me`.form-label{color:var(--sgds-form-color-default);margin-bottom:0}.form-label.disabled{opacity:var(--sgds-opacity-50)}.form-check-label{color:var(--sgds-form-color-default)}.form-check-input:disabled~.form-check-label,.form-check-input[disabled]~.form-check-label{cursor:not-allowed}`,Ul=Me`.form-control::placeholder{color:var(--sgds-form-color-subtle);font-family:var(--sgds-font-family-brand);font-weight:var(--sgds-font-weight-light);line-height:var(--sgds-line-height-body)}`;class Dl extends wl{constructor(){super(...arguments),this.label="",this.hintText="",this.disabled=!1,this.invalid=!1,this._controlId=pl("input"),this._labelId=pl("label")}setInvalid(e){this.invalid=e,e?this.emit("sgds-invalid"):this.emit("sgds-valid")}}Dl.styles=[...wl.styles,dl,hl,Rl,Ul],e([Ye({reflect:!0})],Dl.prototype,"label",void 0),e([Ye({reflect:!0})],Dl.prototype,"hintText",void 0),e([Ye({reflect:!0})],Dl.prototype,"name",void 0),e([Ye({type:Boolean,reflect:!0})],Dl.prototype,"disabled",void 0),e([Ye({type:Boolean,reflect:!0})],Dl.prototype,"invalid",void 0);var Nl=Me`.form-check-input[type=checkbox]{border-radius:var(--sgds-form-border-radius-md)}.form-check-input:checked,.form-check-input[checked]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none"><path d="M14.347 3.979a.522.522 0 0 1 0 .739L7.043 12.02a.521.521 0 0 1-.738 0L2.653 8.369a.522.522 0 1 1 .739-.738l3.282 3.283 6.934-6.935a.52.52 0 0 1 .739 0Z" fill="%23fff"/></svg>')}.form-check-input:indeterminate,.form-check-input[indeterminate]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5Z" fill="%23fff"/></svg>');background-color:var(--sgds-form-primary-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-transparent)}.form-check-input:indeterminate:focus,.form-check-input:indeterminate:hover,.form-check-input[indeterminate]:focus-visible,.form-check-input[indeterminate]:hover{background-color:var(--sgds-form-primary-surface-emphasis)}.form-check-input:checked.is-invalid,.form-check-input:indeterminate.is-invalid,.form-check-input[checked].is-invalid,.form-check-input[indeterminate].is-invalid{background-color:var(--sgds-form-danger-surface-default)}.form-check-label{width:100%}`,zl=Me`input{margin:0}.form-check{display:flex;gap:var(--sgds-form-gap-md);padding:var(--sgds-form-padding-inline-sm) 0}.form-check-input{appearance:none;background-color:var(--sgds-form-surface-default);background-image:var(--sgds-radio-bg-image);background-position:50%;background-repeat:no-repeat;background-size:auto;border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);height:var(--sgds-form-height-sm);width:var(--sgds-form-width-xs)}.form-check-input:checked,.form-check-input[checked]{background-color:var(--sgds-form-primary-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-transparent)}.form-check-input:focus-visible{outline:var(--sgds-form-outline-focus);outline-offset:var(--sgds-form-outline-offset-focus)}.form-check-input:not([disabled]):not(.is-invalid):not([aria-checked=true]):not(:focus-visible):hover{outline:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);outline-offset:var(--sgds-form-outline-offset-focus)}.form-check-input:not([disabled]):not(.is-invalid):checked:focus-visible,.form-check-input:not([disabled]):not(.is-invalid):checked:hover,.form-check-input:not([disabled]):not(.is-invalid)[checked]:focus-visible,.form-check-input:not([disabled]):not(.is-invalid)[checked]:hover{background-color:var(--sgds-form-primary-surface-emphasis)}:host([disabled]) .form-check{cursor:not-allowed;opacity:var(--sgds-opacity-50)}.form-check-input:not([disabled]).is-invalid{border:var(--sgds-form-border-width-default) solid var(--sgds-form-danger-border-color-default)}.form-check-input:not([disabled]).is-invalid:focus-visible{outline:var(--sgds-border-width-2) solid var(--sgds-form-danger-color-default);outline-offset:var(--sgds-form-outline-offset-focus)}`;class Fl extends(fl(Dl)){constructor(){super(...arguments),this.checked=!1,this.defaultChecked=!1,this.indeterminate=!1,this.required=!1,this.invalidFeedback="",this._isTouched=!1}click(){this.input.click()}focus(e){this.input.focus(e)}blur(){this.input.blur()}_handleChange(e){this.indeterminate&&(this.indeterminate=!this.indeterminate),this.checked=!this.checked,super._mixinHandleChange(e),this.emit("sgds-change",{detail:{checked:this.checked,value:this.value}}),this.checked?this.emit("sgds-check",{detail:{value:this.value}}):this.emit("sgds-uncheck",{detail:{value:this.value}})}_handleKeyDown(e){const t=e.metaKey||e.ctrlKey||e.shiftKey||e.altKey;"Enter"!==e.key||t||this.click()}_handleBlur(){this._isTouched=!0,this.emit("sgds-blur")}_handleFocus(){this.emit("sgds-focus")}_handleInvalid(e){e.preventDefault(),this.invalid=!0}_handleDisabledChange(){this.setInvalid(!1)}_handleIsTouched(){this._isTouched&&(this.invalid=!this.input.checkValidity())}_mixinResetFormControl(){this._isTouched=!1,this.checked=this.input.checked=this.defaultChecked,this.input.dispatchEvent(new InputEvent("reset")),this._mixinResetValidity(this.input)}reportValidity(){return this._mixinReportValidity()}checkValidity(){return this._mixinCheckValidity()}get validity(){return this._mixinGetValidity()}get validationMessage(){return this._mixinGetValidationMessage()}firstUpdated(e){super.firstUpdated(e),this.checked&&this.emit("sgds-check",{detail:{value:this.value}})}render(){const e="both"===this.hasFeedback||"style"===this.hasFeedback,t="both"===this.hasFeedback||"text"===this.hasFeedback;return Q`
+    `}}Ol.styles=[Il],e([Ye({type:Boolean,reflect:!0})],Ol.prototype,"active",void 0),e([Ye({type:Boolean,reflect:!0})],Ol.prototype,"disabled",void 0),e([Ye({type:String,reflect:!0})],Ol.prototype,"value",void 0);var Rl=Me`.form-label{color:var(--sgds-form-color-default);margin-bottom:0}.form-label.disabled{opacity:var(--sgds-opacity-50)}.form-check-label{color:var(--sgds-form-color-default)}.form-check-input:disabled~.form-check-label,.form-check-input[disabled]~.form-check-label{cursor:not-allowed}`,Ul=Me`.form-control::placeholder{color:var(--sgds-form-color-subtle);font-family:var(--sgds-font-family-brand);font-weight:var(--sgds-font-weight-light);line-height:var(--sgds-line-height-body)}`;class Dl extends wl{constructor(){super(...arguments),this.label="",this.hintText="",this.disabled=!1,this.invalid=!1,this._controlId=pl("input"),this._labelId=pl("label")}setInvalid(e){this.invalid=e,e?this.emit("sgds-invalid"):this.emit("sgds-valid")}}Dl.styles=[...wl.styles,dl,hl,Rl,Ul],e([Ye({reflect:!0})],Dl.prototype,"label",void 0),e([Ye({reflect:!0})],Dl.prototype,"hintText",void 0),e([Ye({reflect:!0})],Dl.prototype,"name",void 0),e([Ye({type:Boolean,reflect:!0})],Dl.prototype,"disabled",void 0),e([Ye({type:Boolean,reflect:!0})],Dl.prototype,"invalid",void 0);var Nl=Me`.form-check-input[type=checkbox]{border-radius:var(--sgds-form-border-radius-md)}.form-check-input:checked,.form-check-input[checked]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none"><path d="M14.347 3.979a.522.522 0 0 1 0 .739L7.043 12.02a.521.521 0 0 1-.738 0L2.653 8.369a.522.522 0 1 1 .739-.738l3.282 3.283 6.934-6.935a.52.52 0 0 1 .739 0Z" fill="%23fff"/></svg>')}.form-check-input:indeterminate,.form-check-input[indeterminate]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5Z" fill="%23fff"/></svg>');background-color:var(--sgds-form-primary-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-transparent)}.form-check-input:indeterminate:focus,.form-check-input:indeterminate:hover,.form-check-input[indeterminate]:focus-visible,.form-check-input[indeterminate]:hover{background-color:var(--sgds-form-primary-surface-emphasis)}.form-check-input:checked.is-invalid,.form-check-input:indeterminate.is-invalid,.form-check-input[checked].is-invalid,.form-check-input[indeterminate].is-invalid{background-color:var(--sgds-form-danger-surface-default)}.form-check-label{width:100%}`,zl=Me`input{margin:0}.form-check{display:flex;gap:var(--sgds-form-gap-md);padding:var(--sgds-form-padding-inline-sm) 0}.form-check-input{appearance:none;background-color:var(--sgds-form-surface-default);background-image:var(--sgds-radio-bg-image);background-position:50%;background-repeat:no-repeat;background-size:auto;border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);height:var(--sgds-form-height-sm);width:var(--sgds-form-width-xs)}.form-check-input:checked,.form-check-input[checked]{background-color:var(--sgds-form-primary-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-transparent)}.form-check-input:focus-visible{outline:var(--sgds-form-outline-focus);outline-offset:var(--sgds-form-outline-offset-focus)}.form-check-input:not([disabled]):not(.is-invalid):not([aria-checked=true]):not(:focus-visible):hover{outline:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);outline-offset:var(--sgds-form-outline-offset-focus)}.form-check-input:not([disabled]):not(.is-invalid):checked:focus-visible,.form-check-input:not([disabled]):not(.is-invalid):checked:hover,.form-check-input:not([disabled]):not(.is-invalid)[checked]:focus-visible,.form-check-input:not([disabled]):not(.is-invalid)[checked]:hover{background-color:var(--sgds-form-primary-surface-emphasis)}:host([disabled]) .form-check{cursor:not-allowed;opacity:var(--sgds-opacity-50)}.form-check-input:not([disabled]).is-invalid{border:var(--sgds-form-border-width-default) solid var(--sgds-form-danger-border-color-default)}.form-check-input:not([disabled]).is-invalid:focus-visible{outline:var(--sgds-border-width-2) solid var(--sgds-form-danger-color-default);outline-offset:var(--sgds-form-outline-offset-focus)}`;class Fl extends(fl(Dl)){constructor(){super(...arguments),this.checked=!1,this.defaultChecked=!1,this.indeterminate=!1,this.required=!1,this.invalidFeedback="",this._isTouched=!1}click(){this.input.click()}focus(e){this.input.focus(e)}blur(){this.input.blur()}_handleChange(e){this.indeterminate&&(this.indeterminate=!this.indeterminate),this.checked=!this.checked,super._mixinHandleChange(e),this.emit("sgds-change",{detail:{checked:this.checked,value:this.value}}),this.checked?this.emit("sgds-check",{detail:{value:this.value}}):this.emit("sgds-uncheck",{detail:{value:this.value}})}_handleKeyDown(e){const t=e.metaKey||e.ctrlKey||e.shiftKey||e.altKey;"Enter"!==e.key||t||this.click()}_handleBlur(){this._isTouched=!0,this.emit("sgds-blur")}_handleFocus(){this.emit("sgds-focus")}_handleInvalid(e){e.preventDefault(),this.invalid=!0}_handleDisabledChange(){this.setInvalid(!1)}_handleIsTouched(){this._isTouched&&(this.invalid=!this.input.checkValidity())}_mixinResetFormControl(){this._isTouched=!1,this.checked=this.input.checked=this.defaultChecked,this.input.dispatchEvent(new InputEvent("reset")),this._mixinResetValidity(this.input)}reportValidity(){return this._mixinReportValidity()}checkValidity(){return this._mixinCheckValidity()}get validity(){return this._mixinGetValidity()}get validationMessage(){return this._mixinGetValidationMessage()}firstUpdated(e){super.firstUpdated(e),this.checked&&this.emit("sgds-check",{detail:{value:this.value}})}render(){const e="both"===this.hasFeedback||"style"===this.hasFeedback,t="both"===this.hasFeedback||"text"===this.hasFeedback;return Q`
       <div class="form-check">
         <input
           class=${dt({"form-check-input":!0,"is-invalid":e&&this.invalid})}