@synergy-design-system/components 3.4.0 → 3.5.0
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/chunks/{chunk.NMWM3BP7.js → chunk.2BATB6NO.js} +4 -4
- package/dist/chunks/{chunk.CDOWFAH2.js → chunk.2ECWEEUO.js} +21 -4
- package/dist/chunks/{chunk.CDOWFAH2.js.map → chunk.2ECWEEUO.js.map} +2 -2
- package/dist/chunks/{chunk.FXJLG622.js → chunk.2NT3B5WJ.js} +1 -2
- package/dist/chunks/chunk.2NT3B5WJ.js.map +7 -0
- package/dist/chunks/{chunk.U565GVEJ.js → chunk.2YBC7C2K.js} +4 -4
- package/dist/chunks/chunk.32WNHWXJ.js +256 -0
- package/dist/chunks/chunk.32WNHWXJ.js.map +7 -0
- package/dist/chunks/{chunk.PTRCO527.js → chunk.34WYIU4C.js} +11 -36
- package/dist/chunks/chunk.34WYIU4C.js.map +7 -0
- package/dist/chunks/{chunk.5OQDAMNY.js → chunk.3AZ6O5UW.js} +21 -11
- package/dist/chunks/chunk.3AZ6O5UW.js.map +7 -0
- package/dist/chunks/{chunk.S2TKXK3H.js → chunk.3DCW4HDA.js} +2 -2
- package/dist/chunks/{chunk.DH2W34JP.js → chunk.3XQ5VLXY.js} +2 -2
- package/dist/chunks/chunk.432DTUIX.js +184 -0
- package/dist/chunks/chunk.432DTUIX.js.map +7 -0
- package/dist/chunks/{chunk.6USNG4EL.js → chunk.45MATNO2.js} +39 -6
- package/dist/chunks/chunk.45MATNO2.js.map +7 -0
- package/dist/chunks/chunk.4P4UJDDZ.js +401 -0
- package/dist/chunks/chunk.4P4UJDDZ.js.map +7 -0
- package/dist/chunks/{chunk.I6WV64JG.js → chunk.5RI2MXEU.js} +4 -4
- package/dist/chunks/{chunk.F4ED64YD.js → chunk.5T4HS4EI.js} +2 -2
- package/dist/chunks/{chunk.JZPLCDMG.js → chunk.6A2AHHWZ.js} +3 -3
- package/dist/chunks/{chunk.HHYD4FQJ.js → chunk.6L4RCUNM.js} +4 -4
- package/dist/chunks/chunk.7DRFKCFD.js +388 -0
- package/dist/chunks/chunk.7DRFKCFD.js.map +7 -0
- package/dist/chunks/{chunk.P5OWYFNJ.js → chunk.7J4TXMXH.js} +2 -2
- package/dist/chunks/{chunk.OE5MIRYY.js → chunk.7RZ27FQL.js} +4 -4
- package/dist/chunks/{chunk.MRIKXX4L.js → chunk.7TPOI264.js} +7 -8
- package/dist/chunks/chunk.7TPOI264.js.map +7 -0
- package/dist/chunks/{chunk.NPEIIBBM.js → chunk.AVH3ZNCM.js} +2 -2
- package/dist/chunks/{chunk.BYEQNCV6.js → chunk.BBPFCDZW.js} +2 -2
- package/dist/chunks/{chunk.3LGIA5UJ.js → chunk.BJUQE5YL.js} +2 -2
- package/dist/chunks/{chunk.UQEZY2MP.js → chunk.BQ7JABKS.js} +6 -10
- package/dist/chunks/chunk.BQ7JABKS.js.map +7 -0
- package/dist/chunks/{chunk.RQBH4AH3.js → chunk.BVFTZ3AB.js} +2 -2
- package/dist/chunks/{chunk.AWSAP5JA.js → chunk.BZMKXI2L.js} +2 -2
- package/dist/chunks/{chunk.YWHVN3AH.js → chunk.CJLZ3QMG.js} +7 -7
- package/dist/chunks/{chunk.L7T7BH5I.js → chunk.CKADV3OI.js} +21 -15
- package/dist/chunks/chunk.CKADV3OI.js.map +7 -0
- package/dist/chunks/{chunk.IGU6STLS.js → chunk.CMCJB5AA.js} +41 -33
- package/dist/chunks/chunk.CMCJB5AA.js.map +7 -0
- package/dist/chunks/{chunk.RMLCZKL4.js → chunk.CPC3JTDA.js} +5 -5
- package/dist/chunks/{chunk.CKHWRU6K.js → chunk.CV7OGSN7.js} +5 -5
- package/dist/chunks/{chunk.3V43VOCB.js → chunk.DFS7LPJO.js} +2 -2
- package/dist/chunks/{chunk.L3VTFKPP.js → chunk.DYE6F2Y6.js} +2 -2
- package/dist/chunks/{chunk.MI4UFWSY.js → chunk.EAEQ3AGO.js} +3 -3
- package/dist/chunks/{chunk.M67Q34LS.js → chunk.EUQYBYAZ.js} +2 -2
- package/dist/chunks/{chunk.XNWASDT5.js → chunk.EX4R7WUE.js} +20 -11
- package/dist/chunks/chunk.EX4R7WUE.js.map +7 -0
- package/dist/chunks/{chunk.F5OQ5A6I.js → chunk.FFAHZBAJ.js} +2 -2
- package/dist/chunks/{chunk.MQG45CA3.js → chunk.FKDUVEOP.js} +7 -7
- package/dist/chunks/{chunk.4AOCGMAY.js → chunk.FKVCNOHV.js} +5 -5
- package/dist/chunks/{chunk.5ZSMHHQE.js → chunk.FOH4KP4A.js} +4 -4
- package/dist/chunks/{chunk.PJTZN7JM.js → chunk.G7UFPFQ2.js} +4 -4
- package/dist/chunks/{chunk.CIJVYJBT.js → chunk.GCISSJZP.js} +2 -2
- package/dist/chunks/{chunk.PFYIQKRP.js → chunk.GIEAMHSU.js} +3 -3
- package/dist/chunks/{chunk.Y7RYQ66B.js → chunk.GT6WAUZ7.js} +2 -2
- package/dist/chunks/{chunk.ZIPWPR45.js → chunk.GZVYO3UJ.js} +3 -3
- package/dist/chunks/{chunk.RNZREX6Z.js → chunk.H63OT7RB.js} +6 -6
- package/dist/chunks/{chunk.RA6YFHDM.js → chunk.IFEFFC3Q.js} +47 -29
- package/dist/chunks/chunk.IFEFFC3Q.js.map +7 -0
- package/dist/chunks/{chunk.UNYKSD5O.js → chunk.IPWLCVHW.js} +2 -2
- package/dist/chunks/{chunk.ZCZJZOM4.js → chunk.J3GDNLNN.js} +2 -2
- package/dist/chunks/{chunk.P5VLLIAA.js → chunk.JCWTUOY2.js} +7 -7
- package/dist/chunks/{chunk.V7UB7DDN.js → chunk.JHJFFBNL.js} +3 -3
- package/dist/chunks/{chunk.7IUQZ2ML.js → chunk.JJ2K4ORZ.js} +9 -9
- package/dist/chunks/{chunk.IRBFRL7V.js → chunk.K5OSYXNU.js} +2 -2
- package/dist/chunks/{chunk.IM54DI3K.js → chunk.KEO5PHF2.js} +28 -4
- package/dist/chunks/{chunk.IM54DI3K.js.map → chunk.KEO5PHF2.js.map} +2 -2
- package/dist/chunks/{chunk.UNEKO4DQ.js → chunk.KGECDG22.js} +2 -2
- package/dist/chunks/{chunk.HLBSU5HB.js → chunk.KT6MHQM6.js} +4 -4
- package/dist/chunks/{chunk.FBC4N7NR.js → chunk.KUTXV7RO.js} +3 -3
- package/dist/chunks/{chunk.J6VJSOK2.js → chunk.LALGMGC2.js} +2 -2
- package/dist/chunks/{chunk.XAZXQY2M.js → chunk.LKMV5MVK.js} +7 -7
- package/dist/chunks/{chunk.C4N7J54S.js → chunk.MCAB6KY5.js} +3 -3
- package/dist/chunks/{chunk.QC4VGSZW.js → chunk.MCKS4JLW.js} +3 -3
- package/dist/chunks/{chunk.HUPHWV4R.js → chunk.MJA5HEFN.js} +3 -3
- package/dist/chunks/{chunk.ZV4CF3ZJ.js → chunk.MZJLG4BF.js} +3 -3
- package/dist/chunks/{chunk.H7S3NKK3.js → chunk.N4Y2OUEA.js} +2 -2
- package/dist/chunks/{chunk.KPHDBL43.js → chunk.NDJJVGQL.js} +56 -27
- package/dist/chunks/chunk.NDJJVGQL.js.map +7 -0
- package/dist/chunks/{chunk.P7EQPLEZ.js → chunk.NTBDBGG7.js} +2 -2
- package/dist/chunks/{chunk.QK2Z3GW3.js → chunk.O7OELAMY.js} +33 -23
- package/dist/chunks/chunk.O7OELAMY.js.map +7 -0
- package/dist/chunks/{chunk.PLUVTBCU.js → chunk.OY6ZX6TH.js} +8 -8
- package/dist/chunks/{chunk.SLGR2ZGC.js → chunk.OZ3LPRZE.js} +2 -2
- package/dist/chunks/{chunk.VOQPP2ZZ.js → chunk.PODVUIE6.js} +3 -3
- package/dist/chunks/{chunk.BWL4ZDNA.js → chunk.Q7G25NQW.js} +2 -2
- package/dist/chunks/{chunk.VU45RYHZ.js → chunk.QGLCODBD.js} +3 -3
- package/dist/chunks/{chunk.2BBNSYOY.js → chunk.RHL3SPJO.js} +11 -11
- package/dist/chunks/{chunk.2BBNSYOY.js.map → chunk.RHL3SPJO.js.map} +2 -2
- package/dist/chunks/{chunk.PXQUKOHR.js → chunk.RSTYXHB5.js} +2 -2
- package/dist/chunks/{chunk.YRAMLOFR.js → chunk.RZ3REQWL.js} +2 -2
- package/dist/chunks/{chunk.GS4XBPEE.js → chunk.SBLP34SQ.js} +2 -2
- package/dist/chunks/{chunk.WBOHZGDF.js → chunk.SFBSB7EM.js} +5 -5
- package/dist/chunks/{chunk.K6FQ7XXM.js → chunk.SKQK3F66.js} +2 -2
- package/dist/chunks/{chunk.EME2XLLU.js → chunk.SN2VEGTZ.js} +2 -2
- package/dist/chunks/{chunk.UCZ34PDA.js → chunk.STHUTCU7.js} +3 -3
- package/dist/chunks/{chunk.VBDEVVCF.js → chunk.SWMV7T2O.js} +4 -4
- package/dist/chunks/{chunk.645UJMOV.js → chunk.TBZAI6T6.js} +8 -8
- package/dist/chunks/{chunk.RBYUXWVU.js → chunk.TDWLNFH4.js} +2 -2
- package/dist/chunks/{chunk.4LOKOAC6.js → chunk.THNHZ3LC.js} +2 -2
- package/dist/chunks/{chunk.IMNZVGH7.js → chunk.UCRA4FZW.js} +2 -2
- package/dist/chunks/{chunk.26UMEPIH.js → chunk.UE2OCWAE.js} +2 -2
- package/dist/chunks/{chunk.KLJESQ6T.js → chunk.UNTUMNPO.js} +7 -7
- package/dist/chunks/{chunk.GFOIJAQ7.js → chunk.UOEHTGNM.js} +2 -2
- package/dist/chunks/{chunk.F7ESWLUJ.js → chunk.UQ65IBBL.js} +2 -2
- package/dist/chunks/{chunk.TUUD4GHX.js → chunk.UUECFETB.js} +2 -2
- package/dist/chunks/{chunk.XBQWANZE.js → chunk.V4GFOKBI.js} +2 -2
- package/dist/chunks/{chunk.XBQWANZE.js.map → chunk.V4GFOKBI.js.map} +1 -1
- package/dist/chunks/{chunk.2K4HDCDF.js → chunk.V6TCG5BQ.js} +22 -12
- package/dist/chunks/chunk.V6TCG5BQ.js.map +7 -0
- package/dist/chunks/{chunk.TWCC2CP6.js → chunk.VH6SKOPX.js} +3 -3
- package/dist/chunks/{chunk.5CMZF2WH.js → chunk.VHCBBPBS.js} +4 -4
- package/dist/chunks/chunk.VOUZJK5T.js +187 -0
- package/dist/chunks/chunk.VOUZJK5T.js.map +7 -0
- package/dist/chunks/{chunk.7BLGNQYF.js → chunk.WEOHOC3C.js} +2 -2
- package/dist/chunks/{chunk.C3AKZ5AA.js → chunk.WUKKH3NE.js} +2 -2
- package/dist/chunks/{chunk.BRNM4AJ5.js → chunk.X4NXSNI6.js} +2 -2
- package/dist/chunks/{chunk.FQ4KGYKO.js → chunk.XCFOLSPD.js} +2 -2
- package/dist/chunks/{chunk.BAQANMLJ.js → chunk.XLYCEJU4.js} +2 -2
- package/dist/chunks/{chunk.MGYKXWZG.js → chunk.XQZR2X4X.js} +2 -2
- package/dist/chunks/{chunk.2KZDXUHA.js → chunk.XUAUB2UI.js} +3 -3
- package/dist/chunks/{chunk.TTB55OFT.js → chunk.XWUVIVOV.js} +2 -2
- package/dist/chunks/{chunk.DHG2L3WA.js → chunk.XZ7DDRXL.js} +19 -20
- package/dist/chunks/chunk.XZ7DDRXL.js.map +7 -0
- package/dist/chunks/{chunk.GF3HUMZQ.js → chunk.Y5XMLHNP.js} +2 -2
- package/dist/chunks/{chunk.CNZHJBMS.js → chunk.YGMDIJUQ.js} +2 -2
- package/dist/chunks/{chunk.56TNALPZ.js → chunk.YUUXCVT2.js} +2 -2
- package/dist/chunks/{chunk.XAQXEY2M.js → chunk.ZJ6JMFVP.js} +2 -2
- package/dist/components/accordion/accordion.component.js +3 -3
- package/dist/components/accordion/accordion.js +4 -4
- package/dist/components/alert/alert.component.js +10 -10
- package/dist/components/alert/alert.js +11 -11
- package/dist/components/badge/badge.component.js +3 -3
- package/dist/components/badge/badge.js +4 -4
- package/dist/components/breadcrumb/breadcrumb.component.js +8 -8
- package/dist/components/breadcrumb/breadcrumb.js +9 -9
- package/dist/components/breadcrumb-item/breadcrumb-item.component.js +3 -3
- package/dist/components/breadcrumb-item/breadcrumb-item.js +4 -4
- package/dist/components/button/button.component.js +9 -9
- package/dist/components/button/button.js +10 -10
- package/dist/components/button-group/button-group.component.js +3 -3
- package/dist/components/button-group/button-group.js +4 -4
- package/dist/components/card/card.component.js +3 -3
- package/dist/components/card/card.js +4 -4
- package/dist/components/checkbox/checkbox.component.d.ts +2 -1
- package/dist/components/checkbox/checkbox.component.js +10 -11
- package/dist/components/checkbox/checkbox.js +11 -12
- package/dist/components/checkbox/checkbox.styles.js +1 -1
- package/dist/components/combobox/combobox.component.d.ts +3 -0
- package/dist/components/combobox/combobox.component.js +17 -18
- package/dist/components/combobox/combobox.js +18 -19
- package/dist/components/combobox/combobox.styles.js +2 -1
- package/dist/components/details/details.component.js +8 -8
- package/dist/components/details/details.js +9 -9
- package/dist/components/dialog/dialog.component.js +11 -11
- package/dist/components/dialog/dialog.js +12 -12
- package/dist/components/divider/divider.component.js +3 -3
- package/dist/components/divider/divider.js +4 -4
- package/dist/components/drawer/drawer.component.js +11 -11
- package/dist/components/drawer/drawer.js +12 -12
- package/dist/components/dropdown/dropdown.component.js +4 -4
- package/dist/components/dropdown/dropdown.js +5 -5
- package/dist/components/file/file.component.d.ts +2 -0
- package/dist/components/file/file.component.js +12 -12
- package/dist/components/file/file.js +13 -13
- package/dist/components/file/file.styles.js +1 -1
- package/dist/components/header/header.component.js +9 -9
- package/dist/components/header/header.js +10 -10
- package/dist/components/icon/icon.component.js +7 -7
- package/dist/components/icon/icon.js +8 -8
- package/dist/components/icon/library.js +2 -2
- package/dist/components/icon/library.migration.js +3 -3
- package/dist/components/icon-button/icon-button.component.js +9 -9
- package/dist/components/icon-button/icon-button.js +10 -10
- package/dist/components/input/input.component.js +10 -10
- package/dist/components/input/input.js +11 -11
- package/dist/components/menu/menu.component.js +4 -4
- package/dist/components/menu/menu.js +5 -5
- package/dist/components/menu-item/menu-item.component.js +11 -11
- package/dist/components/menu-item/menu-item.js +12 -12
- package/dist/components/menu-label/menu-label.component.js +4 -4
- package/dist/components/menu-label/menu-label.js +5 -5
- package/dist/components/nav-item/nav-item.component.js +9 -9
- package/dist/components/nav-item/nav-item.js +10 -10
- package/dist/components/optgroup/optgroup.component.js +4 -4
- package/dist/components/optgroup/optgroup.js +5 -5
- package/dist/components/option/option.component.js +9 -9
- package/dist/components/option/option.js +10 -10
- package/dist/components/popup/popup.component.js +3 -3
- package/dist/components/popup/popup.js +4 -4
- package/dist/components/prio-nav/prio-nav.component.js +15 -15
- package/dist/components/prio-nav/prio-nav.js +16 -16
- package/dist/components/progress-bar/progress-bar.component.js +3 -3
- package/dist/components/progress-bar/progress-bar.js +4 -4
- package/dist/components/progress-ring/progress-ring.component.js +3 -3
- package/dist/components/progress-ring/progress-ring.js +4 -4
- package/dist/components/radio/radio.component.d.ts +3 -1
- package/dist/components/radio/radio.component.js +9 -10
- package/dist/components/radio/radio.js +10 -11
- package/dist/components/radio/radio.styles.js +1 -1
- package/dist/components/radio-button/radio-button.component.js +3 -3
- package/dist/components/radio-button/radio-button.js +4 -4
- package/dist/components/radio-group/radio-group.component.d.ts +1 -1
- package/dist/components/radio-group/radio-group.component.js +6 -7
- package/dist/components/radio-group/radio-group.js +7 -8
- package/dist/components/radio-group/radio-group.styles.js +1 -1
- package/dist/components/range/range.component.d.ts +2 -0
- package/dist/components/range/range.component.js +7 -7
- package/dist/components/range/range.js +8 -8
- package/dist/components/range/range.styles.js +1 -1
- package/dist/components/range-tick/range-tick.component.js +3 -3
- package/dist/components/range-tick/range-tick.js +4 -4
- package/dist/components/resize-observer/resize-observer.component.js +3 -3
- package/dist/components/select/select.component.d.ts +3 -0
- package/dist/components/select/select.component.js +14 -15
- package/dist/components/select/select.js +15 -16
- package/dist/components/select/select.styles.js +2 -1
- package/dist/components/side-nav/side-nav.component.js +14 -14
- package/dist/components/side-nav/side-nav.js +15 -15
- package/dist/components/spinner/spinner.component.js +3 -3
- package/dist/components/spinner/spinner.js +4 -4
- package/dist/components/switch/switch.component.d.ts +2 -0
- package/dist/components/switch/switch.component.js +5 -6
- package/dist/components/switch/switch.js +6 -7
- package/dist/components/switch/switch.styles.js +1 -1
- package/dist/components/tab/tab.component.js +10 -10
- package/dist/components/tab/tab.js +11 -11
- package/dist/components/tab-group/tab-group.component.js +11 -11
- package/dist/components/tab-group/tab-group.js +12 -12
- package/dist/components/tab-panel/tab-panel.component.js +3 -3
- package/dist/components/tab-panel/tab-panel.js +4 -4
- package/dist/components/tag/tag.component.js +10 -10
- package/dist/components/tag/tag.js +11 -11
- package/dist/components/textarea/textarea.component.js +5 -6
- package/dist/components/textarea/textarea.js +6 -7
- package/dist/components/textarea/textarea.styles.js +1 -1
- package/dist/components/tooltip/tooltip.component.js +4 -4
- package/dist/components/tooltip/tooltip.js +5 -5
- package/dist/components/validate/utility.js +2 -2
- package/dist/components/validate/validate.component.js +12 -12
- package/dist/components/validate/validate.js +13 -13
- package/dist/custom-elements.json +245 -88
- package/dist/styles/index.css +8 -10
- package/dist/styles/utility.css +6 -11
- package/dist/synergy.js +148 -155
- package/dist/utilities/icon-library.js +2 -2
- package/dist/vscode.html-custom-data.json +58 -23
- package/package.json +4 -4
- package/dist/chunks/chunk.2IL4PA6Q.js +0 -130
- package/dist/chunks/chunk.2IL4PA6Q.js.map +0 -7
- package/dist/chunks/chunk.2K4HDCDF.js.map +0 -7
- package/dist/chunks/chunk.5OQDAMNY.js.map +0 -7
- package/dist/chunks/chunk.6AT5JL7A.js +0 -374
- package/dist/chunks/chunk.6AT5JL7A.js.map +0 -7
- package/dist/chunks/chunk.6USNG4EL.js.map +0 -7
- package/dist/chunks/chunk.DHG2L3WA.js.map +0 -7
- package/dist/chunks/chunk.F7LCJU4M.js +0 -183
- package/dist/chunks/chunk.F7LCJU4M.js.map +0 -7
- package/dist/chunks/chunk.FXJLG622.js.map +0 -7
- package/dist/chunks/chunk.GPP4D4HH.js +0 -313
- package/dist/chunks/chunk.GPP4D4HH.js.map +0 -7
- package/dist/chunks/chunk.IGU6STLS.js.map +0 -7
- package/dist/chunks/chunk.IZRTF5EM.js +0 -91
- package/dist/chunks/chunk.IZRTF5EM.js.map +0 -7
- package/dist/chunks/chunk.KPHDBL43.js.map +0 -7
- package/dist/chunks/chunk.L7T7BH5I.js.map +0 -7
- package/dist/chunks/chunk.MRIKXX4L.js.map +0 -7
- package/dist/chunks/chunk.PTRCO527.js.map +0 -7
- package/dist/chunks/chunk.QK2Z3GW3.js.map +0 -7
- package/dist/chunks/chunk.RA6YFHDM.js.map +0 -7
- package/dist/chunks/chunk.SHIPVO7H.js +0 -53
- package/dist/chunks/chunk.SHIPVO7H.js.map +0 -7
- package/dist/chunks/chunk.SLDFB2O3.js +0 -146
- package/dist/chunks/chunk.SLDFB2O3.js.map +0 -7
- package/dist/chunks/chunk.UQEZY2MP.js.map +0 -7
- package/dist/chunks/chunk.X323W6VB.js +0 -174
- package/dist/chunks/chunk.X323W6VB.js.map +0 -7
- package/dist/chunks/chunk.XNWASDT5.js.map +0 -7
- package/dist/chunks/chunk.YITQ6NLI.js +0 -121
- package/dist/chunks/chunk.YITQ6NLI.js.map +0 -7
- package/dist/chunks/chunk.YOJL35VB.js +0 -91
- package/dist/chunks/chunk.YOJL35VB.js.map +0 -7
- package/dist/chunks/chunk.YPYFEST2.js +0 -41
- package/dist/chunks/chunk.YPYFEST2.js.map +0 -7
- package/dist/chunks/chunk.ZC3GXTWV.js +0 -127
- package/dist/chunks/chunk.ZC3GXTWV.js.map +0 -7
- package/dist/components/checkbox/checkbox.custom.styles.d.ts +0 -2
- package/dist/components/checkbox/checkbox.custom.styles.js +0 -8
- package/dist/components/checkbox/checkbox.custom.styles.js.map +0 -7
- package/dist/components/combobox/combobox.custom.styles.d.ts +0 -2
- package/dist/components/combobox/combobox.custom.styles.js +0 -9
- package/dist/components/combobox/combobox.custom.styles.js.map +0 -7
- package/dist/components/radio/radio.custom.styles.d.ts +0 -2
- package/dist/components/radio/radio.custom.styles.js +0 -8
- package/dist/components/radio/radio.custom.styles.js.map +0 -7
- package/dist/components/radio-group/radio-group.custom.styles.d.ts +0 -2
- package/dist/components/radio-group/radio-group.custom.styles.js +0 -8
- package/dist/components/radio-group/radio-group.custom.styles.js.map +0 -7
- package/dist/components/select/select.custom.styles.d.ts +0 -2
- package/dist/components/select/select.custom.styles.js +0 -9
- package/dist/components/select/select.custom.styles.js.map +0 -7
- package/dist/components/switch/switch.custom.styles.d.ts +0 -2
- package/dist/components/switch/switch.custom.styles.js +0 -8
- package/dist/components/switch/switch.custom.styles.js.map +0 -7
- package/dist/components/textarea/textarea.custom.styles.d.ts +0 -2
- package/dist/components/textarea/textarea.custom.styles.js +0 -8
- package/dist/components/textarea/textarea.custom.styles.js.map +0 -7
- package/dist/styles/form-control.custom.styles.d.ts +0 -2
- /package/dist/chunks/{chunk.NMWM3BP7.js.map → chunk.2BATB6NO.js.map} +0 -0
- /package/dist/chunks/{chunk.U565GVEJ.js.map → chunk.2YBC7C2K.js.map} +0 -0
- /package/dist/chunks/{chunk.S2TKXK3H.js.map → chunk.3DCW4HDA.js.map} +0 -0
- /package/dist/chunks/{chunk.DH2W34JP.js.map → chunk.3XQ5VLXY.js.map} +0 -0
- /package/dist/chunks/{chunk.I6WV64JG.js.map → chunk.5RI2MXEU.js.map} +0 -0
- /package/dist/chunks/{chunk.F4ED64YD.js.map → chunk.5T4HS4EI.js.map} +0 -0
- /package/dist/chunks/{chunk.JZPLCDMG.js.map → chunk.6A2AHHWZ.js.map} +0 -0
- /package/dist/chunks/{chunk.HHYD4FQJ.js.map → chunk.6L4RCUNM.js.map} +0 -0
- /package/dist/chunks/{chunk.P5OWYFNJ.js.map → chunk.7J4TXMXH.js.map} +0 -0
- /package/dist/chunks/{chunk.OE5MIRYY.js.map → chunk.7RZ27FQL.js.map} +0 -0
- /package/dist/chunks/{chunk.NPEIIBBM.js.map → chunk.AVH3ZNCM.js.map} +0 -0
- /package/dist/chunks/{chunk.BYEQNCV6.js.map → chunk.BBPFCDZW.js.map} +0 -0
- /package/dist/chunks/{chunk.3LGIA5UJ.js.map → chunk.BJUQE5YL.js.map} +0 -0
- /package/dist/chunks/{chunk.RQBH4AH3.js.map → chunk.BVFTZ3AB.js.map} +0 -0
- /package/dist/chunks/{chunk.AWSAP5JA.js.map → chunk.BZMKXI2L.js.map} +0 -0
- /package/dist/chunks/{chunk.YWHVN3AH.js.map → chunk.CJLZ3QMG.js.map} +0 -0
- /package/dist/chunks/{chunk.RMLCZKL4.js.map → chunk.CPC3JTDA.js.map} +0 -0
- /package/dist/chunks/{chunk.CKHWRU6K.js.map → chunk.CV7OGSN7.js.map} +0 -0
- /package/dist/chunks/{chunk.3V43VOCB.js.map → chunk.DFS7LPJO.js.map} +0 -0
- /package/dist/chunks/{chunk.L3VTFKPP.js.map → chunk.DYE6F2Y6.js.map} +0 -0
- /package/dist/chunks/{chunk.MI4UFWSY.js.map → chunk.EAEQ3AGO.js.map} +0 -0
- /package/dist/chunks/{chunk.M67Q34LS.js.map → chunk.EUQYBYAZ.js.map} +0 -0
- /package/dist/chunks/{chunk.F5OQ5A6I.js.map → chunk.FFAHZBAJ.js.map} +0 -0
- /package/dist/chunks/{chunk.MQG45CA3.js.map → chunk.FKDUVEOP.js.map} +0 -0
- /package/dist/chunks/{chunk.4AOCGMAY.js.map → chunk.FKVCNOHV.js.map} +0 -0
- /package/dist/chunks/{chunk.5ZSMHHQE.js.map → chunk.FOH4KP4A.js.map} +0 -0
- /package/dist/chunks/{chunk.PJTZN7JM.js.map → chunk.G7UFPFQ2.js.map} +0 -0
- /package/dist/chunks/{chunk.CIJVYJBT.js.map → chunk.GCISSJZP.js.map} +0 -0
- /package/dist/chunks/{chunk.PFYIQKRP.js.map → chunk.GIEAMHSU.js.map} +0 -0
- /package/dist/chunks/{chunk.Y7RYQ66B.js.map → chunk.GT6WAUZ7.js.map} +0 -0
- /package/dist/chunks/{chunk.ZIPWPR45.js.map → chunk.GZVYO3UJ.js.map} +0 -0
- /package/dist/chunks/{chunk.RNZREX6Z.js.map → chunk.H63OT7RB.js.map} +0 -0
- /package/dist/chunks/{chunk.UNYKSD5O.js.map → chunk.IPWLCVHW.js.map} +0 -0
- /package/dist/chunks/{chunk.ZCZJZOM4.js.map → chunk.J3GDNLNN.js.map} +0 -0
- /package/dist/chunks/{chunk.P5VLLIAA.js.map → chunk.JCWTUOY2.js.map} +0 -0
- /package/dist/chunks/{chunk.V7UB7DDN.js.map → chunk.JHJFFBNL.js.map} +0 -0
- /package/dist/chunks/{chunk.7IUQZ2ML.js.map → chunk.JJ2K4ORZ.js.map} +0 -0
- /package/dist/chunks/{chunk.IRBFRL7V.js.map → chunk.K5OSYXNU.js.map} +0 -0
- /package/dist/chunks/{chunk.UNEKO4DQ.js.map → chunk.KGECDG22.js.map} +0 -0
- /package/dist/chunks/{chunk.HLBSU5HB.js.map → chunk.KT6MHQM6.js.map} +0 -0
- /package/dist/chunks/{chunk.FBC4N7NR.js.map → chunk.KUTXV7RO.js.map} +0 -0
- /package/dist/chunks/{chunk.J6VJSOK2.js.map → chunk.LALGMGC2.js.map} +0 -0
- /package/dist/chunks/{chunk.XAZXQY2M.js.map → chunk.LKMV5MVK.js.map} +0 -0
- /package/dist/chunks/{chunk.C4N7J54S.js.map → chunk.MCAB6KY5.js.map} +0 -0
- /package/dist/chunks/{chunk.QC4VGSZW.js.map → chunk.MCKS4JLW.js.map} +0 -0
- /package/dist/chunks/{chunk.HUPHWV4R.js.map → chunk.MJA5HEFN.js.map} +0 -0
- /package/dist/chunks/{chunk.ZV4CF3ZJ.js.map → chunk.MZJLG4BF.js.map} +0 -0
- /package/dist/chunks/{chunk.H7S3NKK3.js.map → chunk.N4Y2OUEA.js.map} +0 -0
- /package/dist/chunks/{chunk.P7EQPLEZ.js.map → chunk.NTBDBGG7.js.map} +0 -0
- /package/dist/chunks/{chunk.PLUVTBCU.js.map → chunk.OY6ZX6TH.js.map} +0 -0
- /package/dist/chunks/{chunk.SLGR2ZGC.js.map → chunk.OZ3LPRZE.js.map} +0 -0
- /package/dist/chunks/{chunk.VOQPP2ZZ.js.map → chunk.PODVUIE6.js.map} +0 -0
- /package/dist/chunks/{chunk.BWL4ZDNA.js.map → chunk.Q7G25NQW.js.map} +0 -0
- /package/dist/chunks/{chunk.VU45RYHZ.js.map → chunk.QGLCODBD.js.map} +0 -0
- /package/dist/chunks/{chunk.PXQUKOHR.js.map → chunk.RSTYXHB5.js.map} +0 -0
- /package/dist/chunks/{chunk.YRAMLOFR.js.map → chunk.RZ3REQWL.js.map} +0 -0
- /package/dist/chunks/{chunk.GS4XBPEE.js.map → chunk.SBLP34SQ.js.map} +0 -0
- /package/dist/chunks/{chunk.WBOHZGDF.js.map → chunk.SFBSB7EM.js.map} +0 -0
- /package/dist/chunks/{chunk.K6FQ7XXM.js.map → chunk.SKQK3F66.js.map} +0 -0
- /package/dist/chunks/{chunk.EME2XLLU.js.map → chunk.SN2VEGTZ.js.map} +0 -0
- /package/dist/chunks/{chunk.UCZ34PDA.js.map → chunk.STHUTCU7.js.map} +0 -0
- /package/dist/chunks/{chunk.VBDEVVCF.js.map → chunk.SWMV7T2O.js.map} +0 -0
- /package/dist/chunks/{chunk.645UJMOV.js.map → chunk.TBZAI6T6.js.map} +0 -0
- /package/dist/chunks/{chunk.RBYUXWVU.js.map → chunk.TDWLNFH4.js.map} +0 -0
- /package/dist/chunks/{chunk.4LOKOAC6.js.map → chunk.THNHZ3LC.js.map} +0 -0
- /package/dist/chunks/{chunk.IMNZVGH7.js.map → chunk.UCRA4FZW.js.map} +0 -0
- /package/dist/chunks/{chunk.26UMEPIH.js.map → chunk.UE2OCWAE.js.map} +0 -0
- /package/dist/chunks/{chunk.KLJESQ6T.js.map → chunk.UNTUMNPO.js.map} +0 -0
- /package/dist/chunks/{chunk.GFOIJAQ7.js.map → chunk.UOEHTGNM.js.map} +0 -0
- /package/dist/chunks/{chunk.F7ESWLUJ.js.map → chunk.UQ65IBBL.js.map} +0 -0
- /package/dist/chunks/{chunk.TUUD4GHX.js.map → chunk.UUECFETB.js.map} +0 -0
- /package/dist/chunks/{chunk.TWCC2CP6.js.map → chunk.VH6SKOPX.js.map} +0 -0
- /package/dist/chunks/{chunk.5CMZF2WH.js.map → chunk.VHCBBPBS.js.map} +0 -0
- /package/dist/chunks/{chunk.7BLGNQYF.js.map → chunk.WEOHOC3C.js.map} +0 -0
- /package/dist/chunks/{chunk.C3AKZ5AA.js.map → chunk.WUKKH3NE.js.map} +0 -0
- /package/dist/chunks/{chunk.BRNM4AJ5.js.map → chunk.X4NXSNI6.js.map} +0 -0
- /package/dist/chunks/{chunk.FQ4KGYKO.js.map → chunk.XCFOLSPD.js.map} +0 -0
- /package/dist/chunks/{chunk.BAQANMLJ.js.map → chunk.XLYCEJU4.js.map} +0 -0
- /package/dist/chunks/{chunk.MGYKXWZG.js.map → chunk.XQZR2X4X.js.map} +0 -0
- /package/dist/chunks/{chunk.2KZDXUHA.js.map → chunk.XUAUB2UI.js.map} +0 -0
- /package/dist/chunks/{chunk.TTB55OFT.js.map → chunk.XWUVIVOV.js.map} +0 -0
- /package/dist/chunks/{chunk.GF3HUMZQ.js.map → chunk.Y5XMLHNP.js.map} +0 -0
- /package/dist/chunks/{chunk.CNZHJBMS.js.map → chunk.YGMDIJUQ.js.map} +0 -0
- /package/dist/chunks/{chunk.56TNALPZ.js.map → chunk.YUUXCVT2.js.map} +0 -0
- /package/dist/chunks/{chunk.XAQXEY2M.js.map → chunk.ZJ6JMFVP.js.map} +0 -0
|
@@ -1,313 +0,0 @@
|
|
|
1
|
-
// src/components/select/select.styles.ts
|
|
2
|
-
import { css } from "lit";
|
|
3
|
-
var select_styles_default = css`
|
|
4
|
-
/* stylelint-disable */
|
|
5
|
-
:host {
|
|
6
|
-
display: block;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
/** The popup */
|
|
10
|
-
.select {
|
|
11
|
-
flex: 1 1 auto;
|
|
12
|
-
display: inline-flex;
|
|
13
|
-
width: 100%;
|
|
14
|
-
position: relative;
|
|
15
|
-
vertical-align: middle;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
.select::part(popup) {
|
|
19
|
-
z-index: var(--syn-z-index-dropdown);
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
.select[data-current-placement^='top']::part(popup) {
|
|
23
|
-
transform-origin: bottom;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
.select[data-current-placement^='bottom']::part(popup) {
|
|
27
|
-
transform-origin: top;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
/* Combobox */
|
|
31
|
-
.select__combobox {
|
|
32
|
-
flex: 1;
|
|
33
|
-
display: flex;
|
|
34
|
-
width: 100%;
|
|
35
|
-
min-width: 0;
|
|
36
|
-
position: relative;
|
|
37
|
-
align-items: center;
|
|
38
|
-
justify-content: start;
|
|
39
|
-
font-family: var(--syn-input-font-family);
|
|
40
|
-
font-weight: var(--syn-input-font-weight);
|
|
41
|
-
letter-spacing: var(--syn-input-letter-spacing);
|
|
42
|
-
vertical-align: middle;
|
|
43
|
-
overflow: hidden;
|
|
44
|
-
cursor: pointer;
|
|
45
|
-
transition:
|
|
46
|
-
var(--syn-transition-fast) color,
|
|
47
|
-
var(--syn-transition-fast) border,
|
|
48
|
-
var(--syn-transition-fast) box-shadow,
|
|
49
|
-
var(--syn-transition-fast) background-color;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
.select__display-input {
|
|
53
|
-
position: relative;
|
|
54
|
-
width: 100%;
|
|
55
|
-
font: inherit;
|
|
56
|
-
border: none;
|
|
57
|
-
background: none;
|
|
58
|
-
color: var(--syn-input-color);
|
|
59
|
-
cursor: inherit;
|
|
60
|
-
overflow: hidden;
|
|
61
|
-
padding: 0;
|
|
62
|
-
margin: 0;
|
|
63
|
-
-webkit-appearance: none;
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
.select__display-input::placeholder {
|
|
67
|
-
color: var(--syn-input-placeholder-color);
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
.select:not(.select--disabled):hover .select__display-input {
|
|
71
|
-
color: var(--syn-input-color-hover);
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
.select__display-input:focus {
|
|
75
|
-
outline: none;
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
/* Visually hide the display input when multiple is enabled */
|
|
79
|
-
.select--multiple:not(.select--placeholder-visible) .select__display-input {
|
|
80
|
-
position: absolute;
|
|
81
|
-
z-index: -1;
|
|
82
|
-
top: 0;
|
|
83
|
-
left: 0;
|
|
84
|
-
width: 100%;
|
|
85
|
-
height: 100%;
|
|
86
|
-
opacity: 0;
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
.select__value-input {
|
|
90
|
-
position: absolute;
|
|
91
|
-
top: 0;
|
|
92
|
-
left: 0;
|
|
93
|
-
width: 100%;
|
|
94
|
-
height: 100%;
|
|
95
|
-
padding: 0;
|
|
96
|
-
margin: 0;
|
|
97
|
-
opacity: 0;
|
|
98
|
-
z-index: -1;
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
.select__tags {
|
|
102
|
-
display: flex;
|
|
103
|
-
flex: 1;
|
|
104
|
-
align-items: center;
|
|
105
|
-
flex-wrap: wrap;
|
|
106
|
-
margin-inline-start: var(--syn-spacing-2x-small);
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
.select__tags::slotted(syn-tag) {
|
|
110
|
-
cursor: pointer !important;
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
.select--disabled .select__tags,
|
|
114
|
-
.select--disabled .select__tags::slotted(syn-tag) {
|
|
115
|
-
cursor: not-allowed !important;
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
/* Standard selects */
|
|
119
|
-
.select--standard .select__combobox {
|
|
120
|
-
background-color: var(--syn-input-background-color);
|
|
121
|
-
border: solid var(--syn-input-border-width) var(--syn-input-border-color);
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
.select--standard.select--disabled .select__combobox {
|
|
125
|
-
background-color: var(--syn-input-background-color-disabled);
|
|
126
|
-
border-color: var(--syn-input-border-color-disabled);
|
|
127
|
-
color: var(--syn-input-color-disabled);
|
|
128
|
-
opacity: 0.5;
|
|
129
|
-
cursor: not-allowed;
|
|
130
|
-
outline: none;
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
.select--standard:not(.select--disabled).select--open .select__combobox,
|
|
134
|
-
.select--standard:not(.select--disabled).select--focused .select__combobox {
|
|
135
|
-
background-color: var(--syn-input-background-color-focus);
|
|
136
|
-
border-color: var(--syn-input-border-color-focus);
|
|
137
|
-
box-shadow: 0 0 0 var(--syn-focus-ring-width) var(--syn-input-focus-ring-color);
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
/* Sizes */
|
|
141
|
-
.select--small .select__combobox {
|
|
142
|
-
border-radius: var(--syn-input-border-radius-small);
|
|
143
|
-
font-size: var(--syn-input-font-size-small);
|
|
144
|
-
min-height: var(--syn-input-height-small);
|
|
145
|
-
padding-block: 0;
|
|
146
|
-
padding-inline: var(--syn-input-spacing-small);
|
|
147
|
-
}
|
|
148
|
-
|
|
149
|
-
.select--small .select__clear {
|
|
150
|
-
margin-inline-start: var(--syn-input-spacing-small);
|
|
151
|
-
}
|
|
152
|
-
|
|
153
|
-
.select--small .select__prefix::slotted(*) {
|
|
154
|
-
margin-inline-end: var(--syn-input-spacing-small);
|
|
155
|
-
}
|
|
156
|
-
|
|
157
|
-
.select--small.select--multiple:not(.select--placeholder-visible) .select__prefix::slotted(*) {
|
|
158
|
-
margin-inline-start: var(--syn-input-spacing-small);
|
|
159
|
-
}
|
|
160
|
-
|
|
161
|
-
.select--small.select--multiple:not(.select--placeholder-visible) .select__combobox {
|
|
162
|
-
padding-block: 2px;
|
|
163
|
-
padding-inline-start: 0;
|
|
164
|
-
}
|
|
165
|
-
|
|
166
|
-
.select--small .select__tags {
|
|
167
|
-
gap: 2px;
|
|
168
|
-
}
|
|
169
|
-
|
|
170
|
-
.select--medium .select__combobox {
|
|
171
|
-
border-radius: var(--syn-input-border-radius-medium);
|
|
172
|
-
font-size: var(--syn-input-font-size-medium);
|
|
173
|
-
min-height: var(--syn-input-height-medium);
|
|
174
|
-
padding-block: 0;
|
|
175
|
-
padding-inline: var(--syn-input-spacing-medium);
|
|
176
|
-
}
|
|
177
|
-
|
|
178
|
-
.select--medium .select__clear {
|
|
179
|
-
margin-inline-start: var(--syn-input-spacing-medium);
|
|
180
|
-
}
|
|
181
|
-
|
|
182
|
-
.select--medium .select__prefix::slotted(*) {
|
|
183
|
-
margin-inline-end: var(--syn-input-spacing-medium);
|
|
184
|
-
}
|
|
185
|
-
|
|
186
|
-
.select--medium.select--multiple:not(.select--placeholder-visible) .select__prefix::slotted(*) {
|
|
187
|
-
margin-inline-start: var(--syn-input-spacing-medium);
|
|
188
|
-
}
|
|
189
|
-
|
|
190
|
-
.select--medium.select--multiple:not(.select--placeholder-visible) .select__combobox {
|
|
191
|
-
padding-inline-start: 0;
|
|
192
|
-
padding-block: 3px;
|
|
193
|
-
}
|
|
194
|
-
|
|
195
|
-
.select--medium .select__tags {
|
|
196
|
-
gap: 3px;
|
|
197
|
-
}
|
|
198
|
-
|
|
199
|
-
.select--large .select__combobox {
|
|
200
|
-
border-radius: var(--syn-input-border-radius-large);
|
|
201
|
-
font-size: var(--syn-input-font-size-large);
|
|
202
|
-
min-height: var(--syn-input-height-large);
|
|
203
|
-
padding-block: 0;
|
|
204
|
-
padding-inline: var(--syn-input-spacing-large);
|
|
205
|
-
}
|
|
206
|
-
|
|
207
|
-
.select--large .select__clear {
|
|
208
|
-
margin-inline-start: var(--syn-input-spacing-large);
|
|
209
|
-
}
|
|
210
|
-
|
|
211
|
-
.select--large .select__prefix::slotted(*) {
|
|
212
|
-
margin-inline-end: var(--syn-input-spacing-large);
|
|
213
|
-
}
|
|
214
|
-
|
|
215
|
-
.select--large.select--multiple:not(.select--placeholder-visible) .select__prefix::slotted(*) {
|
|
216
|
-
margin-inline-start: var(--syn-input-spacing-large);
|
|
217
|
-
}
|
|
218
|
-
|
|
219
|
-
.select--large.select--multiple:not(.select--placeholder-visible) .select__combobox {
|
|
220
|
-
padding-inline-start: 0;
|
|
221
|
-
padding-block: 4px;
|
|
222
|
-
}
|
|
223
|
-
|
|
224
|
-
.select--large .select__tags {
|
|
225
|
-
gap: 4px;
|
|
226
|
-
}/* Prefix and Suffix */
|
|
227
|
-
.select__prefix,
|
|
228
|
-
.select__suffix {
|
|
229
|
-
flex: 0;
|
|
230
|
-
display: inline-flex;
|
|
231
|
-
align-items: center;
|
|
232
|
-
color: var(--syn-input-placeholder-color);
|
|
233
|
-
}
|
|
234
|
-
|
|
235
|
-
.select__suffix::slotted(*) {
|
|
236
|
-
margin-inline-start: var(--syn-spacing-small);
|
|
237
|
-
}
|
|
238
|
-
|
|
239
|
-
/* Clear button */
|
|
240
|
-
.select__clear {
|
|
241
|
-
display: inline-flex;
|
|
242
|
-
align-items: center;
|
|
243
|
-
justify-content: center;
|
|
244
|
-
font-size: inherit;
|
|
245
|
-
color: var(--syn-input-icon-color);
|
|
246
|
-
border: none;
|
|
247
|
-
background: none;
|
|
248
|
-
padding: 0;
|
|
249
|
-
transition: var(--syn-transition-fast) color;
|
|
250
|
-
cursor: pointer;
|
|
251
|
-
}
|
|
252
|
-
|
|
253
|
-
.select__clear:hover {
|
|
254
|
-
color: var(--syn-input-icon-color-hover);
|
|
255
|
-
}
|
|
256
|
-
|
|
257
|
-
.select__clear:focus {
|
|
258
|
-
outline: none;
|
|
259
|
-
}
|
|
260
|
-
|
|
261
|
-
/* Expand icon */
|
|
262
|
-
.select__expand-icon {
|
|
263
|
-
flex: 0 0 auto;
|
|
264
|
-
display: flex;
|
|
265
|
-
align-items: center;
|
|
266
|
-
transition: var(--syn-transition-medium) rotate ease;
|
|
267
|
-
rotate: 0;
|
|
268
|
-
margin-inline-start: var(--syn-spacing-small);
|
|
269
|
-
}
|
|
270
|
-
|
|
271
|
-
.select--open .select__expand-icon {
|
|
272
|
-
rotate: -180deg;
|
|
273
|
-
}
|
|
274
|
-
|
|
275
|
-
/* Listbox */
|
|
276
|
-
.select__listbox {
|
|
277
|
-
display: block;
|
|
278
|
-
position: relative;
|
|
279
|
-
font-family: var(--syn-font-sans);
|
|
280
|
-
font-size: var(--syn-font-size-medium);
|
|
281
|
-
font-weight: var(--syn-font-weight-normal);
|
|
282
|
-
box-shadow: var(--syn-shadow-large);
|
|
283
|
-
background: var(--syn-panel-background-color);
|
|
284
|
-
border: solid var(--syn-panel-border-width) var(--syn-panel-border-color);
|
|
285
|
-
border-radius: var(--syn-border-radius-medium);
|
|
286
|
-
padding-block: var(--syn-spacing-x-small);
|
|
287
|
-
padding-inline: 0;
|
|
288
|
-
overflow: auto;
|
|
289
|
-
overscroll-behavior: none;
|
|
290
|
-
|
|
291
|
-
/* Make sure it adheres to the popup's auto size */
|
|
292
|
-
max-width: var(--auto-size-available-width);
|
|
293
|
-
max-height: var(--auto-size-available-height);
|
|
294
|
-
}
|
|
295
|
-
|
|
296
|
-
.select__listbox ::slotted(syn-divider) {
|
|
297
|
-
--spacing: var(--syn-spacing-x-small);
|
|
298
|
-
}
|
|
299
|
-
|
|
300
|
-
.select__listbox ::slotted(small) {
|
|
301
|
-
display: block;
|
|
302
|
-
font-size: var(--syn-font-size-small);
|
|
303
|
-
font-weight: var(--syn-font-weight-semibold);
|
|
304
|
-
color: var(--syn-color-neutral-500);
|
|
305
|
-
padding-block: var(--syn-spacing-2x-small);
|
|
306
|
-
padding-inline: var(--syn-spacing-x-large);
|
|
307
|
-
}
|
|
308
|
-
`;
|
|
309
|
-
|
|
310
|
-
export {
|
|
311
|
-
select_styles_default
|
|
312
|
-
};
|
|
313
|
-
//# sourceMappingURL=chunk.GPP4D4HH.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/components/select/select.styles.ts"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable */\nimport { css } from 'lit';\n\nexport default css`\n\t/* stylelint-disable */\n :host {\n display: block;\n }\n\n /** The popup */\n .select {\n flex: 1 1 auto;\n display: inline-flex;\n width: 100%;\n position: relative;\n vertical-align: middle;\n }\n\n .select::part(popup) {\n z-index: var(--syn-z-index-dropdown);\n }\n\n .select[data-current-placement^='top']::part(popup) {\n transform-origin: bottom;\n }\n\n .select[data-current-placement^='bottom']::part(popup) {\n transform-origin: top;\n }\n\n /* Combobox */\n .select__combobox {\n flex: 1;\n display: flex;\n width: 100%;\n min-width: 0;\n position: relative;\n align-items: center;\n justify-content: start;\n font-family: var(--syn-input-font-family);\n font-weight: var(--syn-input-font-weight);\n letter-spacing: var(--syn-input-letter-spacing);\n vertical-align: middle;\n overflow: hidden;\n cursor: pointer;\n transition:\n var(--syn-transition-fast) color,\n var(--syn-transition-fast) border,\n var(--syn-transition-fast) box-shadow,\n var(--syn-transition-fast) background-color;\n }\n\n .select__display-input {\n position: relative;\n width: 100%;\n font: inherit;\n border: none;\n background: none;\n color: var(--syn-input-color);\n cursor: inherit;\n overflow: hidden;\n padding: 0;\n margin: 0;\n -webkit-appearance: none;\n }\n\n .select__display-input::placeholder {\n color: var(--syn-input-placeholder-color);\n }\n\n .select:not(.select--disabled):hover .select__display-input {\n color: var(--syn-input-color-hover);\n }\n\n .select__display-input:focus {\n outline: none;\n }\n\n /* Visually hide the display input when multiple is enabled */\n .select--multiple:not(.select--placeholder-visible) .select__display-input {\n position: absolute;\n z-index: -1;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n opacity: 0;\n }\n\n .select__value-input {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n padding: 0;\n margin: 0;\n opacity: 0;\n z-index: -1;\n }\n\n .select__tags {\n display: flex;\n flex: 1;\n align-items: center;\n flex-wrap: wrap;\n margin-inline-start: var(--syn-spacing-2x-small);\n }\n\n .select__tags::slotted(syn-tag) {\n cursor: pointer !important;\n }\n\n .select--disabled .select__tags,\n .select--disabled .select__tags::slotted(syn-tag) {\n cursor: not-allowed !important;\n }\n\n /* Standard selects */\n .select--standard .select__combobox {\n background-color: var(--syn-input-background-color);\n border: solid var(--syn-input-border-width) var(--syn-input-border-color);\n }\n\n .select--standard.select--disabled .select__combobox {\n background-color: var(--syn-input-background-color-disabled);\n border-color: var(--syn-input-border-color-disabled);\n color: var(--syn-input-color-disabled);\n opacity: 0.5;\n cursor: not-allowed;\n outline: none;\n }\n\n .select--standard:not(.select--disabled).select--open .select__combobox,\n .select--standard:not(.select--disabled).select--focused .select__combobox {\n background-color: var(--syn-input-background-color-focus);\n border-color: var(--syn-input-border-color-focus);\n box-shadow: 0 0 0 var(--syn-focus-ring-width) var(--syn-input-focus-ring-color);\n }\n\n/* Sizes */\n .select--small .select__combobox {\n border-radius: var(--syn-input-border-radius-small);\n font-size: var(--syn-input-font-size-small);\n min-height: var(--syn-input-height-small);\n padding-block: 0;\n padding-inline: var(--syn-input-spacing-small);\n }\n\n .select--small .select__clear {\n margin-inline-start: var(--syn-input-spacing-small);\n }\n\n .select--small .select__prefix::slotted(*) {\n margin-inline-end: var(--syn-input-spacing-small);\n }\n\n .select--small.select--multiple:not(.select--placeholder-visible) .select__prefix::slotted(*) {\n margin-inline-start: var(--syn-input-spacing-small);\n }\n\n .select--small.select--multiple:not(.select--placeholder-visible) .select__combobox {\n padding-block: 2px;\n padding-inline-start: 0;\n }\n\n .select--small .select__tags {\n gap: 2px;\n }\n\n .select--medium .select__combobox {\n border-radius: var(--syn-input-border-radius-medium);\n font-size: var(--syn-input-font-size-medium);\n min-height: var(--syn-input-height-medium);\n padding-block: 0;\n padding-inline: var(--syn-input-spacing-medium);\n }\n\n .select--medium .select__clear {\n margin-inline-start: var(--syn-input-spacing-medium);\n }\n\n .select--medium .select__prefix::slotted(*) {\n margin-inline-end: var(--syn-input-spacing-medium);\n }\n\n .select--medium.select--multiple:not(.select--placeholder-visible) .select__prefix::slotted(*) {\n margin-inline-start: var(--syn-input-spacing-medium);\n }\n\n .select--medium.select--multiple:not(.select--placeholder-visible) .select__combobox {\n padding-inline-start: 0;\n padding-block: 3px;\n }\n\n .select--medium .select__tags {\n gap: 3px;\n }\n\n .select--large .select__combobox {\n border-radius: var(--syn-input-border-radius-large);\n font-size: var(--syn-input-font-size-large);\n min-height: var(--syn-input-height-large);\n padding-block: 0;\n padding-inline: var(--syn-input-spacing-large);\n }\n\n .select--large .select__clear {\n margin-inline-start: var(--syn-input-spacing-large);\n }\n\n .select--large .select__prefix::slotted(*) {\n margin-inline-end: var(--syn-input-spacing-large);\n }\n\n .select--large.select--multiple:not(.select--placeholder-visible) .select__prefix::slotted(*) {\n margin-inline-start: var(--syn-input-spacing-large);\n }\n\n .select--large.select--multiple:not(.select--placeholder-visible) .select__combobox {\n padding-inline-start: 0;\n padding-block: 4px;\n }\n\n .select--large .select__tags {\n gap: 4px;\n }/* Prefix and Suffix */\n .select__prefix,\n .select__suffix {\n flex: 0;\n display: inline-flex;\n align-items: center;\n color: var(--syn-input-placeholder-color);\n }\n\n .select__suffix::slotted(*) {\n margin-inline-start: var(--syn-spacing-small);\n }\n\n /* Clear button */\n .select__clear {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: inherit;\n color: var(--syn-input-icon-color);\n border: none;\n background: none;\n padding: 0;\n transition: var(--syn-transition-fast) color;\n cursor: pointer;\n }\n\n .select__clear:hover {\n color: var(--syn-input-icon-color-hover);\n }\n\n .select__clear:focus {\n outline: none;\n }\n\n /* Expand icon */\n .select__expand-icon {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n transition: var(--syn-transition-medium) rotate ease;\n rotate: 0;\n margin-inline-start: var(--syn-spacing-small);\n }\n\n .select--open .select__expand-icon {\n rotate: -180deg;\n }\n\n /* Listbox */\n .select__listbox {\n display: block;\n position: relative;\n font-family: var(--syn-font-sans);\n font-size: var(--syn-font-size-medium);\n font-weight: var(--syn-font-weight-normal);\n box-shadow: var(--syn-shadow-large);\n background: var(--syn-panel-background-color);\n border: solid var(--syn-panel-border-width) var(--syn-panel-border-color);\n border-radius: var(--syn-border-radius-medium);\n padding-block: var(--syn-spacing-x-small);\n padding-inline: 0;\n overflow: auto;\n overscroll-behavior: none;\n\n /* Make sure it adheres to the popup's auto size */\n max-width: var(--auto-size-available-width);\n max-height: var(--auto-size-available-height);\n }\n\n .select__listbox ::slotted(syn-divider) {\n --spacing: var(--syn-spacing-x-small);\n }\n\n .select__listbox ::slotted(small) {\n display: block;\n font-size: var(--syn-font-size-small);\n font-weight: var(--syn-font-weight-semibold);\n color: var(--syn-color-neutral-500);\n padding-block: var(--syn-spacing-2x-small);\n padding-inline: var(--syn-spacing-x-large);\n }\n`;\n"],
|
|
5
|
-
"mappings": ";AACA,SAAS,WAAW;AAEpB,IAAO,wBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/components/radio-group/radio-group.component.ts"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable */\nimport { classMap } from 'lit/directives/class-map.js';\nimport {\n customErrorValidityState,\n FormControlController,\n validValidityState,\n valueMissingValidityState\n} from '../../internal/form.js';\nimport { HasSlotController } from '../../internal/slot.js';\nimport { html } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { watch } from '../../internal/watch.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport formControlStyles from '../../styles/form-control.styles.js';\nimport formControlCustomStyles from '../../styles/form-control.custom.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport SynButtonGroup from '../button-group/button-group.component.js';\nimport styles from './radio-group.styles.js';\nimport customStyles from './radio-group.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\nimport type { SynergyFormControl } from '../../internal/synergy-element.js';\nimport type SynRadio from '../radio/radio.js';\nimport type SynRadioButton from '../radio-button/radio-button.js';\nimport { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.js';\n\n/**\n * @summary Radio groups are used to group multiple [radios](/components/radio) or [radio buttons](/components/radio-button) so they function as a single form control.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-radio-group--docs\n * @status stable\n * @since 2.0\n *\n * @dependency syn-button-group\n *\n * @slot - The default slot where `<syn-radio>` or `<syn-radio-button>` elements are placed.\n * @slot label - The radio group's label. Required for proper accessibility. Alternatively, you can use the `label`\n * attribute.\n * @slot help-text - Text that describes how to use the radio group. Alternatively, you can use the `help-text` attribute.\n *\n * @event syn-change - Emitted when the radio group's selected value changes.\n * @event syn-input - Emitted when the radio group receives user input.\n * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart form-control - The form control that wraps the label, input, and help text.\n * @csspart form-control-label - The label's wrapper.\n * @csspart form-control-input - The input's wrapper.\n * @csspart form-control-help-text - The help text's wrapper.\n * @csspart button-group - The button group that wraps radio buttons.\n * @csspart button-group__base - The button group's `base` part.\n */\n@enableDefaultSettings('SynRadioGroup')\nexport default class SynRadioGroup extends SynergyElement implements SynergyFormControl {\n static styles: CSSResultGroup = [componentStyles, formControlStyles, styles, formControlCustomStyles, customStyles];\n static dependencies = { 'syn-button-group': SynButtonGroup };\n\n protected readonly formControlController = new FormControlController(this);\n private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label');\n private customValidityMessage = '';\n private validationTimeout: number;\n\n @query('slot:not([name])') defaultSlot: HTMLSlotElement;\n @query('.radio-group__validation-input') validationInput: HTMLInputElement;\n\n @state() private hasButtonGroup = false;\n @state() private errorMessage = '';\n @state() defaultValue: string | number = '';\n\n /**\n * The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\n * instead.\n */\n @property() label = '';\n\n /** The radio groups's help text. If you need to display HTML, use the `help-text` slot instead. */\n @property({ attribute: 'help-text' }) helpText = '';\n\n /** The name of the radio group, submitted as a name/value pair with form data. */\n @property() name = 'option';\n\n /** The current value of the radio group, submitted as a name/value pair with form data. */\n @property({ reflect: true }) value: string | number = '';\n\n /** The radio group's size. This size will be applied to all child radios and radio buttons. */\n @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n /**\n * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\n * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in\n * the same document or shadow root for this to work.\n */\n @property({ reflect: true }) form = '';\n\n /** Ensures a child radio is checked before allowing the containing form to submit. */\n @property({ type: Boolean, reflect: true }) required = false;\n\n /** Gets the validity state object */\n get validity() {\n const isRequiredAndEmpty = this.required && !this.value;\n const hasCustomValidityMessage = this.customValidityMessage !== '';\n\n if (hasCustomValidityMessage) {\n return customErrorValidityState;\n } else if (isRequiredAndEmpty) {\n return valueMissingValidityState;\n }\n\n return validValidityState;\n }\n\n /** Gets the validation message */\n get validationMessage() {\n const isRequiredAndEmpty = this.required && !this.value;\n const hasCustomValidityMessage = this.customValidityMessage !== '';\n\n if (hasCustomValidityMessage) {\n return this.customValidityMessage;\n } else if (isRequiredAndEmpty) {\n return this.validationInput.validationMessage;\n }\n\n return '';\n }\n\n connectedCallback() {\n super.connectedCallback();\n this.defaultValue = this.value;\n }\n\n firstUpdated() {\n this.formControlController.updateValidity();\n }\n\n private getAllRadios() {\n return [...this.querySelectorAll<SynRadio | SynRadioButton>('syn-radio, syn-radio-button')];\n }\n\n private handleRadioClick(event: MouseEvent) {\n const target = (event.target as HTMLElement).closest<SynRadio | SynRadioButton>('syn-radio, syn-radio-button')!;\n const radios = this.getAllRadios();\n const oldValue = this.value;\n\n if (!target || target.disabled) {\n return;\n }\n\n this.value = target.value;\n radios.forEach(radio => (radio.checked = radio === target));\n\n if (this.value !== oldValue) {\n this.emit('syn-change');\n this.emit('syn-input');\n }\n }\n\n private handleKeyDown(event: KeyboardEvent) {\n if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', ' '].includes(event.key)) {\n return;\n }\n\n const radios = this.getAllRadios().filter(radio => !radio.disabled);\n const checkedRadio = radios.find(radio => radio.checked) ?? radios[0];\n const incr = event.key === ' ' ? 0 : ['ArrowUp', 'ArrowLeft'].includes(event.key) ? -1 : 1;\n const oldValue = this.value;\n let index = radios.indexOf(checkedRadio) + incr;\n\n if (index < 0) {\n index = radios.length - 1;\n }\n\n if (index > radios.length - 1) {\n index = 0;\n }\n\n this.getAllRadios().forEach(radio => {\n radio.checked = false;\n\n if (!this.hasButtonGroup) {\n radio.setAttribute('tabindex', '-1');\n }\n });\n\n this.value = radios[index].value;\n radios[index].checked = true;\n\n if (!this.hasButtonGroup) {\n radios[index].setAttribute('tabindex', '0');\n radios[index].focus();\n } else {\n radios[index].shadowRoot!.querySelector('button')!.focus();\n }\n\n if (this.value !== oldValue) {\n this.emit('syn-change');\n this.emit('syn-input');\n }\n\n event.preventDefault();\n }\n\n private handleLabelClick() {\n this.focus();\n }\n\n private handleInvalid(event: Event) {\n this.formControlController.setValidity(false);\n this.formControlController.emitInvalidEvent(event);\n }\n\n private async syncRadioElements() {\n const radios = this.getAllRadios();\n\n await Promise.all(\n // Sync the checked state and size\n radios.map(async radio => {\n await radio.updateComplete;\n radio.checked = radio.value === this.value;\n radio.size = this.size;\n })\n );\n\n this.hasButtonGroup = radios.some(radio => radio.tagName.toLowerCase() === 'syn-radio-button');\n\n if (radios.length > 0 && !radios.some(radio => radio.checked)) {\n if (this.hasButtonGroup) {\n const buttonRadio = radios[0].shadowRoot?.querySelector('button');\n\n if (buttonRadio) {\n buttonRadio.setAttribute('tabindex', '0');\n }\n } else {\n radios[0].setAttribute('tabindex', '0');\n }\n }\n\n if (this.hasButtonGroup) {\n const buttonGroup = this.shadowRoot?.querySelector('syn-button-group');\n\n if (buttonGroup) {\n buttonGroup.disableRole = true;\n }\n }\n }\n\n private syncRadios() {\n if (customElements.get('syn-radio') && customElements.get('syn-radio-button')) {\n this.syncRadioElements();\n return;\n }\n\n if (customElements.get('syn-radio')) {\n this.syncRadioElements();\n } else {\n customElements.whenDefined('syn-radio').then(() => this.syncRadios());\n }\n\n if (customElements.get('syn-radio-button')) {\n this.syncRadioElements();\n } else {\n // Rerun this handler when <syn-radio> or <syn-radio-button> is registered\n customElements.whenDefined('syn-radio-button').then(() => this.syncRadios());\n }\n }\n\n private updateCheckedRadio() {\n const radios = this.getAllRadios();\n radios.forEach(radio => (radio.checked = radio.value === this.value));\n this.formControlController.setValidity(this.validity.valid);\n }\n\n @watch('size', { waitUntilFirstUpdate: true })\n handleSizeChange() {\n this.syncRadios();\n }\n\n @watch('value')\n handleValueChange() {\n if (this.hasUpdated) {\n this.updateCheckedRadio();\n }\n }\n\n /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */\n checkValidity() {\n const isRequiredAndEmpty = this.required && !this.value;\n const hasCustomValidityMessage = this.customValidityMessage !== '';\n\n if (isRequiredAndEmpty || hasCustomValidityMessage) {\n this.formControlController.emitInvalidEvent();\n return false;\n }\n\n return true;\n }\n\n /** Gets the associated form, if one exists. */\n getForm(): HTMLFormElement | null {\n return this.formControlController.getForm();\n }\n\n /** Checks for validity and shows the browser's validation message if the control is invalid. */\n reportValidity(): boolean {\n const isValid = this.validity.valid;\n\n this.errorMessage = this.customValidityMessage || isValid ? '' : this.validationInput.validationMessage;\n this.formControlController.setValidity(isValid);\n this.validationInput.hidden = true;\n clearTimeout(this.validationTimeout);\n\n if (!isValid) {\n // Show the browser's constraint validation message\n this.validationInput.hidden = false;\n this.validationInput.reportValidity();\n this.validationTimeout = setTimeout(() => (this.validationInput.hidden = true), 10000) as unknown as number;\n }\n\n return isValid;\n }\n\n /** Sets a custom validation message. Pass an empty string to restore validity. */\n setCustomValidity(message = '') {\n this.customValidityMessage = message;\n this.errorMessage = message;\n this.validationInput.setCustomValidity(message);\n this.formControlController.updateValidity();\n }\n\n /** Sets focus on the radio-group. */\n public focus(options?: FocusOptions) {\n const radios = this.getAllRadios();\n const checked = radios.find(radio => radio.checked);\n const firstEnabledRadio = radios.find(radio => !radio.disabled);\n const radioToFocus = checked || firstEnabledRadio;\n\n // Call focus for the checked radio\n // If no radio is checked, focus the first one that is not disabled\n if (radioToFocus) {\n radioToFocus.focus(options);\n }\n }\n\n render() {\n const hasLabelSlot = this.hasSlotController.test('label');\n const hasHelpTextSlot = this.hasSlotController.test('help-text');\n const hasLabel = this.label ? true : !!hasLabelSlot;\n const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;\n const defaultSlot = html`\n <slot @slotchange=${this.syncRadios} @click=${this.handleRadioClick} @keydown=${this.handleKeyDown}></slot>\n `;\n\n return html`\n <fieldset\n part=\"form-control\"\n class=${classMap({\n 'form-control': true,\n 'form-control--small': this.size === 'small',\n 'form-control--medium': this.size === 'medium',\n 'form-control--large': this.size === 'large',\n 'form-control--radio-group': true,\n 'form-control--has-label': hasLabel,\n 'form-control--has-help-text': hasHelpText\n })}\n role=\"radiogroup\"\n aria-labelledby=\"label\"\n aria-describedby=\"help-text\"\n aria-errormessage=\"error-message\"\n >\n <label\n part=\"form-control-label\"\n id=\"label\"\n class=\"form-control__label\"\n aria-hidden=${hasLabel ? 'false' : 'true'}\n @click=${this.handleLabelClick}\n >\n <slot name=\"label\">${this.label}</slot>\n </label>\n\n <div part=\"form-control-input\" class=\"form-control-input\">\n <div class=\"visually-hidden\">\n <div id=\"error-message\" aria-live=\"assertive\">${this.errorMessage}</div>\n <label class=\"radio-group__validation\">\n <input\n type=\"text\"\n class=\"radio-group__validation-input\"\n ?required=${this.required}\n tabindex=\"-1\"\n hidden\n @invalid=${this.handleInvalid}\n />\n </label>\n </div>\n\n ${this.hasButtonGroup\n ? html`\n <syn-button-group part=\"button-group\" exportparts=\"base:button-group__base\" role=\"presentation\">\n ${defaultSlot}\n </syn-button-group>\n `\n : defaultSlot}\n </div>\n\n <div\n part=\"form-control-help-text\"\n id=\"help-text\"\n class=\"form-control__help-text\"\n aria-hidden=${hasHelpText ? 'false' : 'true'}\n >\n <slot name=\"help-text\">${this.helpText}</slot>\n </div>\n </fieldset>\n `;\n }\n}\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,91 +0,0 @@
|
|
|
1
|
-
// src/components/checkbox/checkbox.custom.styles.ts
|
|
2
|
-
import { css } from "lit";
|
|
3
|
-
var checkbox_custom_styles_default = css`
|
|
4
|
-
.checkbox {
|
|
5
|
-
/* #1083: This adds spacing around multi-line labels */
|
|
6
|
-
padding: var(--syn-spacing-2x-small) 0;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
.checkbox--small {
|
|
10
|
-
padding: var(--syn-spacing-3x-small) 0;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
.checkbox__control {
|
|
14
|
-
border-radius: var(--syn-checkbox-border-radius);
|
|
15
|
-
|
|
16
|
-
/* #1083: This adds spacing around multi-line labels */
|
|
17
|
-
margin: 0.1em 0;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
/* Checked/indeterminate */
|
|
21
|
-
.checkbox--checked .checkbox__control,
|
|
22
|
-
.checkbox--indeterminate .checkbox__control {
|
|
23
|
-
background-color: var(--syn-interactive-emphasis-color);
|
|
24
|
-
border-color: var(--syn-interactive-emphasis-color);
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
:host([data-user-invalid]) .checkbox__control {
|
|
28
|
-
background: var(--syn-input-border-color-focus-error);
|
|
29
|
-
border-color: var(--syn-input-border-color-focus-error);
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
/**
|
|
33
|
-
* #943: When invalid, use a transparent background if not checked or indeterminate
|
|
34
|
-
*/
|
|
35
|
-
:host([data-user-invalid]:not([checked]):not([indeterminate])) .checkbox__control {
|
|
36
|
-
background: transparent;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
/** #429: Use token for opacity */
|
|
40
|
-
.checkbox--disabled {
|
|
41
|
-
opacity: var(--syn-input-disabled-opacity);
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
/**
|
|
45
|
-
* Hover
|
|
46
|
-
* Applies the hover state to the whole component
|
|
47
|
-
*/
|
|
48
|
-
.checkbox:not(.checkbox--checked):not(.checkbox--disabled):hover .checkbox__control {
|
|
49
|
-
background-color: var(--syn-input-background-color-hover);
|
|
50
|
-
border-color: var(--syn-input-border-color-hover);
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
/**
|
|
54
|
-
* Checked/indeterminate + hover
|
|
55
|
-
* Applies the hover state to the whole component
|
|
56
|
-
*/
|
|
57
|
-
.checkbox.checkbox--checked:not(.checkbox--disabled):hover .checkbox__control,
|
|
58
|
-
.checkbox.checkbox--indeterminate:not(.checkbox--disabled):hover .checkbox__control {
|
|
59
|
-
background-color: var(--syn-interactive-emphasis-color-hover);
|
|
60
|
-
border-color: var(--syn-interactive-emphasis-color-hover);
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
/*
|
|
64
|
-
* #443: Add active styles
|
|
65
|
-
* The checked and unchecked states have different active colors
|
|
66
|
-
* Note the fallback is defined to match the hover color.
|
|
67
|
-
* This is done to make sure no active state is shown at all if no active color is defined.
|
|
68
|
-
* Still better than showing one for the unchecked state but not for the checked state.
|
|
69
|
-
*/
|
|
70
|
-
.checkbox:not(.checkbox--checked):not(.checkbox--disabled):active .checkbox__control {
|
|
71
|
-
border-color: var(--syn-input-border-color-active);
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
/* Checked/indeterminate */
|
|
75
|
-
.checkbox.checkbox--checked:not(.checkbox--disabled):active .checkbox__control,
|
|
76
|
-
.checkbox.checkbox--indeterminate:not(.checkbox--disabled):active .checkbox__control {
|
|
77
|
-
background: var(--syn-interactive-emphasis-color-active);
|
|
78
|
-
border-color: var(--syn-interactive-emphasis-color-active);
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
.checkbox__label {
|
|
82
|
-
align-self: center;
|
|
83
|
-
line-height: var(--syn-line-height-normal);
|
|
84
|
-
margin-inline-start: var(--syn-spacing-x-small);
|
|
85
|
-
}
|
|
86
|
-
`;
|
|
87
|
-
|
|
88
|
-
export {
|
|
89
|
-
checkbox_custom_styles_default
|
|
90
|
-
};
|
|
91
|
-
//# sourceMappingURL=chunk.IZRTF5EM.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/components/checkbox/checkbox.custom.styles.ts"],
|
|
4
|
-
"sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n .checkbox {\n /* #1083: This adds spacing around multi-line labels */\n padding: var(--syn-spacing-2x-small) 0;\n }\n\n .checkbox--small {\n padding: var(--syn-spacing-3x-small) 0;\n }\n\n .checkbox__control {\n border-radius: var(--syn-checkbox-border-radius);\n\n /* #1083: This adds spacing around multi-line labels */\n margin: 0.1em 0;\n }\n\n /* Checked/indeterminate */\n .checkbox--checked .checkbox__control,\n .checkbox--indeterminate .checkbox__control {\n background-color: var(--syn-interactive-emphasis-color);\n border-color: var(--syn-interactive-emphasis-color);\n }\n\n :host([data-user-invalid]) .checkbox__control {\n background: var(--syn-input-border-color-focus-error);\n border-color: var(--syn-input-border-color-focus-error);\n }\n\n /**\n * #943: When invalid, use a transparent background if not checked or indeterminate\n */\n :host([data-user-invalid]:not([checked]):not([indeterminate])) .checkbox__control {\n background: transparent;\n }\n\n /** #429: Use token for opacity */\n .checkbox--disabled {\n opacity: var(--syn-input-disabled-opacity);\n }\n\n /**\n * Hover\n * Applies the hover state to the whole component\n */\n .checkbox:not(.checkbox--checked):not(.checkbox--disabled):hover .checkbox__control {\n background-color: var(--syn-input-background-color-hover);\n border-color: var(--syn-input-border-color-hover);\n }\n\n /**\n * Checked/indeterminate + hover\n * Applies the hover state to the whole component\n */\n .checkbox.checkbox--checked:not(.checkbox--disabled):hover .checkbox__control,\n .checkbox.checkbox--indeterminate:not(.checkbox--disabled):hover .checkbox__control {\n background-color: var(--syn-interactive-emphasis-color-hover);\n border-color: var(--syn-interactive-emphasis-color-hover);\n }\n\n /*\n * #443: Add active styles\n * The checked and unchecked states have different active colors\n * Note the fallback is defined to match the hover color.\n * This is done to make sure no active state is shown at all if no active color is defined.\n * Still better than showing one for the unchecked state but not for the checked state.\n */\n .checkbox:not(.checkbox--checked):not(.checkbox--disabled):active .checkbox__control {\n border-color: var(--syn-input-border-color-active);\n }\n\n /* Checked/indeterminate */\n .checkbox.checkbox--checked:not(.checkbox--disabled):active .checkbox__control,\n .checkbox.checkbox--indeterminate:not(.checkbox--disabled):active .checkbox__control {\n background: var(--syn-interactive-emphasis-color-active);\n border-color: var(--syn-interactive-emphasis-color-active);\n }\n\n .checkbox__label {\n align-self: center;\n line-height: var(--syn-line-height-normal);\n margin-inline-start: var(--syn-spacing-x-small);\n }\n`;\n"],
|
|
5
|
-
"mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,iCAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/components/textarea/textarea.styles.ts"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable */\nimport { css } from 'lit';\n\nexport default css`\n\t/* stylelint-disable */\n :host {\n display: block;\n }\n\n .textarea {\n display: grid;\n align-items: center;\n position: relative;\n width: 100%;\n font-family: var(--syn-input-font-family);\n font-weight: var(--syn-input-font-weight);\n line-height: var(--syn-line-height-normal);\n letter-spacing: var(--syn-input-letter-spacing);\n vertical-align: middle;\n transition:\n var(--syn-transition-fast) color,\n var(--syn-transition-fast) border,\n var(--syn-transition-fast) box-shadow,\n var(--syn-transition-fast) background-color;\n cursor: text;\n }\n\n /* Standard textareas */\n .textarea--standard {\n background-color: var(--syn-input-background-color);\n border: solid var(--syn-input-border-width) var(--syn-input-border-color);\n }\n\n .textarea--standard:hover:not(.textarea--disabled) {\n background-color: var(--syn-input-background-color-hover);\n border-color: var(--syn-input-border-color-hover);\n }\n .textarea--standard:hover:not(.textarea--disabled) .textarea__control {\n color: var(--syn-input-color-hover);\n }\n\n .textarea--standard.textarea--focused:not(.textarea--disabled) {\n background-color: var(--syn-input-background-color-focus);\n border-color: var(--syn-input-border-color-focus);\n color: var(--syn-input-color-focus);\n box-shadow: 0 0 0 var(--syn-focus-ring-width) var(--syn-input-focus-ring-color);\n }\n\n .textarea--standard.textarea--focused:not(.textarea--disabled) .textarea__control {\n color: var(--syn-input-color-focus);\n }\n\n .textarea--standard.textarea--disabled {\n background-color: var(--syn-input-background-color-disabled);\n border-color: var(--syn-input-border-color-disabled);\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .textarea__control,\n .textarea__size-adjuster {\n grid-area: 1 / 1 / 2 / 2;\n }\n\n .textarea__size-adjuster {\n visibility: hidden;\n pointer-events: none;\n opacity: 0;\n }\n\n .textarea--standard.textarea--disabled .textarea__control {\n color: var(--syn-input-color-disabled);\n }\n\n .textarea--standard.textarea--disabled .textarea__control::placeholder {\n color: var(--syn-input-placeholder-color-disabled);\n }\n\n /* Readonly textareas */\n .textarea--readonly {\n border: none;\n background-color: var(--syn-input-readonly-background-color);\n color: var(--syn-input-color);\n }\n\n .textarea--readonly:hover:not(.textarea--disabled) {\n background-color: var(--syn-input-readonly-background-color-hover);\n }\n\n .textarea--readonly.textarea--focused:not(.textarea--disabled) {\n background-color: var(--syn-input-readonly-background-color-focus);\n outline: var(--syn-focus-ring);\n outline-offset: var(--syn-focus-ring-offset);\n }\n\n .textarea--readonly.textarea--disabled {\n background-color: var(--syn-input-readonly-background-color-disabled);\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .textarea__control {\n font-family: inherit;\n font-size: inherit;\n font-weight: inherit;\n line-height: 1.4;\n color: var(--syn-input-color);\n border: none;\n background: none;\n box-shadow: none;\n cursor: inherit;\n -webkit-appearance: none;\n }\n\n .textarea__control::-webkit-search-decoration,\n .textarea__control::-webkit-search-cancel-button,\n .textarea__control::-webkit-search-results-button,\n .textarea__control::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n\n .textarea__control::placeholder {\n color: var(--syn-input-placeholder-color);\n user-select: none;\n -webkit-user-select: none;\n }\n\n .textarea__control:focus {\n outline: none;\n }\n\n /*\n * Size modifiers\n */\n\n .textarea--small {\n border-radius: var(--syn-input-border-radius-small);\n font-size: var(--syn-input-font-size-small);\n }\n\n .textarea--small .textarea__control {\n padding: 0.5em var(--syn-input-spacing-small);\n }\n\n .textarea--medium {\n border-radius: var(--syn-input-border-radius-medium);\n font-size: var(--syn-input-font-size-medium);\n }\n\n .textarea--medium .textarea__control {\n padding: 0.5em var(--syn-input-spacing-medium);\n }\n\n .textarea--large {\n border-radius: var(--syn-input-border-radius-large);\n font-size: var(--syn-input-font-size-large);\n }\n\n .textarea--large .textarea__control {\n padding: 0.5em var(--syn-input-spacing-large);\n }\n\n /*\n * Resize types\n */\n\n .textarea--resize-none .textarea__control {\n resize: none;\n }\n\n .textarea--resize-vertical .textarea__control {\n resize: vertical;\n }\n\n .textarea--resize-auto .textarea__control {\n height: auto;\n resize: none;\n overflow-y: hidden;\n }\n`;\n"],
|
|
5
|
-
"mappings": ";AACA,SAAS,WAAW;AAEpB,IAAO,0BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/components/radio/radio.component.ts"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable */\nimport { classMap } from 'lit/directives/class-map.js';\nimport { html } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { watch } from '../../internal/watch.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport SynIcon from '../icon/icon.component.js';\nimport styles from './radio.styles.js';\nimport customStyles from './radio.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\nimport { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.js';\n\n/**\n * @summary Radios allow the user to select a single option from a group.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-radio--docs\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon\n *\n * @slot - The radio's label.\n *\n * @event syn-blur - Emitted when the control loses focus.\n * @event syn-focus - Emitted when the control gains focus.\n *\n * @csspart base - The component's base wrapper.\n * @csspart control - The circular container that wraps the radio's checked state.\n * @csspart control--checked - The radio control when the radio is checked.\n * @csspart checked-icon - The checked icon, an `<syn-icon>` element.\n * @csspart label - The container that wraps the radio's label.\n */\n@enableDefaultSettings('SynRadio')\nexport default class SynRadio extends SynergyElement {\n static styles: CSSResultGroup = [componentStyles, styles, customStyles];\n static dependencies = { 'syn-icon': SynIcon };\n\n @state() checked = false;\n @state() protected hasFocus = false;\n\n /** The radio's value. When selected, the radio group will receive this value. */\n @property() value: string | number;\n\n /**\n * The radio's size. When used inside a radio group, the size will be determined by the radio group's size so this\n * attribute can typically be omitted.\n */\n @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n /** Disables the radio. */\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n constructor() {\n super();\n this.addEventListener('blur', this.handleBlur);\n this.addEventListener('click', this.handleClick);\n this.addEventListener('focus', this.handleFocus);\n }\n\n connectedCallback() {\n super.connectedCallback();\n this.setInitialAttributes();\n }\n\n private handleBlur = () => {\n this.hasFocus = false;\n this.emit('syn-blur');\n };\n\n private handleClick = () => {\n if (!this.disabled) {\n this.checked = true;\n }\n };\n\n private handleFocus = () => {\n this.hasFocus = true;\n this.emit('syn-focus');\n };\n\n private setInitialAttributes() {\n this.setAttribute('role', 'radio');\n this.setAttribute('tabindex', '-1');\n this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');\n }\n\n @watch('checked')\n handleCheckedChange() {\n this.setAttribute('aria-checked', this.checked ? 'true' : 'false');\n this.setAttribute('tabindex', this.checked ? '0' : '-1');\n }\n\n @watch('disabled', { waitUntilFirstUpdate: true })\n handleDisabledChange() {\n this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');\n }\n\n render() {\n return html`\n <span\n part=\"base\"\n class=${classMap({\n radio: true,\n 'radio--checked': this.checked,\n 'radio--disabled': this.disabled,\n 'radio--focused': this.hasFocus,\n 'radio--small': this.size === 'small',\n 'radio--medium': this.size === 'medium',\n 'radio--large': this.size === 'large'\n })}\n >\n <span part=\"${`control${this.checked ? ' control--checked' : ''}`}\" class=\"radio__control\">\n ${this.checked\n ? html` <syn-icon part=\"checked-icon\" class=\"radio__checked-icon\" library=\"system\" name=\"radio\"></syn-icon> `\n : ''}\n </span>\n\n <slot part=\"label\" class=\"radio__label\"></slot>\n </span>\n `;\n }\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;AACA,SAAS,gBAAgB;AACzB,SAAS,YAAY;AACrB,SAAS,UAAU,aAAa;AA8BhC,IAAqB,WAArB,cAAsC,eAAe;AAAA,EAmBnD,cAAc;AACZ,UAAM;AAhBC,mBAAU;AACV,SAAU,WAAW;AASD,gBAAqC;AAGtB,oBAAW;AAcvD,SAAQ,aAAa,MAAM;AACzB,WAAK,WAAW;AAChB,WAAK,KAAK,UAAU;AAAA,IACtB;AAEA,SAAQ,cAAc,MAAM;AAC1B,UAAI,CAAC,KAAK,UAAU;AAClB,aAAK,UAAU;AAAA,MACjB;AAAA,IACF;AAEA,SAAQ,cAAc,MAAM;AAC1B,WAAK,WAAW;AAChB,WAAK,KAAK,WAAW;AAAA,IACvB;AAxBE,SAAK,iBAAiB,QAAQ,KAAK,UAAU;AAC7C,SAAK,iBAAiB,SAAS,KAAK,WAAW;AAC/C,SAAK,iBAAiB,SAAS,KAAK,WAAW;AAAA,EACjD;AAAA,EAEA,oBAAoB;AAClB,UAAM,kBAAkB;AACxB,SAAK,qBAAqB;AAAA,EAC5B;AAAA,EAkBQ,uBAAuB;AAC7B,SAAK,aAAa,QAAQ,OAAO;AACjC,SAAK,aAAa,YAAY,IAAI;AAClC,SAAK,aAAa,iBAAiB,KAAK,WAAW,SAAS,OAAO;AAAA,EACrE;AAAA,EAGA,sBAAsB;AACpB,SAAK,aAAa,gBAAgB,KAAK,UAAU,SAAS,OAAO;AACjE,SAAK,aAAa,YAAY,KAAK,UAAU,MAAM,IAAI;AAAA,EACzD;AAAA,EAGA,uBAAuB;AACrB,SAAK,aAAa,iBAAiB,KAAK,WAAW,SAAS,OAAO;AAAA,EACrE;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA;AAAA,gBAGK,SAAS;AAAA,MACf,OAAO;AAAA,MACP,kBAAkB,KAAK;AAAA,MACvB,mBAAmB,KAAK;AAAA,MACxB,kBAAkB,KAAK;AAAA,MACvB,gBAAgB,KAAK,SAAS;AAAA,MAC9B,iBAAiB,KAAK,SAAS;AAAA,MAC/B,gBAAgB,KAAK,SAAS;AAAA,IAChC,CAAC,CAAC;AAAA;AAAA,sBAEY,UAAU,KAAK,UAAU,sBAAsB,EAAE,EAAE;AAAA,YAC7D,KAAK,UACH,8GACA,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMd;AACF;AAxFqB,SACZ,SAAyB,CAAC,0BAAiB,sBAAQ,2BAAY;AADnD,SAEZ,eAAe,EAAE,YAAY,QAAQ;AAEnC;AAAA,EAAR,MAAM;AAAA,GAJY,SAIV;AACU;AAAA,EAAlB,MAAM;AAAA,GALY,SAKA;AAGP;AAAA,EAAX,SAAS;AAAA,GARS,SAQP;AAMiB;AAAA,EAA5B,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GAdR,SAcU;AAGe;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAjBvB,SAiByB;AAqC5C;AAAA,EADC,MAAM,SAAS;AAAA,GArDG,SAsDnB;AAMA;AAAA,EADC,MAAM,YAAY,EAAE,sBAAsB,KAAK,CAAC;AAAA,GA3D9B,SA4DnB;AA5DmB,WAArB;AAAA,EADC,sBAAsB,UAAU;AAAA,GACZ;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|