npm - @govtechsg/sgds-web-component - Versions diffs - 3.30.1-rc.5 → 3.30.1-rc.7 - Mend

@govtechsg/sgds-web-component 3.30.1-rc.5 → 3.30.1-rc.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (76) hide show

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@govtechsg/sgds-web-component",
-  "version": "3.30.1-rc.5",
+  "version": "3.30.1-rc.7",
   "description": "",
   "main": "./index.umd.js",
   "module": "./index.js",

package/react/components/Checkbox/sgds-checkbox.cjs.js CHANGED Viewed

@@ -93,6 +93,18 @@ var SgdsCheckbox = class extends require_validatorMixin.SgdsFormValidatorMixin(r
 		e.preventDefault();
 		this.invalid = true;
 	}
+	/** Override mixin to match native checkbox: send value only when checked, default to "on". */
+	_mixinSetFormValue() {
+		super._mixinSetFormValue(this.checked ? this.value ?? "on" : null);
+	}
+	/** @internal */
+	_handleCheckedChange() {
+		this._mixinSetFormValue();
+	}
+	/** @internal */
+	_handleValueChange() {
+		this._mixinSetFormValue();
+	}
 	/** @internal */
 	_handleDisabledChange() {
 		this.setInvalid(false);
@@ -219,6 +231,8 @@ require_decorate.default([(0, lit_decorators_js.property)({
 	reflect: true
 })], SgdsCheckbox.prototype, "invalidFeedback", void 0);
 require_decorate.default([(0, lit_decorators_js.state)()], SgdsCheckbox.prototype, "_isTouched", void 0);
+require_decorate.default([require_watch.watch("checked", { waitUntilFirstUpdate: true })], SgdsCheckbox.prototype, "_handleCheckedChange", null);
+require_decorate.default([require_watch.watch("value", { waitUntilFirstUpdate: true })], SgdsCheckbox.prototype, "_handleValueChange", null);
 require_decorate.default([require_watch.watch("disabled", { waitUntilFirstUpdate: true })], SgdsCheckbox.prototype, "_handleDisabledChange", null);
 require_decorate.default([require_watch.watch("_isTouched", { waitUntilFirstUpdate: true })], SgdsCheckbox.prototype, "_handleIsTouched", null);
 //#endregion

package/react/components/Checkbox/sgds-checkbox.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sgds-checkbox.cjs.js","names":["SgdsFormValidatorMixin","FormControlElement","HasSlotController","formCheckStyles","checkboxStyle","SgdsIcon","classMap","ifDefined","live","nothing","property","defaultValue","state","watch"],"sources":["../../../../src/components/Checkbox/sgds-checkbox.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property, 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 SgdsIcon from \"../Icon/sgds-icon\";\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 { HasSlotController } from \"../../utils/slot\";\nimport checkboxStyle from \"./checkbox.css\";\nimport formCheckStyles from \"../../styles/form-check.css\";\n\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 * @event sgds-blur - Emitted when input is not in focus.\n * @event sgds-focus - Emitted when input is in focus.\n * @event sgds-check - Emitted when checkbox is checked\n * @event sgds-uncheck - Emitted when checkbox is unchecked\n * @event sgds-invalid - Emitted when the checkbox's invalid state is set to true.\n * @event sgds-valid - Emitted when the checkbox's invalid state is set to false.\n /\nexport class SgdsCheckbox extends SgdsFormValidatorMixin(FormControlElement) implements SgdsFormControl {\n static styles = [...FormControlElement.styles, formCheckStyles, checkboxStyle];\n\n private readonly hasSlotController = new HasSlotController(this, \"[default]\");\n\n /@internal /\n static dependencies = {\n \"sgds-icon\": SgdsIcon\n };\n\n /** Value of the HTML form control. Primarily used to differentiate a list of related checkboxes that have the same name. /\n @property({ type: String, reflect: true }) value: string;\n\n /* Draws the checkbox in a checked state. /\n @property({ type: Boolean, reflect: true }) checked = false;\n\n /* Allows invalidFeedback, invalid and valid styles to be visible with the input /\n @property({ type: String, reflect: true }) hasFeedback: \"style\" \| \"text\" \| \"both\";\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 /* Marks the checkbox input as indeterminate , with indeterminate logo /\n @property({ type: Boolean, reflect: true }) indeterminate = false;\n\n /* Makes the checkbox a required field. /\n @property({ type: Boolean, reflect: true }) required = false;\n\n /* Disables native and sgds validation for the checkbox. /\n @property({ type: Boolean, reflect: true }) noValidate = false;\n\n /* Accessible label forwarded to the internal input's aria-label. Use when no visible label slot is used. /\n @property({ type: String }) ariaLabel = \"\";\n\n /Feedback text for error state when validated /\n @property({ type: String, reflect: true }) invalidFeedback = \"\";\n\n @state() private _isTouched = false;\n\n /** Simulates a click on the checkbox. /\n public click() {\n this.input.click();\n }\n /* Sets focus on the checkbox. /\n public focus(options?: FocusOptions) {\n this.input.focus(options);\n }\n\n /* Removes focus from the checkbox. /\n public blur() {\n this.input.blur();\n }\n\n private _handleChange(e: Event) {\n if (this.indeterminate) {\n this.indeterminate = !this.indeterminate;\n }\n\n this.checked = !this.checked;\n super._mixinHandleChange(e);\n this.emit(\"sgds-change\", { detail: { checked: this.checked, value: this.value } });\n\n this.checked\n ? this.emit(\"sgds-check\", { detail: { value: this.value } })\n : this.emit(\"sgds-uncheck\", { detail: { value: this.value } });\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 private _handleBlur() {\n this._isTouched = true;\n this.emit(\"sgds-blur\");\n }\n\n private _handleFocus() {\n this.emit(\"sgds-focus\");\n }\n\n private _handleInvalid(e: Event) {\n e.preventDefault();\n this.invalid = true;\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 @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n _handleIsTouched() {\n if (this._mixinShouldSkipSgdsValidation()) return;\n if (this._isTouched) {\n this.invalid = !this.input.checkValidity();\n }\n }\n\n private _mixinResetFormControl() {\n this._isTouched = false;\n this.checked = this.input.checked = this.defaultChecked;\n this.input.dispatchEvent(new InputEvent(\"reset\"));\n this._mixinResetValidity(this.input);\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 firstUpdated(_changedProperties) {\n super.firstUpdated(_changedProperties);\n this.checked && this.emit(\"sgds-check\", { detail: { value: this.value } });\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n this.addEventListener(\"click\", this._handleHostClick);\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n this.removeEventListener(\"click\", this._handleHostClick);\n }\n\n // Delegates host-targeted clicks to the internal input so that clicking anywhere\n // on the sgds-checkbox element (e.g. expanded padding inside sgds-dropdown-item) toggles\n // the checkbox. Clicks already originating from inside the shadow DOM are left alone.\n private _handleHostClick = (e: Event) => {\n if (e.composedPath()[0] === this) {\n e.stopPropagation();\n this.input.click();\n }\n };\n render() {\n const displayFeedbackStyle = this.hasFeedback === \"both\" \|\| this.hasFeedback === \"style\";\n const displayFeedbackText = this.hasFeedback === \"both\" \|\| this.hasFeedback === \"text\";\n const hasDefaultSlot = this.hasSlotController.test(\"[default]\");\n\n return html`\n <div class=\"form-check\">\n <input\n class=${classMap({\n \"form-check-input\": true,\n \"is-invalid\": displayFeedbackStyle && this.invalid\n })}\n type=\"checkbox\"\n id=${this._controlId}\n aria-invalid=${this.invalid ? \"true\" : \"false\"}\n aria-label=${ifDefined(this.ariaLabel \|\| undefined)}\n name=${ifDefined(this.name)}\n ?indeterminate=${this.indeterminate}\n ?required=${this.required}\n aria-disabled=${this.disabled ? \"true\" : \"false\"}\n aria-checked=${this.checked ? \"true\" : \"false\"}\n @change=${(e: Event) => this._handleChange(e)}\n @keydown=${this._handleKeyDown}\n @invalid=${(e: Event) => this._handleInvalid(e)}\n ?checked=${live(this.checked)}\n .disabled=${this.disabled}\n .required=${this.required}\n @blur=${this._handleBlur}\n @focus=${this._handleFocus}\n />\n ${hasDefaultSlot\n ? html`<label for=\"${this._controlId}\" class=\"form-check-label\" id=\"${this._labelId}\"><slot></slot></label>`\n : nothing}\n </div>\n ${displayFeedbackText && this.invalid\n ? html`\n <div class=\"invalid-feedback-container\">\n <slot name=\"invalidIcon\">\n <sgds-icon name=\"exclamation-circle-fill\" size=\"md\"></sgds-icon>\n </slot>\n <div id=\"checkbox-feedback\" tabindex=\"0\" class=\"invalid-feedback\">\n ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n </div>\n </div>\n `\n : nothing}\n `;\n }\n}\n\nexport default SgdsCheckbox;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BA,IAAa,eAAb,cAAkCA,uBAAAA,uBAAuBC,6BAAAA,OAAkB,CAAC,CAA4B;;;EAGjE,KAAA,oBAAA,IAAIC,aAAAA,kBAAkB,MAAM,WAAW;EAWtB,KAAA,UAAA;EAOrC,KAAA,iBAAA;EAG2C,KAAA,gBAAA;EAGL,KAAA,WAAA;EAGE,KAAA,aAAA;EAGjB,KAAA,YAAA;EAGqB,KAAA,kBAAA;EAE/B,KAAA,aAAA;EAoHF,KAAA,oBAAA,MAAa;GACvC,IAAI,EAAE,aAAa,CAAC,CAAC,OAAO,MAAM;IAChC,EAAE,gBAAgB;IAClB,KAAK,MAAM,MAAM;GACnB;EACF;;;EA9JgB,KAAA,SAAA;GAAC,GAAGD,6BAAAA,QAAmB;GAAQE,mBAAAA;GAAiBC,iBAAAA;EAAa;;;EAKvD,KAAA,eAAA,EACpB,aAAaC,kBAAAA,SACf;;;CAiCA,QAAe;EACb,KAAK,MAAM,MAAM;CACnB;;CAEA,MAAa,SAAwB;EACnC,KAAK,MAAM,MAAM,OAAO;CAC1B;;CAGA,OAAc;EACZ,KAAK,MAAM,KAAK;CAClB;CAEA,cAAsB,GAAU;EAC9B,IAAI,KAAK,eACP,KAAK,gBAAgB,CAAC,KAAK;EAG7B,KAAK,UAAU,CAAC,KAAK;EACrB,MAAM,mBAAmB,CAAC;EAC1B,KAAK,KAAK,eAAe,EAAE,QAAQ;GAAE,SAAS,KAAK;GAAS,OAAO,KAAK;EAAM,EAAE,CAAC;EAEjF,KAAK,UACD,KAAK,KAAK,cAAc,EAAE,QAAQ,EAAE,OAAO,KAAK,MAAM,EAAE,CAAC,IACzD,KAAK,KAAK,gBAAgB,EAAE,QAAQ,EAAE,OAAO,KAAK,MAAM,EAAE,CAAC;CACjE;CAEA,eAAuB,OAAsB;EAC3C,MAAM,cAAc,MAAM,WAAW,MAAM,WAAW,MAAM,YAAY,MAAM;EAC9E,IAAI,MAAM,QAAQ,WAAW,CAAC,aAC5B,KAAK,MAAM;CAEf;CAEA,cAAsB;EACpB,KAAK,aAAa;EAClB,KAAK,KAAK,WAAW;CACvB;CAEA,eAAuB;EACrB,KAAK,KAAK,YAAY;CACxB;CAEA,eAAuB,GAAU;EAC/B,EAAE,eAAe;EACjB,KAAK,UAAU;CACjB;;CAGA,wBACwB;EAEtB,KAAK,WAAW,KAAK;CACvB;CAEA,mBACmB;EACjB,IAAI,KAAK,+BAA+B,GAAG;EAC3C,IAAI,KAAK,YACP,KAAK,UAAU,CAAC,KAAK,MAAM,cAAc;CAE7C;CAEA,yBAAiC;EAC/B,KAAK,aAAa;EAClB,KAAK,UAAU,KAAK,MAAM,UAAU,KAAK;EACzC,KAAK,MAAM,cAAc,IAAI,WAAW,OAAO,CAAC;EAChD,KAAK,oBAAoB,KAAK,KAAK;CACrC;;;;;CAKA,iBAAiC;EAC/B,OAAO,KAAK,qBAAqB;CACnC;;;;CAIA,gBAAgC;EAC9B,OAAO,KAAK,oBAAoB;CAClC;;;;CAIA,IAAW,WAA0B;EACnC,OAAO,KAAK,kBAAkB;CAChC;;;;CAIA,IAAW,oBAAoB;EAC7B,OAAO,KAAK,2BAA2B;CACzC;CAEA,aAAa,oBAAoB;EAC/B,MAAM,aAAa,kBAAkB;EACrC,KAAK,WAAW,KAAK,KAAK,cAAc,EAAE,QAAQ,EAAE,OAAO,KAAK,MAAM,EAAE,CAAC;CAC3E;CAEA,oBAA0B;EACxB,MAAM,kBAAkB;EACxB,KAAK,iBAAiB,SAAS,KAAK,gBAAgB;CACtD;CAEA,uBAA6B;EAC3B,MAAM,qBAAqB;EAC3B,KAAK,oBAAoB,SAAS,KAAK,gBAAgB;CACzD;CAWA,SAAS;EACP,MAAM,uBAAuB,KAAK,gBAAgB,UAAU,KAAK,gBAAgB;EACjF,MAAM,sBAAsB,KAAK,gBAAgB,UAAU,KAAK,gBAAgB;EAChF,MAAM,iBAAiB,KAAK,kBAAkB,KAAK,WAAW;EAE9D,OAAO,IAAA,IAAI;;;mBAGGC,GAAAA,4BAAAA,SAAAA,CAAS;GACf,oBAAoB;GACpB,cAAc,wBAAwB,KAAK;EAC7C,CAAC,EAAE;;eAEE,KAAK,WAAW;yBACN,KAAK,UAAU,SAAS,QAAQ;wBAClCC,GAAAA,6BAAAA,UAAAA,CAAU,KAAK,aAAa,KAAA,CAAS,EAAE;kBAC7CA,GAAAA,6BAAAA,UAAAA,CAAU,KAAK,IAAI,EAAE;2BACX,KAAK,cAAc;sBACxB,KAAK,SAAS;0BACV,KAAK,WAAW,SAAS,QAAQ;yBAClC,KAAK,UAAU,SAAS,QAAQ;qBACpC,MAAa,KAAK,cAAc,CAAC,EAAE;qBACnC,KAAK,eAAe;sBACnB,MAAa,KAAK,eAAe,CAAC,EAAE;sBACrCC,GAAAA,uBAAAA,KAAAA,CAAK,KAAK,OAAO,EAAE;sBAClB,KAAK,SAAS;sBACd,KAAK,SAAS;kBAClB,KAAK,YAAY;mBAChB,KAAK,aAAa;;UAE3B,iBACE,IAAA,IAAI,eAAe,KAAK,WAAW,iCAAiC,KAAK,SAAS,2BAClFC,IAAAA,QAAQ;;QAEZ,uBAAuB,KAAK,UAC1B,IAAA,IAAI;;;;;;kBAMI,KAAK,kBAAkB,KAAK,kBAAkB,KAAK,MAAM,kBAAkB;;;cAInFA,IAAAA,QAAQ;;CAEhB;AACF;AArMGC,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,aAAA,WAAA,SAAA,KAAA,CAAA;AAGxCA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,aAAA,WAAA,WAAA,KAAA,CAAA;AAGzCA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,aAAA,WAAA,eAAA,KAAA,CAAA;AAGxCC,iBAAAA,QAAAA,CAAAA,qBAAAA,aAAa,SAAS,CAAA,GAAA,aAAA,WAAA,kBAAA,KAAA,CAAA;AAItBD,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,aAAA,WAAA,iBAAA,KAAA,CAAA;AAGzCA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,aAAA,WAAA,YAAA,KAAA,CAAA;AAGzCA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,aAAA,WAAA,cAAA,KAAA,CAAA;AAGzCA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,aAAA,WAAA,aAAA,KAAA,CAAA;AAGzBA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,aAAA,WAAA,mBAAA,KAAA,CAAA;AAExCE,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,MAAAA,CAAM,CAAA,GAAA,aAAA,WAAA,cAAA,KAAA,CAAA;AAoDNC,iBAAAA,QAAAA,CAAAA,cAAAA,MAAM,YAAY,EAAE,sBAAsB,KAAK,CAAC,CAAA,GAAA,aAAA,WAAA,yBAAA,IAAA;AAMhDA,iBAAAA,QAAAA,CAAAA,cAAAA,MAAM,cAAc,EAAE,sBAAsB,KAAK,CAAC,CAAA,GAAA,aAAA,WAAA,oBAAA,IAAA"}
1	+ {"version":3,"file":"sgds-checkbox.cjs.js","names":["SgdsFormValidatorMixin","FormControlElement","HasSlotController","formCheckStyles","checkboxStyle","SgdsIcon","classMap","ifDefined","live","nothing","property","defaultValue","state","watch"],"sources":["../../../../src/components/Checkbox/sgds-checkbox.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property, 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 SgdsIcon from \"../Icon/sgds-icon\";\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 { HasSlotController } from \"../../utils/slot\";\nimport checkboxStyle from \"./checkbox.css\";\nimport formCheckStyles from \"../../styles/form-check.css\";\n\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 * @event sgds-blur - Emitted when input is not in focus.\n * @event sgds-focus - Emitted when input is in focus.\n * @event sgds-check - Emitted when checkbox is checked\n * @event sgds-uncheck - Emitted when checkbox is unchecked\n * @event sgds-invalid - Emitted when the checkbox's invalid state is set to true.\n * @event sgds-valid - Emitted when the checkbox's invalid state is set to false.\n /\nexport class SgdsCheckbox extends SgdsFormValidatorMixin(FormControlElement) implements SgdsFormControl {\n static styles = [...FormControlElement.styles, formCheckStyles, checkboxStyle];\n\n private readonly hasSlotController = new HasSlotController(this, \"[default]\");\n\n /@internal /\n static dependencies = {\n \"sgds-icon\": SgdsIcon\n };\n\n /** Value submitted in FormData when the checkbox is checked. Defaults to `\"on\"` when not set, matching native checkbox behaviour. When unchecked, the key is absent from FormData. /\n @property({ type: String, reflect: true }) value: string;\n\n /* Draws the checkbox in a checked state. /\n @property({ type: Boolean, reflect: true }) checked = false;\n\n /* Allows invalidFeedback, invalid and valid styles to be visible with the input /\n @property({ type: String, reflect: true }) hasFeedback: \"style\" \| \"text\" \| \"both\";\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 /* Marks the checkbox input as indeterminate , with indeterminate logo /\n @property({ type: Boolean, reflect: true }) indeterminate = false;\n\n /* Makes the checkbox a required field. /\n @property({ type: Boolean, reflect: true }) required = false;\n\n /* Disables native and sgds validation for the checkbox. /\n @property({ type: Boolean, reflect: true }) noValidate = false;\n\n /* Accessible label forwarded to the internal input's aria-label. Use when no visible label slot is used. /\n @property({ type: String }) ariaLabel = \"\";\n\n /Feedback text for error state when validated /\n @property({ type: String, reflect: true }) invalidFeedback = \"\";\n\n @state() private _isTouched = false;\n\n /** Simulates a click on the checkbox. /\n public click() {\n this.input.click();\n }\n /* Sets focus on the checkbox. /\n public focus(options?: FocusOptions) {\n this.input.focus(options);\n }\n\n /* Removes focus from the checkbox. /\n public blur() {\n this.input.blur();\n }\n\n private _handleChange(e: Event) {\n if (this.indeterminate) {\n this.indeterminate = !this.indeterminate;\n }\n\n this.checked = !this.checked;\n super._mixinHandleChange(e);\n this.emit(\"sgds-change\", { detail: { checked: this.checked, value: this.value } });\n\n this.checked\n ? this.emit(\"sgds-check\", { detail: { value: this.value } })\n : this.emit(\"sgds-uncheck\", { detail: { value: this.value } });\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 private _handleBlur() {\n this._isTouched = true;\n this.emit(\"sgds-blur\");\n }\n\n private _handleFocus() {\n this.emit(\"sgds-focus\");\n }\n\n private _handleInvalid(e: Event) {\n e.preventDefault();\n this.invalid = true;\n }\n\n /* Override mixin to match native checkbox: send value only when checked, default to \"on\". /\n private _mixinSetFormValue() {\n super._mixinSetFormValue(this.checked ? this.value ?? \"on\" : null);\n }\n\n /* @internal /\n @watch(\"checked\", { waitUntilFirstUpdate: true })\n _handleCheckedChange() {\n this._mixinSetFormValue();\n }\n\n /* @internal /\n @watch(\"value\", { waitUntilFirstUpdate: true })\n _handleValueChange() {\n this._mixinSetFormValue();\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 @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n _handleIsTouched() {\n if (this._mixinShouldSkipSgdsValidation()) return;\n if (this._isTouched) {\n this.invalid = !this.input.checkValidity();\n }\n }\n\n private _mixinResetFormControl() {\n this._isTouched = false;\n this.checked = this.input.checked = this.defaultChecked;\n this.input.dispatchEvent(new InputEvent(\"reset\"));\n this._mixinResetValidity(this.input);\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 firstUpdated(_changedProperties) {\n super.firstUpdated(_changedProperties);\n this.checked && this.emit(\"sgds-check\", { detail: { value: this.value } });\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n this.addEventListener(\"click\", this._handleHostClick);\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n this.removeEventListener(\"click\", this._handleHostClick);\n }\n\n // Delegates host-targeted clicks to the internal input so that clicking anywhere\n // on the sgds-checkbox element (e.g. expanded padding inside sgds-dropdown-item) toggles\n // the checkbox. Clicks already originating from inside the shadow DOM are left alone.\n private _handleHostClick = (e: Event) => {\n if (e.composedPath()[0] === this) {\n e.stopPropagation();\n this.input.click();\n }\n };\n render() {\n const displayFeedbackStyle = this.hasFeedback === \"both\" \|\| this.hasFeedback === \"style\";\n const displayFeedbackText = this.hasFeedback === \"both\" \|\| this.hasFeedback === \"text\";\n const hasDefaultSlot = this.hasSlotController.test(\"[default]\");\n\n return html`\n <div class=\"form-check\">\n <input\n class=${classMap({\n \"form-check-input\": true,\n \"is-invalid\": displayFeedbackStyle && this.invalid\n })}\n type=\"checkbox\"\n id=${this._controlId}\n aria-invalid=${this.invalid ? \"true\" : \"false\"}\n aria-label=${ifDefined(this.ariaLabel \|\| undefined)}\n name=${ifDefined(this.name)}\n ?indeterminate=${this.indeterminate}\n ?required=${this.required}\n aria-disabled=${this.disabled ? \"true\" : \"false\"}\n aria-checked=${this.checked ? \"true\" : \"false\"}\n @change=${(e: Event) => this._handleChange(e)}\n @keydown=${this._handleKeyDown}\n @invalid=${(e: Event) => this._handleInvalid(e)}\n ?checked=${live(this.checked)}\n .disabled=${this.disabled}\n .required=${this.required}\n @blur=${this._handleBlur}\n @focus=${this._handleFocus}\n />\n ${hasDefaultSlot\n ? html`<label for=\"${this._controlId}\" class=\"form-check-label\" id=\"${this._labelId}\"><slot></slot></label>`\n : nothing}\n </div>\n ${displayFeedbackText && this.invalid\n ? html`\n <div class=\"invalid-feedback-container\">\n <slot name=\"invalidIcon\">\n <sgds-icon name=\"exclamation-circle-fill\" size=\"md\"></sgds-icon>\n </slot>\n <div id=\"checkbox-feedback\" tabindex=\"0\" class=\"invalid-feedback\">\n ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n </div>\n </div>\n `\n : nothing}\n `;\n }\n}\n\nexport default SgdsCheckbox;\n"],"mappings":"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"}

package/react/components/Checkbox/sgds-checkbox.js CHANGED Viewed

@@ -93,6 +93,18 @@ var SgdsCheckbox = class extends SgdsFormValidatorMixin(FormControlElement) {
 		e.preventDefault();
 		this.invalid = true;
 	}
+	/** Override mixin to match native checkbox: send value only when checked, default to "on". */
+	_mixinSetFormValue() {
+		super._mixinSetFormValue(this.checked ? this.value ?? "on" : null);
+	}
+	/** @internal */
+	_handleCheckedChange() {
+		this._mixinSetFormValue();
+	}
+	/** @internal */
+	_handleValueChange() {
+		this._mixinSetFormValue();
+	}
 	/** @internal */
 	_handleDisabledChange() {
 		this.setInvalid(false);
@@ -219,6 +231,8 @@ __decorate([property({
 	reflect: true
 })], SgdsCheckbox.prototype, "invalidFeedback", void 0);
 __decorate([state()], SgdsCheckbox.prototype, "_isTouched", void 0);
+__decorate([watch("checked", { waitUntilFirstUpdate: true })], SgdsCheckbox.prototype, "_handleCheckedChange", null);
+__decorate([watch("value", { waitUntilFirstUpdate: true })], SgdsCheckbox.prototype, "_handleValueChange", null);
 __decorate([watch("disabled", { waitUntilFirstUpdate: true })], SgdsCheckbox.prototype, "_handleDisabledChange", null);
 __decorate([watch("_isTouched", { waitUntilFirstUpdate: true })], SgdsCheckbox.prototype, "_handleIsTouched", null);
 //#endregion

package/react/components/Checkbox/sgds-checkbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sgds-checkbox.js","names":["formCheckStyles","checkboxStyle"],"sources":["../../../../src/components/Checkbox/sgds-checkbox.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property, 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 SgdsIcon from \"../Icon/sgds-icon\";\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 { HasSlotController } from \"../../utils/slot\";\nimport checkboxStyle from \"./checkbox.css\";\nimport formCheckStyles from \"../../styles/form-check.css\";\n\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 * @event sgds-blur - Emitted when input is not in focus.\n * @event sgds-focus - Emitted when input is in focus.\n * @event sgds-check - Emitted when checkbox is checked\n * @event sgds-uncheck - Emitted when checkbox is unchecked\n * @event sgds-invalid - Emitted when the checkbox's invalid state is set to true.\n * @event sgds-valid - Emitted when the checkbox's invalid state is set to false.\n /\nexport class SgdsCheckbox extends SgdsFormValidatorMixin(FormControlElement) implements SgdsFormControl {\n static styles = [...FormControlElement.styles, formCheckStyles, checkboxStyle];\n\n private readonly hasSlotController = new HasSlotController(this, \"[default]\");\n\n /@internal /\n static dependencies = {\n \"sgds-icon\": SgdsIcon\n };\n\n /** Value of the HTML form control. Primarily used to differentiate a list of related checkboxes that have the same name. /\n @property({ type: String, reflect: true }) value: string;\n\n /* Draws the checkbox in a checked state. /\n @property({ type: Boolean, reflect: true }) checked = false;\n\n /* Allows invalidFeedback, invalid and valid styles to be visible with the input /\n @property({ type: String, reflect: true }) hasFeedback: \"style\" \| \"text\" \| \"both\";\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 /* Marks the checkbox input as indeterminate , with indeterminate logo /\n @property({ type: Boolean, reflect: true }) indeterminate = false;\n\n /* Makes the checkbox a required field. /\n @property({ type: Boolean, reflect: true }) required = false;\n\n /* Disables native and sgds validation for the checkbox. /\n @property({ type: Boolean, reflect: true }) noValidate = false;\n\n /* Accessible label forwarded to the internal input's aria-label. Use when no visible label slot is used. /\n @property({ type: String }) ariaLabel = \"\";\n\n /Feedback text for error state when validated /\n @property({ type: String, reflect: true }) invalidFeedback = \"\";\n\n @state() private _isTouched = false;\n\n /** Simulates a click on the checkbox. /\n public click() {\n this.input.click();\n }\n /* Sets focus on the checkbox. /\n public focus(options?: FocusOptions) {\n this.input.focus(options);\n }\n\n /* Removes focus from the checkbox. /\n public blur() {\n this.input.blur();\n }\n\n private _handleChange(e: Event) {\n if (this.indeterminate) {\n this.indeterminate = !this.indeterminate;\n }\n\n this.checked = !this.checked;\n super._mixinHandleChange(e);\n this.emit(\"sgds-change\", { detail: { checked: this.checked, value: this.value } });\n\n this.checked\n ? this.emit(\"sgds-check\", { detail: { value: this.value } })\n : this.emit(\"sgds-uncheck\", { detail: { value: this.value } });\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 private _handleBlur() {\n this._isTouched = true;\n this.emit(\"sgds-blur\");\n }\n\n private _handleFocus() {\n this.emit(\"sgds-focus\");\n }\n\n private _handleInvalid(e: Event) {\n e.preventDefault();\n this.invalid = true;\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 @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n _handleIsTouched() {\n if (this._mixinShouldSkipSgdsValidation()) return;\n if (this._isTouched) {\n this.invalid = !this.input.checkValidity();\n }\n }\n\n private _mixinResetFormControl() {\n this._isTouched = false;\n this.checked = this.input.checked = this.defaultChecked;\n this.input.dispatchEvent(new InputEvent(\"reset\"));\n this._mixinResetValidity(this.input);\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 firstUpdated(_changedProperties) {\n super.firstUpdated(_changedProperties);\n this.checked && this.emit(\"sgds-check\", { detail: { value: this.value } });\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n this.addEventListener(\"click\", this._handleHostClick);\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n this.removeEventListener(\"click\", this._handleHostClick);\n }\n\n // Delegates host-targeted clicks to the internal input so that clicking anywhere\n // on the sgds-checkbox element (e.g. expanded padding inside sgds-dropdown-item) toggles\n // the checkbox. Clicks already originating from inside the shadow DOM are left alone.\n private _handleHostClick = (e: Event) => {\n if (e.composedPath()[0] === this) {\n e.stopPropagation();\n this.input.click();\n }\n };\n render() {\n const displayFeedbackStyle = this.hasFeedback === \"both\" \|\| this.hasFeedback === \"style\";\n const displayFeedbackText = this.hasFeedback === \"both\" \|\| this.hasFeedback === \"text\";\n const hasDefaultSlot = this.hasSlotController.test(\"[default]\");\n\n return html`\n <div class=\"form-check\">\n <input\n class=${classMap({\n \"form-check-input\": true,\n \"is-invalid\": displayFeedbackStyle && this.invalid\n })}\n type=\"checkbox\"\n id=${this._controlId}\n aria-invalid=${this.invalid ? \"true\" : \"false\"}\n aria-label=${ifDefined(this.ariaLabel \|\| undefined)}\n name=${ifDefined(this.name)}\n ?indeterminate=${this.indeterminate}\n ?required=${this.required}\n aria-disabled=${this.disabled ? \"true\" : \"false\"}\n aria-checked=${this.checked ? \"true\" : \"false\"}\n @change=${(e: Event) => this._handleChange(e)}\n @keydown=${this._handleKeyDown}\n @invalid=${(e: Event) => this._handleInvalid(e)}\n ?checked=${live(this.checked)}\n .disabled=${this.disabled}\n .required=${this.required}\n @blur=${this._handleBlur}\n @focus=${this._handleFocus}\n />\n ${hasDefaultSlot\n ? html`<label for=\"${this._controlId}\" class=\"form-check-label\" id=\"${this._labelId}\"><slot></slot></label>`\n : nothing}\n </div>\n ${displayFeedbackText && this.invalid\n ? html`\n <div class=\"invalid-feedback-container\">\n <slot name=\"invalidIcon\">\n <sgds-icon name=\"exclamation-circle-fill\" size=\"md\"></sgds-icon>\n </slot>\n <div id=\"checkbox-feedback\" tabindex=\"0\" class=\"invalid-feedback\">\n ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n </div>\n </div>\n `\n : nothing}\n `;\n }\n}\n\nexport default SgdsCheckbox;\n"],"mappings":"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"}
1	+ {"version":3,"file":"sgds-checkbox.js","names":["formCheckStyles","checkboxStyle"],"sources":["../../../../src/components/Checkbox/sgds-checkbox.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property, 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 SgdsIcon from \"../Icon/sgds-icon\";\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 { HasSlotController } from \"../../utils/slot\";\nimport checkboxStyle from \"./checkbox.css\";\nimport formCheckStyles from \"../../styles/form-check.css\";\n\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 * @event sgds-blur - Emitted when input is not in focus.\n * @event sgds-focus - Emitted when input is in focus.\n * @event sgds-check - Emitted when checkbox is checked\n * @event sgds-uncheck - Emitted when checkbox is unchecked\n * @event sgds-invalid - Emitted when the checkbox's invalid state is set to true.\n * @event sgds-valid - Emitted when the checkbox's invalid state is set to false.\n /\nexport class SgdsCheckbox extends SgdsFormValidatorMixin(FormControlElement) implements SgdsFormControl {\n static styles = [...FormControlElement.styles, formCheckStyles, checkboxStyle];\n\n private readonly hasSlotController = new HasSlotController(this, \"[default]\");\n\n /@internal /\n static dependencies = {\n \"sgds-icon\": SgdsIcon\n };\n\n /** Value submitted in FormData when the checkbox is checked. Defaults to `\"on\"` when not set, matching native checkbox behaviour. When unchecked, the key is absent from FormData. /\n @property({ type: String, reflect: true }) value: string;\n\n /* Draws the checkbox in a checked state. /\n @property({ type: Boolean, reflect: true }) checked = false;\n\n /* Allows invalidFeedback, invalid and valid styles to be visible with the input /\n @property({ type: String, reflect: true }) hasFeedback: \"style\" \| \"text\" \| \"both\";\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 /* Marks the checkbox input as indeterminate , with indeterminate logo /\n @property({ type: Boolean, reflect: true }) indeterminate = false;\n\n /* Makes the checkbox a required field. /\n @property({ type: Boolean, reflect: true }) required = false;\n\n /* Disables native and sgds validation for the checkbox. /\n @property({ type: Boolean, reflect: true }) noValidate = false;\n\n /* Accessible label forwarded to the internal input's aria-label. Use when no visible label slot is used. /\n @property({ type: String }) ariaLabel = \"\";\n\n /Feedback text for error state when validated /\n @property({ type: String, reflect: true }) invalidFeedback = \"\";\n\n @state() private _isTouched = false;\n\n /** Simulates a click on the checkbox. /\n public click() {\n this.input.click();\n }\n /* Sets focus on the checkbox. /\n public focus(options?: FocusOptions) {\n this.input.focus(options);\n }\n\n /* Removes focus from the checkbox. /\n public blur() {\n this.input.blur();\n }\n\n private _handleChange(e: Event) {\n if (this.indeterminate) {\n this.indeterminate = !this.indeterminate;\n }\n\n this.checked = !this.checked;\n super._mixinHandleChange(e);\n this.emit(\"sgds-change\", { detail: { checked: this.checked, value: this.value } });\n\n this.checked\n ? this.emit(\"sgds-check\", { detail: { value: this.value } })\n : this.emit(\"sgds-uncheck\", { detail: { value: this.value } });\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 private _handleBlur() {\n this._isTouched = true;\n this.emit(\"sgds-blur\");\n }\n\n private _handleFocus() {\n this.emit(\"sgds-focus\");\n }\n\n private _handleInvalid(e: Event) {\n e.preventDefault();\n this.invalid = true;\n }\n\n /* Override mixin to match native checkbox: send value only when checked, default to \"on\". /\n private _mixinSetFormValue() {\n super._mixinSetFormValue(this.checked ? this.value ?? \"on\" : null);\n }\n\n /* @internal /\n @watch(\"checked\", { waitUntilFirstUpdate: true })\n _handleCheckedChange() {\n this._mixinSetFormValue();\n }\n\n /* @internal /\n @watch(\"value\", { waitUntilFirstUpdate: true })\n _handleValueChange() {\n this._mixinSetFormValue();\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 @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n _handleIsTouched() {\n if (this._mixinShouldSkipSgdsValidation()) return;\n if (this._isTouched) {\n this.invalid = !this.input.checkValidity();\n }\n }\n\n private _mixinResetFormControl() {\n this._isTouched = false;\n this.checked = this.input.checked = this.defaultChecked;\n this.input.dispatchEvent(new InputEvent(\"reset\"));\n this._mixinResetValidity(this.input);\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 firstUpdated(_changedProperties) {\n super.firstUpdated(_changedProperties);\n this.checked && this.emit(\"sgds-check\", { detail: { value: this.value } });\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n this.addEventListener(\"click\", this._handleHostClick);\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n this.removeEventListener(\"click\", this._handleHostClick);\n }\n\n // Delegates host-targeted clicks to the internal input so that clicking anywhere\n // on the sgds-checkbox element (e.g. expanded padding inside sgds-dropdown-item) toggles\n // the checkbox. Clicks already originating from inside the shadow DOM are left alone.\n private _handleHostClick = (e: Event) => {\n if (e.composedPath()[0] === this) {\n e.stopPropagation();\n this.input.click();\n }\n };\n render() {\n const displayFeedbackStyle = this.hasFeedback === \"both\" \|\| this.hasFeedback === \"style\";\n const displayFeedbackText = this.hasFeedback === \"both\" \|\| this.hasFeedback === \"text\";\n const hasDefaultSlot = this.hasSlotController.test(\"[default]\");\n\n return html`\n <div class=\"form-check\">\n <input\n class=${classMap({\n \"form-check-input\": true,\n \"is-invalid\": displayFeedbackStyle && this.invalid\n })}\n type=\"checkbox\"\n id=${this._controlId}\n aria-invalid=${this.invalid ? \"true\" : \"false\"}\n aria-label=${ifDefined(this.ariaLabel \|\| undefined)}\n name=${ifDefined(this.name)}\n ?indeterminate=${this.indeterminate}\n ?required=${this.required}\n aria-disabled=${this.disabled ? \"true\" : \"false\"}\n aria-checked=${this.checked ? \"true\" : \"false\"}\n @change=${(e: Event) => this._handleChange(e)}\n @keydown=${this._handleKeyDown}\n @invalid=${(e: Event) => this._handleInvalid(e)}\n ?checked=${live(this.checked)}\n .disabled=${this.disabled}\n .required=${this.required}\n @blur=${this._handleBlur}\n @focus=${this._handleFocus}\n />\n ${hasDefaultSlot\n ? html`<label for=\"${this._controlId}\" class=\"form-check-label\" id=\"${this._labelId}\"><slot></slot></label>`\n : nothing}\n </div>\n ${displayFeedbackText && this.invalid\n ? html`\n <div class=\"invalid-feedback-container\">\n <slot name=\"invalidIcon\">\n <sgds-icon name=\"exclamation-circle-fill\" size=\"md\"></sgds-icon>\n </slot>\n <div id=\"checkbox-feedback\" tabindex=\"0\" class=\"invalid-feedback\">\n ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n </div>\n </div>\n `\n : nothing}\n `;\n }\n}\n\nexport default SgdsCheckbox;\n"],"mappings":"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"}

package/react/components/Datepicker/sgds-datepicker.cjs.js CHANGED Viewed

@@ -183,8 +183,12 @@ var SgdsDatepicker = class extends require_validatorMixin.SgdsFormValidatorMixin
 			this.focusedTabIndex = (this.focusedTabIndex + 1 + tabIndexArray.length) % tabIndexArray.length;
 		}
 	}
-	_handleValueChange() {
+	async _handleValueChange() {
+		this._mixinSetFormValue();
 		this.emit("sgds-change-date");
+		await this.updateComplete;
+		if (this._mixinShouldSkipSgdsValidation()) return;
+		this._mixinValidate(this.input);
 	}
 	async _handleCloseMenu() {
 		if (this.selectedDateRange.length === 0) this.displayDate = this.initialDisplayDate;

package/react/components/Datepicker/sgds-datepicker.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sgds-datepicker.cjs.js","names":["SgdsFormValidatorMixin","DropdownElement","dropdownMenuStyle","datepickerStyle","DatepickerInput","DatepickerCalendar","DatepickerHeader","SgdsButton","SgdsIconButton","formatDate","DATE_PATTERNS","setTimeToNoon","parseDate","live","ifDefined","ref","classMap","property","defaultValue","state","queryAsync","query","watch"],"sources":["../../../../src/components/Datepicker/sgds-datepicker.ts"],"sourcesContent":["import { formatDate, parseDate } from \"../../utils/date-helpers\";\nimport { html, PropertyValueMap } from \"lit\";\nimport { property, query, queryAsync, state } from \"lit/decorators.js\";\nimport { live } from \"lit/directives/live.js\";\nimport { ref } from \"lit/directives/ref.js\";\nimport { DropdownElement } from \"../../base/dropdown-element\";\nimport { type SgdsFormControl } from \"../../utils/formSubmitController\";\nimport { DATE_PATTERNS, setTimeToNoon } from \"../../utils/time\";\nimport { watch } from \"../../utils/watch\";\nimport { SgdsButton } from \"../Button/sgds-button\";\nimport dropdownMenuStyle from \"../Dropdown/dropdown-menu.css\";\nimport { DatepickerCalendar } from \"./datepicker-calendar\";\nimport { DatepickerHeader } from \"./datepicker-header\";\nimport DatepickerInput from \"./datepicker-input\";\nimport datepickerStyle from \"./datepicker.css\";\nimport { ViewEnum } from \"./types\";\nimport SgdsIconButton from \"../IconButton/sgds-icon-button\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\n\nexport type DateFormat = \"MM/DD/YYYY\" \| \"DD/MM/YYYY\" \| \"YYYY/MM/DD\";\n\n/*\n @summary The `DatePicker` Component is built using `Dropdown`, `Input` and `Button` components. By default, the Calendar points to today's date and input has no value. Users can either pick dates from the calendar or type dates through the input\n \n @event sgds-change-date - Emitted when the state of datepicker's input changes during first load, close button reset click & date click. Date values can be accessed via event.target.value\n * @event sgds-invalid - Emitted when the combo box's invalid state is set to true.\n * @event sgds-valid - Emitted when the combo box's invalid state is set to false.\n \n @description displayDate sets the month, year views of the calendar while focusedDate follows the focus which also directly changes\n * displayDate on certain occasions. Example, when keyboard moves up to the next month, it updates displayDate which then affect the current\n * date view of the calendar\n /\nexport class SgdsDatepicker extends SgdsFormValidatorMixin(DropdownElement) implements SgdsFormControl {\n static styles = [...DropdownElement.styles, dropdownMenuStyle, datepickerStyle];\n /@internal /\n static dependencies = {\n \"sgds-datepicker-input\": DatepickerInput,\n \"sgds-datepicker-calendar\": DatepickerCalendar,\n \"sgds-datepicker-header\": DatepickerHeader,\n \"sgds-button\": SgdsButton,\n \"sgds-icon-button\": SgdsIconButton\n };\n\n constructor() {\n super();\n this.floatingOpts = {\n placement: \"bottom-end\"\n };\n }\n\n /** When true, adds required attribute to input element /\n @property({ type: Boolean, reflect: true }) required = false;\n /The datepicker input's name attribute /\n @property({ reflect: true }) name: string;\n /** When true, adds disabled attribute to input and button element /\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /* Disables native and sgds validation for the datepicker. /\n @property({ type: Boolean, reflect: true }) noValidate = false;\n\n /* Sets the initial value of the datepicker. Replaces deprecated `initialValue`.\n * Pass in dates in this format `dd/mm/yyyy` for single mode and `dd/mm/yyyy - dd/mm/yyyy` for range mode\n * For example, `value=\"22/12/2023\"` for single mode or `value=\"22/12/2023 - 25/12/2023\"` for range mode\n /\n @property({ type: String, reflect: true }) value = \"\";\n\n /\n The initial value of DatePicker on first load for single &\n * range mode as array of string. eg.'[\"22/12/2023\"]' for single &\n * '[\"22/12/2023\",\"25/12/2023\"]' for range respectively.\n * @deprecated since v3.3.0 — use `value` instead.\n /\n @property({ type: Array, reflect: true }) initialValue: string[] = [];\n\n private dateFormat = \"DD/MM/YYYY\";\n\n /* ISO date string to set the lowest allowable date value. e.g. \"2016-05-19T12:00:00.000Z\" /\n @property({ type: String }) minDate = \"\";\n\n /* ISO date string to set the highest allowable date value. e.g. \"2016-05-19T12:00:00.000Z\" /\n @property({ type: String }) maxDate = \"\";\n\n /* Changes DatePicker to single date selection or range date selection /\n @property({ type: String, reflect: true }) mode: \"single\" \| \"range\" = \"single\";\n\n /Feedback text for error state when date input is invalid /\n @property({ type: String, reflect: true }) invalidFeedback: string;\n\n /** Allows invalidFeedback and invalid styles to be visible with the input /\n @property({ type: Boolean, reflect: true }) hasFeedback = false;\n\n /* The datepicker input's label /\n @property({ reflect: true }) label = \"\";\n\n /* The datepicker input's hint text below the label /\n @property({ reflect: true }) hintText = \"\";\n\n /* Controls auto-flipping of menu /\n @property({ type: Boolean, reflect: true, state: false })\n noFlip = false;\n\n /* The drop position of menu relative to the toggle button /\n @property({ type: String, reflect: true, state: false })\n drop: \"up\" \| \"down\" = \"down\";\n\n /* Provides the date context for Calendar to present the appropriate view. Defaults to today's date /\n @property({ attribute: false }) displayDate: Date;\n\n /Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. /\n @defaultValue()\n defaultValue = \"\";\n\n /** Marks the component as invalid. Replace the pseudo :invalid selector. /\n @property({ type: Boolean, reflect: true }) invalid = false;\n\n @state()\n private view: ViewEnum = \"days\";\n\n @state() private selectedDateRange: Date[] = [];\n\n @state() private focusedDate: Date;\n\n @state() private focusedTabIndex = 3;\n\n private isValueEmpty() {\n return this.value === \"\" \|\| this.value === \"DD/MM/YYYY\" \|\| this.value === \"DD/MM/YYYY - DD/MM/YYYY\";\n }\n\n private initialDisplayDate: Date = new Date();\n\n @queryAsync(\"sgds-datepicker-calendar\")\n private calendar: Promise<DatepickerCalendar>;\n\n @queryAsync(\"sgds-datepicker-input\")\n private datepickerInputAsync: Promise<DatepickerInput>;\n\n @query(\"sgds-datepicker-input\")\n private datepickerInput: DatepickerInput;\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 /\n Programmatically sets the invalid state of the datepicker.\n * Use together with `noValidate` (or `novalidate` on the parent `<form>`) and `invalidFeedback`\n * to integrate 3rd-party or custom validation logic.\n /\n public setInvalid(bool: boolean) {\n this.invalid = bool;\n if (this.datepickerInput) {\n this.datepickerInput.setInvalid(bool);\n }\n }\n\n /\n Checks for validity without any native error popup message\n /\n public setValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void {\n return this._mixinSetValidity(flags, message, anchor);\n }\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 async connectedCallback() {\n super.connectedCallback();\n this.addEventListener(\"sgds-view\", this._handleViewChanged);\n this.addEventListener(\"sgds-change-calendar\", this._handleDateChanged);\n this.addEventListener(\"sgds-update-focus\", this._handleFocusDateChanged);\n this.addEventListener(\"sgds-selectmonth\", this._handleSelectMonth);\n this.addEventListener(\"sgds-selectyear\", this._handleSelectYear);\n this.addEventListener(\"sgds-selectdates\", this._handleSelectDatesAndClose);\n this.addEventListener(\"i-sgds-selectdates-input\", this._handleSelectDatesInput);\n this.addEventListener(\"i-sgds-empty-input\", this._handleEmptyInput);\n this.addEventListener(\"keydown\", this._handleTab);\n this.addEventListener(\"sgds-hide\", this._handleCloseMenu);\n this.addEventListener(\"sgds-show\", this._handleOpenMenu);\n this.addEventListener(\"blur\", this._mixinCheckValidity);\n\n this.initialValue = this.value ? this.value.split(\" - \").map(v => v.trim()) : this.initialValue;\n this.initialDisplayDate = this.displayDate \|\| new Date();\n if (this.initialValue && this.initialValue.length > 0) {\n // Validate initialValue against the dateFormat regex\n const dateFormatRegex = new RegExp(this._getDateFormatRegex());\n // const startDateString = this.initialValue[0];\n const invalidDates = this.initialValue.filter(v => !dateFormatRegex.test(v));\n if (invalidDates.length > 0) {\n return console.error(\"Invalid date format in initialValue:\", invalidDates);\n } else {\n const initialSelectedDates = this.initialValue.map(v =>\n setTimeToNoon(parseDate(v, DATE_PATTERNS[this.dateFormat].fnsPattern))\n );\n this._handleSelectDates(initialSelectedDates);\n }\n } else {\n this.displayDate = this.initialDisplayDate;\n }\n\n const input = await this.datepickerInputAsync;\n input.setInvalid(this.invalid);\n }\n\n async firstUpdated(changedProperties: PropertyValueMap<this>) {\n super.firstUpdated(changedProperties);\n if (this.menuIsOpen) {\n const input = await this.datepickerInputAsync;\n await this.updateFloatingPosition();\n const cal = await this.calendar;\n cal.focusOnCalendar(input);\n }\n }\n\n /* @internal /\n private _getDateFormatRegex(): string {\n // validate date strings and adhere to the specified date format\n return (\n this.dateFormat\n // Replace any special characters with their escaped version using \"\\\\$&\"\n .replace(/[.+?^${}()\|[\\]\\\\]/g, \"\\\\$&\")\n // Replace 'MM' with '\\\\d{2}', which matches two digits representing the month (e.g., 01, 12)\n .replace(\"MM\", \"\\\\d{2}\")\n // Replace 'DD' with '\\\\d{2}', which matches two digits representing the day (e.g., 01, 31)\n .replace(\"DD\", \"\\\\d{2}\")\n // Replace 'YYYY' with '\\\\d{4}', which matches four digits representing the year (e.g., 2021)\n .replace(\"YYYY\", \"\\\\d{4}\")\n // Replace '/' with '\\\\/', which matches the forward slash character\n .replace(\"/\", \"\\\\/\")\n );\n }\n private _handleTab(event: KeyboardEvent) {\n if (!this.menuIsOpen) {\n return;\n }\n const tabIndexArray = Array(4);\n if (event.shiftKey && event.key === \"Tab\") {\n event.preventDefault();\n this.focusedTabIndex = (this.focusedTabIndex - 1 + tabIndexArray.length) % tabIndexArray.length;\n } else if (event.key === \"Tab\") {\n event.preventDefault();\n this.focusedTabIndex = (this.focusedTabIndex + 1 + tabIndexArray.length) % tabIndexArray.length;\n }\n }\n\n @watch(\"value\", { waitUntilFirstUpdate: true })\n _handleValueChange() {\n this.emit(\"sgds-change-date\");\n }\n\n private async _handleCloseMenu() {\n if (this.selectedDateRange.length === 0) {\n this.displayDate = this.initialDisplayDate;\n } else {\n const selectedDatesLength = this.selectedDateRange.length;\n this.displayDate = this.selectedDateRange[selectedDatesLength - 1];\n const calendar = await this.calendar;\n calendar._updateFocusedDate();\n }\n\n // Focus input after displayDate reset and calendar re-render to prevent\n // the calendar's updated() from stealing focus during the hide animation\n await this.updateComplete;\n const input = await this.datepickerInputAsync;\n input.focus();\n }\n private async _handleOpenMenu() {\n const cal = await this.calendar;\n const input = await this.datepickerInputAsync;\n cal.focusOnCalendar(input);\n }\n\n private _makeInputValueString = (startDate: Date, endDate: Date, dateFormat: string) => {\n if (!startDate && !endDate) return this.value;\n const fmtDate = (date: Date) => formatDate(date, DATE_PATTERNS[dateFormat].fnsPattern);\n switch (this.mode) {\n case \"single\": {\n if (startDate) {\n this.value = fmtDate(startDate);\n }\n break;\n }\n case \"range\": {\n if (startDate && endDate) {\n this.value = `${fmtDate(startDate)} - ${fmtDate(endDate)}`;\n }\n if (startDate && !endDate) {\n this.value = `${fmtDate(startDate)} - ${this.dateFormat}`;\n }\n break;\n }\n }\n return this.value;\n };\n private _handleSelectDatesInput(event: CustomEvent<Date[]>) {\n this._handleSelectDates(event.detail);\n }\n private async _handleSelectDates(newSelectedDates: Date[]) {\n newSelectedDates.sort((a: Date, b: Date) => a.getTime() - b.getTime());\n this.displayDate = newSelectedDates[0];\n this.focusedDate = newSelectedDates[0];\n this.selectedDateRange = newSelectedDates;\n // Get the formattedDate value for the selected dates\n const formattedDate = this._makeInputValueString(\n this.selectedDateRange[0],\n this.selectedDateRange[1],\n this.dateFormat\n );\n\n // Set formattedDate value as the new value for sgds-input\n this.value = formattedDate;\n const input = await this.datepickerInputAsync;\n input.updateMaskValue();\n this._manageInternalsValid();\n }\n\n private async _handleSelectDatesAndClose(event: CustomEvent<Date[]>) {\n await this._handleSelectDates(event.detail);\n\n if (this.mode === \"range\" && this.selectedDateRange.length === 2) {\n this.hideMenu();\n } else if (this.mode === \"single\" && this.selectedDateRange.length === 1) {\n this.hideMenu();\n }\n }\n\n /** update latest view state from datepicker-header /\n private _handleViewChanged(event: CustomEvent<string>) {\n this.view = event.detail as ViewEnum;\n }\n\n private _handleDateChanged(event: CustomEvent<Date>) {\n this.displayDate = event.detail;\n }\n private _handleFocusDateChanged(event: CustomEvent<Date>) {\n this.focusedDate = event.detail;\n }\n\n private _handleSelectMonth(event: CustomEvent<Date>) {\n this.displayDate = event.detail;\n }\n\n private _handleSelectYear(event: CustomEvent<Date>) {\n this.displayDate = event.detail;\n }\n private async _handleInvalidInput() {\n this.selectedDateRange = [];\n this.displayDate = this.initialDisplayDate;\n if (this._mixinShouldSkipSgdsValidation()) return;\n\n this.invalid = true;\n this._manageInternalsBadInput();\n }\n private async _handleEmptyInput() {\n if (this.required) {\n this._manageEmptyInput();\n }\n return;\n }\n private async _resetDatepicker(resetValue = \"\") {\n this.displayDate = this.initialDisplayDate;\n this.selectedDateRange = [];\n this.value = resetValue;\n this.view = \"days\";\n const input = await this.datepickerInputAsync;\n input.setInvalid(this.invalid);\n input.destroyInputMask();\n await input.applyInputMask();\n\n this._mixinResetValidity(input);\n if (this.isValueEmpty()) {\n this._handleEmptyInput();\n }\n }\n\n private _manageInternalsBadInput() {\n this._mixinSetValidity(\n {\n badInput: true\n },\n \"Invalid date input\",\n this.datepickerInput\n );\n }\n /\n Even though element internals handles the required constraint validation. This custom one is still needed as\n * datepicker input has a special case where the default input mask \"DD/MM/YYYY\" means an empty input.\n * However, the required constraint validation sees \"DD/MM/YYYY\" as a non-empty input.\n /\n private _manageEmptyInput() {\n this._mixinSetValidity(\n {\n valueMissing: true\n },\n \"Please fill in this field\",\n this.datepickerInput\n );\n }\n\n /\n Called when a valid date is entered via input or selected by calendar\n * 1. sets validity state to valid\n * 2. updates invalid prop\n * 3. sets the form value of datepicker\n /\n private _manageInternalsValid() {\n this._mixinSetFormValue();\n if (this._mixinShouldSkipSgdsValidation()) return;\n\n this._mixinSetValidity({});\n\n this.invalid = this.datepickerInput.invalid = false;\n }\n\n /\n Handles the form \"reset\" event\n */\n private async _mixinResetFormControl() {\n this._resetDatepicker(this.defaultValue);\n }\n private async _handleInputMaskChange(e: CustomEvent) {\n this.value = e.detail;\n\n if (this.isValueEmpty()) {\n this._resetDatepicker();\n }\n }\n\n private _dialogAriaLabels = {\n days: \"Choose date\",\n months: \"Choose month\",\n years: \"Choose year\"\n };\n render() {\n return html`\n <div class=\"datepicker-container m-width-160\">\n <sgds-datepicker-input\n .value=${live(this.value)}\n ?required=${this.required}\n ?disabled=${this.disabled}\n placeholder=${this.mode === \"single\" ? \"DD/MM/YYYY\" : \"DD/MM/YYYY - DD/MM/YYYY\"}\n mode=${this.mode}\n invalidFeedback=${ifDefined(this.invalidFeedback ? this.invalidFeedback : this._mixinGetValidationMessage())}\n @i-sgds-mask-input-change=${this._handleInputMaskChange}\n @i-sgds-invalid-input=${this._handleInvalidInput}\n minDate=${this.minDate}\n maxDate=${this.maxDate}\n label=${this.label}\n hintText=${this.hintText}\n name=${this.name}\n ?invalid=${this.invalid}\n hasFeedback=${ifDefined(this.hasFeedback ? \"both\" : undefined)}\n ?readonly=${this.readonly}\n >\n <sgds-icon-button\n slot=\"calendar-btn\"\n ${ref(this.myDropdown)}\n tone=\"neutral\"\n class=${classMap({\n \"calendar-btn\": true,\n \"with-hint-text\": this.hintText \|\| this.invalid,\n \"with-label\": this.label\n })}\n aria-expanded=\"${this.menuIsOpen}\"\n aria-haspopup=\"dialog\"\n aria-controls=${this.dropdownMenuId}\n @click=${() => this.toggleMenu()}\n ariaLabel=${this.menuIsOpen ? \"Close Calendar\" : \"Open Calendar\"}\n ?disabled=${this.disabled \|\| this.readonly}\n ?active=${this.menuIsOpen}\n variant=\"outline\"\n name=\"calendar\"\n >\n </sgds-icon-button>\n </sgds-datepicker-input>\n <div\n id=${this.dropdownMenuId}\n class=\"sgds datepicker dropdown-menu\"\n role=\"dialog\"\n aria-label=${this._dialogAriaLabels[this.view]}\n @click=${(event: MouseEvent) => event.stopPropagation()}\n ${ref(this.menuRef)}\n >\n <sgds-datepicker-header\n .view=${this.view}\n .displayDate=${this.displayDate}\n .focusedDate=${this.focusedDate}\n .selectedDate=${this.selectedDateRange}\n .focusedTabIndex=${this.focusedTabIndex}\n ></sgds-datepicker-header>\n <sgds-datepicker-calendar\n .show=${this.menuIsOpen}\n .view=${this.view}\n .displayDate=${this.displayDate}\n .mode=${this.mode}\n minDate=${this.minDate}\n maxDate=${this.maxDate}\n .selectedDate=${this.selectedDateRange}\n .focusedTabIndex=${this.focusedTabIndex}\n ></sgds-datepicker-calendar>\n </div>\n </div>\n `;\n }\n}\n\nexport default SgdsDatepicker;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,IAAa,iBAAb,cAAoCA,uBAAAA,uBAAuBC,yBAAAA,eAAe,CAAC,CAA4B;;EACrF,KAAA,SAAA;GAAC,GAAGA,yBAAAA,gBAAgB;GAAQC,sBAAAA;GAAmBC,mBAAAA;EAAe;;;EAExD,KAAA,eAAA;GACpB,yBAAyBC,yBAAAA;GACzB,4BAA4BC,4BAAAA;GAC5B,0BAA0BC,0BAAAA;GAC1B,eAAeC,oBAAAA;GACf,oBAAoBC,yBAAAA;EACtB;;CAEA,cAAc;EACZ,MAAM;EAO+C,KAAA,WAAA;EAIA,KAAA,WAAA;EAGE,KAAA,aAAA;EAMN,KAAA,QAAA;EAQgB,KAAA,eAAA,CAAC;EAE/C,KAAA,aAAA;EAGiB,KAAA,UAAA;EAGA,KAAA,UAAA;EAGgC,KAAA,OAAA;EAMZ,KAAA,cAAA;EAGrB,KAAA,QAAA;EAGG,KAAA,WAAA;EAI/B,KAAA,SAAA;EAIa,KAAA,OAAA;EAOP,KAAA,eAAA;EAGuC,KAAA,UAAA;EAG7B,KAAA,OAAA;EAEoB,KAAA,oBAAA,CAAC;EAIX,KAAA,kBAAA;EAMA,KAAA,qCAAA,IAAI,KAAK;EAkKX,KAAA,yBAAA,WAAiB,SAAe,eAAuB;GACtF,IAAI,CAAC,aAAa,CAAC,SAAS,OAAO,KAAK;GACxC,MAAM,WAAW,SAAeC,qBAAAA,WAAW,MAAMC,aAAAA,cAAc,WAAW,CAAC,UAAU;GACrF,QAAQ,KAAK,MAAb;IACE,KAAK;KACH,IAAI,WACF,KAAK,QAAQ,QAAQ,SAAS;KAEhC;IAEF,KAAK;KACH,IAAI,aAAa,SACf,KAAK,QAAQ,GAAG,QAAQ,SAAS,EAAE,KAAK,QAAQ,OAAO;KAEzD,IAAI,aAAa,CAAC,SAChB,KAAK,QAAQ,GAAG,QAAQ,SAAS,EAAE,KAAK,KAAK;GAInD;GACA,OAAO,KAAK;EACd;EAuI4B,KAAA,oBAAA;GAC1B,MAAM;GACN,QAAQ;GACR,OAAO;EACT;EArZE,KAAK,eAAe,EAClB,WAAW,aACb;CACF;CA4EA,eAAuB;EACrB,OAAO,KAAK,UAAU,MAAM,KAAK,UAAU,gBAAgB,KAAK,UAAU;CAC5E;;;;;CAgBA,iBAAiC;EAC/B,OAAO,KAAK,qBAAqB;CACnC;;;;CAIA,gBAAgC;EAC9B,OAAO,KAAK,oBAAoB;CAClC;;;;;;CAOA,WAAkB,MAAe;EAC/B,KAAK,UAAU;EACf,IAAI,KAAK,iBACP,KAAK,gBAAgB,WAAW,IAAI;CAExC;;;;CAKA,YAAmB,OAA4B,SAAkB,QAA4B;EAC3F,OAAO,KAAK,kBAAkB,OAAO,SAAS,MAAM;CACtD;;;;CAKA,IAAW,WAA0B;EACnC,OAAO,KAAK,kBAAkB;CAChC;;;;CAIA,IAAW,oBAAoB;EAC7B,OAAO,KAAK,2BAA2B;CACzC;CAEA,MAAM,oBAAoB;EACxB,MAAM,kBAAkB;EACxB,KAAK,iBAAiB,aAAa,KAAK,kBAAkB;EAC1D,KAAK,iBAAiB,wBAAwB,KAAK,kBAAkB;EACrE,KAAK,iBAAiB,qBAAqB,KAAK,uBAAuB;EACvE,KAAK,iBAAiB,oBAAoB,KAAK,kBAAkB;EACjE,KAAK,iBAAiB,mBAAmB,KAAK,iBAAiB;EAC/D,KAAK,iBAAiB,oBAAoB,KAAK,0BAA0B;EACzE,KAAK,iBAAiB,4BAA4B,KAAK,uBAAuB;EAC9E,KAAK,iBAAiB,sBAAsB,KAAK,iBAAiB;EAClE,KAAK,iBAAiB,WAAW,KAAK,UAAU;EAChD,KAAK,iBAAiB,aAAa,KAAK,gBAAgB;EACxD,KAAK,iBAAiB,aAAa,KAAK,eAAe;EACvD,KAAK,iBAAiB,QAAQ,KAAK,mBAAmB;EAEtD,KAAK,eAAe,KAAK,QAAQ,KAAK,MAAM,MAAM,KAAK,CAAC,CAAC,KAAI,MAAK,EAAE,KAAK,CAAC,IAAI,KAAK;EACnF,KAAK,qBAAqB,KAAK,+BAAe,IAAI,KAAK;EACvD,IAAI,KAAK,gBAAgB,KAAK,aAAa,SAAS,GAAG;GAErD,MAAM,kBAAkB,IAAI,OAAO,KAAK,oBAAoB,CAAC;GAE7D,MAAM,eAAe,KAAK,aAAa,QAAO,MAAK,CAAC,gBAAgB,KAAK,CAAC,CAAC;GAC3E,IAAI,aAAa,SAAS,GACxB,OAAO,QAAQ,MAAM,wCAAwC,YAAY;QACpE;IACL,MAAM,uBAAuB,KAAK,aAAa,KAAI,MACjDC,aAAAA,cAAcC,qBAAAA,UAAU,GAAGF,aAAAA,cAAc,KAAK,WAAW,CAAC,UAAU,CAAC,CACvE;IACA,KAAK,mBAAmB,oBAAoB;GAC9C;EACF,OACE,KAAK,cAAc,KAAK;EAI1B,CAAA,MADoB,KAAK,qBAAA,CACnB,WAAW,KAAK,OAAO;CAC/B;CAEA,MAAM,aAAa,mBAA2C;EAC5D,MAAM,aAAa,iBAAiB;EACpC,IAAI,KAAK,YAAY;GACnB,MAAM,QAAQ,MAAM,KAAK;GACzB,MAAM,KAAK,uBAAuB;GAElC,CAAA,MADkB,KAAK,SAAA,CACnB,gBAAgB,KAAK;EAC3B;CACF;;CAGA,sBAAsC;EAEpC,OACE,KAAK,WAEF,QAAQ,uBAAuB,MAAM,CAAC,CAEtC,QAAQ,MAAM,QAAQ,CAAC,CAEvB,QAAQ,MAAM,QAAQ,CAAC,CAEvB,QAAQ,QAAQ,QAAQ,CAAC,CAEzB,QAAQ,KAAK,KAAK;CAEzB;CACA,WAAmB,OAAsB;EACvC,IAAI,CAAC,KAAK,YACR;EAEF,MAAM,gBAAgB,MAAM,CAAC;EAC7B,IAAI,MAAM,YAAY,MAAM,QAAQ,OAAO;GACzC,MAAM,eAAe;GACrB,KAAK,mBAAmB,KAAK,kBAAkB,IAAI,cAAc,UAAU,cAAc;EAC3F,OAAO,IAAI,MAAM,QAAQ,OAAO;GAC9B,MAAM,eAAe;GACrB,KAAK,mBAAmB,KAAK,kBAAkB,IAAI,cAAc,UAAU,cAAc;EAC3F;CACF;CAEA,qBACqB;EACnB,KAAK,KAAK,kBAAkB;CAC9B;CAEA,MAAc,mBAAmB;EAC/B,IAAI,KAAK,kBAAkB,WAAW,GACpC,KAAK,cAAc,KAAK;OACnB;GACL,MAAM,sBAAsB,KAAK,kBAAkB;GACnD,KAAK,cAAc,KAAK,kBAAkB,sBAAsB;GAEhE,CAAA,MADuB,KAAK,SAAA,CACnB,mBAAmB;EAC9B;EAIA,MAAM,KAAK;EAEX,CAAA,MADoB,KAAK,qBAAA,CACnB,MAAM;CACd;CACA,MAAc,kBAAkB;EAC9B,MAAM,MAAM,MAAM,KAAK;EACvB,MAAM,QAAQ,MAAM,KAAK;EACzB,IAAI,gBAAgB,KAAK;CAC3B;CAwBA,wBAAgC,OAA4B;EAC1D,KAAK,mBAAmB,MAAM,MAAM;CACtC;CACA,MAAc,mBAAmB,kBAA0B;EACzD,iBAAiB,MAAM,GAAS,MAAY,EAAE,QAAQ,IAAI,EAAE,QAAQ,CAAC;EACrE,KAAK,cAAc,iBAAiB;EACpC,KAAK,cAAc,iBAAiB;EACpC,KAAK,oBAAoB;EAEzB,MAAM,gBAAgB,KAAK,sBACzB,KAAK,kBAAkB,IACvB,KAAK,kBAAkB,IACvB,KAAK,UACP;EAGA,KAAK,QAAQ;EAEb,CAAA,MADoB,KAAK,qBAAA,CACnB,gBAAgB;EACtB,KAAK,sBAAsB;CAC7B;CAEA,MAAc,2BAA2B,OAA4B;EACnE,MAAM,KAAK,mBAAmB,MAAM,MAAM;EAE1C,IAAI,KAAK,SAAS,WAAW,KAAK,kBAAkB,WAAW,GAC7D,KAAK,SAAS;OACT,IAAI,KAAK,SAAS,YAAY,KAAK,kBAAkB,WAAW,GACrE,KAAK,SAAS;CAElB;;CAGA,mBAA2B,OAA4B;EACrD,KAAK,OAAO,MAAM;CACpB;CAEA,mBAA2B,OAA0B;EACnD,KAAK,cAAc,MAAM;CAC3B;CACA,wBAAgC,OAA0B;EACxD,KAAK,cAAc,MAAM;CAC3B;CAEA,mBAA2B,OAA0B;EACnD,KAAK,cAAc,MAAM;CAC3B;CAEA,kBAA0B,OAA0B;EAClD,KAAK,cAAc,MAAM;CAC3B;CACA,MAAc,sBAAsB;EAClC,KAAK,oBAAoB,CAAC;EAC1B,KAAK,cAAc,KAAK;EACxB,IAAI,KAAK,+BAA+B,GAAG;EAE3C,KAAK,UAAU;EACf,KAAK,yBAAyB;CAChC;CACA,MAAc,oBAAoB;EAChC,IAAI,KAAK,UACP,KAAK,kBAAkB;CAG3B;CACA,MAAc,iBAAiB,aAAa,IAAI;EAC9C,KAAK,cAAc,KAAK;EACxB,KAAK,oBAAoB,CAAC;EAC1B,KAAK,QAAQ;EACb,KAAK,OAAO;EACZ,MAAM,QAAQ,MAAM,KAAK;EACzB,MAAM,WAAW,KAAK,OAAO;EAC7B,MAAM,iBAAiB;EACvB,MAAM,MAAM,eAAe;EAE3B,KAAK,oBAAoB,KAAK;EAC9B,IAAI,KAAK,aAAa,GACpB,KAAK,kBAAkB;CAE3B;CAEA,2BAAmC;EACjC,KAAK,kBACH,EACE,UAAU,KACZ,GACA,sBACA,KAAK,eACP;CACF;;;;;;CAMA,oBAA4B;EAC1B,KAAK,kBACH,EACE,cAAc,KAChB,GACA,6BACA,KAAK,eACP;CACF;;;;;;;CAQA,wBAAgC;EAC9B,KAAK,mBAAmB;EACxB,IAAI,KAAK,+BAA+B,GAAG;EAE3C,KAAK,kBAAkB,CAAC,CAAC;EAEzB,KAAK,UAAU,KAAK,gBAAgB,UAAU;CAChD;;;;CAKA,MAAc,yBAAyB;EACrC,KAAK,iBAAiB,KAAK,YAAY;CACzC;CACA,MAAc,uBAAuB,GAAgB;EACnD,KAAK,QAAQ,EAAE;EAEf,IAAI,KAAK,aAAa,GACpB,KAAK,iBAAiB;CAE1B;CAOA,SAAS;EACP,OAAO,IAAA,IAAI;;;oBAGIG,GAAAA,uBAAAA,KAAAA,CAAK,KAAK,KAAK,EAAE;sBACd,KAAK,SAAS;sBACd,KAAK,SAAS;wBACZ,KAAK,SAAS,WAAW,eAAe,0BAA0B;iBACzE,KAAK,KAAK;6BACCC,GAAAA,6BAAAA,UAAAA,CAAU,KAAK,kBAAkB,KAAK,kBAAkB,KAAK,2BAA2B,CAAC,EAAE;sCACjF,KAAK,uBAAuB;kCAChC,KAAK,oBAAoB;oBACvC,KAAK,QAAQ;oBACb,KAAK,QAAQ;kBACf,KAAK,MAAM;qBACR,KAAK,SAAS;iBAClB,KAAK,KAAK;qBACN,KAAK,QAAQ;yBACVA,GAAAA,6BAAAA,UAAAA,CAAU,KAAK,cAAc,SAAS,KAAA,CAAS,EAAE;sBACnD,KAAK,SAAS;;;;eAItBC,GAAAA,sBAAAA,IAAAA,CAAI,KAAK,UAAU,EAAE;;qBAEfC,GAAAA,4BAAAA,SAAAA,CAAS;GACf,gBAAgB;GAChB,kBAAkB,KAAK,YAAY,KAAK;GACxC,cAAc,KAAK;EACrB,CAAC,EAAE;6BACc,KAAK,WAAW;;4BAEjB,KAAK,eAAe;2BACrB,KAAK,WAAW,EAAE;wBACrB,KAAK,aAAa,mBAAmB,gBAAgB;wBACrD,KAAK,YAAY,KAAK,SAAS;sBACjC,KAAK,WAAW;;;;;;;eAOvB,KAAK,eAAe;;;uBAGZ,KAAK,kBAAkB,KAAK,MAAM;oBACrC,UAAsB,MAAM,gBAAgB,EAAE;aACtDD,GAAAA,sBAAAA,IAAAA,CAAI,KAAK,OAAO,EAAE;;;oBAGV,KAAK,KAAK;2BACH,KAAK,YAAY;2BACjB,KAAK,YAAY;4BAChB,KAAK,kBAAkB;+BACpB,KAAK,gBAAgB;;;oBAGhC,KAAK,WAAW;oBAChB,KAAK,KAAK;2BACH,KAAK,YAAY;oBACxB,KAAK,KAAK;sBACR,KAAK,QAAQ;sBACb,KAAK,QAAQ;4BACP,KAAK,kBAAkB;+BACpB,KAAK,gBAAgB;;;;;CAKlD;AACF;AAvdGE,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,eAAA,WAAA,YAAA,KAAA,CAAA;AAEzCA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS,EAAE,SAAS,KAAK,CAAC,CAAA,GAAA,eAAA,WAAA,QAAA,KAAA,CAAA;AAE1BA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,eAAA,WAAA,YAAA,KAAA,CAAA;AAGzCA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,eAAA,WAAA,cAAA,KAAA,CAAA;AAMzCA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,eAAA,WAAA,SAAA,KAAA,CAAA;AAQxCA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAO,SAAS;AAAK,CAAC,CAAA,GAAA,eAAA,WAAA,gBAAA,KAAA,CAAA;AAKvCA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,eAAA,WAAA,WAAA,KAAA,CAAA;AAGzBA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,eAAA,WAAA,WAAA,KAAA,CAAA;AAGzBA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,eAAA,WAAA,QAAA,KAAA,CAAA;AAGxCA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,eAAA,WAAA,mBAAA,KAAA,CAAA;AAGxCA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,eAAA,WAAA,eAAA,KAAA,CAAA;AAGzCA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS,EAAE,SAAS,KAAK,CAAC,CAAA,GAAA,eAAA,WAAA,SAAA,KAAA,CAAA;AAG1BA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS,EAAE,SAAS,KAAK,CAAC,CAAA,GAAA,eAAA,WAAA,YAAA,KAAA,CAAA;AAG1BA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAS,SAAS;CAAM,OAAO;AAAM,CAAC,CAAA,GAAA,eAAA,WAAA,UAAA,KAAA,CAAA;AAIvDA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,OAAO;AAAM,CAAC,CAAA,GAAA,eAAA,WAAA,QAAA,KAAA,CAAA;AAItDA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS,EAAE,WAAW,MAAM,CAAC,CAAA,GAAA,eAAA,WAAA,eAAA,KAAA,CAAA;AAG7BC,iBAAAA,QAAAA,CAAAA,qBAAAA,aAAa,CAAA,GAAA,eAAA,WAAA,gBAAA,KAAA,CAAA;AAIbD,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,eAAA,WAAA,WAAA,KAAA,CAAA;AAEzCE,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,MAAAA,CAAM,CAAA,GAAA,eAAA,WAAA,QAAA,KAAA,CAAA;AAGNA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,MAAAA,CAAM,CAAA,GAAA,eAAA,WAAA,qBAAA,KAAA,CAAA;AAENA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,MAAAA,CAAM,CAAA,GAAA,eAAA,WAAA,eAAA,KAAA,CAAA;AAENA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,MAAAA,CAAM,CAAA,GAAA,eAAA,WAAA,mBAAA,KAAA,CAAA;AAQNC,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,WAAAA,CAAW,0BAA0B,CAAA,GAAA,eAAA,WAAA,YAAA,KAAA,CAAA;AAGrCA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,WAAAA,CAAW,uBAAuB,CAAA,GAAA,eAAA,WAAA,wBAAA,KAAA,CAAA;AAGlCC,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,MAAAA,CAAM,uBAAuB,CAAA,GAAA,eAAA,WAAA,mBAAA,KAAA,CAAA;AA+H7BC,iBAAAA,QAAAA,CAAAA,cAAAA,MAAM,SAAS,EAAE,sBAAsB,KAAK,CAAC,CAAA,GAAA,eAAA,WAAA,sBAAA,IAAA"}
1	+ {"version":3,"file":"sgds-datepicker.cjs.js","names":["SgdsFormValidatorMixin","DropdownElement","dropdownMenuStyle","datepickerStyle","DatepickerInput","DatepickerCalendar","DatepickerHeader","SgdsButton","SgdsIconButton","formatDate","DATE_PATTERNS","setTimeToNoon","parseDate","live","ifDefined","ref","classMap","property","defaultValue","state","queryAsync","query","watch"],"sources":["../../../../src/components/Datepicker/sgds-datepicker.ts"],"sourcesContent":["import { formatDate, parseDate } from \"../../utils/date-helpers\";\nimport { html, PropertyValueMap } from \"lit\";\nimport { property, query, queryAsync, state } from \"lit/decorators.js\";\nimport { live } from \"lit/directives/live.js\";\nimport { ref } from \"lit/directives/ref.js\";\nimport { DropdownElement } from \"../../base/dropdown-element\";\nimport { type SgdsFormControl } from \"../../utils/formSubmitController\";\nimport { DATE_PATTERNS, setTimeToNoon } from \"../../utils/time\";\nimport { watch } from \"../../utils/watch\";\nimport { SgdsButton } from \"../Button/sgds-button\";\nimport dropdownMenuStyle from \"../Dropdown/dropdown-menu.css\";\nimport { DatepickerCalendar } from \"./datepicker-calendar\";\nimport { DatepickerHeader } from \"./datepicker-header\";\nimport DatepickerInput from \"./datepicker-input\";\nimport datepickerStyle from \"./datepicker.css\";\nimport { ViewEnum } from \"./types\";\nimport SgdsIconButton from \"../IconButton/sgds-icon-button\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\n\nexport type DateFormat = \"MM/DD/YYYY\" \| \"DD/MM/YYYY\" \| \"YYYY/MM/DD\";\n\n/*\n @summary The `DatePicker` Component is built using `Dropdown`, `Input` and `Button` components. By default, the Calendar points to today's date and input has no value. Users can either pick dates from the calendar or type dates through the input\n \n @event sgds-change-date - Emitted when the state of datepicker's input changes during first load, close button reset click & date click. Date values can be accessed via event.target.value\n * @event sgds-invalid - Emitted when the combo box's invalid state is set to true.\n * @event sgds-valid - Emitted when the combo box's invalid state is set to false.\n \n @description displayDate sets the month, year views of the calendar while focusedDate follows the focus which also directly changes\n * displayDate on certain occasions. Example, when keyboard moves up to the next month, it updates displayDate which then affect the current\n * date view of the calendar\n /\nexport class SgdsDatepicker extends SgdsFormValidatorMixin(DropdownElement) implements SgdsFormControl {\n static styles = [...DropdownElement.styles, dropdownMenuStyle, datepickerStyle];\n /@internal /\n static dependencies = {\n \"sgds-datepicker-input\": DatepickerInput,\n \"sgds-datepicker-calendar\": DatepickerCalendar,\n \"sgds-datepicker-header\": DatepickerHeader,\n \"sgds-button\": SgdsButton,\n \"sgds-icon-button\": SgdsIconButton\n };\n\n constructor() {\n super();\n this.floatingOpts = {\n placement: \"bottom-end\"\n };\n }\n\n /** When true, adds required attribute to input element /\n @property({ type: Boolean, reflect: true }) required = false;\n /The datepicker input's name attribute /\n @property({ reflect: true }) name: string;\n /** When true, adds disabled attribute to input and button element /\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /* Disables native and sgds validation for the datepicker. /\n @property({ type: Boolean, reflect: true }) noValidate = false;\n\n /* Sets the initial value of the datepicker. Replaces deprecated `initialValue`.\n * Pass in dates in this format `dd/mm/yyyy` for single mode and `dd/mm/yyyy - dd/mm/yyyy` for range mode\n * For example, `value=\"22/12/2023\"` for single mode or `value=\"22/12/2023 - 25/12/2023\"` for range mode\n /\n @property({ type: String, reflect: true }) value = \"\";\n\n /\n The initial value of DatePicker on first load for single &\n * range mode as array of string. eg.'[\"22/12/2023\"]' for single &\n * '[\"22/12/2023\",\"25/12/2023\"]' for range respectively.\n * @deprecated since v3.3.0 — use `value` instead.\n /\n @property({ type: Array, reflect: true }) initialValue: string[] = [];\n\n private dateFormat = \"DD/MM/YYYY\";\n\n /* ISO date string to set the lowest allowable date value. e.g. \"2016-05-19T12:00:00.000Z\" /\n @property({ type: String }) minDate = \"\";\n\n /* ISO date string to set the highest allowable date value. e.g. \"2016-05-19T12:00:00.000Z\" /\n @property({ type: String }) maxDate = \"\";\n\n /* Changes DatePicker to single date selection or range date selection /\n @property({ type: String, reflect: true }) mode: \"single\" \| \"range\" = \"single\";\n\n /Feedback text for error state when date input is invalid /\n @property({ type: String, reflect: true }) invalidFeedback: string;\n\n /** Allows invalidFeedback and invalid styles to be visible with the input /\n @property({ type: Boolean, reflect: true }) hasFeedback = false;\n\n /* The datepicker input's label /\n @property({ reflect: true }) label = \"\";\n\n /* The datepicker input's hint text below the label /\n @property({ reflect: true }) hintText = \"\";\n\n /* Controls auto-flipping of menu /\n @property({ type: Boolean, reflect: true, state: false })\n noFlip = false;\n\n /* The drop position of menu relative to the toggle button /\n @property({ type: String, reflect: true, state: false })\n drop: \"up\" \| \"down\" = \"down\";\n\n /* Provides the date context for Calendar to present the appropriate view. Defaults to today's date /\n @property({ attribute: false }) displayDate: Date;\n\n /Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. /\n @defaultValue()\n defaultValue = \"\";\n\n /** Marks the component as invalid. Replace the pseudo :invalid selector. /\n @property({ type: Boolean, reflect: true }) invalid = false;\n\n @state()\n private view: ViewEnum = \"days\";\n\n @state() private selectedDateRange: Date[] = [];\n\n @state() private focusedDate: Date;\n\n @state() private focusedTabIndex = 3;\n\n private isValueEmpty() {\n return this.value === \"\" \|\| this.value === \"DD/MM/YYYY\" \|\| this.value === \"DD/MM/YYYY - DD/MM/YYYY\";\n }\n\n private initialDisplayDate: Date = new Date();\n\n @queryAsync(\"sgds-datepicker-calendar\")\n private calendar: Promise<DatepickerCalendar>;\n\n @queryAsync(\"sgds-datepicker-input\")\n private datepickerInputAsync: Promise<DatepickerInput>;\n\n @query(\"sgds-datepicker-input\")\n private datepickerInput: DatepickerInput;\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 /\n Programmatically sets the invalid state of the datepicker.\n * Use together with `noValidate` (or `novalidate` on the parent `<form>`) and `invalidFeedback`\n * to integrate 3rd-party or custom validation logic.\n /\n public setInvalid(bool: boolean) {\n this.invalid = bool;\n if (this.datepickerInput) {\n this.datepickerInput.setInvalid(bool);\n }\n }\n\n /\n Checks for validity without any native error popup message\n /\n public setValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void {\n return this._mixinSetValidity(flags, message, anchor);\n }\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 async connectedCallback() {\n super.connectedCallback();\n this.addEventListener(\"sgds-view\", this._handleViewChanged);\n this.addEventListener(\"sgds-change-calendar\", this._handleDateChanged);\n this.addEventListener(\"sgds-update-focus\", this._handleFocusDateChanged);\n this.addEventListener(\"sgds-selectmonth\", this._handleSelectMonth);\n this.addEventListener(\"sgds-selectyear\", this._handleSelectYear);\n this.addEventListener(\"sgds-selectdates\", this._handleSelectDatesAndClose);\n this.addEventListener(\"i-sgds-selectdates-input\", this._handleSelectDatesInput);\n this.addEventListener(\"i-sgds-empty-input\", this._handleEmptyInput);\n this.addEventListener(\"keydown\", this._handleTab);\n this.addEventListener(\"sgds-hide\", this._handleCloseMenu);\n this.addEventListener(\"sgds-show\", this._handleOpenMenu);\n this.addEventListener(\"blur\", this._mixinCheckValidity);\n\n this.initialValue = this.value ? this.value.split(\" - \").map(v => v.trim()) : this.initialValue;\n this.initialDisplayDate = this.displayDate \|\| new Date();\n if (this.initialValue && this.initialValue.length > 0) {\n // Validate initialValue against the dateFormat regex\n const dateFormatRegex = new RegExp(this._getDateFormatRegex());\n // const startDateString = this.initialValue[0];\n const invalidDates = this.initialValue.filter(v => !dateFormatRegex.test(v));\n if (invalidDates.length > 0) {\n return console.error(\"Invalid date format in initialValue:\", invalidDates);\n } else {\n const initialSelectedDates = this.initialValue.map(v =>\n setTimeToNoon(parseDate(v, DATE_PATTERNS[this.dateFormat].fnsPattern))\n );\n this._handleSelectDates(initialSelectedDates);\n }\n } else {\n this.displayDate = this.initialDisplayDate;\n }\n\n const input = await this.datepickerInputAsync;\n input.setInvalid(this.invalid);\n }\n\n async firstUpdated(changedProperties: PropertyValueMap<this>) {\n super.firstUpdated(changedProperties);\n if (this.menuIsOpen) {\n const input = await this.datepickerInputAsync;\n await this.updateFloatingPosition();\n const cal = await this.calendar;\n cal.focusOnCalendar(input);\n }\n }\n\n /* @internal /\n private _getDateFormatRegex(): string {\n // validate date strings and adhere to the specified date format\n return (\n this.dateFormat\n // Replace any special characters with their escaped version using \"\\\\$&\"\n .replace(/[.+?^${}()\|[\\]\\\\]/g, \"\\\\$&\")\n // Replace 'MM' with '\\\\d{2}', which matches two digits representing the month (e.g., 01, 12)\n .replace(\"MM\", \"\\\\d{2}\")\n // Replace 'DD' with '\\\\d{2}', which matches two digits representing the day (e.g., 01, 31)\n .replace(\"DD\", \"\\\\d{2}\")\n // Replace 'YYYY' with '\\\\d{4}', which matches four digits representing the year (e.g., 2021)\n .replace(\"YYYY\", \"\\\\d{4}\")\n // Replace '/' with '\\\\/', which matches the forward slash character\n .replace(\"/\", \"\\\\/\")\n );\n }\n private _handleTab(event: KeyboardEvent) {\n if (!this.menuIsOpen) {\n return;\n }\n const tabIndexArray = Array(4);\n if (event.shiftKey && event.key === \"Tab\") {\n event.preventDefault();\n this.focusedTabIndex = (this.focusedTabIndex - 1 + tabIndexArray.length) % tabIndexArray.length;\n } else if (event.key === \"Tab\") {\n event.preventDefault();\n this.focusedTabIndex = (this.focusedTabIndex + 1 + tabIndexArray.length) % tabIndexArray.length;\n }\n }\n\n @watch(\"value\", { waitUntilFirstUpdate: true })\n async _handleValueChange() {\n this._mixinSetFormValue();\n this.emit(\"sgds-change-date\");\n await this.updateComplete;\n if (this._mixinShouldSkipSgdsValidation()) return;\n this._mixinValidate(this.input);\n }\n\n private async _handleCloseMenu() {\n if (this.selectedDateRange.length === 0) {\n this.displayDate = this.initialDisplayDate;\n } else {\n const selectedDatesLength = this.selectedDateRange.length;\n this.displayDate = this.selectedDateRange[selectedDatesLength - 1];\n const calendar = await this.calendar;\n calendar._updateFocusedDate();\n }\n\n // Focus input after displayDate reset and calendar re-render to prevent\n // the calendar's updated() from stealing focus during the hide animation\n await this.updateComplete;\n const input = await this.datepickerInputAsync;\n input.focus();\n }\n private async _handleOpenMenu() {\n const cal = await this.calendar;\n const input = await this.datepickerInputAsync;\n cal.focusOnCalendar(input);\n }\n\n private _makeInputValueString = (startDate: Date, endDate: Date, dateFormat: string) => {\n if (!startDate && !endDate) return this.value;\n const fmtDate = (date: Date) => formatDate(date, DATE_PATTERNS[dateFormat].fnsPattern);\n switch (this.mode) {\n case \"single\": {\n if (startDate) {\n this.value = fmtDate(startDate);\n }\n break;\n }\n case \"range\": {\n if (startDate && endDate) {\n this.value = `${fmtDate(startDate)} - ${fmtDate(endDate)}`;\n }\n if (startDate && !endDate) {\n this.value = `${fmtDate(startDate)} - ${this.dateFormat}`;\n }\n break;\n }\n }\n return this.value;\n };\n private _handleSelectDatesInput(event: CustomEvent<Date[]>) {\n this._handleSelectDates(event.detail);\n }\n private async _handleSelectDates(newSelectedDates: Date[]) {\n newSelectedDates.sort((a: Date, b: Date) => a.getTime() - b.getTime());\n this.displayDate = newSelectedDates[0];\n this.focusedDate = newSelectedDates[0];\n this.selectedDateRange = newSelectedDates;\n // Get the formattedDate value for the selected dates\n const formattedDate = this._makeInputValueString(\n this.selectedDateRange[0],\n this.selectedDateRange[1],\n this.dateFormat\n );\n\n // Set formattedDate value as the new value for sgds-input\n this.value = formattedDate;\n const input = await this.datepickerInputAsync;\n input.updateMaskValue();\n this._manageInternalsValid();\n }\n\n private async _handleSelectDatesAndClose(event: CustomEvent<Date[]>) {\n await this._handleSelectDates(event.detail);\n\n if (this.mode === \"range\" && this.selectedDateRange.length === 2) {\n this.hideMenu();\n } else if (this.mode === \"single\" && this.selectedDateRange.length === 1) {\n this.hideMenu();\n }\n }\n\n /** update latest view state from datepicker-header /\n private _handleViewChanged(event: CustomEvent<string>) {\n this.view = event.detail as ViewEnum;\n }\n\n private _handleDateChanged(event: CustomEvent<Date>) {\n this.displayDate = event.detail;\n }\n private _handleFocusDateChanged(event: CustomEvent<Date>) {\n this.focusedDate = event.detail;\n }\n\n private _handleSelectMonth(event: CustomEvent<Date>) {\n this.displayDate = event.detail;\n }\n\n private _handleSelectYear(event: CustomEvent<Date>) {\n this.displayDate = event.detail;\n }\n private async _handleInvalidInput() {\n this.selectedDateRange = [];\n this.displayDate = this.initialDisplayDate;\n if (this._mixinShouldSkipSgdsValidation()) return;\n\n this.invalid = true;\n this._manageInternalsBadInput();\n }\n private async _handleEmptyInput() {\n if (this.required) {\n this._manageEmptyInput();\n }\n return;\n }\n private async _resetDatepicker(resetValue = \"\") {\n this.displayDate = this.initialDisplayDate;\n this.selectedDateRange = [];\n this.value = resetValue;\n this.view = \"days\";\n const input = await this.datepickerInputAsync;\n input.setInvalid(this.invalid);\n input.destroyInputMask();\n await input.applyInputMask();\n\n this._mixinResetValidity(input);\n if (this.isValueEmpty()) {\n this._handleEmptyInput();\n }\n }\n\n private _manageInternalsBadInput() {\n this._mixinSetValidity(\n {\n badInput: true\n },\n \"Invalid date input\",\n this.datepickerInput\n );\n }\n /\n Even though element internals handles the required constraint validation. This custom one is still needed as\n * datepicker input has a special case where the default input mask \"DD/MM/YYYY\" means an empty input.\n * However, the required constraint validation sees \"DD/MM/YYYY\" as a non-empty input.\n /\n private _manageEmptyInput() {\n this._mixinSetValidity(\n {\n valueMissing: true\n },\n \"Please fill in this field\",\n this.datepickerInput\n );\n }\n\n /\n Called when a valid date is entered via input or selected by calendar\n * 1. sets validity state to valid\n * 2. updates invalid prop\n * 3. sets the form value of datepicker\n /\n private _manageInternalsValid() {\n this._mixinSetFormValue();\n if (this._mixinShouldSkipSgdsValidation()) return;\n\n this._mixinSetValidity({});\n\n this.invalid = this.datepickerInput.invalid = false;\n }\n\n /\n Handles the form \"reset\" event\n */\n private async _mixinResetFormControl() {\n this._resetDatepicker(this.defaultValue);\n }\n private async _handleInputMaskChange(e: CustomEvent) {\n this.value = e.detail;\n\n if (this.isValueEmpty()) {\n this._resetDatepicker();\n }\n }\n\n private _dialogAriaLabels = {\n days: \"Choose date\",\n months: \"Choose month\",\n years: \"Choose year\"\n };\n render() {\n return html`\n <div class=\"datepicker-container m-width-160\">\n <sgds-datepicker-input\n .value=${live(this.value)}\n ?required=${this.required}\n ?disabled=${this.disabled}\n placeholder=${this.mode === \"single\" ? \"DD/MM/YYYY\" : \"DD/MM/YYYY - DD/MM/YYYY\"}\n mode=${this.mode}\n invalidFeedback=${ifDefined(this.invalidFeedback ? this.invalidFeedback : this._mixinGetValidationMessage())}\n @i-sgds-mask-input-change=${this._handleInputMaskChange}\n @i-sgds-invalid-input=${this._handleInvalidInput}\n minDate=${this.minDate}\n maxDate=${this.maxDate}\n label=${this.label}\n hintText=${this.hintText}\n name=${this.name}\n ?invalid=${this.invalid}\n hasFeedback=${ifDefined(this.hasFeedback ? \"both\" : undefined)}\n ?readonly=${this.readonly}\n >\n <sgds-icon-button\n slot=\"calendar-btn\"\n ${ref(this.myDropdown)}\n tone=\"neutral\"\n class=${classMap({\n \"calendar-btn\": true,\n \"with-hint-text\": this.hintText \|\| this.invalid,\n \"with-label\": this.label\n })}\n aria-expanded=\"${this.menuIsOpen}\"\n aria-haspopup=\"dialog\"\n aria-controls=${this.dropdownMenuId}\n @click=${() => this.toggleMenu()}\n ariaLabel=${this.menuIsOpen ? \"Close Calendar\" : \"Open Calendar\"}\n ?disabled=${this.disabled \|\| this.readonly}\n ?active=${this.menuIsOpen}\n variant=\"outline\"\n name=\"calendar\"\n >\n </sgds-icon-button>\n </sgds-datepicker-input>\n <div\n id=${this.dropdownMenuId}\n class=\"sgds datepicker dropdown-menu\"\n role=\"dialog\"\n aria-label=${this._dialogAriaLabels[this.view]}\n @click=${(event: MouseEvent) => event.stopPropagation()}\n ${ref(this.menuRef)}\n >\n <sgds-datepicker-header\n .view=${this.view}\n .displayDate=${this.displayDate}\n .focusedDate=${this.focusedDate}\n .selectedDate=${this.selectedDateRange}\n .focusedTabIndex=${this.focusedTabIndex}\n ></sgds-datepicker-header>\n <sgds-datepicker-calendar\n .show=${this.menuIsOpen}\n .view=${this.view}\n .displayDate=${this.displayDate}\n .mode=${this.mode}\n minDate=${this.minDate}\n maxDate=${this.maxDate}\n .selectedDate=${this.selectedDateRange}\n .focusedTabIndex=${this.focusedTabIndex}\n ></sgds-datepicker-calendar>\n </div>\n </div>\n `;\n }\n}\n\nexport default SgdsDatepicker;\n"],"mappings":"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"}

package/react/components/Datepicker/sgds-datepicker.js CHANGED Viewed

@@ -183,8 +183,12 @@ var SgdsDatepicker = class extends SgdsFormValidatorMixin(DropdownElement) {
 			this.focusedTabIndex = (this.focusedTabIndex + 1 + tabIndexArray.length) % tabIndexArray.length;
 		}
 	}
-	_handleValueChange() {
+	async _handleValueChange() {
+		this._mixinSetFormValue();
 		this.emit("sgds-change-date");
+		await this.updateComplete;
+		if (this._mixinShouldSkipSgdsValidation()) return;
+		this._mixinValidate(this.input);
 	}
 	async _handleCloseMenu() {
 		if (this.selectedDateRange.length === 0) this.displayDate = this.initialDisplayDate;

package/react/components/Datepicker/sgds-datepicker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sgds-datepicker.js","names":["dropdownMenuStyle","datepickerStyle"],"sources":["../../../../src/components/Datepicker/sgds-datepicker.ts"],"sourcesContent":["import { formatDate, parseDate } from \"../../utils/date-helpers\";\nimport { html, PropertyValueMap } from \"lit\";\nimport { property, query, queryAsync, state } from \"lit/decorators.js\";\nimport { live } from \"lit/directives/live.js\";\nimport { ref } from \"lit/directives/ref.js\";\nimport { DropdownElement } from \"../../base/dropdown-element\";\nimport { type SgdsFormControl } from \"../../utils/formSubmitController\";\nimport { DATE_PATTERNS, setTimeToNoon } from \"../../utils/time\";\nimport { watch } from \"../../utils/watch\";\nimport { SgdsButton } from \"../Button/sgds-button\";\nimport dropdownMenuStyle from \"../Dropdown/dropdown-menu.css\";\nimport { DatepickerCalendar } from \"./datepicker-calendar\";\nimport { DatepickerHeader } from \"./datepicker-header\";\nimport DatepickerInput from \"./datepicker-input\";\nimport datepickerStyle from \"./datepicker.css\";\nimport { ViewEnum } from \"./types\";\nimport SgdsIconButton from \"../IconButton/sgds-icon-button\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\n\nexport type DateFormat = \"MM/DD/YYYY\" \| \"DD/MM/YYYY\" \| \"YYYY/MM/DD\";\n\n/*\n @summary The `DatePicker` Component is built using `Dropdown`, `Input` and `Button` components. By default, the Calendar points to today's date and input has no value. Users can either pick dates from the calendar or type dates through the input\n \n @event sgds-change-date - Emitted when the state of datepicker's input changes during first load, close button reset click & date click. Date values can be accessed via event.target.value\n * @event sgds-invalid - Emitted when the combo box's invalid state is set to true.\n * @event sgds-valid - Emitted when the combo box's invalid state is set to false.\n \n @description displayDate sets the month, year views of the calendar while focusedDate follows the focus which also directly changes\n * displayDate on certain occasions. Example, when keyboard moves up to the next month, it updates displayDate which then affect the current\n * date view of the calendar\n /\nexport class SgdsDatepicker extends SgdsFormValidatorMixin(DropdownElement) implements SgdsFormControl {\n static styles = [...DropdownElement.styles, dropdownMenuStyle, datepickerStyle];\n /@internal /\n static dependencies = {\n \"sgds-datepicker-input\": DatepickerInput,\n \"sgds-datepicker-calendar\": DatepickerCalendar,\n \"sgds-datepicker-header\": DatepickerHeader,\n \"sgds-button\": SgdsButton,\n \"sgds-icon-button\": SgdsIconButton\n };\n\n constructor() {\n super();\n this.floatingOpts = {\n placement: \"bottom-end\"\n };\n }\n\n /** When true, adds required attribute to input element /\n @property({ type: Boolean, reflect: true }) required = false;\n /The datepicker input's name attribute /\n @property({ reflect: true }) name: string;\n /** When true, adds disabled attribute to input and button element /\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /* Disables native and sgds validation for the datepicker. /\n @property({ type: Boolean, reflect: true }) noValidate = false;\n\n /* Sets the initial value of the datepicker. Replaces deprecated `initialValue`.\n * Pass in dates in this format `dd/mm/yyyy` for single mode and `dd/mm/yyyy - dd/mm/yyyy` for range mode\n * For example, `value=\"22/12/2023\"` for single mode or `value=\"22/12/2023 - 25/12/2023\"` for range mode\n /\n @property({ type: String, reflect: true }) value = \"\";\n\n /\n The initial value of DatePicker on first load for single &\n * range mode as array of string. eg.'[\"22/12/2023\"]' for single &\n * '[\"22/12/2023\",\"25/12/2023\"]' for range respectively.\n * @deprecated since v3.3.0 — use `value` instead.\n /\n @property({ type: Array, reflect: true }) initialValue: string[] = [];\n\n private dateFormat = \"DD/MM/YYYY\";\n\n /* ISO date string to set the lowest allowable date value. e.g. \"2016-05-19T12:00:00.000Z\" /\n @property({ type: String }) minDate = \"\";\n\n /* ISO date string to set the highest allowable date value. e.g. \"2016-05-19T12:00:00.000Z\" /\n @property({ type: String }) maxDate = \"\";\n\n /* Changes DatePicker to single date selection or range date selection /\n @property({ type: String, reflect: true }) mode: \"single\" \| \"range\" = \"single\";\n\n /Feedback text for error state when date input is invalid /\n @property({ type: String, reflect: true }) invalidFeedback: string;\n\n /** Allows invalidFeedback and invalid styles to be visible with the input /\n @property({ type: Boolean, reflect: true }) hasFeedback = false;\n\n /* The datepicker input's label /\n @property({ reflect: true }) label = \"\";\n\n /* The datepicker input's hint text below the label /\n @property({ reflect: true }) hintText = \"\";\n\n /* Controls auto-flipping of menu /\n @property({ type: Boolean, reflect: true, state: false })\n noFlip = false;\n\n /* The drop position of menu relative to the toggle button /\n @property({ type: String, reflect: true, state: false })\n drop: \"up\" \| \"down\" = \"down\";\n\n /* Provides the date context for Calendar to present the appropriate view. Defaults to today's date /\n @property({ attribute: false }) displayDate: Date;\n\n /Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. /\n @defaultValue()\n defaultValue = \"\";\n\n /** Marks the component as invalid. Replace the pseudo :invalid selector. /\n @property({ type: Boolean, reflect: true }) invalid = false;\n\n @state()\n private view: ViewEnum = \"days\";\n\n @state() private selectedDateRange: Date[] = [];\n\n @state() private focusedDate: Date;\n\n @state() private focusedTabIndex = 3;\n\n private isValueEmpty() {\n return this.value === \"\" \|\| this.value === \"DD/MM/YYYY\" \|\| this.value === \"DD/MM/YYYY - DD/MM/YYYY\";\n }\n\n private initialDisplayDate: Date = new Date();\n\n @queryAsync(\"sgds-datepicker-calendar\")\n private calendar: Promise<DatepickerCalendar>;\n\n @queryAsync(\"sgds-datepicker-input\")\n private datepickerInputAsync: Promise<DatepickerInput>;\n\n @query(\"sgds-datepicker-input\")\n private datepickerInput: DatepickerInput;\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 /\n Programmatically sets the invalid state of the datepicker.\n * Use together with `noValidate` (or `novalidate` on the parent `<form>`) and `invalidFeedback`\n * to integrate 3rd-party or custom validation logic.\n /\n public setInvalid(bool: boolean) {\n this.invalid = bool;\n if (this.datepickerInput) {\n this.datepickerInput.setInvalid(bool);\n }\n }\n\n /\n Checks for validity without any native error popup message\n /\n public setValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void {\n return this._mixinSetValidity(flags, message, anchor);\n }\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 async connectedCallback() {\n super.connectedCallback();\n this.addEventListener(\"sgds-view\", this._handleViewChanged);\n this.addEventListener(\"sgds-change-calendar\", this._handleDateChanged);\n this.addEventListener(\"sgds-update-focus\", this._handleFocusDateChanged);\n this.addEventListener(\"sgds-selectmonth\", this._handleSelectMonth);\n this.addEventListener(\"sgds-selectyear\", this._handleSelectYear);\n this.addEventListener(\"sgds-selectdates\", this._handleSelectDatesAndClose);\n this.addEventListener(\"i-sgds-selectdates-input\", this._handleSelectDatesInput);\n this.addEventListener(\"i-sgds-empty-input\", this._handleEmptyInput);\n this.addEventListener(\"keydown\", this._handleTab);\n this.addEventListener(\"sgds-hide\", this._handleCloseMenu);\n this.addEventListener(\"sgds-show\", this._handleOpenMenu);\n this.addEventListener(\"blur\", this._mixinCheckValidity);\n\n this.initialValue = this.value ? this.value.split(\" - \").map(v => v.trim()) : this.initialValue;\n this.initialDisplayDate = this.displayDate \|\| new Date();\n if (this.initialValue && this.initialValue.length > 0) {\n // Validate initialValue against the dateFormat regex\n const dateFormatRegex = new RegExp(this._getDateFormatRegex());\n // const startDateString = this.initialValue[0];\n const invalidDates = this.initialValue.filter(v => !dateFormatRegex.test(v));\n if (invalidDates.length > 0) {\n return console.error(\"Invalid date format in initialValue:\", invalidDates);\n } else {\n const initialSelectedDates = this.initialValue.map(v =>\n setTimeToNoon(parseDate(v, DATE_PATTERNS[this.dateFormat].fnsPattern))\n );\n this._handleSelectDates(initialSelectedDates);\n }\n } else {\n this.displayDate = this.initialDisplayDate;\n }\n\n const input = await this.datepickerInputAsync;\n input.setInvalid(this.invalid);\n }\n\n async firstUpdated(changedProperties: PropertyValueMap<this>) {\n super.firstUpdated(changedProperties);\n if (this.menuIsOpen) {\n const input = await this.datepickerInputAsync;\n await this.updateFloatingPosition();\n const cal = await this.calendar;\n cal.focusOnCalendar(input);\n }\n }\n\n /* @internal /\n private _getDateFormatRegex(): string {\n // validate date strings and adhere to the specified date format\n return (\n this.dateFormat\n // Replace any special characters with their escaped version using \"\\\\$&\"\n .replace(/[.+?^${}()\|[\\]\\\\]/g, \"\\\\$&\")\n // Replace 'MM' with '\\\\d{2}', which matches two digits representing the month (e.g., 01, 12)\n .replace(\"MM\", \"\\\\d{2}\")\n // Replace 'DD' with '\\\\d{2}', which matches two digits representing the day (e.g., 01, 31)\n .replace(\"DD\", \"\\\\d{2}\")\n // Replace 'YYYY' with '\\\\d{4}', which matches four digits representing the year (e.g., 2021)\n .replace(\"YYYY\", \"\\\\d{4}\")\n // Replace '/' with '\\\\/', which matches the forward slash character\n .replace(\"/\", \"\\\\/\")\n );\n }\n private _handleTab(event: KeyboardEvent) {\n if (!this.menuIsOpen) {\n return;\n }\n const tabIndexArray = Array(4);\n if (event.shiftKey && event.key === \"Tab\") {\n event.preventDefault();\n this.focusedTabIndex = (this.focusedTabIndex - 1 + tabIndexArray.length) % tabIndexArray.length;\n } else if (event.key === \"Tab\") {\n event.preventDefault();\n this.focusedTabIndex = (this.focusedTabIndex + 1 + tabIndexArray.length) % tabIndexArray.length;\n }\n }\n\n @watch(\"value\", { waitUntilFirstUpdate: true })\n _handleValueChange() {\n this.emit(\"sgds-change-date\");\n }\n\n private async _handleCloseMenu() {\n if (this.selectedDateRange.length === 0) {\n this.displayDate = this.initialDisplayDate;\n } else {\n const selectedDatesLength = this.selectedDateRange.length;\n this.displayDate = this.selectedDateRange[selectedDatesLength - 1];\n const calendar = await this.calendar;\n calendar._updateFocusedDate();\n }\n\n // Focus input after displayDate reset and calendar re-render to prevent\n // the calendar's updated() from stealing focus during the hide animation\n await this.updateComplete;\n const input = await this.datepickerInputAsync;\n input.focus();\n }\n private async _handleOpenMenu() {\n const cal = await this.calendar;\n const input = await this.datepickerInputAsync;\n cal.focusOnCalendar(input);\n }\n\n private _makeInputValueString = (startDate: Date, endDate: Date, dateFormat: string) => {\n if (!startDate && !endDate) return this.value;\n const fmtDate = (date: Date) => formatDate(date, DATE_PATTERNS[dateFormat].fnsPattern);\n switch (this.mode) {\n case \"single\": {\n if (startDate) {\n this.value = fmtDate(startDate);\n }\n break;\n }\n case \"range\": {\n if (startDate && endDate) {\n this.value = `${fmtDate(startDate)} - ${fmtDate(endDate)}`;\n }\n if (startDate && !endDate) {\n this.value = `${fmtDate(startDate)} - ${this.dateFormat}`;\n }\n break;\n }\n }\n return this.value;\n };\n private _handleSelectDatesInput(event: CustomEvent<Date[]>) {\n this._handleSelectDates(event.detail);\n }\n private async _handleSelectDates(newSelectedDates: Date[]) {\n newSelectedDates.sort((a: Date, b: Date) => a.getTime() - b.getTime());\n this.displayDate = newSelectedDates[0];\n this.focusedDate = newSelectedDates[0];\n this.selectedDateRange = newSelectedDates;\n // Get the formattedDate value for the selected dates\n const formattedDate = this._makeInputValueString(\n this.selectedDateRange[0],\n this.selectedDateRange[1],\n this.dateFormat\n );\n\n // Set formattedDate value as the new value for sgds-input\n this.value = formattedDate;\n const input = await this.datepickerInputAsync;\n input.updateMaskValue();\n this._manageInternalsValid();\n }\n\n private async _handleSelectDatesAndClose(event: CustomEvent<Date[]>) {\n await this._handleSelectDates(event.detail);\n\n if (this.mode === \"range\" && this.selectedDateRange.length === 2) {\n this.hideMenu();\n } else if (this.mode === \"single\" && this.selectedDateRange.length === 1) {\n this.hideMenu();\n }\n }\n\n /** update latest view state from datepicker-header /\n private _handleViewChanged(event: CustomEvent<string>) {\n this.view = event.detail as ViewEnum;\n }\n\n private _handleDateChanged(event: CustomEvent<Date>) {\n this.displayDate = event.detail;\n }\n private _handleFocusDateChanged(event: CustomEvent<Date>) {\n this.focusedDate = event.detail;\n }\n\n private _handleSelectMonth(event: CustomEvent<Date>) {\n this.displayDate = event.detail;\n }\n\n private _handleSelectYear(event: CustomEvent<Date>) {\n this.displayDate = event.detail;\n }\n private async _handleInvalidInput() {\n this.selectedDateRange = [];\n this.displayDate = this.initialDisplayDate;\n if (this._mixinShouldSkipSgdsValidation()) return;\n\n this.invalid = true;\n this._manageInternalsBadInput();\n }\n private async _handleEmptyInput() {\n if (this.required) {\n this._manageEmptyInput();\n }\n return;\n }\n private async _resetDatepicker(resetValue = \"\") {\n this.displayDate = this.initialDisplayDate;\n this.selectedDateRange = [];\n this.value = resetValue;\n this.view = \"days\";\n const input = await this.datepickerInputAsync;\n input.setInvalid(this.invalid);\n input.destroyInputMask();\n await input.applyInputMask();\n\n this._mixinResetValidity(input);\n if (this.isValueEmpty()) {\n this._handleEmptyInput();\n }\n }\n\n private _manageInternalsBadInput() {\n this._mixinSetValidity(\n {\n badInput: true\n },\n \"Invalid date input\",\n this.datepickerInput\n );\n }\n /\n Even though element internals handles the required constraint validation. This custom one is still needed as\n * datepicker input has a special case where the default input mask \"DD/MM/YYYY\" means an empty input.\n * However, the required constraint validation sees \"DD/MM/YYYY\" as a non-empty input.\n /\n private _manageEmptyInput() {\n this._mixinSetValidity(\n {\n valueMissing: true\n },\n \"Please fill in this field\",\n this.datepickerInput\n );\n }\n\n /\n Called when a valid date is entered via input or selected by calendar\n * 1. sets validity state to valid\n * 2. updates invalid prop\n * 3. sets the form value of datepicker\n /\n private _manageInternalsValid() {\n this._mixinSetFormValue();\n if (this._mixinShouldSkipSgdsValidation()) return;\n\n this._mixinSetValidity({});\n\n this.invalid = this.datepickerInput.invalid = false;\n }\n\n /\n Handles the form \"reset\" event\n */\n private async _mixinResetFormControl() {\n this._resetDatepicker(this.defaultValue);\n }\n private async _handleInputMaskChange(e: CustomEvent) {\n this.value = e.detail;\n\n if (this.isValueEmpty()) {\n this._resetDatepicker();\n }\n }\n\n private _dialogAriaLabels = {\n days: \"Choose date\",\n months: \"Choose month\",\n years: \"Choose year\"\n };\n render() {\n return html`\n <div class=\"datepicker-container m-width-160\">\n <sgds-datepicker-input\n .value=${live(this.value)}\n ?required=${this.required}\n ?disabled=${this.disabled}\n placeholder=${this.mode === \"single\" ? \"DD/MM/YYYY\" : \"DD/MM/YYYY - DD/MM/YYYY\"}\n mode=${this.mode}\n invalidFeedback=${ifDefined(this.invalidFeedback ? this.invalidFeedback : this._mixinGetValidationMessage())}\n @i-sgds-mask-input-change=${this._handleInputMaskChange}\n @i-sgds-invalid-input=${this._handleInvalidInput}\n minDate=${this.minDate}\n maxDate=${this.maxDate}\n label=${this.label}\n hintText=${this.hintText}\n name=${this.name}\n ?invalid=${this.invalid}\n hasFeedback=${ifDefined(this.hasFeedback ? \"both\" : undefined)}\n ?readonly=${this.readonly}\n >\n <sgds-icon-button\n slot=\"calendar-btn\"\n ${ref(this.myDropdown)}\n tone=\"neutral\"\n class=${classMap({\n \"calendar-btn\": true,\n \"with-hint-text\": this.hintText \|\| this.invalid,\n \"with-label\": this.label\n })}\n aria-expanded=\"${this.menuIsOpen}\"\n aria-haspopup=\"dialog\"\n aria-controls=${this.dropdownMenuId}\n @click=${() => this.toggleMenu()}\n ariaLabel=${this.menuIsOpen ? \"Close Calendar\" : \"Open Calendar\"}\n ?disabled=${this.disabled \|\| this.readonly}\n ?active=${this.menuIsOpen}\n variant=\"outline\"\n name=\"calendar\"\n >\n </sgds-icon-button>\n </sgds-datepicker-input>\n <div\n id=${this.dropdownMenuId}\n class=\"sgds datepicker dropdown-menu\"\n role=\"dialog\"\n aria-label=${this._dialogAriaLabels[this.view]}\n @click=${(event: MouseEvent) => event.stopPropagation()}\n ${ref(this.menuRef)}\n >\n <sgds-datepicker-header\n .view=${this.view}\n .displayDate=${this.displayDate}\n .focusedDate=${this.focusedDate}\n .selectedDate=${this.selectedDateRange}\n .focusedTabIndex=${this.focusedTabIndex}\n ></sgds-datepicker-header>\n <sgds-datepicker-calendar\n .show=${this.menuIsOpen}\n .view=${this.view}\n .displayDate=${this.displayDate}\n .mode=${this.mode}\n minDate=${this.minDate}\n maxDate=${this.maxDate}\n .selectedDate=${this.selectedDateRange}\n .focusedTabIndex=${this.focusedTabIndex}\n ></sgds-datepicker-calendar>\n </div>\n </div>\n `;\n }\n}\n\nexport default SgdsDatepicker;\n"],"mappings":"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"}
1	+ {"version":3,"file":"sgds-datepicker.js","names":["dropdownMenuStyle","datepickerStyle"],"sources":["../../../../src/components/Datepicker/sgds-datepicker.ts"],"sourcesContent":["import { formatDate, parseDate } from \"../../utils/date-helpers\";\nimport { html, PropertyValueMap } from \"lit\";\nimport { property, query, queryAsync, state } from \"lit/decorators.js\";\nimport { live } from \"lit/directives/live.js\";\nimport { ref } from \"lit/directives/ref.js\";\nimport { DropdownElement } from \"../../base/dropdown-element\";\nimport { type SgdsFormControl } from \"../../utils/formSubmitController\";\nimport { DATE_PATTERNS, setTimeToNoon } from \"../../utils/time\";\nimport { watch } from \"../../utils/watch\";\nimport { SgdsButton } from \"../Button/sgds-button\";\nimport dropdownMenuStyle from \"../Dropdown/dropdown-menu.css\";\nimport { DatepickerCalendar } from \"./datepicker-calendar\";\nimport { DatepickerHeader } from \"./datepicker-header\";\nimport DatepickerInput from \"./datepicker-input\";\nimport datepickerStyle from \"./datepicker.css\";\nimport { ViewEnum } from \"./types\";\nimport SgdsIconButton from \"../IconButton/sgds-icon-button\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\n\nexport type DateFormat = \"MM/DD/YYYY\" \| \"DD/MM/YYYY\" \| \"YYYY/MM/DD\";\n\n/*\n @summary The `DatePicker` Component is built using `Dropdown`, `Input` and `Button` components. By default, the Calendar points to today's date and input has no value. Users can either pick dates from the calendar or type dates through the input\n \n @event sgds-change-date - Emitted when the state of datepicker's input changes during first load, close button reset click & date click. Date values can be accessed via event.target.value\n * @event sgds-invalid - Emitted when the combo box's invalid state is set to true.\n * @event sgds-valid - Emitted when the combo box's invalid state is set to false.\n \n @description displayDate sets the month, year views of the calendar while focusedDate follows the focus which also directly changes\n * displayDate on certain occasions. Example, when keyboard moves up to the next month, it updates displayDate which then affect the current\n * date view of the calendar\n /\nexport class SgdsDatepicker extends SgdsFormValidatorMixin(DropdownElement) implements SgdsFormControl {\n static styles = [...DropdownElement.styles, dropdownMenuStyle, datepickerStyle];\n /@internal /\n static dependencies = {\n \"sgds-datepicker-input\": DatepickerInput,\n \"sgds-datepicker-calendar\": DatepickerCalendar,\n \"sgds-datepicker-header\": DatepickerHeader,\n \"sgds-button\": SgdsButton,\n \"sgds-icon-button\": SgdsIconButton\n };\n\n constructor() {\n super();\n this.floatingOpts = {\n placement: \"bottom-end\"\n };\n }\n\n /** When true, adds required attribute to input element /\n @property({ type: Boolean, reflect: true }) required = false;\n /The datepicker input's name attribute /\n @property({ reflect: true }) name: string;\n /** When true, adds disabled attribute to input and button element /\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /* Disables native and sgds validation for the datepicker. /\n @property({ type: Boolean, reflect: true }) noValidate = false;\n\n /* Sets the initial value of the datepicker. Replaces deprecated `initialValue`.\n * Pass in dates in this format `dd/mm/yyyy` for single mode and `dd/mm/yyyy - dd/mm/yyyy` for range mode\n * For example, `value=\"22/12/2023\"` for single mode or `value=\"22/12/2023 - 25/12/2023\"` for range mode\n /\n @property({ type: String, reflect: true }) value = \"\";\n\n /\n The initial value of DatePicker on first load for single &\n * range mode as array of string. eg.'[\"22/12/2023\"]' for single &\n * '[\"22/12/2023\",\"25/12/2023\"]' for range respectively.\n * @deprecated since v3.3.0 — use `value` instead.\n /\n @property({ type: Array, reflect: true }) initialValue: string[] = [];\n\n private dateFormat = \"DD/MM/YYYY\";\n\n /* ISO date string to set the lowest allowable date value. e.g. \"2016-05-19T12:00:00.000Z\" /\n @property({ type: String }) minDate = \"\";\n\n /* ISO date string to set the highest allowable date value. e.g. \"2016-05-19T12:00:00.000Z\" /\n @property({ type: String }) maxDate = \"\";\n\n /* Changes DatePicker to single date selection or range date selection /\n @property({ type: String, reflect: true }) mode: \"single\" \| \"range\" = \"single\";\n\n /Feedback text for error state when date input is invalid /\n @property({ type: String, reflect: true }) invalidFeedback: string;\n\n /** Allows invalidFeedback and invalid styles to be visible with the input /\n @property({ type: Boolean, reflect: true }) hasFeedback = false;\n\n /* The datepicker input's label /\n @property({ reflect: true }) label = \"\";\n\n /* The datepicker input's hint text below the label /\n @property({ reflect: true }) hintText = \"\";\n\n /* Controls auto-flipping of menu /\n @property({ type: Boolean, reflect: true, state: false })\n noFlip = false;\n\n /* The drop position of menu relative to the toggle button /\n @property({ type: String, reflect: true, state: false })\n drop: \"up\" \| \"down\" = \"down\";\n\n /* Provides the date context for Calendar to present the appropriate view. Defaults to today's date /\n @property({ attribute: false }) displayDate: Date;\n\n /Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. /\n @defaultValue()\n defaultValue = \"\";\n\n /** Marks the component as invalid. Replace the pseudo :invalid selector. /\n @property({ type: Boolean, reflect: true }) invalid = false;\n\n @state()\n private view: ViewEnum = \"days\";\n\n @state() private selectedDateRange: Date[] = [];\n\n @state() private focusedDate: Date;\n\n @state() private focusedTabIndex = 3;\n\n private isValueEmpty() {\n return this.value === \"\" \|\| this.value === \"DD/MM/YYYY\" \|\| this.value === \"DD/MM/YYYY - DD/MM/YYYY\";\n }\n\n private initialDisplayDate: Date = new Date();\n\n @queryAsync(\"sgds-datepicker-calendar\")\n private calendar: Promise<DatepickerCalendar>;\n\n @queryAsync(\"sgds-datepicker-input\")\n private datepickerInputAsync: Promise<DatepickerInput>;\n\n @query(\"sgds-datepicker-input\")\n private datepickerInput: DatepickerInput;\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 /\n Programmatically sets the invalid state of the datepicker.\n * Use together with `noValidate` (or `novalidate` on the parent `<form>`) and `invalidFeedback`\n * to integrate 3rd-party or custom validation logic.\n /\n public setInvalid(bool: boolean) {\n this.invalid = bool;\n if (this.datepickerInput) {\n this.datepickerInput.setInvalid(bool);\n }\n }\n\n /\n Checks for validity without any native error popup message\n /\n public setValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void {\n return this._mixinSetValidity(flags, message, anchor);\n }\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 async connectedCallback() {\n super.connectedCallback();\n this.addEventListener(\"sgds-view\", this._handleViewChanged);\n this.addEventListener(\"sgds-change-calendar\", this._handleDateChanged);\n this.addEventListener(\"sgds-update-focus\", this._handleFocusDateChanged);\n this.addEventListener(\"sgds-selectmonth\", this._handleSelectMonth);\n this.addEventListener(\"sgds-selectyear\", this._handleSelectYear);\n this.addEventListener(\"sgds-selectdates\", this._handleSelectDatesAndClose);\n this.addEventListener(\"i-sgds-selectdates-input\", this._handleSelectDatesInput);\n this.addEventListener(\"i-sgds-empty-input\", this._handleEmptyInput);\n this.addEventListener(\"keydown\", this._handleTab);\n this.addEventListener(\"sgds-hide\", this._handleCloseMenu);\n this.addEventListener(\"sgds-show\", this._handleOpenMenu);\n this.addEventListener(\"blur\", this._mixinCheckValidity);\n\n this.initialValue = this.value ? this.value.split(\" - \").map(v => v.trim()) : this.initialValue;\n this.initialDisplayDate = this.displayDate \|\| new Date();\n if (this.initialValue && this.initialValue.length > 0) {\n // Validate initialValue against the dateFormat regex\n const dateFormatRegex = new RegExp(this._getDateFormatRegex());\n // const startDateString = this.initialValue[0];\n const invalidDates = this.initialValue.filter(v => !dateFormatRegex.test(v));\n if (invalidDates.length > 0) {\n return console.error(\"Invalid date format in initialValue:\", invalidDates);\n } else {\n const initialSelectedDates = this.initialValue.map(v =>\n setTimeToNoon(parseDate(v, DATE_PATTERNS[this.dateFormat].fnsPattern))\n );\n this._handleSelectDates(initialSelectedDates);\n }\n } else {\n this.displayDate = this.initialDisplayDate;\n }\n\n const input = await this.datepickerInputAsync;\n input.setInvalid(this.invalid);\n }\n\n async firstUpdated(changedProperties: PropertyValueMap<this>) {\n super.firstUpdated(changedProperties);\n if (this.menuIsOpen) {\n const input = await this.datepickerInputAsync;\n await this.updateFloatingPosition();\n const cal = await this.calendar;\n cal.focusOnCalendar(input);\n }\n }\n\n /* @internal /\n private _getDateFormatRegex(): string {\n // validate date strings and adhere to the specified date format\n return (\n this.dateFormat\n // Replace any special characters with their escaped version using \"\\\\$&\"\n .replace(/[.+?^${}()\|[\\]\\\\]/g, \"\\\\$&\")\n // Replace 'MM' with '\\\\d{2}', which matches two digits representing the month (e.g., 01, 12)\n .replace(\"MM\", \"\\\\d{2}\")\n // Replace 'DD' with '\\\\d{2}', which matches two digits representing the day (e.g., 01, 31)\n .replace(\"DD\", \"\\\\d{2}\")\n // Replace 'YYYY' with '\\\\d{4}', which matches four digits representing the year (e.g., 2021)\n .replace(\"YYYY\", \"\\\\d{4}\")\n // Replace '/' with '\\\\/', which matches the forward slash character\n .replace(\"/\", \"\\\\/\")\n );\n }\n private _handleTab(event: KeyboardEvent) {\n if (!this.menuIsOpen) {\n return;\n }\n const tabIndexArray = Array(4);\n if (event.shiftKey && event.key === \"Tab\") {\n event.preventDefault();\n this.focusedTabIndex = (this.focusedTabIndex - 1 + tabIndexArray.length) % tabIndexArray.length;\n } else if (event.key === \"Tab\") {\n event.preventDefault();\n this.focusedTabIndex = (this.focusedTabIndex + 1 + tabIndexArray.length) % tabIndexArray.length;\n }\n }\n\n @watch(\"value\", { waitUntilFirstUpdate: true })\n async _handleValueChange() {\n this._mixinSetFormValue();\n this.emit(\"sgds-change-date\");\n await this.updateComplete;\n if (this._mixinShouldSkipSgdsValidation()) return;\n this._mixinValidate(this.input);\n }\n\n private async _handleCloseMenu() {\n if (this.selectedDateRange.length === 0) {\n this.displayDate = this.initialDisplayDate;\n } else {\n const selectedDatesLength = this.selectedDateRange.length;\n this.displayDate = this.selectedDateRange[selectedDatesLength - 1];\n const calendar = await this.calendar;\n calendar._updateFocusedDate();\n }\n\n // Focus input after displayDate reset and calendar re-render to prevent\n // the calendar's updated() from stealing focus during the hide animation\n await this.updateComplete;\n const input = await this.datepickerInputAsync;\n input.focus();\n }\n private async _handleOpenMenu() {\n const cal = await this.calendar;\n const input = await this.datepickerInputAsync;\n cal.focusOnCalendar(input);\n }\n\n private _makeInputValueString = (startDate: Date, endDate: Date, dateFormat: string) => {\n if (!startDate && !endDate) return this.value;\n const fmtDate = (date: Date) => formatDate(date, DATE_PATTERNS[dateFormat].fnsPattern);\n switch (this.mode) {\n case \"single\": {\n if (startDate) {\n this.value = fmtDate(startDate);\n }\n break;\n }\n case \"range\": {\n if (startDate && endDate) {\n this.value = `${fmtDate(startDate)} - ${fmtDate(endDate)}`;\n }\n if (startDate && !endDate) {\n this.value = `${fmtDate(startDate)} - ${this.dateFormat}`;\n }\n break;\n }\n }\n return this.value;\n };\n private _handleSelectDatesInput(event: CustomEvent<Date[]>) {\n this._handleSelectDates(event.detail);\n }\n private async _handleSelectDates(newSelectedDates: Date[]) {\n newSelectedDates.sort((a: Date, b: Date) => a.getTime() - b.getTime());\n this.displayDate = newSelectedDates[0];\n this.focusedDate = newSelectedDates[0];\n this.selectedDateRange = newSelectedDates;\n // Get the formattedDate value for the selected dates\n const formattedDate = this._makeInputValueString(\n this.selectedDateRange[0],\n this.selectedDateRange[1],\n this.dateFormat\n );\n\n // Set formattedDate value as the new value for sgds-input\n this.value = formattedDate;\n const input = await this.datepickerInputAsync;\n input.updateMaskValue();\n this._manageInternalsValid();\n }\n\n private async _handleSelectDatesAndClose(event: CustomEvent<Date[]>) {\n await this._handleSelectDates(event.detail);\n\n if (this.mode === \"range\" && this.selectedDateRange.length === 2) {\n this.hideMenu();\n } else if (this.mode === \"single\" && this.selectedDateRange.length === 1) {\n this.hideMenu();\n }\n }\n\n /** update latest view state from datepicker-header /\n private _handleViewChanged(event: CustomEvent<string>) {\n this.view = event.detail as ViewEnum;\n }\n\n private _handleDateChanged(event: CustomEvent<Date>) {\n this.displayDate = event.detail;\n }\n private _handleFocusDateChanged(event: CustomEvent<Date>) {\n this.focusedDate = event.detail;\n }\n\n private _handleSelectMonth(event: CustomEvent<Date>) {\n this.displayDate = event.detail;\n }\n\n private _handleSelectYear(event: CustomEvent<Date>) {\n this.displayDate = event.detail;\n }\n private async _handleInvalidInput() {\n this.selectedDateRange = [];\n this.displayDate = this.initialDisplayDate;\n if (this._mixinShouldSkipSgdsValidation()) return;\n\n this.invalid = true;\n this._manageInternalsBadInput();\n }\n private async _handleEmptyInput() {\n if (this.required) {\n this._manageEmptyInput();\n }\n return;\n }\n private async _resetDatepicker(resetValue = \"\") {\n this.displayDate = this.initialDisplayDate;\n this.selectedDateRange = [];\n this.value = resetValue;\n this.view = \"days\";\n const input = await this.datepickerInputAsync;\n input.setInvalid(this.invalid);\n input.destroyInputMask();\n await input.applyInputMask();\n\n this._mixinResetValidity(input);\n if (this.isValueEmpty()) {\n this._handleEmptyInput();\n }\n }\n\n private _manageInternalsBadInput() {\n this._mixinSetValidity(\n {\n badInput: true\n },\n \"Invalid date input\",\n this.datepickerInput\n );\n }\n /\n Even though element internals handles the required constraint validation. This custom one is still needed as\n * datepicker input has a special case where the default input mask \"DD/MM/YYYY\" means an empty input.\n * However, the required constraint validation sees \"DD/MM/YYYY\" as a non-empty input.\n /\n private _manageEmptyInput() {\n this._mixinSetValidity(\n {\n valueMissing: true\n },\n \"Please fill in this field\",\n this.datepickerInput\n );\n }\n\n /\n Called when a valid date is entered via input or selected by calendar\n * 1. sets validity state to valid\n * 2. updates invalid prop\n * 3. sets the form value of datepicker\n /\n private _manageInternalsValid() {\n this._mixinSetFormValue();\n if (this._mixinShouldSkipSgdsValidation()) return;\n\n this._mixinSetValidity({});\n\n this.invalid = this.datepickerInput.invalid = false;\n }\n\n /\n Handles the form \"reset\" event\n */\n private async _mixinResetFormControl() {\n this._resetDatepicker(this.defaultValue);\n }\n private async _handleInputMaskChange(e: CustomEvent) {\n this.value = e.detail;\n\n if (this.isValueEmpty()) {\n this._resetDatepicker();\n }\n }\n\n private _dialogAriaLabels = {\n days: \"Choose date\",\n months: \"Choose month\",\n years: \"Choose year\"\n };\n render() {\n return html`\n <div class=\"datepicker-container m-width-160\">\n <sgds-datepicker-input\n .value=${live(this.value)}\n ?required=${this.required}\n ?disabled=${this.disabled}\n placeholder=${this.mode === \"single\" ? \"DD/MM/YYYY\" : \"DD/MM/YYYY - DD/MM/YYYY\"}\n mode=${this.mode}\n invalidFeedback=${ifDefined(this.invalidFeedback ? this.invalidFeedback : this._mixinGetValidationMessage())}\n @i-sgds-mask-input-change=${this._handleInputMaskChange}\n @i-sgds-invalid-input=${this._handleInvalidInput}\n minDate=${this.minDate}\n maxDate=${this.maxDate}\n label=${this.label}\n hintText=${this.hintText}\n name=${this.name}\n ?invalid=${this.invalid}\n hasFeedback=${ifDefined(this.hasFeedback ? \"both\" : undefined)}\n ?readonly=${this.readonly}\n >\n <sgds-icon-button\n slot=\"calendar-btn\"\n ${ref(this.myDropdown)}\n tone=\"neutral\"\n class=${classMap({\n \"calendar-btn\": true,\n \"with-hint-text\": this.hintText \|\| this.invalid,\n \"with-label\": this.label\n })}\n aria-expanded=\"${this.menuIsOpen}\"\n aria-haspopup=\"dialog\"\n aria-controls=${this.dropdownMenuId}\n @click=${() => this.toggleMenu()}\n ariaLabel=${this.menuIsOpen ? \"Close Calendar\" : \"Open Calendar\"}\n ?disabled=${this.disabled \|\| this.readonly}\n ?active=${this.menuIsOpen}\n variant=\"outline\"\n name=\"calendar\"\n >\n </sgds-icon-button>\n </sgds-datepicker-input>\n <div\n id=${this.dropdownMenuId}\n class=\"sgds datepicker dropdown-menu\"\n role=\"dialog\"\n aria-label=${this._dialogAriaLabels[this.view]}\n @click=${(event: MouseEvent) => event.stopPropagation()}\n ${ref(this.menuRef)}\n >\n <sgds-datepicker-header\n .view=${this.view}\n .displayDate=${this.displayDate}\n .focusedDate=${this.focusedDate}\n .selectedDate=${this.selectedDateRange}\n .focusedTabIndex=${this.focusedTabIndex}\n ></sgds-datepicker-header>\n <sgds-datepicker-calendar\n .show=${this.menuIsOpen}\n .view=${this.view}\n .displayDate=${this.displayDate}\n .mode=${this.mode}\n minDate=${this.minDate}\n maxDate=${this.maxDate}\n .selectedDate=${this.selectedDateRange}\n .focusedTabIndex=${this.focusedTabIndex}\n ></sgds-datepicker-calendar>\n </div>\n </div>\n `;\n }\n}\n\nexport default SgdsDatepicker;\n"],"mappings":"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"}

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

@@ -131,6 +131,12 @@ var SgdsInput = class extends require_validatorMixin.SgdsFormValidatorMixin(requ
 	_handleDisabledChange() {
 		this.setInvalid(false);
 	}
+	async _handleValueChange() {
+		this._mixinSetFormValue();
+		await this.updateComplete;
+		if (this._mixinShouldSkipSgdsValidation()) return;
+		this._mixinValidate(this.input);
+	}
 	_renderInput() {
 		const wantFeedbackStyle = this.hasFeedback === "both" || this.hasFeedback === "style";
 		const wantFeedbackText = this.hasFeedback === "both" || this.hasFeedback === "text";
@@ -297,6 +303,7 @@ require_decorate.default([(0, lit_decorators_js.state)()], SgdsInput.prototype,
 require_decorate.default([(0, lit_decorators_js.state)()], SgdsInput.prototype, "_showPassword", void 0);
 require_decorate.default([require_watch.watch("_isTouched", { waitUntilFirstUpdate: true })], SgdsInput.prototype, "_handleIsTouched", null);
 require_decorate.default([require_watch.watch("disabled", { waitUntilFirstUpdate: true })], SgdsInput.prototype, "_handleDisabledChange", null);
+require_decorate.default([require_watch.watch("value", { waitUntilFirstUpdate: true })], SgdsInput.prototype, "_handleValueChange", null);
 //#endregion
 exports.SgdsInput = SgdsInput;
 exports.default = SgdsInput;