@synergy-design-system/components 2.20.0 → 2.21.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.63VP3QC2.js → chunk.22K2VII3.js} +2 -2
- package/dist/chunks/{chunk.JA7VVPRB.js → chunk.24ZMDAM7.js} +3 -3
- package/dist/chunks/{chunk.2QBVB4AK.js → chunk.2HSBOERA.js} +2 -2
- package/dist/chunks/{chunk.E36EA2A5.js → chunk.2KMN54SL.js} +2 -2
- package/dist/chunks/{chunk.NK2YET6D.js → chunk.2U5B72GV.js} +2 -2
- package/dist/chunks/{chunk.NY3YYGVR.js → chunk.3Z44F32B.js} +2 -2
- package/dist/chunks/{chunk.LAM67JAY.js → chunk.444WAXYY.js} +2 -2
- package/dist/chunks/{chunk.6IUDE6QS.js → chunk.4DU55CZF.js} +2 -2
- package/dist/chunks/{chunk.PAVNUMET.js → chunk.53MU7ZSA.js} +3 -3
- package/dist/chunks/{chunk.NIS7LNOO.js → chunk.5RYJ4JRG.js} +12 -6
- package/dist/chunks/chunk.5RYJ4JRG.js.map +7 -0
- package/dist/chunks/{chunk.5VV5IENH.js → chunk.63TPU2Q4.js} +5 -5
- package/dist/chunks/{chunk.VCAVMNGP.js → chunk.6DVPRASB.js} +2 -2
- package/dist/chunks/{chunk.VCAVMNGP.js.map → chunk.6DVPRASB.js.map} +1 -1
- package/dist/chunks/{chunk.Y2PPRV2Z.js → chunk.6EJXXHTI.js} +9 -9
- package/dist/chunks/{chunk.6XXJJ2ZV.js → chunk.6LHWMYJQ.js} +2 -2
- package/dist/chunks/{chunk.OEQ54OHW.js → chunk.6ORGN4HO.js} +11 -5
- package/dist/chunks/chunk.6ORGN4HO.js.map +7 -0
- package/dist/chunks/{chunk.U5TBC2KB.js → chunk.7NWLTK5X.js} +2 -2
- package/dist/chunks/{chunk.RP4GNFAE.js → chunk.7Y2DDXJX.js} +2 -2
- package/dist/chunks/{chunk.GQM7WKPT.js → chunk.7YBKIIE7.js} +3 -3
- package/dist/chunks/{chunk.O5JCDSMK.js → chunk.A57CYHL4.js} +10 -4
- package/dist/chunks/chunk.A57CYHL4.js.map +7 -0
- package/dist/chunks/{chunk.6DDMOSWQ.js → chunk.AZ4RLLGC.js} +2 -2
- package/dist/chunks/{chunk.K7GZ5QMI.js → chunk.BOPAJNRC.js} +2 -2
- package/dist/chunks/{chunk.WS42S4IF.js → chunk.BTYY6QF4.js} +2 -2
- package/dist/chunks/{chunk.QX2UR7HH.js → chunk.BWITL5QJ.js} +2 -2
- package/dist/chunks/{chunk.YTI4FD6I.js → chunk.BXERHA7P.js} +2 -2
- package/dist/chunks/{chunk.7U5KG6IM.js → chunk.BYXIIS2U.js} +2 -2
- package/dist/chunks/{chunk.2EOIEVIL.js → chunk.C3X7IBH7.js} +2 -2
- package/dist/chunks/{chunk.UWAFXL5K.js → chunk.CUAXHO6A.js} +2 -2
- package/dist/chunks/{chunk.FTMPDQQE.js → chunk.CXPGDYKT.js} +2 -2
- package/dist/chunks/{chunk.LCZGMJAR.js → chunk.D6CRN545.js} +8 -8
- package/dist/chunks/{chunk.DGKMCOEP.js → chunk.DPJCGUEO.js} +9 -3
- package/dist/chunks/chunk.DPJCGUEO.js.map +7 -0
- package/dist/chunks/{chunk.5HYYHX6O.js → chunk.DXX5PAMY.js} +8 -2
- package/dist/chunks/chunk.DXX5PAMY.js.map +7 -0
- package/dist/chunks/{chunk.IC67TRRK.js → chunk.E47UYFGZ.js} +2 -2
- package/dist/chunks/{chunk.RDUBSHZP.js → chunk.EBFUBH7K.js} +9 -3
- package/dist/chunks/chunk.EBFUBH7K.js.map +7 -0
- package/dist/chunks/{chunk.SLXWCODG.js → chunk.EHRZTYMK.js} +2 -2
- package/dist/chunks/{chunk.XZ2OTPUE.js → chunk.F2YCO2BM.js} +2 -2
- package/dist/chunks/{chunk.6XCVIKBS.js → chunk.FXWMPXPJ.js} +2 -2
- package/dist/chunks/{chunk.XYTIQJOT.js → chunk.GE3RTZ5U.js} +2 -2
- package/dist/chunks/{chunk.LU2V7HEH.js → chunk.GONWKUS3.js} +2 -2
- package/dist/chunks/{chunk.OQE7E7O7.js → chunk.GZDFE6IM.js} +3 -3
- package/dist/chunks/{chunk.JETTTJ6N.js → chunk.H42PWZMH.js} +7 -7
- package/dist/chunks/{chunk.LY5A7C5T.js → chunk.H6NVKXE2.js} +2 -2
- package/dist/chunks/{chunk.Z4AAMNVO.js → chunk.HXCR2MHZ.js} +2 -2
- package/dist/chunks/{chunk.IIFZLC7B.js → chunk.I2CXW4IQ.js} +2 -2
- package/dist/chunks/{chunk.WJUCYEMY.js → chunk.I5POUS6I.js} +12 -6
- package/dist/chunks/{chunk.WJUCYEMY.js.map → chunk.I5POUS6I.js.map} +2 -2
- package/dist/chunks/{chunk.AYWO4ZTF.js → chunk.I652XHIG.js} +2 -2
- package/dist/chunks/{chunk.DRS6KUJI.js → chunk.I7KBGFOB.js} +2 -2
- package/dist/chunks/{chunk.CT726D3H.js → chunk.IDSWPDRF.js} +2 -2
- package/dist/chunks/{chunk.7FSW6QRP.js → chunk.IQJEP44K.js} +2 -2
- package/dist/chunks/{chunk.2IBYHTBO.js → chunk.IW64RDGB.js} +28 -9
- package/dist/chunks/chunk.IW64RDGB.js.map +7 -0
- package/dist/chunks/{chunk.FWHNNPQB.js → chunk.JDJ67Y5C.js} +9 -3
- package/dist/chunks/chunk.JDJ67Y5C.js.map +7 -0
- package/dist/chunks/chunk.JSEL4YPW.js +147 -0
- package/dist/chunks/chunk.JSEL4YPW.js.map +7 -0
- package/dist/chunks/{chunk.EQ2Y7FV7.js → chunk.JSYXPTUU.js} +10 -4
- package/dist/chunks/chunk.JSYXPTUU.js.map +7 -0
- package/dist/chunks/{chunk.NT7NV7FR.js → chunk.K75TBUMU.js} +2 -2
- package/dist/chunks/{chunk.7Z6YNI76.js → chunk.KEYRFHLR.js} +2 -2
- package/dist/chunks/{chunk.V66XL2Y2.js → chunk.KL322SB3.js} +10 -4
- package/dist/chunks/chunk.KL322SB3.js.map +7 -0
- package/dist/chunks/{chunk.WRFFXTJZ.js → chunk.KP3NASWQ.js} +2 -2
- package/dist/chunks/{chunk.2E3ZOJRL.js → chunk.KS6DNVN3.js} +2 -2
- package/dist/chunks/{chunk.7ZICOAJW.js → chunk.KYMMYTQI.js} +2 -2
- package/dist/chunks/{chunk.XXSXKUD3.js → chunk.LEW4WNVM.js} +2 -2
- package/dist/chunks/{chunk.JEQA2WEB.js → chunk.LX4NT5XO.js} +8 -2
- package/dist/chunks/chunk.LX4NT5XO.js.map +7 -0
- package/dist/chunks/{chunk.SSLNSSM4.js → chunk.M2K5UDOG.js} +2 -2
- package/dist/chunks/{chunk.OCQOKX2B.js → chunk.NAW62RFO.js} +10 -4
- package/dist/chunks/chunk.NAW62RFO.js.map +7 -0
- package/dist/chunks/{chunk.32O62HLM.js → chunk.NDHGAE3Z.js} +2 -2
- package/dist/chunks/{chunk.AJPSUGWO.js → chunk.NP2UDFN2.js} +2 -2
- package/dist/chunks/{chunk.COZMPK5M.js → chunk.NQNJWECO.js} +2 -2
- package/dist/chunks/{chunk.JC7CNIYQ.js → chunk.O7G6Z74T.js} +9 -3
- package/dist/chunks/chunk.O7G6Z74T.js.map +7 -0
- package/dist/chunks/{chunk.HZZFKI43.js → chunk.OB7QVS3V.js} +27 -22
- package/dist/chunks/chunk.OB7QVS3V.js.map +7 -0
- package/dist/chunks/{chunk.BQEV2WZL.js → chunk.OFU3ALA5.js} +8 -2
- package/dist/chunks/chunk.OFU3ALA5.js.map +7 -0
- package/dist/chunks/chunk.OLCT57R5.js +69 -0
- package/dist/chunks/chunk.OLCT57R5.js.map +7 -0
- package/dist/chunks/{chunk.W7YYZVAU.js → chunk.PSZ2KNDK.js} +2 -2
- package/dist/chunks/{chunk.YNHBOYDI.js → chunk.PTSG3HQA.js} +2 -2
- package/dist/chunks/{chunk.HC2NGMC6.js → chunk.Q24B36OM.js} +2 -2
- package/dist/chunks/{chunk.HATBOXY7.js → chunk.Q3YGVRWR.js} +2 -2
- package/dist/chunks/{chunk.PGIUXB4S.js → chunk.QN7EHOAI.js} +3 -3
- package/dist/chunks/{chunk.4YKN4LFN.js → chunk.RDEQ64F4.js} +3 -3
- package/dist/chunks/{chunk.35G32AHP.js → chunk.RF6XDVZV.js} +3 -3
- package/dist/chunks/{chunk.TKNTSPTY.js → chunk.RFCT6AM5.js} +5 -5
- package/dist/chunks/{chunk.KBVDCXR5.js → chunk.RGXEM6KV.js} +2 -2
- package/dist/chunks/{chunk.Z2DBY4DB.js → chunk.RIFZ4L34.js} +2 -2
- package/dist/chunks/{chunk.NIRC7MWB.js → chunk.ROKFIACN.js} +2 -2
- package/dist/chunks/chunk.RSCUHBW3.js +1 -0
- package/dist/chunks/chunk.RSCUHBW3.js.map +7 -0
- package/dist/chunks/{chunk.PRHLRJO4.js → chunk.SVGDQKLQ.js} +2 -2
- package/dist/chunks/{chunk.67HUHWCS.js → chunk.T7JHOPPW.js} +9 -3
- package/dist/chunks/{chunk.67HUHWCS.js.map → chunk.T7JHOPPW.js.map} +2 -2
- package/dist/chunks/{chunk.YJZO356D.js → chunk.TLNSCBQV.js} +2 -2
- package/dist/chunks/{chunk.LVJHLQNE.js → chunk.U47G7VR6.js} +8 -2
- package/dist/chunks/chunk.U47G7VR6.js.map +7 -0
- package/dist/chunks/{chunk.BAZYPBAX.js → chunk.U5ZUODJC.js} +11 -5
- package/dist/chunks/chunk.U5ZUODJC.js.map +7 -0
- package/dist/chunks/chunk.UPDPVGHT.js +59 -0
- package/dist/chunks/chunk.UPDPVGHT.js.map +7 -0
- package/dist/chunks/{chunk.KTYGJOB7.js → chunk.VRRTNN4P.js} +2 -2
- package/dist/chunks/{chunk.7V6QWLDJ.js → chunk.WMFEZGKC.js} +2 -2
- package/dist/chunks/{chunk.X3BO2BOQ.js → chunk.WUNEA5ON.js} +2 -2
- package/dist/chunks/{chunk.2BXFJQKK.js → chunk.WZ435WQP.js} +2 -2
- package/dist/chunks/{chunk.C2R6PG7G.js → chunk.XCEWNJDB.js} +2 -2
- package/dist/chunks/{chunk.IYU6UKJA.js → chunk.XIXB3JTC.js} +8 -2
- package/dist/chunks/chunk.XIXB3JTC.js.map +7 -0
- package/dist/chunks/{chunk.XU3L4ULT.js → chunk.XUHVFZ3J.js} +3 -3
- package/dist/chunks/{chunk.PDBM2LXE.js → chunk.YUUSAWQ5.js} +2 -2
- package/dist/chunks/{chunk.422MCLO6.js → chunk.YYU2DJ5D.js} +3 -3
- package/dist/chunks/{chunk.7WYVXV4D.js → chunk.Z22WOV57.js} +4 -4
- package/dist/chunks/{chunk.EIXX5VVK.js → chunk.ZR3W2TCY.js} +2 -2
- package/dist/chunks/{chunk.IKU5BGLU.js → chunk.ZTOAA6FB.js} +3 -3
- package/dist/components/accordion/accordion.component.js +5 -2
- package/dist/components/accordion/accordion.js +6 -3
- package/dist/components/alert/alert.component.js +9 -6
- package/dist/components/alert/alert.js +10 -7
- package/dist/components/badge/badge.component.js +5 -2
- package/dist/components/badge/badge.js +6 -3
- package/dist/components/breadcrumb/breadcrumb.component.js +5 -5
- package/dist/components/breadcrumb/breadcrumb.js +6 -6
- package/dist/components/breadcrumb-item/breadcrumb-item.component.js +2 -2
- package/dist/components/breadcrumb-item/breadcrumb-item.js +3 -3
- package/dist/components/button/button.component.js +9 -6
- package/dist/components/button/button.js +10 -7
- package/dist/components/button-group/button-group.component.js +2 -2
- package/dist/components/button-group/button-group.js +3 -3
- package/dist/components/card/card.component.js +2 -2
- package/dist/components/card/card.js +3 -3
- package/dist/components/checkbox/checkbox.component.js +8 -5
- package/dist/components/checkbox/checkbox.js +9 -6
- package/dist/components/combobox/combobox.component.js +10 -7
- package/dist/components/combobox/combobox.js +11 -8
- package/dist/components/details/details.component.js +8 -5
- package/dist/components/details/details.js +9 -6
- package/dist/components/dialog/dialog.component.js +9 -6
- package/dist/components/dialog/dialog.js +10 -7
- package/dist/components/divider/divider.component.js +2 -2
- package/dist/components/divider/divider.js +3 -3
- package/dist/components/drawer/drawer.component.js +9 -6
- package/dist/components/drawer/drawer.js +10 -7
- package/dist/components/dropdown/dropdown.component.js +3 -3
- package/dist/components/dropdown/dropdown.js +4 -4
- package/dist/components/file/file.component.js +10 -7
- package/dist/components/file/file.js +11 -8
- package/dist/components/header/header.component.js +6 -6
- package/dist/components/header/header.js +7 -7
- package/dist/components/icon/icon.component.js +4 -4
- package/dist/components/icon/icon.js +5 -5
- package/dist/components/icon-button/icon-button.component.js +8 -5
- package/dist/components/icon-button/icon-button.js +9 -6
- package/dist/components/input/input.component.js +9 -6
- package/dist/components/input/input.js +10 -7
- package/dist/components/menu/menu.component.js +2 -2
- package/dist/components/menu/menu.js +3 -3
- package/dist/components/menu-item/menu-item.component.js +8 -8
- package/dist/components/menu-item/menu-item.js +9 -9
- package/dist/components/menu-label/menu-label.component.js +3 -3
- package/dist/components/menu-label/menu-label.js +4 -4
- package/dist/components/nav-item/nav-item.component.js +3 -3
- package/dist/components/nav-item/nav-item.js +4 -4
- package/dist/components/optgroup/optgroup.component.js +3 -3
- package/dist/components/optgroup/optgroup.js +4 -4
- package/dist/components/option/option.component.js +5 -5
- package/dist/components/option/option.js +6 -6
- package/dist/components/popup/popup.component.js +2 -2
- package/dist/components/popup/popup.js +3 -3
- package/dist/components/prio-nav/prio-nav.component.js +11 -11
- package/dist/components/prio-nav/prio-nav.js +12 -12
- package/dist/components/progress-bar/progress-bar.component.js +2 -2
- package/dist/components/progress-bar/progress-bar.js +3 -3
- 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.js +8 -5
- package/dist/components/radio/radio.js +9 -6
- package/dist/components/radio-button/radio-button.component.js +5 -2
- package/dist/components/radio-button/radio-button.js +6 -3
- package/dist/components/radio-group/radio-group.component.js +7 -4
- package/dist/components/radio-group/radio-group.js +8 -5
- package/dist/components/range/range.component.js +8 -5
- package/dist/components/range/range.js +9 -6
- package/dist/components/range-tick/range-tick.component.js +2 -2
- package/dist/components/range-tick/range-tick.js +3 -3
- package/dist/components/resize-observer/resize-observer.component.js +2 -2
- package/dist/components/select/select.component.js +11 -8
- package/dist/components/select/select.js +12 -9
- package/dist/components/side-nav/side-nav.component.js +11 -8
- package/dist/components/side-nav/side-nav.js +12 -9
- package/dist/components/spinner/spinner.component.js +2 -2
- package/dist/components/spinner/spinner.js +3 -3
- package/dist/components/switch/switch.component.js +5 -2
- package/dist/components/switch/switch.js +6 -3
- package/dist/components/tab/tab.component.js +9 -6
- package/dist/components/tab/tab.js +10 -7
- package/dist/components/tab-group/tab-group.component.js +10 -7
- package/dist/components/tab-group/tab-group.js +11 -8
- package/dist/components/tab-panel/tab-panel.component.js +2 -2
- package/dist/components/tab-panel/tab-panel.js +3 -3
- package/dist/components/tag/tag.component.js +9 -6
- package/dist/components/tag/tag.js +10 -7
- package/dist/components/textarea/textarea.component.js +5 -2
- package/dist/components/textarea/textarea.js +6 -3
- package/dist/components/tooltip/tooltip.component.js +3 -3
- package/dist/components/tooltip/tooltip.js +4 -4
- package/dist/components/validate/utility.js +2 -2
- package/dist/components/validate/validate.component.js +11 -8
- package/dist/components/validate/validate.js +12 -9
- package/dist/custom-elements.json +1 -1
- package/dist/events/events.d.ts +1 -0
- package/dist/events/syn-default-settings-changed.d.ts +16 -0
- package/dist/styles/index.css +1 -1
- package/dist/synergy.d.ts +1 -0
- package/dist/synergy.js +142 -126
- package/dist/utilities/defaultSettings/base.d.ts +87 -0
- package/dist/utilities/defaultSettings/base.js +10 -0
- package/dist/utilities/defaultSettings/base.js.map +7 -0
- package/dist/utilities/defaultSettings/decorator.d.ts +12 -0
- package/dist/utilities/defaultSettings/decorator.js +10 -0
- package/dist/utilities/defaultSettings/decorator.js.map +7 -0
- package/dist/utilities/defaultSettings/functions.d.ts +41 -0
- package/dist/utilities/defaultSettings/functions.js +21 -0
- package/dist/utilities/defaultSettings/functions.js.map +7 -0
- package/dist/utilities/defaultSettings/index.d.ts +3 -0
- package/dist/utilities/defaultSettings/index.js +20 -0
- package/dist/utilities/defaultSettings/index.js.map +7 -0
- package/package.json +3 -3
- package/dist/chunks/chunk.2IBYHTBO.js.map +0 -7
- package/dist/chunks/chunk.5HYYHX6O.js.map +0 -7
- package/dist/chunks/chunk.BAZYPBAX.js.map +0 -7
- package/dist/chunks/chunk.BQEV2WZL.js.map +0 -7
- package/dist/chunks/chunk.DGKMCOEP.js.map +0 -7
- package/dist/chunks/chunk.EQ2Y7FV7.js.map +0 -7
- package/dist/chunks/chunk.FWHNNPQB.js.map +0 -7
- package/dist/chunks/chunk.HZZFKI43.js.map +0 -7
- package/dist/chunks/chunk.IYU6UKJA.js.map +0 -7
- package/dist/chunks/chunk.JC7CNIYQ.js.map +0 -7
- package/dist/chunks/chunk.JEQA2WEB.js.map +0 -7
- package/dist/chunks/chunk.LVJHLQNE.js.map +0 -7
- package/dist/chunks/chunk.NIS7LNOO.js.map +0 -7
- package/dist/chunks/chunk.O5JCDSMK.js.map +0 -7
- package/dist/chunks/chunk.OCQOKX2B.js.map +0 -7
- package/dist/chunks/chunk.OEQ54OHW.js.map +0 -7
- package/dist/chunks/chunk.RDUBSHZP.js.map +0 -7
- package/dist/chunks/chunk.V66XL2Y2.js.map +0 -7
- /package/dist/chunks/{chunk.63VP3QC2.js.map → chunk.22K2VII3.js.map} +0 -0
- /package/dist/chunks/{chunk.JA7VVPRB.js.map → chunk.24ZMDAM7.js.map} +0 -0
- /package/dist/chunks/{chunk.2QBVB4AK.js.map → chunk.2HSBOERA.js.map} +0 -0
- /package/dist/chunks/{chunk.E36EA2A5.js.map → chunk.2KMN54SL.js.map} +0 -0
- /package/dist/chunks/{chunk.NK2YET6D.js.map → chunk.2U5B72GV.js.map} +0 -0
- /package/dist/chunks/{chunk.NY3YYGVR.js.map → chunk.3Z44F32B.js.map} +0 -0
- /package/dist/chunks/{chunk.LAM67JAY.js.map → chunk.444WAXYY.js.map} +0 -0
- /package/dist/chunks/{chunk.6IUDE6QS.js.map → chunk.4DU55CZF.js.map} +0 -0
- /package/dist/chunks/{chunk.PAVNUMET.js.map → chunk.53MU7ZSA.js.map} +0 -0
- /package/dist/chunks/{chunk.5VV5IENH.js.map → chunk.63TPU2Q4.js.map} +0 -0
- /package/dist/chunks/{chunk.Y2PPRV2Z.js.map → chunk.6EJXXHTI.js.map} +0 -0
- /package/dist/chunks/{chunk.6XXJJ2ZV.js.map → chunk.6LHWMYJQ.js.map} +0 -0
- /package/dist/chunks/{chunk.U5TBC2KB.js.map → chunk.7NWLTK5X.js.map} +0 -0
- /package/dist/chunks/{chunk.RP4GNFAE.js.map → chunk.7Y2DDXJX.js.map} +0 -0
- /package/dist/chunks/{chunk.GQM7WKPT.js.map → chunk.7YBKIIE7.js.map} +0 -0
- /package/dist/chunks/{chunk.6DDMOSWQ.js.map → chunk.AZ4RLLGC.js.map} +0 -0
- /package/dist/chunks/{chunk.K7GZ5QMI.js.map → chunk.BOPAJNRC.js.map} +0 -0
- /package/dist/chunks/{chunk.WS42S4IF.js.map → chunk.BTYY6QF4.js.map} +0 -0
- /package/dist/chunks/{chunk.QX2UR7HH.js.map → chunk.BWITL5QJ.js.map} +0 -0
- /package/dist/chunks/{chunk.YTI4FD6I.js.map → chunk.BXERHA7P.js.map} +0 -0
- /package/dist/chunks/{chunk.7U5KG6IM.js.map → chunk.BYXIIS2U.js.map} +0 -0
- /package/dist/chunks/{chunk.2EOIEVIL.js.map → chunk.C3X7IBH7.js.map} +0 -0
- /package/dist/chunks/{chunk.UWAFXL5K.js.map → chunk.CUAXHO6A.js.map} +0 -0
- /package/dist/chunks/{chunk.FTMPDQQE.js.map → chunk.CXPGDYKT.js.map} +0 -0
- /package/dist/chunks/{chunk.LCZGMJAR.js.map → chunk.D6CRN545.js.map} +0 -0
- /package/dist/chunks/{chunk.IC67TRRK.js.map → chunk.E47UYFGZ.js.map} +0 -0
- /package/dist/chunks/{chunk.SLXWCODG.js.map → chunk.EHRZTYMK.js.map} +0 -0
- /package/dist/chunks/{chunk.XZ2OTPUE.js.map → chunk.F2YCO2BM.js.map} +0 -0
- /package/dist/chunks/{chunk.6XCVIKBS.js.map → chunk.FXWMPXPJ.js.map} +0 -0
- /package/dist/chunks/{chunk.XYTIQJOT.js.map → chunk.GE3RTZ5U.js.map} +0 -0
- /package/dist/chunks/{chunk.LU2V7HEH.js.map → chunk.GONWKUS3.js.map} +0 -0
- /package/dist/chunks/{chunk.OQE7E7O7.js.map → chunk.GZDFE6IM.js.map} +0 -0
- /package/dist/chunks/{chunk.JETTTJ6N.js.map → chunk.H42PWZMH.js.map} +0 -0
- /package/dist/chunks/{chunk.LY5A7C5T.js.map → chunk.H6NVKXE2.js.map} +0 -0
- /package/dist/chunks/{chunk.Z4AAMNVO.js.map → chunk.HXCR2MHZ.js.map} +0 -0
- /package/dist/chunks/{chunk.IIFZLC7B.js.map → chunk.I2CXW4IQ.js.map} +0 -0
- /package/dist/chunks/{chunk.AYWO4ZTF.js.map → chunk.I652XHIG.js.map} +0 -0
- /package/dist/chunks/{chunk.DRS6KUJI.js.map → chunk.I7KBGFOB.js.map} +0 -0
- /package/dist/chunks/{chunk.CT726D3H.js.map → chunk.IDSWPDRF.js.map} +0 -0
- /package/dist/chunks/{chunk.7FSW6QRP.js.map → chunk.IQJEP44K.js.map} +0 -0
- /package/dist/chunks/{chunk.NT7NV7FR.js.map → chunk.K75TBUMU.js.map} +0 -0
- /package/dist/chunks/{chunk.7Z6YNI76.js.map → chunk.KEYRFHLR.js.map} +0 -0
- /package/dist/chunks/{chunk.WRFFXTJZ.js.map → chunk.KP3NASWQ.js.map} +0 -0
- /package/dist/chunks/{chunk.2E3ZOJRL.js.map → chunk.KS6DNVN3.js.map} +0 -0
- /package/dist/chunks/{chunk.7ZICOAJW.js.map → chunk.KYMMYTQI.js.map} +0 -0
- /package/dist/chunks/{chunk.XXSXKUD3.js.map → chunk.LEW4WNVM.js.map} +0 -0
- /package/dist/chunks/{chunk.SSLNSSM4.js.map → chunk.M2K5UDOG.js.map} +0 -0
- /package/dist/chunks/{chunk.32O62HLM.js.map → chunk.NDHGAE3Z.js.map} +0 -0
- /package/dist/chunks/{chunk.AJPSUGWO.js.map → chunk.NP2UDFN2.js.map} +0 -0
- /package/dist/chunks/{chunk.COZMPK5M.js.map → chunk.NQNJWECO.js.map} +0 -0
- /package/dist/chunks/{chunk.W7YYZVAU.js.map → chunk.PSZ2KNDK.js.map} +0 -0
- /package/dist/chunks/{chunk.YNHBOYDI.js.map → chunk.PTSG3HQA.js.map} +0 -0
- /package/dist/chunks/{chunk.HC2NGMC6.js.map → chunk.Q24B36OM.js.map} +0 -0
- /package/dist/chunks/{chunk.HATBOXY7.js.map → chunk.Q3YGVRWR.js.map} +0 -0
- /package/dist/chunks/{chunk.PGIUXB4S.js.map → chunk.QN7EHOAI.js.map} +0 -0
- /package/dist/chunks/{chunk.4YKN4LFN.js.map → chunk.RDEQ64F4.js.map} +0 -0
- /package/dist/chunks/{chunk.35G32AHP.js.map → chunk.RF6XDVZV.js.map} +0 -0
- /package/dist/chunks/{chunk.TKNTSPTY.js.map → chunk.RFCT6AM5.js.map} +0 -0
- /package/dist/chunks/{chunk.KBVDCXR5.js.map → chunk.RGXEM6KV.js.map} +0 -0
- /package/dist/chunks/{chunk.Z2DBY4DB.js.map → chunk.RIFZ4L34.js.map} +0 -0
- /package/dist/chunks/{chunk.NIRC7MWB.js.map → chunk.ROKFIACN.js.map} +0 -0
- /package/dist/chunks/{chunk.PRHLRJO4.js.map → chunk.SVGDQKLQ.js.map} +0 -0
- /package/dist/chunks/{chunk.YJZO356D.js.map → chunk.TLNSCBQV.js.map} +0 -0
- /package/dist/chunks/{chunk.KTYGJOB7.js.map → chunk.VRRTNN4P.js.map} +0 -0
- /package/dist/chunks/{chunk.7V6QWLDJ.js.map → chunk.WMFEZGKC.js.map} +0 -0
- /package/dist/chunks/{chunk.X3BO2BOQ.js.map → chunk.WUNEA5ON.js.map} +0 -0
- /package/dist/chunks/{chunk.2BXFJQKK.js.map → chunk.WZ435WQP.js.map} +0 -0
- /package/dist/chunks/{chunk.C2R6PG7G.js.map → chunk.XCEWNJDB.js.map} +0 -0
- /package/dist/chunks/{chunk.XU3L4ULT.js.map → chunk.XUHVFZ3J.js.map} +0 -0
- /package/dist/chunks/{chunk.PDBM2LXE.js.map → chunk.YUUSAWQ5.js.map} +0 -0
- /package/dist/chunks/{chunk.422MCLO6.js.map → chunk.YYU2DJ5D.js.map} +0 -0
- /package/dist/chunks/{chunk.7WYVXV4D.js.map → chunk.Z22WOV57.js.map} +0 -0
- /package/dist/chunks/{chunk.EIXX5VVK.js.map → chunk.ZR3W2TCY.js.map} +0 -0
- /package/dist/chunks/{chunk.IKU5BGLU.js.map → chunk.ZTOAA6FB.js.map} +0 -0
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import "../../chunks/chunk.RSCUHBW3.js";
|
|
2
|
+
import {
|
|
3
|
+
enableDefaultSettings
|
|
4
|
+
} from "../../chunks/chunk.OLCT57R5.js";
|
|
5
|
+
import {
|
|
6
|
+
enableExperimentalSettingEmitEvents,
|
|
7
|
+
resetGlobalDefaultSettings,
|
|
8
|
+
setDefaultSettingsForElement,
|
|
9
|
+
setGlobalDefaultSettings
|
|
10
|
+
} from "../../chunks/chunk.JSEL4YPW.js";
|
|
11
|
+
import "../../chunks/chunk.UPDPVGHT.js";
|
|
12
|
+
import "../../chunks/chunk.2GFK6XTO.js";
|
|
13
|
+
export {
|
|
14
|
+
enableDefaultSettings,
|
|
15
|
+
enableExperimentalSettingEmitEvents,
|
|
16
|
+
resetGlobalDefaultSettings,
|
|
17
|
+
setDefaultSettingsForElement,
|
|
18
|
+
setGlobalDefaultSettings
|
|
19
|
+
};
|
|
20
|
+
//# sourceMappingURL=index.js.map
|
package/package.json
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"url": "https://www.sick.com"
|
|
5
5
|
},
|
|
6
6
|
"name": "@synergy-design-system/components",
|
|
7
|
-
"version": "2.
|
|
7
|
+
"version": "2.21.0",
|
|
8
8
|
"description": "",
|
|
9
9
|
"repository": {
|
|
10
10
|
"type": "git",
|
|
@@ -97,8 +97,8 @@
|
|
|
97
97
|
"user-agent-data-types": "^0.4.2",
|
|
98
98
|
"vendorism": "^5.0.0",
|
|
99
99
|
"@synergy-design-system/eslint-config-syn": "0.1.0",
|
|
100
|
-
"@synergy-design-system/
|
|
101
|
-
"@synergy-design-system/
|
|
100
|
+
"@synergy-design-system/tokens": "2.18.0",
|
|
101
|
+
"@synergy-design-system/stylelint-config-syn": "0.1.0"
|
|
102
102
|
},
|
|
103
103
|
"release": {
|
|
104
104
|
"branches": [
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/internal/scrollend-polyfill.ts", "../../src/components/tab-group/tab-group.component.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\ntype GenericCallback = (this: unknown, ...args: unknown[]) => unknown;\n\ntype MethodOf<T, K extends keyof T> = T[K] extends GenericCallback ? T[K] : never;\n\nconst debounce = <T extends GenericCallback>(fn: T, delay: number) => {\n let timerId = 0;\n\n return function (this: unknown, ...args: unknown[]) {\n window.clearTimeout(timerId);\n timerId = window.setTimeout(() => {\n fn.call(this, ...args);\n }, delay);\n };\n};\n\nconst decorate = <T, M extends keyof T>(\n proto: T,\n method: M,\n decorateFn: (this: unknown, superFn: T[M], ...args: unknown[]) => unknown\n) => {\n const superFn = proto[method] as MethodOf<T, M>;\n\n proto[method] = function (this: unknown, ...args: unknown[]) {\n superFn.call(this, ...args);\n decorateFn.call(this, superFn, ...args);\n } as MethodOf<T, M>;\n};\n\n(() => {\n // SSR environments should not apply the polyfill\n if (typeof window === 'undefined') {\n return;\n }\n\n const isSupported = 'onscrollend' in window;\n\n if (!isSupported) {\n const pointers = new Set();\n const scrollHandlers = new WeakMap<EventTarget, EventListenerOrEventListenerObject>();\n\n const handlePointerDown = (event: TouchEvent) => {\n for (const touch of event.changedTouches) {\n pointers.add(touch.identifier);\n }\n };\n\n const handlePointerUp = (event: TouchEvent) => {\n for (const touch of event.changedTouches) {\n pointers.delete(touch.identifier);\n }\n };\n\n document.addEventListener('touchstart', handlePointerDown, true);\n document.addEventListener('touchend', handlePointerUp, true);\n document.addEventListener('touchcancel', handlePointerUp, true);\n\n decorate(EventTarget.prototype, 'addEventListener', function (this: EventTarget, addEventListener, type) {\n if (type !== 'scrollend') return;\n\n const handleScrollEnd = debounce(() => {\n if (!pointers.size) {\n // If no pointer is active in the scroll area then the scroll has ended\n this.dispatchEvent(new Event('scrollend'));\n } else {\n // otherwise let's wait a bit more\n handleScrollEnd();\n }\n }, 100);\n\n addEventListener.call(this, 'scroll', handleScrollEnd, { passive: true });\n scrollHandlers.set(this, handleScrollEnd);\n });\n\n decorate(EventTarget.prototype, 'removeEventListener', function (this: EventTarget, removeEventListener, type) {\n if (type !== 'scrollend') return;\n\n const scrollHandler = scrollHandlers.get(this);\n if (scrollHandler) {\n removeEventListener.call(this, 'scroll', scrollHandler, { passive: true } as unknown as EventListenerOptions);\n }\n });\n }\n})();\n\n// Without an import or export, TypeScript sees vars in this file as global\nexport {};\n", "/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\nimport '../../internal/scrollend-polyfill.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { eventOptions, property, query, state } from 'lit/decorators.js';\nimport { html } from 'lit';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport { scrollIntoView } from '../../internal/scroll.js';\nimport { watch } from '../../internal/watch.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport SynIconButton from '../icon-button/icon-button.component.js';\nimport SynResizeObserver from '../resize-observer/resize-observer.component.js';\nimport styles from './tab-group.styles.js';\nimport customStyles from './tab-group.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\nimport type SynTab from '../tab/tab.js';\nimport type SynTabPanel from '../tab-panel/tab-panel.js';\n\n/**\n * @summary Tab groups organize content into a container that shows one section at a time.\n * @documentation https://synergy.style/components/tab-group\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon-button\n *\n * @slot - Used for grouping tab panels in the tab group. Must be `<syn-tab-panel>` elements.\n * @slot nav - Used for grouping tabs in the tab group. Must be `<syn-tab>` elements.\n *\n * @event {{ name: String }} syn-tab-show - Emitted when a tab is shown. The payload of the event returns the \"panel\" attribute of the shown tab.\n * @event {{ name: String }} syn-tab-hide - Emitted when a tab is hidden. The payload of the event returns the \"panel\" attribute of the hidden tab.\n *\n * @csspart base - The component's base wrapper.\n * @csspart nav - The tab group's navigation container where tabs are slotted in.\n * @csspart tabs - The container that wraps the tabs.\n * @csspart active-tab-indicator - The line that highlights the currently selected tab.\n * @csspart body - The tab group's body where tab panels are slotted in.\n * @csspart scroll-button - The previous/next scroll buttons that show when tabs are scrollable, an `<syn-icon-button>`.\n * @csspart scroll-button--start - The starting scroll button.\n * @csspart scroll-button--end - The ending scroll button.\n * @csspart scroll-button__base - The scroll button's exported `base` part.\n *\n * @cssproperty --indicator-color - The color of the active tab indicator.\n * @cssproperty --indicator-width - The width of the active tab indicator.\n * @cssproperty --track-color - The color of the indicator's track (the line that separates tabs from panels).\n * @cssproperty --track-width - The width of the indicator's track (the line that separates tabs from panels).\n */\nexport default class SynTabGroup extends SynergyElement {\n static styles: CSSResultGroup = [componentStyles, styles, customStyles];\n static dependencies = { 'syn-icon-button': SynIconButton, 'syn-resize-observer': SynResizeObserver };\n\n private activeTab?: SynTab;\n private mutationObserver: MutationObserver;\n private resizeObserver: ResizeObserver;\n private tabs: SynTab[] = [];\n private focusableTabs: SynTab[] = [];\n private panels: SynTabPanel[] = [];\n private readonly localize = new LocalizeController(this);\n\n @query('.tab-group') tabGroup: HTMLElement;\n @query('.tab-group__body') body: HTMLSlotElement;\n @query('.tab-group__nav') nav: HTMLElement;\n @query('.tab-group__indicator') indicator: HTMLElement;\n\n @state() private hasScrollControls = false;\n\n @state() private shouldHideScrollStartButton = false;\n @state() private shouldHideScrollEndButton = false;\n\n /** The placement of the tabs. */\n @property() placement: 'top' | 'start' | 'end' = 'top';\n\n /**\n * When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to\n * manual, the tab will receive focus but will not show until the user presses spacebar or enter.\n */\n @property() activation: 'auto' | 'manual' = 'auto';\n\n /** Disables the scroll arrows that appear when tabs overflow. */\n @property({ attribute: 'no-scroll-controls', type: Boolean }) noScrollControls = false;\n\n /** Draws the tab group as a contained element. */\n @property({ type: Boolean }) contained = false;\n \n /** Draws the tab group with edges instead of roundings. Takes only effect if used with the 'contained' property */\n @property({ type: Boolean }) sharp = false;\n\n /** Prevent scroll buttons from being hidden when inactive. */\n @property({ attribute: 'fixed-scroll-controls', type: Boolean }) fixedScrollControls = false;\n\n connectedCallback() {\n const whenAllDefined = Promise.all([\n customElements.whenDefined('syn-tab'),\n customElements.whenDefined('syn-tab-panel')\n ]);\n\n super.connectedCallback();\n\n this.resizeObserver = new ResizeObserver(() => {\n this.repositionIndicator();\n this.updateScrollControls();\n });\n\n this.mutationObserver = new MutationObserver(mutations => {\n // Update aria labels when the DOM changes\n if (mutations.some(m => !['aria-labelledby', 'aria-controls'].includes(m.attributeName!))) {\n setTimeout(() => this.setAriaLabels());\n }\n\n // Sync tabs when disabled states change\n if (mutations.some(m => m.attributeName === 'disabled')) {\n this.syncTabsAndPanels();\n // sync tabs when active state on tab changes\n } else if (mutations.some(m => m.attributeName === 'active')) {\n const tabs = mutations\n .filter(m => m.attributeName === 'active' && (m.target as HTMLElement).tagName.toLowerCase() === 'syn-tab')\n .map(m => m.target as SynTab);\n const newActiveTab = tabs.find(tab => tab.active);\n\n if (newActiveTab) {\n this.setActiveTab(newActiveTab);\n }\n }\n });\n\n // After the first update...\n this.updateComplete.then(() => {\n this.syncTabsAndPanels();\n this.mutationObserver.observe(this, { attributes: true, childList: true, subtree: true });\n this.resizeObserver.observe(this.nav);\n\n // Wait for tabs and tab panels to be registered\n whenAllDefined.then(() => {\n // Set initial tab state when the tabs become visible\n const intersectionObserver = new IntersectionObserver((entries, observer) => {\n if (entries[0].intersectionRatio > 0) {\n this.setAriaLabels();\n this.setActiveTab(this.getActiveTab() ?? this.tabs[0], { emitEvents: false });\n observer.unobserve(entries[0].target);\n }\n });\n intersectionObserver.observe(this.tabGroup);\n });\n });\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.mutationObserver?.disconnect();\n\n if (this.nav) {\n this.resizeObserver?.unobserve(this.nav);\n }\n }\n\n private getAllTabs() {\n const slot = this.shadowRoot!.querySelector<HTMLSlotElement>('slot[name=\"nav\"]')!;\n\n return slot.assignedElements() as SynTab[];\n }\n\n private getAllPanels() {\n return [...this.body.assignedElements()].filter(el => el.tagName.toLowerCase() === 'syn-tab-panel') as [SynTabPanel];\n }\n\n private getActiveTab() {\n return this.tabs.find(el => el.active);\n }\n\n private handleClick(event: MouseEvent) {\n const target = event.target as HTMLElement;\n const tab = target.closest('syn-tab');\n const tabGroup = tab?.closest('syn-tab-group');\n\n // Ensure the target tab is in this tab group\n if (tabGroup !== this) {\n return;\n }\n\n if (tab !== null) {\n this.setActiveTab(tab, { scrollBehavior: 'smooth' });\n }\n }\n\n private handleKeyDown(event: KeyboardEvent) {\n const target = event.target as HTMLElement;\n const tab = target.closest('syn-tab');\n const tabGroup = tab?.closest('syn-tab-group');\n\n // Ensure the target tab is in this tab group\n if (tabGroup !== this) {\n return;\n }\n\n // Activate a tab\n if (['Enter', ' '].includes(event.key)) {\n if (tab !== null) {\n this.setActiveTab(tab, { scrollBehavior: 'smooth' });\n event.preventDefault();\n }\n }\n\n // Move focus left or right\n if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {\n const activeEl = this.tabs.find(t => t.matches(':focus'));\n const isRtl = this.localize.dir() === 'rtl';\n let nextTab: null | SynTab = null;\n\n if (activeEl?.tagName.toLowerCase() === 'syn-tab') {\n if (event.key === 'Home') {\n nextTab = this.focusableTabs[0];\n } else if (event.key === 'End') {\n nextTab = this.focusableTabs[this.focusableTabs.length - 1];\n } else if (\n (['top'].includes(this.placement) && event.key === (isRtl ? 'ArrowRight' : 'ArrowLeft')) ||\n (['start', 'end'].includes(this.placement) && event.key === 'ArrowUp')\n ) {\n const currentIndex = this.tabs.findIndex(el => el === activeEl);\n nextTab = this.findNextFocusableTab(currentIndex, 'backward');\n } else if (\n (['top'].includes(this.placement) && event.key === (isRtl ? 'ArrowLeft' : 'ArrowRight')) ||\n (['start', 'end'].includes(this.placement) && event.key === 'ArrowDown')\n ) {\n const currentIndex = this.tabs.findIndex(el => el === activeEl);\n nextTab = this.findNextFocusableTab(currentIndex, 'forward');\n }\n\n if (!nextTab) {\n return;\n }\n\n nextTab.tabIndex = 0;\n nextTab.focus({ preventScroll: true });\n\n if (this.activation === 'auto') {\n this.setActiveTab(nextTab, { scrollBehavior: 'smooth' });\n } else {\n this.tabs.forEach(tabEl => {\n tabEl.tabIndex = tabEl === nextTab ? 0 : -1;\n });\n }\n\n if (['top'].includes(this.placement)) {\n scrollIntoView(nextTab, this.nav, 'horizontal');\n }\n\n event.preventDefault();\n }\n }\n }\n\n private handleScrollToStart() {\n this.nav.scroll({\n left:\n this.localize.dir() === 'rtl'\n ? this.nav.scrollLeft + this.nav.clientWidth\n : this.nav.scrollLeft - this.nav.clientWidth,\n behavior: 'smooth'\n });\n }\n\n private handleScrollToEnd() {\n this.nav.scroll({\n left:\n this.localize.dir() === 'rtl'\n ? this.nav.scrollLeft - this.nav.clientWidth\n : this.nav.scrollLeft + this.nav.clientWidth,\n behavior: 'smooth'\n });\n }\n\n private setActiveTab(tab: SynTab, options?: { emitEvents?: boolean; scrollBehavior?: 'auto' | 'smooth' }) {\n options = {\n emitEvents: true,\n scrollBehavior: 'auto',\n ...options\n };\n\n if (tab !== this.activeTab && !tab.disabled) {\n const previousTab = this.activeTab;\n this.activeTab = tab;\n\n // Sync active tab and panel\n this.tabs.forEach(el => {\n el.active = el === this.activeTab;\n el.tabIndex = el === this.activeTab ? 0 : -1;\n });\n this.panels.forEach(el => (el.active = el.name === this.activeTab?.panel));\n this.syncIndicator();\n\n if (['top'].includes(this.placement)) {\n scrollIntoView(this.activeTab, this.nav, 'horizontal', options.scrollBehavior);\n }\n\n // Emit events\n if (options.emitEvents) {\n if (previousTab) {\n this.emit('syn-tab-hide', { detail: { name: previousTab.panel } });\n }\n\n this.emit('syn-tab-show', { detail: { name: this.activeTab.panel } });\n }\n }\n }\n\n private setAriaLabels() {\n // Link each tab with its corresponding panel\n this.tabs.forEach(tab => {\n const panel = this.panels.find(el => el.name === tab.panel);\n if (panel) {\n tab.setAttribute('aria-controls', panel.getAttribute('id')!);\n panel.setAttribute('aria-labelledby', tab.getAttribute('id')!);\n }\n });\n }\n\n private repositionIndicator() {\n const currentTab = this.getActiveTab();\n\n if (!currentTab) {\n return;\n }\n\n const width = currentTab.clientWidth;\n const height = currentTab.clientHeight;\n const isRtl = this.localize.dir() === 'rtl';\n\n // We can't used offsetLeft/offsetTop here due to a shadow parent issue where neither can getBoundingClientRect\n // because it provides invalid values for animating elements: https://bugs.chromium.org/p/chromium/issues/detail?id=920069\n const allTabs = this.getAllTabs();\n const precedingTabs = allTabs.slice(0, allTabs.indexOf(currentTab));\n const offset = precedingTabs.reduce(\n (previous, current) => ({\n left: previous.left + current.clientWidth,\n top: previous.top + current.clientHeight\n }),\n { left: 0, top: 0 }\n );\n\n switch (this.placement) {\n case 'top':\n this.indicator.style.width = `calc(${width}px - ${ (this.contained || this.sharp) ? '2 * var(--syn-spacing-large)' : '0px' })`;\n this.indicator.style.height = 'auto';\n this.indicator.style.translate = `calc(${isRtl ? '-' : ''}1 * (${offset.left}px + ${ (this.contained || this.sharp) ? 'var(--syn-spacing-large)' : '0px' }))`;\n break;\n\n case 'start':\n case 'end':\n this.indicator.style.width = 'auto';\n this.indicator.style.height = `calc(${height}px - ${ (this.contained || this.sharp) ? '2 * var(--syn-spacing-small)' : '0px' })`;\n this.indicator.style.translate = `0 calc(${offset.top}px + ${ (this.contained || this.sharp) ? 'var(--syn-spacing-small)' : '0px' })`;\n break;\n }\n }\n\n // This stores tabs and panels so we can refer to a cache instead of calling querySelectorAll() multiple times.\n private syncTabsAndPanels() {\n this.tabs = this.getAllTabs();\n this.focusableTabs = this.tabs.filter(el => !el.disabled);\n\n this.panels = this.getAllPanels();\n this.syncIndicator();\n\n // After updating, show or hide scroll controls as needed\n this.updateComplete.then(() => this.updateScrollControls());\n }\n\n private findNextFocusableTab(currentIndex: number, direction: 'forward' | 'backward') {\n let nextTab = null;\n const iterator = direction === 'forward' ? 1 : -1;\n let nextIndex = currentIndex + iterator;\n\n while (currentIndex < this.tabs.length) {\n nextTab = this.tabs[nextIndex] || null;\n\n if (nextTab === null) {\n // This is where wrapping happens. If we're moving forward and get to the end, then we jump to the beginning. If we're moving backward and get to the start, then we jump to the end.\n if (direction === 'forward') {\n nextTab = this.focusableTabs[0];\n } else {\n nextTab = this.focusableTabs[this.focusableTabs.length - 1];\n }\n break;\n }\n\n if (!nextTab.disabled) {\n break;\n }\n\n nextIndex += iterator;\n }\n\n return nextTab;\n }\n\n /**\n * The reality of the browser means that we can't expect the scroll position to be exactly what we want it to be, so\n * we add one pixel of wiggle room to our calculations.\n */\n private scrollOffset = 1;\n\n @eventOptions({ passive: true })\n private updateScrollButtons() {\n if (this.hasScrollControls && !this.fixedScrollControls) {\n this.shouldHideScrollStartButton = this.scrollFromStart() <= this.scrollOffset;\n this.shouldHideScrollEndButton = this.isScrolledToEnd();\n }\n }\n\n private isScrolledToEnd() {\n return this.scrollFromStart() + this.nav.clientWidth >= this.nav.scrollWidth - this.scrollOffset;\n }\n\n private scrollFromStart() {\n return this.localize.dir() === 'rtl' ? -this.nav.scrollLeft : this.nav.scrollLeft;\n }\n\n @watch('noScrollControls', { waitUntilFirstUpdate: true })\n updateScrollControls() {\n if (this.noScrollControls) {\n this.hasScrollControls = false;\n } else {\n // In most cases, we can compare scrollWidth to clientWidth to determine if scroll controls should show. However,\n // Safari appears to calculate this incorrectly when zoomed at 110%, causing the controls to toggle indefinitely.\n // Adding a single pixel to the comparison seems to resolve it.\n //\n // See https://github.com/synergy-design-system/synergy/issues/1839\n this.hasScrollControls =\n ['top'].includes(this.placement) && this.nav.scrollWidth > this.nav.clientWidth + 1;\n }\n\n this.updateScrollButtons();\n }\n\n @watch('placement', { waitUntilFirstUpdate: true })\n syncIndicator() {\n const tab = this.getActiveTab();\n\n if (tab) {\n this.indicator.style.display = 'block';\n this.repositionIndicator();\n } else {\n this.indicator.style.display = 'none';\n }\n }\n\n /** Shows the specified tab panel. */\n show(panel: string) {\n const tab = this.tabs.find(el => el.panel === panel);\n\n if (tab) {\n this.setActiveTab(tab, { scrollBehavior: 'smooth' });\n }\n }\n\n render() {\n\n return html`\n <div\n part=\"base\"\n class=${classMap({\n 'tab-group': true,\n 'tab-group--top': this.placement === 'top',\n 'tab-group--start': this.placement === 'start',\n 'tab-group--end': this.placement === 'end',\n 'tab-group--rtl': this.localize.dir() === 'rtl',\n 'tab-group--has-scroll-controls': this.hasScrollControls,\n 'tab-group--contained': this.contained,\n 'tab-group--sharp': this.sharp,\n })}\n @click=${this.handleClick}\n @keydown=${this.handleKeyDown}\n >\n <div class=\"tab-group__nav-container\" part=\"nav\">\n ${this.hasScrollControls\n ? html`\n <syn-icon-button\n part=\"scroll-button scroll-button--start\"\n exportparts=\"base:scroll-button__base\"\n class=${classMap({\n 'tab-group__scroll-button': true,\n 'tab-group__scroll-button--start': true,\n 'tab-group__scroll-button--start--hidden': this.shouldHideScrollStartButton\n })}\n name=\"chevron-right\"\n library=\"system\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n label=${this.localize.term('scrollToStart')}\n @click=${this.handleScrollToStart}\n ></syn-icon-button>\n `\n : ''}\n\n <div class=\"tab-group__nav\" @scrollend=${this.updateScrollButtons}>\n <div part=\"tabs\" class=\"tab-group__tabs\" role=\"tablist\">\n <div part=\"active-tab-indicator\" class=\"tab-group__indicator\"></div>\n <syn-resize-observer @syn-resize=${this.syncIndicator}>\n <slot name=\"nav\" @slotchange=${this.syncTabsAndPanels}></slot>\n </syn-resize-observer>\n </div>\n </div>\n\n ${this.hasScrollControls\n ? html`\n <syn-icon-button\n part=\"scroll-button scroll-button--end\"\n exportparts=\"base:scroll-button__base\"\n class=${classMap({\n 'tab-group__scroll-button': true,\n 'tab-group__scroll-button--end': true,\n 'tab-group__scroll-button--end--hidden': this.shouldHideScrollEndButton\n })}\n name=\"chevron-right\"\n library=\"system\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n label=${this.localize.term('scrollToEnd')}\n @click=${this.handleScrollToEnd}\n ></syn-icon-button>\n `\n : ''}\n </div>\n\n <slot part=\"body\" class=\"tab-group__body\" @slotchange=${this.syncTabsAndPanels}></slot>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'syn-tab-group': SynTabGroup;\n }\n}\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/components/accordion/accordion.component.ts"],
|
|
4
|
-
"sourcesContent": ["import { html } from 'lit';\nimport { property, queryAssignedElements } from 'lit/decorators.js';\nimport type { CSSResultGroup } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport { watch } from '../../internal/watch.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport styles from './accordion.styles.js';\nimport type SynDetails from '../details/details.component.js';\n\n/**\n * @summary Accordions provide the ability to group a list of `<syn-details>`.\n *\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-accordion--docs\n * @status stable\n * @since 1.23.0\n *\n * @slot - The accordion's main content. Must be `<syn-details />` elements.\n *\n * @csspart base - The component's base wrapper.\n */\nexport default class SynAccordion extends SynergyElement {\n static styles: CSSResultGroup = [\n componentStyles,\n styles,\n ];\n\n @queryAssignedElements({ selector: 'syn-details' }) detailsInDefaultSlot!: SynDetails[];\n\n /**\n * Indicates whether or not multiple `<syn-detail>` elements can be open at the same time.\n */\n @property({ attribute: 'close-others', type: Boolean }) closeOthers = false;\n\n /** Draws the accordion and the slotted `<syn-details>` as contained elements. */\n @property({ reflect: true, type: Boolean }) contained = false;\n\n /** The size that should be applied to all slotted `<syn-details>` elements */\n @property({ reflect: true }) size: 'medium' | 'large' = 'medium';\n\n private adjustDetailsSize() {\n this.detailsInDefaultSlot.forEach(detail => {\n detail.setAttribute('size', this.size);\n });\n }\n\n private adjustDetailsContained() {\n this.detailsInDefaultSlot.forEach(detail => {\n // eslint-disable-next-line no-param-reassign\n detail.contained = this.contained;\n });\n }\n\n @watch('size', { waitUntilFirstUpdate: true })\n handleSizeChange() {\n this.adjustDetailsSize();\n }\n\n @watch('contained', { waitUntilFirstUpdate: true })\n handleContainedChange() {\n this.adjustDetailsContained();\n }\n\n connectedCallback() {\n super.connectedCallback();\n this.addEventListener('syn-show', this.handleAccordionShow);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener('syn-show', this.handleAccordionShow);\n }\n\n handleSlotChange() {\n this.adjustDetailsSize();\n this.adjustDetailsContained();\n }\n\n private handleAccordionShow = (event: Event) => {\n if (this.closeOthers) {\n this.detailsInDefaultSlot.forEach(detailsElement => {\n // Break if detailsElement sent the event\n if (detailsElement === event.target) {\n return;\n }\n // Break if detailsElement is outside this group\n if (detailsElement.parentNode !== (event.target as HTMLUnknownElement).parentNode) {\n return;\n }\n detailsElement.removeAttribute('open');\n });\n }\n };\n\n render() {\n /* eslint-disable @typescript-eslint/unbound-method */\n return html`\n <div \n part=\"base\"\n class=${classMap({\n accordion: true,\n 'accordion--contained': this.contained,\n })}>\n <slot @slotchange=${this.handleSlotChange}></slot>\n </div>\n `;\n /* eslint-enable @typescript-eslint/unbound-method */\n }\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;AAAA,SAAS,YAAY;AACrB,SAAS,UAAU,6BAA6B;AAEhD,SAAS,gBAAgB;AAkBzB,IAAqB,eAArB,cAA0C,eAAe;AAAA,EAAzD;AAAA;AAW0D,uBAAc;AAG1B,qBAAY;AAG3B,gBAA2B;AAwCxD,SAAQ,sBAAsB,CAAC,UAAiB;AAC9C,UAAI,KAAK,aAAa;AACpB,aAAK,qBAAqB,QAAQ,oBAAkB;AAElD,cAAI,mBAAmB,MAAM,QAAQ;AACnC;AAAA,UACF;AAEA,cAAI,eAAe,eAAgB,MAAM,OAA8B,YAAY;AACjF;AAAA,UACF;AACA,yBAAe,gBAAgB,MAAM;AAAA,QACvC,CAAC;AAAA,MACH;AAAA,IACF;AAAA;AAAA,EApDQ,oBAAoB;AAC1B,SAAK,qBAAqB,QAAQ,YAAU;AAC1C,aAAO,aAAa,QAAQ,KAAK,IAAI;AAAA,IACvC,CAAC;AAAA,EACH;AAAA,EAEQ,yBAAyB;AAC/B,SAAK,qBAAqB,QAAQ,YAAU;AAE1C,aAAO,YAAY,KAAK;AAAA,IAC1B,CAAC;AAAA,EACH;AAAA,EAGA,mBAAmB;AACjB,SAAK,kBAAkB;AAAA,EACzB;AAAA,EAGA,wBAAwB;AACtB,SAAK,uBAAuB;AAAA,EAC9B;AAAA,EAEA,oBAAoB;AAClB,UAAM,kBAAkB;AACxB,SAAK,iBAAiB,YAAY,KAAK,mBAAmB;AAAA,EAC5D;AAAA,EAEA,uBAAuB;AACrB,UAAM,qBAAqB;AAC3B,SAAK,oBAAoB,YAAY,KAAK,mBAAmB;AAAA,EAC/D;AAAA,EAEA,mBAAmB;AACjB,SAAK,kBAAkB;AACvB,SAAK,uBAAuB;AAAA,EAC9B;AAAA,EAkBA,SAAS;AAEP,WAAO;AAAA;AAAA;AAAA,gBAGK,SAAS;AAAA,MACf,WAAW;AAAA,MACX,wBAAwB,KAAK;AAAA,IAC/B,CAAC,CAAC;AAAA,4BACkB,KAAK,gBAAgB;AAAA;AAAA;AAAA,EAI/C;AACF;AAvFqB,aACZ,SAAyB;AAAA,EAC9B;AAAA,EACA;AACF;AAEoD;AAAA,EAAnD,sBAAsB,EAAE,UAAU,cAAc,CAAC;AAAA,GAN/B,aAMiC;AAKI;AAAA,EAAvD,SAAS,EAAE,WAAW,gBAAgB,MAAM,QAAQ,CAAC;AAAA,GAXnC,aAWqC;AAGZ;AAAA,EAA3C,SAAS,EAAE,SAAS,MAAM,MAAM,QAAQ,CAAC;AAAA,GAdvB,aAcyB;AAGf;AAAA,EAA5B,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GAjBR,aAiBU;AAgB7B;AAAA,EADC,MAAM,QAAQ,EAAE,sBAAsB,KAAK,CAAC;AAAA,GAhC1B,aAiCnB;AAKA;AAAA,EADC,MAAM,aAAa,EAAE,sBAAsB,KAAK,CAAC;AAAA,GArC/B,aAsCnB;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/components/select/select.component.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\nimport { animateTo, stopAnimations } from '../../internal/animate.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { FormControlController } from '../../internal/form.js';\nimport { getAnimation, setDefaultAnimation } from '../../utilities/animation-registry.js';\nimport { HasSlotController } from '../../internal/slot.js';\nimport { html } from 'lit';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport { property, query, state } from 'lit/decorators.js';\nimport { scrollIntoView } from '../../internal/scroll.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { waitForEvent } from '../../internal/event.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 SynIcon from '../icon/icon.component.js';\nimport SynPopup from '../popup/popup.component.js';\nimport SynTag from '../tag/tag.component.js';\nimport styles from './select.styles.js';\nimport customStyles from './select.custom.styles.js';\nimport type { CSSResultGroup, TemplateResult } from 'lit';\nimport type { SynergyFormControl } from '../../internal/synergy-element.js';\nimport type { SynRemoveEvent } from '../../events/syn-remove.js';\nimport type SynOption from '../option/option.component.js';\n\n/**\n * @summary Selects allow you to choose items from a menu of predefined options.\n * @documentation https://synergy.style/components/select\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon\n * @dependency syn-popup\n * @dependency syn-tag\n *\n * @slot - The listbox options. Must be `<syn-option>` elements. You can use `<syn-divider>` to group items visually.\n * @slot label - The input's label. Alternatively, you can use the `label` attribute.\n * @slot prefix - Used to prepend a presentational icon or similar element to the combobox.\n * @slot suffix - Used to append a presentational icon or similar element to the combobox.\n * @slot clear-icon - An icon to use in lieu of the default clear icon.\n * @slot expand-icon - The icon to show when the control is expanded and collapsed. Rotates on open and close.\n * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n *\n * @event syn-change - Emitted when the control's value changes.\n * @event syn-clear - Emitted when the control's value is cleared.\n * @event syn-input - Emitted when the control receives input.\n * @event syn-focus - Emitted when the control gains focus.\n * @event syn-blur - Emitted when the control loses focus.\n * @event syn-show - Emitted when the select's menu opens.\n * @event syn-after-show - Emitted after the select's menu opens and all animations are complete.\n * @event syn-hide - Emitted when the select's menu closes.\n * @event syn-after-hide - Emitted after the select's menu closes and all animations are complete.\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 select's wrapper.\n * @csspart form-control-help-text - The help text's wrapper.\n * @csspart combobox - The container the wraps the prefix, suffix, combobox, clear icon, and expand button.\n * @csspart prefix - The container that wraps the prefix slot.\n * @csspart suffix - The container that wraps the suffix slot.\n * @csspart display-input - The element that displays the selected option's label, an `<input>` element.\n * @csspart listbox - The listbox container where options are slotted.\n * @csspart tags - The container that houses option tags when `multiselect` is used.\n * @csspart tag - The individual tags that represent each multiselect option.\n * @csspart tag__base - The tag's base part.\n * @csspart tag__content - The tag's content part.\n * @csspart tag__remove-button - The tag's remove button.\n * @csspart tag__remove-button__base - The tag's remove button base part.\n * @csspart clear-button - The clear button.\n * @csspart expand-icon - The container that wraps the expand icon.\n */\nexport default class SynSelect extends SynergyElement implements SynergyFormControl {\n static styles: CSSResultGroup = [componentStyles, formControlStyles, styles, formControlCustomStyles, customStyles];\n static dependencies = {\n 'syn-icon': SynIcon,\n 'syn-popup': SynPopup,\n 'syn-tag': SynTag\n };\n\n private readonly formControlController = new FormControlController(this, {\n assumeInteractionOn: ['syn-blur', 'syn-input']\n });\n private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label');\n private readonly localize = new LocalizeController(this);\n private typeToSelectString = '';\n private typeToSelectTimeout: number;\n private closeWatcher: CloseWatcher | null;\n\n @query('.select') popup: SynPopup;\n @query('.select__combobox') combobox: HTMLSlotElement;\n @query('.select__display-input') displayInput: HTMLInputElement;\n @query('.select__value-input') valueInput: HTMLInputElement;\n @query('.select__listbox') listbox: HTMLSlotElement;\n\n @state() private hasFocus = false;\n @state() displayLabel = '';\n @state() currentOption: SynOption;\n @state() selectedOptions: SynOption[] = [];\n @state() private valueHasChanged: boolean = false;\n\n /** The name of the select, submitted as a name/value pair with form data. */\n @property() name = '';\n\n private _value: string | string[] = '';\n\n get value() {\n return this._value;\n }\n\n /**\n * The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the\n * value attribute will be a space-delimited list of values based on the options selected, and the value property will\n * be an array. **For this reason, values must not contain spaces.**\n */\n @state()\n set value(val: string | string[]) {\n if (this.multiple) {\n val = Array.isArray(val) ? val : val.split(' ');\n } else {\n val = Array.isArray(val) ? val.join(' ') : val;\n }\n\n if (this._value === val) {\n return;\n }\n\n this.valueHasChanged = true;\n this._value = val;\n }\n\n /** The default value of the form control. Primarily used for resetting the form control. */\n @property({ attribute: 'value' }) defaultValue: string | string[] = '';\n\n /** The select's size. */\n @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n /** Placeholder text to show as a hint when the select is empty. */\n @property() placeholder = '';\n\n /** Allows more than one option to be selected. */\n @property({ type: Boolean, reflect: true }) multiple = false;\n\n /**\n * The maximum number of selected options to show when `multiple` is true. After the maximum, \"+n\" will be shown to\n * indicate the number of additional items that are selected. Set to 0 to remove the limit.\n */\n @property({ attribute: 'max-options-visible', type: Number }) maxOptionsVisible = 3;\n\n /** Disables the select control. */\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /** Adds a clear button when the select is not empty. */\n @property({ type: Boolean }) clearable = false;\n\n /**\n * Indicates whether or not the select is open. You can toggle this attribute to show and hide the menu, or you can\n * use the `show()` and `hide()` methods and this attribute will reflect the select's open state.\n */\n @property({ type: Boolean, reflect: true }) open = false;\n\n /**\n * Enable this option to prevent the listbox from being clipped when the component is placed inside a container with\n * `overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.\n */\n @property({ type: Boolean }) hoist = false;\n\n /** The select's label. If you need to display HTML, use the `label` slot instead. */\n @property() label = '';\n\n /**\n * The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox\n * inside of the viewport.\n */\n @property({ reflect: true }) placement: 'top' | 'bottom' = 'bottom';\n\n /** The select's help text. If you need to display HTML, use the `help-text` slot instead. */\n @property({ attribute: 'help-text' }) helpText = '';\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 /** The select's required attribute. */\n @property({ type: Boolean, reflect: true }) required = false;\n\n /**\n * A function that customizes the tags to be rendered when multiple=true. The first argument is the option, the second\n * is the current tag's index. The function should return either a Lit TemplateResult or a string containing trusted HTML of the symbol to render at\n * the specified value.\n */\n @property() getTag: (option: SynOption, index: number) => TemplateResult | string | HTMLElement = option => {\n return html`\n <syn-tag\n part=\"tag\"\n exportparts=\"\n base:tag__base,\n content:tag__content,\n remove-button:tag__remove-button,\n remove-button__base:tag__remove-button__base\n \"\n size=${this.size}\n removable\n @syn-remove=${(event: SynRemoveEvent) => this.handleTagRemove(event, option)}\n >\n ${option.getTextLabel()}\n </syn-tag>\n `;\n };\n\n /** Gets the validity state object */\n get validity() {\n return this.valueInput.validity;\n }\n\n /** Gets the validation message */\n get validationMessage() {\n return this.valueInput.validationMessage;\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n setTimeout(() => {\n this.handleDefaultSlotChange();\n });\n\n // Because this is a form control, it shouldn't be opened initially\n this.open = false;\n }\n\n private addOpenListeners() {\n //\n // Listen on the root node instead of the document in case the elements are inside a shadow root\n //\n // https://github.com/synergy-design-system/synergy/issues/1763\n //\n document.addEventListener('focusin', this.handleDocumentFocusIn);\n document.addEventListener('keydown', this.handleDocumentKeyDown);\n document.addEventListener('mousedown', this.handleDocumentMouseDown);\n\n // If the component is rendered in a shadow root, we need to attach the focusin listener there too\n if (this.getRootNode() !== document) {\n this.getRootNode().addEventListener('focusin', this.handleDocumentFocusIn);\n }\n\n if ('CloseWatcher' in window) {\n this.closeWatcher?.destroy();\n this.closeWatcher = new CloseWatcher();\n this.closeWatcher.onclose = () => {\n if (this.open) {\n this.hide();\n this.displayInput.focus({ preventScroll: true });\n }\n };\n }\n }\n\n private removeOpenListeners() {\n document.removeEventListener('focusin', this.handleDocumentFocusIn);\n document.removeEventListener('keydown', this.handleDocumentKeyDown);\n document.removeEventListener('mousedown', this.handleDocumentMouseDown);\n\n if (this.getRootNode() !== document) {\n this.getRootNode().removeEventListener('focusin', this.handleDocumentFocusIn);\n }\n\n this.closeWatcher?.destroy();\n }\n\n private handleFocus() {\n this.hasFocus = true;\n this.displayInput.setSelectionRange(0, 0);\n this.emit('syn-focus');\n }\n\n private handleBlur() {\n this.hasFocus = false;\n this.emit('syn-blur');\n }\n\n private handleDocumentFocusIn = (event: KeyboardEvent) => {\n // Close when focusing out of the select\n const path = event.composedPath();\n if (this && !path.includes(this)) {\n this.hide();\n }\n };\n\n private handleDocumentKeyDown = (event: KeyboardEvent) => {\n const target = event.target as HTMLElement;\n const isClearButton = target.closest('.select__clear') !== null;\n const isIconButton = target.closest('syn-icon-button') !== null;\n\n // Ignore presses when the target is an icon button (e.g. the remove button in <syn-tag>)\n if (isClearButton || isIconButton) {\n return;\n }\n\n // Close when pressing escape\n if (event.key === 'Escape' && this.open && !this.closeWatcher) {\n event.preventDefault();\n event.stopPropagation();\n this.hide();\n this.displayInput.focus({ preventScroll: true });\n }\n\n // Handle enter and space. When pressing space, we allow for type to select behaviors so if there's anything in the\n // buffer we _don't_ close it.\n if (event.key === 'Enter' || (event.key === ' ' && this.typeToSelectString === '')) {\n event.preventDefault();\n event.stopImmediatePropagation();\n\n // If it's not open, open it\n if (!this.open) {\n this.show();\n return;\n }\n\n // If it is open, update the value based on the current selection and close it\n if (this.currentOption && !this.currentOption.disabled) {\n this.valueHasChanged = true;\n if (this.multiple) {\n this.toggleOptionSelection(this.currentOption);\n } else {\n this.setSelectedOptions(this.currentOption);\n }\n\n // Emit after updating\n this.updateComplete.then(() => {\n this.emit('syn-input');\n this.emit('syn-change');\n });\n\n if (!this.multiple) {\n this.hide();\n this.displayInput.focus({ preventScroll: true });\n }\n }\n\n return;\n }\n\n // Navigate options\n if (['ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {\n const allOptions = this.getAllOptions();\n const currentIndex = allOptions.indexOf(this.currentOption);\n let newIndex = Math.max(0, currentIndex);\n\n // Prevent scrolling\n event.preventDefault();\n\n // Open it\n if (!this.open) {\n this.show();\n\n // If an option is already selected, stop here because we want that one to remain highlighted when the listbox\n // opens for the first time\n if (this.currentOption) {\n return;\n }\n }\n\n if (event.key === 'ArrowDown') {\n newIndex = currentIndex + 1;\n if (newIndex > allOptions.length - 1) newIndex = 0;\n } else if (event.key === 'ArrowUp') {\n newIndex = currentIndex - 1;\n if (newIndex < 0) newIndex = allOptions.length - 1;\n } else if (event.key === 'Home') {\n newIndex = 0;\n } else if (event.key === 'End') {\n newIndex = allOptions.length - 1;\n }\n\n this.setCurrentOption(allOptions[newIndex]);\n }\n\n // All other \"printable\" keys trigger type to select\n if ((event.key && event.key.length === 1) || event.key === 'Backspace') {\n const allOptions = this.getAllOptions();\n\n // Don't block important key combos like CMD+R\n if (event.metaKey || event.ctrlKey || event.altKey) {\n return;\n }\n\n // Open, unless the key that triggered is backspace\n if (!this.open) {\n if (event.key === 'Backspace') {\n return;\n }\n\n this.show();\n }\n\n event.stopPropagation();\n event.preventDefault();\n\n clearTimeout(this.typeToSelectTimeout);\n this.typeToSelectTimeout = window.setTimeout(() => (this.typeToSelectString = ''), 1000);\n\n if (event.key === 'Backspace') {\n this.typeToSelectString = this.typeToSelectString.slice(0, -1);\n } else {\n this.typeToSelectString += event.key.toLowerCase();\n }\n\n for (const option of allOptions) {\n const label = option.getTextLabel().toLowerCase();\n\n if (label.startsWith(this.typeToSelectString)) {\n this.setCurrentOption(option);\n break;\n }\n }\n }\n };\n\n private handleDocumentMouseDown = (event: MouseEvent) => {\n // Close when clicking outside of the select\n const path = event.composedPath();\n if (this && !path.includes(this)) {\n this.hide();\n }\n };\n\n private handleLabelClick() {\n this.displayInput.focus();\n }\n\n private handleComboboxMouseDown(event: MouseEvent) {\n const path = event.composedPath();\n const isIconButton = path.some(el => el instanceof Element && el.tagName.toLowerCase() === 'syn-icon-button');\n\n // Ignore disabled controls and clicks on tags (remove buttons)\n if (this.disabled || isIconButton) {\n return;\n }\n\n event.preventDefault();\n this.displayInput.focus({ preventScroll: true });\n this.open = !this.open;\n }\n\n private handleComboboxKeyDown(event: KeyboardEvent) {\n if (event.key === 'Tab') {\n return;\n }\n\n event.stopPropagation();\n this.handleDocumentKeyDown(event);\n }\n\n private handleClearClick(event: MouseEvent) {\n event.stopPropagation();\n\n this.valueHasChanged = true;\n\n if (this.value !== '') {\n this.setSelectedOptions([]);\n this.displayInput.focus({ preventScroll: true });\n\n // Emit after update\n this.updateComplete.then(() => {\n this.emit('syn-clear');\n this.emit('syn-input');\n this.emit('syn-change');\n });\n }\n }\n\n private handleClearMouseDown(event: MouseEvent) {\n // Don't lose focus or propagate events when clicking the clear button\n event.stopPropagation();\n event.preventDefault();\n }\n\n private handleOptionClick(event: MouseEvent) {\n const target = event.target as HTMLElement;\n const option = target.closest('syn-option');\n const oldValue = this.value;\n\n if (option && !option.disabled) {\n this.valueHasChanged = true;\n if (this.multiple) {\n this.toggleOptionSelection(option);\n } else {\n this.setSelectedOptions(option);\n }\n\n // Set focus after updating so the value is announced by screen readers\n this.updateComplete.then(() => this.displayInput.focus({ preventScroll: true }));\n\n if (this.value !== oldValue) {\n // Emit after updating\n this.updateComplete.then(() => {\n this.emit('syn-input');\n this.emit('syn-change');\n });\n }\n\n if (!this.multiple) {\n this.hide();\n this.displayInput.focus({ preventScroll: true });\n }\n }\n }\n\n /* @internal - used by options to update labels */\n public handleDefaultSlotChange() {\n if (!customElements.get('syn-option')) {\n customElements.whenDefined('syn-option').then(() => this.handleDefaultSlotChange());\n }\n\n const allOptions = this.getAllOptions();\n const val = this.valueHasChanged ? this.value : this.defaultValue;\n const value = Array.isArray(val) ? val : [val];\n const values: string[] = [];\n\n // Check for duplicate values in menu items\n allOptions.forEach(option => values.push(option.value));\n\n // Select only the options that match the new value\n this.setSelectedOptions(allOptions.filter(el => value.includes(el.value)));\n }\n\n private handleTagRemove(event: SynRemoveEvent, option: SynOption) {\n event.stopPropagation();\n\n this.valueHasChanged = true;\n\n if (!this.disabled) {\n this.toggleOptionSelection(option, false);\n\n // Emit after updating\n this.updateComplete.then(() => {\n this.emit('syn-input');\n this.emit('syn-change');\n });\n }\n }\n\n // Gets an array of all <syn-option> elements\n private getAllOptions() {\n return [...this.querySelectorAll<SynOption>('syn-option')];\n }\n\n // Gets the first <syn-option> element\n private getFirstOption() {\n return this.querySelector<SynOption>('syn-option');\n }\n\n // Sets the current option, which is the option the user is currently interacting with (e.g. via keyboard). Only one\n // option may be \"current\" at a time.\n private setCurrentOption(option: SynOption | null) {\n const allOptions = this.getAllOptions();\n\n // Clear selection\n allOptions.forEach(el => {\n el.current = false;\n el.tabIndex = -1;\n });\n\n // Select the target option\n if (option) {\n this.currentOption = option;\n option.current = true;\n option.tabIndex = 0;\n option.focus();\n }\n }\n\n // Sets the selected option(s)\n private setSelectedOptions(option: SynOption | SynOption[]) {\n const allOptions = this.getAllOptions();\n const newSelectedOptions = Array.isArray(option) ? option : [option];\n\n // Clear existing selection\n allOptions.forEach(el => (el.selected = false));\n\n // Set the new selection\n if (newSelectedOptions.length) {\n newSelectedOptions.forEach(el => (el.selected = true));\n }\n\n // Update selection, value, and display label\n this.selectionChanged();\n }\n\n // Toggles an option's selected state\n private toggleOptionSelection(option: SynOption, force?: boolean) {\n if (force === true || force === false) {\n option.selected = force;\n } else {\n option.selected = !option.selected;\n }\n\n this.selectionChanged();\n }\n\n // This method must be called whenever the selection changes. It will update the selected options cache, the current\n // value, and the display value\n private selectionChanged() {\n const options = this.getAllOptions();\n // Update selected options cache\n this.selectedOptions = options.filter(el => el.selected);\n\n // Keep a reference to the previous `valueHasChanged`. Changes made here don't count has changing the value.\n const cachedValueHasChanged = this.valueHasChanged;\n\n // Update the value and display label\n if (this.multiple) {\n this.value = this.selectedOptions.map(el => el.value);\n\n if (this.placeholder && this.value.length === 0) {\n // When no items are selected, keep the value empty so the placeholder shows\n this.displayLabel = '';\n } else {\n this.displayLabel = this.localize.term('numOptionsSelected', this.selectedOptions.length);\n }\n } else {\n const selectedOption = this.selectedOptions[0];\n this.value = selectedOption?.value ?? '';\n this.displayLabel = selectedOption?.getTextLabel?.() ?? '';\n }\n this.valueHasChanged = cachedValueHasChanged;\n\n // Update validity\n this.updateComplete.then(() => {\n this.formControlController.updateValidity();\n });\n }\n\n protected get tags() {\n return this.selectedOptions.map((option, index) => {\n if (index < this.maxOptionsVisible || this.maxOptionsVisible <= 0) {\n const tag = this.getTag(option, index);\n // Wrap so we can handle the remove\n return html`<div @syn-remove=${(e: SynRemoveEvent) => this.handleTagRemove(e, option)}>\n ${typeof tag === 'string' ? unsafeHTML(tag) : tag}\n </div>`;\n } else if (index === this.maxOptionsVisible) {\n // Hit tag limit\n return html`<syn-tag size=${this.size}>+${this.selectedOptions.length - index}</syn-tag>`;\n }\n return html``;\n });\n }\n\n private handleInvalid(event: Event) {\n this.formControlController.setValidity(false);\n this.formControlController.emitInvalidEvent(event);\n }\n\n @watch('disabled', { waitUntilFirstUpdate: true })\n handleDisabledChange() {\n // Close the listbox when the control is disabled\n if (this.disabled) {\n this.open = false;\n this.handleOpenChange();\n }\n }\n\n attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null) {\n super.attributeChangedCallback(name, oldVal, newVal);\n\n /** This is a backwards compatibility call. In a new major version we should make a clean separation between \"value\" the attribute mapping to \"defaultValue\" property and \"value\" the property not reflecting. */\n if (name === 'value') {\n const cachedValueHasChanged = this.valueHasChanged;\n this.value = this.defaultValue;\n\n // Set it back to false since this isn't an interaction.\n this.valueHasChanged = cachedValueHasChanged;\n }\n }\n\n @watch(['defaultValue', 'value'], { waitUntilFirstUpdate: true })\n handleValueChange() {\n if (!this.valueHasChanged) {\n const cachedValueHasChanged = this.valueHasChanged;\n this.value = this.defaultValue;\n\n // Set it back to false since this isn't an interaction.\n this.valueHasChanged = cachedValueHasChanged;\n }\n\n const allOptions = this.getAllOptions();\n const value = Array.isArray(this.value) ? this.value : [this.value];\n\n // Select only the options that match the new value\n this.setSelectedOptions(allOptions.filter(el => value.includes(el.value)));\n }\n\n @watch('open', { waitUntilFirstUpdate: true })\n async handleOpenChange() {\n if (this.open && !this.disabled) {\n // Reset the current option\n this.setCurrentOption(this.selectedOptions[0] || this.getFirstOption());\n\n // Show\n this.emit('syn-show');\n this.addOpenListeners();\n\n await stopAnimations(this);\n this.listbox.hidden = false;\n this.popup.active = true;\n\n // Select the appropriate option based on value after the listbox opens\n requestAnimationFrame(() => {\n this.setCurrentOption(this.currentOption);\n });\n\n const { keyframes, options } = getAnimation(this, 'select.show', { dir: this.localize.dir() });\n await animateTo(this.popup.popup, keyframes, options);\n\n // Make sure the current option is scrolled into view (required for Safari)\n if (this.currentOption) {\n scrollIntoView(this.currentOption, this.listbox, 'vertical', 'auto');\n }\n\n this.emit('syn-after-show');\n } else {\n // Hide\n this.emit('syn-hide');\n this.removeOpenListeners();\n\n await stopAnimations(this);\n const { keyframes, options } = getAnimation(this, 'select.hide', { dir: this.localize.dir() });\n await animateTo(this.popup.popup, keyframes, options);\n this.listbox.hidden = true;\n this.popup.active = false;\n\n this.emit('syn-after-hide');\n }\n }\n\n /** Shows the listbox. */\n async show() {\n if (this.open || this.disabled) {\n this.open = false;\n return undefined;\n }\n\n this.open = true;\n return waitForEvent(this, 'syn-after-show');\n }\n\n /** Hides the listbox. */\n async hide() {\n if (!this.open || this.disabled) {\n this.open = false;\n return undefined;\n }\n\n this.open = false;\n return waitForEvent(this, 'syn-after-hide');\n }\n\n /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */\n checkValidity() {\n return this.valueInput.checkValidity();\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() {\n return this.valueInput.reportValidity();\n }\n\n /** Sets a custom validation message. Pass an empty string to restore validity. */\n setCustomValidity(message: string) {\n this.valueInput.setCustomValidity(message);\n this.formControlController.updateValidity();\n }\n\n /** Sets focus on the control. */\n focus(options?: FocusOptions) {\n this.displayInput.focus(options);\n }\n\n /** Removes focus from the control. */\n blur() {\n this.displayInput.blur();\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 hasClearIcon = this.clearable && !this.disabled && this.value.length > 0;\n const isPlaceholderVisible = this.placeholder && this.value && this.value.length <= 0;\n\n return html`\n <div\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--has-label': hasLabel,\n 'form-control--has-help-text': hasHelpText\n })}\n >\n <label\n id=\"label\"\n part=\"form-control-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 <syn-popup\n class=${classMap({\n select: true,\n 'select--standard': true,\n 'select--open': this.open,\n 'select--disabled': this.disabled,\n 'select--multiple': this.multiple,\n 'select--focused': this.hasFocus,\n 'select--placeholder-visible': isPlaceholderVisible,\n 'select--top': this.placement === 'top',\n 'select--bottom': this.placement === 'bottom',\n 'select--small': this.size === 'small',\n 'select--medium': this.size === 'medium',\n 'select--large': this.size === 'large'\n })}\n placement=${this.placement}\n strategy=${this.hoist ? 'fixed' : 'absolute'}\n flip\n shift\n sync=\"width\"\n auto-size=\"vertical\"\n auto-size-padding=\"10\"\n >\n <div\n part=\"combobox\"\n class=\"select__combobox\"\n slot=\"anchor\"\n @keydown=${this.handleComboboxKeyDown}\n @mousedown=${this.handleComboboxMouseDown}\n >\n <slot part=\"prefix\" name=\"prefix\" class=\"select__prefix\"></slot>\n\n <input\n part=\"display-input\"\n class=\"select__display-input\"\n type=\"text\"\n placeholder=${this.placeholder}\n .disabled=${this.disabled}\n .value=${this.displayLabel}\n autocomplete=\"off\"\n spellcheck=\"false\"\n autocapitalize=\"off\"\n readonly\n aria-controls=\"listbox\"\n aria-expanded=${this.open ? 'true' : 'false'}\n aria-haspopup=\"listbox\"\n aria-labelledby=\"label\"\n aria-disabled=${this.disabled ? 'true' : 'false'}\n aria-describedby=\"help-text\"\n role=\"combobox\"\n tabindex=\"0\"\n @focus=${this.handleFocus}\n @blur=${this.handleBlur}\n />\n\n ${this.multiple ? html`<div part=\"tags\" class=\"select__tags\">${this.tags}</div>` : ''}\n\n <input\n class=\"select__value-input\"\n type=\"text\"\n ?disabled=${this.disabled}\n ?required=${this.required}\n .value=${Array.isArray(this.value) ? this.value.join(', ') : this.value}\n tabindex=\"-1\"\n aria-hidden=\"true\"\n @focus=${() => this.focus()}\n @invalid=${this.handleInvalid}\n />\n\n ${hasClearIcon\n ? html`\n <button\n part=\"clear-button\"\n class=\"select__clear\"\n type=\"button\"\n aria-label=${this.localize.term('clearEntry')}\n @mousedown=${this.handleClearMouseDown}\n @click=${this.handleClearClick}\n tabindex=\"-1\"\n >\n <slot name=\"clear-icon\">\n <syn-icon name=\"x-circle-fill\" library=\"system\"></syn-icon>\n </slot>\n </button>\n `\n : ''}\n\n <slot name=\"suffix\" part=\"suffix\" class=\"select__suffix\"></slot>\n\n <slot name=\"expand-icon\" part=\"expand-icon\" class=\"select__expand-icon\">\n <syn-icon library=\"system\" name=\"chevron-down\"></syn-icon>\n </slot>\n </div>\n\n <div\n id=\"listbox\"\n role=\"listbox\"\n aria-expanded=${this.open ? 'true' : 'false'}\n aria-multiselectable=${this.multiple ? 'true' : 'false'}\n aria-labelledby=\"label\"\n part=\"listbox\"\n class=\"select__listbox\"\n tabindex=\"-1\"\n @mouseup=${this.handleOptionClick}\n @slotchange=${this.handleDefaultSlotChange}\n >\n <slot></slot>\n </div>\n </syn-popup>\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 </div>\n `;\n }\n}\n\nsetDefaultAnimation('select.show', {\n keyframes: [\n { opacity: 0, scale: 0.9 },\n { opacity: 1, scale: 1 }\n ],\n options: { duration: 100, easing: 'ease' }\n});\n\nsetDefaultAnimation('select.hide', {\n keyframes: [\n { opacity: 1, scale: 1 },\n { opacity: 0, scale: 0.9 }\n ],\n options: { duration: 100, easing: 'ease' }\n});\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/components/textarea/textarea.component.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\nimport { classMap } from 'lit/directives/class-map.js';\nimport { defaultValue } from '../../internal/default-value.js';\nimport { FormControlController } from '../../internal/form.js';\nimport { HasSlotController } from '../../internal/slot.js';\nimport { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\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 styles from './textarea.styles.js';\nimport customStyles from './textarea.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\nimport type { SynergyFormControl } from '../../internal/synergy-element.js';\n\n/**\n * @summary Textareas collect data from the user and allow multiple lines of text.\n * @documentation https://synergy.style/components/textarea\n * @status stable\n * @since 2.0\n *\n * @slot label - The textarea's label. Alternatively, you can use the `label` attribute.\n * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n *\n * @event syn-blur - Emitted when the control loses focus.\n * @event syn-change - Emitted when an alteration to the control's value is committed by the user.\n * @event syn-focus - Emitted when the control gains focus.\n * @event syn-input - Emitted when the control receives 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 base - The component's base wrapper.\n * @csspart textarea - The internal `<textarea>` control.\n */\nexport default class SynTextarea extends SynergyElement implements SynergyFormControl {\n static styles: CSSResultGroup = [componentStyles, formControlStyles, styles, formControlCustomStyles, customStyles];\n\n private readonly formControlController = new FormControlController(this, {\n assumeInteractionOn: ['syn-blur', 'syn-input']\n });\n private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label');\n private resizeObserver: ResizeObserver;\n\n @query('.textarea__control') input: HTMLTextAreaElement;\n @query('.textarea__size-adjuster') sizeAdjuster: HTMLTextAreaElement;\n\n @state() private hasFocus = false;\n @property() title = ''; // make reactive to pass through\n\n /** The name of the textarea, submitted as a name/value pair with form data. */\n @property() name = '';\n\n /** The current value of the textarea, submitted as a name/value pair with form data. */\n @property() value = '';\n\n /** The textarea's size. */\n @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n /** The textarea's label. If you need to display HTML, use the `label` slot instead. */\n @property() label = '';\n\n /** The textarea's help text. If you need to display HTML, use the `help-text` slot instead. */\n @property({ attribute: 'help-text' }) helpText = '';\n\n /** Placeholder text to show as a hint when the input is empty. */\n @property() placeholder = '';\n\n /** The number of rows to display by default. */\n @property({ type: Number }) rows = 4;\n\n /** Controls how the textarea can be resized. */\n @property() resize: 'none' | 'vertical' | 'auto' = 'vertical';\n\n /** Disables the textarea. */\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /** Makes the textarea readonly. */\n @property({ type: Boolean, reflect: true }) readonly = false;\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 /** Makes the textarea a required field. */\n @property({ type: Boolean, reflect: true }) required = false;\n\n /** The minimum length of input that will be considered valid. */\n @property({ type: Number }) minlength: number;\n\n /** The maximum length of input that will be considered valid. */\n @property({ type: Number }) maxlength: number;\n\n /** Controls whether and how text input is automatically capitalized as it is entered by the user. */\n @property() autocapitalize: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters';\n\n /** Indicates whether the browser's autocorrect feature is on or off. */\n @property() autocorrect: string;\n\n /**\n * Specifies what permission the browser has to provide assistance in filling out form field values. Refer to\n * [this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.\n */\n @property() autocomplete: string;\n\n /** Indicates that the input should receive focus on page load. */\n @property({ type: Boolean }) autofocus: boolean;\n\n /** Used to customize the label or icon of the Enter key on virtual keyboards. */\n @property() enterkeyhint: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';\n\n /** Enables spell checking on the textarea. */\n @property({\n type: Boolean,\n converter: {\n // Allow \"true|false\" attribute values but keep the property boolean\n fromAttribute: value => (!value || value === 'false' ? false : true),\n toAttribute: value => (value ? 'true' : 'false')\n }\n })\n spellcheck = true;\n\n /**\n * Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual\n * keyboard on supportive devices.\n */\n @property() inputmode: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';\n\n /** The default value of the form control. Primarily used for resetting the form control. */\n @defaultValue() defaultValue = '';\n\n /** Gets the validity state object */\n get validity() {\n return this.input.validity;\n }\n\n /** Gets the validation message */\n get validationMessage() {\n return this.input.validationMessage;\n }\n\n connectedCallback() {\n super.connectedCallback();\n this.resizeObserver = new ResizeObserver(() => this.setTextareaHeight());\n\n this.updateComplete.then(() => {\n this.setTextareaHeight();\n this.resizeObserver.observe(this.input);\n });\n }\n\n firstUpdated() {\n this.formControlController.updateValidity();\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n if (this.input) {\n this.resizeObserver?.unobserve(this.input);\n }\n }\n\n private handleBlur() {\n this.hasFocus = false;\n this.emit('syn-blur');\n }\n\n private handleChange() {\n this.value = this.input.value;\n this.setTextareaHeight();\n this.emit('syn-change');\n }\n\n private handleFocus() {\n this.hasFocus = true;\n this.emit('syn-focus');\n }\n\n private handleInput() {\n this.value = this.input.value;\n this.emit('syn-input');\n }\n\n private handleInvalid(event: Event) {\n this.formControlController.setValidity(false);\n this.formControlController.emitInvalidEvent(event);\n }\n\n private setTextareaHeight() {\n if (this.resize === 'auto') {\n // This prevents layout shifts. We use `clientHeight` instead of `scrollHeight` to account for if the `<textarea>` has a max-height set on it. In my tests, this has worked fine. Im not aware of any edge cases. [Konnor]\n this.sizeAdjuster.style.height = `${this.input.clientHeight}px`;\n this.input.style.height = 'auto';\n this.input.style.height = `${this.input.scrollHeight}px`;\n } else {\n this.input.style.height = '';\n }\n }\n\n @watch('disabled', { waitUntilFirstUpdate: true })\n handleDisabledChange() {\n // Disabled form controls are always valid\n this.formControlController.setValidity(this.disabled);\n }\n\n @watch('rows', { waitUntilFirstUpdate: true })\n handleRowsChange() {\n this.setTextareaHeight();\n }\n\n @watch('value', { waitUntilFirstUpdate: true })\n async handleValueChange() {\n await this.updateComplete;\n this.formControlController.updateValidity();\n this.setTextareaHeight();\n }\n\n /** Sets focus on the textarea. */\n focus(options?: FocusOptions) {\n this.input.focus(options);\n }\n\n /** Removes focus from the textarea. */\n blur() {\n this.input.blur();\n }\n\n /** Selects all the text in the textarea. */\n select() {\n this.input.select();\n }\n\n /** Gets or sets the textarea's scroll position. */\n scrollPosition(position?: { top?: number; left?: number }): { top: number; left: number } | undefined {\n if (position) {\n if (typeof position.top === 'number') this.input.scrollTop = position.top;\n if (typeof position.left === 'number') this.input.scrollLeft = position.left;\n return undefined;\n }\n\n return {\n top: this.input.scrollTop,\n left: this.input.scrollTop\n };\n }\n\n /** Sets the start and end positions of the text selection (0-based). */\n setSelectionRange(\n selectionStart: number,\n selectionEnd: number,\n selectionDirection: 'forward' | 'backward' | 'none' = 'none'\n ) {\n this.input.setSelectionRange(selectionStart, selectionEnd, selectionDirection);\n }\n\n /** Replaces a range of text with a new string. */\n setRangeText(\n replacement: string,\n start?: number,\n end?: number,\n selectMode: 'select' | 'start' | 'end' | 'preserve' = 'preserve'\n ) {\n const selectionStart = start ?? this.input.selectionStart;\n const selectionEnd = end ?? this.input.selectionEnd;\n\n this.input.setRangeText(replacement, selectionStart, selectionEnd, selectMode);\n\n if (this.value !== this.input.value) {\n this.value = this.input.value;\n this.setTextareaHeight();\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 return this.input.checkValidity();\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() {\n return this.input.reportValidity();\n }\n\n /** Sets a custom validation message. Pass an empty string to restore validity. */\n setCustomValidity(message: string) {\n this.input.setCustomValidity(message);\n this.formControlController.updateValidity();\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\n return html`\n <div\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--has-label': hasLabel,\n 'form-control--has-help-text': hasHelpText\n })}\n >\n <label\n part=\"form-control-label\"\n class=\"form-control__label\"\n for=\"input\"\n aria-hidden=${hasLabel ? 'false' : 'true'}\n >\n <slot name=\"label\">${this.label}</slot>\n </label>\n\n <div part=\"form-control-input\" class=\"form-control-input\">\n <div\n part=\"base\"\n class=${classMap({\n textarea: true,\n 'textarea--small': this.size === 'small',\n 'textarea--medium': this.size === 'medium',\n 'textarea--large': this.size === 'large',\n 'textarea--standard': !this.readonly,\n 'textarea--readonly': this.readonly,\n 'textarea--disabled': this.disabled,\n 'textarea--focused': this.hasFocus,\n 'textarea--empty': !this.value,\n 'textarea--resize-none': this.resize === 'none',\n 'textarea--resize-vertical': this.resize === 'vertical',\n 'textarea--resize-auto': this.resize === 'auto'\n })}\n >\n <textarea\n part=\"textarea\"\n id=\"input\"\n class=\"textarea__control\"\n title=${this.title /* An empty title prevents browser validation tooltips from appearing on hover */}\n name=${ifDefined(this.name)}\n .value=${live(this.value)}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n ?required=${this.required}\n placeholder=${ifDefined(this.placeholder)}\n rows=${ifDefined(this.rows)}\n minlength=${ifDefined(this.minlength)}\n maxlength=${ifDefined(this.maxlength)}\n autocapitalize=${ifDefined(this.autocapitalize)}\n autocorrect=${ifDefined(this.autocorrect)}\n ?autofocus=${this.autofocus}\n spellcheck=${ifDefined(this.spellcheck)}\n enterkeyhint=${ifDefined(this.enterkeyhint)}\n inputmode=${ifDefined(this.inputmode)}\n aria-describedby=\"help-text\"\n @change=${this.handleChange}\n @input=${this.handleInput}\n @invalid=${this.handleInvalid}\n @focus=${this.handleFocus}\n @blur=${this.handleBlur}\n ></textarea>\n <!-- This \"adjuster\" exists to prevent layout shifting. https://github.com/synergy-design-system/synergy/issues/2180 -->\n <div part=\"textarea-adjuster\" class=\"textarea__size-adjuster\" ?hidden=${this.resize !== 'auto'}></div>\n </div>\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 </div>\n `;\n }\n}\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/components/checkbox/checkbox.component.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\nimport { classMap } from 'lit/directives/class-map.js';\nimport { defaultValue } from '../../internal/default-value.js';\nimport { FormControlController } from '../../internal/form.js';\nimport { HasSlotController } from '../../internal/slot.js';\nimport { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\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 SynIcon from '../icon/icon.component.js';\nimport styles from './checkbox.styles.js';\nimport customStyles from './checkbox.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\nimport type { SynergyFormControl } from '../../internal/synergy-element.js';\n\n/**\n * @summary Checkboxes allow the user to toggle an option on or off.\n * @documentation https://synergy.style/components/checkbox\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon\n *\n * @slot - The checkbox's label.\n * @slot help-text - Text that describes how to use the checkbox. Alternatively, you can use the `help-text` attribute.\n *\n * @event syn-blur - Emitted when the checkbox loses focus.\n * @event syn-change - Emitted when the checked state changes.\n * @event syn-focus - Emitted when the checkbox gains focus.\n * @event syn-input - Emitted when the checkbox receives input.\n * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart base - The component's base wrapper.\n * @csspart control - The square container that wraps the checkbox's checked state.\n * @csspart control--checked - Matches the control part when the checkbox is checked.\n * @csspart control--indeterminate - Matches the control part when the checkbox is indeterminate.\n * @csspart checked-icon - The checked icon, an `<syn-icon>` element.\n * @csspart indeterminate-icon - The indeterminate icon, an `<syn-icon>` element.\n * @csspart label - The container that wraps the checkbox's label.\n * @csspart form-control-help-text - The help text's wrapper.\n */\nexport default class SynCheckbox extends SynergyElement implements SynergyFormControl {\n static styles: CSSResultGroup = [componentStyles, formControlStyles, styles, formControlCustomStyles, customStyles];\n static dependencies = { 'syn-icon': SynIcon };\n\n private readonly formControlController = new FormControlController(this, {\n value: (control: SynCheckbox) => (control.checked ? control.value || 'on' : undefined),\n defaultValue: (control: SynCheckbox) => control.defaultChecked,\n setValue: (control: SynCheckbox, checked: boolean) => (control.checked = checked)\n });\n private readonly hasSlotController = new HasSlotController(this, 'help-text');\n\n @query('input[type=\"checkbox\"]') input: HTMLInputElement;\n\n @state() private hasFocus = false;\n\n @property() title = ''; // make reactive to pass through\n\n /** The name of the checkbox, submitted as a name/value pair with form data. */\n @property() name = '';\n\n /** The current value of the checkbox, submitted as a name/value pair with form data. */\n @property() value: string;\n\n /** The checkbox's size. */\n @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n /** Disables the checkbox. */\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /** Draws the checkbox in a checked state. */\n @property({ type: Boolean, reflect: true }) checked = false;\n\n /**\n * Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\n * all/none\" behavior when associated checkboxes have a mix of checked and unchecked states.\n */\n @property({ type: Boolean, reflect: true }) indeterminate = false;\n\n /** The default value of the form control. Primarily used for resetting the form control. */\n @defaultValue('checked') defaultChecked = false;\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 /** Makes the checkbox a required field. */\n @property({ type: Boolean, reflect: true }) required = false;\n\n /** The checkbox's help text. If you need to display HTML, use the `help-text` slot instead. */\n @property({ attribute: 'help-text' }) helpText = '';\n\n /** Gets the validity state object */\n get validity() {\n return this.input.validity;\n }\n\n /** Gets the validation message */\n get validationMessage() {\n return this.input.validationMessage;\n }\n\n firstUpdated() {\n this.formControlController.updateValidity();\n }\n\n private handleClick() {\n this.checked = !this.checked;\n this.indeterminate = false;\n this.emit('syn-change');\n }\n\n private handleBlur() {\n this.hasFocus = false;\n this.emit('syn-blur');\n }\n\n private handleInput() {\n this.emit('syn-input');\n }\n\n private handleInvalid(event: Event) {\n this.formControlController.setValidity(false);\n this.formControlController.emitInvalidEvent(event);\n }\n\n private handleFocus() {\n this.hasFocus = true;\n this.emit('syn-focus');\n }\n\n @watch('disabled', { waitUntilFirstUpdate: true })\n handleDisabledChange() {\n // Disabled form controls are always valid\n this.formControlController.setValidity(this.disabled);\n }\n\n @watch(['checked', 'indeterminate'], { waitUntilFirstUpdate: true })\n handleStateChange() {\n this.input.checked = this.checked; // force a sync update\n this.input.indeterminate = this.indeterminate; // force a sync update\n this.formControlController.updateValidity();\n }\n\n /** Simulates a click on the checkbox. */\n click() {\n this.input.click();\n }\n\n /** Sets focus on the checkbox. */\n focus(options?: FocusOptions) {\n this.input.focus(options);\n }\n\n /** Removes focus from the checkbox. */\n blur() {\n this.input.blur();\n }\n\n /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */\n checkValidity() {\n return this.input.checkValidity();\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() {\n return this.input.reportValidity();\n }\n\n /**\n * Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear\n * the custom validation message, call this method with an empty string.\n */\n setCustomValidity(message: string) {\n this.input.setCustomValidity(message);\n this.formControlController.updateValidity();\n }\n\n render() {\n const hasHelpTextSlot = this.hasSlotController.test('help-text');\n const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;\n\n //\n // NOTE: we use a <div> around the label slot because of this Chrome bug.\n //\n // https://bugs.chromium.org/p/chromium/issues/detail?id=1413733\n //\n return html`\n <div\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--has-help-text': hasHelpText\n })}\n >\n <label\n part=\"base\"\n class=${classMap({\n checkbox: true,\n 'checkbox--checked': this.checked,\n 'checkbox--disabled': this.disabled,\n 'checkbox--focused': this.hasFocus,\n 'checkbox--indeterminate': this.indeterminate,\n 'checkbox--small': this.size === 'small',\n 'checkbox--medium': this.size === 'medium',\n 'checkbox--large': this.size === 'large'\n })}\n >\n <input\n class=\"checkbox__input\"\n type=\"checkbox\"\n title=${this.title /* An empty title prevents browser validation tooltips from appearing on hover */}\n name=${this.name}\n value=${ifDefined(this.value)}\n .indeterminate=${live(this.indeterminate)}\n .checked=${live(this.checked)}\n .disabled=${this.disabled}\n .required=${this.required}\n aria-checked=${this.checked ? 'true' : 'false'}\n aria-describedby=\"help-text\"\n @click=${this.handleClick}\n @input=${this.handleInput}\n @invalid=${this.handleInvalid}\n @blur=${this.handleBlur}\n @focus=${this.handleFocus}\n />\n\n <span\n part=\"control${this.checked ? ' control--checked' : ''}${this.indeterminate\n ? ' control--indeterminate'\n : ''}\"\n class=\"checkbox__control\"\n >\n ${this.checked\n ? html`\n <syn-icon part=\"checked-icon\" class=\"checkbox__checked-icon\" library=\"system\" name=\"check\"></syn-icon>\n `\n : ''}\n ${!this.checked && this.indeterminate\n ? html`\n <syn-icon\n part=\"indeterminate-icon\"\n class=\"checkbox__indeterminate-icon\"\n library=\"system\"\n name=\"indeterminate\"\n ></syn-icon>\n `\n : ''}\n </span>\n\n <div part=\"label\" class=\"checkbox__label\">\n <slot></slot>\n </div>\n </label>\n\n <div\n aria-hidden=${hasHelpText ? 'false' : 'true'}\n class=\"form-control__help-text\"\n id=\"help-text\"\n part=\"form-control-help-text\"\n >\n <slot name=\"help-text\">${this.helpText}</slot>\n </div>\n </div>\n `;\n }\n}\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/components/file/file.component.ts"],
|
|
4
|
-
"sourcesContent": ["import { classMap } from 'lit/directives/class-map.js';\nimport { property, query, state } from 'lit/decorators.js';\nimport type { CSSResultGroup } from 'lit';\nimport { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { defaultValue } from '../../internal/default-value.js';\nimport { watch } from '../../internal/watch.js';\nimport type { SynergyFormControl } from '../../internal/synergy-element.js';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport { FormControlController } from '../../internal/form.js';\nimport { HasSlotController } from '../../internal/slot.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 SynButton from '../button/button.component.js';\nimport SynIcon from '../icon/icon.component.js';\nimport styles from './file.styles.js';\nimport { getAnimation, setDefaultAnimation } from '../../utilities/animation-registry.js';\nimport { animateTo } from '../../internal/animate.js';\n\n/**\n * @summary File controls allow selecting an arbitrary number of files for uploading.\n * @status stable\n *\n * @dependency syn-button\n * @dependency syn-icon\n *\n * @slot label - The file control's label. Alternatively, you can use the `label` attribute.\n * @slot help-text - Text that describes how to use the file control.\n * Alternatively, you can use the `help-text` attribute.\n * @slot droparea-icon - Optional droparea icon to use instead of the default.\n * Works best with `<syn-icon>`.\n * @slot trigger - Optional content to be used as trigger instead of the default content.\n * Opening the file dialog on click and as well as drag and drop will work for this content.\n * Following attributes will no longer work: *label*, *droparea*, *help-text*, *size*,\n * *hide-value*. Also if using the disabled attribute, the disabled styling will not be\n * applied and must be taken care of yourself.\n *\n * @event syn-blur - Emitted when the control loses focus.\n * @event syn-change - Emitted when an alteration to the control's value is committed by the user.\n * @event syn-error - Emitted when multiple files are selected via drag and drop, without\n * the `multiple` property being set.\n * @event syn-focus - Emitted when the control gains focus.\n * @event syn-input - Emitted when the control receives input.\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-wrapper - The wrapper around the button and text value.\n * @csspart button - The syn-button acting as a file input.\n * @csspart button__base - The syn-button's exported `base` part.\n * @csspart value - The chosen files or placeholder text for the file input.\n * @csspart droparea - The element wrapping the drop zone.\n * @csspart droparea-background - The background of the drop zone.\n * @csspart droparea-icon - The container that wraps the icon for the drop zone.\n * @csspart droparea-value - The text for the drop zone.\n * @csspart trigger - The container that wraps the trigger.\n *\n * @animation file.iconDrop - The animation to use for the file icon\n * when a file is dropped\n * @animation file.text.disappear - The disappear animation to use for the file placeholder text\n * when a file is dropped\n * @animation file.text.appear - The appear animation to use for the file placeholder text\n * when a file is dropped\n */\nexport default class SynFile extends SynergyElement implements SynergyFormControl {\n static styles: CSSResultGroup = [\n componentStyles,\n formControlStyles,\n formControlCustomStyles,\n styles,\n ];\n\n static dependencies = {\n 'syn-button': SynButton,\n 'syn-icon': SynIcon,\n };\n\n private readonly formControlController = new FormControlController(this, {\n assumeInteractionOn: ['syn-change'],\n // This makes sure the value sent in formdata events is always the files object\n // @see internals/form.ts #handleFormData for more information\n value: (el: SynFile) => el.files,\n });\n\n private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label');\n\n private readonly localize = new LocalizeController(this);\n\n @state() private userIsDragging = false;\n\n /**\n * The selected files as a FileList object containing a list of File objects.\n * The FileList behaves like an array, so you can get the number of selected files\n * via its length property.\n * [see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#getting_information_on_selected_files)\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#getting_information_on_selected_files\n */\n @property({ type: Object })\n set files(v: FileList | null) {\n if (this.input) {\n this.input.files = v;\n }\n }\n\n get files() {\n return this.input?.files;\n }\n\n /** The name of the file control, submitted as a name/value pair with form data. */\n @property({ type: String }) name = '';\n\n /**\n * The current value of the input, submitted as a name/value pair with form data.\n * Beware that the only valid value when setting a file input is an empty string!\n */\n\n /**\n * The value of the file control contains a string that represents the path of the selected file.\n * If multiple files are selected, the value represents the first file in the list.\n * If no file is selected, the value is an empty string.\n * Beware that the only valid value when setting a file control is an empty string!\n * [see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#value)\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#value\n */\n @property({ type: String })\n set value(v: string) {\n if (this.input) {\n this.input.value = v;\n }\n }\n\n get value() {\n return this.input?.value;\n }\n\n /** The default value of the form control. Primarily used for resetting the form control. */\n @defaultValue() defaultValue = '';\n\n /** The file control's size. */\n @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n /** The file control's label. If you need to display HTML, use the `label` slot instead. */\n @property() label = '';\n\n /**\n * The file control's help text.\n * If you need to display HTML, use the `help-text` slot instead.\n */\n @property({ attribute: 'help-text' }) helpText = '';\n\n /** Disables the file control. */\n @property({ reflect: true, type: Boolean }) disabled = false;\n\n /** Draw the file control as a drop area */\n @property({ type: Boolean }) droparea = false;\n\n /**\n * Comma separated list of supported file types\n * [see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept)\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept\n * @example <syn-file accept=\".jpg,.jpeg,.png,.gif,text/plain,image/*\"></syn-file>\n */\n @property({ type: String }) accept = '';\n\n /**\n * Specifies the types of files that the server accepts.\n * Can be set either to user or environment.\n * Works only when not using a droparea!\n * [see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture)\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture\n */\n @property({ type: String }) capture: 'user' | 'environment';\n\n /**\n * Indicates whether the user can select more than one file.\n * Has no effect if webkitdirectory is set.\n * [see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#multiple)\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#multiple\n */\n @property({ reflect: true, type: Boolean }) multiple = false;\n\n /**\n * Indicates that the file control should let the user select directories instead of files.\n * When a directory is selected, the directory and its entire hierarchy of contents are included\n * in the set of selected items.\n * Note: This is a non-standard attribute but is supported in the major browsers.\n * [see MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory)\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory\n */\n @property({ reflect: true, type: Boolean }) webkitdirectory = false;\n\n /**\n * By default, form controls are associated with the nearest containing `<form>` element.\n * This attribute allows you to place the form control outside of a form and associate it\n * with the form that has this `id`. The form must be in the same document\n * or shadow root for this to work.\n */\n @property({ reflect: true }) form = '';\n\n /** Makes the input a required field. */\n @property({ reflect: true, type: Boolean }) required = false;\n\n /** Suppress the value from being displayed in the file control */\n @property({ attribute: 'hide-value', type: Boolean }) hideValue = false;\n\n @query('.input__control') input: HTMLInputElement;\n\n @query('.button') button: SynButton;\n\n @query('.droparea') dropareaWrapper: HTMLDivElement;\n\n @query('.droparea__icon') dropareaIcon: HTMLSpanElement;\n\n @query('.input__value') inputChosen: HTMLSpanElement;\n\n /** Gets the validity state object */\n get validity() {\n return this.input.validity;\n }\n\n /** Gets the validation message */\n get validationMessage() {\n return this.input.validationMessage;\n }\n\n /**\n * Checks for validity but does not show a validation message.\n * Returns `true` when valid and `false` when invalid.\n */\n checkValidity() {\n return this.input.checkValidity();\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() {\n return this.input.reportValidity();\n }\n\n /** Sets a custom validation message. Pass an empty string to restore validity. */\n setCustomValidity(message: string) {\n this.input.setCustomValidity(message);\n this.formControlController.updateValidity();\n }\n\n @watch('disabled', { waitUntilFirstUpdate: true })\n handleDisabledChange() {\n // Disabled form controls are always valid\n this.formControlController.setValidity(this.disabled);\n }\n\n @watch('value', { waitUntilFirstUpdate: true })\n async handleValueChange() {\n await this.updateComplete;\n this.formControlController.updateValidity();\n }\n\n /** Sets focus on the button or droparea. */\n focus(options?: FocusOptions) {\n if (this.droparea) {\n this.dropareaWrapper?.focus(options);\n return;\n }\n\n this.button?.focus(options);\n }\n\n /** Removes focus from the button or droparea. */\n blur() {\n if (this.droparea) {\n this.dropareaWrapper?.blur();\n return;\n }\n\n this.button?.blur();\n }\n\n private handleInvalid(event: Event) {\n this.formControlController.setValidity(false);\n this.formControlController.emitInvalidEvent(event);\n }\n\n private handleFiles(files: FileList | null) {\n if (!files) {\n this.value = '';\n return;\n }\n this.files = files;\n }\n\n private async handleTransferItems(items: DataTransferItemList | null): Promise<FileList> {\n if (!items) {\n this.value = '';\n return new Promise((_resolve, reject) => { reject(new Error('No proper items found')); });\n }\n\n const entries = Array\n .from(items)\n .map(item => item.webkitGetAsEntry());\n\n const filesPromises = entries.map(entry => this.getFilesFromEntry(entry));\n const filesArray = await Promise.all(filesPromises);\n const files = filesArray.flat();\n\n const dataTransfer = new DataTransfer();\n Array.from(files).forEach(f => dataTransfer.items.add(f));\n return dataTransfer.files;\n }\n\n private async getFilesFromEntry(entry: FileSystemEntry | null): Promise<File[]> {\n if (!entry) {\n return [];\n }\n if (entry.isFile) {\n return new Promise<File[]>((resolve, reject) => {\n (entry as FileSystemFileEntry).file(file => resolve([file]), reject);\n });\n }\n if (entry.isDirectory) {\n return new Promise<File[]>((resolve, reject) => {\n const dirReader = (entry as FileSystemDirectoryEntry).createReader();\n dirReader.readEntries((entries) => {\n Promise.all(entries.map(e => this.getFilesFromEntry(e)))\n .then((files) => { resolve(files.flat()); })\n .catch(reject);\n });\n });\n }\n return [];\n }\n\n private handleClick(e: Event) {\n e.preventDefault();\n this.input.click();\n }\n\n /** Handles the change event of the native input */\n private handleChange(e: Event) {\n e.preventDefault();\n e.stopPropagation();\n\n this.emit('syn-input');\n this.emit('syn-change');\n }\n\n private handleDragOver(e: DragEvent) {\n e.preventDefault();\n e.stopPropagation();\n this.userIsDragging = true;\n }\n\n private handleDragLeave(e: DragEvent) {\n e.preventDefault();\n e.stopPropagation();\n this.userIsDragging = false;\n }\n\n // eslint-disable-next-line complexity\n private async handleDrop(e: DragEvent) {\n e.preventDefault();\n e.stopPropagation();\n\n if (!e.dataTransfer) {\n return;\n }\n\n const files = await this.handleTransferItems(e.dataTransfer?.items);\n\n this.userIsDragging = false;\n\n if (!files) {\n return;\n }\n\n // webkitdirectory also allows multiple files\n if (!this.multiple && !this.webkitdirectory && files.length > 1) {\n this.emit('syn-error');\n return;\n }\n\n // Use the transferred file list from the drag drop interface\n const hasTrigger = this.hasSlotController.test('trigger');\n if (!hasTrigger) {\n const disappearAnimation = getAnimation(this.inputChosen, 'file.text.disappear', { dir: this.localize.dir() });\n const appearAnimation = getAnimation(this.inputChosen, 'file.text.appear', { dir: this.localize.dir() });\n\n if (this.droparea) {\n const dropIconAnimation = getAnimation(this.dropareaIcon, 'file.iconDrop', { dir: this.localize.dir() });\n // eslint-disable-next-line @typescript-eslint/no-floating-promises\n animateTo(this.dropareaIcon, dropIconAnimation.keyframes, dropIconAnimation.options);\n }\n // eslint-disable-next-line max-len\n await animateTo(this.inputChosen, disappearAnimation.keyframes, disappearAnimation.options);\n this.handleFiles(files);\n await animateTo(this.inputChosen, appearAnimation.keyframes, appearAnimation.options);\n } else {\n this.handleFiles(files);\n }\n\n this.input.dispatchEvent(new Event('change'));\n }\n\n /**\n * Handle the focus of the droparea and emit focus event\n */\n private handleFocus() {\n this.emit('syn-focus');\n }\n\n /**\n * Handle the blur of the droparea and emit blur event\n */\n private handleBlur() {\n this.emit('syn-blur');\n }\n\n private renderValue() {\n let hasFiles = false;\n let fileChosenLabel = this.localize.term('numFilesSelected', 0, this.webkitdirectory);\n\n if (this.files && this.files?.length > 0) {\n hasFiles = true;\n fileChosenLabel = this.files.length === 1\n ? this.files[0].name\n : this.localize.term('numFilesSelected', this.files.length, this.webkitdirectory);\n }\n\n return html`\n <span\n class=${classMap({\n input__value: true,\n 'input__value--hidden': this.hideValue,\n 'input__value--placeholder': !hasFiles,\n })}\n part=\"value\"\n >\n ${fileChosenLabel}\n </span>\n `;\n }\n\n /* eslint-disable @typescript-eslint/unbound-method */\n private renderDroparea() {\n return html`\n <div\n class=\"droparea\"\n @click=${this.handleClick}\n @keypress=${this.handleClick}\n @focus=${this.handleFocus}\n @blur=${this.handleBlur}\n tabindex=${this.disabled ? -1 : 0}\n part=\"droparea\"\n >\n <div\n class=\"droparea__background\"\n part=\"droparea-background\"\n >\n <span part=\"droparea-icon\" class=\"droparea__icon\">\n <slot name=\"droparea-icon\">\n <syn-icon name=\"upload-file\" library=\"system\" ></syn-icon>\n </slot>\n </span>\n <p\n class=\"droparea__text\"\n part=\"droparea-value\"\n >\n <strong>${this.localize.term(this.webkitdirectory ? 'folderDragDrop' : 'fileDragDrop')}</strong>\n ${this.renderValue()}\n </p>\n </div>\n </div>\n `;\n }\n /* eslint-enable @typescript-eslint/unbound-method */\n\n /* eslint-disable @typescript-eslint/unbound-method */\n private renderButton() {\n let buttonText = this.localize.term('fileButtonText');\n if (this.multiple) {\n buttonText = this.localize.term('fileButtonTextMultiple');\n }\n if (this.webkitdirectory) {\n buttonText = this.localize.term('folderButtonText');\n }\n\n return html`\n <div\n class=\"button__wrapper\"\n part=\"button-wrapper\"\n >\n <syn-button\n class=\"button\"\n @click=${this.handleClick}\n ?disabled=${this.disabled}\n exportparts=\"base:button__base\"\n part=\"button\"\n size=${this.size}\n variant=\"outline\"\n >\n ${buttonText}\n </syn-button>\n ${this.renderValue()}\n </div>\n `;\n }\n /* eslint-enable @typescript-eslint/unbound-method */\n\n /* eslint-disable @typescript-eslint/unbound-method */\n // eslint-disable-next-line complexity\n render() {\n const hasLabel = this.label || !!this.hasSlotController.test('label');\n const hasHelpText = this.helpText ? true : !!this.hasSlotController.test('help-text');\n const hasTrigger = !!this.hasSlotController.test('trigger');\n\n return html`\n <div\n class=${classMap({\n 'form-control': true,\n 'form-control--droparea': this.droparea,\n 'form-control--has-help-text': hasHelpText,\n 'form-control--has-label': hasLabel,\n 'form-control--large': this.size === 'large',\n 'form-control--medium': this.size === 'medium',\n 'form-control--small': this.size === 'small',\n 'form-control--user-dragging': this.userIsDragging,\n })}\n @dragenter=${this.handleDragOver}\n @dragleave=${this.handleDragLeave}\n @dragover=${this.handleDragOver}\n @drop=${this.handleDrop}\n part=\"form-control\"\n >\n ${\n hasTrigger\n ? html`\n <slot \n @click=${this.handleClick}\n @keypress=${this.handleClick}\n name=\"trigger\"\n part=\"trigger\"\n ></slot>\n `\n : html`\n <label\n aria-hidden=${hasLabel ? 'false' : 'true'}\n class=\"form-control__label\"\n for=\"input\"\n part=\"form-control-label\"\n >\n <slot name=\"label\">${this.label}</slot>\n </label>\n\n <div\n class=\"form-control-input\"\n part=\"form-control-input\"\n >\n\n ${this.droparea ? this.renderDroparea() : this.renderButton()}\n </div>\n\n <div\n aria-hidden=${hasHelpText ? 'false' : 'true'}\n class=\"form-control__help-text\"\n id=\"help-text\"\n part=\"form-control-help-text\"\n >\n <slot name=\"help-text\">${this.helpText}</slot>\n </div>\n `\n }\n <input\n accept=${this.accept}\n aria-describedby=\"help-text\"\n @change=${this.handleChange}\n class=\"input__control\"\n ?disabled=${this.disabled}\n id=\"input\"\n @invalid=${this.handleInvalid}\n ?multiple=${this.multiple}\n name=${ifDefined(this.name)}\n ?required=${this.required}\n type=\"file\"\n tabindex=\"-1\"\n ?webkitdirectory=${this.webkitdirectory}\n >\n </div>\n `;\n }\n /* eslint-enable @typescript-eslint/unbound-method */\n}\n\nsetDefaultAnimation('file.iconDrop', {\n keyframes: [\n { scale: 1 },\n { scale: 0.7 },\n { scale: 1 },\n ],\n options: { duration: 600, easing: 'ease-out' },\n});\n\nsetDefaultAnimation('file.text.disappear', {\n keyframes: [\n { opacity: 1 },\n { opacity: 0, transform: 'translateY(-40%)' },\n ],\n options: { duration: 300, easing: 'cubic-bezier(0.45, 1.45, 0.8, 1)' },\n});\n\nsetDefaultAnimation('file.text.appear', {\n keyframes: [\n { opacity: 0, transform: 'translateY(40%)' },\n { opacity: 1 },\n ],\n options: { duration: 300, easing: 'cubic-bezier(0.45, 1.45, 0.8, 1)' },\n});\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/components/radio/radio.component.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* 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';\n\n/**\n * @summary Radios allow the user to select a single option from a group.\n * @documentation https://synergy.style/components/radio\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 */\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;\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": ";;;;;;;;;;;;;;;;;;;;;;;AAQA,SAAS,gBAAgB;AACzB,SAAS,YAAY;AACrB,SAAS,UAAU,aAAa;AA4BhC,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;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/components/alert/alert.component.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\nimport { animateTo, stopAnimations } from '../../internal/animate.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { getAnimation, setDefaultAnimation } from '../../utilities/animation-registry.js';\nimport { HasSlotController } from '../../internal/slot.js';\nimport { html } from 'lit';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport { property, query, state } from 'lit/decorators.js';\nimport { waitForEvent } from '../../internal/event.js';\nimport { watch } from '../../internal/watch.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport SynIconButton from '../icon-button/icon-button.component.js';\nimport styles from './alert.styles.js';\nimport customStyles from './alert.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\n\n/**\n * @summary Alerts are used to display important messages inline or as toast notifications.\n * @documentation https://synergy.style/components/alert\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon-button\n *\n * @slot - The alert's main content.\n * @slot icon - An icon to show in the alert. Works best with `<syn-icon>`.\n *\n * @event syn-show - Emitted when the alert opens.\n * @event syn-after-show - Emitted after the alert opens and all animations are complete.\n * @event syn-hide - Emitted when the alert closes.\n * @event syn-after-hide - Emitted after the alert closes and all animations are complete.\n *\n * @csspart base - The component's base wrapper.\n * @csspart icon - The container that wraps the optional icon.\n * @csspart message - The container that wraps the alert's main content.\n * @csspart close-button - The close button, an `<syn-icon-button>`.\n * @csspart close-button__base - The close button's exported `base` part.\n *\n * @animation alert.show - The animation to use when showing the alert.\n * @animation alert.hide - The animation to use when hiding the alert.\n */\nexport default class SynAlert extends SynergyElement {\n static styles: CSSResultGroup = [componentStyles, styles, customStyles];\n static dependencies = { 'syn-icon-button': SynIconButton };\n\n private autoHideTimeout: number;\n private remainingTimeInterval: number;\n private countdownAnimation?: Animation;\n private readonly hasSlotController = new HasSlotController(this, 'icon', 'suffix');\n private readonly localize = new LocalizeController(this);\n\n private static currentToastStack: HTMLDivElement;\n\n private static get toastStack() {\n if (!this.currentToastStack) {\n this.currentToastStack = Object.assign(document.createElement('div'), {\n className: 'syn-toast-stack'\n });\n }\n return this.currentToastStack;\n }\n\n @query('[part~=\"base\"]') base: HTMLElement;\n\n @query('.alert__countdown-elapsed') countdownElement: HTMLElement;\n\n /**\n * Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can\n * use the `show()` and `hide()` methods and this attribute will reflect the alert's open state.\n */\n @property({ type: Boolean, reflect: true }) open = false;\n\n /** Enables a close button that allows the user to dismiss the alert. */\n @property({ type: Boolean, reflect: true }) closable = false;\n\n /** The alert's theme variant. */\n @property({ reflect: true }) variant: 'primary' | 'success' | 'neutral' | 'warning' | 'danger' = 'primary';\n\n /**\n * The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with\n * the alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`, meaning\n * the alert will not close on its own.\n */\n @property({ type: Number }) duration = Infinity;\n\n /**\n * Enables a countdown that indicates the remaining time the alert will be displayed.\n * Typically used to indicate the remaining time before a whole app refresh.\n */\n private countdown? : 'rtl' | 'ltr';\n\n @state() private remainingTime = this.duration;\n\n firstUpdated() {\n this.base.hidden = !this.open;\n }\n\n private restartAutoHide() {\n this.handleCountdownChange();\n clearTimeout(this.autoHideTimeout);\n clearInterval(this.remainingTimeInterval);\n if (this.open && this.duration < Infinity) {\n this.autoHideTimeout = window.setTimeout(() => this.hide(), this.duration);\n this.remainingTime = this.duration;\n this.remainingTimeInterval = window.setInterval(() => {\n this.remainingTime -= 100;\n }, 100);\n }\n }\n\n private pauseAutoHide() {\n this.countdownAnimation?.pause();\n clearTimeout(this.autoHideTimeout);\n clearInterval(this.remainingTimeInterval);\n }\n\n private resumeAutoHide() {\n if (this.duration < Infinity) {\n this.autoHideTimeout = window.setTimeout(() => this.hide(), this.remainingTime);\n this.remainingTimeInterval = window.setInterval(() => {\n this.remainingTime -= 100;\n }, 100);\n this.countdownAnimation?.play();\n }\n }\n\n private handleCountdownChange() {\n if (this.open && this.duration < Infinity && this.countdown) {\n const { countdownElement } = this;\n const start = '100%';\n const end = '0';\n this.countdownAnimation = countdownElement.animate([{ width: start }, { width: end }], {\n duration: this.duration,\n easing: 'linear'\n });\n }\n }\n\n private handleCloseClick() {\n this.hide();\n }\n\n @watch('open', { waitUntilFirstUpdate: true })\n async handleOpenChange() {\n if (this.open) {\n // Show\n this.emit('syn-show');\n\n if (this.duration < Infinity) {\n this.restartAutoHide();\n }\n\n await stopAnimations(this.base);\n this.base.hidden = false;\n const { keyframes, options } = getAnimation(this, 'alert.show', { dir: this.localize.dir() });\n await animateTo(this.base, keyframes, options);\n\n this.emit('syn-after-show');\n } else {\n // Hide\n this.emit('syn-hide');\n\n clearTimeout(this.autoHideTimeout);\n clearInterval(this.remainingTimeInterval);\n\n await stopAnimations(this.base);\n const { keyframes, options } = getAnimation(this, 'alert.hide', { dir: this.localize.dir() });\n await animateTo(this.base, keyframes, options);\n this.base.hidden = true;\n\n this.emit('syn-after-hide');\n }\n }\n\n @watch('duration')\n handleDurationChange() {\n this.restartAutoHide();\n }\n\n /** Shows the alert. */\n async show() {\n if (this.open) {\n return undefined;\n }\n\n this.open = true;\n return waitForEvent(this, 'syn-after-show');\n }\n\n /** Hides the alert */\n async hide() {\n if (!this.open) {\n return undefined;\n }\n\n this.open = false;\n return waitForEvent(this, 'syn-after-hide');\n }\n\n /**\n * Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\n * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\n * calling this method again. The returned promise will resolve after the alert is hidden.\n */\n async toast() {\n return new Promise<void>(resolve => {\n this.handleCountdownChange();\n if (SynAlert.toastStack.parentElement === null) {\n document.body.append(SynAlert.toastStack);\n }\n\n SynAlert.toastStack.appendChild(this);\n\n // Wait for the toast stack to render\n requestAnimationFrame(() => {\n // eslint-disable-next-line @typescript-eslint/no-unused-expressions -- force a reflow for the initial transition\n this.clientWidth;\n this.show();\n });\n\n this.addEventListener(\n 'syn-after-hide',\n () => {\n SynAlert.toastStack.removeChild(this);\n resolve();\n\n // Remove the toast stack from the DOM when there are no more alerts\n if (SynAlert.toastStack.querySelector('syn-alert') === null) {\n SynAlert.toastStack.remove();\n }\n },\n { once: true }\n );\n });\n }\n\n render() {\n return html`\n <div\n part=\"base\"\n class=${classMap({\n alert: true,\n 'alert--open': this.open,\n 'alert--closable': this.closable,\n 'alert--has-icon': this.hasSlotController.test('icon'),\n 'alert--primary': this.variant === 'primary',\n 'alert--success': this.variant === 'success',\n 'alert--neutral': this.variant === 'neutral',\n 'alert--warning': this.variant === 'warning',\n 'alert--danger': this.variant === 'danger'\n })}\n role=\"alert\"\n aria-hidden=${this.open ? 'false' : 'true'}\n @mouseenter=${this.pauseAutoHide}\n @mouseleave=${this.resumeAutoHide}\n >\n <div part=\"icon\" class=\"alert__icon\">\n <slot name=\"icon\"></slot>\n </div>\n\n <div part=\"message\" class=\"alert__message\" aria-live=\"polite\">\n <slot></slot>\n </div>\n\n ${this.closable\n ? html`\n <syn-icon-button\n part=\"close-button\"\n exportparts=\"base:close-button__base\"\n class=\"alert__close-button\"\n name=\"x-lg\"\n library=\"system\"\n label=${this.localize.term('close')}\n @click=${this.handleCloseClick}\n ></syn-icon-button>\n `\n : ''}\n\n <div role=\"timer\" class=\"alert__timer\">${this.remainingTime}</div>\n\n ${this.countdown\n ? html`\n <div\n class=${classMap({\n alert__countdown: true,\n 'alert__countdown--ltr': this.countdown === 'ltr'\n })}\n >\n <div class=\"alert__countdown-elapsed\"></div>\n </div>\n `\n : ''}\n </div>\n `;\n }\n}\n\nsetDefaultAnimation('alert.show', {\n keyframes: [\n { opacity: 0, scale: 0.8 },\n { opacity: 1, scale: 1 }\n ],\n options: { duration: 250, easing: 'ease' }\n});\n\nsetDefaultAnimation('alert.hide', {\n keyframes: [\n { opacity: 1, scale: 1 },\n { opacity: 0, scale: 0.8 }\n ],\n options: { duration: 250, easing: 'ease' }\n});\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/components/radio-button/radio-button.component.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\nimport { classMap } from 'lit/directives/class-map.js';\nimport { HasSlotController } from '../../internal/slot.js';\nimport { html } from 'lit/static-html.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { property, query, 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 styles from './radio-button.styles.js';\nimport type { CSSResultGroup } from 'lit';\n\n/**\n * @summary Radios buttons allow the user to select a single option from a group using a button-like control.\n * @documentation https://synergy.style/components/radio-button\n * @status stable\n * @since 2.0\n *\n * @slot - The radio button's label.\n * @slot prefix - A presentational prefix icon or similar element.\n * @slot suffix - A presentational suffix icon or similar element.\n *\n * @event syn-blur - Emitted when the button loses focus.\n * @event syn-focus - Emitted when the button gains focus.\n *\n * @csspart base - The component's base wrapper.\n * @csspart button - The internal `<button>` element.\n * @csspart button--checked - The internal button element when the radio button is checked.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart label - The container that wraps the radio button's label.\n * @csspart suffix - The container that wraps the suffix.\n */\nexport default class SynRadioButton extends SynergyElement {\n static styles: CSSResultGroup = [componentStyles, styles];\n\n private readonly hasSlotController = new HasSlotController(this, '[default]', 'prefix', 'suffix');\n\n @query('.button') input: HTMLInputElement;\n @query('.hidden-input') hiddenInput: HTMLInputElement;\n\n @state() protected hasFocus = false;\n\n /**\n * @internal The radio button's checked state. This is exposed as an \"internal\" attribute so we can reflect it, making\n * it easier to style in button groups.\n */\n @property({ type: Boolean, reflect: true }) checked = false;\n\n /** The radio's value. When selected, the radio group will receive this value. */\n @property() value: string;\n\n /** Disables the radio button. */\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /**\n * The radio button's size. When used inside a radio group, the size will be determined by the radio group's size so\n * this attribute can typically be omitted.\n */\n @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n /** Draws a pill-style radio button with rounded edges. */\n @property({ type: Boolean, reflect: true }) pill = false;\n\n connectedCallback() {\n super.connectedCallback();\n this.setAttribute('role', 'presentation');\n }\n\n private handleBlur() {\n this.hasFocus = false;\n this.emit('syn-blur');\n }\n\n private handleClick(e: MouseEvent) {\n if (this.disabled) {\n e.preventDefault();\n e.stopPropagation();\n return;\n }\n\n this.checked = true;\n }\n\n private handleFocus() {\n this.hasFocus = true;\n this.emit('syn-focus');\n }\n\n @watch('disabled', { waitUntilFirstUpdate: true })\n handleDisabledChange() {\n this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');\n }\n\n /** Sets focus on the radio button. */\n focus(options?: FocusOptions) {\n this.input.focus(options);\n }\n\n /** Removes focus from the radio button. */\n blur() {\n this.input.blur();\n }\n\n render() {\n return html`\n <div part=\"base\" role=\"presentation\">\n <button\n part=\"${`button${this.checked ? ' button--checked' : ''}`}\"\n role=\"radio\"\n aria-checked=\"${this.checked}\"\n class=${classMap({\n button: true,\n 'button--default': true,\n 'button--small': this.size === 'small',\n 'button--medium': this.size === 'medium',\n 'button--large': this.size === 'large',\n 'button--checked': this.checked,\n 'button--disabled': this.disabled,\n 'button--focused': this.hasFocus,\n 'button--outline': true,\n 'button--pill': this.pill,\n 'button--has-label': this.hasSlotController.test('[default]'),\n 'button--has-prefix': this.hasSlotController.test('prefix'),\n 'button--has-suffix': this.hasSlotController.test('suffix')\n })}\n aria-disabled=${this.disabled}\n type=\"button\"\n value=${ifDefined(this.value)}\n @blur=${this.handleBlur}\n @focus=${this.handleFocus}\n @click=${this.handleClick}\n >\n <slot name=\"prefix\" part=\"prefix\" class=\"button__prefix\"></slot>\n <slot part=\"label\" class=\"button__label\"></slot>\n <slot name=\"suffix\" part=\"suffix\" class=\"button__suffix\"></slot>\n </button>\n </div>\n `;\n }\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAQA,SAAS,gBAAgB;AAEzB,SAAS,YAAY;AACrB,SAAS,iBAAiB;AAC1B,SAAS,UAAU,OAAO,aAAa;AA2BvC,IAAqB,iBAArB,cAA4C,eAAe;AAAA,EAA3D;AAAA;AAGE,SAAiB,oBAAoB,IAAI,kBAAkB,MAAM,aAAa,UAAU,QAAQ;AAKvF,SAAU,WAAW;AAMc,mBAAU;AAMV,oBAAW;AAM1B,gBAAqC;AAGtB,gBAAO;AAAA;AAAA,EAEnD,oBAAoB;AAClB,UAAM,kBAAkB;AACxB,SAAK,aAAa,QAAQ,cAAc;AAAA,EAC1C;AAAA,EAEQ,aAAa;AACnB,SAAK,WAAW;AAChB,SAAK,KAAK,UAAU;AAAA,EACtB;AAAA,EAEQ,YAAY,GAAe;AACjC,QAAI,KAAK,UAAU;AACjB,QAAE,eAAe;AACjB,QAAE,gBAAgB;AAClB;AAAA,IACF;AAEA,SAAK,UAAU;AAAA,EACjB;AAAA,EAEQ,cAAc;AACpB,SAAK,WAAW;AAChB,SAAK,KAAK,WAAW;AAAA,EACvB;AAAA,EAGA,uBAAuB;AACrB,SAAK,aAAa,iBAAiB,KAAK,WAAW,SAAS,OAAO;AAAA,EACrE;AAAA;AAAA,EAGA,MAAM,SAAwB;AAC5B,SAAK,MAAM,MAAM,OAAO;AAAA,EAC1B;AAAA;AAAA,EAGA,OAAO;AACL,SAAK,MAAM,KAAK;AAAA,EAClB;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA;AAAA,kBAGO,SAAS,KAAK,UAAU,qBAAqB,EAAE,EAAE;AAAA;AAAA,0BAEzC,KAAK,OAAO;AAAA,kBACpB,SAAS;AAAA,MACf,QAAQ;AAAA,MACR,mBAAmB;AAAA,MACnB,iBAAiB,KAAK,SAAS;AAAA,MAC/B,kBAAkB,KAAK,SAAS;AAAA,MAChC,iBAAiB,KAAK,SAAS;AAAA,MAC/B,mBAAmB,KAAK;AAAA,MACxB,oBAAoB,KAAK;AAAA,MACzB,mBAAmB,KAAK;AAAA,MACxB,mBAAmB;AAAA,MACnB,gBAAgB,KAAK;AAAA,MACrB,qBAAqB,KAAK,kBAAkB,KAAK,WAAW;AAAA,MAC5D,sBAAsB,KAAK,kBAAkB,KAAK,QAAQ;AAAA,MAC1D,sBAAsB,KAAK,kBAAkB,KAAK,QAAQ;AAAA,IAC5D,CAAC,CAAC;AAAA,0BACc,KAAK,QAAQ;AAAA;AAAA,kBAErB,UAAU,KAAK,KAAK,CAAC;AAAA,kBACrB,KAAK,UAAU;AAAA,mBACd,KAAK,WAAW;AAAA,mBAChB,KAAK,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQjC;AACF;AA3GqB,eACZ,SAAyB,CAAC,0BAAiB,2BAAM;AAItC;AAAA,EAAjB,MAAM,SAAS;AAAA,GALG,eAKD;AACM;AAAA,EAAvB,MAAM,eAAe;AAAA,GANH,eAMK;AAEL;AAAA,EAAlB,MAAM;AAAA,GARY,eAQA;AAMyB;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAdvB,eAcyB;AAGhC;AAAA,EAAX,SAAS;AAAA,GAjBS,eAiBP;AAGgC;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GApBvB,eAoByB;AAMf;AAAA,EAA5B,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GA1BR,eA0BU;AAGe;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GA7BvB,eA6ByB;AA4B5C;AAAA,EADC,MAAM,YAAY,EAAE,sBAAsB,KAAK,CAAC;AAAA,GAxD9B,eAyDnB;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|