@riverty/web-components 6.3.0 → 6.3.1

package/dist/esm/r-input-date.entry.js

@@ -0,0 +1,522 @@
+import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host, g as getElement } from './index-CTxpqopm.js';
+import { a as appendControlToFormData } from './formData-DvLT8-y3.js';
+
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+var dayjs_min$1 = {exports: {}};
+
+var dayjs_min = dayjs_min$1.exports;
+
+var hasRequiredDayjs_min;
+
+function requireDayjs_min () {
+	if (hasRequiredDayjs_min) return dayjs_min$1.exports;
+	hasRequiredDayjs_min = 1;
+	(function (module, exports) {
+		!function(t,e){module.exports=e();}(dayjs_min,(function(){var t=1e3,e=6e4,n=36e5,r="millisecond",i="second",s="minute",u="hour",a="day",o="week",c="month",f="quarter",h="year",d="date",l="Invalid Date",$=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,y=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,M={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(t){var e=["th","st","nd","rd"],n=t%100;return "["+t+(e[(n-20)%10]||e[n]||e[0])+"]"}},m=function(t,e,n){var r=String(t);return !r||r.length>=e?t:""+Array(e+1-r.length).join(n)+t},v={s:m,z:function(t){var e=-t.utcOffset(),n=Math.abs(e),r=Math.floor(n/60),i=n%60;return (e<=0?"+":"-")+m(r,2,"0")+":"+m(i,2,"0")},m:function t(e,n){if(e.date()<n.date())return -t(n,e);var r=12*(n.year()-e.year())+(n.month()-e.month()),i=e.clone().add(r,c),s=n-i<0,u=e.clone().add(r+(s?-1:1),c);return +(-(r+(n-i)/(s?i-u:u-i))||0)},a:function(t){return t<0?Math.ceil(t)||0:Math.floor(t)},p:function(t){return {M:c,y:h,w:o,d:a,D:d,h:u,m:s,s:i,ms:r,Q:f}[t]||String(t||"").toLowerCase().replace(/s$/,"")},u:function(t){return void 0===t}},g="en",D={};D[g]=M;var p="$isDayjsObject",S=function(t){return t instanceof _||!(!t||!t[p])},w=function t(e,n,r){var i;if(!e)return g;if("string"==typeof e){var s=e.toLowerCase();D[s]&&(i=s),n&&(D[s]=n,i=s);var u=e.split("-");if(!i&&u.length>1)return t(u[0])}else {var a=e.name;D[a]=e,i=a;}return !r&&i&&(g=i),i||!r&&g},O=function(t,e){if(S(t))return t.clone();var n="object"==typeof e?e:{};return n.date=t,n.args=arguments,new _(n)},b=v;b.l=w,b.i=S,b.w=function(t,e){return O(t,{locale:e.$L,utc:e.$u,x:e.$x,$offset:e.$offset})};var _=function(){function M(t){this.$L=w(t.locale,null,true),this.parse(t),this.$x=this.$x||t.x||{},this[p]=true;}var m=M.prototype;return m.parse=function(t){this.$d=function(t){var e=t.date,n=t.utc;if(null===e)return new Date(NaN);if(b.u(e))return new Date;if(e instanceof Date)return new Date(e);if("string"==typeof e&&!/Z$/i.test(e)){var r=e.match($);if(r){var i=r[2]-1||0,s=(r[7]||"0").substring(0,3);return n?new Date(Date.UTC(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)):new Date(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)}}return new Date(e)}(t),this.init();},m.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds();},m.$utils=function(){return b},m.isValid=function(){return !(this.$d.toString()===l)},m.isSame=function(t,e){var n=O(t);return this.startOf(e)<=n&&n<=this.endOf(e)},m.isAfter=function(t,e){return O(t)<this.startOf(e)},m.isBefore=function(t,e){return this.endOf(e)<O(t)},m.$g=function(t,e,n){return b.u(t)?this[e]:this.set(n,t)},m.unix=function(){return Math.floor(this.valueOf()/1e3)},m.valueOf=function(){return this.$d.getTime()},m.startOf=function(t,e){var n=this,r=!!b.u(e)||e,f=b.p(t),l=function(t,e){var i=b.w(n.$u?Date.UTC(n.$y,e,t):new Date(n.$y,e,t),n);return r?i:i.endOf(a)},$=function(t,e){return b.w(n.toDate()[t].apply(n.toDate("s"),(r?[0,0,0,0]:[23,59,59,999]).slice(e)),n)},y=this.$W,M=this.$M,m=this.$D,v="set"+(this.$u?"UTC":"");switch(f){case h:return r?l(1,0):l(31,11);case c:return r?l(1,M):l(0,M+1);case o:var g=this.$locale().weekStart||0,D=(y<g?y+7:y)-g;return l(r?m-D:m+(6-D),M);case a:case d:return $(v+"Hours",0);case u:return $(v+"Minutes",1);case s:return $(v+"Seconds",2);case i:return $(v+"Milliseconds",3);default:return this.clone()}},m.endOf=function(t){return this.startOf(t,false)},m.$set=function(t,e){var n,o=b.p(t),f="set"+(this.$u?"UTC":""),l=(n={},n[a]=f+"Date",n[d]=f+"Date",n[c]=f+"Month",n[h]=f+"FullYear",n[u]=f+"Hours",n[s]=f+"Minutes",n[i]=f+"Seconds",n[r]=f+"Milliseconds",n)[o],$=o===a?this.$D+(e-this.$W):e;if(o===c||o===h){var y=this.clone().set(d,1);y.$d[l]($),y.init(),this.$d=y.set(d,Math.min(this.$D,y.daysInMonth())).$d;}else l&&this.$d[l]($);return this.init(),this},m.set=function(t,e){return this.clone().$set(t,e)},m.get=function(t){return this[b.p(t)]()},m.add=function(r,f){var d,l=this;r=Number(r);var $=b.p(f),y=function(t){var e=O(l);return b.w(e.date(e.date()+Math.round(t*r)),l)};if($===c)return this.set(c,this.$M+r);if($===h)return this.set(h,this.$y+r);if($===a)return y(1);if($===o)return y(7);var M=(d={},d[s]=e,d[u]=n,d[i]=t,d)[$]||1,m=this.$d.getTime()+r*M;return b.w(m,this)},m.subtract=function(t,e){return this.add(-1*t,e)},m.format=function(t){var e=this,n=this.$locale();if(!this.isValid())return n.invalidDate||l;var r=t||"YYYY-MM-DDTHH:mm:ssZ",i=b.z(this),s=this.$H,u=this.$m,a=this.$M,o=n.weekdays,c=n.months,f=n.meridiem,h=function(t,n,i,s){return t&&(t[n]||t(e,r))||i[n].slice(0,s)},d=function(t){return b.s(s%12||12,t,"0")},$=f||function(t,e,n){var r=t<12?"AM":"PM";return n?r.toLowerCase():r};return r.replace(y,(function(t,r){return r||function(t){switch(t){case "YY":return String(e.$y).slice(-2);case "YYYY":return b.s(e.$y,4,"0");case "M":return a+1;case "MM":return b.s(a+1,2,"0");case "MMM":return h(n.monthsShort,a,c,3);case "MMMM":return h(c,a);case "D":return e.$D;case "DD":return b.s(e.$D,2,"0");case "d":return String(e.$W);case "dd":return h(n.weekdaysMin,e.$W,o,2);case "ddd":return h(n.weekdaysShort,e.$W,o,3);case "dddd":return o[e.$W];case "H":return String(s);case "HH":return b.s(s,2,"0");case "h":return d(1);case "hh":return d(2);case "a":return $(s,u,true);case "A":return $(s,u,false);case "m":return String(u);case "mm":return b.s(u,2,"0");case "s":return String(e.$s);case "ss":return b.s(e.$s,2,"0");case "SSS":return b.s(e.$ms,3,"0");case "Z":return i}return null}(t)||i.replace(":","")}))},m.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},m.diff=function(r,d,l){var $,y=this,M=b.p(d),m=O(r),v=(m.utcOffset()-this.utcOffset())*e,g=this-m,D=function(){return b.m(y,m)};switch(M){case h:$=D()/12;break;case c:$=D();break;case f:$=D()/3;break;case o:$=(g-v)/6048e5;break;case a:$=(g-v)/864e5;break;case u:$=g/n;break;case s:$=g/e;break;case i:$=g/t;break;default:$=g;}return l?$:b.a($)},m.daysInMonth=function(){return this.endOf(c).$D},m.$locale=function(){return D[this.$L]},m.locale=function(t,e){if(!t)return this.$L;var n=this.clone(),r=w(t,e,true);return r&&(n.$L=r),n},m.clone=function(){return b.w(this.$d,this)},m.toDate=function(){return new Date(this.valueOf())},m.toJSON=function(){return this.isValid()?this.toISOString():null},m.toISOString=function(){return this.$d.toISOString()},m.toString=function(){return this.$d.toUTCString()},M}(),k=_.prototype;return O.prototype=k,[["$ms",r],["$s",i],["$m",s],["$H",u],["$W",a],["$M",c],["$y",h],["$D",d]].forEach((function(t){k[t[1]]=function(e){return this.$g(e,t[0],t[1])};})),O.extend=function(t,e){return t.$i||(t(e,_,O),t.$i=true),O},O.locale=w,O.isDayjs=S,O.unix=function(t){return O(1e3*t)},O.en=D[g],O.Ls=D,O.p={},O})); 
+	} (dayjs_min$1));
+	return dayjs_min$1.exports;
+}
+
+var dayjs_minExports = requireDayjs_min();
+var dayjs = /*@__PURE__*/getDefaultExportFromCjs(dayjs_minExports);
+
+var customParseFormat$2 = {exports: {}};
+
+var customParseFormat$1 = customParseFormat$2.exports;
+
+var hasRequiredCustomParseFormat;
+
+function requireCustomParseFormat () {
+	if (hasRequiredCustomParseFormat) return customParseFormat$2.exports;
+	hasRequiredCustomParseFormat = 1;
+	(function (module, exports) {
+		!function(e,t){module.exports=t();}(customParseFormat$1,(function(){var e={LTS:"h:mm:ss A",LT:"h:mm A",L:"MM/DD/YYYY",LL:"MMMM D, YYYY",LLL:"MMMM D, YYYY h:mm A",LLLL:"dddd, MMMM D, YYYY h:mm A"},t=/(\[[^[]*\])|([-_:/.,()\s]+)|(A|a|Q|YYYY|YY?|ww?|MM?M?M?|Do|DD?|hh?|HH?|mm?|ss?|S{1,3}|z|ZZ?)/g,n=/\d/,r=/\d\d/,i=/\d\d?/,o=/\d*[^-_:/,()\s\d]+/,s={},a=function(e){return (e=+e)+(e>68?1900:2e3)};var f=function(e){return function(t){this[e]=+t;}},h=[/[+-]\d\d:?(\d\d)?|Z/,function(e){(this.zone||(this.zone={})).offset=function(e){if(!e)return 0;if("Z"===e)return 0;var t=e.match(/([+-]|\d\d)/g),n=60*t[1]+(+t[2]||0);return 0===n?0:"+"===t[0]?-n:n}(e);}],u=function(e){var t=s[e];return t&&(t.indexOf?t:t.s.concat(t.f))},d=function(e,t){var n,r=s.meridiem;if(r){for(var i=1;i<=24;i+=1)if(e.indexOf(r(i,0,t))>-1){n=i>12;break}}else n=e===(t?"pm":"PM");return n},c={A:[o,function(e){this.afternoon=d(e,false);}],a:[o,function(e){this.afternoon=d(e,true);}],Q:[n,function(e){this.month=3*(e-1)+1;}],S:[n,function(e){this.milliseconds=100*+e;}],SS:[r,function(e){this.milliseconds=10*+e;}],SSS:[/\d{3}/,function(e){this.milliseconds=+e;}],s:[i,f("seconds")],ss:[i,f("seconds")],m:[i,f("minutes")],mm:[i,f("minutes")],H:[i,f("hours")],h:[i,f("hours")],HH:[i,f("hours")],hh:[i,f("hours")],D:[i,f("day")],DD:[r,f("day")],Do:[o,function(e){var t=s.ordinal,n=e.match(/\d+/);if(this.day=n[0],t)for(var r=1;r<=31;r+=1)t(r).replace(/\[|\]/g,"")===e&&(this.day=r);}],w:[i,f("week")],ww:[r,f("week")],M:[i,f("month")],MM:[r,f("month")],MMM:[o,function(e){var t=u("months"),n=(u("monthsShort")||t.map((function(e){return e.slice(0,3)}))).indexOf(e)+1;if(n<1)throw new Error;this.month=n%12||n;}],MMMM:[o,function(e){var t=u("months").indexOf(e)+1;if(t<1)throw new Error;this.month=t%12||t;}],Y:[/[+-]?\d+/,f("year")],YY:[r,function(e){this.year=a(e);}],YYYY:[/\d{4}/,f("year")],Z:h,ZZ:h};function l(n){var r,i;r=n,i=s&&s.formats;for(var o=(n=r.replace(/(\[[^\]]+])|(LTS?|l{1,4}|L{1,4})/g,(function(t,n,r){var o=r&&r.toUpperCase();return n||i[r]||e[r]||i[o].replace(/(\[[^\]]+])|(MMMM|MM|DD|dddd)/g,(function(e,t,n){return t||n.slice(1)}))}))).match(t),a=o.length,f=0;f<a;f+=1){var h=o[f],u=c[h],d=u&&u[0],l=u&&u[1];o[f]=l?{regex:d,parser:l}:h.replace(/^\[|\]$/g,"");}return function(e){for(var t={},n=0,r=0;n<a;n+=1){var i=o[n];if("string"==typeof i)r+=i.length;else {var s=i.regex,f=i.parser,h=e.slice(r),u=s.exec(h)[0];f.call(t,u),e=e.replace(u,"");}}return function(e){var t=e.afternoon;if(void 0!==t){var n=e.hours;t?n<12&&(e.hours+=12):12===n&&(e.hours=0),delete e.afternoon;}}(t),t}}return function(e,t,n){n.p.customParseFormat=true,e&&e.parseTwoDigitYear&&(a=e.parseTwoDigitYear);var r=t.prototype,i=r.parse;r.parse=function(e){var t=e.date,r=e.utc,o=e.args;this.$u=r;var a=o[1];if("string"==typeof a){var f=true===o[2],h=true===o[3],u=f||h,d=o[2];h&&(d=o[2]),s=this.$locale(),!f&&d&&(s=n.Ls[d]),this.$d=function(e,t,n,r){try{if(["x","X"].indexOf(t)>-1)return new Date(("X"===t?1e3:1)*e);var i=l(t)(e),o=i.year,s=i.month,a=i.day,f=i.hours,h=i.minutes,u=i.seconds,d=i.milliseconds,c=i.zone,m=i.week,M=new Date,Y=a||(o||s?1:M.getDate()),p=o||M.getFullYear(),v=0;o&&!s||(v=s>0?s-1:M.getMonth());var D,w=f||0,g=h||0,y=u||0,L=d||0;return c?new Date(Date.UTC(p,v,Y,w,g,y,L+60*c.offset*1e3)):n?new Date(Date.UTC(p,v,Y,w,g,y,L)):(D=new Date(p,v,Y,w,g,y,L),m&&(D=r(D).week(m).toDate()),D)}catch(e){return new Date("")}}(t,a,r,n),this.init(),d&&true!==d&&(this.$L=this.locale(d).$L),u&&t!=this.format(a)&&(this.$d=new Date("")),s={};}else if(a instanceof Array)for(var c=a.length,m=1;m<=c;m+=1){o[1]=a[m-1];var M=n.apply(this,o);if(M.isValid()){this.$d=M.$d,this.$L=M.$L,this.init();break}m===c&&(this.$d=new Date(""));}else i.call(this,e);};}})); 
+	} (customParseFormat$2));
+	return customParseFormat$2.exports;
+}
+
+var customParseFormatExports = requireCustomParseFormat();
+var customParseFormat = /*@__PURE__*/getDefaultExportFromCjs(customParseFormatExports);
+
+const inputDateCss = ":host{display:inline-flex;flex-direction:column;vertical-align:top;--r-label--margin-bottom:0}:host slot{display:contents}:host([readonly]:not([readonly=false])){--r-input-date--container--background-color:var(--r-background-soft, #f3f1f0);--r-input-date--container--border-color:transparent transparent var(--r-border-soft, #686868) transparent;--r-input-date--container--cursor:text}:host(:hover:not([disabled]:not([disabled=false])):not([readonly]:not([readonly=false]))){--r-input-date--container--background-color:var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04))}:host(:active:not([disabled]:not([disabled=false])):not([readonly]:not([readonly=false]))){--r-input-date--container--background-color:var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12))}:host([full-width]:not([full-width=false])){display:flex}:host([disabled]:not([disabled=false])){cursor:not-allowed;--r-input-date--container--opacity:0.4;--r-input-date--container--cursor:not-allowed;--r-input-date--container--pointer-events:none;--r-input-date--container--background-color:transparent}:host([invalid]:not([invalid=false])){--r-input-date--container--border-color:var(--r-status-error-regular, #b00c15);--r-input-date--container--background-color:var(--r-status-error-soft, #fef6f6)}.r-input-date{padding:var(--r-input-date--padding, 0);margin:var(--r-input-date--margin, 0);border:var(--r-input-date--border, none)}.r-input-date--legend-container{display:var(--r-input-date--legend-container--display, flex);gap:var(--r-input-date--legend-container--gap, var(--r-spacing-100, 1rem));align-items:var(--r-input-date--legend-container--align-items, center);justify-content:var(--r-input-date--label-container--align-items, space-between)}.r-input-date--legend-container ::slotted([slot=popover]){display:var(--r-input-date--popover--display, inline-flex);height:var(--r-input-date--popover--height, var(--r-spacing-150, 1.5));align-items:var(--r-input-date--popover--align-items, center);justify-content:var(--r-input-date--popover--justify-content, center);margin-right:var(--r-input-date--popover--margin-right, -0.25rem);--r-popover--trigger--min-width:var(--r-input-date--popover-trigger--min-width, var(--r-spacing-150, 1.5));--r-popover--trigger--min-height:var(--r-input-date--popover--trigger--min-height, var(--r-spacing-150, 1.5))}.r-input-date--legend{padding:var(--r-input-date--label--padding, 0)}.r-input-date--container{position:var(--r-input-date--container--position, relative);display:var(--r-input-date--container--display, flex);align-items:var(--r-input-date--container--align-items, center);height:var(--r-input-date--container--height, var(--r-spacing-275, 2.75rem));font-family:var(--r-input-date--container--font-family, var(--r-font-family-text, system-ui));background-color:var(--r-input-date--container--background-color, var(--r-background-softest, #fff));border-width:var(--r-input-date--container--border-width, 1px);border-style:var(--r-input-date--container--border-style, solid);border-color:var(--r-input-date--container--border-color, var(--r-border-soft, #686868));box-sizing:var(--r-input-date--container--box-sizing, border-box);box-shadow:var(--r-input-date--container--box-shadow, none);outline:var(--r-input-date--container--outline, none);outline-offset:var(--r-input-date--container--outline-offset, 0);padding-right:var(--r-input-date--container--padding-right, 0.7em);padding-left:var(--r-input-date--container--padding-left, 0.7em);opacity:var(--r-input-date--container--opacity, 1);pointer-events:var(--r-input-date--container--pointer-events, auto);cursor:var(--r-input-date--container--cursor, inherit);margin-top:var(--r-input-date--container--margin-top, var(--r-spacing-025, 0.25rem));gap:var(--r-input-date--leading--gap, 0.625rem)}.r-input-date--container:has(input:focus-within){--r-input-date--container--box-shadow:0 0 0 6px var(--r-border-focused-outlined);--r-input-date--container--outline:2px solid var(--r-border-focused);--r-input-date--container--outline-offset:2px}.r-input-date--calendar-icon{color:var(--r-input-date--leading--color, var(--r-icon-soft, #686868))}.r-input-date--inputs{display:var(--r-input-date--inputs--display, flex);align-items:var(--r-input-date--inputs--align-items, center)}.r-input-date--input{max-width:var(--r-input-date--input--max-width, 2.625rem);field-sizing:var(--r-input-date--input--field-sizing, content);outline:var(--r-input-date--input--outline, none);height:var(--r-input-date--input--height, 100%);font-family:var(--r-input-date--input--font-family, inherit);font-size:var(--r-input-date--input--font-size, var(--r-font-size-400, 1rem));background-color:var(--r-input-date--input--background-color, transparent);border:var(--r-input-date--input--border, none);padding:var(--r-input-date--input--padding, 0)}.r-input-date--input[data-date-type=DD]{--r-input-date--input--max-width:1.5rem}.r-input-date--input[data-date-type=MM]{--r-input-date--input--max-width:1.75rem}.r-input-date--delimiter{padding-inline:var(--r-input-date--delimiter--padding-inline, var(--r-spacing-025, 0.25rem));margin-top:var(--r-input-date--delimiter--margin-top, -0.25rem);color:var(--r-input-date--delimiter--color, var(--r-border-regular, #282828));font-size:var(--r-input-date--delimiter--font-size, var(--r-spacing-150, 1.5rem));font-weight:var(--r-input-date--delimiter--font-weight, 200)}.r-input-date--message{margin-top:var(--r-input-date--message--margin-top, var(--r-spacing-025, 0.25rem))}.r-input-date--message:empty{--r-input-date--message--margin-top:0}.r-input-date--trailing{display:var(--r-input-date--trailing--display, flex);margin-left:var(--r-input-date--trailing--margin-left, auto);align-items:var(--r-input-date--trailing--align-items, center);gap:var(--r-input-date--trailing--gap, 0.625rem)}.r-input-date--readonly-icon{color:var(--r-input-date--readonly-icon--color, var(--r-icon-soft, #686868))}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}";
+
+const InputDate = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.rValidate = createEvent(this, "rValidate");
+        this.rInput = createEvent(this, "rInput");
+        this.rChange = createEvent(this, "rChange");
+        this.rReset = createEvent(this, "rReset");
+        /** Specifies a date format */
+        this.format = 'DD/MM/YYYY';
+        /** The value of the date input */
+        this.value = '';
+        /** Defines label for the input for the day */
+        this.dayAriaLabel = 'Day';
+        /** Defines label for the input for the month */
+        this.monthAriaLabel = 'Month';
+        /** Defines label for the input for the year */
+        this.yearAriaLabel = 'Year';
+        /** Save current value */
+        this.currentValues = {};
+        /** Defines date delimiter */
+        this.delimiter = '/';
+        /** Validity state passed from validateFormElement function after validation */
+        this.validityState = '';
+        /** Validity message passed from validateFormElement function after validation */
+        this.validityMessage = '';
+        /** Defines if the component has been touched by user */
+        this.touched = false;
+        /** Defines if the value has been changed by user interaction */
+        this.dirty = false;
+        /**
+         * Initial attributes state
+         * */
+        this.initial = {};
+        this.uniqueId = `r-input-date-${Date.now().toString(32)}${Math.random().toString(32)}`.replace(/\./g, '');
+        this.nativeElement = null;
+        this.getDateComponent = (input) => {
+            switch (input.toUpperCase()) {
+                case 'DD':
+                    return this.currentValues.day;
+                case 'MM':
+                case 'M':
+                    return this.currentValues.month;
+                case 'YYYY':
+                case 'YY':
+                    return this.currentValues.year;
+                default:
+                    return '';
+            }
+        };
+        this.setDateComponent = (input, value) => {
+            switch (input.toUpperCase()) {
+                case 'DD':
+                    this.currentValues.day = value;
+                    break;
+                case 'MM':
+                case 'M':
+                    this.currentValues.month = value;
+                    break;
+                case 'YYYY':
+                case 'YY':
+                    this.currentValues.year = value;
+                    break;
+                default:
+                    return '';
+            }
+        };
+        this.getInputAttrs = (input) => {
+            const label = (type) => {
+                switch (type) {
+                    case 'DD':
+                        return this.dayAriaLabel;
+                    case 'MM':
+                    case 'M':
+                        return this.monthAriaLabel;
+                    case 'YYYY':
+                    case 'YY':
+                        return this.yearAriaLabel;
+                    default:
+                        return '';
+                }
+            };
+            const type = input.toUpperCase();
+            return {
+                placeholder: input,
+                maxlength: input.length > 2 ? input.length : 2,
+                size: input.length,
+                inputmode: 'numeric',
+                disabled: this.disabled,
+                required: this.required,
+                readonly: this.readonly,
+                'aria-label': label(type),
+                'data-date-type': type
+            };
+        };
+        this.getDelimiter = (value) => {
+            var _a;
+            return ((_a = value.replace(/[^.\-/]/g, '')) === null || _a === void 0 ? void 0 : _a.charAt(0)) || '/';
+        };
+        this.updateValue = () => {
+            if (this.readonly)
+                return;
+            this.delimiter = this.getDelimiter(this.format);
+            this.value = this.value ? this.inputOrder.map((input) => this.getDateComponent(input)).join(this.delimiter) : '';
+        };
+        this.onHostClick = () => {
+            const input = this.firstEmptyInput || this.inputs[this.inputs.length - 1];
+            input === null || input === void 0 ? void 0 : input.focus();
+        };
+        this.onInputClick = (event) => {
+            event.stopPropagation();
+        };
+        this.createKeyDownHandler = (index) => {
+            return (e) => this.handleKeyDown(index, e);
+        };
+        this.handleKeyDown = (index, event) => {
+            var _a, _b, _c, _d, _e, _f;
+            if (this.readonly)
+                return;
+            if (event.code === 'Enter') {
+                this.touched = true;
+                this.validateFormElement(this.nativeElement);
+                if (this.invalid && !this.isNoValidate)
+                    return;
+                const submitEl = this.host.querySelector('[type="submit"]') ||
+                    ((_a = this.parentFormEl) === null || _a === void 0 ? void 0 : _a.querySelector('[type="submit"]'));
+                if (submitEl && 'triggerClick' in submitEl) {
+                    submitEl === null || submitEl === void 0 ? void 0 : submitEl.triggerClick();
+                }
+                else {
+                    (_b = this.parentFormEl) === null || _b === void 0 ? void 0 : _b.requestSubmit();
+                }
+            }
+            if (event.code === 'Backspace') {
+                const cursorPosition = (_c = this.inputs[index]) === null || _c === void 0 ? void 0 : _c.selectionStart;
+                if (cursorPosition === 0 && index > 0) {
+                    (_d = this.inputs[index - 1]) === null || _d === void 0 ? void 0 : _d.focus();
+                }
+            }
+            if (event.code === 'ArrowLeft') {
+                const input = this.inputs[index];
+                const cursorPosition = input === null || input === void 0 ? void 0 : input.selectionStart;
+                if (cursorPosition === 0 && index > 0) {
+                    const previousInputValue = this.inputs[index - 1].value;
+                    const length = previousInputValue === null || previousInputValue === void 0 ? void 0 : previousInputValue.length;
+                    (_e = this.inputs[index - 1]) === null || _e === void 0 ? void 0 : _e.focus();
+                    if (length) {
+                        setTimeout(() => {
+                            var _a;
+                            (_a = this.inputs[index - 1]) === null || _a === void 0 ? void 0 : _a.setSelectionRange(length, length);
+                        }, 0);
+                    }
+                }
+            }
+            if (event.code === 'ArrowRight') {
+                const input = this.inputs[index];
+                const cursorPosition = input === null || input === void 0 ? void 0 : input.selectionStart;
+                const value = input === null || input === void 0 ? void 0 : input.value;
+                if ((!value || cursorPosition === value.length) && index < this.inputOrder.length - 1) {
+                    (_f = this.inputs[index + 1]) === null || _f === void 0 ? void 0 : _f.focus();
+                    setTimeout(() => {
+                        var _a;
+                        (_a = this.inputs[index + 1]) === null || _a === void 0 ? void 0 : _a.setSelectionRange(0, 0);
+                    }, 0);
+                }
+            }
+        };
+        this.handlePaste = (event) => {
+            if (this.readonly)
+                return;
+            this.value = event.clipboardData.getData('text');
+            this.touched = true;
+            this.dirty = true;
+            event.preventDefault();
+        };
+        this.createInputHandler = (input, index) => {
+            return (e) => this.handleInput(input, index, e);
+        };
+        this.handleInput = (input, index, event) => {
+            var _a, _b, _c;
+            if (this.readonly)
+                return;
+            const value = (_a = event.target.value) === null || _a === void 0 ? void 0 : _a.replace(/[^0-9]/g, '');
+            event.target.value = value;
+            this.setDateComponent(input, value);
+            this.value = this.inputOrder.map((el) => this.getDateComponent(el)).join(this.delimiter);
+            if ((value === null || value === void 0 ? void 0 : value.length) === ((_b = this.inputs[index]) === null || _b === void 0 ? void 0 : _b.maxLength) &&
+                index < this.inputOrder.length - 1) {
+                (_c = this.inputs[index + 1]) === null || _c === void 0 ? void 0 : _c.focus();
+            }
+            this.touched = true;
+            this.dirty = true;
+            this.rInput.emit({ element: this.host, value: this.value });
+            this.validateFormElement(this.nativeElement);
+        };
+        this.createChangeHandler = (input) => {
+            return (e) => this.handleChange(input, e);
+        };
+        this.handleChange = (input, event) => {
+            var _a;
+            if (this.readonly)
+                return;
+            const value = (_a = event.target.value) === null || _a === void 0 ? void 0 : _a.replace(/[^0-9]/g, '');
+            event.target.value = value;
+            this.setDateComponent(input, value);
+            this.value = this.inputOrder.map((el) => this.getDateComponent(el)).join(this.delimiter);
+            this.touched = true;
+            this.dirty = true;
+            this.rChange.emit({ element: this.host, value: this.value });
+            this.validateFormElement(this.nativeElement);
+        };
+        this.handleBlur = () => {
+            this.touched = true;
+            this.validateFormElement(this.nativeElement);
+        };
+        this.getValidityStateData = (element) => {
+            let validityState = '';
+            let validityMessage = '';
+            if (this.required && element.value.length === 0) {
+                validityState = 'valueMissing';
+                validityMessage = this.valueMissingMessage;
+                return { validityState, validityMessage };
+            }
+            const valid = this.value ? dayjs(this.value, this.format, true).isValid() : true;
+            if (!valid) {
+                validityState = 'invalid';
+                validityMessage = this.invalidDateMessage;
+                return { validityState, validityMessage };
+            }
+            // Check min/max constraints only if date is valid and has a value
+            // Note: min and max are expected to be in the same format as this.format
+            // If format changes, the developer should update min/max accordingly
+            if (this.value && valid) {
+                const currentDate = dayjs(this.value, this.format, true);
+                // Check minimum date constraint
+                if (this.min) {
+                    const minDate = dayjs(this.min, this.format, true);
+                    if (minDate.isValid() && currentDate.isBefore(minDate, 'day')) {
+                        validityState = 'rangeUnderflow';
+                        validityMessage = this.rangeUnderflowMessage;
+                        return { validityState, validityMessage };
+                    }
+                }
+                // Check maximum date constraint
+                if (this.max) {
+                    const maxDate = dayjs(this.max, this.format, true);
+                    if (maxDate.isValid() && currentDate.isAfter(maxDate, 'day')) {
+                        validityState = 'rangeOverflow';
+                        validityMessage = this.rangeOverflowMessage;
+                        return { validityState, validityMessage };
+                    }
+                }
+            }
+            validityState = 'valid';
+            return { validityState, validityMessage };
+        };
+        this.validateFormElement = (element) => {
+            if (element === null)
+                return;
+            if (this.isNoValidate)
+                return;
+            const { validityState, validityMessage } = this.getValidityStateData(element);
+            this.validityState = validityState;
+            this.validityMessage = validityMessage;
+            const isValid = this.validityState === 'valid';
+            this.valid = isValid;
+            this.invalid = !isValid;
+            this.rValidate.emit({
+                state: this.validityState,
+                message: this.validityMessage
+            });
+        };
+        this.onResetForm = async () => {
+            if (this.readonly)
+                return;
+            this.reset();
+            this.validityState = null;
+            this.validityMessage = null;
+            this.invalid = null;
+            this.valid = null;
+            const { host, value } = this;
+            this.rReset.emit({ element: host, value });
+        };
+        this.onSubmitForm = (event) => {
+            if (this.isNoValidate)
+                return;
+            if (this.disabled)
+                return;
+            this.validateFormElement(this.nativeElement);
+            if (this.invalid) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        };
+        this.contributeToFormData = (event) => {
+            appendControlToFormData(this.nativeElement || this.host, event.formData);
+        };
+        this.setCurrentValues = () => {
+            var _a;
+            const valueDelimiter = this.getDelimiter(this.value);
+            const valueInOrder = ((_a = this.value) === null || _a === void 0 ? void 0 : _a.split(valueDelimiter)) || [];
+            this.value = valueInOrder.join(this.delimiter);
+            this.inputOrder.forEach((el, i) => {
+                this.setDateComponent(el, valueInOrder[i] || '');
+            });
+        };
+    }
+    handleFormatChange() {
+        this.updateValue();
+    }
+    handleValueChange() {
+        this.setCurrentValues();
+        if (this.touched)
+            this.validateFormElement(this.nativeElement);
+    }
+    /** Get the date value */
+    async getValue() {
+        return this.value;
+    }
+    /** Sets the date value */
+    async setValue(value) {
+        this.nativeElement.value = value;
+        this.value = value;
+    }
+    /** Gets the current date format */
+    async getFormat() {
+        return this.format;
+    }
+    /** Sets the date format */
+    async setFormat(format) {
+        this.format = format;
+    }
+    /** Gets the touched state (whether user has interacted with the input) */
+    async isTouched() {
+        return this.touched;
+    }
+    /** Gets the dirty state (whether value has been changed by user) */
+    async isDirty() {
+        return this.dirty;
+    }
+    /** Resets touched and dirty states to pristine (untouched/clean) */
+    async markAsPristine() {
+        this.touched = false;
+        this.dirty = false;
+    }
+    /**
+     * Resets the component by clearing all input values and focusing the first input.
+     * @returns Promise that resolves when reset is complete
+     */
+    async reset() {
+        if (this.readonly)
+            return;
+        this.markAsPristine();
+        this.validityState = null;
+        this.validityMessage = null;
+        this.value = this.initial['value'];
+        this.invalid = this.initial['invalid'];
+        this.format = this.initial['format'];
+        this.valid = !this.invalid;
+    }
+    /** Validates an element, displays provided message in case value is invalid. */
+    async setCustomValidity(message) {
+        this.customErrorMessage = message;
+        this.validateFormElement(this.nativeElement);
+    }
+    /**
+     * Validates the input date without triggering UI and returns a boolean indicating its validity.
+     * @returns A boolean indicating whether the input date is valid.
+     */
+    async checkValidity() {
+        const { validityState } = this.getValidityStateData(this.nativeElement);
+        return validityState === 'valid';
+    }
+    get inputs() {
+        return Array.from(this.host.shadowRoot.querySelectorAll('input[data-date-type]'));
+    }
+    get inputOrder() {
+        return this.format.split(this.delimiter);
+    }
+    get message() {
+        if (this.invalid && this.error) {
+            return this.error;
+        }
+        return (this.validityState && this.validityState !== 'valid' ?
+            (this.customErrorMessage || this.validityMessage)
+            : null);
+    }
+    get hasMessage() {
+        return this.message !== null;
+    }
+    get ariaDescribedBy() {
+        const messageId = this.message ? `${this.uniqueId}-message` : null;
+        return this.hint ? `${this.uniqueId}-hint ${messageId}` : messageId;
+    }
+    /** Identify wrapping form element */
+    get parentFormEl() {
+        return this.host.closest('form') || document.querySelector(`#${this.form}`) || null;
+    }
+    /**
+     * Determine whether this element should be ignored
+     * during Constraint Validation API validation.
+     * */
+    get isNoValidate() {
+        var _a;
+        return (((_a = this.parentFormEl) === null || _a === void 0 ? void 0 : _a.hasAttribute('novalidate')) ||
+            this.novalidate ||
+            this.disabled ||
+            false);
+    }
+    get firstEmptyInput() {
+        return this.inputs.find(input => !input.value) || null;
+    }
+    get hasTrailingSlot() {
+        return !!this.host.querySelector('[slot="trailing"]');
+    }
+    componentWillLoad() {
+        dayjs.extend(customParseFormat);
+        this.delimiter = this.getDelimiter(this.format);
+        this.initial['value'] = this.value;
+        this.initial['invalid'] = this.invalid;
+        this.initial['format'] = this.format;
+        this.setCurrentValues();
+    }
+    connectFormEventListeners() {
+        var _a, _b, _c;
+        (_a = this.parentFormEl) === null || _a === void 0 ? void 0 : _a.addEventListener('formdata', this.contributeToFormData);
+        (_b = this.parentFormEl) === null || _b === void 0 ? void 0 : _b.addEventListener('submit', this.onSubmitForm, { capture: true });
+        (_c = this.parentFormEl) === null || _c === void 0 ? void 0 : _c.addEventListener('reset', this.onResetForm);
+    }
+    disconnectFormEventListeners() {
+        var _a, _b, _c;
+        (_a = this.parentFormEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('formdata', this.contributeToFormData);
+        (_b = this.parentFormEl) === null || _b === void 0 ? void 0 : _b.removeEventListener('submit', this.onSubmitForm);
+        (_c = this.parentFormEl) === null || _c === void 0 ? void 0 : _c.removeEventListener('reset', this.onResetForm);
+    }
+    connectedCallback() {
+        this.connectFormEventListeners();
+    }
+    disconnectedCallback() {
+        this.disconnectFormEventListeners();
+    }
+    render() {
+        const { form, name, required, disabled, label, fieldIndicator, hint, uniqueId, invalid, valid, readonly } = this;
+        const groupAttrs = {
+            'aria-invalid': `${invalid || false}`,
+            'aria-describedby': this.ariaDescribedBy
+        };
+        const dateInputAttrs = {
+            id: uniqueId,
+            form,
+            name,
+            required,
+            disabled,
+            readonly,
+            'aria-describedby': this.ariaDescribedBy
+        };
+        const labelAttr = label ? {
+            id: `${uniqueId}-label`,
+            fieldIndicator
+        } : {};
+        return (h(Host, { key: 'e8d5144a4cefeca243ea6e80840e4ff12b9344f0', onClick: this.onHostClick, "data-touched": `${this.touched}`, "data-dirty": `${this.dirty}` }, h("fieldset", Object.assign({ key: '417cac30b7b535e7367eef280732869cdd984ed1', class: "r-input-date" }, groupAttrs), h("div", { key: 'd7ef5eb79c96c0d8845399e536c356272ab7c03c', class: "r-input-date--legend-container" }, h("legend", { key: '14c195899fb789333bbd07a40ec1db746d004839', class: "r-input-date--legend" }, h("label", { key: 'f6ac0e10142bceefe404a385ac44534d81ae3f98', htmlFor: uniqueId }, label ?
+            h("r-label", Object.assign({}, labelAttr), label)
+            :
+                h("slot", { name: "label" }))), h("slot", { key: 'b3bb261cb82002f7c41470bb9ca09110c6f7a345', name: "popover" })), hint &&
+            h("r-hint", { key: '606d8d0f83416914627b23f901838c55f65b6adc', id: `${uniqueId}-hint`, role: "note" }, hint), h("div", { key: '46ca5170c4eafd18464dd7575ab41263907e2116', class: "r-input-date--container" }, h("r-icon", { key: '488dc02a12c354dc9fdd5d814b2c63dbd080175f', name: "calendar", size: "s", class: "r-input-date--calendar-icon" }), h("div", { key: '69ef56323ea2c1d90121dc280cb2072701558064', class: "r-input-date--inputs" }, this.inputOrder.map((input, i) => (h(Fragment, null, h("input", Object.assign({ class: "r-input-date--input" }, this.getInputAttrs(input), { key: input, value: this.getDateComponent(input), onInput: this.createInputHandler(input, i), onChange: this.createChangeHandler(input), onClick: this.onInputClick, onBlur: this.handleBlur, onKeyDown: this.createKeyDownHandler(i), onPaste: this.handlePaste })), i < this.inputOrder.length - 1 &&
+            h("span", { "aria-hidden": "true", class: "r-input-date--delimiter" }, this.delimiter)))), h("input", Object.assign({ key: '918cf85992a45287c77df5f937f82d0f6f316bf1', type: "hidden" }, dateInputAttrs, { value: this.value, ref: (el) => this.nativeElement = el }))), h("div", { key: '57dbce64441410f59571417fce01213af7ee146f', class: "r-input-date--trailing" }, this.readonly &&
+            h("r-icon", { key: 'e60109ba459f42e391a972cd7fdbd9fba134244f', class: "r-input-date--readonly-icon", name: "pen-disabled", size: "s" }), valid &&
+            h("r-icon", { key: '0c5af571965830bffdb226d94e4d2a2f4a158553', name: "circled-check", size: "s", color: "var(--r-status-success-regular)" }), this.hasTrailingSlot && h("slot", { key: '2b3836138862a6b6538aa75ddc2929b63f85667e', name: "trailing" }))), h("div", { key: 'd07f45f25bd1c6ad19f7feacf24cab515c40aa01', id: `${uniqueId}-message`, "aria-live": "polite", class: "r-input-date--message" }, this.hasMessage && h("r-hint", { key: '7974223f426574a5b6a54bbf773007475dfb6450', variant: "error" }, this.message)))));
+    }
+    get host() { return getElement(this); }
+    static get watchers() { return {
+        "format": ["handleFormatChange"],
+        "value": ["handleValueChange"]
+    }; }
+};
+InputDate.style = inputDateCss;
+
+export { InputDate as r_input_date };