@govtechsg/sgds-web-component 3.24.1-rc.0 → 3.24.1-rc.1

package/index.umd.min.js

@@ -266,7 +266,7 @@ const ct=Symbol.for(""),ht=e=>{if(e?.r===ct)return e?._$litStatic$},pt=(e,...t)=
    * Copyright 2020 Google LLC
    * SPDX-License-Identifier: BSD-3-Clause
    */
-class extends Ye{constructor(e){if(super(e),e.type!==Re&&e.type!==Ne&&e.type!==Ue)throw new Error("The `live` directive is not allowed on child or event bindings");if(!zt(e))throw new Error("`live` bindings can only contain a single expression")}render(e){return e}update(e,[t]){if(t===se||t===ie)return t;const s=e.element,i=e.name;if(e.type===Re){if(t===s[i])return se}else if(e.type===Ue){if(!!t===s.hasAttribute(i))return se}else if(e.type===Ne&&s.getAttribute(i)===String(t))return se;return Pt(e),t}});var aa=n`.invalid-feedback-container{display:flex;gap:var(--sgds-form-gap-sm)}.invalid-feedback,.invalid-feedback-container{color:var(--sgds-form-danger-color-default);line-height:var(--sgds-line-height-20)}.invalid-feedback{font-size:var(--sgds-font-size-14);font-weight:var(--sgds-font-weight-regular)}.valid-icon{color:var(--sgds-form-success-color-default)}`,oa=n`.form-text{color:var(--sgds-form-color-subtle);font-size:var(--sgds-font-size-label-sm);line-height:var(--sgds-line-height-2-xs)}.form-text.disabled{opacity:var(--sgds-opacity-40)}`,na=n`.form-control-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.m-width-160{min-width:var(--sgds-dimension-160)}.m-width-256{min-width:var(--sgds-dimension-256)}.form-label{color:var(--sgds-form-color-default);font-size:var(--sgds-font-size-label-md);font-weight:var(--sgds-font-weight-semibold)}.form-control-group{align-items:center;background-color:var(--sgds-form-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--input-border-radius,var(--sgds-form-border-radius-md));display:flex;gap:var(--sgds-form-gap-md);height:var(--sgds-dimension-48);justify-content:center;overflow:hidden;padding:0 var(--sgds-form-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:-webkit-fill-available;width:-moz-available}.form-control{appearance:none;background-clip:padding-box;background:none;border:none;color:var(--sgds-form-color-default);display:block;flex-grow:1;font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-label-md);line-height:var(--sgds-line-height-xs);min-width:0;outline:none;padding:0;width:100%}.form-clearable{color:var(--sgds-color-subtle);cursor:pointer}@media (prefers-reduced-motion:reduce){.form-control-group{transition:none}}.form-control-group:not(.disabled):not(.is-invalid):not(.readonly):not(:focus-within):hover{outline:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-group:not(.disabled):not(.is-invalid):focus-within{outline:var(--sgds-form-outline-focus);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-container.disabled{opacity:var(--sgds-opacity-40)}.form-control-group.disabled{background-color:var(--sgds-form-surface-muted);cursor:not-allowed}.form-control-group.readonly{background-color:var(--sgds-form-surface-raised)}.form-control-group.is-invalid:not(.disabled){border:var(--sgds-form-border-width-default) solid var(--sgds-form-danger-border-color-default)}.form-control-group:not(.disabled).is-invalid:focus-within{outline:var(--sgds-border-width-2) solid var(--sgds-form-danger-color-default);outline-offset:var(--sgds-form-outline-offset-focus)}`;const ra=(e="value")=>(t,s)=>{const i=t.constructor,a=i.prototype.attributeChangedCallback;i.prototype.attributeChangedCallback=function(t,o,n){var r;const l=i.getPropertyOptions(e);if(t===("string"==typeof l.attribute?l.attribute:e).toLowerCase()){const t=l.converter||_,i=("function"==typeof t?t:null!==(r=null==t?void 0:t.fromAttribute)&&void 0!==r?r:_.fromAttribute)(n,l.type);this[e]!==i&&(this[s]=i)}a.call(this,t,o,n)}};class la{constructor(e,t){(this.host=e).addController(this),this._internals=e._internals||this.host.attachInternals(),this.options=Object.assign({setInvalid:(e,t)=>{e.invalid=t},value:e=>e.value,input:e=>e.input},t)}hostConnected(){this.host.addEventListener("invalid",e=>this.handleInvalid(e))}hostDisconnected(){this.host.removeEventListener("invalid",e=>this.handleInvalid(e))}handleInvalid(e){e.preventDefault(),this.options.setInvalid(this.host,!0)}handleInput(e){const t=e.target;this.options.setInvalid(this.host,!1),this.validateInput(t)}handleChange(e){const t=e.target;this.validateInput(t),this.options.setInvalid(this.host,!this.checkValidity())}get form(){return this._internals.form}get validity(){return this._internals.validity}get validationMessage(){return this._internals.validationMessage}get willValidate(){return this._internals.willValidate}updateInvalidState(){this.options.setInvalid(this.host,!this.checkValidity())}resetValidity(){return this._internals.setValidity({})}checkValidity(){return this._internals.checkValidity()}reportValidity(){return this._internals.reportValidity()}setValidity(e,t,s){return this._internals.setValidity(e,t,s)}setFormValue(){const e=this.options.value(this.host);this._internals.setFormValue(e)}validateInput(e){if(this.options.input(this.host).disabled)return this._internals.setValidity({});const t=e.validity;if(t.valid)this._internals.setValidity({});else for(const s in t)t[s]&&(this.validationError=s.toString(),this._internals.setValidity({[this.validationError]:!0},e.validationMessage,e))}}const da=t=>{class s extends t{constructor(...e){super(...e),this._isTouched=!1,this._internals=this.attachInternals()}connectedCallback(){var e;super.connectedCallback(),null!==(e=this.inputValidationController)&&void 0!==e||(this.inputValidationController=new la(this))}async firstUpdated(e){super.firstUpdated(e),this.input=this.shadowRoot.querySelector("input")||await this.sgdsInput||this.shadowRoot.querySelector("textarea")||await this.sgdsDatepickerInput,this._mixinSetFormValue(),this._mixinShouldSkipSgdsValidation()||this._mixinValidate(this.input)}formResetCallback(){this._mixinResetFormControl?this._mixinResetFormControl():(this.value=this.defaultValue,this._mixinResetValidity(this.input)),this._mixinSetFormValue()}_mixinHandleChange(e){this._mixinSetFormValue(),this._mixinShouldSkipSgdsValidation()||this.inputValidationController.handleChange(e)}_mixinHandleInputChange(e){this._mixinSetFormValue(),this._mixinShouldSkipSgdsValidation()||this.inputValidationController.handleInput(e)}_mixinResetValidity(e){this.inputValidationController.resetValidity(),this.inputValidationController.updateInvalidState(),this._isTouched&&(this._isTouched=!1),this._mixinShouldSkipSgdsValidation()||this.inputValidationController.validateInput(e)}_mixinValidate(e){this._mixinShouldSkipSgdsValidation()||this.inputValidationController.validateInput(e)}_mixinSetFormValue(){const e=this.value;this._internals.setFormValue(e)}_mixinCheckValidity(){return!!this._mixinShouldSkipSgdsValidation()||this.inputValidationController.checkValidity()}_mixinReportValidity(){return!!this._mixinShouldSkipSgdsValidation()||this.inputValidationController.reportValidity()}_mixinGetValidity(){return this._internals.validity}_mixinGetValidationMessage(){return this._internals.validationMessage}_mixinSetValidity(e,t,s){if(!this._mixinShouldSkipSgdsValidation())return this.inputValidationController.setValidity(e,t,s)}_mixinShouldSkipSgdsValidation(){const e=this.closest("form");return(null==e?void 0:e.noValidate)||this.noValidate}}return s.formAssociated=!0,e([De("sgds-input")],s.prototype,"sgdsInput",void 0),e([De("sgds-datepicker-input")],s.prototype,"sgdsDatepickerInput",void 0),s};var ca=n`.empty-menu,.loading-menu{padding:var(--sgds-padding-sm) var(--sgds-padding-lg,20px);pointer-events:none}.loading-menu{align-items:center;display:flex;gap:var(--sgds-gap-xs)}`;class ha extends(da(zi)){setInvalid(e){this.invalid=e,e?this.emit("sgds-invalid"):this.emit("sgds-valid")}constructor(){super(),this.label="",this.hintText="",this.autofocus=!1,this.disabled=!1,this.required=!1,this.loading=!1,this.value="",this.displayValue="",this.defaultValue="",this.hasFeedback=!1,this.invalidFeedback="",this.invalid=!1,this.autocomplete="on",this.menuList=[],this.selectedItems=[],this.filteredList=[],this._isTouched=!1,this._controlId=Zi("input"),this._labelId=Zi("label"),this.floatingOpts={middleware:[yi({apply({rects:e,elements:t}){t.floating.style.width=`${e.reference.width}px`}})]}}connectedCallback(){super.connectedCallback(),this.addEventListener("blur",async e=>{var t;if(this._mixinShouldSkipSgdsValidation())return;const s=this.constructor.childName,i=(null===(t=e.relatedTarget)||void 0===t?void 0:t.tagName.toLowerCase())===s;this.invalid=!i&&!this._mixinReportValidity()})}reportValidity(){return this._mixinReportValidity()}setValidity(e,t,s){return this._mixinSetValidity(e,t,s)}checkValidity(){return this._mixinCheckValidity()}get validity(){return this._mixinGetValidity()}get validationMessage(){return this._mixinGetValidationMessage()}_renderFeedback(){return this.invalid&&this.hasFeedback?ee` <div class="invalid-feedback-container">
+class extends Ye{constructor(e){if(super(e),e.type!==Re&&e.type!==Ne&&e.type!==Ue)throw new Error("The `live` directive is not allowed on child or event bindings");if(!zt(e))throw new Error("`live` bindings can only contain a single expression")}render(e){return e}update(e,[t]){if(t===se||t===ie)return t;const s=e.element,i=e.name;if(e.type===Re){if(t===s[i])return se}else if(e.type===Ue){if(!!t===s.hasAttribute(i))return se}else if(e.type===Ne&&s.getAttribute(i)===String(t))return se;return Pt(e),t}});var aa=n`.invalid-feedback-container{display:flex;gap:var(--sgds-form-gap-sm)}.invalid-feedback,.invalid-feedback-container{color:var(--sgds-form-danger-color-default);line-height:var(--sgds-line-height-20)}.invalid-feedback{font-size:var(--sgds-font-size-14);font-weight:var(--sgds-font-weight-regular)}.valid-icon{color:var(--sgds-form-success-color-default)}`,oa=n`.form-text{color:var(--sgds-form-color-subtle);font-size:var(--sgds-font-size-label-sm);line-height:var(--sgds-line-height-2-xs)}.form-text.disabled{opacity:var(--sgds-opacity-40)}`,na=n`.form-control-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.m-width-160{min-width:var(--sgds-dimension-160)}.m-width-256{min-width:var(--sgds-dimension-256)}.form-label{color:var(--sgds-form-color-default);font-size:var(--sgds-font-size-label-md);font-weight:var(--sgds-font-weight-semibold)}.form-control-group{align-items:center;background-color:var(--sgds-form-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--input-border-radius,var(--sgds-form-border-radius-md));display:flex;gap:var(--sgds-form-gap-xl);height:var(--sgds-dimension-48);justify-content:center;overflow:hidden;padding:0 var(--sgds-form-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:-webkit-fill-available;width:-moz-available}.form-control{appearance:none;background-clip:padding-box;background:none;border:none;color:var(--sgds-form-color-default);display:block;flex-grow:1;font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-label-md);line-height:var(--sgds-line-height-xs);min-width:0;outline:none;padding:0;width:100%}.form-clearable{color:var(--sgds-color-subtle);cursor:pointer}@media (prefers-reduced-motion:reduce){.form-control-group{transition:none}}.form-control-group:not(.disabled):not(.is-invalid):not(.readonly):not(:focus-within):hover{outline:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-group:not(.disabled):not(.is-invalid):focus-within{outline:var(--sgds-form-outline-focus);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-container.disabled{opacity:var(--sgds-opacity-40)}.form-control-group.disabled{background-color:var(--sgds-form-surface-muted);cursor:not-allowed}.form-control-group.readonly{background-color:var(--sgds-form-surface-raised)}.form-control-group.is-invalid:not(.disabled){border:var(--sgds-form-border-width-default) solid var(--sgds-form-danger-border-color-default)}.form-control-group:not(.disabled).is-invalid:focus-within{outline:var(--sgds-border-width-2) solid var(--sgds-form-danger-color-default);outline-offset:var(--sgds-form-outline-offset-focus)}`;const ra=(e="value")=>(t,s)=>{const i=t.constructor,a=i.prototype.attributeChangedCallback;i.prototype.attributeChangedCallback=function(t,o,n){var r;const l=i.getPropertyOptions(e);if(t===("string"==typeof l.attribute?l.attribute:e).toLowerCase()){const t=l.converter||_,i=("function"==typeof t?t:null!==(r=null==t?void 0:t.fromAttribute)&&void 0!==r?r:_.fromAttribute)(n,l.type);this[e]!==i&&(this[s]=i)}a.call(this,t,o,n)}};class la{constructor(e,t){(this.host=e).addController(this),this._internals=e._internals||this.host.attachInternals(),this.options=Object.assign({setInvalid:(e,t)=>{e.invalid=t},value:e=>e.value,input:e=>e.input},t)}hostConnected(){this.host.addEventListener("invalid",e=>this.handleInvalid(e))}hostDisconnected(){this.host.removeEventListener("invalid",e=>this.handleInvalid(e))}handleInvalid(e){e.preventDefault(),this.options.setInvalid(this.host,!0)}handleInput(e){const t=e.target;this.options.setInvalid(this.host,!1),this.validateInput(t)}handleChange(e){const t=e.target;this.validateInput(t),this.options.setInvalid(this.host,!this.checkValidity())}get form(){return this._internals.form}get validity(){return this._internals.validity}get validationMessage(){return this._internals.validationMessage}get willValidate(){return this._internals.willValidate}updateInvalidState(){this.options.setInvalid(this.host,!this.checkValidity())}resetValidity(){return this._internals.setValidity({})}checkValidity(){return this._internals.checkValidity()}reportValidity(){return this._internals.reportValidity()}setValidity(e,t,s){return this._internals.setValidity(e,t,s)}setFormValue(){const e=this.options.value(this.host);this._internals.setFormValue(e)}validateInput(e){if(this.options.input(this.host).disabled)return this._internals.setValidity({});const t=e.validity;if(t.valid)this._internals.setValidity({});else for(const s in t)t[s]&&(this.validationError=s.toString(),this._internals.setValidity({[this.validationError]:!0},e.validationMessage,e))}}const da=t=>{class s extends t{constructor(...e){super(...e),this._isTouched=!1,this._internals=this.attachInternals()}connectedCallback(){var e;super.connectedCallback(),null!==(e=this.inputValidationController)&&void 0!==e||(this.inputValidationController=new la(this))}async firstUpdated(e){super.firstUpdated(e),this.input=this.shadowRoot.querySelector("input")||await this.sgdsInput||this.shadowRoot.querySelector("textarea")||await this.sgdsDatepickerInput,this._mixinSetFormValue(),this._mixinShouldSkipSgdsValidation()||this._mixinValidate(this.input)}formResetCallback(){this._mixinResetFormControl?this._mixinResetFormControl():(this.value=this.defaultValue,this._mixinResetValidity(this.input)),this._mixinSetFormValue()}_mixinHandleChange(e){this._mixinSetFormValue(),this._mixinShouldSkipSgdsValidation()||this.inputValidationController.handleChange(e)}_mixinHandleInputChange(e){this._mixinSetFormValue(),this._mixinShouldSkipSgdsValidation()||this.inputValidationController.handleInput(e)}_mixinResetValidity(e){this.inputValidationController.resetValidity(),this.inputValidationController.updateInvalidState(),this._isTouched&&(this._isTouched=!1),this._mixinShouldSkipSgdsValidation()||this.inputValidationController.validateInput(e)}_mixinValidate(e){this._mixinShouldSkipSgdsValidation()||this.inputValidationController.validateInput(e)}_mixinSetFormValue(){const e=this.value;this._internals.setFormValue(e)}_mixinCheckValidity(){return!!this._mixinShouldSkipSgdsValidation()||this.inputValidationController.checkValidity()}_mixinReportValidity(){return!!this._mixinShouldSkipSgdsValidation()||this.inputValidationController.reportValidity()}_mixinGetValidity(){return this._internals.validity}_mixinGetValidationMessage(){return this._internals.validationMessage}_mixinSetValidity(e,t,s){if(!this._mixinShouldSkipSgdsValidation())return this.inputValidationController.setValidity(e,t,s)}_mixinShouldSkipSgdsValidation(){const e=this.closest("form");return(null==e?void 0:e.noValidate)||this.noValidate}}return s.formAssociated=!0,e([De("sgds-input")],s.prototype,"sgdsInput",void 0),e([De("sgds-datepicker-input")],s.prototype,"sgdsDatepickerInput",void 0),s};var ca=n`.empty-menu,.loading-menu{padding:var(--sgds-padding-sm) var(--sgds-padding-lg,20px);pointer-events:none}.loading-menu{align-items:center;display:flex;gap:var(--sgds-gap-xs)}`;class ha extends(da(zi)){setInvalid(e){this.invalid=e,e?this.emit("sgds-invalid"):this.emit("sgds-valid")}constructor(){super(),this.label="",this.hintText="",this.autofocus=!1,this.disabled=!1,this.required=!1,this.loading=!1,this.value="",this.displayValue="",this.defaultValue="",this.hasFeedback=!1,this.invalidFeedback="",this.invalid=!1,this.autocomplete="on",this.menuList=[],this.selectedItems=[],this.filteredList=[],this._isTouched=!1,this._controlId=Zi("input"),this._labelId=Zi("label"),this.floatingOpts={middleware:[yi({apply({rects:e,elements:t}){t.floating.style.width=`${e.reference.width}px`}})]}}connectedCallback(){super.connectedCallback(),this.addEventListener("blur",async e=>{var t;if(this._mixinShouldSkipSgdsValidation())return;const s=this.constructor.childName,i=(null===(t=e.relatedTarget)||void 0===t?void 0:t.tagName.toLowerCase())===s;this.invalid=!i&&!this._mixinReportValidity()})}reportValidity(){return this._mixinReportValidity()}setValidity(e,t,s){return this._mixinSetValidity(e,t,s)}checkValidity(){return this._mixinCheckValidity()}get validity(){return this._mixinGetValidity()}get validationMessage(){return this._mixinGetValidationMessage()}_renderFeedback(){return this.invalid&&this.hasFeedback?ee` <div class="invalid-feedback-container">
           <slot name="invalidIcon">
             <sgds-icon name="exclamation-circle-fill" size="md"></sgds-icon>
           </slot>
@@ -596,7 +596,7 @@ const xa=(e,t,s)=>{const i=new Map;for(let a=t;a<=s;a++)i.set(e[a],a);return i};
         >
         </sgds-icon-button>
       </div>
-    `}}Wa.styles=[Ka],Wa.dependencies={"sgds-icon":_t,"sgds-icon-button":Ya,"sgds-button":Yi},e([Ve({attribute:!1})],Wa.prototype,"displayDate",void 0),e([Ve({attribute:!1})],Wa.prototype,"focusedDate",void 0),e([Ve({attribute:!1})],Wa.prototype,"selectedDate",void 0),e([Ve()],Wa.prototype,"view",void 0),e([Ve()],Wa.prototype,"focusedTabIndex",void 0),e([ot("focusedTabIndex",{waitUntilFirstUpdate:!0})],Wa.prototype,"_handleFocusedTabIndexChange",null);const Ga=["January","February","March","April","May","June","July","August","September","October","November","December"];class Ja{constructor(e,t){this.listeners=new Map,this.input=e,this.placeholderStr=this._buildPlaceholder(t.pattern),this._state=this.placeholderStr,this.listeners.set("accept",[]),this.listeners.set("complete",[]);const s={value:"",isComplete:!1};Object.defineProperties(s,{value:{get:()=>this._state,enumerable:!0},isComplete:{get:()=>this._state.length>0&&!/[DMY]/.test(this._state),enumerable:!0}}),this.masked=s,this.input.value&&this.input.value.length===this._state.length&&!/[DMY]/.test(this.input.value)?this._state=this.input.value:this.input.value=this._state,this._boundHandleBeforeInput=this._handleBeforeInput.bind(this),this._boundHandleInput=this._handleInput.bind(this),this._boundHandleKeydown=this._handleKeydown.bind(this),this._boundHandleFocus=this._handleFocus.bind(this),this._boundHandleBlur=this._handleBlur.bind(this),this._valueAtFocus=this._state,this.input.addEventListener("beforeinput",this._boundHandleBeforeInput),this.input.addEventListener("input",this._boundHandleInput),this.input.addEventListener("keydown",this._boundHandleKeydown),this.input.addEventListener("focus",this._boundHandleFocus),this.input.addEventListener("blur",this._boundHandleBlur)}get value(){return this._state}set value(e){this._state=e&&""!==e?e:this.placeholderStr,this.input.value=this._state,this._emit("accept")}on(e,t){var s;null===(s=this.listeners.get(e))||void 0===s||s.push(t)}updateValue(){this._state=this.input.value}destroy(){this.input.removeEventListener("beforeinput",this._boundHandleBeforeInput),this.input.removeEventListener("input",this._boundHandleInput),this.input.removeEventListener("keydown",this._boundHandleKeydown),this.input.removeEventListener("focus",this._boundHandleFocus),this.input.removeEventListener("blur",this._boundHandleBlur),this.listeners.clear()}_handleFocus(){this._valueAtFocus=this._state}_handleBlur(){this._state!==this._valueAtFocus&&this.input.dispatchEvent(new Event("change",{bubbles:!0}))}_buildPlaceholder(e){return e.replace(/`/g,"").replace(/\{(\/)\}/g,"$1").replace(/d/g,"D").replace(/m/g,"M").replace(/y/g,"Y")}_getDigitPositions(){const e=[];for(let t=0;t<this.placeholderStr.length;t++){const s=this.placeholderStr[t];"D"!==s&&"M"!==s&&"Y"!==s||e.push(t)}return e}_handleBeforeInput(e){e.preventDefault()}_handleInput(){this.input.value!==this._state&&(this.input.value=this._state)}_handleKeydown(e){"Backspace"===e.key?(e.preventDefault(),this._backspace()):"Delete"===e.key?(e.preventDefault(),this._deleteForward()):1===e.key.length&&/\d/.test(e.key)&&(e.preventDefault(),this._insertDigit(e.key))}_insertDigit(e){const t=this._getDigitPositions(),s=this._state.split("");let i=-1;for(const e of t)if(/[DMY]/.test(s[e])){i=e;break}if(-1===i)return;s[i]=e,this._state=s.join(""),this.input.value=this._state;const a=this._findNextInputPos(i);this.input.setSelectionRange(a,a),this._emit("accept"),this.masked.isComplete&&this._emit("complete")}_backspace(){var e;const t=null!==(e=this.input.selectionStart)&&void 0!==e?e:this._state.length,s=this._state.split("");let i=t-1;for(;i>=0&&!/\d/.test(s[i]);)i--;i>=0&&(s[i]=this.placeholderStr[i],this._state=s.join(""),this.input.value=this._state,this.input.setSelectionRange(i,i),this._emit("accept"))}_deleteForward(){var e;const t=null!==(e=this.input.selectionStart)&&void 0!==e?e:0,s=this._state.split("");let i=t;for(;i<s.length&&!/\d/.test(s[i]);)i++;i<s.length&&(s[i]=this.placeholderStr[i],this._state=s.join(""),this.input.value=this._state,this.input.setSelectionRange(t,t),this._emit("accept"))}_findNextInputPos(e){for(let t=e+1;t<this._state.length;t++)if(/[DMY]/.test(this._state[t]))return t;return this._state.length}_emit(e){const t=this.listeners.get(e);if(t)for(const e of t)e()}}var Xa=n`:host{--input-border-radius:var(--sgds-form-border-radius-md);--input-min-width:var(--sgds-dimension-160)}.form-control-container{min-width:var(--input-min-width)}:host(.quantity-toggle) input::-webkit-inner-spin-button{appearance:none;margin:0}:host(.quantity-toggle) input{text-align:center}.form-control-prefix,.form-control-suffix{color:var(--sgds-form-color-subtle);display:flex;flex-shrink:0;font-weight:var(--sgds-font-weight-semibold);gap:var(--sgds-gap-xs)}.form-control-group.quantity-toggle{padding:0}sgds-icon[role=button]{cursor:pointer}sgds-icon[role=button]:focus,sgds-icon[role=button]:focus-visible{outline:var(--sgds-form-outline-focus)}.form-control-row{align-items:center;display:flex;gap:var(--sgds-gap-sm)}`;class Qa extends(da(fa)){constructor(){super(...arguments),this.type="text",this.placeholder="placeholder",this.autofocus=!1,this.readonly=!1,this.autocomplete="on",this.defaultValue="",this.valid=!1,this.loading=!1,this.required=!1,this.noValidate=!1,this.value="",this._isTouched=!1,this._showPassword=!1}focus(e){this.input.focus(e)}blur(){this.input.blur()}reportValidity(){return this._mixinReportValidity()}checkValidity(){return this._mixinCheckValidity()}setValidity(e,t,s){return this._mixinSetValidity(e,t,s)}get validity(){return this._mixinGetValidity()}get validationMessage(){return this._mixinGetValidationMessage()}_handleFocus(){this.emit("sgds-focus")}_handleBlur(){const e=this.emit("sgds-blur",{cancelable:!0});this._mixinShouldSkipSgdsValidation()||e.defaultPrevented||(this.setInvalid(!this._mixinCheckValidity()),this._isTouched=!0)}_handleClick(){this.focus()}_handleChange(e){this.value=this.input.value;this.emit("sgds-change",{cancelable:!0}).defaultPrevented||super._mixinHandleChange(e)}_handleInputChange(e){this.value=this.input.value;this.emit("sgds-input",{cancelable:!0}).defaultPrevented||super._mixinHandleInputChange(e)}_handleIsTouched(){this._mixinShouldSkipSgdsValidation()||this._isTouched&&this.setInvalid(!this._mixinCheckValidity())}_handleDisabledChange(){this.setInvalid(!1)}_renderInput(){const e="both"===this.hasFeedback||"style"===this.hasFeedback,t="both"===this.hasFeedback||"text"===this.hasFeedback,s=[this.hintText?`${this._controlId}Help`:"",this.invalid&&t?`${this._controlId}-invalid`:""].filter(Boolean).join(" ")||void 0;return gt`
+    `}}Wa.styles=[Ka],Wa.dependencies={"sgds-icon":_t,"sgds-icon-button":Ya,"sgds-button":Yi},e([Ve({attribute:!1})],Wa.prototype,"displayDate",void 0),e([Ve({attribute:!1})],Wa.prototype,"focusedDate",void 0),e([Ve({attribute:!1})],Wa.prototype,"selectedDate",void 0),e([Ve()],Wa.prototype,"view",void 0),e([Ve()],Wa.prototype,"focusedTabIndex",void 0),e([ot("focusedTabIndex",{waitUntilFirstUpdate:!0})],Wa.prototype,"_handleFocusedTabIndexChange",null);const Ga=["January","February","March","April","May","June","July","August","September","October","November","December"];class Ja{constructor(e,t){this.listeners=new Map,this.input=e,this.placeholderStr=this._buildPlaceholder(t.pattern),this._state=this.placeholderStr,this.listeners.set("accept",[]),this.listeners.set("complete",[]);const s={value:"",isComplete:!1};Object.defineProperties(s,{value:{get:()=>this._state,enumerable:!0},isComplete:{get:()=>this._state.length>0&&!/[DMY]/.test(this._state),enumerable:!0}}),this.masked=s,this.input.value&&this.input.value.length===this._state.length&&!/[DMY]/.test(this.input.value)?this._state=this.input.value:this.input.value=this._state,this._boundHandleBeforeInput=this._handleBeforeInput.bind(this),this._boundHandleInput=this._handleInput.bind(this),this._boundHandleKeydown=this._handleKeydown.bind(this),this._boundHandleFocus=this._handleFocus.bind(this),this._boundHandleBlur=this._handleBlur.bind(this),this._valueAtFocus=this._state,this.input.addEventListener("beforeinput",this._boundHandleBeforeInput),this.input.addEventListener("input",this._boundHandleInput),this.input.addEventListener("keydown",this._boundHandleKeydown),this.input.addEventListener("focus",this._boundHandleFocus),this.input.addEventListener("blur",this._boundHandleBlur)}get value(){return this._state}set value(e){this._state=e&&""!==e?e:this.placeholderStr,this.input.value=this._state,this._emit("accept")}on(e,t){var s;null===(s=this.listeners.get(e))||void 0===s||s.push(t)}updateValue(){this._state=this.input.value}destroy(){this.input.removeEventListener("beforeinput",this._boundHandleBeforeInput),this.input.removeEventListener("input",this._boundHandleInput),this.input.removeEventListener("keydown",this._boundHandleKeydown),this.input.removeEventListener("focus",this._boundHandleFocus),this.input.removeEventListener("blur",this._boundHandleBlur),this.listeners.clear()}_handleFocus(){this._valueAtFocus=this._state}_handleBlur(){this._state!==this._valueAtFocus&&this.input.dispatchEvent(new Event("change",{bubbles:!0}))}_buildPlaceholder(e){return e.replace(/`/g,"").replace(/\{(\/)\}/g,"$1").replace(/d/g,"D").replace(/m/g,"M").replace(/y/g,"Y")}_getDigitPositions(){const e=[];for(let t=0;t<this.placeholderStr.length;t++){const s=this.placeholderStr[t];"D"!==s&&"M"!==s&&"Y"!==s||e.push(t)}return e}_handleBeforeInput(e){e.preventDefault()}_handleInput(){this.input.value!==this._state&&(this.input.value=this._state)}_handleKeydown(e){"Backspace"===e.key?(e.preventDefault(),this._backspace()):"Delete"===e.key?(e.preventDefault(),this._deleteForward()):1===e.key.length&&/\d/.test(e.key)&&(e.preventDefault(),this._insertDigit(e.key))}_insertDigit(e){const t=this._getDigitPositions(),s=this._state.split("");let i=-1;for(const e of t)if(/[DMY]/.test(s[e])){i=e;break}if(-1===i)return;s[i]=e,this._state=s.join(""),this.input.value=this._state;const a=this._findNextInputPos(i);this.input.setSelectionRange(a,a),this._emit("accept"),this.masked.isComplete&&this._emit("complete")}_backspace(){var e;const t=null!==(e=this.input.selectionStart)&&void 0!==e?e:this._state.length,s=this._state.split("");let i=t-1;for(;i>=0&&!/\d/.test(s[i]);)i--;i>=0&&(s[i]=this.placeholderStr[i],this._state=s.join(""),this.input.value=this._state,this.input.setSelectionRange(i,i),this._emit("accept"))}_deleteForward(){var e;const t=null!==(e=this.input.selectionStart)&&void 0!==e?e:0,s=this._state.split("");let i=t;for(;i<s.length&&!/\d/.test(s[i]);)i++;i<s.length&&(s[i]=this.placeholderStr[i],this._state=s.join(""),this.input.value=this._state,this.input.setSelectionRange(t,t),this._emit("accept"))}_findNextInputPos(e){for(let t=e+1;t<this._state.length;t++)if(/[DMY]/.test(this._state[t]))return t;return this._state.length}_emit(e){const t=this.listeners.get(e);if(t)for(const e of t)e()}}var Xa=n`:host{--input-border-radius:var(--sgds-form-border-radius-md);--input-min-width:var(--sgds-dimension-160)}.form-control-container{min-width:var(--input-min-width)}:host(.quantity-toggle) input::-webkit-inner-spin-button{appearance:none;margin:0}:host(.quantity-toggle) input{text-align:center}.form-control-prefix,.form-control-suffix{align-items:center;color:var(--sgds-form-color-subtle);display:flex;flex-shrink:0;font-weight:var(--sgds-font-weight-semibold);gap:var(--sgds-gap-xs);height:100%;justify-content:center}.form-control-prefix{border-right:var(--sgds-form-border-width-default) solid var(--sgds-border-color-muted);padding-right:var(--sgds-form-padding-x)}.form-control-suffix{border-left:var(--sgds-form-border-width-default) solid var(--sgds-border-color-muted);padding-left:var(--sgds-form-padding-x)}.form-control-group.quantity-toggle{padding:0}sgds-icon[role=button]{cursor:pointer}sgds-icon[role=button]:focus,sgds-icon[role=button]:focus-visible{outline:var(--sgds-form-outline-focus)}.form-control-row{align-items:center;display:flex;gap:var(--sgds-gap-sm)}`;class Qa extends(da(fa)){constructor(){super(...arguments),this.type="text",this.placeholder="placeholder",this.autofocus=!1,this.readonly=!1,this.autocomplete="on",this.defaultValue="",this.valid=!1,this.loading=!1,this.required=!1,this.noValidate=!1,this.value="",this._isTouched=!1,this._showPassword=!1}focus(e){this.input.focus(e)}blur(){this.input.blur()}reportValidity(){return this._mixinReportValidity()}checkValidity(){return this._mixinCheckValidity()}setValidity(e,t,s){return this._mixinSetValidity(e,t,s)}get validity(){return this._mixinGetValidity()}get validationMessage(){return this._mixinGetValidationMessage()}_handleFocus(){this.emit("sgds-focus")}_handleBlur(){const e=this.emit("sgds-blur",{cancelable:!0});this._mixinShouldSkipSgdsValidation()||e.defaultPrevented||(this.setInvalid(!this._mixinCheckValidity()),this._isTouched=!0)}_handleClick(){this.focus()}_handleChange(e){this.value=this.input.value;this.emit("sgds-change",{cancelable:!0}).defaultPrevented||super._mixinHandleChange(e)}_handleInputChange(e){this.value=this.input.value;this.emit("sgds-input",{cancelable:!0}).defaultPrevented||super._mixinHandleInputChange(e)}_handleIsTouched(){this._mixinShouldSkipSgdsValidation()||this._isTouched&&this.setInvalid(!this._mixinCheckValidity())}_handleDisabledChange(){this.setInvalid(!1)}_renderInput(){const e="both"===this.hasFeedback||"style"===this.hasFeedback,t="both"===this.hasFeedback||"text"===this.hasFeedback,s=[this.hintText?`${this._controlId}Help`:"",this.invalid&&t?`${this._controlId}-invalid`:""].filter(Boolean).join(" ")||void 0;return gt`
       <div
         class="form-control-group ${Ke({disabled:this.disabled,readonly:this.readonly,"is-invalid":this.invalid&&e})}"
         @click=${this._handleClick}