@govtechsg/sgds-web-component 3.15.1-rc.2 → 3.16.0

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

@@ -103,7 +103,7 @@ class extends Ii{constructor(t){if(super(t),t.type!==Hi&&t.type!==Ei&&t.type!==$
                <slot name="rightIcon"></slot>`}
       
       </${e}>
-    `}}Us.styles=[...Rs.styles,Ns,zs],t([Zi({type:String,reflect:!0})],Us.prototype,"type",void 0),t([Zi({type:String,reflect:!0})],Us.prototype,"form",void 0),t([Zi({type:String,reflect:!0,attribute:"formaction"})],Us.prototype,"formAction",void 0),t([Zi({type:String,reflect:!0,attribute:"formmethod"})],Us.prototype,"formMethod",void 0),t([Zi({attribute:"formnovalidate",type:Boolean,reflect:!0})],Us.prototype,"formNoValidate",void 0),t([Zi({type:String,reflect:!0,attribute:"formtarget"})],Us.prototype,"formTarget",void 0),t([Zi({type:Boolean,reflect:!0})],Us.prototype,"fullWidth",void 0),t([Zi({type:Boolean})],Us.prototype,"hasLeftIconSlot",void 0),t([Zi({type:Boolean})],Us.prototype,"hasRightIconSlot",void 0);var qs=re`:host([menuisopen]:not([disabled]):not([readonly])) .dropdown-menu{display:block}.dropdown-menu{background-clip:padding-box;background-color:var(--sgds-surface-default);border-radius:var(--sgds-border-radius-md);box-shadow:0 0 1px 0 hsla(0,0%,5%,.12),0 4px 8px 0 hsla(0,0%,5%,.12);color:var(--sgds-color-default);display:none;list-style:none;margin:0;max-height:var(--sgds-dimension-480);min-width:var(--sgds-dimension-192);overflow-y:auto;padding:var(--sgds-padding-xs) 0;position:absolute;text-align:left;z-index:var(--sgds-z-index-floating)}.nav-tabs .dropdown-menu{border-top-left-radius:0;border-top-right-radius:0;margin-top:calc(var(--sgds-nav-tabs-border-width)*-1)}@media (min-width:512px){.navbar-expand-sm .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:768px){.navbar-expand-md .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:1024px){.navbar-expand-lg .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:1280px){.navbar-expand-xl .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:1440px){.navbar-expand-xxl .navbar-nav .dropdown-menu{position:absolute}}.navbar-expand .navbar-nav .dropdown-menu{position:absolute}.sgds.navbar .dropdown-menu.megamenu{left:0;right:0;width:100%}.sgds.combobox>.dropdown-menu{min-width:100%}`,Ws=re`.datepicker-body{color:var(--sgds-form-color-default);display:flex;justify-content:center}table{border-collapse:collapse;text-align:center}.monthpicker,.yearpicker{display:grid;grid-template-columns:repeat(3,6rem);grid-template-rows:repeat(4,2.5rem)}button.month,button.year{background-color:transparent;border:0;border-radius:var(--sgds-form-border-radius-sm);line-height:var(--sgds-line-height-20);padding:0;position:relative}button.month.active:not(.selected-ends),button.year.active:not(.selected-ends),td[data-day].active:not(.selected-ends){background-color:var(--sgds-primary-surface-translucent);border-radius:0;cursor:pointer}button.month:hover:not(.active),button.year:hover:not(.active),td[data-day]:hover:not(.disabled):not(.selected-ends):not(.active){background-color:var(--sgds-bg-translucent-subtle);cursor:pointer}button.month:focus:not(.active),button.year:focus:not(.active),td[data-day]:focus:not(.disabled):not(.selected-ends):not(.active){background-color:var(--sgds-bg-translucent-subtle)}button.month:focus-visible,button.year:focus-visible,td[data-day]:focus-visible{outline:var(--sgds-form-outline-focus);outline-offset:var(--sgds-form-outline-offset-focus)}button.month.active:not(.selected-ends):focus,button.year.active:not(.selected-ends):focus,td[data-day].active:not(.selected-ends):focus{border-radius:var(--sgds-form-border-radius-sm)}button.year.active{background-color:var(--sgds-primary-surface-translucent);cursor:pointer}td,th{border-radius:var(--sgds-form-border-radius-sm);height:var(--sgds-form-height-lg);line-height:var(--sgds-line-height-20);padding:0;position:relative;width:var(--sgds-form-width-md)}th{font-weight:var(--sgds-font-weight-semibold)}td[data-day]{cursor:pointer}button.month.active.selected-ends,button.year.active.selected-ends,td[data-day].active.selected-ends{background-color:var(--sgds-form-primary-surface-default);color:var(--sgds-form-color-fixed-light)}button.month.active.selected-ends:focus,button.month.active.selected-ends:hover,button.year.active.selected-ends:focus,button.year.active.selected-ends:hover,td[data-day].active.selected-ends:focus,td[data-day].active.selected-ends:hover{background-color:var(--sgds-form-primary-surface-emphasis)}td[data-day].disabled{cursor:not-allowed;opacity:var(--sgds-opacity-50)}.today{align-items:center;display:flex;flex-direction:column;justify-content:center}.today:after{background-color:var(--sgds-form-primary-surface-default);bottom:6px;content:".";line-height:4px;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' fill='none'%3E%3Ccircle cx='2' cy='2' r='2' fill='%235A42C0'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' fill='none'%3E%3Ccircle cx='2' cy='2' r='2' fill='%235A42C0'/%3E%3C/svg%3E");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;position:absolute;width:4px}.today.active.selected-ends:after{background-color:var(--sgds-form-color-inverse)}`;const js=new Date,Gs={ArrowUp:{days:-7,months:-3,years:-3},ArrowDown:{days:7,months:3,years:3},ArrowRight:{days:1,months:1,years:1},ArrowLeft:{days:-1,months:-1,years:-1}};class Ks extends Cs{constructor(){super(...arguments),this.selectedDate=[],this.mode="single"}focusOnCalendar(t){t.blur(),this._focusOnCalendarCell()}connectedCallback(){super.connectedCallback(),this.addEventListener("keydown",this._handleKeyPress),this.addEventListener("blur",t=>t.stopPropagation())}updated(){3===this.focusedTabIndex&&this._focusOnCalendarCell()}_updateFocusedDate(){this.focusedDate=Ds(this.displayDate),this.focusedDate.getFullYear()<1900&&this.focusedDate.setFullYear(1900)}_setFocusedDate(t){const e=this.focusedDate.getDate(),i=this.focusedDate.getMonth(),a=this.focusedDate.getFullYear();switch(this.view){case"days":{const s=Ds(new Date(a,i,e+t));(it(s,new Date(0,0,1,12))||st(s,new Date(0,0,1,12)))&&(this.focusedDate=s);break}case"months":{const s=Ds(new Date(a,i+t,e));(it(s,new Date(0,0,1,12))||st(s,new Date(0,0,1,12)))&&(this.focusedDate=s);break}case"years":{const s=Ds(new Date(a+t,i,e));s.getFullYear()>=1900&&(this.focusedDate=s);break}}}_handleEnterDateKeyboard(t){const e=t.composedPath()[0];if(!e.classList.contains("disabled"))switch(this.view){case"days":this._onClickDay(t);break;case"months":{const{month:t}=e.dataset;this._onClickMonth(parseInt(t));break}case"years":{const{year:t}=e.dataset;this._onClickYear(parseInt(t))}}}_handleKeyPress(t){if("Enter"===t.key)return t.preventDefault(),void this._handleEnterDateKeyboard(t);if("Tab"===t.key){const t=this._getFocusedTarget();return void(3!==this.focusedTabIndex&&t.blur())}if(t.key.includes("Arrow")){t.preventDefault(),this._blurCalendarCell();const e=Gs[t.key][this.view];this._setFocusedDate(e),this._focusOnCalendarCell()}}_generateIncrementDates(){const t=Ds(this.selectedDate[0]);if(this.selectedDate.length<2)return[t];const e=Ds(this.selectedDate[1]),i=[];if(t.getTime()<e.getTime())for(let a=t;a<=e;a.setDate(a.getDate()+1))i.push(new Date(a));else for(let a=e;a<=t;a.setDate(a.getDate()+1))i.push(new Date(a));return i}_onClickDay(t){const{day:e,date:i}=t.composedPath()[0].dataset,a=new Date(this.displayDate);if(a.setDate(parseInt(e)),"click"===t.type&&(this.focusedDate=Ds(new Date(i))),"single"===this.mode)this.selectedDate=[a],this.emit("sgds-selectdates",{detail:this.selectedDate});else if("range"===this.mode){const t=[...this.selectedDate];0!==t.length&&2!==t.length||(t.length=0),t.push(a),this.selectedDate=t,this.emit("sgds-selectdates",{detail:this.selectedDate})}const s=this.minDate?Ds(new Date(this.minDate)):null,n=this.maxDate?Ds(new Date(this.maxDate)):null,r=Ds(a);(s&&r<s||n&&r>n)&&(t.stopPropagation(),t.preventDefault())}_onClickMonth(t,e=this.focusedDate.getFullYear()){const i=new Date(this.displayDate);this.view="days",i.setMonth(t),i.setFullYear(e),this.displayDate=i,this.emit("sgds-view",{detail:this.view}),this.emit("sgds-selectmonth",{detail:this.displayDate})}_onClickYear(t){const e=new Date(this.displayDate);e.setFullYear(t),this.displayDate=e,this.view="months",this.emit("sgds-view",{detail:this.view}),this.emit("sgds-selectyear",{detail:this.displayDate})}_getFocusedTarget(){const t={days:`td[data-date="${this.focusedDate.toISOString()}"]`,months:`button[data-month="${this.focusedDate.getMonth()}"][data-year="${this.focusedDate.getFullYear()}"]`,years:`button[data-year="${this.focusedDate.getFullYear()}"]`}[this.view];return this.shadowRoot.querySelector(`${t}`)}_blurCalendarCell(){const t=this._getFocusedTarget();t.setAttribute("tabindex","-1"),t.blur()}_focusOnCalendarCell(){const t=this._getFocusedTarget();t?(t.setAttribute("tabindex","3"),t.focus(),this.emit("sgds-update-focus",{detail:this.focusedDate})):this.emit("sgds-change-calendar",{detail:this.focusedDate})}_generateDays(){const t=this.selectedDate.map(t=>Ds(t)),e=this._generateIncrementDates(),i=this.minDate?Ds(new Date(this.minDate)):null,a=this.maxDate?Ds(new Date(this.maxDate)):null,s=this.displayDate.getFullYear(),n=this.displayDate.getMonth(),r=new Date(s,n,1).getDay();let o=Ks.daysInMonth[n];1===n&&(s%4==0&&s%100!=0||s%400==0)&&(o=29);const l=[];let c=1;for(let d=0;d<9;d++){const h=[];for(let l=0;l<=6;l++)if(c<=o&&(d>0||l>=r)){const r=new Date(s,n,c,12,0,0,0),o=r.toISOString(),d=i&&Date.parse(o)<Date.parse(i.toISOString()),u=a&&Date.parse(o)>Date.parse(a.toISOString()),p=d||u?void 0:this._onClickDay,g=js.getMonth()===this.displayDate.getMonth(),v=js.getFullYear()===this.displayDate.getFullYear(),f=js.getDate()===c,m=t.length>0&&e.some(t=>Date.parse(o)===Date.parse(t.toISOString())),w=t.length>0&&e[0].toISOString()===o,y=t.length>1&&e[e.length-1].toISOString()===o,b=""+(f&&g&&v?"Today's date, ":"")+X(r,"PPPP");h.push(Je`<td
+    `}}Us.styles=[...Rs.styles,Ns,zs],t([Zi({type:String,reflect:!0})],Us.prototype,"type",void 0),t([Zi({type:String,reflect:!0})],Us.prototype,"form",void 0),t([Zi({type:String,reflect:!0,attribute:"formaction"})],Us.prototype,"formAction",void 0),t([Zi({type:String,reflect:!0,attribute:"formmethod"})],Us.prototype,"formMethod",void 0),t([Zi({attribute:"formnovalidate",type:Boolean,reflect:!0})],Us.prototype,"formNoValidate",void 0),t([Zi({type:String,reflect:!0,attribute:"formtarget"})],Us.prototype,"formTarget",void 0),t([Zi({type:Boolean,reflect:!0})],Us.prototype,"fullWidth",void 0),t([Zi({type:Boolean})],Us.prototype,"hasLeftIconSlot",void 0),t([Zi({type:Boolean})],Us.prototype,"hasRightIconSlot",void 0);var qs=re`:host([menuisopen]:not([disabled]):not([readonly])) .dropdown-menu{display:block}.dropdown-menu{background-clip:padding-box;background-color:var(--sgds-surface-default);border-radius:var(--sgds-border-radius-md);box-shadow:0 0 1px 0 hsla(0,0%,5%,.12),0 4px 8px 0 hsla(0,0%,5%,.12);color:var(--sgds-color-default);display:none;list-style:none;margin:0;max-height:var(--sgds-dimension-480);min-width:var(--sgds-dimension-192);overflow-y:auto;padding:var(--sgds-padding-xs) 0;position:absolute;text-align:left;z-index:1050}.nav-tabs .dropdown-menu{border-top-left-radius:0;border-top-right-radius:0;margin-top:calc(var(--sgds-nav-tabs-border-width)*-1)}@media (min-width:512px){.navbar-expand-sm .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:768px){.navbar-expand-md .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:1024px){.navbar-expand-lg .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:1280px){.navbar-expand-xl .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:1440px){.navbar-expand-xxl .navbar-nav .dropdown-menu{position:absolute}}.navbar-expand .navbar-nav .dropdown-menu{position:absolute}.sgds.navbar .dropdown-menu.megamenu{left:0;right:0;width:100%}.sgds.combobox>.dropdown-menu{min-width:100%}`,Ws=re`.datepicker-body{color:var(--sgds-form-color-default);display:flex;justify-content:center}table{border-collapse:collapse;text-align:center}.monthpicker,.yearpicker{display:grid;grid-template-columns:repeat(3,6rem);grid-template-rows:repeat(4,2.5rem)}button.month,button.year{background-color:transparent;border:0;border-radius:var(--sgds-form-border-radius-sm);line-height:var(--sgds-line-height-20);padding:0;position:relative}button.month.active:not(.selected-ends),button.year.active:not(.selected-ends),td[data-day].active:not(.selected-ends){background-color:var(--sgds-primary-surface-translucent);border-radius:0;cursor:pointer}button.month:hover:not(.active),button.year:hover:not(.active),td[data-day]:hover:not(.disabled):not(.selected-ends):not(.active){background-color:var(--sgds-bg-translucent-subtle);cursor:pointer}button.month:focus:not(.active),button.year:focus:not(.active),td[data-day]:focus:not(.disabled):not(.selected-ends):not(.active){background-color:var(--sgds-bg-translucent-subtle)}button.month:focus-visible,button.year:focus-visible,td[data-day]:focus-visible{outline:var(--sgds-form-outline-focus);outline-offset:var(--sgds-form-outline-offset-focus)}button.month.active:not(.selected-ends):focus,button.year.active:not(.selected-ends):focus,td[data-day].active:not(.selected-ends):focus{border-radius:var(--sgds-form-border-radius-sm)}button.year.active{background-color:var(--sgds-primary-surface-translucent);cursor:pointer}td,th{border-radius:var(--sgds-form-border-radius-sm);height:var(--sgds-form-height-lg);line-height:var(--sgds-line-height-20);padding:0;position:relative;width:var(--sgds-form-width-md)}th{font-weight:var(--sgds-font-weight-semibold)}td[data-day]{cursor:pointer}button.month.active.selected-ends,button.year.active.selected-ends,td[data-day].active.selected-ends{background-color:var(--sgds-form-primary-surface-default);color:var(--sgds-form-color-fixed-light)}button.month.active.selected-ends:focus,button.month.active.selected-ends:hover,button.year.active.selected-ends:focus,button.year.active.selected-ends:hover,td[data-day].active.selected-ends:focus,td[data-day].active.selected-ends:hover{background-color:var(--sgds-form-primary-surface-emphasis)}td[data-day].disabled{cursor:not-allowed;opacity:var(--sgds-opacity-50)}.today{align-items:center;display:flex;flex-direction:column;justify-content:center}.today:after{background-color:var(--sgds-form-primary-surface-default);bottom:6px;content:".";line-height:4px;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' fill='none'%3E%3Ccircle cx='2' cy='2' r='2' fill='%235A42C0'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' fill='none'%3E%3Ccircle cx='2' cy='2' r='2' fill='%235A42C0'/%3E%3C/svg%3E");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;position:absolute;width:4px}.today.active.selected-ends:after{background-color:var(--sgds-form-color-inverse)}`;const js=new Date,Gs={ArrowUp:{days:-7,months:-3,years:-3},ArrowDown:{days:7,months:3,years:3},ArrowRight:{days:1,months:1,years:1},ArrowLeft:{days:-1,months:-1,years:-1}};class Ks extends Cs{constructor(){super(...arguments),this.selectedDate=[],this.mode="single"}focusOnCalendar(t){t.blur(),this._focusOnCalendarCell()}connectedCallback(){super.connectedCallback(),this.addEventListener("keydown",this._handleKeyPress),this.addEventListener("blur",t=>t.stopPropagation())}updated(){3===this.focusedTabIndex&&this._focusOnCalendarCell()}_updateFocusedDate(){this.focusedDate=Ds(this.displayDate),this.focusedDate.getFullYear()<1900&&this.focusedDate.setFullYear(1900)}_setFocusedDate(t){const e=this.focusedDate.getDate(),i=this.focusedDate.getMonth(),a=this.focusedDate.getFullYear();switch(this.view){case"days":{const s=Ds(new Date(a,i,e+t));(it(s,new Date(0,0,1,12))||st(s,new Date(0,0,1,12)))&&(this.focusedDate=s);break}case"months":{const s=Ds(new Date(a,i+t,e));(it(s,new Date(0,0,1,12))||st(s,new Date(0,0,1,12)))&&(this.focusedDate=s);break}case"years":{const s=Ds(new Date(a+t,i,e));s.getFullYear()>=1900&&(this.focusedDate=s);break}}}_handleEnterDateKeyboard(t){const e=t.composedPath()[0];if(!e.classList.contains("disabled"))switch(this.view){case"days":this._onClickDay(t);break;case"months":{const{month:t}=e.dataset;this._onClickMonth(parseInt(t));break}case"years":{const{year:t}=e.dataset;this._onClickYear(parseInt(t))}}}_handleKeyPress(t){if("Enter"===t.key)return t.preventDefault(),void this._handleEnterDateKeyboard(t);if("Tab"===t.key){const t=this._getFocusedTarget();return void(3!==this.focusedTabIndex&&t.blur())}if(t.key.includes("Arrow")){t.preventDefault(),this._blurCalendarCell();const e=Gs[t.key][this.view];this._setFocusedDate(e),this._focusOnCalendarCell()}}_generateIncrementDates(){const t=Ds(this.selectedDate[0]);if(this.selectedDate.length<2)return[t];const e=Ds(this.selectedDate[1]),i=[];if(t.getTime()<e.getTime())for(let a=t;a<=e;a.setDate(a.getDate()+1))i.push(new Date(a));else for(let a=e;a<=t;a.setDate(a.getDate()+1))i.push(new Date(a));return i}_onClickDay(t){const{day:e,date:i}=t.composedPath()[0].dataset,a=new Date(this.displayDate);if(a.setDate(parseInt(e)),"click"===t.type&&(this.focusedDate=Ds(new Date(i))),"single"===this.mode)this.selectedDate=[a],this.emit("sgds-selectdates",{detail:this.selectedDate});else if("range"===this.mode){const t=[...this.selectedDate];0!==t.length&&2!==t.length||(t.length=0),t.push(a),this.selectedDate=t,this.emit("sgds-selectdates",{detail:this.selectedDate})}const s=this.minDate?Ds(new Date(this.minDate)):null,n=this.maxDate?Ds(new Date(this.maxDate)):null,r=Ds(a);(s&&r<s||n&&r>n)&&(t.stopPropagation(),t.preventDefault())}_onClickMonth(t,e=this.focusedDate.getFullYear()){const i=new Date(this.displayDate);this.view="days",i.setMonth(t),i.setFullYear(e),this.displayDate=i,this.emit("sgds-view",{detail:this.view}),this.emit("sgds-selectmonth",{detail:this.displayDate})}_onClickYear(t){const e=new Date(this.displayDate);e.setFullYear(t),this.displayDate=e,this.view="months",this.emit("sgds-view",{detail:this.view}),this.emit("sgds-selectyear",{detail:this.displayDate})}_getFocusedTarget(){const t={days:`td[data-date="${this.focusedDate.toISOString()}"]`,months:`button[data-month="${this.focusedDate.getMonth()}"][data-year="${this.focusedDate.getFullYear()}"]`,years:`button[data-year="${this.focusedDate.getFullYear()}"]`}[this.view];return this.shadowRoot.querySelector(`${t}`)}_blurCalendarCell(){const t=this._getFocusedTarget();t.setAttribute("tabindex","-1"),t.blur()}_focusOnCalendarCell(){const t=this._getFocusedTarget();t?(t.setAttribute("tabindex","3"),t.focus(),this.emit("sgds-update-focus",{detail:this.focusedDate})):this.emit("sgds-change-calendar",{detail:this.focusedDate})}_generateDays(){const t=this.selectedDate.map(t=>Ds(t)),e=this._generateIncrementDates(),i=this.minDate?Ds(new Date(this.minDate)):null,a=this.maxDate?Ds(new Date(this.maxDate)):null,s=this.displayDate.getFullYear(),n=this.displayDate.getMonth(),r=new Date(s,n,1).getDay();let o=Ks.daysInMonth[n];1===n&&(s%4==0&&s%100!=0||s%400==0)&&(o=29);const l=[];let c=1;for(let d=0;d<9;d++){const h=[];for(let l=0;l<=6;l++)if(c<=o&&(d>0||l>=r)){const r=new Date(s,n,c,12,0,0,0),o=r.toISOString(),d=i&&Date.parse(o)<Date.parse(i.toISOString()),u=a&&Date.parse(o)>Date.parse(a.toISOString()),p=d||u?void 0:this._onClickDay,g=js.getMonth()===this.displayDate.getMonth(),v=js.getFullYear()===this.displayDate.getFullYear(),f=js.getDate()===c,m=t.length>0&&e.some(t=>Date.parse(o)===Date.parse(t.toISOString())),w=t.length>0&&e[0].toISOString()===o,y=t.length>1&&e[e.length-1].toISOString()===o,b=""+(f&&g&&v?"Today's date, ":"")+X(r,"PPPP");h.push(Je`<td
               key=${l}
               data-date=${o}
               data-day=${c}