@descope/web-components-ui 1.114.0 → 1.116.0

package/dist/umd/descope-multi-select-combo-box-index-js.js.map

@@ -1 +1 @@
-{"version":3,"file":"descope-multi-select-combo-box-index-js.js","mappings":"oQAyBO,MAAMA,GAAgB,QAAiB,2BAgZxC,KACJC,EAAI,WACJC,EAAU,aACVC,EAAY,YACZC,EAAW,OACXC,EAAM,YACNC,EAAW,MACXC,EAAK,kBACLC,EAAiB,WACjBC,EAAU,aACVC,EAAY,KACZC,EAAI,UACJC,EAAS,wBACTC,EAAuB,yBACvBC,GACE,CACFb,KAAM,CAAEc,SAAU,IAAM,SACxBb,WAAY,CAAEa,SAAU,uBACxBZ,aAAc,CAAEY,SAAU,SAC1BX,YAAa,CAAEW,SAAU,6BACzBV,OAAQ,CAAEU,SAAU,yBACpBT,YAAa,CAAES,SAAU,wBACzBR,MAAO,CAAEQ,SAAU,iBACnBP,kBAAmB,CAAEO,SAAU,+CAC/BN,WAAY,CAAEM,SAAU,uBACxBL,aAAc,CAAEK,SAAU,yBAC1BJ,KAAM,CAAEI,SAAU,sCAClBH,UAAW,CAAEG,SAAU,mDACvBF,wBAAyB,CACvBE,SAAU,+DAEZD,yBAA0B,CACxBC,SAAU,+DAIDC,GAA2B,SACtC,QAAiB,CACfC,SAAU,CACRC,UAAW,IAAKjB,EAAMkB,SAAU,SAChCC,cAAe,IAAKnB,EAAMkB,SAAU,aAEpCE,SAAU,CAAC,CAAC,EAAGpB,GACfqB,aAAc,IAAKV,EAAWO,SAAU,aACxCI,WAAY,CAAChB,EAAOH,EAAaF,EAAYO,EAAYC,EAAcE,GACvEY,cAAe,IAAKjB,EAAOY,SAAU,aACrCM,gBAAiB,IAAKlB,EAAOY,SAAU,eACvCO,eAAgB,CACd,IAAKnB,EAAOY,SAAU,SACtB,IAAKX,EAAmBW,SAAU,UAEpCQ,sBAAuB,IAAKjB,EAAcS,SAAU,SACpDS,iBAAkB,IAAKlB,EAAcS,SAAU,oBAC/CU,qBAAsB,IAAKnB,EAAcS,SAAU,mBACnDW,wBAAyB,IAAKpB,EAAcS,SAAU,wBACtDY,uBAAwB,IAAKrB,EAAcS,SAAU,qBACrDa,yBAA0B,IAAKtB,EAAcS,SAAU,uBACvDc,qBAAsB,IAAKvB,EAAcS,SAAU,aACnDe,YAAa,IAAKhC,EAAYiB,SAAU,cACxCgB,qBAAsB,IAAKjC,EAAYiB,SAAU,oBACjDiB,iBAAkB,IAAKlC,EAAYiB,SAAU,gBAC7CkB,iBAAkB,IAAKnC,EAAYiB,SAAU,gBAC7CmB,iBAAkB,IAAKpC,EAAYiB,SAAU,gBAC7CoB,kBAAmB,IAAKrC,EAAYiB,SAAU,iBAC9CqB,uBAAwB,IAAKhC,EAAmBW,SAAU,WAC1DsB,oBAAqB,IAAKvC,EAAYiB,SAAU,SAChDuB,0BAA2B,IAAKtC,EAAae,SAAU,SACvDwB,0BAA2B,CACzB,IAAKtC,EAAQc,SAAU,UACvB,IAAKb,EAAaa,SAAU,WAE9ByB,yBAA0B,CACxB,IAAKvC,EAAQc,SAAU,SACvB,IAAKb,EAAaa,SAAU,UAE9B0B,wBAAyB,CACvB,IAAKxC,EAAQc,SAAU,aACvB,IAAKb,EAAaa,SAAU,cAE9B2B,0BAA2B,CACzB,IAAKzC,EAAQc,SAAU,gBACvB,IAAKd,EAAQc,SAAU,gBAEzB4B,kBAAmB,IAAK7C,EAAYiB,SAAU,iBAC9C6B,kBAAmB,IAAK9C,EAAYiB,SAAU,iBAC9C8B,kBAAmB,IAAK/C,EAAYiB,SAAU,iBAC9C+B,mBAAoB,IAAKhD,EAAYiB,SAAU,kBAC/CgC,uBAAwB,CACtB,IAAKhD,EAAcgB,SAAU,gBAC7B,IAAKhB,EAAcgB,SAAU,iBAC7B,IAAKjB,EAAYiB,SAAU,yBAE7BiC,qBAAsB,CACpB,IAAKlD,EAAYiB,SAAU,eAC3B,IAAKjB,EAAYiB,SAAU,mBAE7BkC,cAAe,IAAKzC,EAAWO,SAAU,SACzCmC,oBAAqB,CACnB,IAAK3C,EAAMQ,SAAU,oBACrB,IAAKN,EAAyBM,SAAU,gBACxC,IAAKL,EAA0BK,SAAU,iBAG3CoC,cAAe,IAAKhD,EAAOY,SAAU,YACrCqC,iBAAkB,IAAKjD,EAAOY,SAAU,OACxCsC,kBAAmB,IAAKlD,EAAOY,SAAU,QACzCuC,wBAAyB,CACvB,IAAKnD,EAAOY,SAAU,QACtB,IAAKZ,EAAOY,SAAU,UAExBwC,gBAAiB,IAAKpD,EAAOY,SAAU,aACvCyC,gBAAiB,IAAKrD,EAAOY,SAAU,cACvC0C,kBAAmB,IAAKtD,EAAOY,SAAU,uBACzC2C,mBAAoB,IAAK1D,EAAae,SAAU,WAChD4C,uBAAwB,IAAK7D,EAAYiB,SAAU,eAMnD6C,kBAAmB,CACjB7C,SAAU,IAAMH,EAAyBiD,WAAWC,QAAQC,iBAE9DC,iBAAkB,CAChBjD,SAAU,IAAMH,EAAyBiD,WAAWC,QAAQG,WAE9DC,cAAe,CAAEnD,SAAU,IAAMH,EAAyBiD,WAAWC,QAAQK,QAC7EC,gBAAiB,CAAErD,SAAU,IAAMH,EAAyBiD,WAAWC,QAAQ7C,UAC/EoD,kBAAmB,CAAEtD,SAAU,IAAMH,EAAyBiD,WAAWC,QAAQ3C,YACjFmD,cAAe,CAAEvD,SAAU,IAAMH,EAAyBiD,WAAWC,QAAQS,QAC7EC,qBAAsB,CACpBzD,SAAU,IAAMH,EAAyBiD,WAAWC,QAAQW,eAE9DC,8BAA+B,CAC7B3D,SAAU,IAAMH,EAAyBiD,WAAWC,QAAQa,wBAE9DC,4BAA6B,CAC3B7D,SAAU,IAAMH,EAAyBiD,WAAWC,QAAQe,yBAIlE,MACA,QAAY,CACVC,KAAM,UACNnE,SAAU,yCACVE,SAAU,CACRkD,gBAAiB,CAAEpD,SAAU,0CAC7BoE,UAAW,CAAEpE,SAAU,yCACvBqE,OAAQ,CAAErE,SAAU,yCACpB4D,OAAQ,CAAE5D,SAAU,sCACpBQ,WAAY,CAAER,SAAU,sCACxBsD,UAAW,CAAEtD,SAAU,qCAAsCI,SAAU,SACvEE,SAAU,CAAEN,SAAU,sCACtB8D,cAAe,CAAE9D,SAAU,qCAAsCI,SAAU,cAC3E4D,uBAAwB,CACtBhE,SAAU,qCACVI,SAAU,wBAEZ8D,qBAAsB,CACpBlE,SAAU,qCACVI,SAAU,uBAGdkE,QAAS,CACPC,SAAS,EACTC,WAAY,CAAC,YAGjB,QAAgB,CAAEC,WAAY,CAAC,kBAAmBC,WAAY,2BAC9D,KACA,MAxjBgCC,GAChC,cAA4CA,EAC1C,6BAAWC,GACT,MAAO,CAAC,WACV,CAGA,GAAc,EAAGC,cAAaC,QAAOtF,YACnC,MAAMuF,EAAMC,SAASC,cAAc,QAKnC,OAJAF,EAAIG,aAAa,YAAa1F,GAC9BuF,EAAIG,aAAa,UAAWJ,GAC5BC,EAAII,YAAcN,GAAerF,EAE1BuF,EAAIK,SAAS,EAGtB,GAEA,GAAS,GAET,iBAAIC,GACF,MAAMC,EAAoBC,KAAKC,aAAa,kBAC5C,GAAIF,EACF,IACE,MAAMD,EAAgBI,KAAKC,MAAMJ,GACjC,GAAIC,KAAKI,gBAAgBN,GACvB,OAAOA,CAEX,CAAE,MAAOO,GAEPC,QAAQC,MAAM,gEAAiEF,EAAEG,QACnF,CAEF,MAAO,EACT,CAEA,cAAIC,GACF,OAAOT,MAAK,CACd,CAEA,cAAIS,CAAWC,GACbV,MAAK,EAAcU,EACnBV,KAAKW,aACP,CAEA,QAAIC,GACF,GAAIZ,MAAK,EAAO,OAAOA,MAAK,EAE5B,MAAMa,EAAWb,KAAKC,aAAa,QAEnC,GAAIY,EACF,IACE,MAAMD,EAAOV,KAAKC,MAAMU,GACxB,GAAIb,KAAKI,gBAAgBQ,GACvB,OAAOA,CAEX,CAAE,MAAOP,GAEPC,QAAQC,MAAM,sDAAuDF,EAAEG,QACzE,CAGF,MAAO,EACT,CAEA,QAAII,CAAKA,GACHZ,KAAKI,gBAAgBQ,KACvBZ,MAAK,EAAQY,EACbZ,KAAKW,cAET,CAEA,qBAAIG,GACF,MAAmD,SAA5Cd,KAAKC,aAAa,qBAC3B,CAEA,qBAAIc,GACF,OAAOC,SAAShB,KAAKC,aAAa,uBAAwB,KAAO,CACnE,CAEA,qBAAIgB,GACF,OAAOD,SAAShB,KAAKC,aAAa,uBAAwB,KAAO,CACnE,CAGA,eAAAG,CAAgBQ,GACd,MAAMM,EAAUC,MAAMC,QAAQR,GAM9B,OALKM,GAEHZ,QAAQC,MAAM,sDAAuDK,GAGhEM,CACT,CAEA,gBAAAG,GACE,OAAOrB,KAAKY,MAAMU,UAAS,CAACC,EAAKC,IAASD,GAAOvB,KAAKS,aAAae,GAAQ,CAAC,IAAM,KAAK,GACzF,CAEA,WAAAb,GACE,MAAMc,EAAWzB,KAAKqB,mBAClBI,IAAUzB,KAAK0B,UAAYD,EACjC,CAEA,mBAAAE,GAEE,MAAMC,EACJ5B,KAAK6B,YAAYC,eAAeC,KAAKP,GAASA,EAAKvB,aAAa,cAAe,GAG7E2B,EAAgBI,OAAS,IAE3BhC,KAAKT,MAAQqC,GAIW,IAAtB5B,KAAKT,MAAMyC,QACbhC,KAAKiC,kBAET,CAGA,sBAAAC,CAAuBC,GACrB,OAAOA,CACT,CAKA,qBAAAC,GACE,MAAMC,EAAkBC,OAAOC,yBAC7BvC,KAAKnG,aAAa2I,YAAYC,UAC9B,SAGIC,EAAW1C,KAEjBsC,OAAOK,iBAAiB3C,KAAKnG,aAAc,CACzC0F,MAAO,IACF8C,EACH,GAAAO,CAAIT,GACF,MAAMU,EAAmBH,EAASR,uBAAuBC,IAAQ,GAE7DU,IAAqB7C,KAAKT,OAI9B8C,EAAgBO,IAAIE,KAAK9C,KAAM6C,EACjC,IAGN,CAIA,GAAYE,GACV,OAAO5B,MAAM6B,KACX,IAAIC,IAAIF,EAAMhB,KAAKP,GAAS,CAACA,EAAKvB,aAAa,WAAYuB,MAAQ0B,SAEvE,CAKA,KACE,MAAMH,EAAQ5B,MAAM6B,KAAKhD,KAAKmD,UACxBC,EAAapD,MAAK,EAAY+C,GAGhCA,EAAMf,QACRhC,KAAKqD,gBAAgB,kBAErBD,EAAWE,SAASC,IAClBjB,OAAOkB,eAAeD,EAAM,YAAa,CACvChE,MAAOgE,EAAKtD,aAAa,aACzBwD,cAAc,EACdC,UAAU,IAEZpB,OAAOkB,eAAeD,EAAM,UAAW,CACrChE,MAAOgE,EAAKtD,aAAa,WACzBwD,cAAc,EACdC,UAAU,GACV,IAGJ1D,KAAK6B,YAAYkB,MAAQK,EAEzBO,YAAW,KAET3D,KAAK2B,qBAAqB,GACzB,KAEH3B,KAAK6B,YAAYkB,MAAQ,GACzB/C,KAAKL,aAAa,iBAAkB,KAMtCK,KAAK6B,YAAY+B,SAAW,CAACC,EAAMC,EAAOC,KAExCF,EAAKnC,UAAYqC,EAAMvC,KAAK3B,SAAS,CAEzC,CAKA,KACE,MAAMjC,EAAUoC,KAAK6B,YAAYmC,WAC9BC,cAAc,0CACdD,WAAWC,cAAc,yCAC5BrG,EAAQsG,eAAiB,KACvBtG,EAAQuG,cAAc,EAExBvG,EAAQwG,eAAiB,OACzBxG,EAAQyG,iBAAmB,MAC7B,CAEA,KACMrE,KAAKc,mBACPd,KAAK6B,YAAYyC,iBAAiB,oBAAqBjE,IACrD,MAAMkE,EAAcvE,MAAK,EAAY,CACnC/F,MAAOoG,EAAEmE,OACTlF,YAAae,EAAEmE,OACfjF,MAAOc,EAAEmE,SAEXxE,KAAK0B,WAAa6C,EAGlBvE,KAAK6B,YAAY4C,YAAc,GAG/Bd,YAAW,KACT3D,KAAKT,MAAQ,IAAIS,KAAKT,MAAOc,EAAEmE,OAAO,GACrC,EAAE,GAGX,CAEA,cAAAE,GAEE1E,KAAK2E,YAAc,WACjB,GAAI3E,KAAK4E,QAAS,CAChB,MAAMC,EAAe,IAAIC,OAAO9E,KAAK4E,SACrC,GAAI5E,KAAKT,MAAMwF,MAAM5C,IAAS0C,EAAaG,KAAK7C,KAC9C,MAAO,CACL8C,iBAAiB,EAEvB,CAEA,OAAIjF,KAAKkF,aAAelF,KAAKT,MAAMyC,OAC1B,CACLmD,cAAc,GAKhBnF,KAAKkF,YACLlF,KAAKe,mBACLf,KAAKT,MAAMyC,OAAShC,KAAKe,kBAElB,CACLqE,gBAAgB,GAGhBpF,KAAKiB,mBAAqBjB,KAAKT,MAAMyC,OAAShC,KAAKiB,kBAC9C,CACLoE,eAAe,GAGZ,CAAC,CACV,EAKA,MAAMC,EAAOtF,KAEbA,KAAK6B,YAAY0D,cAAgB,IACxBD,EAAKE,SAASC,KAEzB,CAEA,IAAAC,GACEC,MAAMD,SAEN1F,KAAK0E,iBAEL1E,KAAKoC,wBAELpC,MAAK,IAELA,MAAK,IAELA,KAAKW,eAEL,QAAkBX,KAAMA,KAAKW,YAAYiF,KAAK5F,MAAO,CAAE6F,aAAc,CAAC,WAEtE,QAAgB7F,KAAMA,MAAK,EAAkB4F,KAAK5F,QAIlD,QAAaA,KAAMA,KAAK6B,YAAa,CAAEgE,aAAc,CAAC,iBAEtD7F,KAAKiC,mBAELjC,KAAK6B,YAAYyC,iBAAiB,0BAA0B,KAC1DtE,MAAK,IACLA,KAAK8F,cAAc,IAAIC,YAAY,QAAS,CAAEC,SAAS,IAAQ,GAEnE,CAEA,gBAAA/D,GAC+BjC,KAAKF,cACTkC,OAAS,IAChChC,KAAKT,MAAQS,KAAKF,cAEtB,CAEA,KAGEE,MAAK,EACHA,KAAK6B,YAAYC,eAAeC,KAAKkE,GAASA,EAAKhG,aAAa,cAAe,EACnF,CAIA,SAAIV,CAAM2G,GACR,GAAIA,GAAQA,EAAKlE,OAAS,EAAG,CAG3B,MAAMmE,EAAmBnG,KAAK6B,YAAYkB,OAAOqD,QAAQ5E,GACvD0E,EAAKG,SAAS7E,EAAK,cAIrB,GAAIxB,KAAKc,kBAAmB,CAC1B,MAAMwF,EACJH,GAAkBpE,KAAKwE,GAAUA,EAAMtG,aAAa,cAAe,GAC/DuG,EAAgBN,EAAKE,QAAQjE,IAASmE,EAAeD,SAASlE,KAEpE,GAAIqE,EAAcxE,OAAQ,CACxB,MAAMyE,EAAeD,EAAclF,QAAO,CAACC,EAAKY,IAMvCZ,EALavB,MAAK,EAAY,CACnC/F,MAAOkI,EACP7C,YAAa6C,EACb5C,MAAO4C,KAGR,IAQH,OAPAnC,KAAK0B,WAAa+E,OAIlB9C,YAAW,KACT3D,KAAKT,MAAQ2G,CAAI,GAChB,EAEL,CACF,CAEA,MAAMQ,EACJP,GAAkBpE,KAAKwE,GAAUA,EAAMtG,aAAa,cAAe,IAChE,QAAuBD,MAAK,EAAQ0G,KACvC1G,KAAK6B,YAAYC,cAAgBqE,EAErC,MACEnG,KAAK6B,YAAYC,cAAgB,EAErC,CAEA,SAAIvC,GACF,OAAOS,MAAK,CACd,CAEA,wBAAA2G,CAAyBC,EAAUC,EAAUC,GAC3CnB,MAAMgB,2BAA2BC,EAAUC,EAAUC,GAEpC,aAAbF,GACF5G,KAAK+G,iBAA8B,OAAbD,GAAkC,SAAbA,EAE/C,CAEA,gBAAAC,CAAiB5E,GACXA,EACFnC,KAAK6B,aAAamC,YACdC,cAAc,2CACdtE,aAAa,QAASwC,GAE1BnC,KAAK6B,aAAamC,YACdC,cAAc,2CACdZ,gBAAgB,QAExB,IAuCoC,EAyItC,QAAY,CACV2D,MAAO,CAAC,GAAI,UACZC,eAAgB,gCAChBC,MAAO,IAAM,2HAMb,QAAuBxM,EAAyBiD,qBAChD,QAAwB,0CACxB,QAAsB,0CACtB,QAAiB,yjBAwBf,QAAwB,8uBAsBxB,8bAqBFwJ,iBAAkB,CAAC,WAAY,OAAQ,OAAQ,eAC/CzN,gBACA0N,oBAAqB,CAAC,QAAS,WAAY,oBCpqB/CC,eAAeC,OAAO5N,EAAegB,E,8HCH9B,MAAM6M,EAA0B5J,GAAe,4CAE1BA,EAAWjB,4BAA4BiB,EAAWf,gCAwBjE4K,EAAuB5I,GAAS,SACvCA,sIASO6I,EAAmB7I,GAAS,SACnCA,6GAOO8I,EAAoB9I,GAAS,SACpCA,mBACAA,wBACAA,mEAKO+I,EAAwB,CAAC/I,EAAMY,EAAM,UAAY,SACxDZ,iBAAoBY,2BACvBZ,iBAAoBY,gDAgBVoI,EAA8B,IAAM,uGAOpCC,EAA2BjJ,GAAS,SAC3CA,8DAKOkJ,EAAyClJ,GAAS,SACzDA,oEAKOmJ,EAAsB,CAACnJ,EAAMjB,IAAe,SACnD6J,EAAoB5I,WACpB8I,EAAiB9I,WACjB+I,EAAsB/I,WACtB6I,EAAgB7I,WAlCY,EAACA,EAAMjB,IAAe,SAClDiB,kCACAA,8CACAA,wCACAA,yCACAA,0EACiCjB,EAAWxB,wDAClBwB,EAAW/B,oBAAoB+B,EAAW9B,wCA4BpEmM,CAAmBpJ,EAAMjB,WACzBmK,EAAsClJ,WAnFV,CAACA,GAAS,SACtCA,yCAmFAqJ,CAAmBrJ,WA9EQ,CAACA,GAAS,SACrCA,mHA8EAsJ,CAAkBtJ,WA3FwB,CAACA,GAAS,SACpDA,gEA2FAuJ,CAAiCvJ,OAM1BwJ,EAA2BxJ,GAAS,4ZAiB3CA,yJAQOyJ,EAA0B,IAC9B,gM","sources":["webpack://@descope/web-components-ui/./src/components/descope-multi-select-combo-box/MultiSelectComboBoxClass.js","webpack://@descope/web-components-ui/./src/components/descope-multi-select-combo-box/index.js","webpack://@descope/web-components-ui/./src/helpers/themeHelpers/resetHelpers.js"],"sourcesContent":["import { compose, compareArraysUnordered } from '../../helpers';\nimport {\n  forwardAttrs,\n  getComponentName,\n  observeAttributes,\n  observeChildren,\n} from '../../helpers/componentHelpers';\nimport {\n  resetInputLabelPosition,\n  resetInputCursor,\n  resetInputPlaceholder,\n  resetInputReadonlyStyle,\n  useHostExternalPadding,\n  inputFloatingLabelStyle,\n} from '../../helpers/themeHelpers/resetHelpers';\nimport {\n  createStyleMixin,\n  draggableMixin,\n  createProxy,\n  componentNameValidationMixin,\n  portalMixin,\n  proxyInputMixin,\n  changeMixin,\n} from '../../mixins';\n\nexport const componentName = getComponentName('multi-select-combo-box');\n\nconst multiSelectComboBoxMixin = (superclass) =>\n  class MultiSelectComboBoxMixinClass extends superclass {\n    static get observedAttributes() {\n      return ['readonly'];\n    }\n\n    // eslint-disable-next-line class-methods-use-this\n    #renderItem = ({ displayName, value, label }) => {\n      const ele = document.createElement('span');\n      ele.setAttribute('data-name', label);\n      ele.setAttribute('data-id', value);\n      ele.textContent = displayName || label;\n\n      return ele.outerHTML;\n    };\n\n    #data;\n\n    #value = [];\n\n    get defaultValues() {\n      const defaultValuesAttr = this.getAttribute('default-values');\n      if (defaultValuesAttr) {\n        try {\n          const defaultValues = JSON.parse(defaultValuesAttr);\n          if (this.isValidDataType(defaultValues)) {\n            return defaultValues;\n          }\n        } catch (e) {\n          // eslint-disable-next-line no-console\n          console.error('could not parse data string from attribute \"default-values\" -', e.message);\n        }\n      }\n      return [];\n    }\n\n    get renderItem() {\n      return this.#renderItem;\n    }\n\n    set renderItem(renderFn) {\n      this.#renderItem = renderFn;\n      this.renderItems();\n    }\n\n    get data() {\n      if (this.#data) return this.#data;\n\n      const dataAttr = this.getAttribute('data');\n\n      if (dataAttr) {\n        try {\n          const data = JSON.parse(dataAttr);\n          if (this.isValidDataType(data)) {\n            return data;\n          }\n        } catch (e) {\n          // eslint-disable-next-line no-console\n          console.error('could not parse data string from attribute \"data\" -', e.message);\n        }\n      }\n\n      return [];\n    }\n\n    set data(data) {\n      if (this.isValidDataType(data)) {\n        this.#data = data;\n        this.renderItems();\n      }\n    }\n\n    get allowCustomValues() {\n      return this.getAttribute('allow-custom-value') === 'true';\n    }\n\n    get minItemsSelection() {\n      return parseInt(this.getAttribute('min-items-selection'), 10) || 0;\n    }\n\n    get maxItemsSelection() {\n      return parseInt(this.getAttribute('max-items-selection'), 10) || 0;\n    }\n\n    // eslint-disable-next-line class-methods-use-this\n    isValidDataType(data) {\n      const isValid = Array.isArray(data);\n      if (!isValid) {\n        // eslint-disable-next-line no-console\n        console.error('data and default-values must be an array, received:', data);\n      }\n\n      return isValid;\n    }\n\n    getItemsTemplate() {\n      return this.data?.reduce?.((acc, item) => acc + (this.renderItem?.(item || {}) || ''), '');\n    }\n\n    renderItems() {\n      const template = this.getItemsTemplate();\n      if (template) this.innerHTML = template;\n    }\n\n    updateSelectedItems() {\n      // This is a list of all the selected items, including ones that may have been removed from the DOM\n      const currentSelected =\n        this.baseElement.selectedItems?.map((item) => item.getAttribute('data-id')) || [];\n\n      // if there are selected items, we want to trigger a potential update to the value if some child elements were removed\n      if (currentSelected.length > 0) {\n        // setting the value checks that the selected items are still in the DOM and will not set the value if they are not\n        this.value = currentSelected;\n      }\n\n      // otherwise, if default value is specified, set default value as selected item\n      if (this.value.length === 0) {\n        this.setDefaultValues();\n      }\n    }\n\n    // eslint-disable-next-line class-methods-use-this\n    customValueTransformFn(val) {\n      return val;\n    }\n\n    // We want to override Vaadin's Combo Box value setter. This is needed since Vaadin couples between the\n    // field that it searches the value, and the finaly display value of the input.\n    // We provide a custom transform function to override that behavior.\n    setComboBoxDescriptor() {\n      const valueDescriptor = Object.getOwnPropertyDescriptor(\n        this.inputElement.constructor.prototype,\n        'value'\n      );\n\n      const comboBox = this;\n\n      Object.defineProperties(this.inputElement, {\n        value: {\n          ...valueDescriptor,\n          set(val) {\n            const transformedValue = comboBox.customValueTransformFn(val) || '';\n\n            if (transformedValue === this.value) {\n              return;\n            }\n\n            valueDescriptor.set.call(this, transformedValue);\n          },\n        },\n      });\n    }\n\n    // To prevent duplicate items for the multi select options, we dedup them based on the \"data-id\" attribute\n    // eslint-disable-next-line class-methods-use-this\n    #dedupItems(items) {\n      return Array.from(\n        new Map(items.map((item) => [item.getAttribute('data-id'), item])).values()\n      );\n    }\n\n    // vaadin api is to set props on their combo box node,\n    // in order to avoid it, we are passing the children of this component\n    // to the items & renderer props, so it will be used as the combo box items\n    #onChildrenChange() {\n      const items = Array.from(this.children);\n      const dedupItems = this.#dedupItems(items);\n\n      // we want the data-name attribute to be accessible as an object attribute\n      if (items.length) {\n        this.removeAttribute('has-no-options');\n\n        dedupItems.forEach((node) => {\n          Object.defineProperty(node, 'data-name', {\n            value: node.getAttribute('data-name'),\n            configurable: true,\n            writable: true,\n          });\n          Object.defineProperty(node, 'data-id', {\n            value: node.getAttribute('data-id'),\n            configurable: true,\n            writable: true,\n          });\n        });\n\n        this.baseElement.items = dedupItems;\n\n        setTimeout(() => {\n          // set timeout to ensure this runs after customValueTransformFn had the chance to be overriden\n          this.updateSelectedItems();\n        }, 0);\n      } else {\n        this.baseElement.items = [];\n        this.setAttribute('has-no-options', '');\n      }\n\n      // use vaadin combobox custom renderer to render options as HTML\n      // and not via default renderer, which renders only the data-name's value\n      // in its own HTML template\n      this.baseElement.renderer = (root, combo, model) => {\n        // eslint-disable-next-line no-param-reassign\n        root.innerHTML = model.item.outerHTML;\n      };\n    }\n\n    // the default vaadin behavior is to attach the overlay to the body when opened\n    // we do not want that because it's difficult to style the overlay in this way\n    // so we override it to open inside the shadow DOM\n    #overrideOverlaySettings() {\n      const overlay = this.baseElement.shadowRoot\n        .querySelector('vaadin-multi-select-combo-box-internal')\n        .shadowRoot.querySelector('vaadin-multi-select-combo-box-overlay');\n      overlay._attachOverlay = () => {\n        overlay.bringToFront();\n      };\n      overlay._detachOverlay = () => {};\n      overlay._enterModalState = () => {};\n    }\n\n    #handleCustomValues() {\n      if (this.allowCustomValues) {\n        this.baseElement.addEventListener('custom-value-set', (e) => {\n          const newItemHtml = this.#renderItem({\n            label: e.detail,\n            displayName: e.detail,\n            value: e.detail,\n          });\n          this.innerHTML += newItemHtml;\n          // The internal filter needs to be removed, otherwise there's a bug where a new custom item\n          // added can't be removed from the dropdown because of how the vaadin component is implemented\n          this.baseElement._lastFilter = '';\n          // The value needs to be set with a timeout because it needs to execute after\n          // the custom value is added to items by the children change observer\n          setTimeout(() => {\n            this.value = [...this.value, e.detail];\n          }, 0);\n        });\n      }\n    }\n\n    setGetValidity() {\n      // eslint-disable-next-line func-names\n      this.getValidity = function () {\n        if (this.pattern) {\n          const patternRegex = new RegExp(this.pattern);\n          if (this.value.some((val) => !patternRegex.test(val)))\n            return {\n              patternMismatch: true,\n            };\n        }\n\n        if (this.isRequired && !this.value.length) {\n          return {\n            valueMissing: true,\n          };\n        }\n        // If the field is not required, no minimum selection can be set\n        if (\n          this.isRequired &&\n          this.minItemsSelection &&\n          this.value.length < this.minItemsSelection\n        ) {\n          return {\n            rangeUnderflow: true,\n          };\n        }\n        if (this.maxItemsSelection && this.value.length > this.maxItemsSelection) {\n          return {\n            rangeOverflow: true,\n          };\n        }\n        return {};\n      };\n\n      // This is required to override the default validity check of the vaadin component\n      // which is triggered when the component is checked for validity after blur\n      // Without this, our minItemsSelection and maxItemsSelection constraints will not be checked\n      const that = this;\n      // eslint-disable-next-line func-names\n      this.baseElement.checkValidity = () => {\n        return that.validity.valid;\n      };\n    }\n\n    init() {\n      super.init?.();\n\n      this.setGetValidity();\n\n      this.setComboBoxDescriptor();\n\n      this.#overrideOverlaySettings();\n\n      this.#handleCustomValues();\n\n      this.renderItems();\n\n      observeAttributes(this, this.renderItems.bind(this), { includeAttrs: ['data'] });\n\n      observeChildren(this, this.#onChildrenChange.bind(this));\n\n      // Note: we need to forward the `placeholder` because the vaadin component observes it and\n      // tries to override it, causing us to lose the user set placeholder.\n      forwardAttrs(this, this.baseElement, { includeAttrs: ['placeholder'] });\n\n      this.setDefaultValues();\n\n      this.baseElement.addEventListener('selected-items-changed', () => {\n        this.#updateInternalValue();\n        this.dispatchEvent(new CustomEvent('input', { bubbles: true }));\n      });\n    }\n\n    setDefaultValues() {\n      const initialDefaultValues = this.defaultValues;\n      if (initialDefaultValues.length > 0) {\n        this.value = this.defaultValues;\n      }\n    }\n\n    #updateInternalValue() {\n      // This is done here because we don't want to return a different copy of the same array\n      // every time get value is called if a new value wasn't set\n      this.#value =\n        this.baseElement.selectedItems?.map((elem) => elem.getAttribute('data-id')) || [];\n    }\n\n    // Updating the value will update the selectedItems, which will trigger an event 'selected-items-changed'\n    // which we listen to in the init function to update the internal value\n    set value(vals) {\n      if (vals && vals.length > 0) {\n        // Filters the children of the component to find the ones that match the values,\n        // since it's possible that some values that are trying to set are not in the children\n        const selectedChildren = this.baseElement.items?.filter((item) =>\n          vals.includes(item['data-id'])\n        );\n\n        // If the component allows custom values, we need to add the values that are not present in the children\n        if (this.allowCustomValues) {\n          const existingValues =\n            selectedChildren?.map((child) => child.getAttribute('data-id')) || [];\n          const missingValues = vals.filter((val) => !existingValues.includes(val));\n\n          if (missingValues.length) {\n            const newItemsHtml = missingValues.reduce((acc, val) => {\n              const newItemHtml = this.#renderItem({\n                label: val,\n                displayName: val,\n                value: val,\n              });\n              return acc + newItemHtml;\n            }, '');\n            this.innerHTML += newItemsHtml;\n\n            // The value needs to be set with a timeout because it needs to execute after\n            // the custom values are added to the items by the children change observer\n            setTimeout(() => {\n              this.value = vals;\n            }, 0);\n            return;\n          }\n        }\n\n        const newSelectedValues =\n          selectedChildren?.map((child) => child.getAttribute('data-id')) || [];\n        if (!compareArraysUnordered(this.#value, newSelectedValues)) {\n          this.baseElement.selectedItems = selectedChildren;\n        }\n      } else {\n        this.baseElement.selectedItems = [];\n      }\n    }\n\n    get value() {\n      return this.#value;\n    }\n\n    attributeChangedCallback(attrName, oldValue, newValue) {\n      super.attributeChangedCallback?.(attrName, oldValue, newValue);\n\n      if (attrName === 'readonly') {\n        this.onReadOnlyChange(newValue !== null && newValue === 'true');\n      }\n    }\n\n    onReadOnlyChange(val) {\n      if (val) {\n        this.baseElement?.shadowRoot\n          ?.querySelector('vaadin-multi-select-combo-box-internal')\n          ?.setAttribute('inert', val);\n      } else {\n        this.baseElement?.shadowRoot\n          ?.querySelector('vaadin-multi-select-combo-box-internal')\n          ?.removeAttribute('inert');\n      }\n    }\n  };\n\nconst {\n  host,\n  inputField,\n  inputElement,\n  placeholder,\n  toggle,\n  clearButton,\n  label,\n  requiredIndicator,\n  helperText,\n  errorMessage,\n  chip,\n  chipLabel,\n  overflowChipFirstBorder,\n  overflowChipSecondBorder,\n} = {\n  host: { selector: () => ':host' },\n  inputField: { selector: '::part(input-field)' },\n  inputElement: { selector: 'input' },\n  placeholder: { selector: '> input:placeholder-shown' },\n  toggle: { selector: '::part(toggle-button)' },\n  clearButton: { selector: '::part(clear-button)' },\n  label: { selector: '::part(label)' },\n  requiredIndicator: { selector: '[required]::part(required-indicator)::after' },\n  helperText: { selector: '::part(helper-text)' },\n  errorMessage: { selector: '::part(error-message)' },\n  chip: { selector: 'vaadin-multi-select-combo-box-chip' },\n  chipLabel: { selector: 'vaadin-multi-select-combo-box-chip::part(label)' },\n  overflowChipFirstBorder: {\n    selector: \"vaadin-multi-select-combo-box-chip[slot='overflow']::before\",\n  },\n  overflowChipSecondBorder: {\n    selector: \"vaadin-multi-select-combo-box-chip[slot='overflow']::after\",\n  },\n};\n\nexport const MultiSelectComboBoxClass = compose(\n  createStyleMixin({\n    mappings: {\n      hostWidth: { ...host, property: 'width' },\n      hostDirection: { ...host, property: 'direction' },\n      // we apply font-size also on the host so we can set its width with em\n      fontSize: [{}, host],\n      chipFontSize: { ...chipLabel, property: 'font-size' },\n      fontFamily: [label, placeholder, inputField, helperText, errorMessage, chipLabel],\n      labelFontSize: { ...label, property: 'font-size' },\n      labelFontWeight: { ...label, property: 'font-weight' },\n      labelTextColor: [\n        { ...label, property: 'color' },\n        { ...requiredIndicator, property: 'color' },\n      ],\n      errorMessageTextColor: { ...errorMessage, property: 'color' },\n      errorMessageIcon: { ...errorMessage, property: 'background-image' },\n      errorMessageIconSize: { ...errorMessage, property: 'background-size' },\n      errorMessageIconPadding: { ...errorMessage, property: 'padding-inline-start' },\n      errorMessageIconRepeat: { ...errorMessage, property: 'background-repeat' },\n      errorMessageIconPosition: { ...errorMessage, property: 'background-position' },\n      errorMessageFontSize: { ...errorMessage, property: 'font-size' },\n      inputHeight: { ...inputField, property: 'min-height' },\n      inputBackgroundColor: { ...inputField, property: 'background-color' },\n      inputBorderColor: { ...inputField, property: 'border-color' },\n      inputBorderWidth: { ...inputField, property: 'border-width' },\n      inputBorderStyle: { ...inputField, property: 'border-style' },\n      inputBorderRadius: { ...inputField, property: 'border-radius' },\n      labelRequiredIndicator: { ...requiredIndicator, property: 'content' },\n      inputValueTextColor: { ...inputField, property: 'color' },\n      inputPlaceholderTextColor: { ...placeholder, property: 'color' },\n      inputDropdownButtonCursor: [\n        { ...toggle, property: 'cursor' },\n        { ...clearButton, property: 'cursor' },\n      ],\n      inputDropdownButtonColor: [\n        { ...toggle, property: 'color' },\n        { ...clearButton, property: 'color' },\n      ],\n      inputDropdownButtonSize: [\n        { ...toggle, property: 'font-size' },\n        { ...clearButton, property: 'font-size' },\n      ],\n      inputDropdownButtonOffset: [\n        { ...toggle, property: 'margin-right' },\n        { ...toggle, property: 'margin-left' },\n      ],\n      inputOutlineColor: { ...inputField, property: 'outline-color' },\n      inputOutlineWidth: { ...inputField, property: 'outline-width' },\n      inputOutlineStyle: { ...inputField, property: 'outline-style' },\n      inputOutlineOffset: { ...inputField, property: 'outline-offset' },\n      inputHorizontalPadding: [\n        { ...inputElement, property: 'padding-left' },\n        { ...inputElement, property: 'padding-right' },\n        { ...inputField, property: 'padding-inline-start' },\n      ],\n      inputVerticalPadding: [\n        { ...inputField, property: 'padding-top' },\n        { ...inputField, property: 'padding-bottom' },\n      ],\n      chipTextColor: { ...chipLabel, property: 'color' },\n      chipBackgroundColor: [\n        { ...chip, property: 'background-color' },\n        { ...overflowChipFirstBorder, property: 'border-color' },\n        { ...overflowChipSecondBorder, property: 'border-color' },\n      ],\n\n      labelPosition: { ...label, property: 'position' },\n      labelTopPosition: { ...label, property: 'top' },\n      labelLeftPosition: { ...label, property: 'left' },\n      labelHorizontalPosition: [\n        { ...label, property: 'left' },\n        { ...label, property: 'right' },\n      ],\n      inputTransformY: { ...label, property: 'transform' },\n      inputTransition: { ...label, property: 'transition' },\n      marginInlineStart: { ...label, property: 'margin-inline-start' },\n      placeholderOpacity: { ...placeholder, property: 'opacity' },\n      inputVerticalAlignment: { ...inputField, property: 'align-items' },\n\n      // we need to use the variables from the portal mixin\n      // so we need to use an arrow function on the selector\n      // for that to work, because ComboBox is not available\n      // at this time.\n      overlayBackground: {\n        property: () => MultiSelectComboBoxClass.cssVarList.overlay.backgroundColor,\n      },\n      overlayTextColor: {\n        property: () => MultiSelectComboBoxClass.cssVarList.overlay.textColor,\n      },\n      overlayBorder: { property: () => MultiSelectComboBoxClass.cssVarList.overlay.border },\n      overlayFontSize: { property: () => MultiSelectComboBoxClass.cssVarList.overlay.fontSize },\n      overlayFontFamily: { property: () => MultiSelectComboBoxClass.cssVarList.overlay.fontFamily },\n      overlayCursor: { property: () => MultiSelectComboBoxClass.cssVarList.overlay.cursor },\n      overlayItemBoxShadow: {\n        property: () => MultiSelectComboBoxClass.cssVarList.overlay.itemBoxShadow,\n      },\n      overlayItemPaddingInlineStart: {\n        property: () => MultiSelectComboBoxClass.cssVarList.overlay.itemPaddingInlineStart,\n      },\n      overlayItemPaddingInlineEnd: {\n        property: () => MultiSelectComboBoxClass.cssVarList.overlay.itemPaddingInlineEnd,\n      },\n    },\n  }),\n  draggableMixin,\n  portalMixin({\n    name: 'overlay',\n    selector: 'vaadin-multi-select-combo-box-internal',\n    mappings: {\n      backgroundColor: { selector: 'vaadin-multi-select-combo-box-scroller' },\n      minHeight: { selector: 'vaadin-multi-select-combo-box-overlay' },\n      margin: { selector: 'vaadin-multi-select-combo-box-overlay' },\n      cursor: { selector: 'vaadin-multi-select-combo-box-item' },\n      fontFamily: { selector: 'vaadin-multi-select-combo-box-item' },\n      textColor: { selector: 'vaadin-multi-select-combo-box-item', property: 'color' },\n      fontSize: { selector: 'vaadin-multi-select-combo-box-item' },\n      itemBoxShadow: { selector: 'vaadin-multi-select-combo-box-item', property: 'box-shadow' },\n      itemPaddingInlineStart: {\n        selector: 'vaadin-multi-select-combo-box-item',\n        property: 'padding-inline-start',\n      },\n      itemPaddingInlineEnd: {\n        selector: 'vaadin-multi-select-combo-box-item',\n        property: 'padding-inline-end',\n      },\n    },\n    forward: {\n      include: false,\n      attributes: ['size'],\n    },\n  }),\n  proxyInputMixin({ proxyProps: ['selectionStart'], inputEvent: 'selected-items-changed' }),\n  changeMixin,\n  componentNameValidationMixin,\n  multiSelectComboBoxMixin\n)(\n  createProxy({\n    slots: ['', 'prefix'],\n    wrappedEleName: 'vaadin-multi-select-combo-box',\n    style: () => `\n\t\t:host {\n\t\t\tdisplay: inline-flex;\n\t\t\tbox-sizing: border-box;\n\t\t\t-webkit-mask-image: none;\n\t\t}\n\t\t${useHostExternalPadding(MultiSelectComboBoxClass.cssVarList)}\n\t\t${resetInputReadonlyStyle('vaadin-multi-select-combo-box')}\n\t\t${resetInputPlaceholder('vaadin-multi-select-combo-box')}\n\t\t${resetInputCursor('vaadin-multi-select-combo-box')}\n\n\t\tvaadin-multi-select-combo-box {\n\t\t\tpadding: 0;\n\t\t\twidth: 100%;\n\t\t}\n\t\tvaadin-multi-select-combo-box::before {\n\t\t\theight: initial;\n\t\t}\n\t\tvaadin-multi-select-combo-box [slot=\"input\"] {\n\t\t\t-webkit-mask-image: none;\n\t\t\tmin-height: 0;\n      align-self: center;\n\t\t\tbox-sizing: border-box;\n\t\t}\n\t\tvaadin-multi-select-combo-box[readonly] [slot=\"input\"] {\n      flex-grow: 1;\n      flex-basis: 4em;\n\t\t}\n\n\t\t::part(input-field) {\n      padding: 0;\n\t\t\tbox-shadow: none;\n\t\t}\n    ${resetInputLabelPosition('vaadin-multi-select-combo-box')}\n    :host([has-label]) vaadin-multi-select-combo-box-chip::part(label) {\n      display: block;\n    }\n\n    vaadin-multi-select-combo-box vaadin-multi-select-combo-box-chip[slot='overflow']::before,\n    vaadin-multi-select-combo-box vaadin-multi-select-combo-box-chip[slot='overflow']::after {\n      left: -4px;\n      right: -4px;\n      border-left-width: 0;\n      border-inline-start-style: solid;\n      border-inline-start-width: 2px;\n    }\n    vaadin-multi-select-combo-box vaadin-multi-select-combo-box-chip[slot='overflow']::after {\n      left: -8px;\n      right: -8px;\n    }\n\n    :host([has-no-options][allow-custom-value='true']) ::part(toggle-button) {\n      display: none;\n    }\n\n    ${inputFloatingLabelStyle()}\n\n    vaadin-multi-select-combo-box::part(toggle-button),\n    vaadin-multi-select-combo-box::part(clear-button) {\n      align-self: center;\n    }\n\n    vaadin-multi-select-combo-box[label-type=\"floating\"]:not([focused])[readonly] > input:placeholder-shown {\n      opacity: 0;\n    }\n    vaadin-multi-select-combo-box[label-type=\"floating\"]:not([focused])[disabled] > input:placeholder-shown {\n      opacity: 0;\n    }\n\n\t\t`,\n    // Note: we exclude `size` to avoid overriding Vaadin's ComboBox property\n    // with the same name. Including it will cause Vaadin to calculate NaN size,\n    // and reset items to an empty array, and opening the list box with no items\n    // to display.\n    // Note: we exclude `placeholder` because the vaadin component observes it and\n    // tries to override it, causing us to lose the user set placeholder.\n    excludeAttrsSync: ['tabindex', 'size', 'data', 'placeholder'],\n    componentName,\n    includeForwardProps: ['items', 'renderer', 'selectedItems'],\n  })\n);\n","import '@vaadin/multi-select-combo-box';\nimport { componentName, MultiSelectComboBoxClass } from './MultiSelectComboBoxClass';\n\ncustomElements.define(componentName, MultiSelectComboBoxClass);\n\nexport { MultiSelectComboBoxClass, componentName };\n","export const useHostExternalPadding = (cssVarList) => `\n    :host {\n        padding: calc(var(${cssVarList.inputOutlineWidth}) + var(${cssVarList.inputOutlineOffset}))\n    }\n`;\n\nexport const resetInputFieldUnderlayingBorder = (name) => `\n    ${name}::part(input-field)::after {\n        border: none;\n    }\n`;\n\nexport const resetInitialHeight = (name) => `\n    ${name}::before {\n\t\theight: unset;\n\t}\n`;\n\nexport const resetInputElement = (name) => `\n    ${name} > input {\n        -webkit-mask-image: none;\n        min-height: 0;\n        box-sizing: border-box;\n    }\n`;\n\nexport const resetInputContainer = (name) => `\n    ${name} {\n        margin: 0;\n        padding: 0;\n        width: 100%;\n        height: 100%;\n        box-sizing: border-box;\n    }\n`;\n\nexport const resetInputField = (name) => `\n    ${name}::part(input-field) {\n        overflow: hidden;\n        padding: 0;\n        box-shadow: none;\n    }\n`;\n\nexport const resetInputCursor = (name) => `\n    ${name} > label,\n    ${name}::part(label),\n    ${name}::part(required-indicator) {\n        cursor: pointer;\n    }\n`;\n\nexport const resetInputPlaceholder = (name, ele = 'input') => `\n    ${name}[disabled] > ${ele}:placeholder-shown,\n\t${name}[readonly] > ${ele}:placeholder-shown {\n\t\topacity: 1;\n\t}\n`;\n\nexport const resetInputAutoFill = (name, cssVarList) => `\n    ${name} input:-webkit-autofill,\n    ${name} input:-webkit-autofill::first-line,\n    ${name} input:-webkit-autofill:hover,\n    ${name} input:-webkit-autofill:active,\n    ${name} input:-webkit-autofill:focus {\n        -webkit-text-fill-color: var(${cssVarList.inputValueTextColor});\n        box-shadow: 0 0 0 var(${cssVarList.inputHeight}) var(${cssVarList.inputBackgroundColor}) inset;\n    }\n`;\n\nexport const resetInputFieldDefaultWidth = () => `\n    :host {\n        --vaadin-field-default-width: auto;\n        box-sizing: border-box;\n    }\n`;\n\nexport const resetInputReadonlyStyle = (name) => `\n    ${name}::part(input-field)::after {\n        opacity: 0;\n    }\n`;\n\nexport const resetInputFieldInvalidBackgroundColor = (name) => `\n    ${name}::part(input-field)::after {\n        background: none;\n    }\n`;\n\nexport const resetInputOverrides = (name, cssVarList) => `\n    ${resetInputContainer(name)}\n    ${resetInputCursor(name)}\n    ${resetInputPlaceholder(name)}\n    ${resetInputField(name)}\n    ${resetInputAutoFill(name, cssVarList)}\n    ${resetInputFieldInvalidBackgroundColor(name)}\n    ${resetInitialHeight(name)}\n    ${resetInputElement(name)}\n    ${resetInputFieldUnderlayingBorder(name)}\n`;\n\n// This function is used to support RTL correctly for input components.\n// It also fixes the error message to be displayed LTR since we currently\n// don't support RTL for error messages.\nexport const resetInputLabelPosition = (name) => `\n    :host ::part(error-message) {\n      direction: ltr;\n    }\n    :host([required]) ::part(required-indicator) {\n      width: 1em;\n      display: inline-flex;\n    }\n    :host([required]) ::part(required-indicator)::after {\n      position: static;\n    }\n    :host([has-label]) ::part(label) {\n      padding-right: 0;\n      padding-bottom: 0;\n      display: flex;\n      width: 100%;\n    }\n    ${name} [slot=\"label\"] {\n      max-width: calc(100% - 1em);\n      overflow: hidden;\n      text-overflow: ellipsis;\n      padding-bottom: 0.5em;\n    }\n`;\n\nexport const inputFloatingLabelStyle = () => {\n  return `\n  :host([label-type=\"floating\"]) {\n    position: relative;\n  }\n  :host([label-type=\"floating\"][has-label]) > ::part(label) {\n    z-index: 1;\n    padding: 0;\n    width: auto;\n  }\n  `;\n};\n"],"names":["componentName","host","inputField","inputElement","placeholder","toggle","clearButton","label","requiredIndicator","helperText","errorMessage","chip","chipLabel","overflowChipFirstBorder","overflowChipSecondBorder","selector","MultiSelectComboBoxClass","mappings","hostWidth","property","hostDirection","fontSize","chipFontSize","fontFamily","labelFontSize","labelFontWeight","labelTextColor","errorMessageTextColor","errorMessageIcon","errorMessageIconSize","errorMessageIconPadding","errorMessageIconRepeat","errorMessageIconPosition","errorMessageFontSize","inputHeight","inputBackgroundColor","inputBorderColor","inputBorderWidth","inputBorderStyle","inputBorderRadius","labelRequiredIndicator","inputValueTextColor","inputPlaceholderTextColor","inputDropdownButtonCursor","inputDropdownButtonColor","inputDropdownButtonSize","inputDropdownButtonOffset","inputOutlineColor","inputOutlineWidth","inputOutlineStyle","inputOutlineOffset","inputHorizontalPadding","inputVerticalPadding","chipTextColor","chipBackgroundColor","labelPosition","labelTopPosition","labelLeftPosition","labelHorizontalPosition","inputTransformY","inputTransition","marginInlineStart","placeholderOpacity","inputVerticalAlignment","overlayBackground","cssVarList","overlay","backgroundColor","overlayTextColor","textColor","overlayBorder","border","overlayFontSize","overlayFontFamily","overlayCursor","cursor","overlayItemBoxShadow","itemBoxShadow","overlayItemPaddingInlineStart","itemPaddingInlineStart","overlayItemPaddingInlineEnd","itemPaddingInlineEnd","name","minHeight","margin","forward","include","attributes","proxyProps","inputEvent","superclass","observedAttributes","displayName","value","ele","document","createElement","setAttribute","textContent","outerHTML","defaultValues","defaultValuesAttr","this","getAttribute","JSON","parse","isValidDataType","e","console","error","message","renderItem","renderFn","renderItems","data","dataAttr","allowCustomValues","minItemsSelection","parseInt","maxItemsSelection","isValid","Array","isArray","getItemsTemplate","reduce","acc","item","template","innerHTML","updateSelectedItems","currentSelected","baseElement","selectedItems","map","length","setDefaultValues","customValueTransformFn","val","setComboBoxDescriptor","valueDescriptor","Object","getOwnPropertyDescriptor","constructor","prototype","comboBox","defineProperties","set","transformedValue","call","items","from","Map","values","children","dedupItems","removeAttribute","forEach","node","defineProperty","configurable","writable","setTimeout","renderer","root","combo","model","shadowRoot","querySelector","_attachOverlay","bringToFront","_detachOverlay","_enterModalState","addEventListener","newItemHtml","detail","_lastFilter","setGetValidity","getValidity","pattern","patternRegex","RegExp","some","test","patternMismatch","isRequired","valueMissing","rangeUnderflow","rangeOverflow","that","checkValidity","validity","valid","init","super","bind","includeAttrs","dispatchEvent","CustomEvent","bubbles","elem","vals","selectedChildren","filter","includes","existingValues","child","missingValues","newItemsHtml","newSelectedValues","attributeChangedCallback","attrName","oldValue","newValue","onReadOnlyChange","slots","wrappedEleName","style","excludeAttrsSync","includeForwardProps","customElements","define","useHostExternalPadding","resetInputContainer","resetInputField","resetInputCursor","resetInputPlaceholder","resetInputFieldDefaultWidth","resetInputReadonlyStyle","resetInputFieldInvalidBackgroundColor","resetInputOverrides","resetInputAutoFill","resetInitialHeight","resetInputElement","resetInputFieldUnderlayingBorder","resetInputLabelPosition","inputFloatingLabelStyle"],"sourceRoot":""}
+{"version":3,"file":"descope-multi-select-combo-box-index-js.js","mappings":"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","sources":["webpack://@descope/web-components-ui/./src/components/descope-multi-select-combo-box/MultiSelectComboBoxClass.js","webpack://@descope/web-components-ui/./src/components/descope-multi-select-combo-box/index.js","webpack://@descope/web-components-ui/./src/helpers/themeHelpers/resetHelpers.js"],"sourcesContent":["import { compose, compareArraysUnordered } from '../../helpers';\nimport {\n  forwardAttrs,\n  getComponentName,\n  observeAttributes,\n  observeChildren,\n} from '../../helpers/componentHelpers';\nimport {\n  resetInputLabelPosition,\n  resetInputCursor,\n  resetInputPlaceholder,\n  resetInputReadonlyStyle,\n  useHostExternalPadding,\n  inputFloatingLabelStyle,\n} from '../../helpers/themeHelpers/resetHelpers';\nimport {\n  createStyleMixin,\n  draggableMixin,\n  createProxy,\n  componentNameValidationMixin,\n  portalMixin,\n  proxyInputMixin,\n  changeMixin,\n} from '../../mixins';\n\nexport const componentName = getComponentName('multi-select-combo-box');\n\nconst multiSelectComboBoxMixin = (superclass) =>\n  class MultiSelectComboBoxMixinClass extends superclass {\n    static get observedAttributes() {\n      return ['readonly'];\n    }\n\n    // eslint-disable-next-line class-methods-use-this\n    #renderItem = ({ displayName, value, label }) => {\n      const ele = document.createElement('span');\n      ele.setAttribute('data-name', label);\n      ele.setAttribute('data-id', value);\n      ele.textContent = displayName || label;\n\n      return ele.outerHTML;\n    };\n\n    #data;\n\n    #value = [];\n\n    get defaultValues() {\n      const defaultValuesAttr = this.getAttribute('default-values');\n      if (defaultValuesAttr) {\n        try {\n          const defaultValues = JSON.parse(defaultValuesAttr);\n          if (this.isValidDataType(defaultValues)) {\n            return defaultValues;\n          }\n        } catch (e) {\n          // eslint-disable-next-line no-console\n          console.error('could not parse data string from attribute \"default-values\" -', e.message);\n        }\n      }\n      return [];\n    }\n\n    get renderItem() {\n      return this.#renderItem;\n    }\n\n    set renderItem(renderFn) {\n      this.#renderItem = renderFn;\n      this.renderItems();\n    }\n\n    get data() {\n      if (this.#data) return this.#data;\n\n      const dataAttr = this.getAttribute('data');\n\n      if (dataAttr) {\n        try {\n          const data = JSON.parse(dataAttr);\n          if (this.isValidDataType(data)) {\n            return data;\n          }\n        } catch (e) {\n          // eslint-disable-next-line no-console\n          console.error('could not parse data string from attribute \"data\" -', e.message);\n        }\n      }\n\n      return [];\n    }\n\n    set data(data) {\n      if (this.isValidDataType(data)) {\n        this.#data = data;\n        this.renderItems();\n      }\n    }\n\n    get allowCustomValues() {\n      return this.getAttribute('allow-custom-value') === 'true';\n    }\n\n    get minItemsSelection() {\n      return parseInt(this.getAttribute('min-items-selection'), 10) || 0;\n    }\n\n    get maxItemsSelection() {\n      return parseInt(this.getAttribute('max-items-selection'), 10) || 0;\n    }\n\n    // eslint-disable-next-line class-methods-use-this\n    isValidDataType(data) {\n      const isValid = Array.isArray(data);\n      if (!isValid) {\n        // eslint-disable-next-line no-console\n        console.error('data and default-values must be an array, received:', data);\n      }\n\n      return isValid;\n    }\n\n    getItemsTemplate() {\n      return this.data?.reduce?.((acc, item) => acc + (this.renderItem?.(item || {}) || ''), '');\n    }\n\n    renderItems() {\n      const template = this.getItemsTemplate();\n      if (template) this.innerHTML = template;\n    }\n\n    updateSelectedItems() {\n      // This is a list of all the selected items, including ones that may have been removed from the DOM\n      const currentSelected =\n        this.baseElement.selectedItems?.map((item) => item.getAttribute('data-id')) || [];\n\n      // if there are selected items, we want to trigger a potential update to the value if some child elements were removed\n      if (currentSelected.length > 0) {\n        // setting the value checks that the selected items are still in the DOM and will not set the value if they are not\n        this.value = currentSelected;\n      }\n\n      // otherwise, if default value is specified, set default value as selected item\n      if (this.value.length === 0) {\n        this.setDefaultValues();\n      }\n    }\n\n    // eslint-disable-next-line class-methods-use-this\n    customValueTransformFn(val) {\n      return val;\n    }\n\n    // We want to override Vaadin's Combo Box value setter. This is needed since Vaadin couples between the\n    // field that it searches the value, and the finaly display value of the input.\n    // We provide a custom transform function to override that behavior.\n    setComboBoxDescriptor() {\n      const valueDescriptor = Object.getOwnPropertyDescriptor(\n        this.inputElement.constructor.prototype,\n        'value'\n      );\n\n      const comboBox = this;\n\n      Object.defineProperties(this.inputElement, {\n        value: {\n          ...valueDescriptor,\n          set(val) {\n            const transformedValue = comboBox.customValueTransformFn(val) || '';\n\n            if (transformedValue === this.value) {\n              return;\n            }\n\n            valueDescriptor.set.call(this, transformedValue);\n          },\n        },\n      });\n    }\n\n    // To prevent duplicate items for the multi select options, we dedup them based on the \"data-id\" attribute\n    // eslint-disable-next-line class-methods-use-this\n    #dedupItems(items) {\n      return Array.from(\n        new Map(items.map((item) => [item.getAttribute('data-id'), item])).values()\n      );\n    }\n\n    // vaadin api is to set props on their combo box node,\n    // in order to avoid it, we are passing the children of this component\n    // to the items & renderer props, so it will be used as the combo box items\n    #onChildrenChange() {\n      const items = Array.from(this.children);\n      const dedupItems = this.#dedupItems(items);\n\n      // we want the data-name attribute to be accessible as an object attribute\n      if (items.length) {\n        this.removeAttribute('has-no-options');\n\n        dedupItems.forEach((node) => {\n          Object.defineProperty(node, 'data-name', {\n            value: node.getAttribute('data-name'),\n            configurable: true,\n            writable: true,\n          });\n          Object.defineProperty(node, 'data-id', {\n            value: node.getAttribute('data-id'),\n            configurable: true,\n            writable: true,\n          });\n        });\n\n        this.baseElement.items = dedupItems;\n\n        setTimeout(() => {\n          // set timeout to ensure this runs after customValueTransformFn had the chance to be overriden\n          this.updateSelectedItems();\n        }, 0);\n      } else {\n        this.baseElement.items = [];\n        this.setAttribute('has-no-options', '');\n      }\n\n      // use vaadin combobox custom renderer to render options as HTML\n      // and not via default renderer, which renders only the data-name's value\n      // in its own HTML template\n      this.baseElement.renderer = (root, combo, model) => {\n        // eslint-disable-next-line no-param-reassign\n        root.innerHTML = model.item.outerHTML;\n      };\n    }\n\n    // the default vaadin behavior is to attach the overlay to the body when opened\n    // we do not want that because it's difficult to style the overlay in this way\n    // so we override it to open inside the shadow DOM\n    #overrideOverlaySettings() {\n      const overlay = this.baseElement.shadowRoot\n        .querySelector('vaadin-multi-select-combo-box-internal')\n        .shadowRoot.querySelector('vaadin-multi-select-combo-box-overlay');\n      overlay._attachOverlay = () => {\n        overlay.bringToFront();\n      };\n      overlay._detachOverlay = () => {};\n      overlay._enterModalState = () => {};\n    }\n\n    #handleCustomValues() {\n      if (this.allowCustomValues) {\n        this.baseElement.addEventListener('custom-value-set', (e) => {\n          const newItemHtml = this.#renderItem({\n            label: e.detail,\n            displayName: e.detail,\n            value: e.detail,\n          });\n          this.innerHTML += newItemHtml;\n          // The internal filter needs to be removed, otherwise there's a bug where a new custom item\n          // added can't be removed from the dropdown because of how the vaadin component is implemented\n          this.baseElement._lastFilter = '';\n          // The value needs to be set with a timeout because it needs to execute after\n          // the custom value is added to items by the children change observer\n          setTimeout(() => {\n            this.value = [...this.value, e.detail];\n          }, 0);\n        });\n      }\n    }\n\n    setGetValidity() {\n      // eslint-disable-next-line func-names\n      this.getValidity = function () {\n        if (this.pattern) {\n          const patternRegex = new RegExp(this.pattern);\n          if (this.value.some((val) => !patternRegex.test(val)))\n            return {\n              patternMismatch: true,\n            };\n        }\n\n        if (this.isRequired && !this.value.length) {\n          return {\n            valueMissing: true,\n          };\n        }\n        // If the field is not required, no minimum selection can be set\n        if (\n          this.isRequired &&\n          this.minItemsSelection &&\n          this.value.length < this.minItemsSelection\n        ) {\n          return {\n            rangeUnderflow: true,\n          };\n        }\n        if (this.maxItemsSelection && this.value.length > this.maxItemsSelection) {\n          return {\n            rangeOverflow: true,\n          };\n        }\n        return {};\n      };\n\n      // This is required to override the default validity check of the vaadin component\n      // which is triggered when the component is checked for validity after blur\n      // Without this, our minItemsSelection and maxItemsSelection constraints will not be checked\n      const that = this;\n      // eslint-disable-next-line func-names\n      this.baseElement.checkValidity = () => {\n        return that.validity.valid;\n      };\n    }\n\n    init() {\n      super.init?.();\n\n      this.setGetValidity();\n\n      this.#handleCustomValues();\n\n      this.renderItems();\n\n      observeAttributes(this, this.renderItems.bind(this), { includeAttrs: ['data'] });\n\n      observeChildren(this, this.#onChildrenChange.bind(this));\n\n      // Note: we need to forward the `placeholder` because the vaadin component observes it and\n      // tries to override it, causing us to lose the user set placeholder.\n      forwardAttrs(this, this.baseElement, { includeAttrs: ['placeholder'] });\n\n      // This is a workaround for a problem we have in Console App, where in ScreenBuilder - the inputElement is not ready when trying to\n      // set the component's descriptor and override the overlay settings.\n      // THIS IS A PROBLEM WITH THE CONSOLE APP THAT NEEDS TO BE RESOLVED. Until then, we use this workaround.\n      setTimeout(() => {\n        this.setComboBoxDescriptor();\n        this.#overrideOverlaySettings();\n      });\n\n      this.setDefaultValues();\n\n      this.baseElement.addEventListener('selected-items-changed', () => {\n        this.#updateInternalValue();\n        this.dispatchEvent(new CustomEvent('input', { bubbles: true }));\n      });\n    }\n\n    setDefaultValues() {\n      const initialDefaultValues = this.defaultValues;\n      if (initialDefaultValues.length > 0) {\n        this.value = this.defaultValues;\n      }\n    }\n\n    #updateInternalValue() {\n      // This is done here because we don't want to return a different copy of the same array\n      // every time get value is called if a new value wasn't set\n      this.#value =\n        this.baseElement.selectedItems?.map((elem) => elem.getAttribute('data-id')) || [];\n    }\n\n    // Updating the value will update the selectedItems, which will trigger an event 'selected-items-changed'\n    // which we listen to in the init function to update the internal value\n    set value(vals) {\n      if (vals && vals.length > 0) {\n        // Filters the children of the component to find the ones that match the values,\n        // since it's possible that some values that are trying to set are not in the children\n        const selectedChildren = this.baseElement.items?.filter((item) =>\n          vals.includes(item['data-id'])\n        );\n\n        // If the component allows custom values, we need to add the values that are not present in the children\n        if (this.allowCustomValues) {\n          const existingValues =\n            selectedChildren?.map((child) => child.getAttribute('data-id')) || [];\n          const missingValues = vals.filter((val) => !existingValues.includes(val));\n\n          if (missingValues.length) {\n            const newItemsHtml = missingValues.reduce((acc, val) => {\n              const newItemHtml = this.#renderItem({\n                label: val,\n                displayName: val,\n                value: val,\n              });\n              return acc + newItemHtml;\n            }, '');\n            this.innerHTML += newItemsHtml;\n\n            // The value needs to be set with a timeout because it needs to execute after\n            // the custom values are added to the items by the children change observer\n            setTimeout(() => {\n              this.value = vals;\n            }, 0);\n            return;\n          }\n        }\n\n        const newSelectedValues =\n          selectedChildren?.map((child) => child.getAttribute('data-id')) || [];\n        if (!compareArraysUnordered(this.#value, newSelectedValues)) {\n          this.baseElement.selectedItems = selectedChildren;\n        }\n      } else {\n        this.baseElement.selectedItems = [];\n      }\n    }\n\n    get value() {\n      return this.#value;\n    }\n\n    attributeChangedCallback(attrName, oldValue, newValue) {\n      super.attributeChangedCallback?.(attrName, oldValue, newValue);\n\n      if (attrName === 'readonly') {\n        this.onReadOnlyChange(newValue !== null && newValue === 'true');\n      }\n    }\n\n    onReadOnlyChange(val) {\n      if (val) {\n        this.baseElement?.shadowRoot\n          ?.querySelector('vaadin-multi-select-combo-box-internal')\n          ?.setAttribute('inert', val);\n      } else {\n        this.baseElement?.shadowRoot\n          ?.querySelector('vaadin-multi-select-combo-box-internal')\n          ?.removeAttribute('inert');\n      }\n    }\n  };\n\nconst {\n  host,\n  inputField,\n  inputElement,\n  placeholder,\n  toggle,\n  clearButton,\n  label,\n  requiredIndicator,\n  helperText,\n  errorMessage,\n  chip,\n  chipLabel,\n  overflowChipFirstBorder,\n  overflowChipSecondBorder,\n} = {\n  host: { selector: () => ':host' },\n  inputField: { selector: '::part(input-field)' },\n  inputElement: { selector: 'input' },\n  placeholder: { selector: '> input:placeholder-shown' },\n  toggle: { selector: '::part(toggle-button)' },\n  clearButton: { selector: '::part(clear-button)' },\n  label: { selector: '::part(label)' },\n  requiredIndicator: { selector: '[required]::part(required-indicator)::after' },\n  helperText: { selector: '::part(helper-text)' },\n  errorMessage: { selector: '::part(error-message)' },\n  chip: { selector: 'vaadin-multi-select-combo-box-chip' },\n  chipLabel: { selector: 'vaadin-multi-select-combo-box-chip::part(label)' },\n  overflowChipFirstBorder: {\n    selector: \"vaadin-multi-select-combo-box-chip[slot='overflow']::before\",\n  },\n  overflowChipSecondBorder: {\n    selector: \"vaadin-multi-select-combo-box-chip[slot='overflow']::after\",\n  },\n};\n\nexport const MultiSelectComboBoxClass = compose(\n  createStyleMixin({\n    mappings: {\n      hostWidth: { ...host, property: 'width' },\n      hostDirection: { ...host, property: 'direction' },\n      // we apply font-size also on the host so we can set its width with em\n      fontSize: [{}, host],\n      chipFontSize: { ...chipLabel, property: 'font-size' },\n      fontFamily: [label, placeholder, inputField, helperText, errorMessage, chipLabel],\n      labelFontSize: { ...label, property: 'font-size' },\n      labelFontWeight: { ...label, property: 'font-weight' },\n      labelTextColor: [\n        { ...label, property: 'color' },\n        { ...requiredIndicator, property: 'color' },\n      ],\n      errorMessageTextColor: { ...errorMessage, property: 'color' },\n      errorMessageIcon: { ...errorMessage, property: 'background-image' },\n      errorMessageIconSize: { ...errorMessage, property: 'background-size' },\n      errorMessageIconPadding: { ...errorMessage, property: 'padding-inline-start' },\n      errorMessageIconRepeat: { ...errorMessage, property: 'background-repeat' },\n      errorMessageIconPosition: { ...errorMessage, property: 'background-position' },\n      errorMessageFontSize: { ...errorMessage, property: 'font-size' },\n      inputHeight: { ...inputField, property: 'min-height' },\n      inputBackgroundColor: { ...inputField, property: 'background-color' },\n      inputBorderColor: { ...inputField, property: 'border-color' },\n      inputBorderWidth: { ...inputField, property: 'border-width' },\n      inputBorderStyle: { ...inputField, property: 'border-style' },\n      inputBorderRadius: { ...inputField, property: 'border-radius' },\n      labelRequiredIndicator: { ...requiredIndicator, property: 'content' },\n      inputValueTextColor: { ...inputField, property: 'color' },\n      inputPlaceholderTextColor: { ...placeholder, property: 'color' },\n      inputDropdownButtonCursor: [\n        { ...toggle, property: 'cursor' },\n        { ...clearButton, property: 'cursor' },\n      ],\n      inputDropdownButtonColor: [\n        { ...toggle, property: 'color' },\n        { ...clearButton, property: 'color' },\n      ],\n      inputDropdownButtonSize: [\n        { ...toggle, property: 'font-size' },\n        { ...clearButton, property: 'font-size' },\n      ],\n      inputDropdownButtonOffset: [\n        { ...toggle, property: 'margin-right' },\n        { ...toggle, property: 'margin-left' },\n      ],\n      inputOutlineColor: { ...inputField, property: 'outline-color' },\n      inputOutlineWidth: { ...inputField, property: 'outline-width' },\n      inputOutlineStyle: { ...inputField, property: 'outline-style' },\n      inputOutlineOffset: { ...inputField, property: 'outline-offset' },\n      inputHorizontalPadding: [\n        { ...inputElement, property: 'padding-left' },\n        { ...inputElement, property: 'padding-right' },\n        { ...inputField, property: 'padding-inline-start' },\n      ],\n      inputVerticalPadding: [\n        { ...inputField, property: 'padding-top' },\n        { ...inputField, property: 'padding-bottom' },\n      ],\n      chipTextColor: { ...chipLabel, property: 'color' },\n      chipBackgroundColor: [\n        { ...chip, property: 'background-color' },\n        { ...overflowChipFirstBorder, property: 'border-color' },\n        { ...overflowChipSecondBorder, property: 'border-color' },\n      ],\n\n      labelPosition: { ...label, property: 'position' },\n      labelTopPosition: { ...label, property: 'top' },\n      labelLeftPosition: { ...label, property: 'left' },\n      labelHorizontalPosition: [\n        { ...label, property: 'left' },\n        { ...label, property: 'right' },\n      ],\n      inputTransformY: { ...label, property: 'transform' },\n      inputTransition: { ...label, property: 'transition' },\n      marginInlineStart: { ...label, property: 'margin-inline-start' },\n      placeholderOpacity: { ...placeholder, property: 'opacity' },\n      inputVerticalAlignment: { ...inputField, property: 'align-items' },\n\n      // we need to use the variables from the portal mixin\n      // so we need to use an arrow function on the selector\n      // for that to work, because ComboBox is not available\n      // at this time.\n      overlayBackground: {\n        property: () => MultiSelectComboBoxClass.cssVarList.overlay.backgroundColor,\n      },\n      overlayTextColor: {\n        property: () => MultiSelectComboBoxClass.cssVarList.overlay.textColor,\n      },\n      overlayBorder: { property: () => MultiSelectComboBoxClass.cssVarList.overlay.border },\n      overlayFontSize: { property: () => MultiSelectComboBoxClass.cssVarList.overlay.fontSize },\n      overlayFontFamily: { property: () => MultiSelectComboBoxClass.cssVarList.overlay.fontFamily },\n      overlayCursor: { property: () => MultiSelectComboBoxClass.cssVarList.overlay.cursor },\n      overlayItemBoxShadow: {\n        property: () => MultiSelectComboBoxClass.cssVarList.overlay.itemBoxShadow,\n      },\n      overlayItemPaddingInlineStart: {\n        property: () => MultiSelectComboBoxClass.cssVarList.overlay.itemPaddingInlineStart,\n      },\n      overlayItemPaddingInlineEnd: {\n        property: () => MultiSelectComboBoxClass.cssVarList.overlay.itemPaddingInlineEnd,\n      },\n    },\n  }),\n  draggableMixin,\n  portalMixin({\n    name: 'overlay',\n    selector: 'vaadin-multi-select-combo-box-internal',\n    mappings: {\n      backgroundColor: { selector: 'vaadin-multi-select-combo-box-scroller' },\n      minHeight: { selector: 'vaadin-multi-select-combo-box-overlay' },\n      margin: { selector: 'vaadin-multi-select-combo-box-overlay' },\n      cursor: { selector: 'vaadin-multi-select-combo-box-item' },\n      fontFamily: { selector: 'vaadin-multi-select-combo-box-item' },\n      textColor: { selector: 'vaadin-multi-select-combo-box-item', property: 'color' },\n      fontSize: { selector: 'vaadin-multi-select-combo-box-item' },\n      itemBoxShadow: { selector: 'vaadin-multi-select-combo-box-item', property: 'box-shadow' },\n      itemPaddingInlineStart: {\n        selector: 'vaadin-multi-select-combo-box-item',\n        property: 'padding-inline-start',\n      },\n      itemPaddingInlineEnd: {\n        selector: 'vaadin-multi-select-combo-box-item',\n        property: 'padding-inline-end',\n      },\n    },\n    forward: {\n      include: false,\n      attributes: ['size'],\n    },\n  }),\n  proxyInputMixin({ proxyProps: ['selectionStart'], inputEvent: 'selected-items-changed' }),\n  changeMixin,\n  componentNameValidationMixin,\n  multiSelectComboBoxMixin\n)(\n  createProxy({\n    slots: ['', 'prefix'],\n    wrappedEleName: 'vaadin-multi-select-combo-box',\n    style: () => `\n\t\t:host {\n\t\t\tdisplay: inline-flex;\n\t\t\tbox-sizing: border-box;\n\t\t\t-webkit-mask-image: none;\n\t\t}\n\t\t${useHostExternalPadding(MultiSelectComboBoxClass.cssVarList)}\n\t\t${resetInputReadonlyStyle('vaadin-multi-select-combo-box')}\n\t\t${resetInputPlaceholder('vaadin-multi-select-combo-box')}\n\t\t${resetInputCursor('vaadin-multi-select-combo-box')}\n\n\t\tvaadin-multi-select-combo-box {\n\t\t\tpadding: 0;\n\t\t\twidth: 100%;\n\t\t}\n\t\tvaadin-multi-select-combo-box::before {\n\t\t\theight: initial;\n\t\t}\n\t\tvaadin-multi-select-combo-box [slot=\"input\"] {\n\t\t\t-webkit-mask-image: none;\n\t\t\tmin-height: 0;\n      align-self: center;\n\t\t\tbox-sizing: border-box;\n\t\t}\n\t\tvaadin-multi-select-combo-box[readonly] [slot=\"input\"] {\n      flex-grow: 1;\n      flex-basis: 4em;\n\t\t}\n\n\t\t::part(input-field) {\n      padding: 0;\n\t\t\tbox-shadow: none;\n\t\t}\n    ${resetInputLabelPosition('vaadin-multi-select-combo-box')}\n    :host([has-label]) vaadin-multi-select-combo-box-chip::part(label) {\n      display: block;\n    }\n\n    vaadin-multi-select-combo-box vaadin-multi-select-combo-box-chip[slot='overflow']::before,\n    vaadin-multi-select-combo-box vaadin-multi-select-combo-box-chip[slot='overflow']::after {\n      left: -4px;\n      right: -4px;\n      border-left-width: 0;\n      border-inline-start-style: solid;\n      border-inline-start-width: 2px;\n    }\n    vaadin-multi-select-combo-box vaadin-multi-select-combo-box-chip[slot='overflow']::after {\n      left: -8px;\n      right: -8px;\n    }\n\n    :host([has-no-options][allow-custom-value='true']) ::part(toggle-button) {\n      display: none;\n    }\n\n    ${inputFloatingLabelStyle()}\n\n    vaadin-multi-select-combo-box::part(toggle-button),\n    vaadin-multi-select-combo-box::part(clear-button) {\n      align-self: center;\n    }\n\n    vaadin-multi-select-combo-box[label-type=\"floating\"]:not([focused])[readonly] > input:placeholder-shown {\n      opacity: 0;\n    }\n    vaadin-multi-select-combo-box[label-type=\"floating\"]:not([focused])[disabled] > input:placeholder-shown {\n      opacity: 0;\n    }\n\n\t\t`,\n    // Note: we exclude `size` to avoid overriding Vaadin's ComboBox property\n    // with the same name. Including it will cause Vaadin to calculate NaN size,\n    // and reset items to an empty array, and opening the list box with no items\n    // to display.\n    // Note: we exclude `placeholder` because the vaadin component observes it and\n    // tries to override it, causing us to lose the user set placeholder.\n    excludeAttrsSync: ['tabindex', 'size', 'data', 'placeholder'],\n    componentName,\n    includeForwardProps: ['items', 'renderer', 'selectedItems'],\n  })\n);\n","import '@vaadin/multi-select-combo-box';\nimport { componentName, MultiSelectComboBoxClass } from './MultiSelectComboBoxClass';\n\ncustomElements.define(componentName, MultiSelectComboBoxClass);\n\nexport { MultiSelectComboBoxClass, componentName };\n","export const useHostExternalPadding = (cssVarList) => `\n    :host {\n        padding: calc(var(${cssVarList.inputOutlineWidth}) + var(${cssVarList.inputOutlineOffset}))\n    }\n`;\n\nexport const resetInputFieldUnderlayingBorder = (name) => `\n    ${name}::part(input-field)::after {\n        border: none;\n    }\n`;\n\nexport const resetInitialHeight = (name) => `\n    ${name}::before {\n\t\theight: unset;\n\t}\n`;\n\nexport const resetInputElement = (name) => `\n    ${name} > input {\n        -webkit-mask-image: none;\n        min-height: 0;\n        box-sizing: border-box;\n    }\n`;\n\nexport const resetInputContainer = (name) => `\n    ${name} {\n        margin: 0;\n        padding: 0;\n        width: 100%;\n        height: 100%;\n        box-sizing: border-box;\n    }\n`;\n\nexport const resetInputField = (name) => `\n    ${name}::part(input-field) {\n        overflow: hidden;\n        padding: 0;\n        box-shadow: none;\n    }\n`;\n\nexport const resetInputCursor = (name) => `\n    ${name} > label,\n    ${name}::part(label),\n    ${name}::part(required-indicator) {\n        cursor: pointer;\n    }\n`;\n\nexport const resetInputPlaceholder = (name, ele = 'input') => `\n    ${name}[disabled] > ${ele}:placeholder-shown,\n\t${name}[readonly] > ${ele}:placeholder-shown {\n\t\topacity: 1;\n\t}\n`;\n\nexport const resetInputAutoFill = (name, cssVarList) => `\n    ${name} input:-webkit-autofill,\n    ${name} input:-webkit-autofill::first-line,\n    ${name} input:-webkit-autofill:hover,\n    ${name} input:-webkit-autofill:active,\n    ${name} input:-webkit-autofill:focus {\n        -webkit-text-fill-color: var(${cssVarList.inputValueTextColor});\n        box-shadow: 0 0 0 var(${cssVarList.inputHeight}) var(${cssVarList.inputBackgroundColor}) inset;\n    }\n`;\n\nexport const resetInputFieldDefaultWidth = () => `\n    :host {\n        --vaadin-field-default-width: auto;\n        box-sizing: border-box;\n    }\n`;\n\nexport const resetInputReadonlyStyle = (name) => `\n    ${name}::part(input-field)::after {\n        opacity: 0;\n    }\n`;\n\nexport const resetInputFieldInvalidBackgroundColor = (name) => `\n    ${name}::part(input-field)::after {\n        background: none;\n    }\n`;\n\nexport const resetInputOverrides = (name, cssVarList) => `\n    ${resetInputContainer(name)}\n    ${resetInputCursor(name)}\n    ${resetInputPlaceholder(name)}\n    ${resetInputField(name)}\n    ${resetInputAutoFill(name, cssVarList)}\n    ${resetInputFieldInvalidBackgroundColor(name)}\n    ${resetInitialHeight(name)}\n    ${resetInputElement(name)}\n    ${resetInputFieldUnderlayingBorder(name)}\n`;\n\n// This function is used to support RTL correctly for input components.\n// It also fixes the error message to be displayed LTR since we currently\n// don't support RTL for error messages.\nexport const resetInputLabelPosition = (name) => `\n    :host ::part(error-message) {\n      direction: ltr;\n    }\n    :host([required]) ::part(required-indicator) {\n      width: 1em;\n      display: inline-flex;\n    }\n    :host([required]) ::part(required-indicator)::after {\n      position: static;\n    }\n    :host([has-label]) ::part(label) {\n      padding-right: 0;\n      padding-bottom: 0;\n      display: flex;\n      width: 100%;\n    }\n    ${name} [slot=\"label\"] {\n      max-width: calc(100% - 1em);\n      overflow: hidden;\n      text-overflow: ellipsis;\n      padding-bottom: 0.5em;\n    }\n`;\n\nexport const inputFloatingLabelStyle = () => {\n  return `\n  :host([label-type=\"floating\"]) {\n    position: relative;\n  }\n  :host([label-type=\"floating\"][has-label]) > ::part(label) {\n    z-index: 1;\n    padding: 0;\n    width: auto;\n  }\n  `;\n};\n"],"names":["componentName","host","inputField","inputElement","placeholder","toggle","clearButton","label","requiredIndicator","helperText","errorMessage","chip","chipLabel","overflowChipFirstBorder","overflowChipSecondBorder","selector","MultiSelectComboBoxClass","mappings","hostWidth","property","hostDirection","fontSize","chipFontSize","fontFamily","labelFontSize","labelFontWeight","labelTextColor","errorMessageTextColor","errorMessageIcon","errorMessageIconSize","errorMessageIconPadding","errorMessageIconRepeat","errorMessageIconPosition","errorMessageFontSize","inputHeight","inputBackgroundColor","inputBorderColor","inputBorderWidth","inputBorderStyle","inputBorderRadius","labelRequiredIndicator","inputValueTextColor","inputPlaceholderTextColor","inputDropdownButtonCursor","inputDropdownButtonColor","inputDropdownButtonSize","inputDropdownButtonOffset","inputOutlineColor","inputOutlineWidth","inputOutlineStyle","inputOutlineOffset","inputHorizontalPadding","inputVerticalPadding","chipTextColor","chipBackgroundColor","labelPosition","labelTopPosition","labelLeftPosition","labelHorizontalPosition","inputTransformY","inputTransition","marginInlineStart","placeholderOpacity","inputVerticalAlignment","overlayBackground","cssVarList","overlay","backgroundColor","overlayTextColor","textColor","overlayBorder","border","overlayFontSize","overlayFontFamily","overlayCursor","cursor","overlayItemBoxShadow","itemBoxShadow","overlayItemPaddingInlineStart","itemPaddingInlineStart","overlayItemPaddingInlineEnd","itemPaddingInlineEnd","name","minHeight","margin","forward","include","attributes","proxyProps","inputEvent","superclass","observedAttributes","displayName","value","ele","document","createElement","setAttribute","textContent","outerHTML","defaultValues","defaultValuesAttr","this","getAttribute","JSON","parse","isValidDataType","e","console","error","message","renderItem","renderFn","renderItems","data","dataAttr","allowCustomValues","minItemsSelection","parseInt","maxItemsSelection","isValid","Array","isArray","getItemsTemplate","reduce","acc","item","template","innerHTML","updateSelectedItems","currentSelected","baseElement","selectedItems","map","length","setDefaultValues","customValueTransformFn","val","setComboBoxDescriptor","valueDescriptor","Object","getOwnPropertyDescriptor","constructor","prototype","comboBox","defineProperties","set","transformedValue","call","items","from","Map","values","children","dedupItems","removeAttribute","forEach","node","defineProperty","configurable","writable","setTimeout","renderer","root","combo","model","shadowRoot","querySelector","_attachOverlay","bringToFront","_detachOverlay","_enterModalState","addEventListener","newItemHtml","detail","_lastFilter","setGetValidity","getValidity","pattern","patternRegex","RegExp","some","test","patternMismatch","isRequired","valueMissing","rangeUnderflow","rangeOverflow","that","checkValidity","validity","valid","init","super","bind","includeAttrs","dispatchEvent","CustomEvent","bubbles","elem","vals","selectedChildren","filter","includes","existingValues","child","missingValues","newItemsHtml","newSelectedValues","attributeChangedCallback","attrName","oldValue","newValue","onReadOnlyChange","slots","wrappedEleName","style","excludeAttrsSync","includeForwardProps","customElements","define","useHostExternalPadding","resetInputContainer","resetInputField","resetInputCursor","resetInputPlaceholder","resetInputFieldDefaultWidth","resetInputReadonlyStyle","resetInputFieldInvalidBackgroundColor","resetInputOverrides","resetInputAutoFill","resetInitialHeight","resetInputElement","resetInputFieldUnderlayingBorder","resetInputLabelPosition","inputFloatingLabelStyle"],"sourceRoot":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope/web-components-ui",
-  "version": "1.114.0",
+  "version": "1.116.0",
   "description": "",
   "main": "dist/cjs/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -81,9 +81,9 @@
     "@descope-ui/descope-icon": "0.0.17",
     "@descope-ui/descope-text": "0.0.19",
     "@descope-ui/descope-avatar": "0.0.19",
-    "@descope-ui/descope-combo-box": "0.1.9",
-    "@descope-ui/descope-autocomplete-field": "0.0.22",
-    "@descope-ui/descope-address-field": "0.0.21",
+    "@descope-ui/descope-combo-box": "0.1.10",
+    "@descope-ui/descope-autocomplete-field": "0.0.23",
+    "@descope-ui/descope-address-field": "0.0.22",
     "@descope-ui/descope-timer": "0.0.17",
     "@descope-ui/descope-timer-button": "0.0.20",
     "@descope-ui/descope-list": "0.0.1",

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

@@ -9,11 +9,12 @@ import { forwardAttrs, getComponentName } from '../../helpers/componentHelpers';
 import { compose } from '../../helpers';
 import {
   newDate,
-  isValidTimestamp,
-  formatTimestamp,
+  isValidEpoch,
+  formatEpoch,
   isNumber,
   getCurrentTime,
   overrideConstructedStylesheet,
+  dateToEpoch,
 } from './helpers';
 import { formats } from './formats';
 import { calendarIcon } from './icons';
@@ -37,12 +38,19 @@ export const componentName = getComponentName('date-field');
 const BASE_SELECTOR = 'vaadin-popover';
 const BaseInputClass = createBaseInputClass({ componentName, baseSelector: BASE_SELECTOR });
 
-const dateFieldAttrs = ['format', 'opened', 'initial-value', 'readonly', 'disable-calendar'];
+const dateFieldAttrs = [
+  'format',
+  'opened',
+  'initial-value',
+  'readonly',
+  'disable-calendar',
+  'utc-time',
+];
 const calendarAttrs = ['years-range', 'calendar-months', 'calendar-weekdays'];
 const observedAttrs = [...dateFieldAttrs, ...calendarAttrs];
 
 class RawDateFieldClass extends BaseInputClass {
-  timestamp = '';
+  epoch = '';
 
   format = DEFAULT_FORMAT;
 
@@ -54,10 +62,10 @@ class RawDateFieldClass extends BaseInputClass {
 
   updateValue() {
     if (this.isCountersOutOfRange) {
-      this.updateTimestamp('');
+      this.updateEpoch('');
     } else {
       const date = formats[this.format].getDate(this.inputElement.value);
-      this.updateTimestamp(date.getTime());
+      this.updateEpoch(dateToEpoch(date, this.isUtcTime));
     }
   }
 
@@ -68,11 +76,11 @@ class RawDateFieldClass extends BaseInputClass {
     this.#dispatchInput();
   };
 
-  updateTimestamp(epochOrDate) {
+  updateEpoch(epochOrDate) {
     if (!epochOrDate) {
-      this.timestamp = '';
+      this.epoch = '';
     } else {
-      this.timestamp = newDate(epochOrDate).getTime();
+      this.epoch = newDate(epochOrDate).getTime();
     }
   }
 
@@ -145,11 +153,11 @@ class RawDateFieldClass extends BaseInputClass {
     return this.getAttribute('opened') === 'true';
   }
 
-  // returns the input's value as a timestamp
+  // returns the input's value as a epoch
   get displayValueEpoch() {
     const date = formats[this.format].getDate(this.inputElement.value);
 
-    if (!isValidTimestamp(date?.getTime())) {
+    if (!isValidEpoch(date?.getTime())) {
       return null;
     }
 
@@ -197,15 +205,15 @@ class RawDateFieldClass extends BaseInputClass {
     if (this.isInvalidDate()) {
       return '';
     }
-    return this.timestamp;
+    return this.epoch;
   }
 
   set value(val) {
     if (val) {
-      this.updateTimestamp(val);
+      this.updateEpoch(val);
       this.updateDateCounters(newDate(val));
     } else {
-      this.updateTimestamp('');
+      this.updateEpoch('');
     }
   }
 
@@ -221,6 +229,10 @@ class RawDateFieldClass extends BaseInputClass {
     return this.getAttribute('disable-calendar') === 'true';
   }
 
+  get isUtcTime() {
+    return this.getAttribute('utc-time') === 'true';
+  }
+
   get isSelectAll() {
     const inputEle = this.inputElement.baseElement.inputElement;
     return inputEle.value.length === inputEle.selectionStart + inputEle.selectionEnd;
@@ -235,7 +247,7 @@ class RawDateFieldClass extends BaseInputClass {
   }
 
   updateInputDisplay() {
-    this.inputElement.value = formatTimestamp(newDate(this.countersValue).getTime(), this.format);
+    this.inputElement.value = formatEpoch(newDate(this.countersValue).getTime(), this.format);
   }
 
   init() {
@@ -426,7 +438,7 @@ class RawDateFieldClass extends BaseInputClass {
 
       const calendarDate = newDate(this.calendar.value);
 
-      this.value = calendarDate.getTime();
+      this.value = dateToEpoch(calendarDate, this.isUtcTime);
 
       this.getCounterById('year').replaceValue(calendarDate.getFullYear());
       this.getCounterById('month').replaceValue(calendarDate.getMonth() + 1);
@@ -440,17 +452,17 @@ class RawDateFieldClass extends BaseInputClass {
 
   updateCalendarView() {
     const validInputVal =
-      isValidTimestamp(newDate(this.inputElement.value || '').getTime()) &&
+      isValidEpoch(newDate(this.inputElement.value || '').getTime()) &&
       formats[this.format].validate(this.inputElement.value);
 
     if (this.displayValueEpoch || validInputVal) {
       this.calendar.setAttribute(
         'initial-value',
-        formatTimestamp(this.displayValueEpoch || this.timestamp, NATIVE_FORMAT)
+        formatEpoch(this.displayValueEpoch || this.epoch, NATIVE_FORMAT)
       );
     } else {
       this.calendar.clearValue();
-      this.calendar.setAttribute('preview', formatTimestamp(getCurrentTime(), NATIVE_FORMAT));
+      this.calendar.setAttribute('preview', formatEpoch(getCurrentTime(), NATIVE_FORMAT));
     }
 
     forwardAttrs(this, this.calendar, {
@@ -768,12 +780,22 @@ class RawDateFieldClass extends BaseInputClass {
       year: '',
     };
 
-    try {
-      const date = newDate(this.timestamp);
+    if (!this.epoch) {
+      return ret;
+    }
 
-      ret.month = date.getMonth() + 1;
-      ret.day = date.getDate();
-      ret.year = date.getFullYear();
+    try {
+      const date = newDate(this.epoch);
+
+      if (this.isUtcTime) {
+        ret.month = date.getUTCMonth() + 1;
+        ret.day = date.getUTCDate();
+        ret.year = date.getUTCFullYear();
+      } else {
+        ret.month = date.getMonth() + 1;
+        ret.day = date.getDate();
+        ret.year = date.getFullYear();
+      }
     } catch (e) {}
 
     return ret;
@@ -817,7 +839,7 @@ class RawDateFieldClass extends BaseInputClass {
     const validDate = parseDateString(pastedData, this.format);
 
     if (validDate) {
-      this.value = validDate.getTime();
+      this.value = dateToEpoch(validDate, this.isUtcTime);
       this.onDateCounterChange();
 
       // select all

package/src/components/descope-date-field/descope-calendar/CalendarClass.js

@@ -5,10 +5,10 @@ import { inputFloatingLabelStyle } from '../../../helpers/themeHelpers/resetHelp
 import { componentNameValidationMixin, createStyleMixin, draggableMixin } from '../../../mixins';
 import {
   getCurrentDay,
-  getTimestampParts,
-  isValidTimestamp,
+  getPartsFromEpoch,
+  isValidEpoch,
   newDate,
-  formatTimestamp,
+  formatEpoch,
   getCurrentTime,
   getFullYear,
   getMonth,
@@ -61,11 +61,11 @@ class RawCalendar extends BaseInputClass {
     return [].concat(BaseInputClass.observedAttributes || [], observedAttrs, calendarUiAttrs);
   }
 
-  // preview state timestamp
+  // preview state epoch
   preview;
 
-  // value timestamp
-  timestamp;
+  // value epoch
+  epoch;
 
   constructor() {
     super();
@@ -151,23 +151,23 @@ class RawCalendar extends BaseInputClass {
   set value(val) {
     if (!val) return;
 
-    const timestamp = newDate(val).getTime();
+    const epoch = newDate(val).getTime();
 
-    if (!isValidTimestamp(timestamp) || timestamp === this.timestmap) {
+    if (!isValidEpoch(epoch) || epoch === this.epoch) {
       return;
     }
 
-    this.timestamp = timestamp;
+    this.epoch = epoch;
 
     this.renderCalendar();
   }
 
   get value() {
-    return this.timestamp ? formatTimestamp(this.timestamp, NATIVE_FORMAT) : '';
+    return this.epoch ? formatEpoch(this.epoch, NATIVE_FORMAT) : '';
   }
 
   get isSelectedView() {
-    return isViewVisible(this.preview, this.timestamp);
+    return isViewVisible(this.preview, this.epoch);
   }
 
   get isTodayView() {
@@ -284,14 +284,14 @@ class RawCalendar extends BaseInputClass {
   clearSelectedDay() {
     this.getSelectedDayEle()?.removeAttribute('data-selected');
     this.submitButton.setAttribute('disabled', 'true');
-    this.timestamp = '';
+    this.epoch = '';
   }
 
   updateInputs() {
     if (this.yearInput && this.monthInput) {
-      const timestamp = this.preview || getCurrentTime();
-      const year = getFullYear(timestamp);
-      const month = getMonth(timestamp);
+      const epoch = this.preview || getCurrentTime();
+      const year = getFullYear(epoch);
+      const month = getMonth(epoch);
       this.monthInput.value = month;
       // For the yearInput we update the base element directly to properly trigger the change event
       // since this can be a custom value
@@ -303,9 +303,9 @@ class RawCalendar extends BaseInputClass {
 
   renderCalendar() {
     const date = newDate(this.preview || getCurrentTime());
-    const timestamp = date.getTime();
+    const epoch = date.getTime();
 
-    const [year, month] = getTimestampParts(timestamp);
+    const [year, month] = getPartsFromEpoch(epoch);
 
     if (this.calendar) {
       this.calendar.innerHTML = createMonthView(year, month, truncateWeekdays(this.weekdayNames));
@@ -324,7 +324,7 @@ class RawCalendar extends BaseInputClass {
     if (this.isDisabled) return;
     const date = newDate(this.preview);
     date.setDate(Number(e.target.getAttribute('data-date-day')));
-    this.value = formatTimestamp(date.getTime(), NATIVE_FORMAT);
+    this.value = formatEpoch(date.getTime(), NATIVE_FORMAT);
     this.dispatchEvent(new CustomEvent('day-changed', { detail: date }));
   }
 
@@ -355,7 +355,7 @@ class RawCalendar extends BaseInputClass {
   }
 
   getSelectedDayEle() {
-    const day = newDate(this.timestamp).getDate();
+    const day = newDate(this.epoch).getDate();
     return this.calendar?.querySelector(`[data-date-day="${day}"]`);
   }
 
@@ -380,8 +380,8 @@ class RawCalendar extends BaseInputClass {
     if (this.isTodayView) {
       const ele = this.getCurrentDayEle();
       const title = this.getAttribute('calendar-label-today') || CALENDAR_LABEL_TODAY;
-      ele.setAttribute('data-current-day', 'true');
-      ele.setAttribute('title', title);
+      ele?.setAttribute('data-current-day', 'true');
+      ele?.setAttribute('title', title);
     }
   }
 
@@ -404,7 +404,7 @@ class RawCalendar extends BaseInputClass {
   }
 
   clearValue() {
-    this.timestamp = '';
+    this.epoch = '';
     this.value = '';
     this.removeAttribute('preview');
     this.submitButton.setAttribute('disabled', 'true');
@@ -417,11 +417,11 @@ class RawCalendar extends BaseInputClass {
     }
 
     const date = newDate(newValue);
-    const timestamp = date.getTime();
+    const epoch = date.getTime();
 
-    if (isValidTimestamp(timestamp)) {
-      this.timestamp = timestamp;
-      this.preview = timestamp;
+    if (isValidEpoch(epoch)) {
+      this.epoch = epoch;
+      this.preview = epoch;
     } else {
       this.clearValue();
     }

package/src/components/descope-date-field/descope-calendar/helpers.js

@@ -1,5 +1,5 @@
 import { months, weekdays } from '../consts';
-import { getTimestampParts, newDate } from '../helpers';
+import { getPartsFromEpoch, newDate } from '../helpers';
 
 const isValidAttrArr = (arr, count) =>
   Array.isArray(arr) && arr.length === count && arr.filter(Boolean).length === count;
@@ -91,9 +91,9 @@ export const getMonthsOptions = (customMonths = months) =>
     .map((item, index) => comboBoxItemTpl({ label: item, dataId: index + 1, dataName: item }))
     .join('');
 
-export const isViewVisible = (selectionTimestamp, previewTimestamp) => {
-  const [previewYear, previewMonth] = getTimestampParts(previewTimestamp);
-  const [selectedYear, selectedMonth] = getTimestampParts(selectionTimestamp);
+export const isViewVisible = (selectionEpoch, previewEpoch) => {
+  const [previewYear, previewMonth] = getPartsFromEpoch(previewEpoch);
+  const [selectedYear, selectedMonth] = getPartsFromEpoch(selectionEpoch);
   return selectedYear === previewYear && selectedMonth === previewMonth;
 };
 
@@ -154,8 +154,8 @@ export const ensureShortWeekdayNamesArr = (attrVal) => {
 
 export const truncateWeekdays = (arr) => arr.map((d) => d.substring(0, 3));
 
-export const prevMonth = (timestamp) => {
-  const date = newDate(timestamp);
+export const prevMonth = (epoch) => {
+  const date = newDate(epoch);
   const month = date.getMonth();
 
   if (month === 0) {
@@ -169,8 +169,8 @@ export const prevMonth = (timestamp) => {
   return date;
 };
 
-export const nextMonth = (timestamp) => {
-  const date = newDate(timestamp);
+export const nextMonth = (epoch) => {
+  const date = newDate(epoch);
   const month = date.getMonth();
 
   if (month === 11) {