@esri/calcite-components 3.3.0-next.73 → 3.3.0-next.74
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/calcite/{FY6AYIRC.js → 24IFACFK.js} +2 -2
- package/dist/calcite/{WHSU64UQ.js → 2GAHXNZH.js} +2 -2
- package/dist/calcite/{SSK35TZY.js → 35JKTG3U.js} +2 -2
- package/dist/calcite/{OYQPQQNH.js → 3ZQAISUG.js} +2 -2
- package/dist/calcite/{44KUJRI3.js → 4HWLQGTB.js} +2 -2
- package/dist/calcite/{CXEZEQU5.js → 4M6DZVNE.js} +2 -2
- package/dist/calcite/{QVKBUUNK.js → 4Q6VRMAS.js} +2 -2
- package/dist/calcite/{GSVJ75NY.js → 4WWCGIE4.js} +2 -2
- package/dist/calcite/{YG6KBIKA.js → 4ZY5X3X2.js} +2 -2
- package/dist/calcite/{VHOALIG7.js → 53NJDK4X.js} +2 -2
- package/dist/calcite/{Y4N76SRL.js → 54DYCP3J.js} +1 -1
- package/dist/calcite/{CWELTZEO.js → 5KRHEIMK.js} +2 -2
- package/dist/calcite/{SZMARKC4.js → 5KYQDHJL.js} +2 -2
- package/dist/calcite/{KCJHLXNH.js → 5OJARFG3.js} +2 -2
- package/dist/calcite/{VKV7OPAP.js → 5VHBHEVS.js} +2 -2
- package/dist/calcite/{SMTHYD4O.js → 5XVWOSTQ.js} +2 -2
- package/dist/calcite/{HC6SFK4E.js → 65EWZYOU.js} +2 -2
- package/dist/calcite/{QKXWY5AT.js → 6C6XT5VZ.js} +2 -2
- package/dist/calcite/{LVJTTJVK.js → 6UPK3M6Z.js} +2 -2
- package/dist/calcite/{WEXFWZ6S.js → 6XMGG7KE.js} +2 -2
- package/dist/calcite/{BBYZ2L72.js → 6ZVFGXYC.js} +1 -1
- package/dist/calcite/{QDAUKTRX.js → 756JCAAK.js} +2 -2
- package/dist/calcite/{225RK3C2.js → 7E4AITBZ.js} +2 -2
- package/dist/calcite/{PQFIDX4M.js → 7IY6IVG2.js} +2 -2
- package/dist/calcite/{PCS5ROXZ.js → 7LFPILIK.js} +2 -2
- package/dist/calcite/{IXQ6TYIO.js → 7M2EBPCW.js} +2 -2
- package/dist/calcite/{PW6UIZON.js → 7OWC5UUM.js} +2 -2
- package/dist/calcite/{DSUFFUUC.js → 7PNKJAQJ.js} +2 -2
- package/dist/calcite/{5MXX5CJO.js → 7XI6YMPL.js} +2 -2
- package/dist/calcite/{EQDHGUHZ.js → A34FVTCE.js} +2 -2
- package/dist/calcite/{NKGROAYL.js → A35XLHLC.js} +2 -2
- package/dist/calcite/{6CLEQ6D4.js → ABWG7Z45.js} +2 -2
- package/dist/calcite/{VSOG4EMV.js → ADENZEGL.js} +2 -2
- package/dist/calcite/{32Z6TFFF.js → AGBL3M6J.js} +2 -2
- package/dist/calcite/{TANMITFJ.js → AJPYO7GA.js} +2 -2
- package/dist/calcite/{6XFXEOC3.js → ARDNLLVL.js} +2 -2
- package/dist/calcite/{2V5EFYGK.js → AZTJSYVV.js} +2 -2
- package/dist/calcite/{OOGYXQ4A.js → B6DKDN6O.js} +2 -2
- package/dist/calcite/{TPCJMQUZ.js → B6FW2ESW.js} +2 -2
- package/dist/calcite/{UQM2BSD4.js → BD24OBNZ.js} +2 -2
- package/dist/calcite/{RXMR2IRB.js → BGDUXLWD.js} +2 -2
- package/dist/calcite/{3KK5R3EC.js → CB27LCC2.js} +2 -2
- package/dist/calcite/{W6KIJTAM.js → CEQZ4V47.js} +1 -1
- package/dist/calcite/{QBI2IBO3.js → CT4QAVQI.js} +1 -1
- package/dist/calcite/{EJ5WGNIN.js → D4OHVU67.js} +2 -2
- package/dist/calcite/{HZCA2LTL.js → D7F33WOR.js} +2 -2
- package/dist/calcite/{BR72UY2C.js → DJQAM3BU.js} +2 -2
- package/dist/calcite/{TBW2CCPN.js → DLEYFSDF.js} +2 -2
- package/dist/calcite/{3OM74SUF.js → EH4MLLBZ.js} +2 -2
- package/dist/calcite/{BOMDSRVT.js → ER3WVMVV.js} +2 -2
- package/dist/calcite/{CQRHYPFS.js → F2GYJMTR.js} +2 -2
- package/dist/calcite/{BPX5BZBF.js → F2YRJCXV.js} +2 -2
- package/dist/calcite/{2JIN7ZOJ.js → FB7EBFT2.js} +2 -2
- package/dist/calcite/{S5UPGD7W.js → FIPFS6F7.js} +2 -2
- package/dist/calcite/{X3HXQYYZ.js → FOGKELSQ.js} +2 -2
- package/dist/calcite/{HQG4FLFE.js → FQEG7HR3.js} +2 -2
- package/dist/calcite/{ERR5QZAM.js → G2QBK3ZD.js} +1 -1
- package/dist/calcite/{YHBGF4JA.js → G4CWHEII.js} +2 -2
- package/dist/calcite/G4VGSX2P.js +4 -0
- package/dist/calcite/{KVE5DW4O.js → GHSOC3YC.js} +1 -1
- package/dist/calcite/{ITXEYFKC.js → GKLB5I2Z.js} +2 -2
- package/dist/calcite/{5FQWD77B.js → GQ2ZTANA.js} +2 -2
- package/dist/calcite/{TUHVSPFO.js → GTKPBPXF.js} +2 -2
- package/dist/calcite/{KQME3KLP.js → GW6PUNJP.js} +2 -2
- package/dist/calcite/{J574GKUA.js → HA3GUEAN.js} +2 -2
- package/dist/calcite/{GKNUPJEH.js → HDWNM2UR.js} +1 -1
- package/dist/calcite/{R2S37QE6.js → HGD2YEPZ.js} +2 -2
- package/dist/calcite/{HARBYYK2.js → HUCIBETC.js} +1 -1
- package/dist/calcite/{IINT5ZN5.js → I4KXJBUZ.js} +2 -2
- package/dist/calcite/{R2IXC3A7.js → I53J6CV7.js} +1 -1
- package/dist/calcite/{4ZZAVFHT.js → I6JDDLUY.js} +2 -2
- package/dist/calcite/{PDH44NEN.js → I6K5EU3K.js} +2 -2
- package/dist/calcite/{HZNGJ3ZO.js → IEWUVBZ2.js} +2 -2
- package/dist/calcite/{AVRXG562.js → IIRA6VCQ.js} +2 -2
- package/dist/calcite/{NABR764G.js → IQCTRUFI.js} +2 -2
- package/dist/calcite/{CKHX3OBC.js → IQUNUXXX.js} +2 -2
- package/dist/calcite/{FL5HF5WE.js → JGZK6XOA.js} +2 -2
- package/dist/calcite/{2ZLPCGXO.js → JPZZMBY3.js} +2 -2
- package/dist/calcite/{FXQD2K3D.js → K5G2OLHL.js} +2 -2
- package/dist/calcite/{4444F2DB.js → KG4WWS32.js} +2 -2
- package/dist/calcite/{ZNBK3H5J.js → KMRKFSXM.js} +1 -1
- package/dist/calcite/{UKN52XX3.js → KNSH65FC.js} +2 -2
- package/dist/calcite/{KJD32ZJY.js → KP5ZMBE3.js} +2 -2
- package/dist/calcite/{HUJ74PFI.js → L26MK7JF.js} +1 -1
- package/dist/calcite/{AZ6MCVFN.js → LJLFLGZY.js} +2 -2
- package/dist/calcite/{PVWAF33G.js → M7YAAGC4.js} +2 -2
- package/dist/calcite/{XQGDPQ2F.js → MAIQZPRD.js} +2 -2
- package/dist/calcite/{KNR6IRPV.js → MCM6K5J2.js} +2 -2
- package/dist/calcite/{NBOYMFAO.js → MUZH72OM.js} +2 -2
- package/dist/calcite/{ACT2Z2T7.js → MVFRLHST.js} +2 -2
- package/dist/calcite/{MSO6KVMB.js → MWWJPT5E.js} +1 -1
- package/dist/calcite/{Y6ZO4YI5.js → MXTV22XP.js} +2 -2
- package/dist/calcite/{E47CQDD4.js → N44TQ6CV.js} +2 -2
- package/dist/calcite/{QAOHOFAP.js → N5Q2DQVR.js} +2 -2
- package/dist/calcite/{APHL6EHS.js → N6I2C23Z.js} +2 -2
- package/dist/calcite/{GBPIEDOY.js → NDDQ3AB3.js} +2 -2
- package/dist/calcite/{N6J3ML5H.js → NDRQ3PNO.js} +2 -2
- package/dist/calcite/{ICRA5J5Z.js → NG74GX67.js} +2 -2
- package/dist/calcite/{YADT3QIB.js → NHMMV4F7.js} +2 -2
- package/dist/calcite/{BXU3WXWJ.js → NMYC5JQI.js} +2 -2
- package/dist/calcite/{JQYM7CWS.js → NPP3V7KL.js} +2 -2
- package/dist/calcite/{UBDC4W4F.js → NPR3LJXK.js} +2 -2
- package/dist/calcite/{C7WCWLTK.js → NR7TPRG6.js} +2 -2
- package/dist/calcite/{ZRLLSPFF.js → O24NZIB2.js} +2 -2
- package/dist/calcite/{CS6W7PS5.js → OMLQBT5Q.js} +2 -2
- package/dist/calcite/{ISYU54AZ.js → ONRO7VQF.js} +2 -2
- package/dist/calcite/{DOEEF6O4.js → OONLY4X2.js} +2 -2
- package/dist/calcite/{C5VI6UOO.js → OXJFPZQJ.js} +2 -2
- package/dist/calcite/{TFINNTEV.js → P22OBBFD.js} +2 -2
- package/dist/calcite/{OUAXNRKL.js → P3V6PYSE.js} +2 -2
- package/dist/calcite/{VQKP2ZAP.js → PIMFNLCV.js} +2 -2
- package/dist/calcite/{S2CQQUWU.js → PIQR4VXX.js} +2 -2
- package/dist/calcite/{J3NTJHAN.js → PJOXO7FL.js} +2 -2
- package/dist/calcite/{ZHP2T2YT.js → PKK5D5ZF.js} +2 -2
- package/dist/calcite/{7YXHULH6.js → PLGJ2YIZ.js} +2 -2
- package/dist/calcite/{SIA357OZ.js → PMH7XGXT.js} +2 -2
- package/dist/calcite/{K73PVVZQ.js → POQ36WYI.js} +2 -2
- package/dist/calcite/{NLPV523R.js → PQGPAAD3.js} +2 -2
- package/dist/calcite/{3TR3ZUYT.js → PRGBKSXW.js} +2 -2
- package/dist/calcite/{GWIDGQEA.js → PYNYZ37B.js} +2 -2
- package/dist/calcite/{U6ESJ7LN.js → Q6KMPMWH.js} +1 -1
- package/dist/calcite/{A2DM4DH3.js → Q6LRUC2W.js} +2 -2
- package/dist/calcite/{4DFGRDV5.js → QQFGSCAI.js} +1 -1
- package/dist/calcite/{QECGRLCF.js → QX4XS5LH.js} +1 -1
- package/dist/calcite/{YVM2JJUN.js → QYCQZML2.js} +2 -2
- package/dist/calcite/{JZJ6WAKG.js → R4UH7IYY.js} +2 -2
- package/dist/calcite/{QTLGOROD.js → R7YMP4O2.js} +2 -2
- package/dist/calcite/{DONZGA2B.js → R7ZDHZDT.js} +2 -2
- package/dist/calcite/{KVH4SXJW.js → RID75IOO.js} +2 -2
- package/dist/calcite/{BHAQCUVN.js → RPXYKEGG.js} +2 -2
- package/dist/calcite/{QQGY3F5X.js → SLDR6367.js} +2 -2
- package/dist/calcite/{LT3NKBT3.js → SQXURFMU.js} +1 -1
- package/dist/calcite/{BB6VNEQ3.js → STISOEST.js} +2 -2
- package/dist/calcite/{FIOEKB4S.js → SX3M5TKJ.js} +1 -1
- package/dist/calcite/{EQVUOEC2.js → SYAFYROJ.js} +1 -1
- package/dist/calcite/{Q7NWLQFW.js → SYE5A7KT.js} +2 -2
- package/dist/calcite/{KXMN5ZK3.js → T2AFMFPR.js} +1 -1
- package/dist/calcite/{IQORT3FT.js → T3JZDDND.js} +2 -2
- package/dist/calcite/{5LGXKWY5.js → T3ORAXY7.js} +2 -2
- package/dist/calcite/{IPIXLNZA.js → TZLIOPQW.js} +2 -2
- package/dist/calcite/{ISCP7RAS.js → UA7WTKOZ.js} +2 -2
- package/dist/calcite/{YXORD5RU.js → UDA6KIUD.js} +2 -2
- package/dist/calcite/{ZE6MN7D3.js → UE3SB5I6.js} +2 -2
- package/dist/calcite/{6JCNM7LU.js → UF4PHKXU.js} +2 -2
- package/dist/calcite/{BRCU2MER.js → UKHRAAAD.js} +2 -2
- package/dist/calcite/{LUPFMB45.js → V6XRF5P5.js} +2 -2
- package/dist/calcite/{CME26SUG.js → V7MLCBU2.js} +2 -2
- package/dist/calcite/{L2DBBHM2.js → VA3BBZFM.js} +2 -2
- package/dist/calcite/{7OUQSSZ6.js → VLTPL33I.js} +2 -2
- package/dist/calcite/{UI5MIICK.js → VX7W55QI.js} +2 -2
- package/dist/calcite/{AWZZ3IEU.js → VXET4FHQ.js} +2 -2
- package/dist/calcite/{U4OGBE7J.js → W66CS434.js} +2 -2
- package/dist/calcite/{GBJ2X2AK.js → WAKGPF64.js} +2 -2
- package/dist/calcite/{VZYVQR3R.js → WHPTEDJC.js} +2 -2
- package/dist/calcite/{MNZNPJUV.js → WNFWTDPL.js} +1 -1
- package/dist/calcite/{Y5CBOZ2W.js → WPZXHW7O.js} +2 -2
- package/dist/calcite/{LBWTAXG6.js → WTI3MP7P.js} +2 -2
- package/dist/calcite/{7WWHLSYB.js → WTX434YM.js} +2 -2
- package/dist/calcite/{PDKFVHNW.js → WV2F5VAU.js} +2 -2
- package/dist/calcite/{QKZVPFWB.js → WWJV66H2.js} +1 -1
- package/dist/calcite/{ALAGY667.js → XFSXJD3D.js} +2 -2
- package/dist/calcite/{F73DGUZF.js → XNAJA7OV.js} +2 -2
- package/dist/calcite/{UFAOH5U4.js → XP3EDYS2.js} +2 -2
- package/dist/calcite/{424Z22JB.js → XQLVYAKM.js} +2 -2
- package/dist/calcite/{XJOZHFNR.js → XQQSM56Z.js} +1 -1
- package/dist/calcite/{S52W2GSC.js → XWE7G6LG.js} +2 -2
- package/dist/calcite/{YWFPATTQ.js → Y2HPCMOF.js} +1 -1
- package/dist/calcite/{H7KLOZZU.js → Y3UT22T3.js} +2 -2
- package/dist/calcite/{ZJUSUE6A.js → Y5UP4DQI.js} +2 -2
- package/dist/calcite/{T62H6AAA.js → YCSWFLCQ.js} +2 -2
- package/dist/calcite/{67QLOJXO.js → YDMBLA2W.js} +2 -2
- package/dist/calcite/{DSFG7NPT.js → YEZ7LLA5.js} +2 -2
- package/dist/calcite/{DXPH3YVO.js → YLMZ7XTM.js} +2 -2
- package/dist/calcite/{6K7QXOO5.js → YMN6YGXZ.js} +2 -2
- package/dist/calcite/{GIO4VIWZ.js → YSPCUOGL.js} +2 -2
- package/dist/calcite/{Y67PSBRG.js → ZPGYQBSC.js} +1 -1
- package/dist/calcite/{VGMX6I6S.js → ZZLFZJJ5.js} +2 -2
- package/dist/calcite/{IX4G6XWI.js → ZZVVRENQ.js} +2 -2
- package/dist/calcite/calcite.esm.js +2 -2
- package/dist/chunks/ExpandToggle.js +1 -1
- package/dist/chunks/FloatingArrow.js +1 -1
- package/dist/chunks/Heading.js +1 -1
- package/dist/chunks/Validation.js +1 -1
- package/dist/chunks/XButton.js +1 -1
- package/dist/chunks/_sortable.js +1 -1
- package/dist/chunks/array.js +1 -1
- package/dist/chunks/component.js +1 -1
- package/dist/chunks/core.js +1 -1
- package/dist/chunks/date.js +1 -1
- package/dist/chunks/dom.js +1 -1
- package/dist/chunks/dynamicClasses.js +1 -1
- package/dist/chunks/filter.js +1 -1
- package/dist/chunks/floating-ui.js +1 -1
- package/dist/chunks/form.js +1 -1
- package/dist/chunks/global.js +1 -1
- package/dist/chunks/guid.js +1 -1
- package/dist/chunks/input.js +1 -1
- package/dist/chunks/interact.min.js +1 -1
- package/dist/chunks/interactive.js +1 -1
- package/dist/chunks/key.js +1 -1
- package/dist/chunks/label.js +1 -1
- package/dist/chunks/locale.js +1 -1
- package/dist/chunks/logger.js +1 -1
- package/dist/chunks/math.js +1 -1
- package/dist/chunks/observers.js +1 -1
- package/dist/chunks/openCloseComponent.js +1 -1
- package/dist/chunks/resources.js +1 -1
- package/dist/chunks/resources2.js +1 -1
- package/dist/chunks/resources3.js +1 -1
- package/dist/chunks/resources4.js +1 -1
- package/dist/chunks/resources5.js +1 -1
- package/dist/chunks/resources6.js +1 -1
- package/dist/chunks/resources7.js +1 -1
- package/dist/chunks/resources8.js +1 -1
- package/dist/chunks/responsive.js +1 -1
- package/dist/chunks/runtime.js +4 -4
- package/dist/chunks/sortableComponent.js +1 -1
- package/dist/chunks/text.js +1 -1
- package/dist/chunks/useCancelable.js +1 -1
- package/dist/chunks/useFocusTrap.js +1 -1
- package/dist/chunks/usePreventDocumentScroll.js +1 -1
- package/dist/chunks/useSetFocus.js +1 -1
- package/dist/chunks/useT9n.js +1 -1
- package/dist/chunks/useTime.js +1 -1
- package/dist/chunks/utils.js +1 -1
- package/dist/chunks/utils2.js +1 -1
- package/dist/chunks/utils3.js +1 -1
- package/dist/chunks/utils4.js +1 -1
- package/dist/components/calcite-accordion/customElement.js +1 -1
- package/dist/components/calcite-accordion-item/customElement.d.ts +9 -0
- package/dist/components/calcite-accordion-item/customElement.js +8 -5
- package/dist/components/calcite-action/customElement.js +1 -1
- package/dist/components/calcite-action-bar/customElement.js +1 -1
- package/dist/components/calcite-action-group/customElement.js +1 -1
- package/dist/components/calcite-action-menu/customElement.js +1 -1
- package/dist/components/calcite-action-pad/customElement.js +1 -1
- package/dist/components/calcite-alert/customElement.js +1 -1
- package/dist/components/calcite-autocomplete/customElement.js +1 -1
- package/dist/components/calcite-autocomplete-item/customElement.js +1 -1
- package/dist/components/calcite-autocomplete-item-group/customElement.js +1 -1
- package/dist/components/calcite-avatar/customElement.js +1 -1
- package/dist/components/calcite-block/customElement.js +1 -1
- package/dist/components/calcite-block-group/customElement.js +1 -1
- package/dist/components/calcite-block-section/customElement.js +1 -1
- package/dist/components/calcite-button/customElement.js +1 -1
- package/dist/components/calcite-card/customElement.js +1 -1
- package/dist/components/calcite-card-group/customElement.js +1 -1
- package/dist/components/calcite-carousel/customElement.js +1 -1
- package/dist/components/calcite-carousel-item/customElement.js +1 -1
- package/dist/components/calcite-checkbox/customElement.js +1 -1
- package/dist/components/calcite-chip/customElement.js +1 -1
- package/dist/components/calcite-chip-group/customElement.js +1 -1
- package/dist/components/calcite-color-picker/customElement.js +1 -1
- package/dist/components/calcite-color-picker-hex-input/customElement.js +1 -1
- package/dist/components/calcite-color-picker-swatch/customElement.js +1 -1
- package/dist/components/calcite-combobox/customElement.js +1 -1
- package/dist/components/calcite-combobox-item/customElement.js +1 -1
- package/dist/components/calcite-combobox-item-group/customElement.js +1 -1
- package/dist/components/calcite-date-picker/customElement.js +1 -1
- package/dist/components/calcite-date-picker-day/customElement.js +1 -1
- package/dist/components/calcite-date-picker-month/customElement.js +1 -1
- package/dist/components/calcite-date-picker-month-header/customElement.js +1 -1
- package/dist/components/calcite-dialog/customElement.js +1 -1
- package/dist/components/calcite-dropdown/customElement.js +1 -1
- package/dist/components/calcite-dropdown-group/customElement.js +1 -1
- package/dist/components/calcite-dropdown-item/customElement.js +1 -1
- package/dist/components/calcite-fab/customElement.js +1 -1
- package/dist/components/calcite-filter/customElement.js +1 -1
- package/dist/components/calcite-flow/customElement.js +1 -1
- package/dist/components/calcite-flow-item/customElement.js +1 -1
- package/dist/components/calcite-graph/customElement.js +1 -1
- package/dist/components/calcite-handle/customElement.js +1 -1
- package/dist/components/calcite-icon/customElement.js +1 -1
- package/dist/components/calcite-inline-editable/customElement.js +1 -1
- package/dist/components/calcite-input/customElement.js +1 -1
- package/dist/components/calcite-input-date-picker/customElement.js +1 -1
- package/dist/components/calcite-input-message/customElement.js +1 -1
- package/dist/components/calcite-input-number/customElement.js +1 -1
- package/dist/components/calcite-input-text/customElement.js +1 -1
- package/dist/components/calcite-input-time-picker/customElement.js +1 -1
- package/dist/components/calcite-input-time-zone/customElement.js +1 -1
- package/dist/components/calcite-label/customElement.js +1 -1
- package/dist/components/calcite-link/customElement.js +1 -1
- package/dist/components/calcite-list/customElement.js +1 -1
- package/dist/components/calcite-list-item/customElement.js +1 -1
- package/dist/components/calcite-list-item-group/customElement.js +1 -1
- package/dist/components/calcite-loader/customElement.js +1 -1
- package/dist/components/calcite-menu/customElement.js +1 -1
- package/dist/components/calcite-menu-item/customElement.js +1 -1
- package/dist/components/calcite-meter/customElement.js +1 -1
- package/dist/components/calcite-modal/customElement.js +1 -1
- package/dist/components/calcite-navigation/customElement.js +1 -1
- package/dist/components/calcite-navigation-logo/customElement.js +1 -1
- package/dist/components/calcite-navigation-user/customElement.js +1 -1
- package/dist/components/calcite-notice/customElement.js +1 -1
- package/dist/components/calcite-option/customElement.js +1 -1
- package/dist/components/calcite-option-group/customElement.js +1 -1
- package/dist/components/calcite-pagination/customElement.js +1 -1
- package/dist/components/calcite-panel/customElement.js +1 -1
- package/dist/components/calcite-popover/customElement.js +1 -1
- package/dist/components/calcite-progress/customElement.js +1 -1
- package/dist/components/calcite-radio-button/customElement.js +1 -1
- package/dist/components/calcite-radio-button-group/customElement.js +1 -1
- package/dist/components/calcite-rating/customElement.js +1 -1
- package/dist/components/calcite-scrim/customElement.js +1 -1
- package/dist/components/calcite-segmented-control/customElement.js +1 -1
- package/dist/components/calcite-segmented-control-item/customElement.js +1 -1
- package/dist/components/calcite-select/customElement.js +1 -1
- package/dist/components/calcite-sheet/customElement.js +1 -1
- package/dist/components/calcite-shell/customElement.js +1 -1
- package/dist/components/calcite-shell-center-row/customElement.js +1 -1
- package/dist/components/calcite-shell-panel/customElement.js +1 -1
- package/dist/components/calcite-slider/customElement.js +1 -1
- package/dist/components/calcite-sort-handle/customElement.js +1 -1
- package/dist/components/calcite-sortable-list/customElement.js +1 -1
- package/dist/components/calcite-split-button/customElement.js +1 -1
- package/dist/components/calcite-stack/customElement.js +1 -1
- package/dist/components/calcite-stepper/customElement.js +1 -1
- package/dist/components/calcite-stepper-item/customElement.js +1 -1
- package/dist/components/calcite-swatch/customElement.js +1 -1
- package/dist/components/calcite-swatch-group/customElement.js +1 -1
- package/dist/components/calcite-switch/customElement.js +1 -1
- package/dist/components/calcite-tab/customElement.js +1 -1
- package/dist/components/calcite-tab-nav/customElement.js +1 -1
- package/dist/components/calcite-tab-title/customElement.js +1 -1
- package/dist/components/calcite-table/customElement.js +1 -1
- package/dist/components/calcite-table-cell/customElement.js +1 -1
- package/dist/components/calcite-table-header/customElement.js +1 -1
- package/dist/components/calcite-table-row/customElement.js +1 -1
- package/dist/components/calcite-tabs/customElement.js +1 -1
- package/dist/components/calcite-text-area/customElement.js +1 -1
- package/dist/components/calcite-tile/customElement.js +1 -1
- package/dist/components/calcite-tile-group/customElement.js +1 -1
- package/dist/components/calcite-tile-select/customElement.js +1 -1
- package/dist/components/calcite-tile-select-group/customElement.js +1 -1
- package/dist/components/calcite-time-picker/customElement.js +1 -1
- package/dist/components/calcite-tip/customElement.js +1 -1
- package/dist/components/calcite-tip-group/customElement.js +1 -1
- package/dist/components/calcite-tip-manager/customElement.js +1 -1
- package/dist/components/calcite-tooltip/customElement.js +1 -1
- package/dist/components/calcite-tree/customElement.js +1 -1
- package/dist/components/calcite-tree-item/customElement.js +1 -1
- package/dist/docs/api.json +9 -1
- package/dist/docs/docs.json +17 -1
- package/dist/docs/web-types.json +6 -1
- package/dist/index.js +1 -1
- package/dist/loader.js +2 -2
- package/dist/types/lumina.d.ts +1 -1
- package/dist/types/preact.d.ts +1 -1
- package/dist/types/react.d.ts +1 -1
- package/dist/types/stencil.d.ts +1 -1
- package/package.json +2 -2
- package/dist/calcite/MZOI74WG.js +0 -4
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
|
|
2
2
|
See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
|
|
3
|
-
v3.3.0-next.
|
|
4
|
-
import{a as C}from"./
|
|
3
|
+
v3.3.0-next.74 */
|
|
4
|
+
import{a as C}from"./GHSOC3YC.js";import{a as $}from"./NDDQ3AB3.js";import{e as z,q as I}from"./YEZ7LLA5.js";import"./I53J6CV7.js";import{D as g,E as v,Q as x,R as y,g as m,h as b,i as u,l as r}from"./ER3WVMVV.js";var D={flipRtl:"flip-rtl",svg:"svg"},k={},f={},w={s:16,m:24,l:32};function N({icon:e,scale:t}){let s=w[t],i=L(e),n=i.charAt(i.length-1)==="F";return`${n?i.substring(0,i.length-1):i}${s}${n?"F":""}`}async function U(e){let t=N(e),s=P(t);if(s)return s;f[t]||(f[t]=fetch(y(`./assets/icon/${t}.json`)).then(n=>n.json()).catch(()=>($.error(`${e.icon} (${e.scale}) icon failed to load`),"")));let i=await f[t];return k[t]=i,i}function B(e){return P(N(e))}function P(e){return k[e]}function L(e){let t=!isNaN(Number(e.charAt(0))),s=e.split("-");if(s.length>0){let n=/[a-z]/i;e=s.map((c,l)=>c.replace(n,function(a,p){return l===0&&p===0?a:a.toUpperCase()})).join("")}return t?`i${e}`:e}var R=m`:host{--calcite-internal-color-focus: var( --calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)) )}:host{display:inline-flex;color:var(--calcite-icon-color, var(--calcite-ui-icon-color, currentColor))}:host([scale=s]){inline-size:16px;block-size:16px;min-inline-size:16px;min-block-size:16px}:host([scale=m]){inline-size:24px;block-size:24px;min-inline-size:24px;min-block-size:24px}:host([scale=l]){inline-size:32px;block-size:32px;min-inline-size:32px;min-block-size:32px}.flip-rtl{transform:scaleX(-1)}.svg{display:block}:host([hidden]){display:none}[hidden]{display:none}`,d=class extends g{constructor(){super(...arguments),this.visible=!1,this.flipRtl=!1,this.icon=null,this.preload=!1,this.scale="m"}static{this.properties={pathData:[16,{},{state:!0}],visible:[16,{},{state:!0}],flipRtl:[7,{},{reflect:!0,type:Boolean}],icon:[3,{},{reflect:!0}],preload:[7,{},{reflect:!0,type:Boolean}],scale:[3,{},{reflect:!0}],textLabel:1}}static{this.styles=R}connectedCallback(){if(super.connectedCallback(),this.preload){this.visible=!0,this.loadIconPathData();return}this.visible||this.waitUntilVisible(()=>{this.visible=!0,this.loadIconPathData()})}willUpdate(t){(t.has("icon")&&(this.hasUpdated||this.icon!==null)||t.has("scale")&&(this.hasUpdated||this.scale!=="m"))&&this.loadIconPathData()}disconnectedCallback(){super.disconnectedCallback(),this.intersectionObserver?.disconnect(),this.intersectionObserver=null}async loadIconPathData(){let{icon:t,scale:s,visible:i}=this;if(!t||!i)return;let n={icon:t,scale:s},c=B(n)||await U(n);t===this.icon&&(this.pathData=c)}waitUntilVisible(t){if(this.intersectionObserver=C("intersection",s=>{s.forEach(i=>{i.isIntersecting&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null,t())})},{rootMargin:"50px"}),!this.intersectionObserver){t();return}this.intersectionObserver.observe(this.el)}render(){let{el:t,flipRtl:s,pathData:i,scale:n,textLabel:c}=this,l=z(t),h=w[n],a=!!c,p=[].concat(i||"");return this.el.ariaHidden=I(!a),this.el.ariaLabel=a?c:null,this.el.role=a?"img":null,b`<svg aria-hidden=true class=${v({[D.flipRtl]:l==="rtl"&&s,[D.svg]:!0})} fill=currentColor height=100% viewBox=${`0 0 ${h} ${h}`} width=100% xmlns=http://www.w3.org/2000/svg>${p.map(o=>typeof o=="string"?u`<path d=${o??r} />`:u`<path d=${o.d??r} opacity=${("opacity"in o?o.opacity:1)??r} />`)}</svg>`}};x("calcite-icon",d);export{d as Icon};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
|
|
2
2
|
See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
|
|
3
|
-
v3.3.0-next.
|
|
4
|
-
import{c as h,l as M,q as S,u as C}from"./
|
|
3
|
+
v3.3.0-next.74 */
|
|
4
|
+
import{c as h,l as M,q as S,u as C}from"./YEZ7LLA5.js";import"./I53J6CV7.js";import{D as b,H as A,Q as T,g as x,h as y,o as E}from"./ER3WVMVV.js";function w(u){return u?.tagName==="CALCITE-TREE-ITEM"}function D(u){return Array.from(u.querySelectorAll("calcite-tree-item:not([disabled])")).filter(t=>{let e=t;for(;e!==u&&e!==void 0;){let i=e.parentElement;if(!(!w(i)||!i.hasChildren||i.expanded))return!1;e=e.parentElement}return!0})}var k=x`:host{--calcite-internal-color-focus: var( --calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)) )}:host{display:block}:host(:focus){outline:2px solid transparent;outline-offset:2px}:host([hidden]){display:none}[hidden]{display:none}`,g=class extends b{constructor(){super(),this.items=[],this.lines=!1,this.parentExpanded=!1,this.scale="m",this.selectedItems=[],this.selectionMode="single",this.calciteTreeSelect=E({cancelable:!1}),this.listen("focus",this.onFocus),this.listen("focusin",this.onFocusIn),this.listen("focusout",this.onFocusOut),this.listen("calciteInternalTreeItemSelect",this.onInternalTreeItemSelect),this.listen("keydown",this.keyDownHandler)}static{this.properties={child:[7,{},{reflect:!0,type:Boolean}],lines:[7,{},{reflect:!0,type:Boolean}],parentExpanded:[5,{},{type:Boolean}],scale:[3,{},{reflect:!0}],selectedItems:[0,{},{attribute:!1}],selectionMode:[3,{},{reflect:!0}]}}static{this.styles=k}willUpdate(t){t.has("parentExpanded")&&(this.hasUpdated||this.parentExpanded!==!1)&&this.updateItems();let e=this.el.parentElement?.closest("calcite-tree");this.lines=e?e.lines:this.lines,this.scale=e?e.scale:this.scale,this.selectionMode=e?e.selectionMode:this.selectionMode,this.child=!!e}onFocus(){if(!this.child){let t=this.el.querySelector("calcite-tree-item[selected]:not([disabled])")||this.el.querySelector("calcite-tree-item:not([disabled])");M(t)}}onFocusIn(t){(t.relatedTarget===this.el||!this.el.contains(t.relatedTarget))&&this.el.removeAttribute("tabindex")}onFocusOut(t){!this.el.contains(t.relatedTarget)&&(this.el.tabIndex=this.getRootTabIndex())}onInternalTreeItemSelect(t){if(this.child)return;let e=t.target,i=h(e.querySelectorAll("calcite-tree-item"));if(t.preventDefault(),t.stopPropagation(),this.selectionMode==="ancestors"){this.updateAncestorTree(t);return}let o=this.selectionMode==="none",n=this.selectionMode!==null&&(!e.hasChildren||e.hasChildren&&(this.selectionMode==="children"||this.selectionMode==="multichildren")),l=this.selectionMode==="multichildren"&&e.hasChildren,c=!o&&t.detail.modifyCurrentSelection&&(this.selectionMode==="multiple"||this.selectionMode==="multichildren"),f=!c&&((this.selectionMode==="single"||this.selectionMode==="multiple")&&i.length<=0||this.selectionMode==="children"||this.selectionMode==="multichildren"||this.selectionMode==="single-persist"&&!e.hasChildren),d=["multiple","none","single","single-persist"].includes(this.selectionMode)&&e.hasChildren,a=[];n&&a.push(e),f&&h(this.el.querySelectorAll("calcite-tree-item[selected]")).forEach(r=>{a.includes(r)||(r.selected=!1)}),d&&["multiple","none","single","single-persist"].includes(this.selectionMode)&&(e.expanded=!e.expanded),l&&i.forEach(s=>{s.selected=!1,s.hasChildren&&(s.expanded=!1)}),c&&window.getSelection().removeAllRanges(),c&&e.selected?a.forEach(s=>{s.disabled||(s.selected=!1)}):o||a.forEach(s=>{s.disabled||(s.selected=this.selectionMode!=="single"||!s.selected)}),this.selectedItems=o?[]:h(this.el.querySelectorAll("calcite-tree-item")).filter(s=>s.selected),this.calciteTreeSelect.emit(),t.stopPropagation()}keyDownHandler(t){if(this.child)return;let e=this.el,i=t.target,o=["ArrowRight","ArrowDown","ArrowLeft","ArrowUp","Home","End","Tab"];if(!(w(i)&&this.el.contains(i))||!o.includes(t.key))return;let n=D(e);if(t.key==="Tab"){n.forEach(l=>l.tabIndex=-1);return}if(t.key==="ArrowDown"){let l=n.indexOf(i);n[l+1]?.focus(),t.preventDefault();return}if(t.key==="ArrowUp"){let l=n.indexOf(i);n[l-1]?.focus(),t.preventDefault();return}if(t.key==="ArrowLeft"){if(i.hasChildren&&i.expanded){i.expanded=!1,t.preventDefault();return}n.slice(0,n.indexOf(i)).reverse().find(f=>f.depth===i.depth-1)?.focus(),t.preventDefault();return}if(t.key==="ArrowRight"){if(!i.disabled&&i.hasChildren)if(!i.expanded)i.expanded=!0,t.preventDefault();else{let l=n.indexOf(i);n[l+1]?.focus(),t.preventDefault()}return}if(t.key==="Home"){let l=n.shift();l&&(l.focus(),t.preventDefault());return}if(t.key==="End"){let l=n.pop();l&&(l.focus(),t.preventDefault());return}}updateAncestorTree(t){let e=t.target,i=t.detail.updateItem;if(e.disabled||e.indeterminate&&!i)return;let o=[],n=e.parentElement.closest("calcite-tree-item");for(;n;)o.push(n),n=n.parentElement.closest("calcite-tree-item");let l=Array.from(e.querySelectorAll("calcite-tree-item:not([disabled])")),c=l.filter(s=>!s.hasChildren),f=l.filter(s=>s.hasChildren),d;i?d=e.hasChildren?!(e.selected||e.indeterminate):!e.selected:d=e.selected,c.forEach(s=>{s.selected=d,s.indeterminate=!1});function a(s,r){let m=s.filter(p=>p.selected),I=s.filter(p=>!p.selected);r.selected=m.length===s.length,r.indeterminate=m.length>0&&I.length>0}f.reverse().forEach(s=>{let r=Array.from(s.querySelectorAll(":scope > calcite-tree > calcite-tree-item"));a(r,s)}),i&&(e.hasChildren?a(l,e):(e.selected=d,e.indeterminate=!1)),o.forEach(s=>{let r=h(s.querySelectorAll("calcite-tree-item")),m=r.filter(p=>p.selected);if(m.length===0){s.selected=!1,s.indeterminate=!1;return}let I=m.length<r.length;s.indeterminate=I,s.selected=!I}),this.selectedItems=h(this.el.querySelectorAll("calcite-tree-item")).filter(s=>s.selected),i&&this.calciteTreeSelect.emit()}updateItems(){this.items.forEach(t=>t.parentExpanded=this.parentExpanded)}handleDefaultSlotChange(t){let e=C(t).filter(i=>i.matches("calcite-tree-item"));this.items=e,this.updateItems()}getRootTabIndex(){return this.child?-1:0}render(){return this.el.ariaMultiSelectable=this.child?void 0:S(this.selectionMode==="multiple"||this.selectionMode==="multichildren"),this.el.role=this.child?void 0:"tree",A(this.el,"tabIndex",this.getRootTabIndex()),y`<slot @slotchange=${this.handleDefaultSlotChange}></slot>`}};T("calcite-tree",g);export{g as Tree};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
|
|
2
2
|
See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
|
|
3
|
-
v3.3.0-next.
|
|
4
|
-
import{e as d}from"./
|
|
3
|
+
v3.3.0-next.74 */
|
|
4
|
+
import{e as d}from"./YEZ7LLA5.js";import"./I53J6CV7.js";import{D as l,E as t,F as n,J as s,Q as c,g as o,h as r}from"./ER3WVMVV.js";var v=o`:host{--calcite-internal-color-focus: var( --calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)) )}:host{position:relative;display:block;inline-size:100%}.track,.bar{position:absolute;inset-block-start:0px;block-size:2px}.track{z-index:var(--calcite-z-index);inline-size:100%;overflow:hidden;background-color:var(--calcite-progress-background-color, var(--calcite-color-border-3))}.bar{z-index:var(--calcite-z-index);background-color:var(--calcite-progress-fill-color, var(--calcite-color-brand))}@media (forced-colors: active){.track{background-color:highlightText}.bar{background-color:linkText}}.indeterminate{inline-size:20%;animation:looping-progress-bar-ani calc(var(--calcite-internal-animation-timing-medium) / var(--calcite-internal-duration-factor) * 11 / var(--calcite-internal-duration-factor)) linear infinite}.indeterminate.calcite--rtl{animation-name:looping-progress-bar-ani-rtl}.reversed{animation-direction:reverse}.text{padding-inline:0px;padding-block:1rem 0px;text-align:center;font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-progress-text-color, var(--calcite-color-text-2))}@keyframes looping-progress-bar-ani{0%{transform:translate3d(-100%,0,0)}50%{inline-size:40%}to{transform:translate3d(600%,0,0)}}@keyframes looping-progress-bar-ani-rtl{0%{transform:translate3d(100%,0,0)}50%{inline-size:40%}to{transform:translate3d(-600%,0,0)}}:host([hidden]){display:none}[hidden]{display:none}`,i={track:"track",bar:"bar",text:"text"},a=class extends l{constructor(){super(...arguments),this.reversed=!1,this.type="determinate",this.value=0}static{this.properties={label:1,reversed:[7,{},{reflect:!0,type:Boolean}],text:1,type:[3,{},{reflect:!0}],value:[9,{},{type:Number}]}}static{this.styles=v}render(){let e=this.type==="determinate",m=e?{width:`${this.value}%`}:{},p=d(this.el);return r`<div .ariaLabel=${this.label||this.text} .ariaValueMax=${e?"100":void 0} .ariaValueMin=${e?"0":void 0} .ariaValueNow=${e?this.value:void 0} role=progressbar><div class=${t(i.track)}><div class=${t({[i.bar]:!0,indeterminate:this.type==="indeterminate",[s.rtl]:p==="rtl",reversed:this.reversed})} style=${n(m)}></div></div>${this.text?r`<div class=${t(i.text)}>${this.text}</div>`:null}</div>`}};c("calcite-progress",a);export{a as Progress};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
|
|
2
2
|
See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
|
|
3
|
-
v3.3.0-next.
|
|
4
|
-
import{a as c}from"./
|
|
3
|
+
v3.3.0-next.74 */
|
|
4
|
+
import{a as c}from"./I4KXJBUZ.js";import{b as m}from"./V7MLCBU2.js";import"./T2AFMFPR.js";var u=n=>n.map(o=>{let{label:a}=o,t=m(a);return{...o,continent:t}});async function v(){let n=[],o=c.map(t=>({label:t})),a=u(o);for(let t of a){let{label:e,continent:l}=t;if(t.visited)continue;t.visited=!0;let i={label:l,tzs:[{label:e}]};for(let r of a.filter(s=>!s.visited)){let{label:s,continent:b}=r;if(l===b){let p={label:s};i.tzs.push(p),r.visited=!0}}n.push(i)}return n.map(t=>(t.tzs=t.tzs.sort((e,l)=>e.label.localeCompare(l.label)),{label:t.label,tzs:t.tzs.map(e=>e.label)})).sort((t,e)=>t.label.localeCompare(e.label))}export{v as groupByRegion};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
|
|
2
2
|
See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
|
|
3
|
-
v3.3.0-next.
|
|
4
|
-
import{a as K}from"./VQKP2ZAP.js";import{b as V}from"./ZRLLSPFF.js";import{a as z}from"./KNR6IRPV.js";import{a as U,c as R,e as G,f as q,h as W}from"./R2S37QE6.js";import{c as M,d as L}from"./SZMARKC4.js";import{a as v,c as x,e as H,g as p,h as P}from"./ISYU54AZ.js";import{a as F}from"./IPIXLNZA.js";import{a as T,b as O}from"./E47CQDD4.js";import{a as D}from"./T62H6AAA.js";import{a as B}from"./ZNBK3H5J.js";import{a as g}from"./KVE5DW4O.js";import{a as S}from"./ICRA5J5Z.js";import{a as w}from"./YXORD5RU.js";import{b as E}from"./HZCA2LTL.js";import"./C7WCWLTK.js";import"./GBPIEDOY.js";import{t as b}from"./DSFG7NPT.js";import{a as A}from"./R2IXC3A7.js";import{C as m,D as C,E as r,I as f,Q as k,g as $,h as d,l as n,o as c}from"./BOMDSRVT.js";var J=$`:host{--calcite-internal-color-focus: var( --calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)) )}:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{position:relative;display:block}.input-container{position:relative;display:flex;flex:1 1 auto;flex-wrap:nowrap}.input{width:100%;--calcite-input-prefix-size: var(--calcite-autocomplete-input-prefix-size);--calcite-input-suffix-size: var(--calcite-autocomplete-input-suffix-size);--calcite-input-background-color: var(--calcite-autocomplete-input-background-color);--calcite-input-border-color: var(--calcite-autocomplete-input-border-color);--calcite-input-corner-radius: var(--calcite-autocomplete-input-corner-radius);--calcite-input-shadow: var(--calcite-autocomplete-input-shadow);--calcite-input-icon-color: var(--calcite-autocomplete-input-icon-color);--calcite-input-text-color: var(--calcite-autocomplete-input-text-color);--calcite-input-placeholder-text-color: var(--calcite-autocomplete-input-placeholder-text-color);--calcite-input-actions-background-color: var(--calcite-autocomplete-input-actions-background-color);--calcite-input-actions-background-color-hover: var(--calcite-autocomplete-input-actions-background-color-hover);--calcite-input-actions-background-color-press: var(--calcite-autocomplete-input-actions-background-color-press);--calcite-input-actions-icon-color: var(--calcite-autocomplete-input-actions-icon-color);--calcite-input-actions-icon-color-hover: var(--calcite-autocomplete-input-actions-icon-color-hover);--calcite-input-actions-icon-color-press: var(--calcite-autocomplete-input-actions-icon-color-press);--calcite-input-loading-background-color: var(--calcite-autocomplete-input-loading-background-color);--calcite-input-loading-fill-color: var(--calcite-autocomplete-input-loading-fill-color);--calcite-input-prefix-background-color: var(--calcite-autocomplete-input-prefix-background-color);--calcite-input-prefix-text-color: var(--calcite-autocomplete-input-prefix-text-color);--calcite-input-suffix-background-color: var(--calcite-autocomplete-input-suffix-background-color);--calcite-input-suffix-text-color: var(--calcite-autocomplete-input-suffix-text-color)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.content-container{box-sizing:border-box;width:100%}.floating-ui-container{--calcite-floating-ui-z-index: var(--calcite-z-index-dropdown);inline-size:max-content;display:none;max-inline-size:100vw;max-block-size:100vh;inset-block-start:0;left:0;z-index:var(--calcite-floating-ui-z-index)}@starting-style{.floating-ui-container{opacity:0;inset-block-start:0;left:0}}.floating-ui-container .calcite-floating-ui-anim{position:relative;transition-duration:var(--calcite-floating-ui-transition);transition-property:inset-block-start,left,opacity,display;transition-behavior:allow-discrete;opacity:0;box-shadow:0 0 16px #00000029;z-index:var(--calcite-z-index);border-radius:.25rem}.floating-ui-container[data-placement^=bottom] .calcite-floating-ui-anim{inset-block-start:-5px}.floating-ui-container[data-placement^=top] .calcite-floating-ui-anim{inset-block-start:5px}.floating-ui-container[data-placement^=left] .calcite-floating-ui-anim{left:5px}.floating-ui-container[data-placement^=right] .calcite-floating-ui-anim{left:-5px}.floating-ui-container[data-placement] .calcite-floating-ui-anim--active{opacity:1;inset-block-start:0;left:0}@starting-style{.floating-ui-container[data-placement] .calcite-floating-ui-anim--active{opacity:0}}.content-container .calcite-floating-ui-anim{max-height:45vh;width:100%;overflow-y:auto;color:var(--calcite-autocomplete-text-color, var(--calcite-color-text-1));background-color:var(--calcite-autocomplete-background-color, var(--calcite-color-foreground-1));border-radius:var(--calcite-autocomplete-corner-radius, var(--calcite-corner-radius-round))}.content--hidden{display:none}@media (forced-colors: active){.floating-ui-container--active{border:1px solid canvasText}}.screen-readers-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:.5rem}:host([scale=s]) .validation-container{padding-block-start:.25rem}::slotted(input[slot=hidden-form-input]){margin:0!important;opacity:0!important;outline:none!important;padding:0!important;position:absolute!important;inset:0!important;transform:none!important;-webkit-appearance:none!important;z-index:-1!important}:host([hidden]){display:none}[hidden]{display:none}`,N={contentBottom:"content-bottom",contentTop:"content-top"},l={inputContainer:"input-container",input:"input",contentContainer:"content-container",contentAnimation:"content-animation",content:"content",contentHidden:"content--hidden",floatingUIContainer:"floating-ui-container",floatingUIContainerActive:"floating-ui-container--active",screenReadersOnly:"screen-readers-only"},j="autocomplete",y={validationMessage:"autocompleteValidationMessage",input:h=>`${j}-input-${h}`,list:h=>`${j}-list-${h}`},Q="calcite-autocomplete-item-group",X="calcite-autocomplete-item",I=class extends C{constructor(){super(),this.guid=A(),this.attributeWatch=E(["autofocus","enterkeyhint","inputmode"],this.handleGlobalAttributesChanged),this.inputId=y.input(this.guid),this.listId=y.list(this.guid),this.messages=S(),this.transitionProp="opacity",this.mutationObserver=g("mutation",()=>this.getAllItemsDebounced()),this.focusSetter=w()(this),this.resizeObserver=g("resize",()=>{this.setFloatingElSize()}),this.cancelable=D()(this),this.getAllItemsDebounced=B(this.getAllItems,0),this.activeDescendant="",this.activeIndex=-1,this.hasContentBottom=!1,this.hasContentTop=!1,this.items=[],this.groups=[],this.alignment="start",this.disabled=!1,this.iconFlipRtl=!1,this.loading=!1,this.open=!1,this.overlayPositioning="absolute",this.placement=v,this.readOnly=!1,this.required=!1,this.scale="m",this.status="idle",this.validity={valid:!1,badInput:!1,customError:!1,patternMismatch:!1,rangeOverflow:!1,rangeUnderflow:!1,stepMismatch:!1,tooLong:!1,tooShort:!1,typeMismatch:!1,valueMissing:!1},this.value="",this.calciteAutocompleteBeforeClose=c({cancelable:!1}),this.calciteAutocompleteBeforeOpen=c({cancelable:!1}),this.calciteAutocompleteChange=c({cancelable:!1}),this.calciteAutocompleteClose=c({cancelable:!1}),this.calciteAutocompleteOpen=c({cancelable:!1}),this.calciteAutocompleteTextChange=c({cancelable:!1}),this.calciteAutocompleteTextInput=c({cancelable:!1}),this.listenOn(document,"click",this.documentClickHandler),this.listen("calciteAutocompleteItemSelect",this.handleAutocompleteItemSelect)}static{this.properties={activeDescendant:[16,{},{state:!0}],activeIndex:[16,{},{state:!0}],hasContentBottom:[16,{},{state:!0}],hasContentTop:[16,{},{state:!0}],items:[16,{},{state:!0}],groups:[16,{},{state:!0}],isOpen:[16,{},{state:!0}],enabledItems:[16,{},{state:!0}],alignment:[3,{},{reflect:!0}],autocomplete:[0,{},{attribute:!1}],disabled:[7,{},{reflect:!0,type:Boolean}],flipPlacements:[0,{},{attribute:!1}],form:[3,{},{reflect:!0}],icon:[3,{converter:f},{reflect:!0}],iconFlipRtl:[7,{},{reflect:!0,type:Boolean}],inputValue:1,label:1,loading:[7,{},{reflect:!0,type:Boolean}],maxLength:[11,{},{reflect:!0,type:Number}],messageOverrides:[0,{},{attribute:!1}],minLength:[11,{},{reflect:!0,type:Number}],name:[3,{},{reflect:!0}],open:[7,{},{reflect:!0,type:Boolean}],overlayPositioning:[3,{},{reflect:!0}],pattern:1,placeholder:1,placement:[3,{},{reflect:!0}],prefixText:1,readOnly:[7,{},{reflect:!0,type:Boolean}],required:[7,{},{reflect:!0,type:Boolean}],scale:[3,{},{reflect:!0}],status:[3,{},{reflect:!0}],suffixText:1,validationIcon:[3,{converter:f},{reflect:!0}],validationMessage:1,validity:[0,{},{attribute:!1}],value:1}}static{this.styles=J}get isOpen(){return this.open&&(this.hasContentTop||this.hasContentBottom||this.items.length>0)}get enabledItems(){return this.items.filter(t=>!t.disabled)}async reposition(t=!1){let{floatingEl:e,referenceEl:s,placement:i,overlayPositioning:o,flipPlacements:a}=this;return H(this,{floatingEl:e,referenceEl:s,overlayPositioning:o,placement:i,flipPlacements:a,type:"menu"},t)}async scrollContentTo(t){this.transitionEl?.scrollTo(t)}async selectText(){return this.referenceEl.selectText()}async setFocus(t){return this.focusSetter(()=>this.referenceEl,t)}connectedCallback(){super.connectedCallback(),this.mutationObserver?.observe(this.el,{childList:!0,subtree:!0}),M(this),R(this),this.defaultInputValue=this.inputValue||"",this.getAllItemsDebounced(),p(this),this.cancelable.add(this.getAllItemsDebounced)}async load(){this.getAllItemsDebounced()}willUpdate(t){t.has("disabled")&&(this.hasUpdated||this.disabled!==!1)&&this.handleDisabledChange(this.disabled),t.has("open")&&(this.hasUpdated||this.open!==!1)&&this.openHandler(),(t.has("flipPlacements")||t.has("overlayPositioning")&&(this.hasUpdated||this.overlayPositioning!=="absolute")||t.has("placement")&&(this.hasUpdated||this.placement!==v))&&this.reposition(!0);let e=!1;t.has("inputValue")&&(this.hasUpdated||this.inputValue)&&(this.inputValueMatchPattern=this.inputValue&&new RegExp(`(${V(this.inputValue)})`,"i"),this.updateItems(),this.updateGroups(),e=!0),!e&&t.has("scale")&&(this.hasUpdated||this.scale!=="m")&&(this.updateItems(),this.updateGroups(),e=!0),!e&&t.has("activeIndex")&&(this.hasUpdated||this.activeIndex!==-1)&&this.updateItems()}updated(){T(this)}loaded(){q(this,this.value||""),this.defaultInputValue=this.inputValue||"",p(this)}disconnectedCallback(){super.disconnectedCallback(),this.mutationObserver?.disconnect(),this.resizeObserver?.disconnect(),L(this),G(this),P(this)}setFloatingElSize(){let{referenceEl:t,floatingEl:e}=this;!t||!e||(e.style.inlineSize=`${t.clientWidth}px`)}handleGlobalAttributesChanged(){this.requestUpdate()}handleDisabledChange(t){t||(this.open=!1)}openHandler(){if(F(this),this.open||(this.activeIndex=-1),this.disabled){this.open=!1;return}this.setFloatingElSize(),this.reposition(!0)}async documentClickHandler(t){this.disabled||t.composedPath().includes(this.el)||(this.open=!1)}async handleAutocompleteItemSelect(t){this.value=t.target.value,this.emitChange(),await this.setFocus(),this.open=!1}onLabelClick(){this.setFocus()}onFormReset(){this.inputValue=this.defaultInputValue}onBeforeOpen(){this.calciteAutocompleteBeforeOpen.emit()}onOpen(){this.calciteAutocompleteOpen.emit()}onBeforeClose(){this.calciteAutocompleteBeforeClose.emit()}onClose(){this.calciteAutocompleteClose.emit()}emitChange(){this.calciteAutocompleteChange.emit()}updateGroups(){this.groups.forEach((t,e,s)=>{t.scale=this.scale,e===0&&(t.disableSpacing=!0);let i=s[e+1];i&&(i.disableSpacing=t.children.length===0)})}updateItems(){let t=null;this.items.forEach(e=>{e.scale=this.scale,e.inputValueMatchPattern=this.inputValueMatchPattern}),this.enabledItems.forEach((e,s)=>{let i=s===this.activeIndex;i&&(t=e.guid),e.active=i}),this.activeDescendant=t}handleInputFocus(){this.open=!0}handleContentTopSlotChange(t){this.hasContentTop=b(t)}handleContentBottomSlotChange(t){this.hasContentBottom=b(t)}getAllItems(){let{el:t}=this;this.groups=Array.from(t.querySelectorAll(Q)),this.items=Array.from(t.querySelectorAll(X)),this.updateItems(),this.updateGroups()}setReferenceEl(t){this.referenceEl=t,t&&(this.resizeObserver?.observe(t),p(this))}keyDownHandler(t){let{defaultPrevented:e,key:s}=t;if(e)return;let{open:i,activeIndex:o,enabledItems:a}=this,u=a.length&&o>-1?a[o]:null;switch(s){case"Escape":i&&(this.open=!1,t.preventDefault());break;case"Tab":this.open=!1;break;case"Enter":i&&u?(this.value=u.value,u.emitSelectEvent(),this.open=!1,t.preventDefault()):t.defaultPrevented||U(this)&&t.preventDefault();break;case"ArrowDown":a.length&&(this.open=!0,this.activeIndex=o!==-1?Math.min(o+1,a.length-1):0,this.scrollToActiveItem(),t.preventDefault());break;case"ArrowUp":a.length&&(this.open=!0,this.activeIndex=o!==-1?Math.max(o-1,0):a.length-1,this.scrollToActiveItem(),t.preventDefault());break;case"Home":a.length&&(this.open=!0,this.activeIndex=0,this.scrollToActiveItem(),t.preventDefault());break;case"End":a.length&&(this.open=!0,this.activeIndex=a.length-1,this.scrollToActiveItem(),t.preventDefault());break}}scrollToActiveItem(){this.enabledItems[this.activeIndex]?.scrollIntoView({block:"nearest"})}changeHandler(t){t.stopPropagation(),this.inputValue=t.target.value,this.calciteAutocompleteTextChange.emit()}inputClickHandler(t){t.defaultPrevented||(this.open=!0)}inputHandler(t){t.stopPropagation(),this.inputValue=t.target.value,this.open=this.inputValue?.length>0,this.calciteAutocompleteTextInput.emit()}setFloatingEl(t){this.floatingEl=t,p(this)}setTransitionEl(t){t&&(this.transitionEl=t)}render(){let{disabled:t,listId:e,inputId:s,isOpen:i}=this,o=this.el.autofocus,a=this.el.enterKeyHint,u=this.el.inputMode;return O({disabled:t,children:d`<div class=${r(l.inputContainer)}><calcite-input .alignment=${this.alignment} aria-activedescendant=${this.activeDescendant??n} aria-controls=${e??n} aria-owns=${e??n} aria-autocomplete=list .ariaExpanded=${i} aria-haspopup=listbox .autocomplete=${this.autocomplete} .autofocus=${o} class=${r(l.input)} clearable .disabled=${t} enterkeyhint=${a??n} .form=${this.form} .icon=${this.icon??!0} .iconFlipRtl=${this.iconFlipRtl} id=${s??n} inputmode=${u??n} .label=${this.label} .loading=${this.loading} .maxLength=${this.maxLength} .messageOverrides=${this.messages} .minLength=${this.minLength} .name=${this.name} @click=${this.inputClickHandler} @keydown=${this.keyDownHandler} @calciteInputChange=${this.changeHandler} @calciteInputInput=${this.inputHandler} @calciteInternalInputFocus=${this.handleInputFocus} .pattern=${this.pattern} .placeholder=${this.placeholder} .prefixText=${this.prefixText} .readOnly=${this.readOnly} role=combobox .scale=${this.scale} .status=${this.status} .suffixText=${this.suffixText} type=search .value=${this.inputValue} ${m(this.setReferenceEl)}></calcite-input>${this.renderListBox()}<div class=${r({[l.contentContainer]:!0,[l.floatingUIContainer]:!0,[l.floatingUIContainerActive]:i})} ${m(this.setFloatingEl)}><div class=${r({[l.contentAnimation]:!0,[x.animation]:!0,[x.animationActive]:i})} ${m(this.setTransitionEl)}><div class=${r({[l.content]:!0,[l.contentHidden]:!i})}><slot name=${N.contentTop} @slotchange=${this.handleContentTopSlotChange}></slot><slot aria-hidden=true></slot><slot name=${N.contentBottom} @slotchange=${this.handleContentBottomSlotChange}></slot></div></div></div></div>${W({component:this})}${this.validationMessage&&this.status==="invalid"?K({icon:this.validationIcon,id:y.validationMessage,message:this.validationMessage,scale:this.scale,status:this.status}):null}`})}renderListBox(){return d`<ul aria-labelledby=${this.inputId??n} aria-live=polite class=${r(l.screenReadersOnly)} id=${this.listId??n} role=listbox tabindex=-1>${this.renderListBoxOptions()}</ul>`}renderListBoxOptions(){return z(this.items.filter(t=>!!(t.label||t.heading)),t=>t.guid,t=>d`<li .ariaDisabled=${t.disabled} .ariaLabel=${t.label} id=${t.guid??n} role=option tabindex=-1>${t.heading}${t.description}</li>`)}};k("calcite-autocomplete",I);export{I as Autocomplete};
|
|
3
|
+
v3.3.0-next.74 */
|
|
4
|
+
import{a as K}from"./PIMFNLCV.js";import{b as V}from"./O24NZIB2.js";import{a as z}from"./MCM6K5J2.js";import{a as U,c as R,e as G,f as q,h as W}from"./HGD2YEPZ.js";import{c as M,d as L}from"./5KYQDHJL.js";import{a as v,c as x,e as H,g as p,h as P}from"./ONRO7VQF.js";import{a as F}from"./TZLIOPQW.js";import{a as O,b as S}from"./N44TQ6CV.js";import{a as D}from"./YCSWFLCQ.js";import{a as B}from"./KMRKFSXM.js";import{a as g}from"./GHSOC3YC.js";import{a as T}from"./NG74GX67.js";import{a as w}from"./UDA6KIUD.js";import{b as E}from"./D7F33WOR.js";import"./NR7TPRG6.js";import"./NDDQ3AB3.js";import{t as b}from"./YEZ7LLA5.js";import{a as A}from"./I53J6CV7.js";import{C as m,D as C,E as r,I as f,Q as k,g as $,h as d,l as n,o as c}from"./ER3WVMVV.js";var J=$`:host{--calcite-internal-color-focus: var( --calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)) )}:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{position:relative;display:block}.input-container{position:relative;display:flex;flex:1 1 auto;flex-wrap:nowrap}.input{width:100%;--calcite-input-prefix-size: var(--calcite-autocomplete-input-prefix-size);--calcite-input-suffix-size: var(--calcite-autocomplete-input-suffix-size);--calcite-input-background-color: var(--calcite-autocomplete-input-background-color);--calcite-input-border-color: var(--calcite-autocomplete-input-border-color);--calcite-input-corner-radius: var(--calcite-autocomplete-input-corner-radius);--calcite-input-shadow: var(--calcite-autocomplete-input-shadow);--calcite-input-icon-color: var(--calcite-autocomplete-input-icon-color);--calcite-input-text-color: var(--calcite-autocomplete-input-text-color);--calcite-input-placeholder-text-color: var(--calcite-autocomplete-input-placeholder-text-color);--calcite-input-actions-background-color: var(--calcite-autocomplete-input-actions-background-color);--calcite-input-actions-background-color-hover: var(--calcite-autocomplete-input-actions-background-color-hover);--calcite-input-actions-background-color-press: var(--calcite-autocomplete-input-actions-background-color-press);--calcite-input-actions-icon-color: var(--calcite-autocomplete-input-actions-icon-color);--calcite-input-actions-icon-color-hover: var(--calcite-autocomplete-input-actions-icon-color-hover);--calcite-input-actions-icon-color-press: var(--calcite-autocomplete-input-actions-icon-color-press);--calcite-input-loading-background-color: var(--calcite-autocomplete-input-loading-background-color);--calcite-input-loading-fill-color: var(--calcite-autocomplete-input-loading-fill-color);--calcite-input-prefix-background-color: var(--calcite-autocomplete-input-prefix-background-color);--calcite-input-prefix-text-color: var(--calcite-autocomplete-input-prefix-text-color);--calcite-input-suffix-background-color: var(--calcite-autocomplete-input-suffix-background-color);--calcite-input-suffix-text-color: var(--calcite-autocomplete-input-suffix-text-color)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.content-container{box-sizing:border-box;width:100%}.floating-ui-container{--calcite-floating-ui-z-index: var(--calcite-z-index-dropdown);inline-size:max-content;display:none;max-inline-size:100vw;max-block-size:100vh;inset-block-start:0;left:0;z-index:var(--calcite-floating-ui-z-index)}@starting-style{.floating-ui-container{opacity:0;inset-block-start:0;left:0}}.floating-ui-container .calcite-floating-ui-anim{position:relative;transition-duration:var(--calcite-floating-ui-transition);transition-property:inset-block-start,left,opacity,display;transition-behavior:allow-discrete;opacity:0;box-shadow:0 0 16px #00000029;z-index:var(--calcite-z-index);border-radius:.25rem}.floating-ui-container[data-placement^=bottom] .calcite-floating-ui-anim{inset-block-start:-5px}.floating-ui-container[data-placement^=top] .calcite-floating-ui-anim{inset-block-start:5px}.floating-ui-container[data-placement^=left] .calcite-floating-ui-anim{left:5px}.floating-ui-container[data-placement^=right] .calcite-floating-ui-anim{left:-5px}.floating-ui-container[data-placement] .calcite-floating-ui-anim--active{opacity:1;inset-block-start:0;left:0}@starting-style{.floating-ui-container[data-placement] .calcite-floating-ui-anim--active{opacity:0}}.content-container .calcite-floating-ui-anim{max-height:45vh;width:100%;overflow-y:auto;color:var(--calcite-autocomplete-text-color, var(--calcite-color-text-1));background-color:var(--calcite-autocomplete-background-color, var(--calcite-color-foreground-1));border-radius:var(--calcite-autocomplete-corner-radius, var(--calcite-corner-radius-round))}.content--hidden{display:none}@media (forced-colors: active){.floating-ui-container--active{border:1px solid canvasText}}.screen-readers-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:.5rem}:host([scale=s]) .validation-container{padding-block-start:.25rem}::slotted(input[slot=hidden-form-input]){margin:0!important;opacity:0!important;outline:none!important;padding:0!important;position:absolute!important;inset:0!important;transform:none!important;-webkit-appearance:none!important;z-index:-1!important}:host([hidden]){display:none}[hidden]{display:none}`,N={contentBottom:"content-bottom",contentTop:"content-top"},l={inputContainer:"input-container",input:"input",contentContainer:"content-container",contentAnimation:"content-animation",content:"content",contentHidden:"content--hidden",floatingUIContainer:"floating-ui-container",floatingUIContainerActive:"floating-ui-container--active",screenReadersOnly:"screen-readers-only"},j="autocomplete",y={validationMessage:"autocompleteValidationMessage",input:h=>`${j}-input-${h}`,list:h=>`${j}-list-${h}`},Q="calcite-autocomplete-item-group",X="calcite-autocomplete-item",I=class extends C{constructor(){super(),this.guid=A(),this.attributeWatch=E(["autofocus","enterkeyhint","inputmode"],this.handleGlobalAttributesChanged),this.inputId=y.input(this.guid),this.listId=y.list(this.guid),this.messages=T(),this.transitionProp="opacity",this.mutationObserver=g("mutation",()=>this.getAllItemsDebounced()),this.focusSetter=w()(this),this.resizeObserver=g("resize",()=>{this.setFloatingElSize()}),this.cancelable=D()(this),this.getAllItemsDebounced=B(this.getAllItems,0),this.activeDescendant="",this.activeIndex=-1,this.hasContentBottom=!1,this.hasContentTop=!1,this.items=[],this.groups=[],this.alignment="start",this.disabled=!1,this.iconFlipRtl=!1,this.loading=!1,this.open=!1,this.overlayPositioning="absolute",this.placement=v,this.readOnly=!1,this.required=!1,this.scale="m",this.status="idle",this.validity={valid:!1,badInput:!1,customError:!1,patternMismatch:!1,rangeOverflow:!1,rangeUnderflow:!1,stepMismatch:!1,tooLong:!1,tooShort:!1,typeMismatch:!1,valueMissing:!1},this.value="",this.calciteAutocompleteBeforeClose=c({cancelable:!1}),this.calciteAutocompleteBeforeOpen=c({cancelable:!1}),this.calciteAutocompleteChange=c({cancelable:!1}),this.calciteAutocompleteClose=c({cancelable:!1}),this.calciteAutocompleteOpen=c({cancelable:!1}),this.calciteAutocompleteTextChange=c({cancelable:!1}),this.calciteAutocompleteTextInput=c({cancelable:!1}),this.listenOn(document,"click",this.documentClickHandler),this.listen("calciteAutocompleteItemSelect",this.handleAutocompleteItemSelect)}static{this.properties={activeDescendant:[16,{},{state:!0}],activeIndex:[16,{},{state:!0}],hasContentBottom:[16,{},{state:!0}],hasContentTop:[16,{},{state:!0}],items:[16,{},{state:!0}],groups:[16,{},{state:!0}],isOpen:[16,{},{state:!0}],enabledItems:[16,{},{state:!0}],alignment:[3,{},{reflect:!0}],autocomplete:[0,{},{attribute:!1}],disabled:[7,{},{reflect:!0,type:Boolean}],flipPlacements:[0,{},{attribute:!1}],form:[3,{},{reflect:!0}],icon:[3,{converter:f},{reflect:!0}],iconFlipRtl:[7,{},{reflect:!0,type:Boolean}],inputValue:1,label:1,loading:[7,{},{reflect:!0,type:Boolean}],maxLength:[11,{},{reflect:!0,type:Number}],messageOverrides:[0,{},{attribute:!1}],minLength:[11,{},{reflect:!0,type:Number}],name:[3,{},{reflect:!0}],open:[7,{},{reflect:!0,type:Boolean}],overlayPositioning:[3,{},{reflect:!0}],pattern:1,placeholder:1,placement:[3,{},{reflect:!0}],prefixText:1,readOnly:[7,{},{reflect:!0,type:Boolean}],required:[7,{},{reflect:!0,type:Boolean}],scale:[3,{},{reflect:!0}],status:[3,{},{reflect:!0}],suffixText:1,validationIcon:[3,{converter:f},{reflect:!0}],validationMessage:1,validity:[0,{},{attribute:!1}],value:1}}static{this.styles=J}get isOpen(){return this.open&&(this.hasContentTop||this.hasContentBottom||this.items.length>0)}get enabledItems(){return this.items.filter(t=>!t.disabled)}async reposition(t=!1){let{floatingEl:e,referenceEl:s,placement:i,overlayPositioning:o,flipPlacements:a}=this;return H(this,{floatingEl:e,referenceEl:s,overlayPositioning:o,placement:i,flipPlacements:a,type:"menu"},t)}async scrollContentTo(t){this.transitionEl?.scrollTo(t)}async selectText(){return this.referenceEl.selectText()}async setFocus(t){return this.focusSetter(()=>this.referenceEl,t)}connectedCallback(){super.connectedCallback(),this.mutationObserver?.observe(this.el,{childList:!0,subtree:!0}),M(this),R(this),this.defaultInputValue=this.inputValue||"",this.getAllItemsDebounced(),p(this),this.cancelable.add(this.getAllItemsDebounced)}async load(){this.getAllItemsDebounced()}willUpdate(t){t.has("disabled")&&(this.hasUpdated||this.disabled!==!1)&&this.handleDisabledChange(this.disabled),t.has("open")&&(this.hasUpdated||this.open!==!1)&&this.openHandler(),(t.has("flipPlacements")||t.has("overlayPositioning")&&(this.hasUpdated||this.overlayPositioning!=="absolute")||t.has("placement")&&(this.hasUpdated||this.placement!==v))&&this.reposition(!0);let e=!1;t.has("inputValue")&&(this.hasUpdated||this.inputValue)&&(this.inputValueMatchPattern=this.inputValue&&new RegExp(`(${V(this.inputValue)})`,"i"),this.updateItems(),this.updateGroups(),e=!0),!e&&t.has("scale")&&(this.hasUpdated||this.scale!=="m")&&(this.updateItems(),this.updateGroups(),e=!0),!e&&t.has("activeIndex")&&(this.hasUpdated||this.activeIndex!==-1)&&this.updateItems()}updated(){O(this)}loaded(){q(this,this.value||""),this.defaultInputValue=this.inputValue||"",p(this)}disconnectedCallback(){super.disconnectedCallback(),this.mutationObserver?.disconnect(),this.resizeObserver?.disconnect(),L(this),G(this),P(this)}setFloatingElSize(){let{referenceEl:t,floatingEl:e}=this;!t||!e||(e.style.inlineSize=`${t.clientWidth}px`)}handleGlobalAttributesChanged(){this.requestUpdate()}handleDisabledChange(t){t||(this.open=!1)}openHandler(){if(F(this),this.open||(this.activeIndex=-1),this.disabled){this.open=!1;return}this.setFloatingElSize(),this.reposition(!0)}async documentClickHandler(t){this.disabled||t.composedPath().includes(this.el)||(this.open=!1)}async handleAutocompleteItemSelect(t){this.value=t.target.value,this.emitChange(),await this.setFocus(),this.open=!1}onLabelClick(){this.setFocus()}onFormReset(){this.inputValue=this.defaultInputValue}onBeforeOpen(){this.calciteAutocompleteBeforeOpen.emit()}onOpen(){this.calciteAutocompleteOpen.emit()}onBeforeClose(){this.calciteAutocompleteBeforeClose.emit()}onClose(){this.calciteAutocompleteClose.emit()}emitChange(){this.calciteAutocompleteChange.emit()}updateGroups(){this.groups.forEach((t,e,s)=>{t.scale=this.scale,e===0&&(t.disableSpacing=!0);let i=s[e+1];i&&(i.disableSpacing=t.children.length===0)})}updateItems(){let t=null;this.items.forEach(e=>{e.scale=this.scale,e.inputValueMatchPattern=this.inputValueMatchPattern}),this.enabledItems.forEach((e,s)=>{let i=s===this.activeIndex;i&&(t=e.guid),e.active=i}),this.activeDescendant=t}handleInputFocus(){this.open=!0}handleContentTopSlotChange(t){this.hasContentTop=b(t)}handleContentBottomSlotChange(t){this.hasContentBottom=b(t)}getAllItems(){let{el:t}=this;this.groups=Array.from(t.querySelectorAll(Q)),this.items=Array.from(t.querySelectorAll(X)),this.updateItems(),this.updateGroups()}setReferenceEl(t){this.referenceEl=t,t&&(this.resizeObserver?.observe(t),p(this))}keyDownHandler(t){let{defaultPrevented:e,key:s}=t;if(e)return;let{open:i,activeIndex:o,enabledItems:a}=this,u=a.length&&o>-1?a[o]:null;switch(s){case"Escape":i&&(this.open=!1,t.preventDefault());break;case"Tab":this.open=!1;break;case"Enter":i&&u?(this.value=u.value,u.emitSelectEvent(),this.open=!1,t.preventDefault()):t.defaultPrevented||U(this)&&t.preventDefault();break;case"ArrowDown":a.length&&(this.open=!0,this.activeIndex=o!==-1?Math.min(o+1,a.length-1):0,this.scrollToActiveItem(),t.preventDefault());break;case"ArrowUp":a.length&&(this.open=!0,this.activeIndex=o!==-1?Math.max(o-1,0):a.length-1,this.scrollToActiveItem(),t.preventDefault());break;case"Home":a.length&&(this.open=!0,this.activeIndex=0,this.scrollToActiveItem(),t.preventDefault());break;case"End":a.length&&(this.open=!0,this.activeIndex=a.length-1,this.scrollToActiveItem(),t.preventDefault());break}}scrollToActiveItem(){this.enabledItems[this.activeIndex]?.scrollIntoView({block:"nearest"})}changeHandler(t){t.stopPropagation(),this.inputValue=t.target.value,this.calciteAutocompleteTextChange.emit()}inputClickHandler(t){t.defaultPrevented||(this.open=!0)}inputHandler(t){t.stopPropagation(),this.inputValue=t.target.value,this.open=this.inputValue?.length>0,this.calciteAutocompleteTextInput.emit()}setFloatingEl(t){this.floatingEl=t,p(this)}setTransitionEl(t){t&&(this.transitionEl=t)}render(){let{disabled:t,listId:e,inputId:s,isOpen:i}=this,o=this.el.autofocus,a=this.el.enterKeyHint,u=this.el.inputMode;return S({disabled:t,children:d`<div class=${r(l.inputContainer)}><calcite-input .alignment=${this.alignment} aria-activedescendant=${this.activeDescendant??n} aria-controls=${e??n} aria-owns=${e??n} aria-autocomplete=list .ariaExpanded=${i} aria-haspopup=listbox .autocomplete=${this.autocomplete} .autofocus=${o} class=${r(l.input)} clearable .disabled=${t} enterkeyhint=${a??n} .form=${this.form} .icon=${this.icon??!0} .iconFlipRtl=${this.iconFlipRtl} id=${s??n} inputmode=${u??n} .label=${this.label} .loading=${this.loading} .maxLength=${this.maxLength} .messageOverrides=${this.messages} .minLength=${this.minLength} .name=${this.name} @click=${this.inputClickHandler} @keydown=${this.keyDownHandler} @calciteInputChange=${this.changeHandler} @calciteInputInput=${this.inputHandler} @calciteInternalInputFocus=${this.handleInputFocus} .pattern=${this.pattern} .placeholder=${this.placeholder} .prefixText=${this.prefixText} .readOnly=${this.readOnly} role=combobox .scale=${this.scale} .status=${this.status} .suffixText=${this.suffixText} type=search .value=${this.inputValue} ${m(this.setReferenceEl)}></calcite-input>${this.renderListBox()}<div class=${r({[l.contentContainer]:!0,[l.floatingUIContainer]:!0,[l.floatingUIContainerActive]:i})} ${m(this.setFloatingEl)}><div class=${r({[l.contentAnimation]:!0,[x.animation]:!0,[x.animationActive]:i})} ${m(this.setTransitionEl)}><div class=${r({[l.content]:!0,[l.contentHidden]:!i})}><slot name=${N.contentTop} @slotchange=${this.handleContentTopSlotChange}></slot><slot aria-hidden=true></slot><slot name=${N.contentBottom} @slotchange=${this.handleContentBottomSlotChange}></slot></div></div></div></div>${W({component:this})}${this.validationMessage&&this.status==="invalid"?K({icon:this.validationIcon,id:y.validationMessage,message:this.validationMessage,scale:this.scale,status:this.status}):null}`})}renderListBox(){return d`<ul aria-labelledby=${this.inputId??n} aria-live=polite class=${r(l.screenReadersOnly)} id=${this.listId??n} role=listbox tabindex=-1>${this.renderListBoxOptions()}</ul>`}renderListBoxOptions(){return z(this.items.filter(t=>!!(t.label||t.heading)),t=>t.guid,t=>d`<li .ariaDisabled=${t.disabled} .ariaLabel=${t.label} id=${t.guid??n} role=option tabindex=-1>${t.heading}${t.description}</li>`)}};k("calcite-autocomplete",I);export{I as Autocomplete};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
|
|
2
2
|
See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
|
|
3
|
-
v3.3.0-next.
|
|
4
|
-
import{a as p,b as h}from"./
|
|
3
|
+
v3.3.0-next.74 */
|
|
4
|
+
import{a as p,b as h}from"./N44TQ6CV.js";import{a as b}from"./UDA6KIUD.js";import"./D7F33WOR.js";import"./NR7TPRG6.js";import"./NDDQ3AB3.js";import"./YEZ7LLA5.js";import"./I53J6CV7.js";import{B as i,C as s,D as r,E as n,G as d,Q as u,g as o,h as c}from"./ER3WVMVV.js";var k={button:"button"},S={plus:"plus"},w=o`:host{--calcite-internal-color-focus: var( --calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)) )}:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex;background-color:transparent}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}calcite-button{--calcite-fab-shadow-internal: 0 6px 20px -4px rgba(0, 0, 0, .1), 0 4px 12px -2px rgba(0, 0, 0, .08);box-shadow:var(--calcite-fab-shadow, var(--calcite-fab-shadow-internal));--calcite-button-background-color: var(--calcite-fab-background-color);--calcite-button-border-color: var(--calcite-fab-border-color);--calcite-button-corner-radius: var(--calcite-fab-corner-radius);--calcite-button-text-color: var(--calcite-fab-text-color);--calcite-button-loader-color: var(--calcite-fab-loader-color)}:host([hidden]){display:none}[hidden]{display:none}`,e=class extends r{constructor(){super(...arguments),this.buttonEl=i(),this.focusSetter=b()(this),this.appearance="solid",this.disabled=!1,this.icon=S.plus,this.iconFlipRtl=!1,this.kind="brand",this.loading=!1,this.scale="m",this.textEnabled=!1}static{this.properties={appearance:[3,{},{reflect:!0}],disabled:[7,{},{reflect:!0,type:Boolean}],icon:[3,{},{reflect:!0}],iconFlipRtl:[7,{},{reflect:!0,type:Boolean}],kind:[3,{},{reflect:!0}],label:1,loading:[7,{},{reflect:!0,type:Boolean}],scale:[3,{},{reflect:!0}],text:1,textEnabled:[7,{},{reflect:!0,type:Boolean}]}}static{this.styles=w}async setFocus(t){return this.focusSetter(()=>this.buttonEl.value,t)}updated(){p(this)}render(){let{appearance:t,kind:f,disabled:a,loading:x,scale:m,textEnabled:y,icon:v,label:l,text:$,iconFlipRtl:g}=this,E=y?null:l||$||null;return h({disabled:a,children:c`<calcite-button .appearance=${t==="solid"?"solid":"outline-fill"} class=${n(k.button)} .disabled=${a} .iconFlipRtl=${g?"start":null} .iconStart=${v} .kind=${f} .label=${l} .loading=${x} round .scale=${m} title=${E??d} type=button width=auto ${s(this.buttonEl)}>${this.textEnabled?this.text:null}</calcite-button>`})}};u("calcite-fab",e);export{e as Fab};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
|
|
2
2
|
See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
|
|
3
|
-
v3.3.0-next.
|
|
4
|
-
import{a,b}from"./
|
|
3
|
+
v3.3.0-next.74 */
|
|
4
|
+
import{a,b}from"./I4KXJBUZ.js";import"./T2AFMFPR.js";export{b as normalize,a as timeZones};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
|
|
2
2
|
See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
|
|
3
|
-
v3.3.0-next.
|
|
4
|
-
import{a as C}from"./FIOEKB4S.js";import{a as $}from"./ERR5QZAM.js";import{a as P}from"./GKNUPJEH.js";import{a as y}from"./ACT2Z2T7.js";import{a as O}from"./ICRA5J5Z.js";import"./HZCA2LTL.js";import{C as u,e as B,t as L,u as M}from"./DSFG7NPT.js";import"./R2IXC3A7.js";import{C as I,D as A,E as s,J as z,L as D,M as R,Q as V,g as H,h as p,o as w}from"./BOMDSRVT.js";var o={container:"container",actionBarContainer:"action-bar-container",contentContainer:"content-container",content:"content",contentHeader:"content__header",contentBody:"content__body",contentOverlay:"content--overlay",floatAll:"float-all",floatContent:"float--content",resizeHandle:"resize-handle",resizeHandleBar:"resize-handle-bar"},_={actionBar:"action-bar",header:"header"},N={dragVertical:"drag-resize-vertical",dragHorizontal:"drag-resize-horizontal"},U=H`:host{--calcite-internal-color-focus: var( --calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)) )}:host{pointer-events:none;position:relative;display:flex;flex:0 1 auto;align-items:stretch;z-index:var(--calcite-shell-panel-z-index, var(--calcite-z-index));--calcite-shell-panel-max-height: unset;--calcite-internal-shell-panel-shadow-block-start: 0 4px 8px -1px rgba(0, 0, 0, .08), 0 2px 4px -1px rgba(0, 0, 0, .04);--calcite-internal-shell-panel-shadow-block-end: 0 -4px 8px -1px rgba(0, 0, 0, .08), 0 -2px 4px -1px rgba(0, 0, 0, .04);--calcite-internal-shell-panel-shadow-inline-start: 4px 0 8px -1px rgba(0, 0, 0, .08), 2px 0 4px -1px rgba(0, 0, 0, .04);--calcite-internal-shell-panel-shadow-inline-end: -4px 0 8px -1px rgba(0, 0, 0, .08), -2px 0 4px -1px rgba(0, 0, 0, .04)}.calcite--rtl.content--overlay{--calcite-internal-shell-panel-shadow-inline-start: -4px 0 8px -1px rgba(0, 0, 0, .08), -2px 0 4px -1px rgba(0, 0, 0, .04);--calcite-internal-shell-panel-shadow-inline-end: 4px 0 8px -1px rgba(0, 0, 0, .08), 2px 0 4px -1px rgba(0, 0, 0, .04)}:host([layout=vertical]){z-index:var(--calcite-shell-panel-z-index, calc(var(--calcite-z-index) + 1))}:host([layout=vertical][display-mode=overlay]){z-index:var(--calcite-shell-panel-z-index, calc(var(--calcite-z-index-header) + 1))}:host([layout=vertical][display-mode=float-all]) .content{flex:2}:host([layout=vertical]:not([display-mode=float-all])) .width-s{--calcite-internal-shell-panel-width: var(--calcite-shell-panel-width, 12vw);--calcite-internal-shell-panel-max-width: var(--calcite-shell-panel-max-width, 300px);--calcite-internal-shell-panel-min-width: var(--calcite-shell-panel-min-width, 150px)}:host([layout=vertical][display-mode=float-all]) .width-s{--calcite-internal-shell-panel-width: var(--calcite-shell-panel-width, 12vw);--calcite-internal-shell-panel-min-width: var(--calcite-shell-panel-min-width, 150px)}:host([layout=vertical]:not([display-mode=float-all])) .width-m{--calcite-internal-shell-panel-width: var(--calcite-shell-panel-width, 20vw);--calcite-internal-shell-panel-max-width: var(--calcite-shell-panel-max-width, 420px);--calcite-internal-shell-panel-min-width: var(--calcite-shell-panel-min-width, 240px)}:host([layout=vertical][display-mode=float-all]) .width-m{--calcite-internal-shell-panel-width: var(--calcite-shell-panel-width, 20vw);--calcite-internal-shell-panel-min-width: var(--calcite-shell-panel-min-width, 240px)}:host([layout=vertical]:not([display-mode=float-all])) .width-l{--calcite-internal-shell-panel-width: var(--calcite-shell-panel-width, 45vw);--calcite-internal-shell-panel-max-width: var(--calcite-shell-panel-max-width, 680px);--calcite-internal-shell-panel-min-width: var(--calcite-shell-panel-min-width, 340px)}:host([layout=vertical][display-mode=float-all]) .width-l{--calcite-internal-shell-panel-width: var(--calcite-shell-panel-width, 45vw);--calcite-internal-shell-panel-min-width: var(--calcite-shell-panel-min-width, 340px)}:host([layout=horizontal]) .height-s{--calcite-internal-shell-panel-max-height: var( --calcite-shell-panel-max-height, var(--calcite-shell-panel-detached-max-height, 20vh) )}:host([layout=horizontal]) .content{--calcite-internal-shell-panel-min-height: var(--calcite-shell-panel-min-height, 5vh);--calcite-internal-shell-panel-max-height: var(--calcite-shell-panel-max-height, 30vh)}:host([layout=horizontal]) .height-l{--calcite-internal-shell-panel-max-height: var( --calcite-shell-panel-max-height, var(--calcite-shell-panel-detached-max-height, 40vh) )}.container{pointer-events:none;box-sizing:border-box;display:flex;block-size:100%;flex:1 1 auto;align-items:stretch;background-color:transparent;font-size:var(--calcite-font-size--1);color:var(--calcite-shell-panel-text-color, var(--calcite-color-text-2))}.container *{box-sizing:border-box}.container.float-all{margin-block:var(--calcite-spacing-sm);margin-inline:var(--calcite-spacing-sm)}.float-all{max-block-size:var(--calcite-internal-shell-panel-max-height, calc(100% - 1rem) );box-shadow:var(--calcite-shell-panel-shadow, var(--calcite-shadow-sm));border-radius:var(--calcite-shell-panel-corner-radius, var(--calcite-corner-radius-round));overflow:hidden}:host([layout=vertical][position=start]) .float-all{border-inline-start:var(--calcite-border-width-sm) solid var(--calcite-shell-panel-border-color, var(--calcite-color-border-3))}:host([layout=vertical][position=end]) .float-all{border-inline-end:var(--calcite-border-width-sm) solid var(--calcite-shell-border-color, var(--calcite-shell-panel-border-color, var(--calcite-color-border-3)))}:host([layout=horizontal]) .float-all{border-inline:var(--calcite-border-width-sm) solid var(--calcite-shell-border-color, var(--calcite-shell-panel-border-color, var(--calcite-color-border-3)))}:host([layout=horizontal]) .container{block-size:auto;inline-size:100%;flex-direction:column}.resize-handle{position:absolute;box-sizing:border-box;display:flex;-webkit-user-select:none;user-select:none;align-items:center;justify-content:center;outline:2px solid transparent;outline-offset:2px;--calcite-internal-shell-panel-resize-handle-offset: calc( (var(--calcite-size-fixed-xxl) - var(--calcite-size-fixed-sm-plus)) / 2 * -1 );z-index:var(--calcite-z-index-header)}.resize-handle:active .resize-handle-bar,.resize-handle:hover .resize-handle-bar{color:var(--calcite-shell-panel-resize-icon-color, var(--calcite-color-text-1));background-color:var(--calcite-shell-panel-resize-background-color, var(--calcite-color-foreground-3))}.resize-handle-bar{pointer-events:none;display:flex;align-items:center;justify-content:center;color:var(--calcite-shell-panel-resize-icon-color, var(--calcite-color-border-input));background-color:var(--calcite-shell-panel-resize-background-color, var(--calcite-color-background))}.resize-handle:focus .resize-handle-bar{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-color:transparent;outline:var(--calcite-border-width-md) solid var(--calcite-internal-color-focus)}:host([position=start][layout=vertical]) .resize-handle{inline-size:var(--calcite-size-fixed-xxl);inset-inline-end:var(--calcite-internal-shell-panel-resize-handle-offset);block-size:100%}:host([position=start][layout=vertical]) .resize-handle-bar{block-size:100%;inline-size:var(--calcite-size-fixed-sm-plus);border-inline-start:var(--calcite-border-width-sm) solid var(--calcite-shell-border-color, var(--calcite-color-border-3))}:host([position=start][layout=vertical]):host([display-mode^=float]) .resize-handle-bar{border-start-end-radius:var(--calcite-shell-panel-corner-radius, var(--calcite-corner-radius-round));border-end-end-radius:var(--calcite-shell-panel-corner-radius, var(--calcite-corner-radius-round))}:host([position=end][layout=vertical]) .resize-handle{inline-size:var(--calcite-size-fixed-xxl);inset-inline-start:var(--calcite-internal-shell-panel-resize-handle-offset);block-size:100%}:host([position=end][layout=vertical]) .resize-handle-bar{block-size:100%;inline-size:var(--calcite-size-fixed-sm-plus);border-inline-end:var(--calcite-border-width-sm) solid var(--calcite-shell-border-color, var(--calcite-color-border-3))}:host([position=end][layout=vertical]):host([display-mode^=float]) .resize-handle-bar{border-start-start-radius:var(--calcite-shell-panel-corner-radius, var(--calcite-corner-radius-round));border-end-start-radius:var(--calcite-shell-panel-corner-radius, var(--calcite-corner-radius-round))}:host([position=start][layout=horizontal]) .resize-handle{block-size:var(--calcite-size-fixed-xxl);inline-size:100%;inset-block-end:var(--calcite-internal-shell-panel-resize-handle-offset)}:host([position=start][layout=horizontal]) .resize-handle-bar{inline-size:100%;block-size:var(--calcite-size-fixed-sm-plus);border-block-start:var(--calcite-border-width-sm) solid var(--calcite-shell-border-color, var(--calcite-color-border-3))}:host([position=start][layout=horizontal]):host([display-mode^=float]) .resize-handle-bar{border-end-end-radius:var(--calcite-shell-panel-corner-radius, var(--calcite-corner-radius-round));border-end-start-radius:var(--calcite-shell-panel-corner-radius, var(--calcite-corner-radius-round))}:host([position=end][layout=horizontal]) .resize-handle{block-size:var(--calcite-size-fixed-xxl);inline-size:100%;inset-block-start:var(--calcite-internal-shell-panel-resize-handle-offset)}:host([position=end][layout=horizontal]) .resize-handle-bar{inline-size:100%;block-size:var(--calcite-size-fixed-sm-plus);border-block-end:var(--calcite-border-width-sm) solid var(--calcite-shell-border-color, var(--calcite-color-border-3))}:host([position=end][layout=horizontal]):host([display-mode^=float]) .resize-handle-bar{border-start-start-radius:var(--calcite-shell-panel-corner-radius, var(--calcite-corner-radius-round));border-start-end-radius:var(--calcite-shell-panel-corner-radius, var(--calcite-corner-radius-round))}::slotted(calcite-panel),::slotted(calcite-flow){block-size:100%;inline-size:100%;flex:1 1 auto;max-block-size:unset;max-inline-size:unset}::slotted(.calcite-match-height){display:flex;flex:1 1 auto;overflow:hidden}.action-bar-container{pointer-events:auto;box-sizing:border-box;display:flex;flex:1 1 auto}.content-container{position:relative;box-sizing:border-box;display:flex;block-size:100%;inline-size:100%;flex:1 1 auto;align-items:stretch;align-self:stretch}:host([layout=horizontal]) .action-bar-container,:host([layout=horizontal]) .content-container{flex-direction:column}.content{pointer-events:auto;position:relative;box-sizing:border-box;display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;align-self:stretch;padding:0;background-color:var(--calcite-shell-panel-background-color, var(--calcite-color-background));transition:max-block-size var(--calcite-animation-timing),max-inline-size var(--calcite-animation-timing)}:host([layout=vertical]:not([display-mode=float-all])) .content{inline-size:var(--calcite-internal-shell-panel-width);max-inline-size:var(--calcite-internal-shell-panel-max-width);min-inline-size:var(--calcite-internal-shell-panel-min-width)}:host([layout=vertical][display-mode=float-all]) .content{inline-size:var(--calcite-internal-shell-panel-width);min-inline-size:var(--calcite-internal-shell-panel-min-width)}:host([layout=horizontal]) .content{block-size:var(--calcite-internal-shell-panel-height);max-block-size:var(--calcite-internal-shell-panel-max-height);min-block-size:var(--calcite-internal-shell-panel-min-height)}:host([resizable][layout=vertical][position=start]) .content{padding-inline-end:var(--calcite-size-fixed-sm-plus)}:host([resizable][layout=vertical][position=end]) .content{padding-inline-start:var(--calcite-size-fixed-sm-plus)}:host([resizable][layout=horizontal][position=start]) .content{padding-block-end:var(--calcite-size-fixed-sm-plus)}:host([resizable][layout=horizontal][position=end]) .content{padding-block-start:var(--calcite-size-fixed-sm-plus)}.content__header{display:flex;flex:0 1 auto;flex-direction:column;flex-wrap:nowrap;align-items:stretch}.content__body{display:flex;flex:1 1 auto;flex-direction:column;overflow:hidden}.content--overlay{position:absolute;--tw-shadow: 0 4px 8px -1px rgba(0, 0, 0, .08), 0 2px 4px -1px rgba(0, 0, 0, .04);--tw-shadow-colored: 0 4px 8px -1px var(--tw-shadow-color), 0 2px 4px -1px var(--tw-shadow-color);box-shadow:var(--calcite-shell-panel-shadow, var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-shadow))}:host([layout=vertical]) .content--overlay{inset-block-start:0px;block-size:100%}:host([layout=horizontal]) .content--overlay{inset-inline-start:0px;inline-size:100%}:host([layout=vertical][position=start]) .content--overlay{inset-inline-start:100%;box-shadow:var(--calcite-internal-shell-panel-shadow-inline-start)}:host([layout=vertical][position=end]) .content--overlay{inset-inline-end:100%;box-shadow:var(--calcite-internal-shell-panel-shadow-inline-end)}:host([layout=horizontal][position=start]) .content--overlay{inset-block-start:100%;box-shadow:var(--calcite-internal-shell-panel-shadow-block-start)}:host([layout=horizontal][position=end]) .content--overlay{inset-block-end:100%;box-shadow:var(--calcite-internal-shell-panel-shadow-block-end)}.float--content{margin-block-end:auto;block-size:auto;overflow:hidden;--tw-shadow: 0 4px 8px -1px rgba(0, 0, 0, .08), 0 2px 4px -1px rgba(0, 0, 0, .04);--tw-shadow-colored: 0 4px 8px -1px var(--tw-shadow-color), 0 2px 4px -1px var(--tw-shadow-color);box-shadow:var(--calcite-shell-panel-shadow, var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-shadow));border-radius:var(--calcite-shell-panel-corner-radius, var(--calcite-corner-radius-round));margin-inline:var(--calcite-spacing-sm);margin-block-start:var(--calcite-spacing-sm);max-block-size:var(--calcite-internal-shell-panel-max-height, calc(100% - 1rem) )}.float--content ::slotted(calcite-panel),.float--content ::slotted(calcite-flow){max-block-size:unset}:host([layout=horizontal]) .float--content{margin-block:var(--calcite-spacing-sm)}:host([position=start]) .float--content ::slotted(calcite-panel),:host([position=start]) .float--content ::slotted(calcite-flow),:host([position=end]) .float--content ::slotted(calcite-panel),:host([position=end]) .float--content ::slotted(calcite-flow){border-style:none}slot[name=action-bar]::slotted(calcite-action-bar),.content ::slotted(calcite-flow),.content ::slotted(calcite-panel:not([closed])){border:var(--calcite-border-width-sm) solid var(--calcite-shell-border-color, var(--calcite-color-border-3))}:host([position=start]:not([slot=panel-end])) slot[name=action-bar]::slotted(calcite-action-bar),:host([position=start]:not([slot=panel-end])) .content ::slotted(calcite-flow),:host([position=start]:not([slot=panel-end])) .content ::slotted(calcite-panel),:host([position=end][slot=panel-start]) slot[name=action-bar]::slotted(calcite-action-bar),:host([position=end][slot=panel-start]) .content ::slotted(calcite-flow),:host([position=end][slot=panel-start]) .content ::slotted(calcite-panel){border-inline-start:none}:host([resizable][layout=vertical]) .content ::slotted(calcite-flow),:host([resizable][layout=vertical]) .content ::slotted(calcite-panel){border-inline-start:none;border-inline-end:none}:host([resizable][layout=horizontal]) .content ::slotted(calcite-flow),:host([resizable][layout=horizontal]) .content ::slotted(calcite-panel){border-block-start:none;border-block-end:none}:host([position=end]:not([slot=panel-start])) slot[name=action-bar]::slotted(calcite-action-bar),:host([position=end]:not([slot=panel-start])) .content ::slotted(calcite-flow),:host([position=end]:not([slot=panel-start])) .content ::slotted(calcite-panel),:host([position=start][slot=panel-end]) slot[name=action-bar]::slotted(calcite-action-bar),:host([position=start][slot=panel-end]) .content ::slotted(calcite-flow),:host([position=start][slot=panel-end]) .content ::slotted(calcite-panel){border-inline-end:none}:host([layout=horizontal]) slot[name=action-bar]::slotted(calcite-action-bar){border-inline:0}:host([layout=horizontal][position=start]) .content ::slotted(calcite-flow),:host([layout=horizontal][position=start]) .content ::slotted(calcite-panel){border-inline:0;border-block-start:0}:host([layout=horizontal][position=end]) .content ::slotted(calcite-flow),:host([layout=horizontal][position=end]) .content ::slotted(calcite-panel){border-inline:0;border-block-end:0}:host([hidden]){display:none}[hidden]{display:none}`,E=class extends A{constructor(){super(...arguments),this.actionBars=[],this.messages=O(),this.resizeValues={inlineSize:null,blockSize:null,minInlineSize:null,minBlockSize:null,maxInlineSize:null,maxBlockSize:null},this.hasHeader=!1,this.collapsed=!1,this.displayMode="dock",this.layout="vertical",this.position="start",this.resizable=!1,this.widthScale="m",this.calciteInternalShellPanelResizeEnd=w({cancelable:!1}),this.calciteInternalShellPanelResizeStart=w({cancelable:!1}),this.calciteShellPanelCollapse=w({cancelable:!1}),this.calciteShellPanelExpand=w({cancelable:!1})}static{this.properties={resizeValues:[16,{},{state:!0}],hasHeader:[16,{},{state:!0}],collapsed:[7,{},{reflect:!0,type:Boolean}],displayMode:[3,{},{reflect:!0}],heightScale:[3,{},{reflect:!0}],layout:[3,{},{reflect:!0}],messageOverrides:[0,{},{attribute:!1}],position:[3,{},{reflect:!0}],resizable:[7,{},{reflect:!0,type:Boolean}],height:[3,{},{reflect:!0}],widthScale:[3,{},{reflect:!0}],width:[3,{},{reflect:!0}]}}static{this.styles=U}willUpdate(e){e.has("layout")&&(this.hasUpdated||this.layout!=="vertical")&&this.setActionBarsLayout(this.actionBars),e.has("collapsed")&&this.hasUpdated&&(this.collapsed?this.calciteShellPanelCollapse.emit():this.calciteShellPanelExpand.emit())}disconnectedCallback(){super.disconnectedCallback(),this.cleanupInteractions()}getContentElDOMRect(){return this.contentEl.getBoundingClientRect()}handleKeyDown(e){let{key:l,defaultPrevented:r,shiftKey:a}=e,{position:i,layout:t,resizable:n,contentEl:c,el:x,resizeValues:{maxBlockSize:m,maxInlineSize:g,minBlockSize:v,minInlineSize:k}}=this,S=[...t==="horizontal"?["ArrowUp","ArrowDown"]:["ArrowLeft","ArrowRight"],"Home","End"];if(!n||!c||r||!S.includes(l))return;let h=this.getContentElDOMRect(),f=B(x)==="rtl"?-1:1,d=a?R:D;switch(l){case"ArrowUp":this.updateSize({size:h.height+(t==="horizontal"&&i==="end"?d:-d),type:"blockSize"}),e.preventDefault();break;case"ArrowDown":this.updateSize({size:h.height+(t==="horizontal"&&i==="end"?-d:d),type:"blockSize"}),e.preventDefault();break;case"ArrowLeft":this.updateSize({size:h.width+(t==="vertical"&&i==="end"?d:-d)*f,type:"inlineSize"}),e.preventDefault();break;case"ArrowRight":this.updateSize({size:h.width+(t==="vertical"&&i==="end"?-d:d)*f,type:"inlineSize"}),e.preventDefault();break;case"Home":this.updateSize({size:t==="horizontal"?v:k,type:t==="horizontal"?"blockSize":"inlineSize"}),e.preventDefault();break;case"End":this.updateSize({size:t==="horizontal"?m:g,type:t==="horizontal"?"blockSize":"inlineSize"}),e.preventDefault();break}}updateSize({type:e,size:l}){let{contentEl:r,resizeValues:a}=this;if(!r)return;let i=e==="blockSize"?"minBlockSize":"minInlineSize",t=e==="blockSize"?"maxBlockSize":"maxInlineSize",n=a[i]&&a[t]?P(l,a[i],a[t]):l,c=Math.round(n);this.resizeValues={...a,[e]:c},r.style[e]=l!==null?`${c}px`:null}cleanupInteractions(){this.interaction?.unset()}async setupInteractions(){this.cleanupInteractions();let{el:e,contentEl:l,resizable:r,position:a,collapsed:i,resizeHandleEl:t,layout:n}=this;if(!l||i||!r||!t)return;await this.el.componentOnReady();let{inlineSize:c,minInlineSize:x,blockSize:m,minBlockSize:g,maxInlineSize:v,maxBlockSize:k}=window.getComputedStyle(l),b={inlineSize:u(c),blockSize:u(m),minInlineSize:u(x),minBlockSize:u(g),maxInlineSize:u(v)||window.innerWidth,maxBlockSize:u(k)||window.innerHeight};this.resizeValues=b;let S=B(e)==="rtl";this.interaction=C(l,{context:e.ownerDocument}).resizable({edges:{top:a==="end"&&n==="horizontal"?t:!1,right:a===(S?"end":"start")&&n==="vertical"?t:!1,bottom:a==="start"&&n==="horizontal"?t:!1,left:a===(S?"start":"end")&&n==="vertical"?t:!1},modifiers:[C.modifiers.restrictSize({min:{width:b.minInlineSize,height:b.minBlockSize},max:{width:b.maxInlineSize,height:b.maxBlockSize}})],listeners:{resizestart:()=>{this.calciteInternalShellPanelResizeStart.emit()},resizeend:()=>{this.calciteInternalShellPanelResizeEnd.emit()},move:({rect:h})=>{let f=n==="horizontal";this.updateSize({size:f?h.height:h.width,type:f?"blockSize":"inlineSize"})}}})}storeContentEl(e){this.contentEl=e}setResizeHandleEl(e){this.resizeHandleEl=e,this.setupInteractions()}setActionBarsLayout(e){e.forEach(l=>l.layout=this.layout)}handleActionBarSlotChange(e){let l=M(e).filter(r=>r?.matches("calcite-action-bar"));this.actionBars=l,this.setActionBarsLayout(l)}handleHeaderSlotChange(e){this.hasHeader=L(e)}getResizeIcon(){let{layout:e}=this;return e==="horizontal"?N.dragVertical:N.dragHorizontal}renderHeader(){return y("header",p`<div class=${s(o.contentHeader)} .hidden=${!this.hasHeader}><slot name=${_.header} @slotchange=${this.handleHeaderSlotChange}></slot></div>`)}render(){let{collapsed:e,position:l,resizable:r,layout:a,displayMode:i,resizeValues:t}=this,n=B(this.el),c=!e&&r?y("resize-handle",p`<div .ariaLabel=${this.messages.resize} .ariaOrientation=${a==="horizontal"?"vertical":"horizontal"} .ariaValueMax=${a=="horizontal"?t.maxBlockSize:t.maxInlineSize} .ariaValueMin=${a=="horizontal"?t.minBlockSize:t.minInlineSize} .ariaValueNow=${a=="horizontal"?t.blockSize:t.inlineSize} class=${s(o.resizeHandle)} @keydown=${this.handleKeyDown} role=separator tabindex=0 touch-action=none ${I(this.setResizeHandleEl)}><div class=${s(o.resizeHandleBar)}><calcite-icon .icon=${this.getResizeIcon()} scale=s></calcite-icon></div></div>`):null,x=()=>a==="horizontal"?l==="start"?z.calciteAnimateInDown:z.calciteAnimateInUp:n==="ltr"&&l==="end"||n==="rtl"&&l==="start"?z.calciteAnimateInLeft:z.calciteAnimateInRight,m=p`<div class=${s(o.contentContainer)}>${y("content",p`<div class=${s({[z.rtl]:n==="rtl",[o.content]:!0,[o.contentOverlay]:i==="overlay",[o.floatContent]:i==="float-content"||i==="float",[z.calciteAnimate]:i==="overlay",[x()]:i==="overlay",[$("width",this.width,this.widthScale)]:!!(this.width||this.widthScale),[$("height",this.height,this.heightScale)]:!!(this.height||this.heightScale)})} .hidden=${e} ${I(this.storeContentEl)}>${this.renderHeader()}<div class=${s(o.contentBody)}><slot></slot></div>${c}</div>`)}</div>`,v=[y("action-bar-container",p`<div class=${s(o.actionBarContainer)}><slot name=${_.actionBar} @slotchange=${this.handleActionBarSlotChange}></slot></div>`),m];return l==="end"&&v.reverse(),p`<div class=${s({[o.container]:!0,[o.floatAll]:i==="float-all"})}>${v}</div>`}};V("calcite-shell-panel",E);export{E as ShellPanel};
|
|
3
|
+
v3.3.0-next.74 */
|
|
4
|
+
import{a as C}from"./SX3M5TKJ.js";import{a as $}from"./G2QBK3ZD.js";import{a as P}from"./HDWNM2UR.js";import{a as y}from"./MVFRLHST.js";import{a as O}from"./NG74GX67.js";import"./D7F33WOR.js";import{C as u,e as B,t as L,u as M}from"./YEZ7LLA5.js";import"./I53J6CV7.js";import{C as I,D as A,E as s,J as z,L as D,M as R,Q as V,g as H,h as p,o as w}from"./ER3WVMVV.js";var o={container:"container",actionBarContainer:"action-bar-container",contentContainer:"content-container",content:"content",contentHeader:"content__header",contentBody:"content__body",contentOverlay:"content--overlay",floatAll:"float-all",floatContent:"float--content",resizeHandle:"resize-handle",resizeHandleBar:"resize-handle-bar"},_={actionBar:"action-bar",header:"header"},N={dragVertical:"drag-resize-vertical",dragHorizontal:"drag-resize-horizontal"},U=H`:host{--calcite-internal-color-focus: var( --calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)) )}:host{pointer-events:none;position:relative;display:flex;flex:0 1 auto;align-items:stretch;z-index:var(--calcite-shell-panel-z-index, var(--calcite-z-index));--calcite-shell-panel-max-height: unset;--calcite-internal-shell-panel-shadow-block-start: 0 4px 8px -1px rgba(0, 0, 0, .08), 0 2px 4px -1px rgba(0, 0, 0, .04);--calcite-internal-shell-panel-shadow-block-end: 0 -4px 8px -1px rgba(0, 0, 0, .08), 0 -2px 4px -1px rgba(0, 0, 0, .04);--calcite-internal-shell-panel-shadow-inline-start: 4px 0 8px -1px rgba(0, 0, 0, .08), 2px 0 4px -1px rgba(0, 0, 0, .04);--calcite-internal-shell-panel-shadow-inline-end: -4px 0 8px -1px rgba(0, 0, 0, .08), -2px 0 4px -1px rgba(0, 0, 0, .04)}.calcite--rtl.content--overlay{--calcite-internal-shell-panel-shadow-inline-start: -4px 0 8px -1px rgba(0, 0, 0, .08), -2px 0 4px -1px rgba(0, 0, 0, .04);--calcite-internal-shell-panel-shadow-inline-end: 4px 0 8px -1px rgba(0, 0, 0, .08), 2px 0 4px -1px rgba(0, 0, 0, .04)}:host([layout=vertical]){z-index:var(--calcite-shell-panel-z-index, calc(var(--calcite-z-index) + 1))}:host([layout=vertical][display-mode=overlay]){z-index:var(--calcite-shell-panel-z-index, calc(var(--calcite-z-index-header) + 1))}:host([layout=vertical][display-mode=float-all]) .content{flex:2}:host([layout=vertical]:not([display-mode=float-all])) .width-s{--calcite-internal-shell-panel-width: var(--calcite-shell-panel-width, 12vw);--calcite-internal-shell-panel-max-width: var(--calcite-shell-panel-max-width, 300px);--calcite-internal-shell-panel-min-width: var(--calcite-shell-panel-min-width, 150px)}:host([layout=vertical][display-mode=float-all]) .width-s{--calcite-internal-shell-panel-width: var(--calcite-shell-panel-width, 12vw);--calcite-internal-shell-panel-min-width: var(--calcite-shell-panel-min-width, 150px)}:host([layout=vertical]:not([display-mode=float-all])) .width-m{--calcite-internal-shell-panel-width: var(--calcite-shell-panel-width, 20vw);--calcite-internal-shell-panel-max-width: var(--calcite-shell-panel-max-width, 420px);--calcite-internal-shell-panel-min-width: var(--calcite-shell-panel-min-width, 240px)}:host([layout=vertical][display-mode=float-all]) .width-m{--calcite-internal-shell-panel-width: var(--calcite-shell-panel-width, 20vw);--calcite-internal-shell-panel-min-width: var(--calcite-shell-panel-min-width, 240px)}:host([layout=vertical]:not([display-mode=float-all])) .width-l{--calcite-internal-shell-panel-width: var(--calcite-shell-panel-width, 45vw);--calcite-internal-shell-panel-max-width: var(--calcite-shell-panel-max-width, 680px);--calcite-internal-shell-panel-min-width: var(--calcite-shell-panel-min-width, 340px)}:host([layout=vertical][display-mode=float-all]) .width-l{--calcite-internal-shell-panel-width: var(--calcite-shell-panel-width, 45vw);--calcite-internal-shell-panel-min-width: var(--calcite-shell-panel-min-width, 340px)}:host([layout=horizontal]) .height-s{--calcite-internal-shell-panel-max-height: var( --calcite-shell-panel-max-height, var(--calcite-shell-panel-detached-max-height, 20vh) )}:host([layout=horizontal]) .content{--calcite-internal-shell-panel-min-height: var(--calcite-shell-panel-min-height, 5vh);--calcite-internal-shell-panel-max-height: var(--calcite-shell-panel-max-height, 30vh)}:host([layout=horizontal]) .height-l{--calcite-internal-shell-panel-max-height: var( --calcite-shell-panel-max-height, var(--calcite-shell-panel-detached-max-height, 40vh) )}.container{pointer-events:none;box-sizing:border-box;display:flex;block-size:100%;flex:1 1 auto;align-items:stretch;background-color:transparent;font-size:var(--calcite-font-size--1);color:var(--calcite-shell-panel-text-color, var(--calcite-color-text-2))}.container *{box-sizing:border-box}.container.float-all{margin-block:var(--calcite-spacing-sm);margin-inline:var(--calcite-spacing-sm)}.float-all{max-block-size:var(--calcite-internal-shell-panel-max-height, calc(100% - 1rem) );box-shadow:var(--calcite-shell-panel-shadow, var(--calcite-shadow-sm));border-radius:var(--calcite-shell-panel-corner-radius, var(--calcite-corner-radius-round));overflow:hidden}:host([layout=vertical][position=start]) .float-all{border-inline-start:var(--calcite-border-width-sm) solid var(--calcite-shell-panel-border-color, var(--calcite-color-border-3))}:host([layout=vertical][position=end]) .float-all{border-inline-end:var(--calcite-border-width-sm) solid var(--calcite-shell-border-color, var(--calcite-shell-panel-border-color, var(--calcite-color-border-3)))}:host([layout=horizontal]) .float-all{border-inline:var(--calcite-border-width-sm) solid var(--calcite-shell-border-color, var(--calcite-shell-panel-border-color, var(--calcite-color-border-3)))}:host([layout=horizontal]) .container{block-size:auto;inline-size:100%;flex-direction:column}.resize-handle{position:absolute;box-sizing:border-box;display:flex;-webkit-user-select:none;user-select:none;align-items:center;justify-content:center;outline:2px solid transparent;outline-offset:2px;--calcite-internal-shell-panel-resize-handle-offset: calc( (var(--calcite-size-fixed-xxl) - var(--calcite-size-fixed-sm-plus)) / 2 * -1 );z-index:var(--calcite-z-index-header)}.resize-handle:active .resize-handle-bar,.resize-handle:hover .resize-handle-bar{color:var(--calcite-shell-panel-resize-icon-color, var(--calcite-color-text-1));background-color:var(--calcite-shell-panel-resize-background-color, var(--calcite-color-foreground-3))}.resize-handle-bar{pointer-events:none;display:flex;align-items:center;justify-content:center;color:var(--calcite-shell-panel-resize-icon-color, var(--calcite-color-border-input));background-color:var(--calcite-shell-panel-resize-background-color, var(--calcite-color-background))}.resize-handle:focus .resize-handle-bar{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-color:transparent;outline:var(--calcite-border-width-md) solid var(--calcite-internal-color-focus)}:host([position=start][layout=vertical]) .resize-handle{inline-size:var(--calcite-size-fixed-xxl);inset-inline-end:var(--calcite-internal-shell-panel-resize-handle-offset);block-size:100%}:host([position=start][layout=vertical]) .resize-handle-bar{block-size:100%;inline-size:var(--calcite-size-fixed-sm-plus);border-inline-start:var(--calcite-border-width-sm) solid var(--calcite-shell-border-color, var(--calcite-color-border-3))}:host([position=start][layout=vertical]):host([display-mode^=float]) .resize-handle-bar{border-start-end-radius:var(--calcite-shell-panel-corner-radius, var(--calcite-corner-radius-round));border-end-end-radius:var(--calcite-shell-panel-corner-radius, var(--calcite-corner-radius-round))}:host([position=end][layout=vertical]) .resize-handle{inline-size:var(--calcite-size-fixed-xxl);inset-inline-start:var(--calcite-internal-shell-panel-resize-handle-offset);block-size:100%}:host([position=end][layout=vertical]) .resize-handle-bar{block-size:100%;inline-size:var(--calcite-size-fixed-sm-plus);border-inline-end:var(--calcite-border-width-sm) solid var(--calcite-shell-border-color, var(--calcite-color-border-3))}:host([position=end][layout=vertical]):host([display-mode^=float]) .resize-handle-bar{border-start-start-radius:var(--calcite-shell-panel-corner-radius, var(--calcite-corner-radius-round));border-end-start-radius:var(--calcite-shell-panel-corner-radius, var(--calcite-corner-radius-round))}:host([position=start][layout=horizontal]) .resize-handle{block-size:var(--calcite-size-fixed-xxl);inline-size:100%;inset-block-end:var(--calcite-internal-shell-panel-resize-handle-offset)}:host([position=start][layout=horizontal]) .resize-handle-bar{inline-size:100%;block-size:var(--calcite-size-fixed-sm-plus);border-block-start:var(--calcite-border-width-sm) solid var(--calcite-shell-border-color, var(--calcite-color-border-3))}:host([position=start][layout=horizontal]):host([display-mode^=float]) .resize-handle-bar{border-end-end-radius:var(--calcite-shell-panel-corner-radius, var(--calcite-corner-radius-round));border-end-start-radius:var(--calcite-shell-panel-corner-radius, var(--calcite-corner-radius-round))}:host([position=end][layout=horizontal]) .resize-handle{block-size:var(--calcite-size-fixed-xxl);inline-size:100%;inset-block-start:var(--calcite-internal-shell-panel-resize-handle-offset)}:host([position=end][layout=horizontal]) .resize-handle-bar{inline-size:100%;block-size:var(--calcite-size-fixed-sm-plus);border-block-end:var(--calcite-border-width-sm) solid var(--calcite-shell-border-color, var(--calcite-color-border-3))}:host([position=end][layout=horizontal]):host([display-mode^=float]) .resize-handle-bar{border-start-start-radius:var(--calcite-shell-panel-corner-radius, var(--calcite-corner-radius-round));border-start-end-radius:var(--calcite-shell-panel-corner-radius, var(--calcite-corner-radius-round))}::slotted(calcite-panel),::slotted(calcite-flow){block-size:100%;inline-size:100%;flex:1 1 auto;max-block-size:unset;max-inline-size:unset}::slotted(.calcite-match-height){display:flex;flex:1 1 auto;overflow:hidden}.action-bar-container{pointer-events:auto;box-sizing:border-box;display:flex;flex:1 1 auto}.content-container{position:relative;box-sizing:border-box;display:flex;block-size:100%;inline-size:100%;flex:1 1 auto;align-items:stretch;align-self:stretch}:host([layout=horizontal]) .action-bar-container,:host([layout=horizontal]) .content-container{flex-direction:column}.content{pointer-events:auto;position:relative;box-sizing:border-box;display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;align-self:stretch;padding:0;background-color:var(--calcite-shell-panel-background-color, var(--calcite-color-background));transition:max-block-size var(--calcite-animation-timing),max-inline-size var(--calcite-animation-timing)}:host([layout=vertical]:not([display-mode=float-all])) .content{inline-size:var(--calcite-internal-shell-panel-width);max-inline-size:var(--calcite-internal-shell-panel-max-width);min-inline-size:var(--calcite-internal-shell-panel-min-width)}:host([layout=vertical][display-mode=float-all]) .content{inline-size:var(--calcite-internal-shell-panel-width);min-inline-size:var(--calcite-internal-shell-panel-min-width)}:host([layout=horizontal]) .content{block-size:var(--calcite-internal-shell-panel-height);max-block-size:var(--calcite-internal-shell-panel-max-height);min-block-size:var(--calcite-internal-shell-panel-min-height)}:host([resizable][layout=vertical][position=start]) .content{padding-inline-end:var(--calcite-size-fixed-sm-plus)}:host([resizable][layout=vertical][position=end]) .content{padding-inline-start:var(--calcite-size-fixed-sm-plus)}:host([resizable][layout=horizontal][position=start]) .content{padding-block-end:var(--calcite-size-fixed-sm-plus)}:host([resizable][layout=horizontal][position=end]) .content{padding-block-start:var(--calcite-size-fixed-sm-plus)}.content__header{display:flex;flex:0 1 auto;flex-direction:column;flex-wrap:nowrap;align-items:stretch}.content__body{display:flex;flex:1 1 auto;flex-direction:column;overflow:hidden}.content--overlay{position:absolute;--tw-shadow: 0 4px 8px -1px rgba(0, 0, 0, .08), 0 2px 4px -1px rgba(0, 0, 0, .04);--tw-shadow-colored: 0 4px 8px -1px var(--tw-shadow-color), 0 2px 4px -1px var(--tw-shadow-color);box-shadow:var(--calcite-shell-panel-shadow, var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-shadow))}:host([layout=vertical]) .content--overlay{inset-block-start:0px;block-size:100%}:host([layout=horizontal]) .content--overlay{inset-inline-start:0px;inline-size:100%}:host([layout=vertical][position=start]) .content--overlay{inset-inline-start:100%;box-shadow:var(--calcite-internal-shell-panel-shadow-inline-start)}:host([layout=vertical][position=end]) .content--overlay{inset-inline-end:100%;box-shadow:var(--calcite-internal-shell-panel-shadow-inline-end)}:host([layout=horizontal][position=start]) .content--overlay{inset-block-start:100%;box-shadow:var(--calcite-internal-shell-panel-shadow-block-start)}:host([layout=horizontal][position=end]) .content--overlay{inset-block-end:100%;box-shadow:var(--calcite-internal-shell-panel-shadow-block-end)}.float--content{margin-block-end:auto;block-size:auto;overflow:hidden;--tw-shadow: 0 4px 8px -1px rgba(0, 0, 0, .08), 0 2px 4px -1px rgba(0, 0, 0, .04);--tw-shadow-colored: 0 4px 8px -1px var(--tw-shadow-color), 0 2px 4px -1px var(--tw-shadow-color);box-shadow:var(--calcite-shell-panel-shadow, var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-shadow));border-radius:var(--calcite-shell-panel-corner-radius, var(--calcite-corner-radius-round));margin-inline:var(--calcite-spacing-sm);margin-block-start:var(--calcite-spacing-sm);max-block-size:var(--calcite-internal-shell-panel-max-height, calc(100% - 1rem) )}.float--content ::slotted(calcite-panel),.float--content ::slotted(calcite-flow){max-block-size:unset}:host([layout=horizontal]) .float--content{margin-block:var(--calcite-spacing-sm)}:host([position=start]) .float--content ::slotted(calcite-panel),:host([position=start]) .float--content ::slotted(calcite-flow),:host([position=end]) .float--content ::slotted(calcite-panel),:host([position=end]) .float--content ::slotted(calcite-flow){border-style:none}slot[name=action-bar]::slotted(calcite-action-bar),.content ::slotted(calcite-flow),.content ::slotted(calcite-panel:not([closed])){border:var(--calcite-border-width-sm) solid var(--calcite-shell-border-color, var(--calcite-color-border-3))}:host([position=start]:not([slot=panel-end])) slot[name=action-bar]::slotted(calcite-action-bar),:host([position=start]:not([slot=panel-end])) .content ::slotted(calcite-flow),:host([position=start]:not([slot=panel-end])) .content ::slotted(calcite-panel),:host([position=end][slot=panel-start]) slot[name=action-bar]::slotted(calcite-action-bar),:host([position=end][slot=panel-start]) .content ::slotted(calcite-flow),:host([position=end][slot=panel-start]) .content ::slotted(calcite-panel){border-inline-start:none}:host([resizable][layout=vertical]) .content ::slotted(calcite-flow),:host([resizable][layout=vertical]) .content ::slotted(calcite-panel){border-inline-start:none;border-inline-end:none}:host([resizable][layout=horizontal]) .content ::slotted(calcite-flow),:host([resizable][layout=horizontal]) .content ::slotted(calcite-panel){border-block-start:none;border-block-end:none}:host([position=end]:not([slot=panel-start])) slot[name=action-bar]::slotted(calcite-action-bar),:host([position=end]:not([slot=panel-start])) .content ::slotted(calcite-flow),:host([position=end]:not([slot=panel-start])) .content ::slotted(calcite-panel),:host([position=start][slot=panel-end]) slot[name=action-bar]::slotted(calcite-action-bar),:host([position=start][slot=panel-end]) .content ::slotted(calcite-flow),:host([position=start][slot=panel-end]) .content ::slotted(calcite-panel){border-inline-end:none}:host([layout=horizontal]) slot[name=action-bar]::slotted(calcite-action-bar){border-inline:0}:host([layout=horizontal][position=start]) .content ::slotted(calcite-flow),:host([layout=horizontal][position=start]) .content ::slotted(calcite-panel){border-inline:0;border-block-start:0}:host([layout=horizontal][position=end]) .content ::slotted(calcite-flow),:host([layout=horizontal][position=end]) .content ::slotted(calcite-panel){border-inline:0;border-block-end:0}:host([hidden]){display:none}[hidden]{display:none}`,E=class extends A{constructor(){super(...arguments),this.actionBars=[],this.messages=O(),this.resizeValues={inlineSize:null,blockSize:null,minInlineSize:null,minBlockSize:null,maxInlineSize:null,maxBlockSize:null},this.hasHeader=!1,this.collapsed=!1,this.displayMode="dock",this.layout="vertical",this.position="start",this.resizable=!1,this.widthScale="m",this.calciteInternalShellPanelResizeEnd=w({cancelable:!1}),this.calciteInternalShellPanelResizeStart=w({cancelable:!1}),this.calciteShellPanelCollapse=w({cancelable:!1}),this.calciteShellPanelExpand=w({cancelable:!1})}static{this.properties={resizeValues:[16,{},{state:!0}],hasHeader:[16,{},{state:!0}],collapsed:[7,{},{reflect:!0,type:Boolean}],displayMode:[3,{},{reflect:!0}],heightScale:[3,{},{reflect:!0}],layout:[3,{},{reflect:!0}],messageOverrides:[0,{},{attribute:!1}],position:[3,{},{reflect:!0}],resizable:[7,{},{reflect:!0,type:Boolean}],height:[3,{},{reflect:!0}],widthScale:[3,{},{reflect:!0}],width:[3,{},{reflect:!0}]}}static{this.styles=U}willUpdate(e){e.has("layout")&&(this.hasUpdated||this.layout!=="vertical")&&this.setActionBarsLayout(this.actionBars),e.has("collapsed")&&this.hasUpdated&&(this.collapsed?this.calciteShellPanelCollapse.emit():this.calciteShellPanelExpand.emit())}disconnectedCallback(){super.disconnectedCallback(),this.cleanupInteractions()}getContentElDOMRect(){return this.contentEl.getBoundingClientRect()}handleKeyDown(e){let{key:l,defaultPrevented:r,shiftKey:a}=e,{position:i,layout:t,resizable:n,contentEl:c,el:x,resizeValues:{maxBlockSize:m,maxInlineSize:g,minBlockSize:v,minInlineSize:k}}=this,S=[...t==="horizontal"?["ArrowUp","ArrowDown"]:["ArrowLeft","ArrowRight"],"Home","End"];if(!n||!c||r||!S.includes(l))return;let h=this.getContentElDOMRect(),f=B(x)==="rtl"?-1:1,d=a?R:D;switch(l){case"ArrowUp":this.updateSize({size:h.height+(t==="horizontal"&&i==="end"?d:-d),type:"blockSize"}),e.preventDefault();break;case"ArrowDown":this.updateSize({size:h.height+(t==="horizontal"&&i==="end"?-d:d),type:"blockSize"}),e.preventDefault();break;case"ArrowLeft":this.updateSize({size:h.width+(t==="vertical"&&i==="end"?d:-d)*f,type:"inlineSize"}),e.preventDefault();break;case"ArrowRight":this.updateSize({size:h.width+(t==="vertical"&&i==="end"?-d:d)*f,type:"inlineSize"}),e.preventDefault();break;case"Home":this.updateSize({size:t==="horizontal"?v:k,type:t==="horizontal"?"blockSize":"inlineSize"}),e.preventDefault();break;case"End":this.updateSize({size:t==="horizontal"?m:g,type:t==="horizontal"?"blockSize":"inlineSize"}),e.preventDefault();break}}updateSize({type:e,size:l}){let{contentEl:r,resizeValues:a}=this;if(!r)return;let i=e==="blockSize"?"minBlockSize":"minInlineSize",t=e==="blockSize"?"maxBlockSize":"maxInlineSize",n=a[i]&&a[t]?P(l,a[i],a[t]):l,c=Math.round(n);this.resizeValues={...a,[e]:c},r.style[e]=l!==null?`${c}px`:null}cleanupInteractions(){this.interaction?.unset()}async setupInteractions(){this.cleanupInteractions();let{el:e,contentEl:l,resizable:r,position:a,collapsed:i,resizeHandleEl:t,layout:n}=this;if(!l||i||!r||!t)return;await this.el.componentOnReady();let{inlineSize:c,minInlineSize:x,blockSize:m,minBlockSize:g,maxInlineSize:v,maxBlockSize:k}=window.getComputedStyle(l),b={inlineSize:u(c),blockSize:u(m),minInlineSize:u(x),minBlockSize:u(g),maxInlineSize:u(v)||window.innerWidth,maxBlockSize:u(k)||window.innerHeight};this.resizeValues=b;let S=B(e)==="rtl";this.interaction=C(l,{context:e.ownerDocument}).resizable({edges:{top:a==="end"&&n==="horizontal"?t:!1,right:a===(S?"end":"start")&&n==="vertical"?t:!1,bottom:a==="start"&&n==="horizontal"?t:!1,left:a===(S?"start":"end")&&n==="vertical"?t:!1},modifiers:[C.modifiers.restrictSize({min:{width:b.minInlineSize,height:b.minBlockSize},max:{width:b.maxInlineSize,height:b.maxBlockSize}})],listeners:{resizestart:()=>{this.calciteInternalShellPanelResizeStart.emit()},resizeend:()=>{this.calciteInternalShellPanelResizeEnd.emit()},move:({rect:h})=>{let f=n==="horizontal";this.updateSize({size:f?h.height:h.width,type:f?"blockSize":"inlineSize"})}}})}storeContentEl(e){this.contentEl=e}setResizeHandleEl(e){this.resizeHandleEl=e,this.setupInteractions()}setActionBarsLayout(e){e.forEach(l=>l.layout=this.layout)}handleActionBarSlotChange(e){let l=M(e).filter(r=>r?.matches("calcite-action-bar"));this.actionBars=l,this.setActionBarsLayout(l)}handleHeaderSlotChange(e){this.hasHeader=L(e)}getResizeIcon(){let{layout:e}=this;return e==="horizontal"?N.dragVertical:N.dragHorizontal}renderHeader(){return y("header",p`<div class=${s(o.contentHeader)} .hidden=${!this.hasHeader}><slot name=${_.header} @slotchange=${this.handleHeaderSlotChange}></slot></div>`)}render(){let{collapsed:e,position:l,resizable:r,layout:a,displayMode:i,resizeValues:t}=this,n=B(this.el),c=!e&&r?y("resize-handle",p`<div .ariaLabel=${this.messages.resize} .ariaOrientation=${a==="horizontal"?"vertical":"horizontal"} .ariaValueMax=${a=="horizontal"?t.maxBlockSize:t.maxInlineSize} .ariaValueMin=${a=="horizontal"?t.minBlockSize:t.minInlineSize} .ariaValueNow=${a=="horizontal"?t.blockSize:t.inlineSize} class=${s(o.resizeHandle)} @keydown=${this.handleKeyDown} role=separator tabindex=0 touch-action=none ${I(this.setResizeHandleEl)}><div class=${s(o.resizeHandleBar)}><calcite-icon .icon=${this.getResizeIcon()} scale=s></calcite-icon></div></div>`):null,x=()=>a==="horizontal"?l==="start"?z.calciteAnimateInDown:z.calciteAnimateInUp:n==="ltr"&&l==="end"||n==="rtl"&&l==="start"?z.calciteAnimateInLeft:z.calciteAnimateInRight,m=p`<div class=${s(o.contentContainer)}>${y("content",p`<div class=${s({[z.rtl]:n==="rtl",[o.content]:!0,[o.contentOverlay]:i==="overlay",[o.floatContent]:i==="float-content"||i==="float",[z.calciteAnimate]:i==="overlay",[x()]:i==="overlay",[$("width",this.width,this.widthScale)]:!!(this.width||this.widthScale),[$("height",this.height,this.heightScale)]:!!(this.height||this.heightScale)})} .hidden=${e} ${I(this.storeContentEl)}>${this.renderHeader()}<div class=${s(o.contentBody)}><slot></slot></div>${c}</div>`)}</div>`,v=[y("action-bar-container",p`<div class=${s(o.actionBarContainer)}><slot name=${_.actionBar} @slotchange=${this.handleActionBarSlotChange}></slot></div>`),m];return l==="end"&&v.reverse(),p`<div class=${s({[o.container]:!0,[o.floatAll]:i==="float-all"})}>${v}</div>`}};V("calcite-shell-panel",E);export{E as ShellPanel};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
|
|
2
2
|
See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
|
|
3
|
-
v3.3.0-next.
|
|
4
|
-
import{a,b as f,c as b}from"./
|
|
3
|
+
v3.3.0-next.74 */
|
|
4
|
+
import{a,b as f,c as b}from"./CEQZ4V47.js";import{a as g}from"./NG74GX67.js";import{c as n}from"./MWWJPT5E.js";import{a as h}from"./UDA6KIUD.js";import"./D7F33WOR.js";import"./NR7TPRG6.js";import"./NDDQ3AB3.js";import{t as m}from"./YEZ7LLA5.js";import"./I53J6CV7.js";import{D as u,E as p,Q as d,g as r,h as t,o}from"./ER3WVMVV.js";var O=r`:host{--calcite-internal-color-focus: var( --calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)) )}:host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host{display:flex;flex-direction:column;padding:0;background-color:transparent;border-color:var(--calcite-action-group-border-color, var(--calcite-color-border-3));border-style:solid;border-width:0}.container{display:flex;flex-grow:1;flex-direction:column}:host([columns="1"]){--calcite-internal-action-group-columns: 1}:host([columns="2"]){--calcite-internal-action-group-columns: 2}:host([columns="3"]){--calcite-internal-action-group-columns: 3}:host([columns="4"]){--calcite-internal-action-group-columns: 4}:host([columns="5"]){--calcite-internal-action-group-columns: 5}:host([columns="6"]){--calcite-internal-action-group-columns: 6}:host(:first-child){padding-block-start:0px}:host([layout=horizontal]),:host([layout=horizontal]) .container{flex-direction:row}:host([layout=grid]){display:grid}:host([layout=grid]) .container{display:grid;place-content:stretch;background-color:transparent;grid-template-columns:repeat(var(--calcite-action-group-columns, var(--calcite-internal-action-group-columns, 3)),auto);gap:var(--calcite-action-group-gap, 1px);padding:var(--calcite-action-group-gap, 1px)}:host([layout=horizontal]) ::slotted(calcite-action-group){border-inline-end:var(--calcite-size-px)}:host([hidden]){display:none}[hidden]{display:none}`,s=class extends u{constructor(){super(...arguments),this.messages=g(),this.focusSetter=h()(this),this.hasMenuActions=!1,this.expanded=!1,this.layout="vertical",this.menuOpen=!1,this.overlayPositioning="absolute",this.scale="m",this.calciteActionGroupCollapse=o({cancelable:!1}),this.calciteActionGroupExpand=o({cancelable:!1})}static{this.properties={hasMenuActions:[16,{},{state:!0}],columns:[11,{},{type:Number,reflect:!0}],expanded:[7,{},{reflect:!0,type:Boolean}],label:1,layout:[3,{},{reflect:!0}],menuFlipPlacements:[0,{},{attribute:!1}],menuOpen:[7,{},{reflect:!0,type:Boolean}],menuPlacement:[3,{},{reflect:!0}],messageOverrides:[0,{},{attribute:!1}],overlayPositioning:[3,{},{reflect:!0}],scale:[3,{},{reflect:!0}]}}static{this.shadowRootOptions={mode:"open",delegatesFocus:!0}}static{this.styles=O}async setFocus(e){return this.focusSetter(()=>this.el,e)}willUpdate(e){e.has("expanded")&&((this.hasUpdated||this.expanded!==!1)&&(this.menuOpen=!1),this.hasUpdated&&(this.expanded?this.calciteActionGroupExpand.emit():this.calciteActionGroupCollapse.emit()))}setMenuOpen(e){this.menuOpen=!!e.currentTarget.open}handleMenuActionsSlotChange(e){this.hasMenuActions=m(e)}renderMenu(){let{expanded:e,menuOpen:x,scale:i,layout:l,messages:c,overlayPositioning:y,hasMenuActions:v,menuFlipPlacements:$,menuPlacement:S}=this;return t`<calcite-action-menu .expanded=${e} .flipPlacements=${$??(l==="horizontal"?["top","bottom"]:["left","right"])} .hidden=${!v} .label=${c.more} @calciteActionMenuOpen=${this.setMenuOpen} .open=${x} .overlayPositioning=${y} .placement=${S??(l==="horizontal"?"bottom-start":"leading-start")} .scale=${i}><calcite-action .icon=${f.menu} .scale=${i} slot=${n.trigger} .text=${c.more} .textEnabled=${e}></calcite-action><slot name=${a.menuActions} @slotchange=${this.handleMenuActionsSlotChange}></slot><slot name=${a.menuTooltip} slot=${n.tooltip}></slot></calcite-action-menu>`}render(){return t`<div .ariaLabel=${this.label} class=${p(b.container)} role=group><slot></slot>${this.renderMenu()}</div>`}};d("calcite-action-group",s);export{s as ActionGroup};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
|
|
2
2
|
See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
|
|
3
|
-
v3.3.0-next.
|
|
4
|
-
import{a as ue,d as _,e as Ce}from"./GKNUPJEH.js";import{a as ne}from"./KNR6IRPV.js";import{A as k,B as he,C as B,D as de,E as pe,a as S,b as n,c as m,d as T,e as D,f as u,g as E,h as b,i as A,j as K,k as H,m as I,n as U,r as O,s as y,u as re,v as ce,x as j,y as N,z as W}from"./6XFXEOC3.js";import"./MNZNPJUV.js";import{a as ie,b as oe}from"./E47CQDD4.js";import{a as F}from"./ACT2Z2T7.js";import{a as le}from"./T62H6AAA.js";import{c as L}from"./ZNBK3H5J.js";import{a as se}from"./Y4N76SRL.js";import{a as Q}from"./KVE5DW4O.js";import{a as ae}from"./ICRA5J5Z.js";import{a as te}from"./YXORD5RU.js";import"./HZCA2LTL.js";import"./C7WCWLTK.js";import"./GBPIEDOY.js";import{e as ee,w as M}from"./DSFG7NPT.js";import"./R2IXC3A7.js";import{C as v,D as J,E as r,F as x,Q as Z,g as Y,h as p,l as $,o as z}from"./BOMDSRVT.js";var ke=Y`:host{--calcite-internal-color-focus: var( --calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)) )}:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:inline-block;font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-normal);inline-size:var(--calcite-internal-color-picker-min-width);min-inline-size:var(--calcite-internal-color-picker-min-width)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([scale=s]){--calcite-internal-color-picker-min-width: 200px;--calcite-color-picker-spacing: 8px}:host([scale=s]) .saved-colors{gap:.25rem;grid-template-columns:repeat(auto-fill,20px)}:host([scale=m]){--calcite-internal-color-picker-min-width: 240px;--calcite-color-picker-spacing: 12px}:host([scale=l]){--calcite-internal-color-picker-min-width: 304px;--calcite-color-picker-spacing: 16px;font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=l]) .section:first-of-type{padding-block-start:var(--calcite-color-picker-spacing)}:host([scale=l]) .saved-colors{grid-template-columns:repeat(auto-fill,32px)}:host([scale=l]) .control-section{display:flex;flex-direction:column;flex-wrap:wrap;align-items:baseline}:host([scale=l]) .color-hex-options{inline-size:100%;display:flex;flex-shrink:1;flex-direction:column;justify-content:space-around}:host([scale=l]) .color-mode-container{flex-shrink:3}.container{background-color:var(--calcite-color-foreground-1);display:flex;flex-direction:column;block-size:min-content;border:1px solid var(--calcite-color-border-1)}.control-and-scope{position:relative;display:flex;cursor:pointer;touch-action:none}.color-field,.control-and-scope{-webkit-user-select:none;user-select:none}.scope{pointer-events:none;position:absolute;z-index:var(--calcite-z-index);block-size:1px;inline-size:1px;border-radius:9999px;background-color:transparent;font-size:var(--calcite-font-size--1);outline-color:transparent}.scope:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline:var(--calcite-border-width-md) solid var(--calcite-internal-color-focus);outline-offset:calc(var(--calcite-spacing-base) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))));outline-offset:6px}.hex-and-channels-group{display:flex;inline-size:100%;flex-direction:column;flex-wrap:wrap}.section{padding-block:0 var(--calcite-color-picker-spacing);padding-inline:var(--calcite-color-picker-spacing)}.section:first-of-type{padding-block-start:var(--calcite-color-picker-spacing)}.sliders{display:flex;flex-direction:column;justify-content:space-between;margin-inline-start:var(--calcite-color-picker-spacing);gap:var(--calcite-spacing-xxs)}.preview-and-sliders{display:flex;align-items:center;padding:var(--calcite-color-picker-spacing)}.color-hex-options,.section--split{flex-grow:1}.header{display:flex;align-items:center;justify-content:space-between;color:var(--calcite-color-text-1)}.color-mode-container{padding-block-start:var(--calcite-color-picker-spacing)}.channels{display:flex}.channel{flex-grow:1}.channel[data-channel-index="3"]{margin-inline-start:-1px;min-inline-size:81px}:host([scale=s]) .channel[data-channel-index="3"]{min-inline-size:68px}:host([scale=l]) .channel[data-channel-index="3"]{min-inline-size:88px}.saved-colors{display:grid;gap:.5rem;padding-block-start:var(--calcite-color-picker-spacing);grid-template-columns:repeat(auto-fill,24px)}.saved-colors-buttons{display:flex}.saved-color{outline-offset:0;outline-color:transparent;cursor:pointer}.saved-color:focus{outline:2px solid var(--calcite-color-brand);outline-offset:2px}.saved-color:hover{transition:outline-color var(--calcite-internal-animation-timing-fast) ease-in-out;outline:2px solid var(--calcite-color-border-2);outline-offset:2px}:host([hidden]){display:none}[hidden]{display:none}`,fe=16,V=class extends J{constructor(){super(),this._color=m,this.internalColorUpdateContext=null,this.isActiveChannelInputEmpty=!1,this.mode=j.HEX,this.resizeObserver=Q("resize",e=>this.resizeCanvas(e)),this.shiftKeyChannelAdjustment=0,this.upOrDownArrowKeyTracker=null,this._valueWasSet=!1,this.messages=ae({blocking:!0}),this.captureColorFieldColor=(e,t,i=!0)=>{let{width:o,height:a}=this.dynamicDimensions.colorField,l=Math.round(u.s/o*e),s=Math.round(u.v/a*(a-t));this.internalColorSet(this.baseColorFieldColor.hsv().saturationv(l).value(s),i)},this.cancelable=le()(this),this.drawColorControls=L((e="all")=>{(e==="all"||e==="color-field")&&this.colorFieldRenderingContext&&this.drawColorField(),(e==="all"||e==="hue-slider")&&this.hueSliderRenderingContext&&this.drawHueSlider(),this.alphaChannel&&(e==="all"||e==="opacity-slider")&&this.opacitySliderRenderingContext&&this.drawOpacitySlider()},fe),this.globalPointerMoveHandler=e=>{let{activeCanvasInfo:t,el:i}=this;if(!i.isConnected||!t)return;let{context:o,bounds:a}=t,l,s,{clientX:c,clientY:h}=e;o.canvas.matches(":hover")?(l=c-a.x,s=h-a.y):(c<a.x+a.width&&c>a.x?l=c-a.x:c<a.x?l=0:l=a.width,h<a.y+a.height&&h>a.y?s=h-a.y:h<a.y?s=0:s=a.height),o===this.colorFieldRenderingContext?this.captureColorFieldColor(l,s,!1):o===this.hueSliderRenderingContext?this.captureHueSliderColor(l):o===this.opacitySliderRenderingContext&&this.captureOpacitySliderValue(l)},this.globalPointerUpHandler=e=>{if(!M(e))return;let t=this.activeCanvasInfo;this.activeCanvasInfo=null,this.drawColorControls(),t&&this.calciteColorPickerChange.emit()},this.resizeCanvas=L(e=>{if(!this.hasUpdated)return;let[t]=e,i=Math.floor(t.contentBoxSize[0].inlineSize);this.dynamicDimensions.colorField.width!==i&&(this.updateDynamicDimensions(i),this.updateCanvasSize(),this.drawColorControls())},fe),this.updateDynamicDimensions=e=>{let t={width:de(e,this.staticDimensions,this.alphaChannel),height:this.staticDimensions.slider.height};this.dynamicDimensions={colorField:pe(e),slider:t}},this.focusSetter=te()(this),this.channelMode="rgb",this.channels=this.toChannels(m),this.staticDimensions=A.m,this.savedColors=[],this.allowEmpty=!1,this.alphaChannel=!1,this.channelsDisabled=!1,this.clearable=!1,this.disabled=!1,this.fieldDisabled=!1,this.format="auto",this.hexDisabled=!1,this.savedDisabled=!1,this.scale="m",this.calciteColorPickerChange=z({cancelable:!1}),this.calciteColorPickerInput=z({cancelable:!1}),this.listen("keydown",this.handleChannelKeyUpOrDown,{capture:!0}),this.listen("keyup",this.handleChannelKeyUpOrDown,{capture:!0})}static{this.properties={channelMode:[16,{},{state:!0}],channels:[16,{},{state:!0}],colorFieldScopeLeft:[16,{},{state:!0}],colorFieldScopeTop:[16,{},{state:!0}],staticDimensions:[16,{},{state:!0}],hueScopeLeft:[16,{},{state:!0}],opacityScopeLeft:[16,{},{state:!0}],savedColors:[16,{},{state:!0}],scopeOrientation:[16,{},{state:!0}],allowEmpty:[7,{},{reflect:!0,type:Boolean}],alphaChannel:[5,{},{type:Boolean}],channelsDisabled:[5,{},{type:Boolean}],clearable:[7,{},{reflect:!0,type:Boolean}],color:[0,{},{attribute:!1}],disabled:[7,{},{reflect:!0,type:Boolean}],fieldDisabled:[7,{},{reflect:!0,type:Boolean}],format:[3,{},{reflect:!0}],hexDisabled:[5,{},{type:Boolean}],messageOverrides:[0,{},{attribute:!1}],numberingSystem:[3,{},{reflect:!0}],savedDisabled:[7,{},{reflect:!0,type:Boolean}],scale:[3,{},{reflect:!0}],storageId:[3,{},{reflect:!0}],value:1}}static{this.styles=ke}get color(){return this._color}set color(e){let t=this._color;this._color=e,this.handleColorChange(e,t)}get value(){return this._value}set value(e){let t=this._value;this._value=e,this.handleValueChange(e,t),this._valueWasSet=!0}async setFocus(e){return this.focusSetter(()=>this.el,e)}connectedCallback(){super.connectedCallback(),this.observeResize(),this.cancelable.add([this.drawColorControls,this.resizeCanvas])}async load(){this._valueWasSet||(this._value??=O(y(m,this.alphaChannel))),this.handleAllowEmptyOrClearableChange();let{isClearable:e,color:t,format:i,value:o}=this,a=e&&!o,l=N(o),s=a||i==="auto"&&l||i===l,c=a?null:s?S(o):t;s||this.showIncompatibleColorWarning(o,i),this.setMode(i,!1),this.internalColorSet(c,!1,"initial"),this.updateStaticDimensions(this.scale),this.updateDynamicDimensions(A[this.scale].minWidth);let h=`${T}${this.storageId}`;this.storageId&&localStorage.getItem(h)&&(this.savedColors=JSON.parse(localStorage.getItem(h)))}willUpdate(e){(e.has("allowEmpty")&&(this.hasUpdated||this.allowEmpty!==!1)||e.has("clearable")&&(this.hasUpdated||this.clearable!==!1))&&this.handleAllowEmptyOrClearableChange(),e.has("alphaChannel")&&(this.hasUpdated||this.alphaChannel!==!1)&&this.handleAlphaChannelChange(this.alphaChannel),this.hasUpdated&&(e.has("alphaChannel")&&this.alphaChannel!==!1||e.has("staticDimensions")&&this.staticDimensions!==A.m)&&this.handleAlphaChannelDimensionsChange(),(e.has("alphaChannel")&&(this.hasUpdated||this.alphaChannel!==!1)||e.has("format")&&(this.hasUpdated||this.format!=="auto"))&&this.handleFormatOrAlphaChannelChange(),e.has("scale")&&(this.hasUpdated||this.scale!=="m")&&this.handleScaleChange(this.scale)}updated(){ie(this)}loaded(){this.handleAlphaChannelDimensionsChange()}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("pointermove",this.globalPointerMoveHandler),window.removeEventListener("pointerup",this.globalPointerUpHandler),this.resizeObserver?.disconnect()}get baseColorFieldColor(){return this.color||this.previousColor||m}get effectiveSliderWidth(){return this.dynamicDimensions.slider.width}observeResize(){this.resizeObserver?.observe(this.el)}handleAllowEmptyOrClearableChange(){this.isClearable=this.clearable||this.allowEmpty}handleAlphaChannelChange(e){let{format:t}=this;e&&t!=="auto"&&!k(t)&&(console.warn(`ignoring alphaChannel as the current format (${t}) does not support alpha`),this.alphaChannel=!1)}handleAlphaChannelDimensionsChange(){this.drawColorControls()}handleColorChange(e,t){this.drawColorControls(),this.updateChannelsFromColor(e),this.previousColor=t}handleFormatOrAlphaChannelChange(){this.setMode(this.format),this.internalColorSet(this.color,!1,"internal")}handleScaleChange(e="m"){this.updateStaticDimensions(e),this.updateCanvasSize(),this.drawColorControls()}handleValueChange(e,t){let{isClearable:i,format:o}=this,a=!i||e,l=!1;if(a){let d=N(e);if(!d||o!=="auto"&&d!==o){this.showIncompatibleColorWarning(e,o),this._value=t;return}l=this.mode!==d,this.setMode(d,this.internalColorUpdateContext===null)}let s=this.activeCanvasInfo;if(this.internalColorUpdateContext==="initial")return;if(this.internalColorUpdateContext==="user-interaction"){this.calciteColorPickerInput.emit(),s||this.calciteColorPickerChange.emit();return}let c=i&&!e?null:S(e!=null&&typeof e=="object"&&k(this.mode)?ce(e):e),h=!W(c,this.color);(l||h)&&this.internalColorSet(c,this.alphaChannel&&!(this.mode.endsWith("a")||this.mode.endsWith("a-css"))||this.internalColorUpdateContext==="internal","internal")}handleTabActivate(e){this.channelMode=e.currentTarget.getAttribute("data-color-mode"),this.updateChannelsFromColor(this.color)}handleColorFieldScopeKeyDown(e){let{key:t}=e,i={ArrowUp:{x:0,y:-10},ArrowRight:{x:10,y:0},ArrowDown:{x:0,y:10},ArrowLeft:{x:-10,y:0}};i[t]&&(e.preventDefault(),this.scopeOrientation=t==="ArrowDown"||t==="ArrowUp"?"vertical":"horizontal",this.captureColorFieldColor(this.colorFieldScopeLeft+i[t].x||0,this.colorFieldScopeTop+i[t].y||0,!1))}handleHueScopeKeyDown(e){let t=e.shiftKey?10:1,{key:i}=e,o={ArrowUp:1,ArrowRight:1,ArrowDown:-1,ArrowLeft:-1};if(o[i]){e.preventDefault();let a=o[i]*t,l=this.baseColorFieldColor.hue(),s=this.baseColorFieldColor.hue(l+a);this.internalColorSet(s,!1)}}handleHexInputChange(e){e.stopPropagation();let{isClearable:t,color:i}=this,a=e.target.value;if(t&&!a){this.internalColorSet(null);return}let l=i&&O(y(i,k(this.mode)));a!==l&&this.internalColorSet(S(a))}handleSavedColorSelect(e){let t=e.currentTarget;this.internalColorSet(S(t.color))}handleChannelInput(e){let t=e.currentTarget,i=Number(t.getAttribute("data-channel-index")),a=i===3?b.max:this.channelMode==="rgb"?D[Object.keys(D)[i]]:u[Object.keys(u)[i]],l;if(!t.value)l="",this.isActiveChannelInputEmpty=!0,this.upOrDownArrowKeyTracker=null;else{let c=Number(t.value)+this.shiftKeyChannelAdjustment;l=ue(c,0,a).toString()}t.value=l,l!==""&&this.shiftKeyChannelAdjustment!==0?this.handleChannelChange(e):l!==""&&this.handleChannelChange(e)}handleChannelBlur(e){let t=e.currentTarget,i=Number(t.getAttribute("data-channel-index")),o=[...this.channels];!t.value&&!this.isClearable&&(t.value=o[i]?.toString())}handleChannelFocus(e){e.currentTarget.selectText()}handleChannelKeyUpOrDown(e){this.shiftKeyChannelAdjustment=0;let{key:t}=e;if(t!=="ArrowUp"&&t!=="ArrowDown"||!e.composedPath().some(a=>a.classList?.contains(n.channel)))return;let{shiftKey:i}=e;if(e.preventDefault(),!this.color){this.internalColorSet(this.previousColor),e.stopPropagation();return}let o=9;this.shiftKeyChannelAdjustment=t==="ArrowUp"&&i?o:t==="ArrowDown"&&i?-o:0,t==="ArrowUp"&&(this.upOrDownArrowKeyTracker="up"),t==="ArrowDown"&&(this.upOrDownArrowKeyTracker="down")}getChannelInputLimit(e){return this.channelMode==="rgb"?D[Object.keys(D)[e]]:u[Object.keys(u)[e]]}handleChannelChange(e){let t=e.currentTarget,i=Number(t.getAttribute("data-channel-index")),o=[...this.channels];if(this.isClearable&&!t.value){this.channels=[null,null,null,null],this.internalColorSet(null);return}let l=i===3;this.isActiveChannelInputEmpty&&this.upOrDownArrowKeyTracker&&(t.value=this.upOrDownArrowKeyTracker==="up"?(o[i]+1<=this.getChannelInputLimit(i)?o[i]+1:this.getChannelInputLimit(i)).toString():(o[i]-1>=0?o[i]-1:0).toString(),this.isActiveChannelInputEmpty=!1,this.upOrDownArrowKeyTracker=null);let s=t.value?Number(t.value):o[i];o[i]=l?U(s):s,this.updateColorFromChannels(o)}handleSavedColorKeyDown(e){se(e.key)&&(e.preventDefault(),this.handleSavedColorSelect(e))}handleColorFieldPointerDown(e){this.handleCanvasControlPointerDown(e,this.colorFieldRenderingContext,this.captureColorFieldColor,this.colorFieldScopeNode)}focusScope(e){requestAnimationFrame(()=>{e.focus()})}handleHueSliderPointerDown(e){this.handleCanvasControlPointerDown(e,this.hueSliderRenderingContext,this.captureHueSliderColor,this.hueScopeNode)}handleOpacitySliderPointerDown(e){this.handleCanvasControlPointerDown(e,this.opacitySliderRenderingContext,this.captureOpacitySliderValue,this.opacityScopeNode)}handleCanvasControlPointerDown(e,t,i,o){M(e)&&(window.addEventListener("pointermove",this.globalPointerMoveHandler),window.addEventListener("pointerup",this.globalPointerUpHandler,{once:!0}),this.activeCanvasInfo={context:t,bounds:t.canvas.getBoundingClientRect()},i.call(this,e.offsetX,e.offsetY),this.focusScope(o))}storeColorFieldScope(e){this.colorFieldScopeNode=e}storeHueScope(e){this.hueScopeNode=e}handleKeyDown(e){e.key==="Enter"&&e.preventDefault()}showIncompatibleColorWarning(e,t){console.warn(`ignoring color value (${e}) as it is not compatible with the current format (${t})`)}setMode(e,t=!0){let i=e==="auto"?this.mode:e;this.mode=this.ensureCompatibleMode(i,t)}ensureCompatibleMode(e,t){let{alphaChannel:i}=this,o=k(e);if(i&&!o){let a=he(e);return t&&console.warn(`setting format to (${a}) as the provided one (${e}) does not support alpha`),a}if(!i&&o){let a=B(e);return t&&console.warn(`setting format to (${a}) as the provided one (${e}) does not support alpha`),a}return e}captureHueSliderColor(e){let t=E/this.effectiveSliderWidth*e;this.internalColorSet(this.baseColorFieldColor.hue(t),!1)}captureOpacitySliderValue(e){let t=U(b.max/this.effectiveSliderWidth*e);this.internalColorSet(this.baseColorFieldColor.alpha(t),!1)}internalColorSet(e,t=!0,i="user-interaction"){t&&W(e,this.color)||(this.internalColorUpdateContext=i,this.color=e,this.value=this.toValue(e),this.internalColorUpdateContext=null)}toValue(e,t=this.mode){if(!e)return null;if(t.includes("hex")){let a=t===j.HEXA;return O(y(e.round(),a),a)}if(t.includes("-css")){let a=e[t.replace("-css","").replace("a","")]().round().string();if((t.endsWith("a")||t.endsWith("a-css"))&&e.alpha()===1){let s=a.slice(0,3),c=a.slice(4,-1);return`${s}a(${c}, ${e.alpha()})`}return a}let o=e[B(t)]().round().object();return t.endsWith("a")?re(o):o}getSliderCapSpacing(){let{staticDimensions:{slider:{height:e},thumb:{radius:t}}}=this;return t*2-e}updateStaticDimensions(e="m"){this.staticDimensions=A[e]}deleteColor(){let e=y(this.color,this.alphaChannel);if(!(this.savedColors.indexOf(e)>-1))return;let i=this.savedColors.filter(a=>a!==e);this.savedColors=i;let o=`${T}${this.storageId}`;this.storageId&&localStorage.setItem(o,JSON.stringify(i))}saveColor(){let e=y(this.color,this.alphaChannel);if(this.savedColors.indexOf(e)>-1)return;let i=[...this.savedColors,e];this.savedColors=i;let o=`${T}${this.storageId}`;this.storageId&&localStorage.setItem(o,JSON.stringify(i))}drawColorField(){let e=this.colorFieldRenderingContext,{width:t,height:i}=this.dynamicDimensions.colorField;e.fillStyle=this.baseColorFieldColor.hsv().saturationv(100).value(100).alpha(1).string(),e.fillRect(0,0,t,i);let o=e.createLinearGradient(0,0,t,0);o.addColorStop(0,"rgba(255,255,255,1)"),o.addColorStop(1,"rgba(255,255,255,0)"),e.fillStyle=o,e.fillRect(0,0,t,i);let a=e.createLinearGradient(0,0,0,i);a.addColorStop(0,"rgba(0,0,0,0)"),a.addColorStop(1,"rgba(0,0,0,1)"),e.fillStyle=a,e.fillRect(0,0,t,i),this.drawActiveColorFieldColor()}setCanvasContextSize(e,{height:t,width:i}){if(!e)return;let o=window.devicePixelRatio||1;e.width=i*o,e.height=t*o,e.style.height=`${t}px`,e.style.width=`${i}px`,e.getContext("2d").scale(o,o)}initColorField(e){e&&(this.colorFieldRenderingContext=e.getContext("2d"),this.updateCanvasSize("color-field"),this.drawColorControls())}initHueSlider(e){e&&(this.hueSliderRenderingContext=e.getContext("2d"),this.updateCanvasSize("hue-slider"),this.drawHueSlider())}initOpacitySlider(e){e&&(this.opacitySliderRenderingContext=e.getContext("2d"),this.updateCanvasSize("opacity-slider"),this.drawOpacitySlider())}updateCanvasSize(e="all"){let{dynamicDimensions:t,staticDimensions:i}=this;(e==="all"||e==="color-field")&&this.setCanvasContextSize(this.colorFieldRenderingContext?.canvas,t.colorField);let o={width:this.effectiveSliderWidth,height:i.slider.height+(i.thumb.radius-t.slider.height/2)*2};(e==="all"||e==="hue-slider")&&this.setCanvasContextSize(this.hueSliderRenderingContext?.canvas,o),(e==="all"||e==="opacity-slider")&&this.setCanvasContextSize(this.opacitySliderRenderingContext?.canvas,o)}drawActiveColorFieldColor(){let{color:e}=this;if(!e)return;let t=e.hsv(),{staticDimensions:{thumb:{radius:i}}}=this,{width:o,height:a}=this.dynamicDimensions.colorField,l=t.saturationv()/(u.s/o),s=a-t.value()/(u.v/a);requestAnimationFrame(()=>{this.colorFieldScopeLeft=l,this.colorFieldScopeTop=s}),this.drawThumb(this.colorFieldRenderingContext,i,l,s,t,!1)}drawThumb(e,t,i,o,a,l){let c=2*Math.PI,h=1;if(e.beginPath(),e.arc(i,o,t,0,c),e.fillStyle="#fff",e.fill(),e.strokeStyle="rgba(0,0,0,0.3)",e.lineWidth=h,e.stroke(),l&&a.alpha()<1){let f=e.createPattern(this.getCheckeredBackgroundPattern(),"repeat");e.beginPath(),e.arc(i,o,t-3,0,c),e.fillStyle=f,e.fill()}e.globalCompositeOperation="source-atop",e.beginPath(),e.arc(i,o,t-3,0,c);let d=l?a.alpha():1;e.fillStyle=a.rgb().alpha(d).string(),e.fill(),e.globalCompositeOperation="source-over"}drawActiveHueSliderColor(){let{color:e}=this;if(!e)return;let t=e.hsv().saturationv(100).value(100),{staticDimensions:{thumb:{radius:i}}}=this,o=this.effectiveSliderWidth,a=t.hue()/(E/o),l=i,s=this.getSliderBoundX(a,o,i);requestAnimationFrame(()=>{this.hueScopeLeft=s}),this.drawThumb(this.hueSliderRenderingContext,i,s,l,t,!1)}drawHueSlider(){let e=this.hueSliderRenderingContext,{staticDimensions:{slider:{height:t},thumb:{radius:i}}}=this,o=0,a=i-t/2,l=this.effectiveSliderWidth,s=e.createLinearGradient(0,0,l,0),c=["red","yellow","lime","cyan","blue","magenta","#ff0004"],h=1/(c.length-1),d=0;c.forEach(f=>{s.addColorStop(d,S(f).string()),d+=h}),e.clearRect(0,0,l,t+this.getSliderCapSpacing()*2),this.drawSliderPath(e,t,l,o,a),e.fillStyle=s,e.fill(),e.strokeStyle="rgba(0,0,0,0.3)",e.lineWidth=1,e.stroke(),this.drawActiveHueSliderColor()}drawOpacitySlider(){let e=this.opacitySliderRenderingContext,{baseColorFieldColor:t,staticDimensions:{slider:{height:i},thumb:{radius:o}}}=this,a=0,l=o-i/2,s=this.effectiveSliderWidth;e.clearRect(0,0,s,i+this.getSliderCapSpacing()*2);let c=e.createLinearGradient(0,l,s,0),h=t.rgb().alpha(0),d=t.rgb().alpha(.5),f=t.rgb().alpha(1);c.addColorStop(0,h.string()),c.addColorStop(.5,d.string()),c.addColorStop(1,f.string()),this.drawSliderPath(e,i,s,a,l);let C=e.createPattern(this.getCheckeredBackgroundPattern(),"repeat");e.fillStyle=C,e.fill(),e.fillStyle=c,e.fill(),e.strokeStyle="rgba(0,0,0,0.3)",e.lineWidth=1,e.stroke(),this.drawActiveOpacitySliderColor()}drawSliderPath(e,t,i,o,a){let l=t/2+1;e.beginPath(),e.moveTo(o+l,a),e.lineTo(o+i-l,a),e.quadraticCurveTo(o+i,a,o+i,a+l),e.lineTo(o+i,a+t-l),e.quadraticCurveTo(o+i,a+t,o+i-l,a+t),e.lineTo(o+l,a+t),e.quadraticCurveTo(o,a+t,o,a+t-l),e.lineTo(o,a+l),e.quadraticCurveTo(o,a,o+l,a),e.closePath()}getCheckeredBackgroundPattern(){if(this.checkerPattern)return this.checkerPattern;let e=document.createElement("canvas");e.width=10,e.height=10;let t=e.getContext("2d");return t.fillStyle="#ccc",t.fillRect(0,0,10,10),t.fillStyle="#fff",t.fillRect(0,0,5,5),t.fillRect(5,5,5,5),this.checkerPattern=e,e}drawActiveOpacitySliderColor(){let{color:e}=this;if(!e)return;let t=e,{staticDimensions:{thumb:{radius:i}}}=this,o=this.effectiveSliderWidth,a=I(t.alpha())/(b.max/o),l=i,s=this.getSliderBoundX(a,o,i);requestAnimationFrame(()=>{this.opacityScopeLeft=s}),this.drawThumb(this.opacitySliderRenderingContext,i,s,l,t,!0)}getSliderBoundX(e,t,i){let o=Ce(e,t,i);return o===0?e:o===-1?_(e,0,t,i,i*2):_(e,0,t,t-i*2,t-i)}storeOpacityScope(e){this.opacityScopeNode=e}handleOpacityScopeKeyDown(e){let t=e.shiftKey?10:1,{key:i}=e,o={ArrowUp:.01,ArrowRight:.01,ArrowDown:-.01,ArrowLeft:-.01};if(o[i]){e.preventDefault();let a=o[i]*t,l=this.baseColorFieldColor.alpha(),s=this.baseColorFieldColor.alpha(l+a);this.internalColorSet(s,!1)}}updateColorFromChannels(e){this.internalColorSet(S(e,this.channelMode))}updateChannelsFromColor(e){this.channels=e?this.toChannels(e):[null,null,null,null]}toChannels(e){let{channelMode:t}=this,i=e[t]().round().array();return i.length===3&&i.push(1),i}getAdjustedScopePosition(e,t){return[e-K/2,t-K/2]}render(){let{channelsDisabled:e,color:t,colorFieldScopeLeft:i,colorFieldScopeTop:o,staticDimensions:{thumb:{radius:a}},fieldDisabled:l,hexDisabled:s,hueScopeLeft:c,messages:h,alphaChannel:d,opacityScopeLeft:f,savedColors:C,savedDisabled:w,scale:g,scopeOrientation:me}=this,X=this.effectiveSliderWidth,q=t?y(t,d):null,ge=a,ve=c??X*m.hue()/u.h,Se=a,be=f??X*I(m.alpha())/b.max,G=t===void 0,P=me==="vertical",[ye,we]=this.getAdjustedScopePosition(i,o),[$e,xe]=this.getAdjustedScopePosition(ve,ge),[De,Ae]=this.getAdjustedScopePosition(be,Se);return oe({disabled:this.disabled,children:p`<div class=${r(n.container)}>${l?null:p`<div class=${r(n.controlAndScope)}><canvas class=${r(n.colorField)} @pointerdown=${this.handleColorFieldPointerDown} ${v(this.initColorField)}></canvas><div .ariaLabel=${P?h.value:h.saturation} .ariaValueMax=${P?u.v:u.s} aria-valuemin=0 .ariaValueNow=${(P?t?.saturationv():t?.value())||"0"} class=${r({[n.scope]:!0,[n.colorFieldScope]:!0})} @keydown=${this.handleColorFieldScopeKeyDown} role=slider style=${x({top:`${we||0}px`,left:`${ye||0}px`})} tabindex=0 ${v(this.storeColorFieldScope)}></div></div>`}<div class=${r(n.previewAndSliders)}><calcite-color-picker-swatch class=${r(n.preview)} .color=${q} .scale=${this.alphaChannel?"l":this.scale}></calcite-color-picker-swatch><div class=${r(n.sliders)}><div class=${r(n.controlAndScope)}><canvas class=${r({[n.slider]:!0,[n.hueSlider]:!0})} @pointerdown=${this.handleHueSliderPointerDown} ${v(this.initHueSlider)}></canvas><div .ariaLabel=${h.hue} .ariaValueMax=${u.h} aria-valuemin=0 .ariaValueNow=${t?.round().hue()||m.round().hue()} class=${r({[n.scope]:!0,[n.hueScope]:!0})} @keydown=${this.handleHueScopeKeyDown} role=slider style=${x({top:`${xe}px`,left:`${$e}px`})} tabindex=0 ${v(this.storeHueScope)}></div></div>${d?p`<div class=${r(n.controlAndScope)}><canvas class=${r({[n.slider]:!0,[n.opacitySlider]:!0})} @pointerdown=${this.handleOpacitySliderPointerDown} ${v(this.initOpacitySlider)}></canvas><div .ariaLabel=${h.opacity} .ariaValueMax=${b.max} .ariaValueMin=${b.min} .ariaValueNow=${(t||m).round().alpha()} class=${r({[n.scope]:!0,[n.opacityScope]:!0})} @keydown=${this.handleOpacityScopeKeyDown} role=slider style=${x({top:`${Ae}px`,left:`${De}px`})} tabindex=0 ${v(this.storeOpacityScope)}></div></div>`:null}</div></div>${s&&e?null:p`<div class=${r({[n.controlSection]:!0,[n.section]:!0})}><div class=${r(n.hexAndChannelsGroup)}>${s?null:p`<div class=${r(n.hexOptions)}><calcite-color-picker-hex-input .allowEmpty=${this.isClearable} .alphaChannel=${d} class=${r(n.control)} .messages=${h} .numberingSystem=${this.numberingSystem} @calciteColorPickerHexInputChange=${this.handleHexInputChange} .scale=${g} .value=${q}></calcite-color-picker-hex-input></div>`}${e?null:p`<calcite-tabs class=${r({[n.colorModeContainer]:!0,[n.splitSection]:!0})} .scale=${g==="l"?"m":"s"}><calcite-tab-nav slot=title-group>${this.renderChannelsTabTitle("rgb")}${this.renderChannelsTabTitle("hsv")}</calcite-tab-nav>${this.renderChannelsTab("rgb")}${this.renderChannelsTab("hsv")}</calcite-tabs>`}</div></div>`}${w?null:p`<div class=${r({[n.savedColorsSection]:!0,[n.section]:!0})}><div class=${r(n.header)}><label>${h.saved}</label><div class=${r(n.savedColorsButtons)}><calcite-button appearance=transparent class=${r(n.deleteColor)} .disabled=${G} .iconStart=${H.minus} kind=neutral .label=${h.deleteColor} @click=${this.deleteColor} .scale=${g} type=button></calcite-button><calcite-button appearance=transparent class=${r(n.saveColor)} .disabled=${G} .iconStart=${H.plus} kind=neutral .label=${h.saveColor} @click=${this.saveColor} .scale=${g} type=button></calcite-button></div></div>${C.length>0?p`<div class=${r(n.savedColors)}>${ne(C,R=>R,R=>p`<calcite-color-picker-swatch class=${r(n.savedColor)} .color=${R} @click=${this.handleSavedColorSelect} @keydown=${this.handleSavedColorKeyDown} .scale=${g} tabindex=0></calcite-color-picker-swatch>`)}</div>`:null}</div>`}</div>`})}renderChannelsTabTitle(e){let{channelMode:t,messages:i}=this,o=e===t,a=e==="rgb"?i.rgb:i.hsv;return F(e,p`<calcite-tab-title class=${r(n.colorMode)} data-color-mode=${e??$} @calciteTabsActivate=${this.handleTabActivate} .selected=${o}>${a}</calcite-tab-title>`)}renderChannelsTab(e){let{isClearable:t,channelMode:i,channels:o,messages:a,alphaChannel:l}=this,s=e===i,h=e==="rgb"?[a.red,a.green,a.blue]:[a.hue,a.saturation,a.value],d=ee(this.el),f=l?o:o.slice(0,3);return F(e,p`<calcite-tab class=${r(n.control)} .selected=${s}><div class=${r(n.channels)} dir=ltr>${f.map((C,w)=>{let g=w===3;return g&&(C=t&&!C?C:I(C)),this.renderChannel(C,w,h[w],d,g?"%":"")})}</div></calcite-tab>`)}renderChannel(e,t,i,o,a){return F(t,p`<calcite-input-number class=${r(n.channel)} data-channel-index=${t??$} dir=${o??$} .label=${i} lang=${this.messages._lang??$} number-button-type=none .numberingSystem=${this.numberingSystem} @keydown=${this.handleKeyDown} @calciteInputNumberChange=${this.handleChannelChange} @calciteInputNumberInput=${this.handleChannelInput} @calciteInternalInputNumberBlur=${this.handleChannelBlur} @calciteInternalInputNumberFocus=${this.handleChannelFocus} .scale=${this.scale==="l"?"m":"s"} style=${x({marginLeft:t>0&&!(this.scale==="s"&&this.alphaChannel&&t===3)?"-1px":""})} .suffixText=${a} .value=${e?.toString()}></calcite-input-number>`)}};Z("calcite-color-picker",V);export{V as ColorPicker};
|
|
3
|
+
v3.3.0-next.74 */
|
|
4
|
+
import{a as ue,d as _,e as Ce}from"./HDWNM2UR.js";import{a as ne}from"./MCM6K5J2.js";import{A as k,B as he,C as B,D as de,E as pe,a as S,b as n,c as m,d as T,e as D,f as u,g as E,h as b,i as A,j as K,k as H,m as I,n as U,r as O,s as y,u as re,v as ce,x as j,y as N,z as W}from"./ARDNLLVL.js";import"./WNFWTDPL.js";import{a as oe,b as ae}from"./N44TQ6CV.js";import{a as F}from"./MVFRLHST.js";import{a as le}from"./YCSWFLCQ.js";import{c as L}from"./KMRKFSXM.js";import{a as se}from"./54DYCP3J.js";import{a as Q}from"./GHSOC3YC.js";import{a as ie}from"./NG74GX67.js";import{a as te}from"./UDA6KIUD.js";import"./D7F33WOR.js";import"./NR7TPRG6.js";import"./NDDQ3AB3.js";import{e as ee,w as M}from"./YEZ7LLA5.js";import"./I53J6CV7.js";import{C as v,D as J,E as r,F as x,Q as Z,g as Y,h as p,l as $,o as z}from"./ER3WVMVV.js";var ke=Y`:host{--calcite-internal-color-focus: var( --calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)) )}:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:inline-block;font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-normal);inline-size:var(--calcite-internal-color-picker-min-width);min-inline-size:var(--calcite-internal-color-picker-min-width)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([scale=s]){--calcite-internal-color-picker-min-width: 200px;--calcite-color-picker-spacing: 8px}:host([scale=s]) .saved-colors{gap:.25rem;grid-template-columns:repeat(auto-fill,20px)}:host([scale=m]){--calcite-internal-color-picker-min-width: 240px;--calcite-color-picker-spacing: 12px}:host([scale=l]){--calcite-internal-color-picker-min-width: 304px;--calcite-color-picker-spacing: 16px;font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=l]) .section:first-of-type{padding-block-start:var(--calcite-color-picker-spacing)}:host([scale=l]) .saved-colors{grid-template-columns:repeat(auto-fill,32px)}:host([scale=l]) .control-section{display:flex;flex-direction:column;flex-wrap:wrap;align-items:baseline}:host([scale=l]) .color-hex-options{inline-size:100%;display:flex;flex-shrink:1;flex-direction:column;justify-content:space-around}:host([scale=l]) .color-mode-container{flex-shrink:3}.container{background-color:var(--calcite-color-foreground-1);display:flex;flex-direction:column;block-size:min-content;border:1px solid var(--calcite-color-border-1)}.control-and-scope{position:relative;display:flex;cursor:pointer;touch-action:none}.color-field,.control-and-scope{-webkit-user-select:none;user-select:none}.scope{pointer-events:none;position:absolute;z-index:var(--calcite-z-index);block-size:1px;inline-size:1px;border-radius:9999px;background-color:transparent;font-size:var(--calcite-font-size--1);outline-color:transparent}.scope:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline:var(--calcite-border-width-md) solid var(--calcite-internal-color-focus);outline-offset:calc(var(--calcite-spacing-base) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))));outline-offset:6px}.hex-and-channels-group{display:flex;inline-size:100%;flex-direction:column;flex-wrap:wrap}.section{padding-block:0 var(--calcite-color-picker-spacing);padding-inline:var(--calcite-color-picker-spacing)}.section:first-of-type{padding-block-start:var(--calcite-color-picker-spacing)}.sliders{display:flex;flex-direction:column;justify-content:space-between;margin-inline-start:var(--calcite-color-picker-spacing);gap:var(--calcite-spacing-xxs)}.preview-and-sliders{display:flex;align-items:center;padding:var(--calcite-color-picker-spacing)}.color-hex-options,.section--split{flex-grow:1}.header{display:flex;align-items:center;justify-content:space-between;color:var(--calcite-color-text-1)}.color-mode-container{padding-block-start:var(--calcite-color-picker-spacing)}.channels{display:flex}.channel{flex-grow:1}.channel[data-channel-index="3"]{margin-inline-start:-1px;min-inline-size:81px}:host([scale=s]) .channel[data-channel-index="3"]{min-inline-size:68px}:host([scale=l]) .channel[data-channel-index="3"]{min-inline-size:88px}.saved-colors{display:grid;gap:.5rem;padding-block-start:var(--calcite-color-picker-spacing);grid-template-columns:repeat(auto-fill,24px)}.saved-colors-buttons{display:flex}.saved-color{outline-offset:0;outline-color:transparent;cursor:pointer}.saved-color:focus{outline:2px solid var(--calcite-color-brand);outline-offset:2px}.saved-color:hover{transition:outline-color var(--calcite-internal-animation-timing-fast) ease-in-out;outline:2px solid var(--calcite-color-border-2);outline-offset:2px}:host([hidden]){display:none}[hidden]{display:none}`,fe=16,V=class extends J{constructor(){super(),this._color=m,this.internalColorUpdateContext=null,this.isActiveChannelInputEmpty=!1,this.mode=j.HEX,this.resizeObserver=Q("resize",e=>this.resizeCanvas(e)),this.shiftKeyChannelAdjustment=0,this.upOrDownArrowKeyTracker=null,this._valueWasSet=!1,this.messages=ie({blocking:!0}),this.captureColorFieldColor=(e,t,i=!0)=>{let{width:o,height:a}=this.dynamicDimensions.colorField,l=Math.round(u.s/o*e),s=Math.round(u.v/a*(a-t));this.internalColorSet(this.baseColorFieldColor.hsv().saturationv(l).value(s),i)},this.cancelable=le()(this),this.drawColorControls=L((e="all")=>{(e==="all"||e==="color-field")&&this.colorFieldRenderingContext&&this.drawColorField(),(e==="all"||e==="hue-slider")&&this.hueSliderRenderingContext&&this.drawHueSlider(),this.alphaChannel&&(e==="all"||e==="opacity-slider")&&this.opacitySliderRenderingContext&&this.drawOpacitySlider()},fe),this.globalPointerMoveHandler=e=>{let{activeCanvasInfo:t,el:i}=this;if(!i.isConnected||!t)return;let{context:o,bounds:a}=t,l,s,{clientX:c,clientY:h}=e;o.canvas.matches(":hover")?(l=c-a.x,s=h-a.y):(c<a.x+a.width&&c>a.x?l=c-a.x:c<a.x?l=0:l=a.width,h<a.y+a.height&&h>a.y?s=h-a.y:h<a.y?s=0:s=a.height),o===this.colorFieldRenderingContext?this.captureColorFieldColor(l,s,!1):o===this.hueSliderRenderingContext?this.captureHueSliderColor(l):o===this.opacitySliderRenderingContext&&this.captureOpacitySliderValue(l)},this.globalPointerUpHandler=e=>{if(!M(e))return;let t=this.activeCanvasInfo;this.activeCanvasInfo=null,this.drawColorControls(),t&&this.calciteColorPickerChange.emit()},this.resizeCanvas=L(e=>{if(!this.hasUpdated)return;let[t]=e,i=Math.floor(t.contentBoxSize[0].inlineSize);this.dynamicDimensions.colorField.width!==i&&(this.updateDynamicDimensions(i),this.updateCanvasSize(),this.drawColorControls())},fe),this.updateDynamicDimensions=e=>{let t={width:de(e,this.staticDimensions,this.alphaChannel),height:this.staticDimensions.slider.height};this.dynamicDimensions={colorField:pe(e),slider:t}},this.focusSetter=te()(this),this.channelMode="rgb",this.channels=this.toChannels(m),this.staticDimensions=A.m,this.savedColors=[],this.allowEmpty=!1,this.alphaChannel=!1,this.channelsDisabled=!1,this.clearable=!1,this.disabled=!1,this.fieldDisabled=!1,this.format="auto",this.hexDisabled=!1,this.savedDisabled=!1,this.scale="m",this.calciteColorPickerChange=z({cancelable:!1}),this.calciteColorPickerInput=z({cancelable:!1}),this.listen("keydown",this.handleChannelKeyUpOrDown,{capture:!0}),this.listen("keyup",this.handleChannelKeyUpOrDown,{capture:!0})}static{this.properties={channelMode:[16,{},{state:!0}],channels:[16,{},{state:!0}],colorFieldScopeLeft:[16,{},{state:!0}],colorFieldScopeTop:[16,{},{state:!0}],staticDimensions:[16,{},{state:!0}],hueScopeLeft:[16,{},{state:!0}],opacityScopeLeft:[16,{},{state:!0}],savedColors:[16,{},{state:!0}],scopeOrientation:[16,{},{state:!0}],allowEmpty:[7,{},{reflect:!0,type:Boolean}],alphaChannel:[5,{},{type:Boolean}],channelsDisabled:[5,{},{type:Boolean}],clearable:[7,{},{reflect:!0,type:Boolean}],color:[0,{},{attribute:!1}],disabled:[7,{},{reflect:!0,type:Boolean}],fieldDisabled:[7,{},{reflect:!0,type:Boolean}],format:[3,{},{reflect:!0}],hexDisabled:[5,{},{type:Boolean}],messageOverrides:[0,{},{attribute:!1}],numberingSystem:[3,{},{reflect:!0}],savedDisabled:[7,{},{reflect:!0,type:Boolean}],scale:[3,{},{reflect:!0}],storageId:[3,{},{reflect:!0}],value:1}}static{this.styles=ke}get color(){return this._color}set color(e){let t=this._color;this._color=e,this.handleColorChange(e,t)}get value(){return this._value}set value(e){let t=this._value;this._value=e,this.handleValueChange(e,t),this._valueWasSet=!0}async setFocus(e){return this.focusSetter(()=>this.el,e)}connectedCallback(){super.connectedCallback(),this.observeResize(),this.cancelable.add([this.drawColorControls,this.resizeCanvas])}async load(){this._valueWasSet||(this._value??=O(y(m,this.alphaChannel))),this.handleAllowEmptyOrClearableChange();let{isClearable:e,color:t,format:i,value:o}=this,a=e&&!o,l=N(o),s=a||i==="auto"&&l||i===l,c=a?null:s?S(o):t;s||this.showIncompatibleColorWarning(o,i),this.setMode(i,!1),this.internalColorSet(c,!1,"initial"),this.updateStaticDimensions(this.scale),this.updateDynamicDimensions(A[this.scale].minWidth);let h=`${T}${this.storageId}`;this.storageId&&localStorage.getItem(h)&&(this.savedColors=JSON.parse(localStorage.getItem(h)))}willUpdate(e){(e.has("allowEmpty")&&(this.hasUpdated||this.allowEmpty!==!1)||e.has("clearable")&&(this.hasUpdated||this.clearable!==!1))&&this.handleAllowEmptyOrClearableChange(),e.has("alphaChannel")&&(this.hasUpdated||this.alphaChannel!==!1)&&this.handleAlphaChannelChange(this.alphaChannel),this.hasUpdated&&(e.has("alphaChannel")&&this.alphaChannel!==!1||e.has("staticDimensions")&&this.staticDimensions!==A.m)&&this.handleAlphaChannelDimensionsChange(),(e.has("alphaChannel")&&(this.hasUpdated||this.alphaChannel!==!1)||e.has("format")&&(this.hasUpdated||this.format!=="auto"))&&this.handleFormatOrAlphaChannelChange(),e.has("scale")&&(this.hasUpdated||this.scale!=="m")&&this.handleScaleChange(this.scale)}updated(){oe(this)}loaded(){this.handleAlphaChannelDimensionsChange()}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("pointermove",this.globalPointerMoveHandler),window.removeEventListener("pointerup",this.globalPointerUpHandler),this.resizeObserver?.disconnect()}get baseColorFieldColor(){return this.color||this.previousColor||m}get effectiveSliderWidth(){return this.dynamicDimensions.slider.width}observeResize(){this.resizeObserver?.observe(this.el)}handleAllowEmptyOrClearableChange(){this.isClearable=this.clearable||this.allowEmpty}handleAlphaChannelChange(e){let{format:t}=this;e&&t!=="auto"&&!k(t)&&(console.warn(`ignoring alphaChannel as the current format (${t}) does not support alpha`),this.alphaChannel=!1)}handleAlphaChannelDimensionsChange(){this.drawColorControls()}handleColorChange(e,t){this.drawColorControls(),this.updateChannelsFromColor(e),this.previousColor=t}handleFormatOrAlphaChannelChange(){this.setMode(this.format),this.internalColorSet(this.color,!1,"internal")}handleScaleChange(e="m"){this.updateStaticDimensions(e),this.updateCanvasSize(),this.drawColorControls()}handleValueChange(e,t){let{isClearable:i,format:o}=this,a=!i||e,l=!1;if(a){let d=N(e);if(!d||o!=="auto"&&d!==o){this.showIncompatibleColorWarning(e,o),this._value=t;return}l=this.mode!==d,this.setMode(d,this.internalColorUpdateContext===null)}let s=this.activeCanvasInfo;if(this.internalColorUpdateContext==="initial")return;if(this.internalColorUpdateContext==="user-interaction"){this.calciteColorPickerInput.emit(),s||this.calciteColorPickerChange.emit();return}let c=i&&!e?null:S(e!=null&&typeof e=="object"&&k(this.mode)?ce(e):e),h=!W(c,this.color);(l||h)&&this.internalColorSet(c,this.alphaChannel&&!(this.mode.endsWith("a")||this.mode.endsWith("a-css"))||this.internalColorUpdateContext==="internal","internal")}handleTabActivate(e){this.channelMode=e.currentTarget.getAttribute("data-color-mode"),this.updateChannelsFromColor(this.color)}handleColorFieldScopeKeyDown(e){let{key:t}=e,i={ArrowUp:{x:0,y:-10},ArrowRight:{x:10,y:0},ArrowDown:{x:0,y:10},ArrowLeft:{x:-10,y:0}};i[t]&&(e.preventDefault(),this.scopeOrientation=t==="ArrowDown"||t==="ArrowUp"?"vertical":"horizontal",this.captureColorFieldColor(this.colorFieldScopeLeft+i[t].x||0,this.colorFieldScopeTop+i[t].y||0,!1))}handleHueScopeKeyDown(e){let t=e.shiftKey?10:1,{key:i}=e,o={ArrowUp:1,ArrowRight:1,ArrowDown:-1,ArrowLeft:-1};if(o[i]){e.preventDefault();let a=o[i]*t,l=this.baseColorFieldColor.hue(),s=this.baseColorFieldColor.hue(l+a);this.internalColorSet(s,!1)}}handleHexInputChange(e){e.stopPropagation();let{isClearable:t,color:i}=this,a=e.target.value;if(t&&!a){this.internalColorSet(null);return}let l=i&&O(y(i,k(this.mode)));a!==l&&this.internalColorSet(S(a))}handleSavedColorSelect(e){let t=e.currentTarget;this.internalColorSet(S(t.color))}handleChannelInput(e){let t=e.currentTarget,i=Number(t.getAttribute("data-channel-index")),a=i===3?b.max:this.channelMode==="rgb"?D[Object.keys(D)[i]]:u[Object.keys(u)[i]],l;if(!t.value)l="",this.isActiveChannelInputEmpty=!0,this.upOrDownArrowKeyTracker=null;else{let c=Number(t.value)+this.shiftKeyChannelAdjustment;l=ue(c,0,a).toString()}t.value=l,l!==""&&this.shiftKeyChannelAdjustment!==0?this.handleChannelChange(e):l!==""&&this.handleChannelChange(e)}handleChannelBlur(e){let t=e.currentTarget,i=Number(t.getAttribute("data-channel-index")),o=[...this.channels];!t.value&&!this.isClearable&&(t.value=o[i]?.toString())}handleChannelFocus(e){e.currentTarget.selectText()}handleChannelKeyUpOrDown(e){this.shiftKeyChannelAdjustment=0;let{key:t}=e;if(t!=="ArrowUp"&&t!=="ArrowDown"||!e.composedPath().some(a=>a.classList?.contains(n.channel)))return;let{shiftKey:i}=e;if(e.preventDefault(),!this.color){this.internalColorSet(this.previousColor),e.stopPropagation();return}let o=9;this.shiftKeyChannelAdjustment=t==="ArrowUp"&&i?o:t==="ArrowDown"&&i?-o:0,t==="ArrowUp"&&(this.upOrDownArrowKeyTracker="up"),t==="ArrowDown"&&(this.upOrDownArrowKeyTracker="down")}getChannelInputLimit(e){return this.channelMode==="rgb"?D[Object.keys(D)[e]]:u[Object.keys(u)[e]]}handleChannelChange(e){let t=e.currentTarget,i=Number(t.getAttribute("data-channel-index")),o=[...this.channels];if(this.isClearable&&!t.value){this.channels=[null,null,null,null],this.internalColorSet(null);return}let l=i===3;this.isActiveChannelInputEmpty&&this.upOrDownArrowKeyTracker&&(t.value=this.upOrDownArrowKeyTracker==="up"?(o[i]+1<=this.getChannelInputLimit(i)?o[i]+1:this.getChannelInputLimit(i)).toString():(o[i]-1>=0?o[i]-1:0).toString(),this.isActiveChannelInputEmpty=!1,this.upOrDownArrowKeyTracker=null);let s=t.value?Number(t.value):o[i];o[i]=l?U(s):s,this.updateColorFromChannels(o)}handleSavedColorKeyDown(e){se(e.key)&&(e.preventDefault(),this.handleSavedColorSelect(e))}handleColorFieldPointerDown(e){this.handleCanvasControlPointerDown(e,this.colorFieldRenderingContext,this.captureColorFieldColor,this.colorFieldScopeNode)}focusScope(e){requestAnimationFrame(()=>{e.focus()})}handleHueSliderPointerDown(e){this.handleCanvasControlPointerDown(e,this.hueSliderRenderingContext,this.captureHueSliderColor,this.hueScopeNode)}handleOpacitySliderPointerDown(e){this.handleCanvasControlPointerDown(e,this.opacitySliderRenderingContext,this.captureOpacitySliderValue,this.opacityScopeNode)}handleCanvasControlPointerDown(e,t,i,o){M(e)&&(window.addEventListener("pointermove",this.globalPointerMoveHandler),window.addEventListener("pointerup",this.globalPointerUpHandler,{once:!0}),this.activeCanvasInfo={context:t,bounds:t.canvas.getBoundingClientRect()},i.call(this,e.offsetX,e.offsetY),this.focusScope(o))}storeColorFieldScope(e){this.colorFieldScopeNode=e}storeHueScope(e){this.hueScopeNode=e}handleKeyDown(e){e.key==="Enter"&&e.preventDefault()}showIncompatibleColorWarning(e,t){console.warn(`ignoring color value (${e}) as it is not compatible with the current format (${t})`)}setMode(e,t=!0){let i=e==="auto"?this.mode:e;this.mode=this.ensureCompatibleMode(i,t)}ensureCompatibleMode(e,t){let{alphaChannel:i}=this,o=k(e);if(i&&!o){let a=he(e);return t&&console.warn(`setting format to (${a}) as the provided one (${e}) does not support alpha`),a}if(!i&&o){let a=B(e);return t&&console.warn(`setting format to (${a}) as the provided one (${e}) does not support alpha`),a}return e}captureHueSliderColor(e){let t=E/this.effectiveSliderWidth*e;this.internalColorSet(this.baseColorFieldColor.hue(t),!1)}captureOpacitySliderValue(e){let t=U(b.max/this.effectiveSliderWidth*e);this.internalColorSet(this.baseColorFieldColor.alpha(t),!1)}internalColorSet(e,t=!0,i="user-interaction"){t&&W(e,this.color)||(this.internalColorUpdateContext=i,this.color=e,this.value=this.toValue(e),this.internalColorUpdateContext=null)}toValue(e,t=this.mode){if(!e)return null;if(t.includes("hex")){let a=t===j.HEXA;return O(y(e.round(),a),a)}if(t.includes("-css")){let a=e[t.replace("-css","").replace("a","")]().round().string();if((t.endsWith("a")||t.endsWith("a-css"))&&e.alpha()===1){let s=a.slice(0,3),c=a.slice(4,-1);return`${s}a(${c}, ${e.alpha()})`}return a}let o=e[B(t)]().round().object();return t.endsWith("a")?re(o):o}getSliderCapSpacing(){let{staticDimensions:{slider:{height:e},thumb:{radius:t}}}=this;return t*2-e}updateStaticDimensions(e="m"){this.staticDimensions=A[e]}deleteColor(){let e=y(this.color,this.alphaChannel);if(!(this.savedColors.indexOf(e)>-1))return;let i=this.savedColors.filter(a=>a!==e);this.savedColors=i;let o=`${T}${this.storageId}`;this.storageId&&localStorage.setItem(o,JSON.stringify(i))}saveColor(){let e=y(this.color,this.alphaChannel);if(this.savedColors.indexOf(e)>-1)return;let i=[...this.savedColors,e];this.savedColors=i;let o=`${T}${this.storageId}`;this.storageId&&localStorage.setItem(o,JSON.stringify(i))}drawColorField(){let e=this.colorFieldRenderingContext,{width:t,height:i}=this.dynamicDimensions.colorField;e.fillStyle=this.baseColorFieldColor.hsv().saturationv(100).value(100).alpha(1).string(),e.fillRect(0,0,t,i);let o=e.createLinearGradient(0,0,t,0);o.addColorStop(0,"rgba(255,255,255,1)"),o.addColorStop(1,"rgba(255,255,255,0)"),e.fillStyle=o,e.fillRect(0,0,t,i);let a=e.createLinearGradient(0,0,0,i);a.addColorStop(0,"rgba(0,0,0,0)"),a.addColorStop(1,"rgba(0,0,0,1)"),e.fillStyle=a,e.fillRect(0,0,t,i),this.drawActiveColorFieldColor()}setCanvasContextSize(e,{height:t,width:i}){if(!e)return;let o=window.devicePixelRatio||1;e.width=i*o,e.height=t*o,e.style.height=`${t}px`,e.style.width=`${i}px`,e.getContext("2d").scale(o,o)}initColorField(e){e&&(this.colorFieldRenderingContext=e.getContext("2d"),this.updateCanvasSize("color-field"),this.drawColorControls())}initHueSlider(e){e&&(this.hueSliderRenderingContext=e.getContext("2d"),this.updateCanvasSize("hue-slider"),this.drawHueSlider())}initOpacitySlider(e){e&&(this.opacitySliderRenderingContext=e.getContext("2d"),this.updateCanvasSize("opacity-slider"),this.drawOpacitySlider())}updateCanvasSize(e="all"){let{dynamicDimensions:t,staticDimensions:i}=this;(e==="all"||e==="color-field")&&this.setCanvasContextSize(this.colorFieldRenderingContext?.canvas,t.colorField);let o={width:this.effectiveSliderWidth,height:i.slider.height+(i.thumb.radius-t.slider.height/2)*2};(e==="all"||e==="hue-slider")&&this.setCanvasContextSize(this.hueSliderRenderingContext?.canvas,o),(e==="all"||e==="opacity-slider")&&this.setCanvasContextSize(this.opacitySliderRenderingContext?.canvas,o)}drawActiveColorFieldColor(){let{color:e}=this;if(!e)return;let t=e.hsv(),{staticDimensions:{thumb:{radius:i}}}=this,{width:o,height:a}=this.dynamicDimensions.colorField,l=t.saturationv()/(u.s/o),s=a-t.value()/(u.v/a);requestAnimationFrame(()=>{this.colorFieldScopeLeft=l,this.colorFieldScopeTop=s}),this.drawThumb(this.colorFieldRenderingContext,i,l,s,t,!1)}drawThumb(e,t,i,o,a,l){let c=2*Math.PI,h=1;if(e.beginPath(),e.arc(i,o,t,0,c),e.fillStyle="#fff",e.fill(),e.strokeStyle="rgba(0,0,0,0.3)",e.lineWidth=h,e.stroke(),l&&a.alpha()<1){let f=e.createPattern(this.getCheckeredBackgroundPattern(),"repeat");e.beginPath(),e.arc(i,o,t-3,0,c),e.fillStyle=f,e.fill()}e.globalCompositeOperation="source-atop",e.beginPath(),e.arc(i,o,t-3,0,c);let d=l?a.alpha():1;e.fillStyle=a.rgb().alpha(d).string(),e.fill(),e.globalCompositeOperation="source-over"}drawActiveHueSliderColor(){let{color:e}=this;if(!e)return;let t=e.hsv().saturationv(100).value(100),{staticDimensions:{thumb:{radius:i}}}=this,o=this.effectiveSliderWidth,a=t.hue()/(E/o),l=i,s=this.getSliderBoundX(a,o,i);requestAnimationFrame(()=>{this.hueScopeLeft=s}),this.drawThumb(this.hueSliderRenderingContext,i,s,l,t,!1)}drawHueSlider(){let e=this.hueSliderRenderingContext,{staticDimensions:{slider:{height:t},thumb:{radius:i}}}=this,o=0,a=i-t/2,l=this.effectiveSliderWidth,s=e.createLinearGradient(0,0,l,0),c=["red","yellow","lime","cyan","blue","magenta","#ff0004"],h=1/(c.length-1),d=0;c.forEach(f=>{s.addColorStop(d,S(f).string()),d+=h}),e.clearRect(0,0,l,t+this.getSliderCapSpacing()*2),this.drawSliderPath(e,t,l,o,a),e.fillStyle=s,e.fill(),e.strokeStyle="rgba(0,0,0,0.3)",e.lineWidth=1,e.stroke(),this.drawActiveHueSliderColor()}drawOpacitySlider(){let e=this.opacitySliderRenderingContext,{baseColorFieldColor:t,staticDimensions:{slider:{height:i},thumb:{radius:o}}}=this,a=0,l=o-i/2,s=this.effectiveSliderWidth;e.clearRect(0,0,s,i+this.getSliderCapSpacing()*2);let c=e.createLinearGradient(0,l,s,0),h=t.rgb().alpha(0),d=t.rgb().alpha(.5),f=t.rgb().alpha(1);c.addColorStop(0,h.string()),c.addColorStop(.5,d.string()),c.addColorStop(1,f.string()),this.drawSliderPath(e,i,s,a,l);let C=e.createPattern(this.getCheckeredBackgroundPattern(),"repeat");e.fillStyle=C,e.fill(),e.fillStyle=c,e.fill(),e.strokeStyle="rgba(0,0,0,0.3)",e.lineWidth=1,e.stroke(),this.drawActiveOpacitySliderColor()}drawSliderPath(e,t,i,o,a){let l=t/2+1;e.beginPath(),e.moveTo(o+l,a),e.lineTo(o+i-l,a),e.quadraticCurveTo(o+i,a,o+i,a+l),e.lineTo(o+i,a+t-l),e.quadraticCurveTo(o+i,a+t,o+i-l,a+t),e.lineTo(o+l,a+t),e.quadraticCurveTo(o,a+t,o,a+t-l),e.lineTo(o,a+l),e.quadraticCurveTo(o,a,o+l,a),e.closePath()}getCheckeredBackgroundPattern(){if(this.checkerPattern)return this.checkerPattern;let e=document.createElement("canvas");e.width=10,e.height=10;let t=e.getContext("2d");return t.fillStyle="#ccc",t.fillRect(0,0,10,10),t.fillStyle="#fff",t.fillRect(0,0,5,5),t.fillRect(5,5,5,5),this.checkerPattern=e,e}drawActiveOpacitySliderColor(){let{color:e}=this;if(!e)return;let t=e,{staticDimensions:{thumb:{radius:i}}}=this,o=this.effectiveSliderWidth,a=I(t.alpha())/(b.max/o),l=i,s=this.getSliderBoundX(a,o,i);requestAnimationFrame(()=>{this.opacityScopeLeft=s}),this.drawThumb(this.opacitySliderRenderingContext,i,s,l,t,!0)}getSliderBoundX(e,t,i){let o=Ce(e,t,i);return o===0?e:o===-1?_(e,0,t,i,i*2):_(e,0,t,t-i*2,t-i)}storeOpacityScope(e){this.opacityScopeNode=e}handleOpacityScopeKeyDown(e){let t=e.shiftKey?10:1,{key:i}=e,o={ArrowUp:.01,ArrowRight:.01,ArrowDown:-.01,ArrowLeft:-.01};if(o[i]){e.preventDefault();let a=o[i]*t,l=this.baseColorFieldColor.alpha(),s=this.baseColorFieldColor.alpha(l+a);this.internalColorSet(s,!1)}}updateColorFromChannels(e){this.internalColorSet(S(e,this.channelMode))}updateChannelsFromColor(e){this.channels=e?this.toChannels(e):[null,null,null,null]}toChannels(e){let{channelMode:t}=this,i=e[t]().round().array();return i.length===3&&i.push(1),i}getAdjustedScopePosition(e,t){return[e-K/2,t-K/2]}render(){let{channelsDisabled:e,color:t,colorFieldScopeLeft:i,colorFieldScopeTop:o,staticDimensions:{thumb:{radius:a}},fieldDisabled:l,hexDisabled:s,hueScopeLeft:c,messages:h,alphaChannel:d,opacityScopeLeft:f,savedColors:C,savedDisabled:w,scale:g,scopeOrientation:me}=this,X=this.effectiveSliderWidth,q=t?y(t,d):null,ge=a,ve=c??X*m.hue()/u.h,Se=a,be=f??X*I(m.alpha())/b.max,G=t===void 0,P=me==="vertical",[ye,we]=this.getAdjustedScopePosition(i,o),[$e,xe]=this.getAdjustedScopePosition(ve,ge),[De,Ae]=this.getAdjustedScopePosition(be,Se);return ae({disabled:this.disabled,children:p`<div class=${r(n.container)}>${l?null:p`<div class=${r(n.controlAndScope)}><canvas class=${r(n.colorField)} @pointerdown=${this.handleColorFieldPointerDown} ${v(this.initColorField)}></canvas><div .ariaLabel=${P?h.value:h.saturation} .ariaValueMax=${P?u.v:u.s} aria-valuemin=0 .ariaValueNow=${(P?t?.saturationv():t?.value())||"0"} class=${r({[n.scope]:!0,[n.colorFieldScope]:!0})} @keydown=${this.handleColorFieldScopeKeyDown} role=slider style=${x({top:`${we||0}px`,left:`${ye||0}px`})} tabindex=0 ${v(this.storeColorFieldScope)}></div></div>`}<div class=${r(n.previewAndSliders)}><calcite-color-picker-swatch class=${r(n.preview)} .color=${q} .scale=${this.alphaChannel?"l":this.scale}></calcite-color-picker-swatch><div class=${r(n.sliders)}><div class=${r(n.controlAndScope)}><canvas class=${r({[n.slider]:!0,[n.hueSlider]:!0})} @pointerdown=${this.handleHueSliderPointerDown} ${v(this.initHueSlider)}></canvas><div .ariaLabel=${h.hue} .ariaValueMax=${u.h} aria-valuemin=0 .ariaValueNow=${t?.round().hue()||m.round().hue()} class=${r({[n.scope]:!0,[n.hueScope]:!0})} @keydown=${this.handleHueScopeKeyDown} role=slider style=${x({top:`${xe}px`,left:`${$e}px`})} tabindex=0 ${v(this.storeHueScope)}></div></div>${d?p`<div class=${r(n.controlAndScope)}><canvas class=${r({[n.slider]:!0,[n.opacitySlider]:!0})} @pointerdown=${this.handleOpacitySliderPointerDown} ${v(this.initOpacitySlider)}></canvas><div .ariaLabel=${h.opacity} .ariaValueMax=${b.max} .ariaValueMin=${b.min} .ariaValueNow=${(t||m).round().alpha()} class=${r({[n.scope]:!0,[n.opacityScope]:!0})} @keydown=${this.handleOpacityScopeKeyDown} role=slider style=${x({top:`${Ae}px`,left:`${De}px`})} tabindex=0 ${v(this.storeOpacityScope)}></div></div>`:null}</div></div>${s&&e?null:p`<div class=${r({[n.controlSection]:!0,[n.section]:!0})}><div class=${r(n.hexAndChannelsGroup)}>${s?null:p`<div class=${r(n.hexOptions)}><calcite-color-picker-hex-input .allowEmpty=${this.isClearable} .alphaChannel=${d} class=${r(n.control)} .messages=${h} .numberingSystem=${this.numberingSystem} @calciteColorPickerHexInputChange=${this.handleHexInputChange} .scale=${g} .value=${q}></calcite-color-picker-hex-input></div>`}${e?null:p`<calcite-tabs class=${r({[n.colorModeContainer]:!0,[n.splitSection]:!0})} .scale=${g==="l"?"m":"s"}><calcite-tab-nav slot=title-group>${this.renderChannelsTabTitle("rgb")}${this.renderChannelsTabTitle("hsv")}</calcite-tab-nav>${this.renderChannelsTab("rgb")}${this.renderChannelsTab("hsv")}</calcite-tabs>`}</div></div>`}${w?null:p`<div class=${r({[n.savedColorsSection]:!0,[n.section]:!0})}><div class=${r(n.header)}><label>${h.saved}</label><div class=${r(n.savedColorsButtons)}><calcite-button appearance=transparent class=${r(n.deleteColor)} .disabled=${G} .iconStart=${H.minus} kind=neutral .label=${h.deleteColor} @click=${this.deleteColor} .scale=${g} type=button></calcite-button><calcite-button appearance=transparent class=${r(n.saveColor)} .disabled=${G} .iconStart=${H.plus} kind=neutral .label=${h.saveColor} @click=${this.saveColor} .scale=${g} type=button></calcite-button></div></div>${C.length>0?p`<div class=${r(n.savedColors)}>${ne(C,R=>R,R=>p`<calcite-color-picker-swatch class=${r(n.savedColor)} .color=${R} @click=${this.handleSavedColorSelect} @keydown=${this.handleSavedColorKeyDown} .scale=${g} tabindex=0></calcite-color-picker-swatch>`)}</div>`:null}</div>`}</div>`})}renderChannelsTabTitle(e){let{channelMode:t,messages:i}=this,o=e===t,a=e==="rgb"?i.rgb:i.hsv;return F(e,p`<calcite-tab-title class=${r(n.colorMode)} data-color-mode=${e??$} @calciteTabsActivate=${this.handleTabActivate} .selected=${o}>${a}</calcite-tab-title>`)}renderChannelsTab(e){let{isClearable:t,channelMode:i,channels:o,messages:a,alphaChannel:l}=this,s=e===i,h=e==="rgb"?[a.red,a.green,a.blue]:[a.hue,a.saturation,a.value],d=ee(this.el),f=l?o:o.slice(0,3);return F(e,p`<calcite-tab class=${r(n.control)} .selected=${s}><div class=${r(n.channels)} dir=ltr>${f.map((C,w)=>{let g=w===3;return g&&(C=t&&!C?C:I(C)),this.renderChannel(C,w,h[w],d,g?"%":"")})}</div></calcite-tab>`)}renderChannel(e,t,i,o,a){return F(t,p`<calcite-input-number class=${r(n.channel)} data-channel-index=${t??$} dir=${o??$} .label=${i} lang=${this.messages._lang??$} number-button-type=none .numberingSystem=${this.numberingSystem} @keydown=${this.handleKeyDown} @calciteInputNumberChange=${this.handleChannelChange} @calciteInputNumberInput=${this.handleChannelInput} @calciteInternalInputNumberBlur=${this.handleChannelBlur} @calciteInternalInputNumberFocus=${this.handleChannelFocus} .scale=${this.scale==="l"?"m":"s"} style=${x({marginLeft:t>0&&!(this.scale==="s"&&this.alphaChannel&&t===3)?"-1px":""})} .suffixText=${a} .value=${e?.toString()}></calcite-input-number>`)}};Z("calcite-color-picker",V);export{V as ColorPicker};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
|
|
2
2
|
See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
|
|
3
|
-
v3.3.0-next.
|
|
3
|
+
v3.3.0-next.74 */
|
|
4
4
|
function t(n){return n==="Enter"||n===" "}var e=["0","1","2","3","4","5","6","7","8","9"];export{t as a,e as b};
|