@govtechsg/sgds-web-component 3.20.0-rc.1 → 3.20.0-rc.2
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.
- package/components/Datepicker/datepicker.js +1 -1
- package/components/Datepicker/index.umd.min.js +18 -17
- package/components/Datepicker/index.umd.min.js.map +1 -1
- package/components/Datepicker/sgds-datepicker.d.ts +15 -1
- package/components/Datepicker/sgds-datepicker.js +50 -19
- package/components/Datepicker/sgds-datepicker.js.map +1 -1
- package/components/index.umd.min.js +18 -17
- package/components/index.umd.min.js.map +1 -1
- package/custom-elements.json +101 -1
- package/index.umd.min.js +96 -95
- package/index.umd.min.js.map +1 -1
- package/package.json +1 -1
- package/react/components/Datepicker/datepicker.cjs.js +1 -1
- package/react/components/Datepicker/datepicker.js +1 -1
- package/react/components/Datepicker/sgds-datepicker.cjs.js +50 -19
- package/react/components/Datepicker/sgds-datepicker.cjs.js.map +1 -1
- package/react/components/Datepicker/sgds-datepicker.js +50 -19
- package/react/components/Datepicker/sgds-datepicker.js.map +1 -1
- package/react/datepicker/index.cjs.js +2 -0
- package/react/datepicker/index.cjs.js.map +1 -1
- package/react/datepicker/index.js +2 -0
- package/react/datepicker/index.js.map +1 -1
- package/types/react.d.ts +6 -0
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
2
|
|
|
3
|
-
var css_248z = css`:host{--datepicker-theme-color:var(--sgds-primary);--datepicker-hover-bg:var(--sgds-primary-100);--datepicker-bg:#fff;--datepicker-close-btn-bg:var(--datepicker-theme-color);--datepicker-close-btn-hover-bg:var(--sgds-primary-700);--datepicker-close-btn-color:#fff;--datepicker-selected-date-bg:var(--sgds-primary);--datepicker-selected-date-color:#fff;font-size:var(--sgds-font-size-14)}:host([menuisopen]:not([disabled]):not([readonly])) .dropdown-menu{background-color:var(--sgds-form-surface-default);display:flex;flex-direction:column;gap:var(--sgds-form-gap-sm);overflow:unset;padding:var(--sgds-form-padding-y) var(--sgds-form-padding-x);width:var(--sgds-dimension-320)}.dropdown{display:flex;height:100%}sgds-datepicker-input{--input-border-radius:var(--sgds-form-border-radius-md) 0 0 var(--sgds-form-border-radius-md);flex:1;margin-right:0}sgds-icon-button{--btn-border-radius:0 var(--sgds-form-border-radius-md) var(--sgds-form-border-radius-md) 0}.m-width-160{min-width:var(--sgds-dimension-160)}
|
|
3
|
+
var css_248z = css`:host{--datepicker-theme-color:var(--sgds-primary);--datepicker-hover-bg:var(--sgds-primary-100);--datepicker-bg:#fff;--datepicker-close-btn-bg:var(--datepicker-theme-color);--datepicker-close-btn-hover-bg:var(--sgds-primary-700);--datepicker-close-btn-color:#fff;--datepicker-selected-date-bg:var(--sgds-primary);--datepicker-selected-date-color:#fff;font-size:var(--sgds-font-size-14)}:host([menuisopen]:not([disabled]):not([readonly])) .dropdown-menu{background-color:var(--sgds-form-surface-default);display:flex;flex-direction:column;gap:var(--sgds-form-gap-sm);overflow:unset;padding:var(--sgds-form-padding-y) var(--sgds-form-padding-x);width:var(--sgds-dimension-320)}.dropdown{display:flex;height:100%}sgds-datepicker-input{--input-border-radius:var(--sgds-form-border-radius-md) 0 0 var(--sgds-form-border-radius-md);flex:1;margin-right:0}sgds-icon-button{--btn-border-radius:0 var(--sgds-form-border-radius-md) var(--sgds-form-border-radius-md) 0}.m-width-160{min-width:var(--sgds-dimension-160)}`;
|
|
4
4
|
|
|
5
5
|
export { css_248z as default };
|
|
6
6
|
//# sourceMappingURL=datepicker.js.map
|
|
@@ -2527,7 +2527,7 @@ class extends Ii{constructor(t){if(super(t),t.type!==Hi&&t.type!==Ei&&t.type!==$
|
|
|
2527
2527
|
</div>
|
|
2528
2528
|
${this._renderFeedback()}
|
|
2529
2529
|
</div>
|
|
2530
|
-
`}}wr.styles=[...fr.styles,mr],t([Zi({type:String})],wr.prototype,"minDate",void 0),t([Zi({type:String})],wr.prototype,"maxDate",void 0),t([Zi({type:String,reflect:!0})],wr.prototype,"mode",void 0),t([Bi("input")],wr.prototype,"shadowInput",void 0);var yr,br,xr=re`:host{--datepicker-theme-color:var(--sgds-primary);--datepicker-hover-bg:var(--sgds-primary-100);--datepicker-bg:#fff;--datepicker-close-btn-bg:var(--datepicker-theme-color);--datepicker-close-btn-hover-bg:var(--sgds-primary-700);--datepicker-close-btn-color:#fff;--datepicker-selected-date-bg:var(--sgds-primary);--datepicker-selected-date-color:#fff;font-size:var(--sgds-font-size-14)}:host([menuisopen]:not([disabled]):not([readonly])) .dropdown-menu{background-color:var(--sgds-form-surface-default);display:flex;flex-direction:column;gap:var(--sgds-form-gap-sm);overflow:unset;padding:var(--sgds-form-padding-y) var(--sgds-form-padding-x);width:var(--sgds-dimension-320)}.dropdown{display:flex;height:100%}sgds-datepicker-input{--input-border-radius:var(--sgds-form-border-radius-md) 0 0 var(--sgds-form-border-radius-md);flex:1;margin-right:0}sgds-icon-button{--btn-border-radius:0 var(--sgds-form-border-radius-md) var(--sgds-form-border-radius-md) 0}.m-width-160{min-width:var(--sgds-dimension-160)}
|
|
2530
|
+
`}}wr.styles=[...fr.styles,mr],t([Zi({type:String})],wr.prototype,"minDate",void 0),t([Zi({type:String})],wr.prototype,"maxDate",void 0),t([Zi({type:String,reflect:!0})],wr.prototype,"mode",void 0),t([Bi("input")],wr.prototype,"shadowInput",void 0);var yr,br,xr=re`:host{--datepicker-theme-color:var(--sgds-primary);--datepicker-hover-bg:var(--sgds-primary-100);--datepicker-bg:#fff;--datepicker-close-btn-bg:var(--datepicker-theme-color);--datepicker-close-btn-hover-bg:var(--sgds-primary-700);--datepicker-close-btn-color:#fff;--datepicker-selected-date-bg:var(--sgds-primary);--datepicker-selected-date-color:#fff;font-size:var(--sgds-font-size-14)}:host([menuisopen]:not([disabled]):not([readonly])) .dropdown-menu{background-color:var(--sgds-form-surface-default);display:flex;flex-direction:column;gap:var(--sgds-form-gap-sm);overflow:unset;padding:var(--sgds-form-padding-y) var(--sgds-form-padding-x);width:var(--sgds-dimension-320)}.dropdown{display:flex;height:100%}sgds-datepicker-input{--input-border-radius:var(--sgds-form-border-radius-md) 0 0 var(--sgds-form-border-radius-md);flex:1;margin-right:0}sgds-icon-button{--btn-border-radius:0 var(--sgds-form-border-radius-md) var(--sgds-form-border-radius-md) 0}.m-width-160{min-width:var(--sgds-dimension-160)}`;class _r extends(gr(Ms)){constructor(){super(),this.required=!1,this.disabled=!1,this.noValidate=!1,this.value="",this.initialValue=[],this.dateFormat="DD/MM/YYYY",this.minDate="",this.maxDate="",this.mode="single",this.hasFeedback=!1,this.label="",this.hintText="",this.noFlip=!1,this.drop="down",this.defaultValue="",this.invalid=!1,this.view="days",this.selectedDateRange=[],this.focusedTabIndex=3,this.initialDisplayDate=new Date,this._makeInputValueString=(t,e,i)=>{if(!t&&!e)return this.value;const a=t=>X(t,Zs[i].fnsPattern);switch(this.mode){case"single":t&&(this.value=a(t));break;case"range":t&&e&&(this.value=`${a(t)} - ${a(e)}`),t&&!e&&(this.value=`${a(t)} - ${this.dateFormat}`)}return this.value},this._dialogAriaLabels={days:"Choose date",months:"Choose month",years:"Choose year"},this.floatingOpts={placement:"bottom-end"}}isValueEmpty(){return""===this.value||"DD/MM/YYYY"===this.value||"DD/MM/YYYY - DD/MM/YYYY"===this.value}reportValidity(){return this._mixinReportValidity()}checkValidity(){return this._mixinCheckValidity()}setInvalid(t){this.invalid=t,this.datepickerInput&&this.datepickerInput.setInvalid(t)}setValidity(t,e,i){return this._mixinSetValidity(t,e,i)}get validity(){return this._mixinGetValidity()}get validationMessage(){return this._mixinGetValidationMessage()}async connectedCallback(){if(super.connectedCallback(),this.addEventListener("sgds-view",this._handleViewChanged),this.addEventListener("sgds-change-calendar",this._handleDateChanged),this.addEventListener("sgds-update-focus",this._handleFocusDateChanged),this.addEventListener("sgds-selectmonth",this._handleSelectMonth),this.addEventListener("sgds-selectyear",this._handleSelectYear),this.addEventListener("sgds-selectdates",this._handleSelectDatesAndClose),this.addEventListener("sgds-selectdates-input",this._handleSelectDatesInput),this.addEventListener("sgds-empty-input",this._handleEmptyInput),this.addEventListener("keydown",this._handleTab),this.addEventListener("sgds-hide",this._handleCloseMenu),this.addEventListener("sgds-show",this._handleOpenMenu),this.addEventListener("blur",this._mixinCheckValidity),this.initialValue=this.value?this.value.split(" - ").map(t=>t.trim()):this.initialValue,this.initialDisplayDate=this.displayDate||new Date,this.initialValue&&this.initialValue.length>0){const t=new RegExp(this._getDateFormatRegex()),e=this.initialValue.filter(e=>!t.test(e));if(e.length>0)return console.error("Invalid date format in initialValue:",e);{const t=this.initialValue.map(t=>Ds(Jt(t,Zs[this.dateFormat].fnsPattern,new Date)));this._handleSelectDates(t)}}else this.displayDate=this.initialDisplayDate;(await this.datepickerInputAsync).setInvalid(this.invalid)}async firstUpdated(t){if(super.firstUpdated(t),this.menuIsOpen){const t=await this.datepickerInputAsync;await this.updateFloatingPosition();(await this.calendar).focusOnCalendar(t)}}_getDateFormatRegex(){return this.dateFormat.replace(/[.*+?^${}()|[\]\\]/g,"\\$&").replace("MM","\\d{2}").replace("DD","\\d{2}").replace("YYYY","\\d{4}").replace("/","\\/")}_handleTab(t){if(!this.menuIsOpen)return;const e=Array(4);t.shiftKey&&"Tab"===t.key?(t.preventDefault(),this.focusedTabIndex=(this.focusedTabIndex-1+e.length)%e.length):"Tab"===t.key&&(t.preventDefault(),this.focusedTabIndex=(this.focusedTabIndex+1+e.length)%e.length)}_handleValueChange(){this.emit("sgds-change-date")}async _handleCloseMenu(){if((await this.datepickerInputAsync).focus(),0===this.selectedDateRange.length)this.displayDate=this.initialDisplayDate;else{const t=this.selectedDateRange.length;this.displayDate=this.selectedDateRange[t-1];(await this.calendar)._updateFocusedDate()}}async _handleOpenMenu(){const t=await this.calendar,e=await this.datepickerInputAsync;t.focusOnCalendar(e)}_handleSelectDatesInput(t){this._handleSelectDates(t.detail)}async _handleSelectDates(t){t.sort((t,e)=>t.getTime()-e.getTime()),this.displayDate=t[0],this.focusedDate=t[0],this.selectedDateRange=t;const e=this._makeInputValueString(this.selectedDateRange[0],this.selectedDateRange[1],this.dateFormat);this.value=e;(await this.datepickerInputAsync).updateMaskValue(),this._manageInternalsValid()}async _handleSelectDatesAndClose(t){await this._handleSelectDates(t.detail),("range"===this.mode&&2===this.selectedDateRange.length||"single"===this.mode&&1===this.selectedDateRange.length)&&this.hideMenu()}_handleViewChanged(t){this.view=t.detail}_handleDateChanged(t){this.displayDate=t.detail}_handleFocusDateChanged(t){this.focusedDate=t.detail}_handleSelectMonth(t){this.displayDate=t.detail}_handleSelectYear(t){this.displayDate=t.detail}async _handleInvalidInput(){this.selectedDateRange=[],this.displayDate=this.initialDisplayDate,this._mixinShouldSkipSgdsValidation()||(this.invalid=!0,this._manageInternalsBadInput())}async _handleEmptyInput(){this.required&&this._manageEmptyInput()}async _resetDatepicker(t=""){this.displayDate=this.initialDisplayDate,this.selectedDateRange=[],this.value=t,this.view="days";const e=await this.datepickerInputAsync;e.setInvalid(this.invalid),e.destroyInputMask(),await e.applyInputMask(),this._mixinResetValidity(e),this.isValueEmpty()&&this._handleEmptyInput()}_manageInternalsBadInput(){this._mixinSetValidity({badInput:!0},"Invalid date input",this.datepickerInput)}_manageEmptyInput(){this._mixinSetValidity({valueMissing:!0},"Please fill in this field",this.datepickerInput)}_manageInternalsValid(){this._mixinShouldSkipSgdsValidation()||(this._mixinSetValidity({}),this.invalid=this.datepickerInput.invalid=!1,this._mixinSetFormValue())}async _mixinResetFormControl(){this._resetDatepicker(this.defaultValue)}async _handleInputMaskChange(t){this.value=t.detail,this.isValueEmpty()&&this._resetDatepicker()}render(){return Je`
|
|
2531
2531
|
<div class="datepicker-container m-width-160">
|
|
2532
2532
|
<sgds-datepicker-input
|
|
2533
2533
|
.value=${Ri(this.value)}
|
|
@@ -2547,22 +2547,23 @@ class extends Ii{constructor(t){if(super(t),t.type!==Hi&&t.type!==Ei&&t.type!==$
|
|
|
2547
2547
|
hasFeedback=${Es(this.hasFeedback?"both":void 0)}
|
|
2548
2548
|
?readonly=${this.readonly}
|
|
2549
2549
|
>
|
|
2550
|
+
<sgds-icon-button
|
|
2551
|
+
slot="calendar-btn"
|
|
2552
|
+
${Qi(this.myDropdown)}
|
|
2553
|
+
tone="neutral"
|
|
2554
|
+
class=${Bs({"calendar-btn":!0,"with-hint-text":this.hintText||this.invalid,"with-label":this.label})}
|
|
2555
|
+
aria-expanded="${this.menuIsOpen}"
|
|
2556
|
+
aria-haspopup="dialog"
|
|
2557
|
+
aria-controls=${this.dropdownMenuId}
|
|
2558
|
+
@click=${()=>this.toggleMenu()}
|
|
2559
|
+
ariaLabel=${this.menuIsOpen?"Close Calendar":"Open Calendar"}
|
|
2560
|
+
?disabled=${this.disabled||this.readonly}
|
|
2561
|
+
?active=${this.menuIsOpen}
|
|
2562
|
+
variant="outline"
|
|
2563
|
+
name="calendar"
|
|
2564
|
+
>
|
|
2565
|
+
</sgds-icon-button>
|
|
2550
2566
|
</sgds-datepicker-input>
|
|
2551
|
-
<sgds-icon-button
|
|
2552
|
-
${Qi(this.myDropdown)}
|
|
2553
|
-
tone="neutral"
|
|
2554
|
-
class=${Bs({"calendar-btn":!0,"with-hint-text":this.hintText||this.invalid,"with-label":this.label})}
|
|
2555
|
-
aria-expanded="${this.menuIsOpen}"
|
|
2556
|
-
aria-haspopup="dialog"
|
|
2557
|
-
aria-controls=${this.dropdownMenuId}
|
|
2558
|
-
@click=${()=>this.toggleMenu()}
|
|
2559
|
-
ariaLabel=${this.menuIsOpen?"Close Calendar":"Open Calendar"}
|
|
2560
|
-
?disabled=${this.disabled||this.readonly}
|
|
2561
|
-
?active=${this.menuIsOpen}
|
|
2562
|
-
variant="outline"
|
|
2563
|
-
name="calendar"
|
|
2564
|
-
>
|
|
2565
|
-
</sgds-icon-button>
|
|
2566
2567
|
<ul
|
|
2567
2568
|
id=${this.dropdownMenuId}
|
|
2568
2569
|
class="sgds datepicker dropdown-menu"
|
|
@@ -2590,5 +2591,5 @@ class extends Ii{constructor(t){if(super(t),t.type!==Hi&&t.type!==Ei&&t.type!==$
|
|
|
2590
2591
|
></sgds-datepicker-calendar>
|
|
2591
2592
|
</ul>
|
|
2592
2593
|
</div>
|
|
2593
|
-
`}}_r.styles=[...Ms.styles,qs,xr],_r.dependencies={"sgds-datepicker-input":wr,"sgds-datepicker-calendar":Ks,"sgds-datepicker-header":_n,"sgds-button":Us,"sgds-icon-button":bn},t([Zi({type:Boolean,reflect:!0})],_r.prototype,"required",void 0),t([Zi({reflect:!0})],_r.prototype,"name",void 0),t([Zi({type:Boolean,reflect:!0})],_r.prototype,"disabled",void 0),t([Zi({type:String,reflect:!0})],_r.prototype,"value",void 0),t([Zi({type:Array,reflect:!0})],_r.prototype,"initialValue",void 0),t([Zi({type:String})],_r.prototype,"minDate",void 0),t([Zi({type:String})],_r.prototype,"maxDate",void 0),t([Zi({type:String,reflect:!0})],_r.prototype,"mode",void 0),t([Zi({type:String,reflect:!0})],_r.prototype,"invalidFeedback",void 0),t([Zi({type:Boolean,reflect:!0})],_r.prototype,"hasFeedback",void 0),t([Zi({reflect:!0})],_r.prototype,"label",void 0),t([Zi({reflect:!0})],_r.prototype,"hintText",void 0),t([Zi({type:Boolean,reflect:!0,state:!1})],_r.prototype,"noFlip",void 0),t([Zi({type:String,reflect:!0,state:!1})],_r.prototype,"drop",void 0),t([Zi({attribute:!1})],_r.prototype,"displayDate",void 0),t([ur()],_r.prototype,"defaultValue",void 0),t([
|
|
2594
|
+
`}}_r.styles=[...Ms.styles,qs,xr],_r.dependencies={"sgds-datepicker-input":wr,"sgds-datepicker-calendar":Ks,"sgds-datepicker-header":_n,"sgds-button":Us,"sgds-icon-button":bn},t([Zi({type:Boolean,reflect:!0})],_r.prototype,"required",void 0),t([Zi({reflect:!0})],_r.prototype,"name",void 0),t([Zi({type:Boolean,reflect:!0})],_r.prototype,"disabled",void 0),t([Zi({type:Boolean,reflect:!0})],_r.prototype,"noValidate",void 0),t([Zi({type:String,reflect:!0})],_r.prototype,"value",void 0),t([Zi({type:Array,reflect:!0})],_r.prototype,"initialValue",void 0),t([Zi({type:String})],_r.prototype,"minDate",void 0),t([Zi({type:String})],_r.prototype,"maxDate",void 0),t([Zi({type:String,reflect:!0})],_r.prototype,"mode",void 0),t([Zi({type:String,reflect:!0})],_r.prototype,"invalidFeedback",void 0),t([Zi({type:Boolean,reflect:!0})],_r.prototype,"hasFeedback",void 0),t([Zi({reflect:!0})],_r.prototype,"label",void 0),t([Zi({reflect:!0})],_r.prototype,"hintText",void 0),t([Zi({type:Boolean,reflect:!0,state:!1})],_r.prototype,"noFlip",void 0),t([Zi({type:String,reflect:!0,state:!1})],_r.prototype,"drop",void 0),t([Zi({attribute:!1})],_r.prototype,"displayDate",void 0),t([ur()],_r.prototype,"defaultValue",void 0),t([Zi({type:Boolean,reflect:!0})],_r.prototype,"invalid",void 0),t([Vi()],_r.prototype,"view",void 0),t([Vi()],_r.prototype,"selectedDateRange",void 0),t([Vi()],_r.prototype,"focusedDate",void 0),t([Vi()],_r.prototype,"focusedTabIndex",void 0),t([Bi("sgds-datepicker-calendar")],_r.prototype,"calendar",void 0),t([Bi("sgds-datepicker-input")],_r.prototype,"datepickerInputAsync",void 0),t([Ai("sgds-datepicker-input")],_r.prototype,"datepickerInput",void 0),t([As("value",{waitUntilFirstUpdate:!0})],_r.prototype,"_handleValueChange",null),yr="sgds-datepicker",br=_r,customElements.get(yr)||customElements.define(yr,br)});
|
|
2594
2595
|
//# sourceMappingURL=index.umd.min.js.map
|