@descope/web-components-ui 1.0.380 → 1.0.381

package/dist/umd/descope-date-field-index-js.js

@@ -1 +1 @@
-"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[5709],{66194:(e,t,i)=>{i.r(t),i.d(t,{DateFieldClass:()=>I}),i(85079),i(8467),i(19357),i(72449);var r=i(73878),n=i(94978),o=i(54567),a=i(2061),s=i(52763),l=i(82050);const p={MM:"(0?[1-9]|1[0-2])",DD:"(0?[1-9]|[12][0-9]|3[01])",YYYY:"([0-9]{4})"},d=e=>{const t=(e=>`^${e.split(l.d).map((e=>p[e])).join("\\D")}$`)(e),i=(e=>{const t=e.split(l.d);return e=>{const i={};return t.forEach(((t,r)=>{i[t]=e[r+1]})),[i.YYYY,i.MM,i.DD]}})(e),r=new RegExp(t);return{pattern:t,validate:e=>r.test(e),getDate:e=>((e,t,i)=>{const r=t.exec(e);if(!r)return null;const[n,o,a]=i(r);return(0,s.D3)([n,o,a].join(l.d))})(e,r,i)}},h=Object.fromEntries(l.zb.map((e=>[e,d(e)])));var u=i(63359);class c{constructor({id:e,min:t,max:i,placeholder:r}){this.id=e,this.data=[],this.min=t,this.max=i,this.placeholder=r}get#e(){return this.data.length?this.numberValue:0}get numberValue(){return Number(this.stringValue)}get stringValue(){return(this.data.join("")||this.placeholder).padStart(this.length,"0")}get isFull(){return 10*this.numberValue>this.max||this.data.length===this.length}get isEmpty(){return this.stringValue===this.placeholder}get length(){return this.max.toString().length}set(e){this.data=e.toString().split("")}add(e){return this.data.push(e),this.numberValue>this.max?(this.data.length=0,this.data.push(e)):this.length<this.data.length&&this.data.shift(),e}del(){this.data.filter((e=>"0"!==e)).filter(Boolean).length?this.data.pop():this.data.length=0}clear(){this.data=[]}inc(e){this.replaceValue(this.#e+(e||1))}dec(e){this.replaceValue(this.#e-(e||1))}isInRange(e){return e>=this.min&&e<=this.max}replaceValue(e){this.isInRange(e)&&(this.data=e.toString().padStart(this.length,0).split(""))}}const y=(0,o.iY)("date-field"),g=(0,r.P)({componentName:y,baseSelector:"vaadin-popover"}),v=["format","opened","initial-value"],m=["years-range","calendar-months","calendar-weekdays"],b=[...v,...m],{host:C,input:f,toggleButton:x,overlayAnchor:w,overlayAnchorRTL:E,overlay:k,backdrop:P}={host:{selector:()=>":host"},input:{selector:()=>"descope-text-field"},toggleButton:{selector:()=>".toggle-calendar"},overlayAnchor:{selector:()=>":host .overlay-position-anchor"},overlayAnchorRTL:{selector:':host([st-host-direction="rtl"]) .overlay-position-anchor'},overlay:{selector:"vaadin-popover-overlay::part(overlay)"},backdrop:{selector:"vaadin-popover-overlay::part(backdrop)"}},I=(0,a.qC)((0,n.yk)({componentNameOverride:(0,o.iY)("input-wrapper")}),(0,n.yk)({mappings:{iconMargin:{...x,property:"margin-inline-end"},hostWidth:{...C,property:"width"},hostDirection:{...C,property:"direction"},textAlign:{...f,property:"text-align"},overlayAnchorPos:[{...w,property:"right"},{...E,property:"left"}],overlayGap:{property:()=>I.cssVarList.overlayGap},overlayBackgroundColor:{property:()=>I.cssVarList.overlayBackgroundColor},overlayPadding:{property:()=>I.cssVarList.overlayPadding},overlayBoxShadow:{property:()=>I.overlayBoxShadow},overlayOutlineWidth:{property:()=>I.cssVarList.overlayOutlineWidth},overlayOutlineColor:{property:()=>I.cssVarList.overlayOutlineColor},overlayOutlineStyle:{property:()=>I.cssVarList.overlayOutlineStyle}}}),(0,n.Iw)({name:"overlay",selector:"",mappings:{marginTop:{...k,property:"margin-top"},backgroundColor:{...k},backdropBackgroundColor:{...P,property:"background-color"},backdropPointerEvents:{...P,property:"pointer-events"},padding:{...k},boxShadow:{...k},outlineWidth:{...k},outlineColor:{...k},outlineStyle:{...k}}}),n.e4,n.Ae)(class extends g{timestamp="";format=l.UP;selectedCounterIdx=0;dateCounters=[new c(l.K3.MONTH),new c(l.K3.DAY),new c(l.K3.YEAR)];static get observedAttributes(){return[].concat(g.observedAttributes||[],b)}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML=`\n    <style>\n      :host {\n        display: inline-block;\n        box-sizing: border-box;\n        user-select: none;\n        max-width: 100%;\n      }\n\n      :host ::slotted {\n        padding: 0;\n      }\n\n      .toggle-calendar {\n        cursor: pointer;\n        display: flex;\n        align-self: center;\n        z-index: 1;\n      }\n\n      descope-text-field .overlay-position-anchor {\n        position: absolute;\n        height: 100%;\n        width: 0;\n        z-index: 1;\n        pointer-events: none;\n      }\n    </style>\n    <div>\n      <descope-text-field>\n        <span slot="prefix" class="overlay-position-anchor"></span>\n        <span slot="suffix" class="toggle-calendar">\n          <descope-icon>${u.CH}</descope-icon>\n        </span>\n      </descope-text-field>\n      <vaadin-popover></vaadin-popover>\n    </div>\n    `,this.inputElement=this.shadowRoot.querySelector("descope-text-field"),this.popoverToggleButton=this.inputElement.querySelector(".toggle-calendar"),this.overlayPositionAnchor=this.inputElement.querySelector(".overlay-position-anchor"),this.oninvalid=()=>{this.inputElement.setAttribute("invalid","true"),this.inputElement.focus()}}get opened(){return"true"===this.getAttribute("opened")}get inputValueTimestamp(){const e=h[this.format].getDate(this.inputElement.value);return(0,s.HP)(e?.getTime())?e.getTime():null}get sortedCounters(){return this.format.split(l.d).map((e=>this.dateCounters.find((t=>t.placeholder===e))))}get activeCounter(){return this.sortedCounters[this.selectedCounterIdx]}get countersValue(){return this.sortedCounters.map((e=>e.stringValue)).join(l.d)}get overlay(){return this.baseElement.shadowRoot?.querySelector("vaadin-popover-overlay")}get backdrop(){return this.overlay.shadowRoot?.querySelector("#backdrop")}get calendar(){return this.overlay?.querySelector("descope-calendar")}get value(){return this.timestamp}set value(e){if(!e)return;const t=Number(e);let i,r;Number.isNaN(t)?(i=(0,s.D3)(e),r=i.getTime()):(i=(0,s.D3)(t),r=t),(0,s.HP)(r)&&r!==this.timestamp&&(this.timestamp=r,this.updateInputDisplay(),this.updateDateCounters(i),this.dispatchEvent(new Event("input")))}updateInputDisplay(){this.inputElement.value=(0,s.i$)((0,s.D3)(this.value).getTime(),this.format)}init(){super.init?.(),this.updateFormatPattern(),this.initPopover(),this.initInputElement(),setTimeout((()=>{this.#t()}),0)}initInputElement(){this.popoverToggleButton.addEventListener("click",this.onPopoverToggle.bind(this)),this.inputElement.addEventListener("focus",this.onFocus.bind(this)),this.inputElement.addEventListener("blur",this.onBlur.bind(this)),this.inputElement.addEventListener("input",this.onInput.bind(this)),this.inputElement.addEventListener("click",this.handleMouseCaretPositionChange.bind(this)),this.inputElement.addEventListener("keydown",this.handleKeyDownValueChange.bind(this)),this.inputElement.addEventListener("keydown",this.handleKeydownCaretPositionChange.bind(this)),this.inputElement.addEventListener("keydown",this.handleValueChange.bind(this)),(0,o.oP)(this,this.inputElement,{includeAttrs:["label","label-type","placeholder","disabled","readonly","bordered","required","full-width","st-host-direction","pattern","invalid","bordered"]})}initPopover(){this.baseElement.target=this.overlayPositionAnchor,this.baseElement.trigger=["click"],this.baseElement.withBackdrop=!0,this.baseElement.noCloseOnOutsideClick=!0,this.baseElement.renderer=this.#i.bind(this),(0,s.LL)(this.baseElement),this.baseElement.addEventListener("click",(e=>{e.preventDefault(),e.stopPropagation()}))}#i(e){e.firstChild||(e.appendChild(this.#r()),e.style.setProperty("opacity","0"),setTimeout((()=>{this.#n(),e.style.setProperty("opacity","1"),this.backdrop.addEventListener("click",this.closePopover.bind(this))}))),this.updateCalendarView()}#r(){const e=document.createElement("span");e.innerHTML="<descope-calendar></descope-calendar>";const t=e.querySelector("descope-calendar");return t.addEventListener("date-submit",this.onCalendarSubmit.bind(this)),t.addEventListener("cancel",this.closePopover.bind(this)),e}#n(){const{width:e}=this.inputElement.getClientRects()[0],{width:t}=this.calendar.getClientRects()[0],i=e-t/2;this.overlayPositionAnchor.style.setProperty(I.cssVarList.overlayAnchorPos,`${i}px`)}#t(){this.overlay._attachOverlay=()=>this.overlay.bringToFront(),this.overlay._detachOverlay=()=>{},this.overlay._enterModalState=()=>{}}onPopoverToggle(){this.opened?this.closePopover():this.openPopover()}openPopover(){this.setAttribute("opened","true")}closePopover(){this.removeAttribute("opened"),this.inputElement.focus()}getCounterById(e){return this.dateCounters.find((t=>t.id===e))}onCalendarSubmit(){if(!this.isReadOnly){if(!this.calendar.value)return;const e=(0,s.D3)(this.calendar.value);this.value=e.getTime(),this.getCounterById("year").replaceValue(e.getFullYear()),this.getCounterById("month").replaceValue(e.getMonth()+1),this.getCounterById("day").replaceValue(e.getDate()),this.dispatchEvent(new Event("input"))}this.closePopover()}updateCalendarView(){const e=(0,s.HP)((0,s.D3)(this.inputElement.value||"").getTime())&&h[this.format].validate(this.inputElement.value);this.inputValueTimestamp||e?this.calendar.setAttribute("initial-value",(0,s.i$)(this.inputValueTimestamp||this.timestamp,l.TA)):(this.calendar.clearValue(),this.calendar.setAttribute("preview",(0,s.i$)((0,s.Xn)(),l.TA))),(0,o.oP)(this,this.calendar,{includeAttrs:["st-host-direction","readonly","initial-month","initial-year","years-range","calendar-label-submit","calendar-label-cancel","calendar-months","calendar-weekdays","calendar-weekdays-short"]})}onInput(e){e.target.value||(this.calendar?.clear(),this.calendar?.renderCalendar())}onFocus(){this.inputElement.value||(this.inputElement.value=this.format,this.setInputSelectionRange())}clearInputValue(){this.inputElement.value="",this.resetDateCounters()}onBlur(){this.inputValueTimestamp?this.value=this.inputValueTimestamp:this.opened||this.countersValue!==this.format||this.clearInputValue()}onFormatUpdate(e){Object.keys(h).includes(e)&&(this.format=e,this.updateFormatPattern())}updateFormatPattern(){const e=this.getAttribute("format")||this.format||l.UP;this.setAttribute("type","date"),this.setAttribute("pattern",h[e].pattern)}handleValueChange(e){(0,s.hj)(e.key)&&(e.preventDefault(),this.handleCountersValue(e.key),this.activeCounter.isFull&&this.selectNextCounter(),this.setInputSelectionRange())}getCounterIdx(e){const[t,i]=this.sortedCounters.map((e=>e.length));return[e<=t,e>=t&&e<=t+i+1,e>=t+i+2].indexOf(!0)}handleCountersValue(e){this.activeCounter.add(e),this.inputElement.value=this.countersValue}setSelectedCounterByCaretPosition(e){this.selectedCounterIdx=this.getCounterIdx(e.target.selectionStart)}selectNextCounter(){this.selectedCounterIdx<this.dateCounters.length&&(this.selectedCounterIdx=Math.min(this.selectedCounterIdx+1,2))}selectPrevCounter(){this.selectedCounterIdx>0&&(this.selectedCounterIdx=Math.min(this.selectedCounterIdx-1,1))}setInputSelectionRange(){if(this.selectedCounterIdx<0)return;const e=this.sortedCounters.slice(0,this.selectedCounterIdx).reduce(((e,t)=>e+t.length),this.selectedCounterIdx);this.inputElement.setSelectionRange(e,e+this.sortedCounters[this.selectedCounterIdx].length)}resetDateCounters(){this.dateCounters.forEach((e=>e.clear()))}updateDateCounters(e){this.dateCounters.forEach((t=>{switch(t.id){case l.K3.MONTH.id:t.set(e.getMonth()+1);break;case l.K3.YEAR.id:t.set(e.getFullYear());break;case l.K3.DAY.id:t.set(e.getDate())}}))}handleKeyDownValueChange(e){if(this.isReadOnly)return;const{key:t,shiftKey:i,metaKey:r}=e,n=(0,s.rY)(t,i,r),o=n.refresh||n.tab||n.shiftTab;if(this.opened&&this.closePopover(),(0,s.CY)(t)){e.preventDefault();const t=this.activeCounter;if(!t)return;const i=Object.values(l.K3).find((e=>e.id===t.id)),{count:r,shiftCount:o}=i;n.backspace?this.handleBackspace():n.arrowUp?t.inc():n.arrowDown?t.dec():n.shiftArrowUp?t.inc(r):n.shiftArrowDown?t.dec(r):n.pageUp?t.inc(r):n.pageDown?t.dec(r):n.shiftPageUp?t.inc(o):n.shiftPageDown&&t.dec(o),this.inputElement.value=this.countersValue,this.setInputSelectionRange()}else o||e.preventDefault()}handleBackspace(){const e=this.activeCounter;e.isEmpty?(this.selectPrevCounter(),this.setInputSelectionRange()):e.del()}handleKeydownCaretPositionChange(e){if(this.opened)return;const{key:t}=e;if((0,s.CY)(t)){e.preventDefault();const i=(0,s.rY)(t,!1);i.arrowRight?this.selectNextCounter():i.arrowLeft&&this.selectPrevCounter(),this.setInputSelectionRange()}}handleMouseCaretPositionChange(e){this.opened||(e.preventDefault(),this.setSelectedCounterByCaretPosition(e),this.setInputSelectionRange())}onInitialValueChange(e){this.value||setTimeout((()=>{this.value=e}))}attributeChangedCallback(e,t,i){super.attributeChangedCallback?.(e,t,i),t!==i&&(v.includes(e)?(i&&"format"===e&&this.onFormatUpdate(i),"initial-value"===e&&this.onInitialValueChange(i)):m.includes(e)&&(i?this.calendar?.setAttribute(e,i):this.calendar?.removeAttribute(e)))}getValidity(){return this.isRequired&&!this.inputElement.value?{valueMissing:!0}:{}}});customElements.define(y,I)},56417:(e,t,i)=>{i.d(t,{f:()=>l,z:()=>d});var r=i(94978),n=i(4447),o=i(2061),a=i(54567),s=i(54201);const l=(0,a.iY)("text-field"),p=["type","label-type","copy-to-clipboard"],d=(0,o.qC)((0,r.yk)({mappings:n.Z}),r.e4,(0,r.dj)({proxyProps:["value","selectionStart"],useProxyTargets:!0}),r.Ae,(e=>class extends e{static get observedAttributes(){return p.concat(e.observedAttributes||[])}icon;init(){super.init?.()}renderCopyToClipboard(e){if(!e)return void this.icon?.remove();const t={icon:"vaadin:copy-o",title:"Copy",style:"cursor: pointer"},i={icon:"vaadin:check-circle-o",title:"Copied",style:"cursor: initial"};this.icon=Object.assign(document.createElement("vaadin-icon"),{slot:"suffix",...t}),this.baseElement.appendChild(this.icon),this.icon.addEventListener("click",(()=>{navigator.clipboard.writeText(this.value),Object.assign(this.icon,i),setTimeout((()=>{Object.assign(this.icon,t)}),5e3)}))}onLabelClick(){this.focus()}attributeChangedCallback(e,t,i){super.attributeChangeCallback?.(e,t,i),"type"===e&&this.baseElement._setType(i),t!==i&&("label-type"===e?"floating"===i?this.addEventListener("click",this.onLabelClick):this.removeEventListener("click",this.onLabelClick):"copy-to-clipboard"===e&&this.renderCopyToClipboard("true"===i))}}))((0,r.DM)({slots:["prefix","suffix"],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tpadding: calc(var(${d.cssVarList.inputOutlineWidth}) + var(${d.cssVarList.inputOutlineOffset}));\n        box-sizing: border-box;\n\t\t\t}\n      :host(:is([readonly], [disabled])) ::slotted(:is(input, textarea):placeholder-shown) {\n        opacity: 1;\n      }\n\n      vaadin-text-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {\n        opacity: 0;\n      }\n      vaadin-text-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {\n        opacity: 0;\n      }\n      ${(0,s.Wf)("vaadin-text-field")}\n\t\t\t${(0,s.bi)(d.cssVarList)}\n\t\t\t${(0,s.wm)("vaadin-text-field",d.cssVarList)}\n      ${(0,s.bz)()}\n\n      vaadin-text-field vaadin-icon {\n        align-self: center;\n      }\n\t\t`,excludeAttrsSync:["tabindex"],componentName:l}))},19357:(e,t,i)=>{i.r(t),i.d(t,{TextFieldClass:()=>r.z}),i(79789),i(56594),i(57911);var r=i(56417);customElements.define(r.f,r.z)},4447:(e,t,i)=>{i.d(t,{Z:()=>C});const{host:r,label:n,placeholder:o,requiredIndicator:a,inputField:s,input:l,inputMask:p,helperText:d,errorMessage:h,disabledPlaceholder:u,inputDisabled:c,inputIcon:y,externalInput:g,externalInputDisabled:v,externalPlaceholder:m,externalDisabledPlaceholder:b}={host:{selector:()=>":host"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},placeholder:[{selector:"> input:placeholder-shown"},{selector:()=>":host::slotted(input:placeholder-shown)"}],disabledPlaceholder:{selector:"> input:disabled::placeholder"},inputField:{selector:"::part(input-field)"},input:{selector:"input"},inputMask:{selector:"::part(input-field)::before"},inputDisabled:{selector:"input:disabled"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"},inputIcon:{selector:"vaadin-icon"},externalInput:{selector:()=>"::slotted(input)"},externalInputDisabled:{selector:()=>"::slotted(input:disabled)"},externalPlaceholder:{selector:()=>"::slotted(input:placeholder-shown)"},externalDisabledPlaceholder:{selector:()=>"::slotted(input:disabled::placeholder)"}},C={fontSize:[{},r],fontFamily:[n,s,d,h],labelFontSize:{...n,property:"font-size"},labelFontWeight:{...n,property:"font-weight"},labelTextColor:[{...n,property:"color"},{...a,property:"color"},{...n,property:"-webkit-text-fill-color"},{...a,property:"-webkit-text-fill-color"}],hostWidth:{...r,property:"width"},hostMinWidth:{...r,property:"min-width"},hostDirection:{...r,property:"direction"},inputBackgroundColor:[{...s,property:"background-color"},{...p,property:"background-color"}],errorMessageTextColor:{...h,property:"color"},helperTextColor:{...d,property:"-webkit-text-fill-color"},inputValueTextColor:[{...s,property:"color"},{...c,property:"-webkit-text-fill-color"},{...v,property:"-webkit-text-fill-color"}],inputCaretTextColor:[{...l,property:"caret-color"},{...g,property:"caret-color"}],labelRequiredIndicator:{...a,property:"content"},inputBorderColor:{...s,property:"border-color"},inputBorderWidth:{...s,property:"border-width"},inputBorderStyle:{...s,property:"border-style"},inputBorderRadius:{...s,property:"border-radius"},inputHeight:{...s,property:"height"},inputHorizontalPadding:[{...l,property:"padding-left"},{...l,property:"padding-right"},{...g,property:"padding-left"},{...g,property:"padding-right"}],inputOutlineColor:{...s,property:"outline-color"},inputOutlineStyle:{...s,property:"outline-style"},inputOutlineWidth:{...s,property:"outline-width"},inputOutlineOffset:{...s,property:"outline-offset"},textAlign:{},inputTextAlign:[{...l,property:"text-align"},{...g,property:"text-align"}],inputPlaceholderColor:[{selector:()=>":host input:placeholder-shown",property:"color"},{...m,property:"color"},{...o,property:"color"},{...u,property:"-webkit-text-fill-color"},{...b,property:"-webkit-text-fill-color"}],labelPosition:{...n,property:"position"},labelTopPosition:{...n,property:"top"},labelHorizontalPosition:[{...n,property:"left"},{...n,property:"right"}],inputTransformY:{...n,property:"transform"},inputTransition:{...n,property:"transition"},marginInlineStart:{...n,property:"margin-inline-start"},placeholderOpacity:[{selector:"> input:placeholder-shown",property:"opacity"},{...m,property:"opacity"}],inputVerticalAlignment:[{...s,property:"align-items"},{...g,property:"align-items"}],valueInputHeight:[{...l,property:"height"},{...g,property:"height"}],valueInputMarginBottom:[{...l,property:"margin-bottom"},{...g,property:"margin-bottom"}],inputIconOffset:[{...y,property:"margin-right"},{...y,property:"margin-left"}],inputIconSize:{...y,property:"font-size"},inputIconColor:{...y,property:"color"}}}}]);
+"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[5709],{66194:(e,t,i)=>{i.r(t),i.d(t,{DateFieldClass:()=>I}),i(85079),i(8467),i(19357),i(72449);var r=i(73878),n=i(94978),o=i(54567),a=i(2061),s=i(52763),l=i(82050);const p={MM:"(0?[1-9]|1[0-2])",DD:"(0?[1-9]|[12][0-9]|3[01])",YYYY:"([0-9]{4})"},d=e=>{const t=(e=>`^${e.split(l.d).map((e=>p[e])).join("\\D")}$`)(e),i=(e=>{const t=e.split(l.d);return e=>{const i={};return t.forEach(((t,r)=>{i[t]=e[r+1]})),[i.YYYY,i.MM,i.DD]}})(e),r=new RegExp(t);return{pattern:t,validate:e=>r.test(e),getDate:e=>((e,t,i)=>{const r=t.exec(e);if(!r)return null;const[n,o,a]=i(r);return(0,s.D3)([n,o,a].join(l.d))})(e,r,i)}},h=Object.fromEntries(l.zb.map((e=>[e,d(e)])));var u=i(63359);class c{constructor({id:e,min:t,max:i,placeholder:r}){this.id=e,this.data=[],this.min=t,this.max=i,this.placeholder=r}get#e(){return this.data.length?this.numberValue:0}get numberValue(){return Number(this.stringValue)}get stringValue(){return(this.data.join("")||this.placeholder).padStart(this.length,"0")}get isFull(){return 10*this.numberValue>this.max||this.data.length===this.length}get isEmpty(){return this.stringValue===this.placeholder}get length(){return this.max.toString().length}set(e){this.data=e.toString().split("")}add(e){return this.data.push(e),this.numberValue>this.max?(this.data.length=0,this.data.push(e)):this.length<this.data.length&&this.data.shift(),e}del(){this.data.filter((e=>"0"!==e)).filter(Boolean).length?this.data.pop():this.data.length=0}clear(){this.data=[]}inc(e){this.replaceValue(this.#e+(e||1))}dec(e){this.replaceValue(this.#e-(e||1))}isInRange(e){return e>=this.min&&e<=this.max}replaceValue(e){this.isInRange(e)&&(this.data=e.toString().padStart(this.length,0).split(""))}}const y=(0,o.iY)("date-field"),g=(0,r.P)({componentName:y,baseSelector:"vaadin-popover"}),v=["format","opened","initial-value"],m=["years-range","calendar-months","calendar-weekdays"],b=[...v,...m],{host:C,input:f,toggleButton:x,overlayAnchor:w,overlayAnchorRTL:E,overlay:k,backdrop:P}={host:{selector:()=>":host"},input:{selector:()=>"descope-text-field"},toggleButton:{selector:()=>".toggle-calendar"},overlayAnchor:{selector:()=>":host .overlay-position-anchor"},overlayAnchorRTL:{selector:':host([st-host-direction="rtl"]) .overlay-position-anchor'},overlay:{selector:"vaadin-popover-overlay::part(overlay)"},backdrop:{selector:"vaadin-popover-overlay::part(backdrop)"}},I=(0,a.qC)((0,n.yk)({componentNameOverride:(0,o.iY)("input-wrapper")}),(0,n.yk)({mappings:{iconMargin:{...x,property:"margin-inline-end"},hostWidth:{...C,property:"width"},hostDirection:{...C,property:"direction"},textAlign:{...f,property:"text-align"},overlayAnchorPos:[{...w,property:"right"},{...E,property:"left"}],overlayGap:{property:()=>I.cssVarList.overlayGap},overlayBackgroundColor:{property:()=>I.cssVarList.overlayBackgroundColor},overlayPadding:{property:()=>I.cssVarList.overlayPadding},overlayBoxShadow:{property:()=>I.overlayBoxShadow},overlayOutlineWidth:{property:()=>I.cssVarList.overlayOutlineWidth},overlayOutlineColor:{property:()=>I.cssVarList.overlayOutlineColor},overlayOutlineStyle:{property:()=>I.cssVarList.overlayOutlineStyle}}}),(0,n.Iw)({name:"overlay",selector:"",mappings:{marginTop:{...k,property:"margin-top"},backgroundColor:{...k},backdropBackgroundColor:{...P,property:"background-color"},backdropPointerEvents:{...P,property:"pointer-events"},padding:{...k},boxShadow:{...k},outlineWidth:{...k},outlineColor:{...k},outlineStyle:{...k}}}),n.e4,n.Ae)(class extends g{timestamp="";format=l.UP;selectedCounterIdx=0;dateCounters=[new c(l.K3.MONTH),new c(l.K3.DAY),new c(l.K3.YEAR)];static get observedAttributes(){return[].concat(g.observedAttributes||[],b)}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML=`\n    <style>\n      :host {\n        display: inline-block;\n        box-sizing: border-box;\n        user-select: none;\n        max-width: 100%;\n      }\n\n      :host ::slotted {\n        padding: 0;\n      }\n\n      .toggle-calendar {\n        cursor: pointer;\n        display: flex;\n        align-self: center;\n        z-index: 1;\n      }\n\n      descope-text-field .overlay-position-anchor {\n        position: absolute;\n        height: 100%;\n        width: 0;\n        z-index: 1;\n        pointer-events: none;\n      }\n    </style>\n    <div>\n      <descope-text-field>\n        <span slot="prefix" class="overlay-position-anchor"></span>\n        <span slot="suffix" class="toggle-calendar">\n          <descope-icon>${u.CH}</descope-icon>\n        </span>\n      </descope-text-field>\n      <vaadin-popover></vaadin-popover>\n    </div>\n    `,this.inputElement=this.shadowRoot.querySelector("descope-text-field"),this.popoverToggleButton=this.inputElement.querySelector(".toggle-calendar"),this.overlayPositionAnchor=this.inputElement.querySelector(".overlay-position-anchor"),this.oninvalid=()=>{this.inputElement.setAttribute("invalid","true"),this.inputElement.focus()}}get opened(){return"true"===this.getAttribute("opened")}get inputValueTimestamp(){const e=h[this.format].getDate(this.inputElement.value);return(0,s.HP)(e?.getTime())?e.getTime():null}get sortedCounters(){return this.format.split(l.d).map((e=>this.dateCounters.find((t=>t.placeholder===e))))}get activeCounter(){return this.sortedCounters[this.selectedCounterIdx]}get countersValue(){return this.sortedCounters.map((e=>e.stringValue)).join(l.d)}get overlay(){return this.baseElement.shadowRoot?.querySelector("vaadin-popover-overlay")}get backdrop(){return this.overlay.shadowRoot?.querySelector("#backdrop")}get calendar(){return this.overlay?.querySelector("descope-calendar")}get value(){return this.timestamp}set value(e){if(!e)return;const t=Number(e);let i,r;Number.isNaN(t)?(i=(0,s.D3)(e),r=i.getTime()):(i=(0,s.D3)(t),r=t),(0,s.HP)(r)&&r!==this.timestamp&&(this.timestamp=r,this.updateInputDisplay(),this.updateDateCounters(i),this.dispatchEvent(new Event("input")))}updateInputDisplay(){this.inputElement.value=(0,s.i$)((0,s.D3)(this.value).getTime(),this.format)}init(){super.init?.(),this.updateFormatPattern(),this.initPopover(),this.initInputElement(),setTimeout((()=>{this.#t()}),0)}initInputElement(){this.popoverToggleButton.addEventListener("click",this.onPopoverToggle.bind(this)),this.inputElement.addEventListener("focus",this.onFocus.bind(this)),this.inputElement.addEventListener("blur",this.onBlur.bind(this)),this.inputElement.addEventListener("input",this.onInput.bind(this)),this.inputElement.addEventListener("click",this.handleMouseCaretPositionChange.bind(this)),this.inputElement.addEventListener("keydown",this.handleKeyDownValueChange.bind(this)),this.inputElement.addEventListener("keydown",this.handleKeydownCaretPositionChange.bind(this)),this.inputElement.addEventListener("keydown",this.handleValueChange.bind(this)),(0,o.oP)(this,this.inputElement,{includeAttrs:["label","label-type","placeholder","disabled","readonly","bordered","required","full-width","st-host-direction","pattern","invalid","bordered"]})}initPopover(){this.baseElement.target=this.overlayPositionAnchor,this.baseElement.trigger=["click"],this.baseElement.withBackdrop=!0,this.baseElement.noCloseOnOutsideClick=!0,this.baseElement.renderer=this.#i.bind(this),this.baseElement.addEventListener("click",(e=>{e.preventDefault(),e.stopPropagation()}))}#i(e){e.firstChild||(e.appendChild(this.#r()),(0,s.LL)(this.baseElement),e.style.setProperty("opacity","0"),setTimeout((()=>{this.#n(),e.style.setProperty("opacity","1"),this.backdrop.addEventListener("click",this.closePopover.bind(this))}))),this.updateCalendarView()}#r(){const e=document.createElement("span");e.innerHTML="<descope-calendar></descope-calendar>";const t=e.querySelector("descope-calendar");return t.addEventListener("date-submit",this.onCalendarSubmit.bind(this)),t.addEventListener("cancel",this.closePopover.bind(this)),e}#n(){const{width:e}=this.inputElement.getClientRects()[0],{width:t}=this.calendar.getClientRects()[0],i=e-t/2;this.overlayPositionAnchor.style.setProperty(I.cssVarList.overlayAnchorPos,`${i}px`)}#t(){this.overlay._attachOverlay=()=>this.overlay.bringToFront(),this.overlay._detachOverlay=()=>{},this.overlay._enterModalState=()=>{}}onPopoverToggle(){this.opened?this.closePopover():this.openPopover()}openPopover(){this.setAttribute("opened","true")}closePopover(){this.removeAttribute("opened"),this.inputElement.focus()}getCounterById(e){return this.dateCounters.find((t=>t.id===e))}onCalendarSubmit(){if(!this.isReadOnly){if(!this.calendar.value)return;const e=(0,s.D3)(this.calendar.value);this.value=e.getTime(),this.getCounterById("year").replaceValue(e.getFullYear()),this.getCounterById("month").replaceValue(e.getMonth()+1),this.getCounterById("day").replaceValue(e.getDate()),this.dispatchEvent(new Event("input"))}this.closePopover()}updateCalendarView(){const e=(0,s.HP)((0,s.D3)(this.inputElement.value||"").getTime())&&h[this.format].validate(this.inputElement.value);this.inputValueTimestamp||e?this.calendar.setAttribute("initial-value",(0,s.i$)(this.inputValueTimestamp||this.timestamp,l.TA)):(this.calendar.clearValue(),this.calendar.setAttribute("preview",(0,s.i$)((0,s.Xn)(),l.TA))),(0,o.oP)(this,this.calendar,{includeAttrs:["st-host-direction","readonly","initial-month","initial-year","years-range","calendar-label-submit","calendar-label-cancel","calendar-months","calendar-weekdays","calendar-weekdays-short"]})}onInput(e){e.target.value||(this.calendar?.clear(),this.calendar?.renderCalendar())}onFocus(){this.inputElement.value||(this.inputElement.value=this.format,this.setInputSelectionRange())}clearInputValue(){this.inputElement.value="",this.resetDateCounters()}onBlur(){this.inputValueTimestamp?this.value=this.inputValueTimestamp:this.opened||this.countersValue!==this.format||this.clearInputValue()}onFormatUpdate(e){Object.keys(h).includes(e)&&(this.format=e,this.updateFormatPattern())}updateFormatPattern(){const e=this.getAttribute("format")||this.format||l.UP;this.setAttribute("type","date"),this.setAttribute("pattern",h[e].pattern)}handleValueChange(e){(0,s.hj)(e.key)&&(e.preventDefault(),this.handleCountersValue(e.key),this.activeCounter.isFull&&this.selectNextCounter(),this.setInputSelectionRange())}getCounterIdx(e){const[t,i]=this.sortedCounters.map((e=>e.length));return[e<=t,e>=t&&e<=t+i+1,e>=t+i+2].indexOf(!0)}handleCountersValue(e){this.activeCounter.add(e),this.inputElement.value=this.countersValue}setSelectedCounterByCaretPosition(e){this.selectedCounterIdx=this.getCounterIdx(e.target.selectionStart)}selectNextCounter(){this.selectedCounterIdx<this.dateCounters.length&&(this.selectedCounterIdx=Math.min(this.selectedCounterIdx+1,2))}selectPrevCounter(){this.selectedCounterIdx>0&&(this.selectedCounterIdx=Math.min(this.selectedCounterIdx-1,1))}setInputSelectionRange(){if(this.selectedCounterIdx<0)return;const e=this.sortedCounters.slice(0,this.selectedCounterIdx).reduce(((e,t)=>e+t.length),this.selectedCounterIdx);this.inputElement.setSelectionRange(e,e+this.sortedCounters[this.selectedCounterIdx].length)}resetDateCounters(){this.dateCounters.forEach((e=>e.clear()))}updateDateCounters(e){this.dateCounters.forEach((t=>{switch(t.id){case l.K3.MONTH.id:t.set(e.getMonth()+1);break;case l.K3.YEAR.id:t.set(e.getFullYear());break;case l.K3.DAY.id:t.set(e.getDate())}}))}handleKeyDownValueChange(e){if(this.isReadOnly)return;const{key:t,shiftKey:i,metaKey:r}=e,n=(0,s.rY)(t,i,r),o=n.refresh||n.tab||n.shiftTab;if(this.opened&&this.closePopover(),(0,s.CY)(t)){e.preventDefault();const t=this.activeCounter;if(!t)return;const i=Object.values(l.K3).find((e=>e.id===t.id)),{count:r,shiftCount:o}=i;n.backspace?this.handleBackspace():n.arrowUp?t.inc():n.arrowDown?t.dec():n.shiftArrowUp?t.inc(r):n.shiftArrowDown?t.dec(r):n.pageUp?t.inc(r):n.pageDown?t.dec(r):n.shiftPageUp?t.inc(o):n.shiftPageDown&&t.dec(o),this.inputElement.value=this.countersValue,this.setInputSelectionRange()}else o||e.preventDefault()}handleBackspace(){const e=this.activeCounter;e.isEmpty?(this.selectPrevCounter(),this.setInputSelectionRange()):e.del()}handleKeydownCaretPositionChange(e){if(this.opened)return;const{key:t}=e;if((0,s.CY)(t)){e.preventDefault();const i=(0,s.rY)(t,!1);i.arrowRight?this.selectNextCounter():i.arrowLeft&&this.selectPrevCounter(),this.setInputSelectionRange()}}handleMouseCaretPositionChange(e){this.opened||(e.preventDefault(),this.setSelectedCounterByCaretPosition(e),this.setInputSelectionRange())}onInitialValueChange(e){this.value||setTimeout((()=>{this.value=e}))}attributeChangedCallback(e,t,i){super.attributeChangedCallback?.(e,t,i),t!==i&&(v.includes(e)?(i&&"format"===e&&this.onFormatUpdate(i),"initial-value"===e&&this.onInitialValueChange(i)):m.includes(e)&&(i?this.calendar?.setAttribute(e,i):this.calendar?.removeAttribute(e)))}getValidity(){return this.isRequired&&!this.inputElement.value?{valueMissing:!0}:{}}});customElements.define(y,I)},56417:(e,t,i)=>{i.d(t,{f:()=>l,z:()=>d});var r=i(94978),n=i(4447),o=i(2061),a=i(54567),s=i(54201);const l=(0,a.iY)("text-field"),p=["type","label-type","copy-to-clipboard"],d=(0,o.qC)((0,r.yk)({mappings:n.Z}),r.e4,(0,r.dj)({proxyProps:["value","selectionStart"],useProxyTargets:!0}),r.Ae,(e=>class extends e{static get observedAttributes(){return p.concat(e.observedAttributes||[])}icon;init(){super.init?.()}renderCopyToClipboard(e){if(!e)return void this.icon?.remove();const t={icon:"vaadin:copy-o",title:"Copy",style:"cursor: pointer"},i={icon:"vaadin:check-circle-o",title:"Copied",style:"cursor: initial"};this.icon=Object.assign(document.createElement("vaadin-icon"),{slot:"suffix",...t}),this.baseElement.appendChild(this.icon),this.icon.addEventListener("click",(()=>{navigator.clipboard.writeText(this.value),Object.assign(this.icon,i),setTimeout((()=>{Object.assign(this.icon,t)}),5e3)}))}onLabelClick(){this.focus()}attributeChangedCallback(e,t,i){super.attributeChangeCallback?.(e,t,i),"type"===e&&this.baseElement._setType(i),t!==i&&("label-type"===e?"floating"===i?this.addEventListener("click",this.onLabelClick):this.removeEventListener("click",this.onLabelClick):"copy-to-clipboard"===e&&this.renderCopyToClipboard("true"===i))}}))((0,r.DM)({slots:["prefix","suffix"],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tpadding: calc(var(${d.cssVarList.inputOutlineWidth}) + var(${d.cssVarList.inputOutlineOffset}));\n        box-sizing: border-box;\n\t\t\t}\n      :host(:is([readonly], [disabled])) ::slotted(:is(input, textarea):placeholder-shown) {\n        opacity: 1;\n      }\n\n      vaadin-text-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {\n        opacity: 0;\n      }\n      vaadin-text-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {\n        opacity: 0;\n      }\n      ${(0,s.Wf)("vaadin-text-field")}\n\t\t\t${(0,s.bi)(d.cssVarList)}\n\t\t\t${(0,s.wm)("vaadin-text-field",d.cssVarList)}\n      ${(0,s.bz)()}\n\n      vaadin-text-field vaadin-icon {\n        align-self: center;\n      }\n\t\t`,excludeAttrsSync:["tabindex"],componentName:l}))},19357:(e,t,i)=>{i.r(t),i.d(t,{TextFieldClass:()=>r.z}),i(79789),i(56594),i(57911);var r=i(56417);customElements.define(r.f,r.z)},4447:(e,t,i)=>{i.d(t,{Z:()=>C});const{host:r,label:n,placeholder:o,requiredIndicator:a,inputField:s,input:l,inputMask:p,helperText:d,errorMessage:h,disabledPlaceholder:u,inputDisabled:c,inputIcon:y,externalInput:g,externalInputDisabled:v,externalPlaceholder:m,externalDisabledPlaceholder:b}={host:{selector:()=>":host"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},placeholder:[{selector:"> input:placeholder-shown"},{selector:()=>":host::slotted(input:placeholder-shown)"}],disabledPlaceholder:{selector:"> input:disabled::placeholder"},inputField:{selector:"::part(input-field)"},input:{selector:"input"},inputMask:{selector:"::part(input-field)::before"},inputDisabled:{selector:"input:disabled"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"},inputIcon:{selector:"vaadin-icon"},externalInput:{selector:()=>"::slotted(input)"},externalInputDisabled:{selector:()=>"::slotted(input:disabled)"},externalPlaceholder:{selector:()=>"::slotted(input:placeholder-shown)"},externalDisabledPlaceholder:{selector:()=>"::slotted(input:disabled::placeholder)"}},C={fontSize:[{},r],fontFamily:[n,s,d,h],labelFontSize:{...n,property:"font-size"},labelFontWeight:{...n,property:"font-weight"},labelTextColor:[{...n,property:"color"},{...a,property:"color"},{...n,property:"-webkit-text-fill-color"},{...a,property:"-webkit-text-fill-color"}],hostWidth:{...r,property:"width"},hostMinWidth:{...r,property:"min-width"},hostDirection:{...r,property:"direction"},inputBackgroundColor:[{...s,property:"background-color"},{...p,property:"background-color"}],errorMessageTextColor:{...h,property:"color"},helperTextColor:{...d,property:"-webkit-text-fill-color"},inputValueTextColor:[{...s,property:"color"},{...c,property:"-webkit-text-fill-color"},{...v,property:"-webkit-text-fill-color"}],inputCaretTextColor:[{...l,property:"caret-color"},{...g,property:"caret-color"}],labelRequiredIndicator:{...a,property:"content"},inputBorderColor:{...s,property:"border-color"},inputBorderWidth:{...s,property:"border-width"},inputBorderStyle:{...s,property:"border-style"},inputBorderRadius:{...s,property:"border-radius"},inputHeight:{...s,property:"height"},inputHorizontalPadding:[{...l,property:"padding-left"},{...l,property:"padding-right"},{...g,property:"padding-left"},{...g,property:"padding-right"}],inputOutlineColor:{...s,property:"outline-color"},inputOutlineStyle:{...s,property:"outline-style"},inputOutlineWidth:{...s,property:"outline-width"},inputOutlineOffset:{...s,property:"outline-offset"},textAlign:{},inputTextAlign:[{...l,property:"text-align"},{...g,property:"text-align"}],inputPlaceholderColor:[{selector:()=>":host input:placeholder-shown",property:"color"},{...m,property:"color"},{...o,property:"color"},{...u,property:"-webkit-text-fill-color"},{...b,property:"-webkit-text-fill-color"}],labelPosition:{...n,property:"position"},labelTopPosition:{...n,property:"top"},labelHorizontalPosition:[{...n,property:"left"},{...n,property:"right"}],inputTransformY:{...n,property:"transform"},inputTransition:{...n,property:"transition"},marginInlineStart:{...n,property:"margin-inline-start"},placeholderOpacity:[{selector:"> input:placeholder-shown",property:"opacity"},{...m,property:"opacity"}],inputVerticalAlignment:[{...s,property:"align-items"},{...g,property:"align-items"}],valueInputHeight:[{...l,property:"height"},{...g,property:"height"}],valueInputMarginBottom:[{...l,property:"margin-bottom"},{...g,property:"margin-bottom"}],inputIconOffset:[{...y,property:"margin-right"},{...y,property:"margin-left"}],inputIconSize:{...y,property:"font-size"},inputIconColor:{...y,property:"color"}}}}]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope/web-components-ui",
-  "version": "1.0.380",
+  "version": "1.0.381",
   "description": "",
   "main": "dist/cjs/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/components/descope-date-field/DateFieldClass.js

@@ -229,9 +229,6 @@ class RawDateFieldClass extends BaseInputClass {
     this.baseElement.noCloseOnOutsideClick = true;
     this.baseElement.renderer = this.#popoverRenderer.bind(this);
 
-    // override vaadin's constructed stylesheet which hides the host element
-    overrideConstructedStylesheet(this.baseElement);
-
     // block popover events from focusing/blurring the text-field
     this.baseElement.addEventListener('click', (e) => {
       e.preventDefault();
@@ -243,6 +240,8 @@ class RawDateFieldClass extends BaseInputClass {
     // popoverRenderer should run only once, when the popover is first rendering.
     if (!root.firstChild) {
       root.appendChild(this.#getPopoverContent());
+      // override vaadin's constructed stylesheet which hides the host element
+      overrideConstructedStylesheet(this.baseElement);
 
       // To prevent position flickering of the dialog we set opacity to 0
       root.style.setProperty('opacity', '0');