@tylertech/forge 3.0.0-next.13 → 3.0.0-next.14
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/custom-elements.json +27366 -24598
- package/dist/esm/accordion/index.js +1 -1
- package/dist/esm/app-bar/app-bar/index.js +7 -0
- package/dist/esm/app-bar/app-bar/index.js.map +7 -0
- package/dist/esm/app-bar/help-button/index.js +1 -1
- package/dist/esm/app-bar/index.js +1 -1
- package/dist/esm/app-bar/menu-button/index.js +1 -1
- package/dist/esm/app-bar/notification-button/index.js +1 -1
- package/dist/esm/app-bar/profile-button/index.js +1 -1
- package/dist/esm/app-bar/search/index.js +1 -1
- package/dist/esm/autocomplete/index.js +1 -1
- package/dist/esm/avatar/index.js +1 -1
- package/dist/esm/backdrop/index.js +1 -1
- package/dist/esm/badge/index.js +1 -1
- package/dist/esm/banner/index.js +1 -1
- package/dist/esm/bottom-sheet/index.js +1 -1
- package/dist/esm/busy-indicator/index.js +1 -1
- package/dist/esm/button/index.js +1 -1
- package/dist/esm/button-area/index.js +1 -1
- package/dist/esm/button-toggle/button-toggle/index.js +1 -1
- package/dist/esm/button-toggle/button-toggle-group/index.js +1 -1
- package/dist/esm/button-toggle/index.js +1 -1
- package/dist/esm/calendar/calendar-dropdown/index.js +1 -1
- package/dist/esm/calendar/calendar-menu/index.js +1 -1
- package/dist/esm/calendar/index.js +1 -1
- package/dist/esm/card/index.js +1 -1
- package/dist/esm/checkbox/index.js +1 -1
- package/dist/esm/chip-field/index.js +1 -1
- package/dist/esm/chips/chip/index.js +1 -1
- package/dist/esm/chips/chip-set/index.js +1 -1
- package/dist/esm/chips/index.js +1 -1
- package/dist/esm/chunks/{chunk.FLWNOP42.js → chunk.26E4L52W.js} +2 -2
- package/dist/esm/chunks/chunk.2GJ54C3Q.js +7 -0
- package/dist/esm/chunks/chunk.2GJ54C3Q.js.map +7 -0
- package/dist/esm/chunks/{chunk.ZRSDTCSD.js → chunk.2GYZM6ZG.js} +2 -2
- package/dist/esm/chunks/chunk.2YDKRTKP.js +7 -0
- package/dist/esm/chunks/chunk.2YDKRTKP.js.map +7 -0
- package/dist/esm/chunks/chunk.3JCHXLPT.js +7 -0
- package/dist/esm/chunks/{chunk.LUNKNRRH.js.map → chunk.3JCHXLPT.js.map} +3 -3
- package/dist/esm/chunks/chunk.3PKNBYMG.js +6 -0
- package/dist/esm/chunks/chunk.3PKNBYMG.js.map +7 -0
- package/dist/esm/chunks/chunk.3RMBFRGC.js +7 -0
- package/dist/esm/chunks/{chunk.DTLZOIUQ.js → chunk.3UO6S3IK.js} +2 -2
- package/dist/esm/chunks/chunk.3ZRQFXQU.js +7 -0
- package/dist/esm/chunks/{chunk.XNFS7YIB.js.map → chunk.3ZRQFXQU.js.map} +1 -1
- package/dist/esm/chunks/{chunk.MWYQRG5W.js → chunk.4B5IOZAT.js} +2 -2
- package/dist/esm/chunks/{chunk.IDMDBMBR.js → chunk.4QDN5PM6.js} +2 -2
- package/dist/esm/chunks/{chunk.Z5RROENA.js → chunk.543K5Y4E.js} +2 -2
- package/dist/esm/chunks/{chunk.W2LN45WY.js → chunk.57PXXJA6.js} +2 -2
- package/dist/esm/chunks/{chunk.675V42JS.js → chunk.5C24LZNU.js} +2 -2
- package/dist/esm/chunks/{chunk.V24M62MC.js → chunk.5H4G6BWX.js} +2 -2
- package/dist/esm/chunks/{chunk.QLCVRJ3Q.js → chunk.5VHUMZYS.js} +2 -2
- package/dist/esm/chunks/{chunk.OWZREAT6.js → chunk.6DXDNQUR.js} +2 -2
- package/dist/esm/chunks/{chunk.7VMJLHQY.js → chunk.6Q3SV2R2.js} +2 -2
- package/dist/esm/chunks/chunk.6Y45DLA6.js +7 -0
- package/dist/esm/chunks/chunk.6Y45DLA6.js.map +7 -0
- package/dist/esm/chunks/{chunk.IHAHJPMB.js → chunk.7ABZUBTT.js} +2 -2
- package/dist/esm/chunks/{chunk.Z5ZLKM7W.js → chunk.7BGOH44S.js} +2 -2
- package/dist/esm/chunks/{chunk.LOG6GQOK.js → chunk.7DHDFH5L.js} +2 -2
- package/dist/esm/chunks/{chunk.3R4BUIQP.js → chunk.7PP6QHOM.js} +2 -2
- package/dist/esm/chunks/{chunk.YBZK6LJZ.js → chunk.7UXLLUTN.js} +2 -2
- package/dist/esm/chunks/{chunk.5RM65QPN.js → chunk.7W2UWAZX.js} +2 -2
- package/dist/esm/chunks/chunk.A72W7RW7.js +7 -0
- package/dist/esm/chunks/{chunk.STB2FEUA.js.map → chunk.A72W7RW7.js.map} +2 -2
- package/dist/esm/chunks/{chunk.6NTYTHAL.js → chunk.AEJGC4YG.js} +2 -2
- package/dist/esm/chunks/{chunk.BTXY3XMJ.js → chunk.B46Q3AFP.js} +2 -2
- package/dist/esm/chunks/{chunk.QJCNMYD3.js → chunk.BFUGFHEH.js} +2 -2
- package/dist/esm/chunks/chunk.BLW6QESQ.js +12 -0
- package/dist/esm/chunks/chunk.BLW6QESQ.js.map +7 -0
- package/dist/esm/chunks/{chunk.2ZU6LWHE.js → chunk.BMQYEYCT.js} +2 -2
- package/dist/esm/chunks/{chunk.HOLCNJXC.js → chunk.C5IB44HX.js} +2 -2
- package/dist/esm/chunks/chunk.CNRFOWHY.js +7 -0
- package/dist/esm/chunks/{chunk.QQRPV4RN.js.map → chunk.CNRFOWHY.js.map} +2 -2
- package/dist/esm/chunks/{chunk.G73KL7P2.js → chunk.CTZ3AWDW.js} +2 -2
- package/dist/esm/chunks/{chunk.YA3RDJCV.js → chunk.CZOABXEQ.js} +2 -2
- package/dist/esm/chunks/{chunk.YA3RDJCV.js.map → chunk.CZOABXEQ.js.map} +2 -2
- package/dist/esm/chunks/{chunk.QLOYOZN3.js → chunk.DD35U4AA.js} +2 -2
- package/dist/esm/chunks/{chunk.XEFWZKHQ.js → chunk.DDXIHZFX.js} +2 -2
- package/dist/esm/chunks/{chunk.MKJCHUJH.js → chunk.DOEG3DWJ.js} +2 -2
- package/dist/esm/chunks/{chunk.2MSL7CYM.js → chunk.DTKFE7YB.js} +2 -2
- package/dist/esm/chunks/{chunk.FXIWCHLW.js → chunk.E3GVKR4E.js} +2 -2
- package/dist/esm/chunks/{chunk.FFHSUJFM.js → chunk.EBSBAFCX.js} +2 -2
- package/dist/esm/chunks/{chunk.RES7WDKH.js → chunk.F2EBSV5Z.js} +2 -2
- package/dist/esm/chunks/chunk.F6KM5FO6.js +7 -0
- package/dist/esm/chunks/{chunk.5WMYF27O.js.map → chunk.F6KM5FO6.js.map} +2 -2
- package/dist/esm/chunks/{chunk.BBCZNGT3.js → chunk.FB6ZLH6P.js} +2 -2
- package/dist/esm/chunks/{chunk.VFKHRAWD.js → chunk.FQSL747N.js} +2 -2
- package/dist/esm/chunks/{chunk.JVLJH6PR.js → chunk.G2BNY5QQ.js} +2 -2
- package/dist/esm/chunks/{chunk.URJQNB3S.js → chunk.GS72TBUD.js} +2 -2
- package/dist/esm/chunks/{chunk.5PG6WIIX.js → chunk.GT3VPSXY.js} +2 -2
- package/dist/esm/chunks/{chunk.IMLJD35R.js → chunk.GWJ4QCSW.js} +2 -2
- package/dist/esm/chunks/{chunk.IISWKFCX.js → chunk.H7GW57Q6.js} +2 -2
- package/dist/esm/chunks/{chunk.BB4UF5RX.js → chunk.HHHBS6FB.js} +2 -2
- package/dist/esm/chunks/{chunk.KPJWP77R.js → chunk.I3NHK2S3.js} +2 -2
- package/dist/esm/chunks/{chunk.5N4N6DL6.js → chunk.IEB5KRFQ.js} +2 -2
- package/dist/esm/chunks/chunk.IT66AOX7.js +7 -0
- package/dist/esm/chunks/chunk.IT66AOX7.js.map +7 -0
- package/dist/esm/chunks/{chunk.BQ2X5SBP.js → chunk.IVUK3W34.js} +2 -2
- package/dist/esm/chunks/{chunk.ZGRQDDHO.js → chunk.IW7HALLT.js} +2 -2
- package/dist/esm/chunks/chunk.J2KHTGSB.js +7 -0
- package/dist/esm/chunks/chunk.J2KHTGSB.js.map +7 -0
- package/dist/esm/chunks/{chunk.7ZROQ6D3.js → chunk.J3B5CWKT.js} +2 -2
- package/dist/esm/chunks/{chunk.TBGMJQYJ.js → chunk.JVK64JDZ.js} +2 -2
- package/dist/esm/chunks/chunk.KFDYMENL.js +7 -0
- package/dist/esm/chunks/chunk.KFDYMENL.js.map +7 -0
- package/dist/esm/chunks/{chunk.AUBOJZQ7.js → chunk.KLPF4CNX.js} +2 -2
- package/dist/esm/chunks/chunk.KTYYBWTN.js +7 -0
- package/dist/esm/chunks/{chunk.QN5T26HH.js.map → chunk.KTYYBWTN.js.map} +2 -2
- package/dist/esm/chunks/{chunk.IT7XPDAV.js → chunk.L4Y4RO5O.js} +2 -2
- package/dist/esm/chunks/{chunk.IAWYYNUU.js → chunk.LCNR2RPT.js} +2 -2
- package/dist/esm/chunks/{chunk.TU74SREL.js → chunk.LMIKNDBS.js} +2 -2
- package/dist/esm/chunks/{chunk.5A2PA7TL.js → chunk.LOBKFTRM.js} +2 -2
- package/dist/esm/chunks/chunk.LOBKFTRM.js.map +7 -0
- package/dist/esm/chunks/{chunk.HSI7B43D.js → chunk.LS7WRRT2.js} +2 -2
- package/dist/esm/chunks/{chunk.HSI7B43D.js.map → chunk.LS7WRRT2.js.map} +2 -2
- package/dist/esm/chunks/{chunk.VO6YJCEU.js → chunk.LSNAGIIH.js} +2 -2
- package/dist/esm/chunks/{chunk.ARQMMZJL.js → chunk.LXX3YZYS.js} +2 -2
- package/dist/esm/chunks/chunk.MZZJY5NX.js +7 -0
- package/dist/esm/chunks/chunk.MZZJY5NX.js.map +7 -0
- package/dist/esm/chunks/{chunk.AMLT6XJP.js → chunk.NG6UZ4OL.js} +2 -2
- package/dist/esm/chunks/{chunk.YKIBREM5.js → chunk.NYYXUH3X.js} +2 -2
- package/dist/esm/chunks/{chunk.HRRJIFC5.js → chunk.NZKIFXBU.js} +2 -2
- package/dist/esm/chunks/{chunk.YAERJVPL.js → chunk.OED5UCYT.js} +2 -2
- package/dist/esm/chunks/{chunk.72JVXGHF.js → chunk.OUACQISE.js} +2 -2
- package/dist/esm/chunks/{chunk.72JVXGHF.js.map → chunk.OUACQISE.js.map} +1 -1
- package/dist/esm/chunks/{chunk.RP674CRC.js → chunk.OYO5O3NF.js} +2 -2
- package/dist/esm/chunks/{chunk.LCR4YH3O.js → chunk.P7LC3YYW.js} +2 -2
- package/dist/esm/chunks/{chunk.KV5IKYG2.js → chunk.PK7R6WDF.js} +2 -2
- package/dist/esm/chunks/{chunk.PYR2OCCH.js → chunk.PQQVUUHU.js} +2 -2
- package/dist/esm/chunks/{chunk.SLJ6HDK7.js → chunk.PSTGTQVK.js} +2 -2
- package/dist/esm/chunks/chunk.Q5Z6F3PI.js +7 -0
- package/dist/esm/chunks/chunk.Q5Z6F3PI.js.map +7 -0
- package/dist/esm/chunks/{chunk.36C6SIPW.js → chunk.QFY23EWU.js} +2 -2
- package/dist/esm/chunks/{chunk.S5QL4SPT.js → chunk.RCSBJQ4G.js} +2 -2
- package/dist/esm/chunks/chunk.RDW7Z4W5.js +7 -0
- package/dist/esm/chunks/chunk.RDW7Z4W5.js.map +7 -0
- package/dist/esm/chunks/{chunk.FYVDTZLF.js → chunk.RYNQDXFA.js} +2 -2
- package/dist/esm/chunks/{chunk.HAKF2T2D.js → chunk.RZZBM3AW.js} +2 -2
- package/dist/esm/chunks/{chunk.3ZPSN2QG.js → chunk.SNF35Y6C.js} +2 -2
- package/dist/esm/chunks/chunk.SOLF23NC.js +7 -0
- package/dist/esm/chunks/chunk.SOLF23NC.js.map +7 -0
- package/dist/esm/chunks/{chunk.XYAZVLPR.js → chunk.T34DG7BU.js} +2 -2
- package/dist/esm/chunks/chunk.TA3MVDUU.js +7 -0
- package/dist/esm/chunks/chunk.TA3MVDUU.js.map +7 -0
- package/dist/esm/chunks/{chunk.3HCYRDRI.js → chunk.THWSN3X4.js} +2 -2
- package/dist/esm/chunks/chunk.TLFCQSJN.js +7 -0
- package/dist/esm/chunks/chunk.TLFCQSJN.js.map +7 -0
- package/dist/esm/chunks/{chunk.R6LQBI42.js → chunk.TZFUKJ24.js} +2 -2
- package/dist/esm/chunks/{chunk.SIRXAA3O.js → chunk.U5WMRBSC.js} +2 -2
- package/dist/esm/chunks/chunk.URCJO73M.js +7 -0
- package/dist/esm/chunks/{chunk.WY3E33CW.js.map → chunk.URCJO73M.js.map} +2 -2
- package/dist/esm/chunks/{chunk.GNDKQPDV.js → chunk.UWZWXNTW.js} +2 -2
- package/dist/esm/chunks/{chunk.KV67JXOC.js → chunk.VD5ZL5ZN.js} +2 -2
- package/dist/esm/chunks/{chunk.G7SMCLHQ.js → chunk.VDZ7HBKM.js} +2 -2
- package/dist/esm/chunks/{chunk.NUMKGUCK.js → chunk.W324TWF2.js} +2 -2
- package/dist/esm/chunks/chunk.WQGPIOL6.js +7 -0
- package/dist/esm/chunks/chunk.WQGPIOL6.js.map +7 -0
- package/dist/esm/chunks/chunk.XDANTL6C.js +7 -0
- package/dist/esm/chunks/chunk.XDANTL6C.js.map +7 -0
- package/dist/esm/chunks/chunk.XNCBGWE4.js +7 -0
- package/dist/esm/chunks/chunk.XNCBGWE4.js.map +7 -0
- package/dist/esm/chunks/{chunk.HDG2GHKC.js → chunk.YKZ25J6B.js} +2 -2
- package/dist/esm/chunks/{chunk.7V4BDSA5.js → chunk.Z2RB75TN.js} +2 -2
- package/dist/esm/chunks/chunk.Z7PBGV4K.js +7 -0
- package/dist/esm/chunks/{chunk.AMZZKEAE.js.map → chunk.Z7PBGV4K.js.map} +4 -4
- package/dist/esm/chunks/{chunk.O6V3YNMO.js → chunk.ZSD7MMVB.js} +2 -2
- package/dist/esm/chunks/chunk.ZVJMIBUM.js +7 -0
- package/dist/esm/chunks/chunk.ZVJMIBUM.js.map +7 -0
- package/dist/esm/circular-progress/index.js +1 -1
- package/dist/esm/color-picker/index.js +1 -1
- package/dist/esm/core/base/index.js +1 -1
- package/dist/esm/core/index.js +1 -1
- package/dist/esm/core/utils/index.js +1 -1
- package/dist/esm/date-picker/index.js +1 -1
- package/dist/esm/date-range-picker/index.js +1 -1
- package/dist/esm/dialog/index.js +1 -1
- package/dist/esm/divider/index.js +1 -1
- package/dist/esm/drawer/base/index.js +1 -1
- package/dist/esm/drawer/drawer/index.js +1 -1
- package/dist/esm/drawer/index.js +1 -1
- package/dist/esm/drawer/mini-drawer/index.js +1 -1
- package/dist/esm/drawer/modal-drawer/index.js +1 -1
- package/dist/esm/expansion-panel/index.js +1 -1
- package/dist/esm/file-picker/index.js +1 -1
- package/dist/esm/floating-action-button/index.js +1 -1
- package/dist/esm/focus-indicator/index.js +1 -1
- package/dist/esm/icon/index.js +1 -1
- package/dist/esm/icon-button/index.js +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/inline-message/index.js +1 -1
- package/dist/esm/keyboard-shortcut/index.js +1 -1
- package/dist/esm/label/index.js +1 -1
- package/dist/esm/label-value/index.js +1 -1
- package/dist/esm/linear-progress/index.js +1 -1
- package/dist/esm/list/index.js +1 -1
- package/dist/esm/list/list/index.js +1 -1
- package/dist/esm/list/list-item/index.js +1 -1
- package/dist/esm/list-dropdown/index.js +1 -1
- package/dist/esm/menu/index.js +1 -1
- package/dist/esm/open-icon/index.js +1 -1
- package/dist/esm/page-state/index.js +1 -1
- package/dist/esm/paginator/index.js +1 -1
- package/dist/esm/popup/index.js +1 -1
- package/dist/esm/product-icon/index.js +1 -1
- package/dist/esm/profile-card/index.js +1 -1
- package/dist/esm/quantity-field/index.js +1 -1
- package/dist/esm/radio/index.js +1 -1
- package/dist/esm/ripple/index.js +1 -1
- package/dist/esm/scaffold/index.js +1 -1
- package/dist/esm/select/core/index.js +1 -1
- package/dist/esm/select/index.js +1 -1
- package/dist/esm/select/option/index.js +1 -1
- package/dist/esm/select/option-group/index.js +1 -1
- package/dist/esm/select/select/index.js +1 -1
- package/dist/esm/select/select-dropdown/index.js +1 -1
- package/dist/esm/skeleton/index.js +1 -1
- package/dist/esm/slider/index.js +1 -1
- package/dist/esm/split-button/index.js +1 -1
- package/dist/esm/split-view/index.js +1 -1
- package/dist/esm/split-view/split-view/index.js +1 -1
- package/dist/esm/split-view/split-view-panel/index.js +1 -1
- package/dist/esm/stack/index.js +1 -1
- package/dist/esm/state-layer/index.js +1 -1
- package/dist/esm/stepper/index.js +1 -1
- package/dist/esm/stepper/step/index.js +1 -1
- package/dist/esm/stepper/stepper/index.js +1 -1
- package/dist/esm/switch/index.js +1 -1
- package/dist/esm/table/index.js +1 -1
- package/dist/esm/tabs/index.js +1 -1
- package/dist/esm/tabs/tab/index.js +1 -1
- package/dist/esm/tabs/tab-bar/index.js +1 -1
- package/dist/esm/text-field/index.js +1 -1
- package/dist/esm/time-picker/index.js +1 -1
- package/dist/esm/toast/index.js +1 -1
- package/dist/esm/toolbar/index.js +1 -1
- package/dist/esm/tooltip/index.js +1 -1
- package/dist/esm/view-switcher/index.js +1 -1
- package/dist/esm/view-switcher/view/index.js +1 -1
- package/dist/forge-dark.css +1 -1
- package/dist/forge.css +1 -1
- package/dist/theme/forge-theme.css +1 -1
- package/esm/app-bar/app-bar/app-bar-adapter.d.ts +30 -0
- package/esm/app-bar/app-bar/app-bar-adapter.js +71 -0
- package/esm/app-bar/{app-bar-constants.d.ts → app-bar/app-bar-constants.d.ts} +7 -11
- package/esm/app-bar/app-bar/app-bar-constants.js +32 -0
- package/esm/app-bar/{app-bar-foundation.d.ts → app-bar/app-bar-foundation.d.ts} +17 -16
- package/esm/app-bar/app-bar/app-bar-foundation.js +71 -0
- package/esm/app-bar/app-bar/app-bar.d.ts +66 -0
- package/esm/app-bar/app-bar/app-bar.js +107 -0
- package/esm/app-bar/app-bar/index.d.ts +10 -0
- package/esm/app-bar/app-bar/index.js +14 -0
- package/esm/app-bar/help-button/app-bar-help-button-adapter.d.ts +8 -1
- package/esm/app-bar/help-button/app-bar-help-button-adapter.js +22 -1
- package/esm/app-bar/help-button/app-bar-help-button-constants.d.ts +7 -0
- package/esm/app-bar/help-button/app-bar-help-button-constants.js +11 -1
- package/esm/app-bar/help-button/app-bar-help-button-foundation.d.ts +4 -0
- package/esm/app-bar/help-button/app-bar-help-button-foundation.js +16 -0
- package/esm/app-bar/help-button/app-bar-help-button.d.ts +13 -2
- package/esm/app-bar/help-button/app-bar-help-button.js +26 -5
- package/esm/app-bar/index.d.ts +0 -4
- package/esm/app-bar/index.js +0 -8
- package/esm/app-bar/menu-button/app-bar-menu-button-constants.d.ts +7 -0
- package/esm/app-bar/menu-button/app-bar-menu-button-constants.js +9 -1
- package/esm/app-bar/menu-button/app-bar-menu-button.d.ts +19 -2
- package/esm/app-bar/menu-button/app-bar-menu-button.js +57 -8
- package/esm/app-bar/notification-button/app-bar-notification-button-adapter.d.ts +6 -2
- package/esm/app-bar/notification-button/app-bar-notification-button-adapter.js +17 -1
- package/esm/app-bar/notification-button/app-bar-notification-button-constants.d.ts +1 -0
- package/esm/app-bar/notification-button/app-bar-notification-button-constants.js +3 -1
- package/esm/app-bar/notification-button/app-bar-notification-button-foundation.d.ts +4 -4
- package/esm/app-bar/notification-button/app-bar-notification-button-foundation.js +9 -11
- package/esm/app-bar/notification-button/app-bar-notification-button.d.ts +17 -4
- package/esm/app-bar/notification-button/app-bar-notification-button.js +20 -5
- package/esm/app-bar/profile-button/app-bar-profile-button-adapter.d.ts +7 -1
- package/esm/app-bar/profile-button/app-bar-profile-button-adapter.js +26 -3
- package/esm/app-bar/profile-button/app-bar-profile-button-constants.d.ts +1 -3
- package/esm/app-bar/profile-button/app-bar-profile-button-constants.js +2 -4
- package/esm/app-bar/profile-button/app-bar-profile-button-foundation.d.ts +5 -2
- package/esm/app-bar/profile-button/app-bar-profile-button-foundation.js +20 -22
- package/esm/app-bar/profile-button/app-bar-profile-button.d.ts +31 -2
- package/esm/app-bar/profile-button/app-bar-profile-button.js +33 -6
- package/esm/button/base/base-button-adapter.d.ts +4 -8
- package/esm/button/base/base-button-adapter.js +5 -17
- package/esm/button/base/base-button-constants.d.ts +3 -0
- package/esm/button/base/base-button-foundation.d.ts +6 -7
- package/esm/button/base/base-button-foundation.js +10 -4
- package/esm/button/base/base-button.d.ts +3 -1
- package/esm/button/base/base-button.js +6 -0
- package/esm/button/button.js +3 -5
- package/esm/checkbox/checkbox.js +1 -1
- package/esm/circular-progress/circular-progress-adapter.d.ts +2 -2
- package/esm/circular-progress/circular-progress-adapter.js +15 -6
- package/esm/circular-progress/circular-progress-constants.d.ts +1 -2
- package/esm/circular-progress/circular-progress-constants.js +1 -2
- package/esm/circular-progress/circular-progress-foundation.d.ts +0 -1
- package/esm/circular-progress/circular-progress-foundation.js +3 -5
- package/esm/circular-progress/circular-progress.d.ts +1 -2
- package/esm/circular-progress/circular-progress.js +6 -11
- package/esm/constants.d.ts +9 -0
- package/esm/core/base/base-adapter.js +1 -1
- package/esm/core/utils/utils.d.ts +1 -1
- package/esm/floating-action-button/floating-action-button-adapter.d.ts +20 -0
- package/esm/floating-action-button/floating-action-button-adapter.js +49 -0
- package/esm/floating-action-button/floating-action-button-component-delegate.d.ts +19 -3
- package/esm/floating-action-button/floating-action-button-component-delegate.js +62 -14
- package/esm/floating-action-button/floating-action-button-constants.d.ts +19 -14
- package/esm/floating-action-button/floating-action-button-constants.js +15 -15
- package/esm/floating-action-button/floating-action-button-foundation.d.ts +27 -0
- package/esm/floating-action-button/floating-action-button-foundation.js +48 -0
- package/esm/floating-action-button/floating-action-button.d.ts +86 -25
- package/esm/floating-action-button/floating-action-button.js +117 -104
- package/esm/floating-action-button/index.d.ts +3 -1
- package/esm/floating-action-button/index.js +5 -3
- package/esm/focus-indicator/focus-indicator.js +2 -2
- package/esm/icon-button/icon-button-constants.d.ts +3 -3
- package/esm/icon-button/icon-button.d.ts +51 -0
- package/esm/icon-button/icon-button.js +54 -5
- package/esm/icon-button/index.d.ts +3 -1
- package/esm/icon-button/index.js +3 -1
- package/esm/index.js +2 -2
- package/esm/label/label-foundation.js +4 -2
- package/esm/linear-progress/linear-progress-adapter.d.ts +2 -2
- package/esm/linear-progress/linear-progress-adapter.js +14 -6
- package/esm/linear-progress/linear-progress-constants.d.ts +0 -1
- package/esm/linear-progress/linear-progress-constants.js +1 -2
- package/esm/linear-progress/linear-progress-foundation.d.ts +1 -1
- package/esm/linear-progress/linear-progress-foundation.js +2 -2
- package/esm/linear-progress/linear-progress.d.ts +1 -1
- package/esm/linear-progress/linear-progress.js +5 -7
- package/esm/list/list-item/list-item.js +2 -2
- package/esm/menu/menu-constants.js +1 -1
- package/esm/profile-card/profile-card-adapter.d.ts +5 -8
- package/esm/profile-card/profile-card-adapter.js +5 -16
- package/esm/profile-card/profile-card-constants.js +3 -3
- package/esm/profile-card/profile-card-foundation.d.ts +4 -1
- package/esm/profile-card/profile-card-foundation.js +24 -13
- package/esm/profile-card/profile-card.d.ts +1 -2
- package/esm/profile-card/profile-card.js +11 -8
- package/esm/slider/slider.js +1 -1
- package/esm/split-view/split-view-panel/split-view-panel.js +1 -1
- package/esm/switch/switch.js +1 -1
- package/esm/tabs/tab/tab.js +1 -1
- package/esm/toolbar/toolbar.js +1 -1
- package/package.json +1 -2
- package/styles/app-bar/app-bar/_configuration.scss +16 -0
- package/styles/app-bar/app-bar/_core.scss +95 -0
- package/styles/app-bar/app-bar/_token-utils.scss +30 -0
- package/styles/app-bar/app-bar/app-bar.scss +142 -0
- package/styles/app-bar/app-bar/index.scss +8 -0
- package/styles/button/button.scss +18 -5
- package/styles/circular-progress/_core.scss +2 -0
- package/styles/circular-progress/circular-progress.scss +2 -2
- package/styles/core/styles/elevation/index.scss +10 -0
- package/styles/core/styles/spacing/index.scss +1 -1
- package/styles/core/styles/theme/index.scss +2 -0
- package/styles/core/styles/tokens/app-bar/app-bar/_tokens.scss +35 -0
- package/styles/core/styles/tokens/circular-progress/_tokens.scss +2 -1
- package/styles/core/styles/tokens/floating-action-button/_tokens.scss +66 -0
- package/styles/core/styles/tokens/icon-button/_tokens.scss +1 -1
- package/styles/core/styles/tokens/profile-card/_tokens.scss +19 -0
- package/styles/core/styles/tokens/shape/_tokens.scss +6 -0
- package/styles/core/styles/tokens/spacing/_tokens.scss +2 -0
- package/styles/core/styles/tokens/theme/_token-utils.scss +2 -2
- package/styles/core/styles/tokens/theme/_tokens.brand.scss +22 -0
- package/styles/core/styles/tokens/theme/_tokens.scss +3 -0
- package/styles/floating-action-button/_configuration.scss +16 -0
- package/styles/floating-action-button/_core.scss +103 -0
- package/styles/floating-action-button/_token-utils.scss +30 -0
- package/styles/floating-action-button/floating-action-button.scss +129 -0
- package/styles/floating-action-button/index.scss +8 -0
- package/styles/focus-indicator/focus-indicator.scss +11 -28
- package/styles/forge.scss +0 -1
- package/styles/icon-button/_core.scss +0 -4
- package/styles/icon-button/icon-button.scss +45 -11
- package/styles/list/list-item/list-item.scss +2 -0
- package/styles/profile-card/_configuration.scss +10 -0
- package/styles/profile-card/_core.scss +58 -0
- package/styles/profile-card/_token-utils.scss +30 -0
- package/styles/profile-card/index.scss +8 -0
- package/styles/profile-card/profile-card.scss +55 -6
- package/styles/theme/_theme-dark.scss +0 -3
- package/styles/toolbar/_mixins.scss +0 -1
- package/dist/esm/chunks/chunk.36F2GVWS.js +0 -7
- package/dist/esm/chunks/chunk.36F2GVWS.js.map +0 -7
- package/dist/esm/chunks/chunk.4SPEX2GJ.js +0 -7
- package/dist/esm/chunks/chunk.4SPEX2GJ.js.map +0 -7
- package/dist/esm/chunks/chunk.4YFJVHXN.js +0 -7
- package/dist/esm/chunks/chunk.4YFJVHXN.js.map +0 -7
- package/dist/esm/chunks/chunk.5A2PA7TL.js.map +0 -7
- package/dist/esm/chunks/chunk.5CSXPRL3.js +0 -7
- package/dist/esm/chunks/chunk.5CSXPRL3.js.map +0 -7
- package/dist/esm/chunks/chunk.5LVZVQXB.js +0 -7
- package/dist/esm/chunks/chunk.5LVZVQXB.js.map +0 -7
- package/dist/esm/chunks/chunk.5WMYF27O.js +0 -7
- package/dist/esm/chunks/chunk.6M27ERWW.js +0 -12
- package/dist/esm/chunks/chunk.6M27ERWW.js.map +0 -7
- package/dist/esm/chunks/chunk.6ZNBFKNP.js +0 -7
- package/dist/esm/chunks/chunk.6ZNBFKNP.js.map +0 -7
- package/dist/esm/chunks/chunk.AMZZKEAE.js +0 -7
- package/dist/esm/chunks/chunk.APPY5AYL.js +0 -7
- package/dist/esm/chunks/chunk.APPY5AYL.js.map +0 -7
- package/dist/esm/chunks/chunk.AUCBR6CC.js +0 -7
- package/dist/esm/chunks/chunk.AUCBR6CC.js.map +0 -7
- package/dist/esm/chunks/chunk.EJX6RI4I.js +0 -7
- package/dist/esm/chunks/chunk.EJX6RI4I.js.map +0 -7
- package/dist/esm/chunks/chunk.EWK76SPH.js +0 -7
- package/dist/esm/chunks/chunk.EWK76SPH.js.map +0 -7
- package/dist/esm/chunks/chunk.FAXYCG55.js +0 -7
- package/dist/esm/chunks/chunk.FAXYCG55.js.map +0 -7
- package/dist/esm/chunks/chunk.LUNKNRRH.js +0 -7
- package/dist/esm/chunks/chunk.PMYQY3D3.js +0 -7
- package/dist/esm/chunks/chunk.QN5T26HH.js +0 -7
- package/dist/esm/chunks/chunk.QQRPV4RN.js +0 -7
- package/dist/esm/chunks/chunk.STB2FEUA.js +0 -7
- package/dist/esm/chunks/chunk.WMVYRDUJ.js +0 -7
- package/dist/esm/chunks/chunk.WMVYRDUJ.js.map +0 -7
- package/dist/esm/chunks/chunk.WY3E33CW.js +0 -7
- package/dist/esm/chunks/chunk.XLL7L2UB.js +0 -7
- package/dist/esm/chunks/chunk.XLL7L2UB.js.map +0 -7
- package/dist/esm/chunks/chunk.XNFS7YIB.js +0 -7
- package/dist/esm/chunks/chunk.YWAUEUAH.js +0 -7
- package/dist/esm/chunks/chunk.YWAUEUAH.js.map +0 -7
- package/dist/esm/chunks/chunk.ZKM667OT.js +0 -7
- package/dist/esm/chunks/chunk.ZKM667OT.js.map +0 -7
- package/dist/floating-action-button/forge-floating-action-button.css +0 -6
- package/esm/app-bar/app-bar-adapter.d.ts +0 -43
- package/esm/app-bar/app-bar-adapter.js +0 -60
- package/esm/app-bar/app-bar-constants.js +0 -37
- package/esm/app-bar/app-bar-foundation.js +0 -70
- package/esm/app-bar/app-bar.d.ts +0 -38
- package/esm/app-bar/app-bar.js +0 -75
- package/styles/app-bar/_mixins.scss +0 -254
- package/styles/app-bar/_variables.scss +0 -34
- package/styles/app-bar/app-bar.scss +0 -22
- package/styles/floating-action-button/_extended-fab-theme.scss +0 -238
- package/styles/floating-action-button/_fab-custom-properties.scss +0 -29
- package/styles/floating-action-button/_fab-theme.scss +0 -541
- package/styles/floating-action-button/_fab.mixins.scss +0 -351
- package/styles/floating-action-button/forge-floating-action-button.scss +0 -16
- package/styles/profile-card/_mixins.scss +0 -83
- /package/dist/esm/chunks/{chunk.FLWNOP42.js.map → chunk.26E4L52W.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.ZRSDTCSD.js.map → chunk.2GYZM6ZG.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.PMYQY3D3.js.map → chunk.3RMBFRGC.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.DTLZOIUQ.js.map → chunk.3UO6S3IK.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.MWYQRG5W.js.map → chunk.4B5IOZAT.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.IDMDBMBR.js.map → chunk.4QDN5PM6.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.Z5RROENA.js.map → chunk.543K5Y4E.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.W2LN45WY.js.map → chunk.57PXXJA6.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.675V42JS.js.map → chunk.5C24LZNU.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.V24M62MC.js.map → chunk.5H4G6BWX.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.QLCVRJ3Q.js.map → chunk.5VHUMZYS.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.OWZREAT6.js.map → chunk.6DXDNQUR.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.7VMJLHQY.js.map → chunk.6Q3SV2R2.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.IHAHJPMB.js.map → chunk.7ABZUBTT.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.Z5ZLKM7W.js.map → chunk.7BGOH44S.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.LOG6GQOK.js.map → chunk.7DHDFH5L.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.3R4BUIQP.js.map → chunk.7PP6QHOM.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.YBZK6LJZ.js.map → chunk.7UXLLUTN.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.5RM65QPN.js.map → chunk.7W2UWAZX.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.6NTYTHAL.js.map → chunk.AEJGC4YG.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.BTXY3XMJ.js.map → chunk.B46Q3AFP.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.QJCNMYD3.js.map → chunk.BFUGFHEH.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.2ZU6LWHE.js.map → chunk.BMQYEYCT.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.HOLCNJXC.js.map → chunk.C5IB44HX.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.G73KL7P2.js.map → chunk.CTZ3AWDW.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.QLOYOZN3.js.map → chunk.DD35U4AA.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.XEFWZKHQ.js.map → chunk.DDXIHZFX.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.MKJCHUJH.js.map → chunk.DOEG3DWJ.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.2MSL7CYM.js.map → chunk.DTKFE7YB.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.FXIWCHLW.js.map → chunk.E3GVKR4E.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.FFHSUJFM.js.map → chunk.EBSBAFCX.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.RES7WDKH.js.map → chunk.F2EBSV5Z.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.BBCZNGT3.js.map → chunk.FB6ZLH6P.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.VFKHRAWD.js.map → chunk.FQSL747N.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.JVLJH6PR.js.map → chunk.G2BNY5QQ.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.URJQNB3S.js.map → chunk.GS72TBUD.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.5PG6WIIX.js.map → chunk.GT3VPSXY.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.IMLJD35R.js.map → chunk.GWJ4QCSW.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.IISWKFCX.js.map → chunk.H7GW57Q6.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.BB4UF5RX.js.map → chunk.HHHBS6FB.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.KPJWP77R.js.map → chunk.I3NHK2S3.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.5N4N6DL6.js.map → chunk.IEB5KRFQ.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.BQ2X5SBP.js.map → chunk.IVUK3W34.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.ZGRQDDHO.js.map → chunk.IW7HALLT.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.7ZROQ6D3.js.map → chunk.J3B5CWKT.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.TBGMJQYJ.js.map → chunk.JVK64JDZ.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.AUBOJZQ7.js.map → chunk.KLPF4CNX.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.IT7XPDAV.js.map → chunk.L4Y4RO5O.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.IAWYYNUU.js.map → chunk.LCNR2RPT.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.TU74SREL.js.map → chunk.LMIKNDBS.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.VO6YJCEU.js.map → chunk.LSNAGIIH.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.ARQMMZJL.js.map → chunk.LXX3YZYS.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.AMLT6XJP.js.map → chunk.NG6UZ4OL.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.YKIBREM5.js.map → chunk.NYYXUH3X.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.HRRJIFC5.js.map → chunk.NZKIFXBU.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.YAERJVPL.js.map → chunk.OED5UCYT.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.RP674CRC.js.map → chunk.OYO5O3NF.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.LCR4YH3O.js.map → chunk.P7LC3YYW.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.KV5IKYG2.js.map → chunk.PK7R6WDF.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.PYR2OCCH.js.map → chunk.PQQVUUHU.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.SLJ6HDK7.js.map → chunk.PSTGTQVK.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.36C6SIPW.js.map → chunk.QFY23EWU.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.S5QL4SPT.js.map → chunk.RCSBJQ4G.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.FYVDTZLF.js.map → chunk.RYNQDXFA.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.HAKF2T2D.js.map → chunk.RZZBM3AW.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.3ZPSN2QG.js.map → chunk.SNF35Y6C.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.XYAZVLPR.js.map → chunk.T34DG7BU.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.3HCYRDRI.js.map → chunk.THWSN3X4.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.R6LQBI42.js.map → chunk.TZFUKJ24.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.SIRXAA3O.js.map → chunk.U5WMRBSC.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.GNDKQPDV.js.map → chunk.UWZWXNTW.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.KV67JXOC.js.map → chunk.VD5ZL5ZN.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.G7SMCLHQ.js.map → chunk.VDZ7HBKM.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.NUMKGUCK.js.map → chunk.W324TWF2.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.HDG2GHKC.js.map → chunk.YKZ25J6B.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.7V4BDSA5.js.map → chunk.Z2RB75TN.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.O6V3YNMO.js.map → chunk.ZSD7MMVB.js.map} +0 -0
|
@@ -5,8 +5,7 @@
|
|
|
5
5
|
*/
|
|
6
6
|
import { __decorate } from "tslib";
|
|
7
7
|
import { attachShadowTemplate, coerceBoolean, CustomElement, FoundationProperty } from '@tylertech/forge-core';
|
|
8
|
-
import {
|
|
9
|
-
import { IconComponent, IconRegistry } from '../icon';
|
|
8
|
+
import { IconComponent } from '../icon';
|
|
10
9
|
import { BaseButton } from '../button/base/base-button';
|
|
11
10
|
import { BASE_BUTTON_CONSTANTS } from '../button/base/base-button-constants';
|
|
12
11
|
import { FocusIndicatorComponent } from '../focus-indicator';
|
|
@@ -14,8 +13,8 @@ import { StateLayerComponent } from '../state-layer';
|
|
|
14
13
|
import { ICON_BUTTON_CONSTANTS } from './icon-button-constants';
|
|
15
14
|
import { IconButtonFoundation } from './icon-button-foundation';
|
|
16
15
|
import { IconButtonAdapter } from './icon-button-adapter';
|
|
17
|
-
const template = '<template><div class=\"forge-icon-button\" part=\"root\"><slot name=\"start\"></slot><slot></slot><slot name=\"on\"></slot><slot name=\"end\"></slot><forge-focus-indicator target=\":host\"
|
|
18
|
-
const styles = ':host{--_icon-button-display:var(--forge-icon-button-display, inline-flex);--_icon-button-disabled-cursor:var(--forge-icon-button-disabled-cursor, not-allowed)}:host{display:var(--_icon-button-display);position:relative;outline:0;-webkit-tap-highlight-color:transparent}:host([hidden]){display:none}.forge-icon-button{--_icon-button-size:var(--forge-icon-button-size, 48px);--_icon-button-gap:var(--forge-icon-button-spacing, 0);--_icon-button-icon-color:var(--forge-icon-button-icon-color, inherit);--_icon-button-background-color:var(--forge-icon-button-background-color, none);--_icon-button-icon-size:var(--forge-icon-button-icon-size, calc(var(--forge-typography-font-size, 1rem) * 1.5));--_icon-button-cursor:var(--forge-icon-button-cursor, pointer);--_icon-button-padding:var(--forge-icon-button-padding, var(--forge-spacing-xxsmall, 4px));--_icon-button-border:var(--forge-icon-button-border, none);--_icon-button-shadow:var(--forge-icon-button-shadow, none);--_icon-button-transition-duration:var(--forge-icon-button-transition-duration, var(--forge-animation-duration-short3, 150ms));--_icon-button-transition-timing:var(--forge-icon-button-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_icon-button-shape:var(--forge-icon-button-shape, var(--forge-shape-full, 9999px));--_icon-button-shape-start-start:var(--forge-icon-button-shape-start-start, var(--_icon-button-shape));--_icon-button-shape-start-end:var(--forge-icon-button-shape-start-end, var(--_icon-button-shape));--_icon-button-shape-end-start:var(--forge-icon-button-shape-end-start, var(--_icon-button-shape));--_icon-button-shape-end-end:var(--forge-icon-button-shape-end-end, var(--_icon-button-shape));--_icon-button-shape-squared:var(--forge-icon-button-shape-squared, var(--forge-shape-medium, 4px));--_icon-button-outlined-border-width:var(--forge-icon-button-outlined-border-width, 1px);--_icon-button-outlined-border-style:var(--forge-icon-button-outlined-border-style, solid);--_icon-button-outlined-border-color:var(--forge-icon-button-outlined-border-color, var(--_icon-button-icon-color));--_icon-button-tonal-icon-color:var(--forge-icon-button-tonal-icon-color, var(--forge-theme-on-primary-container, #0f132b));--_icon-button-tonal-background-color:var(--forge-icon-button-tonal-background-color, var(--forge-theme-primary-container, #d1d5ed));--_icon-button-filled-icon-color:var(--forge-icon-button-filled-icon-color, var(--forge-theme-on-primary, #ffffff));--_icon-button-filled-background-color:var(--forge-icon-button-filled-background-color, var(--forge-theme-primary, #3f51b5));--_icon-button-raised-shadow:var(--forge-icon-button-raised-shadow, 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12));--_icon-button-raised-hover-shadow:var(--forge-icon-button-raised-hover-shadow, 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12));--_icon-button-raised-active-shadow:var(--forge-icon-button-raised-active-shadow, 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12));--_icon-button-raised-disabled-shadow:var(--forge-icon-button-raised-disabled-shadow, none);--_icon-button-density-small-size:var(--forge-icon-button-density-small-size, 24px);--_icon-button-density-small-padding:var(--forge-icon-button-density-small-padding, var(--forge-spacing-xxxsmall, 2px));--_icon-button-density-small-icon-size:var(--forge-icon-button-density-small-icon-size, calc(var(--forge-typography-font-size, 1rem) * 1.125));--_icon-button-density-medium-size:var(--forge-icon-button-density-medium-size, 36px);--_icon-button-density-medium-padding:var(--forge-icon-button-density-medium-padding, var(--forge-spacing-xxsmall, 4px));--_icon-button-density-large-size:var(--forge-icon-button-density-large-size, var(--_icon-button-size));--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-primary-container-low, #e8eaf6));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5));--_icon-button-tonal-toggle-background-color:var(--forge-icon-button-tonal-toggle-background-color, var(--forge-theme-surface-container-low, #ebebeb));--_icon-button-tonal-toggle-on-background-color:var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-primary-container, #d1d5ed));--_icon-button-tonal-toggle-on-icon-color:var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5));--_icon-button-filled-toggle-background-color:var(--forge-icon-button-filled-toggle-background-color, var(--forge-theme-surface-container-low, #ebebeb));--_icon-button-filled-toggle-icon-color:var(--forge-icon-button-filled-toggle-background-color, var(--forge-theme-primary, #3f51b5));--_icon-button-filled-toggle-on-background-color:var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-primary, #3f51b5));--_icon-button-filled-toggle-on-icon-color:var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-primary, #ffffff));--_icon-button-disabled-opacity:var(--forge-icon-button-disabled-opacity, 0.38);--_icon-button-popover-icon-padding:var(--forge-icon-button-popover-icon-padding, var(--forge-spacing-xsmall, 8px));--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-primary, #3f51b5))}.forge-icon-button{position:relative;z-index:0;display:var(--_icon-button-display);-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;gap:var(--_icon-button-gap);-webkit-box-sizing:border-box;box-sizing:border-box;height:var(--_icon-button-density-large-size);min-width:var(--_icon-button-density-large-size);border:var(--_icon-button-border);border-start-start-radius:var(--_icon-button-shape-start-start);border-start-end-radius:var(--_icon-button-shape-start-end);border-end-start-radius:var(--_icon-button-shape-end-start);border-end-end-radius:var(--_icon-button-shape-end-end);padding:var(--_icon-button-padding);-webkit-box-shadow:var(--_icon-button-shadow);box-shadow:var(--_icon-button-shadow);color:var(--_icon-button-icon-color);background:var(--_icon-button-background-color);font-size:var(--_icon-button-icon-size);cursor:var(--_icon-button-cursor);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition-property:background,-webkit-box-shadow;transition-property:background,-webkit-box-shadow;transition-property:box-shadow,background;transition-property:box-shadow,background,-webkit-box-shadow;-webkit-transition-duration:var(--_icon-button-transition-duration);transition-duration:var(--_icon-button-transition-duration);-webkit-transition-timing-function:var(--_icon-button-transition-timing);transition-timing-function:var(--_icon-button-transition-timing)}.forge-icon-button ::slotted(:is([slot=start],[slot=end])){font-size:var(--_icon-button-icon-size);height:var(--_icon-button-icon-size);width:var(--_icon-button-icon-size);font-weight:inherit}a{position:absolute;inset:0;text-decoration:none}forge-focus-indicator{--forge-focus-indicator-color:var(--_icon-button-focus-indicator-color);--forge-focus-indicator-shape-start-start:var(--_icon-button-shape-start-start);--forge-focus-indicator-shape-start-end:var(--_icon-button-shape-start-end);--forge-focus-indicator-shape-end-start:var(--_icon-button-shape-end-start);--forge-focus-indicator-shape-end-end:var(--_icon-button-shape-end-end)}:host(:is([variant=icon],:not([variant]))){--forge-focus-indicator-outward-offset:0px}forge-state-layer{--forge-state-layer-color:var(--_icon-button-icon-color)}:host([popover-icon]) .forge-icon-button{--_icon-button-padding:var(--_icon-button-popover-icon-padding)}:host([variant=outlined]) .forge-icon-button{border-width:var(--_icon-button-outlined-border-width);border-style:var(--_icon-button-outlined-border-style);border-color:var(--_icon-button-outlined-border-color)}:host([variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--_icon-button-tonal-icon-color);--_icon-button-background-color:var(--_icon-button-tonal-background-color)}:host(:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--_icon-button-filled-icon-color);--_icon-button-background-color:var(--_icon-button-filled-background-color)}:host([variant=raised]) .forge-icon-button{--_icon-button-shadow:var(--_icon-button-raised-shadow)}:host([variant=raised]) .forge-icon-button:hover{--_icon-button-raised-shadow:var(--_icon-button-raised-hover-shadow)}:host([variant=raised]) .forge-icon-button:active{--_icon-button-raised-shadow:var(--_icon-button-raised-active-shadow)}:host(:is(:not([toggle]),[toggle]:not([on]))) slot[name=on]{display:none}:host([toggle][on]) slot:not([name]){display:none}:host([toggle][on]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-icon-color:var(--_icon-button-toggle-on-icon-color)}:host([toggle][on][variant=outlined]) .forge-icon-button{--_icon-button-background-color:var(--_icon-button-outlined-toggle-on-background-color);--_icon-button-icon-color:var(--_icon-button-outlined-toggle-on-icon-color)}:host([toggle]:not([on])[variant=tonal]) .forge-icon-button{--_icon-button-background-color:var(--_icon-button-tonal-toggle-background-color)}:host([toggle][on][variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--_icon-button-tonal-toggle-on-icon-color);--_icon-button-background-color:var(--_icon-button-tonal-toggle-on-background-color)}:host([toggle]:not([on]):is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--_icon-button-filled-toggle-icon-color);--_icon-button-background-color:var(--_icon-button-filled-toggle-background-color)}:host([toggle][on]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--_icon-button-filled-toggle-on-icon-color);--_icon-button-background-color:var(--_icon-button-filled-toggle-on-background-color)}:host(:is([dense],[density=small])) .forge-icon-button{--_icon-button-size:var(--_icon-button-density-small-size);--_icon-button-icon-size:var(--_icon-button-density-small-icon-size);--_icon-button-padding:var(--_icon-button-density-small-padding)}:host(:is([dense],[density=small])) ::slotted(*){font-size:var(--_icon-button-density-small-icon-size)}:host([density=medium]) .forge-icon-button{--_icon-button-size:var(--_icon-button-density-medium-size);--_icon-button-padding:var(--_icon-button-density-medium-padding)}:host([shape=squared]) .forge-icon-button{--_icon-button-shape:var(--_icon-button-shape-squared)}:host([disabled]){cursor:var(--_icon-button-disabled-cursor)}:host([disabled]) .forge-icon-button{pointer-events:none;opacity:var(--_icon-button-disabled-opacity)}:host([disabled][variant=raised]) .forge-icon-button{--_icon-button-raised-shadow:var(--_icon-button-raised-disabled-shadow)}:host(:not([toggle])[theme=primary]:is(:not([variant]),[variant=icon],[variant=outlined])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-primary, #3f51b5))}:host([toggle][theme=primary]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5))}:host([toggle][theme=primary][variant=outlined]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-primary, #3f51b5));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-primary-container-low, #e8eaf6));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5))}:host([theme=primary]) .forge-icon-button{--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-primary, #3f51b5))}:host(:not([toggle])[theme=secondary]:is(:not([variant]),[variant=icon],[variant=outlined])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-secondary, #ffc107))}:host([toggle][theme=secondary]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-secondary, #ffc107))}:host([toggle][theme=secondary][variant=outlined]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-secondary, #ffc107));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-secondary-container-low, #fff8e1));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-secondary, #ffc107))}:host(:not([toggle])[theme=secondary][variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-secondary-container, #3d2e02));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-secondary-container, #fff0c3))}:host([toggle]:not([on])[theme=secondary][variant=tonal]) .forge-icon-button{--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-secondary-container-low, #fff8e1))}:host([toggle][theme=secondary][variant=tonal]) .forge-icon-button{--_icon-button-tonal-toggle-on-background-color:var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-secondary-container, #fff0c3));--_icon-button-tonal-toggle-on-icon-color:var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-on-secondary-container, #3d2e02))}:host(:not([toggle])[theme=secondary]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-secondary, #000000));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-secondary, #ffc107))}:host([toggle]:not([on])[theme=secondary]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-secondary, #ffc107));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-secondary-container-low, #fff8e1))}:host([toggle][theme=secondary]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-filled-toggle-on-background-color:var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-secondary, #ffc107));--_icon-button-filled-toggle-on-icon-color:var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-secondary, #000000))}:host([theme=secondary]) .forge-icon-button{--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-secondary, #ffc107))}:host(:not([toggle])[theme=tertiary]:is(:not([variant]),[variant=icon],[variant=outlined])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-tertiary, #3d5afe))}:host([toggle][theme=tertiary]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-tertiary, #3d5afe))}:host([toggle][theme=tertiary][variant=outlined]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-tertiary, #3d5afe));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-tertiary-container-low, #e8ebff));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-tertiary, #3d5afe))}:host(:not([toggle])[theme=tertiary][variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-tertiary-container, #0f163d));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-tertiary-container, #d0d7ff))}:host([toggle]:not([on])[theme=tertiary][variant=tonal]) .forge-icon-button{--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-tertiary-container-low, #e8ebff))}:host([toggle][theme=tertiary][variant=tonal]) .forge-icon-button{--_icon-button-tonal-toggle-on-background-color:var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-tertiary-container, #d0d7ff));--_icon-button-tonal-toggle-on-icon-color:var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-on-tertiary-container, #0f163d))}:host(:not([toggle])[theme=tertiary]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-tertiary, #ffffff));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-tertiary, #3d5afe))}:host([toggle]:not([on])[theme=tertiary]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-tertiary, #3d5afe));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-tertiary-container-low, #e8ebff))}:host([toggle][theme=tertiary]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-filled-toggle-on-background-color:var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-tertiary, #3d5afe));--_icon-button-filled-toggle-on-icon-color:var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-tertiary, #ffffff))}:host([theme=tertiary]) .forge-icon-button{--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-tertiary, #3d5afe))}:host(:not([toggle])[theme=success]:is(:not([variant]),[variant=icon],[variant=outlined])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-success, #2e7d32))}:host([toggle][theme=success]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-success, #2e7d32))}:host([toggle][theme=success][variant=outlined]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-success, #2e7d32));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-success-container-low, #e6efe6));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-success, #2e7d32))}:host(:not([toggle])[theme=success][variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-success-container, #0b1e0c));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-success-container, #cde0ce))}:host([toggle]:not([on])[theme=success][variant=tonal]) .forge-icon-button{--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-success-container-low, #e6efe6))}:host([toggle][theme=success][variant=tonal]) .forge-icon-button{--_icon-button-tonal-toggle-on-background-color:var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-success-container, #cde0ce));--_icon-button-tonal-toggle-on-icon-color:var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-on-success-container, #0b1e0c))}:host(:not([toggle])[theme=success]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-success, #ffffff));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-success, #2e7d32))}:host([toggle]:not([on])[theme=success]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-success, #2e7d32));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-success-container-low, #e6efe6))}:host([toggle][theme=success]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-filled-toggle-on-background-color:var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-success, #2e7d32));--_icon-button-filled-toggle-on-icon-color:var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-success, #ffffff))}:host([theme=success]) .forge-icon-button{--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-success, #2e7d32))}:host(:not([toggle])[theme=error]:is(:not([variant]),[variant=icon],[variant=outlined])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-error, #b00020))}:host([toggle][theme=error]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-error, #b00020))}:host([toggle][theme=error][variant=outlined]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-error, #b00020));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-error-container-low, #f6e0e4));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-error, #b00020))}:host(:not([toggle])[theme=error][variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-error-container, #2a0008));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-error-container, #ecc2c9))}:host([toggle]:not([on])[theme=error][variant=tonal]) .forge-icon-button{--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-error-container-low, #f6e0e4))}:host([toggle][theme=error][variant=tonal]) .forge-icon-button{--_icon-button-tonal-toggle-on-background-color:var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-error-container, #ecc2c9));--_icon-button-tonal-toggle-on-icon-color:var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-on-error-container, #2a0008))}:host(:not([toggle])[theme=error]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-error, #ffffff));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-error, #b00020))}:host([toggle]:not([on])[theme=error]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-error, #b00020));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-error-container-low, #f6e0e4))}:host([toggle][theme=error]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-filled-toggle-on-background-color:var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-error, #b00020));--_icon-button-filled-toggle-on-icon-color:var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-error, #ffffff))}:host([theme=error]) .forge-icon-button{--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-error, #b00020))}:host(:not([toggle])[theme=warning]:is(:not([variant]),[variant=icon],[variant=outlined])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-warning, #d14900))}:host([toggle][theme=warning]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-warning, #d14900))}:host([toggle][theme=warning][variant=outlined]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-warning, #d14900));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-warning-container-low, #f9e9e0));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-warning, #d14900))}:host(:not([toggle])[theme=warning][variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-warning-container, #321200));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-warning-container, #f4d3c2))}:host([toggle]:not([on])[theme=warning][variant=tonal]) .forge-icon-button{--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-warning-container-low, #f9e9e0))}:host([toggle][theme=warning][variant=tonal]) .forge-icon-button{--_icon-button-tonal-toggle-on-background-color:var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-warning-container, #f4d3c2));--_icon-button-tonal-toggle-on-icon-color:var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-on-warning-container, #321200))}:host(:not([toggle])[theme=warning]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-warning, #ffffff));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-warning, #d14900))}:host([toggle]:not([on])[theme=warning]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-warning, #d14900));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-warning-container-low, #f9e9e0))}:host([toggle][theme=warning]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-filled-toggle-on-background-color:var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-warning, #d14900));--_icon-button-filled-toggle-on-icon-color:var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-warning, #ffffff))}:host([theme=warning]) .forge-icon-button{--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-warning, #d14900))}:host(:not([toggle])[theme=info]:is(:not([variant]),[variant=icon],[variant=outlined])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-info, #1565c0))}:host([toggle][theme=info]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-info, #1565c0))}:host([toggle][theme=info][variant=outlined]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-info, #1565c0));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-info-container-low, #e3edf7));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-info, #1565c0))}:host(:not([toggle])[theme=info][variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-info-container, #05182e));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-info-container, #c7daf0))}:host([toggle]:not([on])[theme=info][variant=tonal]) .forge-icon-button{--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-info-container-low, #e3edf7))}:host([toggle][theme=info][variant=tonal]) .forge-icon-button{--_icon-button-tonal-toggle-on-background-color:var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-info-container, #c7daf0));--_icon-button-tonal-toggle-on-icon-color:var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-on-info-container, #05182e))}:host(:not([toggle])[theme=info]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-info, #ffffff));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-info, #1565c0))}:host([toggle]:not([on])[theme=info]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-info, #1565c0));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-info-container-low, #e3edf7))}:host([toggle][theme=info]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-filled-toggle-on-background-color:var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-info, #1565c0));--_icon-button-filled-toggle-on-icon-color:var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-info, #ffffff))}:host([theme=info]) .forge-icon-button{--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-info, #1565c0))}';
|
|
16
|
+
const template = '<template><div class=\"forge-icon-button\" part=\"root\"><slot name=\"start\"></slot><slot></slot><slot name=\"on\"></slot><slot name=\"end\"></slot><slot name=\"badge\"></slot><forge-focus-indicator target=\":host\" part=\"focus-indicator\"></forge-focus-indicator><forge-state-layer target=\":host\" exportparts=\"surface:state-layer\"></forge-state-layer></div></template>';
|
|
17
|
+
const styles = ':host{--_icon-button-display:var(--forge-icon-button-display, inline-flex);--_icon-button-disabled-cursor:var(--forge-icon-button-disabled-cursor, not-allowed)}:host{display:var(--_icon-button-display);position:relative;outline:0;-webkit-tap-highlight-color:transparent}:host([hidden]){display:none}.forge-icon-button{--_icon-button-size:var(--forge-icon-button-size, 48px);--_icon-button-gap:var(--forge-icon-button-spacing, 0);--_icon-button-icon-color:var(--forge-icon-button-icon-color, currentColor);--_icon-button-background-color:var(--forge-icon-button-background-color, none);--_icon-button-icon-size:var(--forge-icon-button-icon-size, calc(var(--forge-typography-font-size, 1rem) * 1.5));--_icon-button-cursor:var(--forge-icon-button-cursor, pointer);--_icon-button-padding:var(--forge-icon-button-padding, var(--forge-spacing-xxsmall, 4px));--_icon-button-border:var(--forge-icon-button-border, none);--_icon-button-shadow:var(--forge-icon-button-shadow, none);--_icon-button-transition-duration:var(--forge-icon-button-transition-duration, var(--forge-animation-duration-short3, 150ms));--_icon-button-transition-timing:var(--forge-icon-button-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_icon-button-shape:var(--forge-icon-button-shape, var(--forge-shape-full, 9999px));--_icon-button-shape-start-start:var(--forge-icon-button-shape-start-start, var(--_icon-button-shape));--_icon-button-shape-start-end:var(--forge-icon-button-shape-start-end, var(--_icon-button-shape));--_icon-button-shape-end-start:var(--forge-icon-button-shape-end-start, var(--_icon-button-shape));--_icon-button-shape-end-end:var(--forge-icon-button-shape-end-end, var(--_icon-button-shape));--_icon-button-shape-squared:var(--forge-icon-button-shape-squared, var(--forge-shape-medium, 4px));--_icon-button-outlined-border-width:var(--forge-icon-button-outlined-border-width, 1px);--_icon-button-outlined-border-style:var(--forge-icon-button-outlined-border-style, solid);--_icon-button-outlined-border-color:var(--forge-icon-button-outlined-border-color, var(--_icon-button-icon-color));--_icon-button-tonal-icon-color:var(--forge-icon-button-tonal-icon-color, var(--forge-theme-on-primary-container, #222c62));--_icon-button-tonal-background-color:var(--forge-icon-button-tonal-background-color, var(--forge-theme-primary-container, #d1d5ed));--_icon-button-filled-icon-color:var(--forge-icon-button-filled-icon-color, var(--forge-theme-on-primary, #ffffff));--_icon-button-filled-background-color:var(--forge-icon-button-filled-background-color, var(--forge-theme-primary, #3f51b5));--_icon-button-raised-shadow:var(--forge-icon-button-raised-shadow, 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12));--_icon-button-raised-hover-shadow:var(--forge-icon-button-raised-hover-shadow, 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12));--_icon-button-raised-active-shadow:var(--forge-icon-button-raised-active-shadow, 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12));--_icon-button-raised-disabled-shadow:var(--forge-icon-button-raised-disabled-shadow, none);--_icon-button-density-small-size:var(--forge-icon-button-density-small-size, 24px);--_icon-button-density-small-padding:var(--forge-icon-button-density-small-padding, var(--forge-spacing-xxxsmall, 2px));--_icon-button-density-small-icon-size:var(--forge-icon-button-density-small-icon-size, calc(var(--forge-typography-font-size, 1rem) * 1.125));--_icon-button-density-medium-size:var(--forge-icon-button-density-medium-size, 36px);--_icon-button-density-medium-padding:var(--forge-icon-button-density-medium-padding, var(--forge-spacing-xxsmall, 4px));--_icon-button-density-large-size:var(--forge-icon-button-density-large-size, var(--_icon-button-size));--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-primary-container-low, #e8eaf6));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5));--_icon-button-tonal-toggle-background-color:var(--forge-icon-button-tonal-toggle-background-color, var(--forge-theme-surface-container-low, #ebebeb));--_icon-button-tonal-toggle-on-background-color:var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-primary-container, #d1d5ed));--_icon-button-tonal-toggle-on-icon-color:var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5));--_icon-button-filled-toggle-background-color:var(--forge-icon-button-filled-toggle-background-color, var(--forge-theme-surface-container-low, #ebebeb));--_icon-button-filled-toggle-icon-color:var(--forge-icon-button-filled-toggle-background-color, var(--forge-theme-primary, #3f51b5));--_icon-button-filled-toggle-on-background-color:var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-primary, #3f51b5));--_icon-button-filled-toggle-on-icon-color:var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-primary, #ffffff));--_icon-button-disabled-opacity:var(--forge-icon-button-disabled-opacity, 0.38);--_icon-button-popover-icon-padding:var(--forge-icon-button-popover-icon-padding, var(--forge-spacing-xsmall, 8px));--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-primary, #3f51b5))}.forge-icon-button{position:relative;z-index:0;display:var(--_icon-button-display);-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;gap:var(--_icon-button-gap);-webkit-box-sizing:border-box;box-sizing:border-box;height:var(--_icon-button-density-large-size);min-width:var(--_icon-button-density-large-size);border:var(--_icon-button-border);border-start-start-radius:var(--_icon-button-shape-start-start);border-start-end-radius:var(--_icon-button-shape-start-end);border-end-start-radius:var(--_icon-button-shape-end-start);border-end-end-radius:var(--_icon-button-shape-end-end);padding:var(--_icon-button-padding);-webkit-box-shadow:var(--_icon-button-shadow);box-shadow:var(--_icon-button-shadow);color:var(--_icon-button-icon-color);background:var(--_icon-button-background-color);font-size:var(--_icon-button-icon-size);cursor:var(--_icon-button-cursor);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition-property:background,-webkit-box-shadow;transition-property:background,-webkit-box-shadow;transition-property:box-shadow,background;transition-property:box-shadow,background,-webkit-box-shadow;-webkit-transition-duration:var(--_icon-button-transition-duration);transition-duration:var(--_icon-button-transition-duration);-webkit-transition-timing-function:var(--_icon-button-transition-timing);transition-timing-function:var(--_icon-button-transition-timing)}.forge-icon-button ::slotted(:is([slot=start],[slot=end])){font-size:var(--_icon-button-icon-size);height:var(--_icon-button-icon-size);width:var(--_icon-button-icon-size);font-weight:inherit}a{position:absolute;inset:0;text-decoration:none}forge-focus-indicator{--forge-focus-indicator-color:var(--_icon-button-focus-indicator-color);--forge-focus-indicator-shape-start-start:var(--_icon-button-shape-start-start);--forge-focus-indicator-shape-start-end:var(--_icon-button-shape-start-end);--forge-focus-indicator-shape-end-start:var(--_icon-button-shape-end-start);--forge-focus-indicator-shape-end-end:var(--_icon-button-shape-end-end)}:host(:is([variant=icon],:not([variant]))){--forge-focus-indicator-outward-offset:0px}forge-state-layer{--forge-state-layer-color:var(--_icon-button-icon-color)}:host([popover-icon]) .forge-icon-button{--_icon-button-padding:var(--_icon-button-popover-icon-padding)}:host([variant=outlined]) .forge-icon-button{border-width:var(--_icon-button-outlined-border-width);border-style:var(--_icon-button-outlined-border-style);border-color:var(--_icon-button-outlined-border-color)}:host([variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--_icon-button-tonal-icon-color);--_icon-button-background-color:var(--_icon-button-tonal-background-color)}:host(:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--_icon-button-filled-icon-color);--_icon-button-background-color:var(--_icon-button-filled-background-color)}:host([variant=raised]) .forge-icon-button{--_icon-button-shadow:var(--_icon-button-raised-shadow)}:host([variant=raised]) .forge-icon-button:hover{--_icon-button-raised-shadow:var(--_icon-button-raised-hover-shadow)}:host([variant=raised]) .forge-icon-button:active{--_icon-button-raised-shadow:var(--_icon-button-raised-active-shadow)}:host(:is(:not([toggle]),[toggle]:not([on]))) slot[name=on]{display:none}:host([toggle][on]) slot:not([name]){display:none}:host([toggle][on]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-icon-color:var(--_icon-button-toggle-on-icon-color)}:host([toggle][on][variant=outlined]) .forge-icon-button{--_icon-button-background-color:var(--_icon-button-outlined-toggle-on-background-color);--_icon-button-icon-color:var(--_icon-button-outlined-toggle-on-icon-color)}:host([toggle]:not([on])[variant=tonal]) .forge-icon-button{--_icon-button-background-color:var(--_icon-button-tonal-toggle-background-color)}:host([toggle][on][variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--_icon-button-tonal-toggle-on-icon-color);--_icon-button-background-color:var(--_icon-button-tonal-toggle-on-background-color)}:host([toggle]:not([on]):is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--_icon-button-filled-toggle-icon-color);--_icon-button-background-color:var(--_icon-button-filled-toggle-background-color)}:host([toggle][on]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--_icon-button-filled-toggle-on-icon-color);--_icon-button-background-color:var(--_icon-button-filled-toggle-on-background-color)}::slotted([slot=badge]){position:absolute;top:0;left:60%;z-index:1;pointer-events:none}::slotted(forge-badge[slot=badge][dot]){top:8px}:host(:is([dense],[density=small],[density=medium])) ::slotted(forge-badge[slot=badge]:not([dot])){top:-25%}:host(:is([dense],[density=small],[density=medium])) ::slotted(forge-badge[slot=badge][dot]){top:0}::slotted(forge-circular-progress){--forge-circular-progress-indicator-color:var(--_icon-button-icon-color);--forge-circular-progress-track-color:transparent;--forge-circular-progress-size:1em}:host(:is([dense],[density=small])) .forge-icon-button{--_icon-button-size:var(--_icon-button-density-small-size);--_icon-button-icon-size:var(--_icon-button-density-small-icon-size);--_icon-button-padding:var(--_icon-button-density-small-padding)}:host(:is([dense],[density=small])) ::slotted(*){font-size:var(--_icon-button-density-small-icon-size)}:host([density=medium]) .forge-icon-button{--_icon-button-size:var(--_icon-button-density-medium-size);--_icon-button-padding:var(--_icon-button-density-medium-padding)}:host([shape=squared]) .forge-icon-button{--_icon-button-shape:var(--_icon-button-shape-squared)}:host([disabled]){cursor:var(--_icon-button-disabled-cursor)}:host([disabled]) .forge-icon-button{pointer-events:none;opacity:var(--_icon-button-disabled-opacity)}:host([disabled][variant=raised]) .forge-icon-button{--_icon-button-raised-shadow:var(--_icon-button-raised-disabled-shadow)}:host(:not([toggle])[theme=primary]:is(:not([variant]),[variant=icon],[variant=outlined])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-primary, #3f51b5))}:host([toggle][theme=primary]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5))}:host([toggle][theme=primary][variant=outlined]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-primary, #3f51b5));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-primary-container-low, #e8eaf6));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5))}:host([theme=primary]) .forge-icon-button{--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-primary, #3f51b5))}:host(:not([toggle])[theme=secondary]:is(:not([variant]),[variant=icon],[variant=outlined])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-secondary, #ffc107))}:host([toggle][theme=secondary]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-secondary, #ffc107))}:host([toggle][theme=secondary][variant=outlined]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-secondary, #ffc107));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-secondary-container-low, #fff8e1));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-secondary, #ffc107))}:host(:not([toggle])[theme=secondary][variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-secondary-container, #8a6804));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-secondary-container, #fff0c3))}:host([toggle]:not([on])[theme=secondary][variant=tonal]) .forge-icon-button{--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-secondary-container-low, #fff8e1))}:host([toggle][theme=secondary][variant=tonal]) .forge-icon-button{--_icon-button-tonal-toggle-on-background-color:var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-secondary-container, #fff0c3));--_icon-button-tonal-toggle-on-icon-color:var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-on-secondary-container, #8a6804))}:host(:not([toggle])[theme=secondary]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-secondary, #000000));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-secondary, #ffc107))}:host([toggle]:not([on])[theme=secondary]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-secondary, #ffc107));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-secondary-container-low, #fff8e1))}:host([toggle][theme=secondary]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-filled-toggle-on-background-color:var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-secondary, #ffc107));--_icon-button-filled-toggle-on-icon-color:var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-secondary, #000000))}:host([theme=secondary]) .forge-icon-button{--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-secondary, #ffc107))}:host(:not([toggle])[theme=tertiary]:is(:not([variant]),[variant=icon],[variant=outlined])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-tertiary, #3d5afe))}:host([toggle][theme=tertiary]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-tertiary, #3d5afe))}:host([toggle][theme=tertiary][variant=outlined]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-tertiary, #3d5afe));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-tertiary-container-low, #e8ebff));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-tertiary, #3d5afe))}:host(:not([toggle])[theme=tertiary][variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-tertiary-container, #213189));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-tertiary-container, #d0d7ff))}:host([toggle]:not([on])[theme=tertiary][variant=tonal]) .forge-icon-button{--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-tertiary-container-low, #e8ebff))}:host([toggle][theme=tertiary][variant=tonal]) .forge-icon-button{--_icon-button-tonal-toggle-on-background-color:var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-tertiary-container, #d0d7ff));--_icon-button-tonal-toggle-on-icon-color:var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-on-tertiary-container, #213189))}:host(:not([toggle])[theme=tertiary]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-tertiary, #ffffff));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-tertiary, #3d5afe))}:host([toggle]:not([on])[theme=tertiary]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-tertiary, #3d5afe));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-tertiary-container-low, #e8ebff))}:host([toggle][theme=tertiary]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-filled-toggle-on-background-color:var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-tertiary, #3d5afe));--_icon-button-filled-toggle-on-icon-color:var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-tertiary, #ffffff))}:host([theme=tertiary]) .forge-icon-button{--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-tertiary, #3d5afe))}:host(:not([toggle])[theme=success]:is(:not([variant]),[variant=icon],[variant=outlined])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-success, #2e7d32))}:host([toggle][theme=success]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-success, #2e7d32))}:host([toggle][theme=success][variant=outlined]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-success, #2e7d32));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-success-container-low, #e6efe6));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-success, #2e7d32))}:host(:not([toggle])[theme=success][variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-success-container, #19441b));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-success-container, #cde0ce))}:host([toggle]:not([on])[theme=success][variant=tonal]) .forge-icon-button{--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-success-container-low, #e6efe6))}:host([toggle][theme=success][variant=tonal]) .forge-icon-button{--_icon-button-tonal-toggle-on-background-color:var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-success-container, #cde0ce));--_icon-button-tonal-toggle-on-icon-color:var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-on-success-container, #19441b))}:host(:not([toggle])[theme=success]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-success, #ffffff));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-success, #2e7d32))}:host([toggle]:not([on])[theme=success]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-success, #2e7d32));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-success-container-low, #e6efe6))}:host([toggle][theme=success]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-filled-toggle-on-background-color:var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-success, #2e7d32));--_icon-button-filled-toggle-on-icon-color:var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-success, #ffffff))}:host([theme=success]) .forge-icon-button{--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-success, #2e7d32))}:host(:not([toggle])[theme=error]:is(:not([variant]),[variant=icon],[variant=outlined])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-error, #b00020))}:host([toggle][theme=error]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-error, #b00020))}:host([toggle][theme=error][variant=outlined]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-error, #b00020));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-error-container-low, #f6e0e4));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-error, #b00020))}:host(:not([toggle])[theme=error][variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-error-container, #5f0011));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-error-container, #ecc2c9))}:host([toggle]:not([on])[theme=error][variant=tonal]) .forge-icon-button{--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-error-container-low, #f6e0e4))}:host([toggle][theme=error][variant=tonal]) .forge-icon-button{--_icon-button-tonal-toggle-on-background-color:var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-error-container, #ecc2c9));--_icon-button-tonal-toggle-on-icon-color:var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-on-error-container, #5f0011))}:host(:not([toggle])[theme=error]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-error, #ffffff));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-error, #b00020))}:host([toggle]:not([on])[theme=error]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-error, #b00020));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-error-container-low, #f6e0e4))}:host([toggle][theme=error]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-filled-toggle-on-background-color:var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-error, #b00020));--_icon-button-filled-toggle-on-icon-color:var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-error, #ffffff))}:host([theme=error]) .forge-icon-button{--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-error, #b00020))}:host(:not([toggle])[theme=warning]:is(:not([variant]),[variant=icon],[variant=outlined])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-warning, #d14900))}:host([toggle][theme=warning]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-warning, #d14900))}:host([toggle][theme=warning][variant=outlined]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-warning, #d14900));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-warning-container-low, #f9e9e0));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-warning, #d14900))}:host(:not([toggle])[theme=warning][variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-warning-container, #712700));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-warning-container, #f4d3c2))}:host([toggle]:not([on])[theme=warning][variant=tonal]) .forge-icon-button{--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-warning-container-low, #f9e9e0))}:host([toggle][theme=warning][variant=tonal]) .forge-icon-button{--_icon-button-tonal-toggle-on-background-color:var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-warning-container, #f4d3c2));--_icon-button-tonal-toggle-on-icon-color:var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-on-warning-container, #712700))}:host(:not([toggle])[theme=warning]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-warning, #ffffff));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-warning, #d14900))}:host([toggle]:not([on])[theme=warning]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-warning, #d14900));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-warning-container-low, #f9e9e0))}:host([toggle][theme=warning]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-filled-toggle-on-background-color:var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-warning, #d14900));--_icon-button-filled-toggle-on-icon-color:var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-warning, #ffffff))}:host([theme=warning]) .forge-icon-button{--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-warning, #d14900))}:host(:not([toggle])[theme=info]:is(:not([variant]),[variant=icon],[variant=outlined])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-info, #1565c0))}:host([toggle][theme=info]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-info, #1565c0))}:host([toggle][theme=info][variant=outlined]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-info, #1565c0));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-info-container-low, #e3edf7));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-info, #1565c0))}:host(:not([toggle])[theme=info][variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-info-container, #0b3768));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-info-container, #c7daf0))}:host([toggle]:not([on])[theme=info][variant=tonal]) .forge-icon-button{--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-info-container-low, #e3edf7))}:host([toggle][theme=info][variant=tonal]) .forge-icon-button{--_icon-button-tonal-toggle-on-background-color:var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-info-container, #c7daf0));--_icon-button-tonal-toggle-on-icon-color:var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-on-info-container, #0b3768))}:host(:not([toggle])[theme=info]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-info, #ffffff));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-info, #1565c0))}:host([toggle]:not([on])[theme=info]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-info, #1565c0));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-info-container-low, #e3edf7))}:host([toggle][theme=info]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-filled-toggle-on-background-color:var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-info, #1565c0));--_icon-button-filled-toggle-on-icon-color:var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-info, #ffffff))}:host([theme=info]) .forge-icon-button{--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-info, #1565c0))}';
|
|
19
18
|
/**
|
|
20
19
|
* @tag forge-icon-button
|
|
21
20
|
*
|
|
@@ -61,6 +60,56 @@ const styles = ':host{--_icon-button-display:var(--forge-icon-button-display, in
|
|
|
61
60
|
* @event {Event} click - Fires when the button is clicked.
|
|
62
61
|
* @event {Event} forge-icon-button-toggle - Fires when the icon button is toggled.
|
|
63
62
|
*
|
|
63
|
+
* @cssproperty --forge-icon-button-display - The display property of the button.
|
|
64
|
+
* @cssproperty --forge-icon-button-size - The height and min-width of the button.
|
|
65
|
+
* @cssproperty --forge-icon-button-gap - The gap between the icon content.
|
|
66
|
+
* @cssproperty --forge-icon-button-icon-color - The color of the icon.
|
|
67
|
+
* @cssproperty --forge-icon-button-background-color - The background color of the button.
|
|
68
|
+
* @cssproperty --forge-icon-button-icon-size - The size of the icon.
|
|
69
|
+
* @cssproperty --forge-icon-button-cursor - The cursor of the button.
|
|
70
|
+
* @cssproperty --forge-icon-button-padding - The inline padding of the button.
|
|
71
|
+
* @cssproperty --forge-icon-button-border - The border of the button.
|
|
72
|
+
* @cssproperty --forge-icon-button-shadow - The shadow of the button.
|
|
73
|
+
* @cssproperty --forge-icon-button-transition-duration - The transition duration of the button.
|
|
74
|
+
* @cssproperty --forge-icon-button-transition-timing - The transition timing of the button.
|
|
75
|
+
* @cssproperty --forge-icon-button-shape - The shape of the button.
|
|
76
|
+
* @cssproperty --forge-icon-button-shape-start-start - The start-start border-radius of the button.
|
|
77
|
+
* @cssproperty --forge-icon-button-shape-start-end - The start-end border-radius of the button.
|
|
78
|
+
* @cssproperty --forge-icon-button-shape-end-start - The end-start border-radius of the button.
|
|
79
|
+
* @cssproperty --forge-icon-button-shape-end-end - The end-end border-radius of the button.
|
|
80
|
+
* @cssproperty --forge-icon-button-shape-squared - The squared border-radius of the button.
|
|
81
|
+
* @cssproperty --forge-icon-button-outlined-border-width - The border width when in the outlined variant.
|
|
82
|
+
* @cssproperty --forge-icon-button-outlined-border-style - The border style when in the outlined variant.
|
|
83
|
+
* @cssproperty --forge-icon-button-outlined-border-color - The border color when in the outlined variant.
|
|
84
|
+
* @cssproperty --forge-icon-button-tonal-icon-color - The icon color when in the tonal variant.
|
|
85
|
+
* @cssproperty --forge-icon-button-tonal-background-color - The background color when in the tonal variant.
|
|
86
|
+
* @cssproperty --forge-icon-button-filled-icon-color - The icon color when in the filled variant.
|
|
87
|
+
* @cssproperty --forge-icon-button-filled-background-color - The background color when in the filled variant.
|
|
88
|
+
* @cssproperty --forge-icon-button-raised-shadow - The shadow when in the raised variant.
|
|
89
|
+
* @cssproperty --forge-icon-button-raised-hover-shadow - The shadow when in the raised variant and hovered.
|
|
90
|
+
* @cssproperty --forge-icon-button-raised-active-shadow - The shadow when in the raised variant and active.
|
|
91
|
+
* @cssproperty --forge-icon-button-raised-disabled-shadow - The shadow when in the raised variant and disabled.
|
|
92
|
+
* @cssproperty --forge-icon-button-density-small-size - The size of the button when in the small density.
|
|
93
|
+
* @cssproperty --forge-icon-button-density-small-padding - The padding of the button when in the small density.
|
|
94
|
+
* @cssproperty --forge-icon-button-density-small-icon-size - The size of the icon when in the small density.
|
|
95
|
+
* @cssproperty --forge-icon-button-density-medium-size - The size of the button when in the medium density.
|
|
96
|
+
* @cssproperty --forge-icon-button-density-medium-padding - The padding of the button when in the medium density.
|
|
97
|
+
* @cssproperty --forge-icon-button-density-large-size - The size of the button when in the large density.
|
|
98
|
+
* @cssproperty --forge-icon-button-toggle-on-icon-color - The color of the icon when in toggle mode and toggled on.
|
|
99
|
+
* @cssproperty --forge-icon-button-outlined-toggle-on-background-color - The background color when in the outlined variant and toggled on.
|
|
100
|
+
* @cssproperty --forge-icon-button-outlined-toggle-on-icon-color - The icon color when in the outlined variant and toggled on.
|
|
101
|
+
* @cssproperty --forge-icon-button-tonal-toggle-background-color - The background color when in the tonal variant and toggled.
|
|
102
|
+
* @cssproperty --forge-icon-button-tonal-toggle-on-background-color - The background color when in the tonal variant and toggled on.
|
|
103
|
+
* @cssproperty --forge-icon-button-tonal-toggle-on-icon-color - The icon color when in the tonal variant and toggled on.
|
|
104
|
+
* @cssproperty --forge-icon-button-filled-toggle-background-color - The background color when in the filled variant and toggled.
|
|
105
|
+
* @cssproperty --forge-icon-button-filled-toggle-icon-color - The icon color when in the filled variant and toggled.
|
|
106
|
+
* @cssproperty --forge-icon-button-filled-toggle-on-background-color - The background color when in the filled variant and toggled on.
|
|
107
|
+
* @cssproperty --forge-icon-button-filled-toggle-on-icon-color - The icon color when in the filled variant and toggled on.
|
|
108
|
+
* @cssproperty --forge-icon-button-disabled-cursor - The cursor when the button is disabled.
|
|
109
|
+
* @cssproperty --forge-icon-button-disabled-opacity - The opacity when the button is disabled.
|
|
110
|
+
* @cssproperty --forge-icon-button-popover-icon-padding - The padding of the popover icon.
|
|
111
|
+
* @cssproperty --forge-icon-button-focus-indicator-color - The color of the focus indicator.
|
|
112
|
+
*
|
|
64
113
|
* @csspart root - The root container element.
|
|
65
114
|
* @csspart focus-indicator - The focus-indicator indicator element.
|
|
66
115
|
* @csspart state-layer - The state-layer surface element.
|
|
@@ -69,6 +118,7 @@ const styles = ':host{--_icon-button-display:var(--forge-icon-button-display, in
|
|
|
69
118
|
* @slot on - The icon to show when in `toggle` mode when toggled "on".
|
|
70
119
|
* @slot start - Elements to logically render before the icon.
|
|
71
120
|
* @slot end - Elements to logically render after the icon.
|
|
121
|
+
* @slot badge - Absolutely positions the element in the top-end corner of the button (typically reserved for badge-like content).
|
|
72
122
|
*/
|
|
73
123
|
let IconButtonComponent = class IconButtonComponent extends BaseButton {
|
|
74
124
|
static get observedAttributes() {
|
|
@@ -79,7 +129,6 @@ let IconButtonComponent = class IconButtonComponent extends BaseButton {
|
|
|
79
129
|
}
|
|
80
130
|
constructor() {
|
|
81
131
|
super();
|
|
82
|
-
IconRegistry.define(tylIconArrowDropDown);
|
|
83
132
|
attachShadowTemplate(this, template, styles);
|
|
84
133
|
this._foundation = new IconButtonFoundation(new IconButtonAdapter(this));
|
|
85
134
|
}
|
|
@@ -3,7 +3,9 @@
|
|
|
3
3
|
* Copyright 2023 Tyler Technologies, Inc.
|
|
4
4
|
* License: Apache-2.0
|
|
5
5
|
*/
|
|
6
|
-
export * from './icon-button-constants';
|
|
7
6
|
export * from './icon-button';
|
|
7
|
+
export * from './icon-button-adapter';
|
|
8
8
|
export * from './icon-button-component-delegate';
|
|
9
|
+
export * from './icon-button-constants';
|
|
10
|
+
export * from './icon-button-foundation';
|
|
9
11
|
export declare function defineIconButtonComponent(): void;
|
package/esm/icon-button/index.js
CHANGED
|
@@ -5,9 +5,11 @@
|
|
|
5
5
|
*/
|
|
6
6
|
import { defineCustomElement } from '@tylertech/forge-core';
|
|
7
7
|
import { IconButtonComponent } from './icon-button';
|
|
8
|
-
export * from './icon-button-constants';
|
|
9
8
|
export * from './icon-button';
|
|
9
|
+
export * from './icon-button-adapter';
|
|
10
10
|
export * from './icon-button-component-delegate';
|
|
11
|
+
export * from './icon-button-constants';
|
|
12
|
+
export * from './icon-button-foundation';
|
|
11
13
|
export function defineIconButtonComponent() {
|
|
12
14
|
defineCustomElement(IconButtonComponent);
|
|
13
15
|
}
|
package/esm/index.js
CHANGED
|
@@ -34,7 +34,7 @@ import { DividerComponent } from './divider';
|
|
|
34
34
|
import { DrawerComponent, MiniDrawerComponent, ModalDrawerComponent } from './drawer';
|
|
35
35
|
import { ExpansionPanelComponent } from './expansion-panel';
|
|
36
36
|
import { FilePickerComponent } from './file-picker';
|
|
37
|
-
import {
|
|
37
|
+
import { FloatingActionButtonComponent } from './floating-action-button';
|
|
38
38
|
import { FocusIndicatorComponent } from './focus-indicator';
|
|
39
39
|
import { IconButtonComponent } from './icon-button';
|
|
40
40
|
import { InlineMessageComponent } from './inline-message';
|
|
@@ -171,7 +171,7 @@ const CUSTOM_ELEMENTS = [
|
|
|
171
171
|
ModalDrawerComponent,
|
|
172
172
|
ExpansionPanelComponent,
|
|
173
173
|
FilePickerComponent,
|
|
174
|
-
|
|
174
|
+
FloatingActionButtonComponent,
|
|
175
175
|
FocusIndicatorComponent,
|
|
176
176
|
ProductIconComponent,
|
|
177
177
|
IconComponent,
|
|
@@ -29,8 +29,10 @@ export class LabelFoundation {
|
|
|
29
29
|
this._adapter.updateTargetLabel();
|
|
30
30
|
}
|
|
31
31
|
_handleClick(evt) {
|
|
32
|
-
// Prevent duplicate clicks from a nested target element
|
|
33
|
-
|
|
32
|
+
// Prevent duplicate clicks from a nested target element or if the event originates
|
|
33
|
+
// from within the target element
|
|
34
|
+
const targetEl = this._adapter.getTargetElement();
|
|
35
|
+
if (evt.target === targetEl || (targetEl === null || targetEl === void 0 ? void 0 : targetEl.contains(evt.target))) {
|
|
34
36
|
return;
|
|
35
37
|
}
|
|
36
38
|
this._adapter.clickTarget();
|
|
@@ -6,18 +6,18 @@
|
|
|
6
6
|
import { BaseAdapter, IBaseAdapter } from '../core/base/base-adapter';
|
|
7
7
|
import { ILinearProgressComponent } from './linear-progress';
|
|
8
8
|
export interface ILinearProgressAdapter extends IBaseAdapter {
|
|
9
|
+
initialize(): void;
|
|
9
10
|
setDeterminate(value: boolean): void;
|
|
10
11
|
setProgress(value: number): void;
|
|
11
12
|
setBuffer(value: number): void;
|
|
12
|
-
setAriaLabel(value: string): void;
|
|
13
13
|
}
|
|
14
14
|
export declare class LinearProgressAdapter extends BaseAdapter<ILinearProgressComponent> implements ILinearProgressAdapter {
|
|
15
15
|
private readonly _rootElement;
|
|
16
16
|
private readonly _progressElement;
|
|
17
17
|
private readonly _bufferElement;
|
|
18
18
|
constructor(component: ILinearProgressComponent);
|
|
19
|
+
initialize(): void;
|
|
19
20
|
setDeterminate(value: boolean): void;
|
|
20
21
|
setProgress(value: number): void;
|
|
21
22
|
setBuffer(value: number): void;
|
|
22
|
-
setAriaLabel(value: string): void;
|
|
23
23
|
}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
* Copyright 2023 Tyler Technologies, Inc.
|
|
4
4
|
* License: Apache-2.0
|
|
5
5
|
*/
|
|
6
|
-
import { getShadowElement
|
|
6
|
+
import { getShadowElement } from '@tylertech/forge-core';
|
|
7
7
|
import { BaseAdapter } from '../core/base/base-adapter';
|
|
8
8
|
import { LINEAR_PROGRESS_CONSTANTS } from './linear-progress-constants';
|
|
9
9
|
export class LinearProgressAdapter extends BaseAdapter {
|
|
@@ -13,22 +13,30 @@ export class LinearProgressAdapter extends BaseAdapter {
|
|
|
13
13
|
this._progressElement = getShadowElement(component, LINEAR_PROGRESS_CONSTANTS.selectors.PROGRESS);
|
|
14
14
|
this._bufferElement = getShadowElement(component, LINEAR_PROGRESS_CONSTANTS.selectors.BUFFER);
|
|
15
15
|
}
|
|
16
|
+
initialize() {
|
|
17
|
+
if (!this._component.hasAttribute('role')) {
|
|
18
|
+
this._component.setAttribute('role', 'progressbar');
|
|
19
|
+
}
|
|
20
|
+
if (!this._component.hasAttribute('aria-valuemin')) {
|
|
21
|
+
this._component.setAttribute('aria-valuemin', '0');
|
|
22
|
+
}
|
|
23
|
+
if (!this._component.hasAttribute('aria-valuemax')) {
|
|
24
|
+
this._component.setAttribute('aria-valuemax', '1');
|
|
25
|
+
}
|
|
26
|
+
}
|
|
16
27
|
setDeterminate(value) {
|
|
17
28
|
if (!value) {
|
|
18
|
-
this.
|
|
29
|
+
this._component.removeAttribute('aria-valuenow');
|
|
19
30
|
this._progressElement.style.transform = '';
|
|
20
31
|
this._bufferElement.style.transform = '';
|
|
21
32
|
}
|
|
22
33
|
this._rootElement.classList.toggle(LINEAR_PROGRESS_CONSTANTS.classes.INDETERMINATE, !value);
|
|
23
34
|
}
|
|
24
35
|
setProgress(value) {
|
|
25
|
-
this.
|
|
36
|
+
this._component.setAttribute('aria-valuenow', `${value}`);
|
|
26
37
|
this._progressElement.style.transform = `scaleX(${value * 100}%)`;
|
|
27
38
|
}
|
|
28
39
|
setBuffer(value) {
|
|
29
40
|
this._bufferElement.style.transform = `scaleX(${value * 100}%)`;
|
|
30
41
|
}
|
|
31
|
-
setAriaLabel(value) {
|
|
32
|
-
toggleAttribute(this._rootElement, !!value, 'aria-label', value);
|
|
33
|
-
}
|
|
34
42
|
}
|
|
@@ -19,7 +19,7 @@ export declare class LinearProgressFoundation {
|
|
|
19
19
|
private _buffer;
|
|
20
20
|
private _theme;
|
|
21
21
|
constructor(_adapter: ILinearProgressAdapter);
|
|
22
|
-
|
|
22
|
+
initialize(): void;
|
|
23
23
|
get determinate(): boolean;
|
|
24
24
|
set determinate(value: boolean);
|
|
25
25
|
get progress(): number;
|
|
@@ -12,8 +12,8 @@ export class LinearProgressFoundation {
|
|
|
12
12
|
this._buffer = 1;
|
|
13
13
|
this._theme = 'primary';
|
|
14
14
|
}
|
|
15
|
-
|
|
16
|
-
this._adapter.
|
|
15
|
+
initialize() {
|
|
16
|
+
this._adapter.initialize();
|
|
17
17
|
}
|
|
18
18
|
get determinate() {
|
|
19
19
|
return this._determinate;
|
|
@@ -36,7 +36,6 @@ declare global {
|
|
|
36
36
|
* @attribute {number} progress - Controls the progress while in a determinate state. Accepts values from `0` to `1`.
|
|
37
37
|
* @attribute {number} buffer - Controls the buffer progress while in a determinate state. Accepts values from `0` to `1`.
|
|
38
38
|
* @attribute {string} theme - Sets the theme.
|
|
39
|
-
* @attribute {string} data-aria-label - Propagates an `aria-label` to the underlying progress bar element.
|
|
40
39
|
*
|
|
41
40
|
* @cssproperty --forge-linear-progress-height - The height of the element.
|
|
42
41
|
* @cssproperty --forge-linear-progress-track-color - The background color of the indicator.
|
|
@@ -55,6 +54,7 @@ export declare class LinearProgressComponent extends BaseComponent implements IL
|
|
|
55
54
|
static get observedAttributes(): string[];
|
|
56
55
|
private _foundation;
|
|
57
56
|
constructor();
|
|
57
|
+
connectedCallback(): void;
|
|
58
58
|
attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
|
|
59
59
|
determinate: boolean;
|
|
60
60
|
progress: number;
|
|
@@ -9,7 +9,7 @@ import { BaseComponent } from '../core/base/base-component';
|
|
|
9
9
|
import { LinearProgressAdapter } from './linear-progress-adapter';
|
|
10
10
|
import { LINEAR_PROGRESS_CONSTANTS } from './linear-progress-constants';
|
|
11
11
|
import { LinearProgressFoundation } from './linear-progress-foundation';
|
|
12
|
-
const template = '<template><div class=\"forge-linear-progress forge-linear-progress--indeterminate\" part=\"progressbar\"
|
|
12
|
+
const template = '<template><div class=\"forge-linear-progress forge-linear-progress--indeterminate\" part=\"progressbar\"><div class=\"track\"></div><div class=\"buffer-bar\"></div><div class=\"bar primary-bar\"><div class=\"bar-inner\"></div></div><div class=\"bar secondary-bar\"><div class=\"bar-inner\"></div></div></div></template>';
|
|
13
13
|
const styles = ':host{--_linear-progress-track-height:var(--forge-linear-progress-track-height, 4px)}:host{display:block;position:relative;min-inline-size:80px;block-size:var(--_linear-progress-track-height);content-visibility:auto;contain:strict}:host([hidden]){display:none}.forge-linear-progress{--_linear-progress-track-color:var(--forge-linear-progress-track-color, var(--forge-theme-tertiary-container, #d0d7ff));--_linear-progress-track-shape:var(--forge-linear-progress-track-shape, var(--forge-shape-full, 9999px));--_linear-progress-indicator-color:var(--forge-linear-progress-indicator-color, var(--forge-theme-tertiary, #3d5afe));--_linear-progress-indicator-height:var(--forge-linear-progress-indicator-height, var(--_linear-progress-track-height));--_linear-progress-determinate-duration:var(--forge-linear-progress-determinate-duration, var(--forge-animation-duration-medium1, 250ms));--_linear-progress-determinate-easing:var(--forge-linear-progress-determinate-easing, cubic-bezier(0.4, 0, 0.6, 1));--_linear-progress-indeterminate-duration:var(--forge-linear-progress-indeterminate-duration, 2s);--_linear-progress-theme-transition-duration:var(--forge-linear-progress-theme-transition-duration, var(--forge-animation-duration-short3, 150ms));--_linear-progress-theme-transition-timing:var(--forge-linear-progress-theme-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_linear-progress-track-dot-size:calc(var(--_linear-progress-track-height) / 2);--_linear-progress-track-background-width:calc(var(--_linear-progress-track-dot-size) * 5);--_linear-progress-track-background:0/var(--_linear-progress-track-background-width) 100% radial-gradient(circle at calc(var(--_linear-progress-track-dot-size) * 2), var(--_linear-progress-track-color) 0, var(--_linear-progress-track-color) var(--_linear-progress-track-dot-size), transparent var(--_linear-progress-track-dot-size))}.forge-linear-progress{inset:0;outline:transparent solid 1px;border-radius:var(--_linear-progress-track-shape);overflow:hidden;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}.bar,.bar-inner,.buffer-bar,.forge-linear-progress,.track{position:absolute}.bar{-webkit-animation:none;animation:none;inline-size:100%;block-size:var(--_linear-progress-indicator-height);-webkit-transform-origin:left center;transform-origin:left center;will-change:transform;-webkit-transition:-webkit-transform var(--_linear-progress-determinate-duration) var(--_linear-progress-determinate-easing);transition:-webkit-transform var(--_linear-progress-determinate-duration) var(--_linear-progress-determinate-easing);transition:transform var(--_linear-progress-determinate-duration) var(--_linear-progress-determinate-easing);transition:transform var(--_linear-progress-determinate-duration) var(--_linear-progress-determinate-easing),-webkit-transform var(--_linear-progress-determinate-duration) var(--_linear-progress-determinate-easing)}.secondary-bar{display:none}.bar-inner{inset:0;-webkit-animation:none;animation:none;-webkit-transition:background-color var(--_linear-progress-theme-transition-duration) var(--_linear-progress-theme-transition-timing);transition:background-color var(--_linear-progress-theme-transition-duration) var(--_linear-progress-theme-transition-timing);background:var(--_linear-progress-indicator-color)}.buffer-bar{background:var(--_linear-progress-track-color);inset:0;will-change:transform;-webkit-transition:background-color var(--_linear-progress-theme-transition-duration) var(--_linear-progress-theme-transition-timing),-webkit-transform var(--_linear-progress-determinate-duration) var(--_linear-progress-determinate-easing);transition:background-color var(--_linear-progress-theme-transition-duration) var(--_linear-progress-theme-transition-timing),-webkit-transform var(--_linear-progress-determinate-duration) var(--_linear-progress-determinate-easing);transition:transform var(--_linear-progress-determinate-duration) var(--_linear-progress-determinate-easing),background-color var(--_linear-progress-theme-transition-duration) var(--_linear-progress-theme-transition-timing);transition:transform var(--_linear-progress-determinate-duration) var(--_linear-progress-determinate-easing),background-color var(--_linear-progress-theme-transition-duration) var(--_linear-progress-theme-transition-timing),-webkit-transform var(--_linear-progress-determinate-duration) var(--_linear-progress-determinate-easing);-webkit-transform-origin:left center;transform-origin:left center}.track{inset:0;will-change:transform;-webkit-animation:linear infinite var(--_linear-progress-determinate-duration);animation:linear infinite var(--_linear-progress-determinate-duration);-webkit-animation-name:buffering;animation-name:buffering;background:var(--_linear-progress-track-color);-webkit-transition:background-color var(--_linear-progress-theme-transition-duration) var(--_linear-progress-theme-transition-timing);transition:background-color var(--_linear-progress-theme-transition-duration) var(--_linear-progress-theme-transition-timing)}.forge-linear-progress--indeterminate .bar{-webkit-transition:none;transition:none}.forge-linear-progress--indeterminate .primary-bar{inset-inline-start:-145.167%;will-change:transform;-webkit-animation:linear infinite var(--_linear-progress-indeterminate-duration);animation:linear infinite var(--_linear-progress-indeterminate-duration);-webkit-animation-name:primary-indeterminate-translate;animation-name:primary-indeterminate-translate}.forge-linear-progress--indeterminate .secondary-bar{inset-inline-start:-54.8889%;display:block;will-change:transform;-webkit-animation:linear infinite var(--_linear-progress-indeterminate-duration);animation:linear infinite var(--_linear-progress-indeterminate-duration);-webkit-animation-name:secondary-indeterminate-translate;animation-name:secondary-indeterminate-translate}.forge-linear-progress--indeterminate .track{display:none}.forge-linear-progress--indeterminate .primary-bar>.bar-inner{will-change:transform;-webkit-animation:linear infinite var(--_linear-progress-indeterminate-duration) primary-indeterminate-scale;animation:linear infinite var(--_linear-progress-indeterminate-duration) primary-indeterminate-scale}.forge-linear-progress--indeterminate .secondary-bar>.bar-inner{will-change:transform;-webkit-animation:linear infinite var(--_linear-progress-indeterminate-duration) secondary-indeterminate-scale;animation:linear infinite var(--_linear-progress-indeterminate-duration) secondary-indeterminate-scale}:host-context([dir=rtl]) .forge-linear-progress .bar{-webkit-transform-origin:right center;transform-origin:right center}:host-context([dir=rtl]) .forge-linear-progress .buffer-bar{-webkit-transform-origin:right center;transform-origin:right center}:host-context([dir=rtl]) .forge-linear-progress .track{-webkit-animation-name:buffering-rtl;animation-name:buffering-rtl}:host-context([dir=rtl]) .forge-linear-progress.forge-linear-progress--indeterminate .primary-bar{-webkit-animation-name:primary-indeterminate-translate-rtl;animation-name:primary-indeterminate-translate-rtl}:host-context([dir=rtl]) .forge-linear-progress.forge-linear-progress--indeterminate .secondary-bar{-webkit-animation-name:secondary-indeterminate-translate-rtl;animation-name:secondary-indeterminate-translate-rtl}:host([dir=rtl]) .forge-linear-progress .bar{-webkit-transform-origin:right center;transform-origin:right center}:host([dir=rtl]) .forge-linear-progress .buffer-bar{-webkit-transform-origin:right center;transform-origin:right center}:host([dir=rtl]) .forge-linear-progress .track{-webkit-animation-name:buffering-rtl;animation-name:buffering-rtl}:host([dir=rtl]) .forge-linear-progress.forge-linear-progress--indeterminate .primary-bar{-webkit-animation-name:primary-indeterminate-translate-rtl;animation-name:primary-indeterminate-translate-rtl}:host([dir=rtl]) .forge-linear-progress.forge-linear-progress--indeterminate .secondary-bar{-webkit-animation-name:secondary-indeterminate-translate-rtl;animation-name:secondary-indeterminate-translate-rtl}.forge-linear-progress:dir(rtl) .bar{-webkit-transform-origin:right center;transform-origin:right center}.forge-linear-progress:dir(rtl) .buffer-bar{-webkit-transform-origin:right center;transform-origin:right center}.forge-linear-progress:dir(rtl) .track{-webkit-animation-name:buffering-rtl;animation-name:buffering-rtl}.forge-linear-progress:dir(rtl).forge-linear-progress--indeterminate .primary-bar{-webkit-animation-name:primary-indeterminate-translate-rtl;animation-name:primary-indeterminate-translate-rtl}.forge-linear-progress:dir(rtl).forge-linear-progress--indeterminate .secondary-bar{-webkit-animation-name:secondary-indeterminate-translate-rtl;animation-name:secondary-indeterminate-translate-rtl}:host([theme=primary]) .forge-linear-progress{--_linear-progress-indicator-color:var(--forge-linear-progress-indicator-color, var(--forge-theme-primary, #3f51b5));--_linear-progress-track-color:var(--forge-linear-progress-track-color, var(--forge-theme-primary-container, #d1d5ed))}:host([theme=secondary]) .forge-linear-progress{--_linear-progress-indicator-color:var(--forge-linear-progress-indicator-color, var(--forge-theme-secondary, #ffc107));--_linear-progress-track-color:var(--forge-linear-progress-track-color, var(--forge-theme-secondary-container, #fff0c3))}:host([theme=success]) .forge-linear-progress{--_linear-progress-indicator-color:var(--forge-linear-progress-indicator-color, var(--forge-theme-success, #2e7d32));--_linear-progress-track-color:var(--forge-linear-progress-track-color, var(--forge-theme-success-container, #cde0ce))}:host([theme=error]) .forge-linear-progress{--_linear-progress-indicator-color:var(--forge-linear-progress-indicator-color, var(--forge-theme-error, #b00020));--_linear-progress-track-color:var(--forge-linear-progress-track-color, var(--forge-theme-error-container, #ecc2c9))}:host([theme=warning]) .forge-linear-progress{--_linear-progress-indicator-color:var(--forge-linear-progress-indicator-color, var(--forge-theme-warning, #d14900));--_linear-progress-track-color:var(--forge-linear-progress-track-color, var(--forge-theme-warning-container, #f4d3c2))}:host([theme=info]) .forge-linear-progress{--_linear-progress-indicator-color:var(--forge-linear-progress-indicator-color, var(--forge-theme-info, #1565c0));--_linear-progress-track-color:var(--forge-linear-progress-track-color, var(--forge-theme-info-container, #c7daf0))}@media screen and (forced-colors:active){.forge-linear-progress{--_linear-progress-indicator-color:var(--forge-linear-progress-indicator-color, CanvasText);--_linear-progress-track-color:var(--forge-linear-progress-track-color, GrayText);border:1px solid CanvasText}.forge-linear-progress.forge-linear-progress--indeterminate{--_linear-progress-track-color:var(--forge-linear-progress-track-color, Canvas)}}@-webkit-keyframes buffering{0%{-webkit-transform:translateX(calc(1 * var(--_linear-progress-track-background-width)));transform:translateX(calc(1 * var(--_linear-progress-track-background-width)))}}@keyframes buffering{0%{-webkit-transform:translateX(calc(1 * var(--_linear-progress-track-background-width)));transform:translateX(calc(1 * var(--_linear-progress-track-background-width)))}}@-webkit-keyframes primary-indeterminate-translate{0%{-webkit-transform:translateX(0);transform:translateX(0)}20%{-webkit-animation-timing-function:cubic-bezier(0.5,0,0.701732,0.495819);animation-timing-function:cubic-bezier(0.5,0,0.701732,0.495819);-webkit-transform:translateX(0);transform:translateX(0)}59.15%{-webkit-animation-timing-function:cubic-bezier(0.302435,0.381352,0.55,0.956352);animation-timing-function:cubic-bezier(0.302435,0.381352,0.55,0.956352);-webkit-transform:translateX(calc(1 * 83.6714%));transform:translateX(calc(1 * 83.6714%))}100%{-webkit-transform:translateX(calc(1 * 200.611%));transform:translateX(calc(1 * 200.611%))}}@keyframes primary-indeterminate-translate{0%{-webkit-transform:translateX(0);transform:translateX(0)}20%{-webkit-animation-timing-function:cubic-bezier(0.5,0,0.701732,0.495819);animation-timing-function:cubic-bezier(0.5,0,0.701732,0.495819);-webkit-transform:translateX(0);transform:translateX(0)}59.15%{-webkit-animation-timing-function:cubic-bezier(0.302435,0.381352,0.55,0.956352);animation-timing-function:cubic-bezier(0.302435,0.381352,0.55,0.956352);-webkit-transform:translateX(calc(1 * 83.6714%));transform:translateX(calc(1 * 83.6714%))}100%{-webkit-transform:translateX(calc(1 * 200.611%));transform:translateX(calc(1 * 200.611%))}}@-webkit-keyframes secondary-indeterminate-translate{0%{-webkit-animation-timing-function:cubic-bezier(0.15,0,0.515058,0.409685);animation-timing-function:cubic-bezier(0.15,0,0.515058,0.409685);-webkit-transform:translateX(0);transform:translateX(0)}25%{-webkit-animation-timing-function:cubic-bezier(0.31033,0.284058,0.8,0.733712);animation-timing-function:cubic-bezier(0.31033,0.284058,0.8,0.733712);-webkit-transform:translateX(calc(1 * 37.6519%));transform:translateX(calc(1 * 37.6519%))}48.35%{-webkit-animation-timing-function:cubic-bezier(0.4,0.627035,0.6,0.902026);animation-timing-function:cubic-bezier(0.4,0.627035,0.6,0.902026);-webkit-transform:translateX(calc(1 * 84.3862%));transform:translateX(calc(1 * 84.3862%))}100%{-webkit-transform:translateX(calc(1 * 160.278%));transform:translateX(calc(1 * 160.278%))}}@keyframes secondary-indeterminate-translate{0%{-webkit-animation-timing-function:cubic-bezier(0.15,0,0.515058,0.409685);animation-timing-function:cubic-bezier(0.15,0,0.515058,0.409685);-webkit-transform:translateX(0);transform:translateX(0)}25%{-webkit-animation-timing-function:cubic-bezier(0.31033,0.284058,0.8,0.733712);animation-timing-function:cubic-bezier(0.31033,0.284058,0.8,0.733712);-webkit-transform:translateX(calc(1 * 37.6519%));transform:translateX(calc(1 * 37.6519%))}48.35%{-webkit-animation-timing-function:cubic-bezier(0.4,0.627035,0.6,0.902026);animation-timing-function:cubic-bezier(0.4,0.627035,0.6,0.902026);-webkit-transform:translateX(calc(1 * 84.3862%));transform:translateX(calc(1 * 84.3862%))}100%{-webkit-transform:translateX(calc(1 * 160.278%));transform:translateX(calc(1 * 160.278%))}}@-webkit-keyframes buffering-rtl{0%{-webkit-transform:translateX(calc(-1 * var(--_linear-progress-track-background-width)));transform:translateX(calc(-1 * var(--_linear-progress-track-background-width)))}}@keyframes buffering-rtl{0%{-webkit-transform:translateX(calc(-1 * var(--_linear-progress-track-background-width)));transform:translateX(calc(-1 * var(--_linear-progress-track-background-width)))}}@-webkit-keyframes primary-indeterminate-translate-rtl{0%{-webkit-transform:translateX(0);transform:translateX(0)}20%{-webkit-animation-timing-function:cubic-bezier(0.5,0,0.701732,0.495819);animation-timing-function:cubic-bezier(0.5,0,0.701732,0.495819);-webkit-transform:translateX(0);transform:translateX(0)}59.15%{-webkit-animation-timing-function:cubic-bezier(0.302435,0.381352,0.55,0.956352);animation-timing-function:cubic-bezier(0.302435,0.381352,0.55,0.956352);-webkit-transform:translateX(calc(-1 * 83.6714%));transform:translateX(calc(-1 * 83.6714%))}100%{-webkit-transform:translateX(calc(-1 * 200.611%));transform:translateX(calc(-1 * 200.611%))}}@keyframes primary-indeterminate-translate-rtl{0%{-webkit-transform:translateX(0);transform:translateX(0)}20%{-webkit-animation-timing-function:cubic-bezier(0.5,0,0.701732,0.495819);animation-timing-function:cubic-bezier(0.5,0,0.701732,0.495819);-webkit-transform:translateX(0);transform:translateX(0)}59.15%{-webkit-animation-timing-function:cubic-bezier(0.302435,0.381352,0.55,0.956352);animation-timing-function:cubic-bezier(0.302435,0.381352,0.55,0.956352);-webkit-transform:translateX(calc(-1 * 83.6714%));transform:translateX(calc(-1 * 83.6714%))}100%{-webkit-transform:translateX(calc(-1 * 200.611%));transform:translateX(calc(-1 * 200.611%))}}@-webkit-keyframes secondary-indeterminate-translate-rtl{0%{-webkit-animation-timing-function:cubic-bezier(0.15,0,0.515058,0.409685);animation-timing-function:cubic-bezier(0.15,0,0.515058,0.409685);-webkit-transform:translateX(0);transform:translateX(0)}25%{-webkit-animation-timing-function:cubic-bezier(0.31033,0.284058,0.8,0.733712);animation-timing-function:cubic-bezier(0.31033,0.284058,0.8,0.733712);-webkit-transform:translateX(calc(-1 * 37.6519%));transform:translateX(calc(-1 * 37.6519%))}48.35%{-webkit-animation-timing-function:cubic-bezier(0.4,0.627035,0.6,0.902026);animation-timing-function:cubic-bezier(0.4,0.627035,0.6,0.902026);-webkit-transform:translateX(calc(-1 * 84.3862%));transform:translateX(calc(-1 * 84.3862%))}100%{-webkit-transform:translateX(calc(-1 * 160.278%));transform:translateX(calc(-1 * 160.278%))}}@keyframes secondary-indeterminate-translate-rtl{0%{-webkit-animation-timing-function:cubic-bezier(0.15,0,0.515058,0.409685);animation-timing-function:cubic-bezier(0.15,0,0.515058,0.409685);-webkit-transform:translateX(0);transform:translateX(0)}25%{-webkit-animation-timing-function:cubic-bezier(0.31033,0.284058,0.8,0.733712);animation-timing-function:cubic-bezier(0.31033,0.284058,0.8,0.733712);-webkit-transform:translateX(calc(-1 * 37.6519%));transform:translateX(calc(-1 * 37.6519%))}48.35%{-webkit-animation-timing-function:cubic-bezier(0.4,0.627035,0.6,0.902026);animation-timing-function:cubic-bezier(0.4,0.627035,0.6,0.902026);-webkit-transform:translateX(calc(-1 * 84.3862%));transform:translateX(calc(-1 * 84.3862%))}100%{-webkit-transform:translateX(calc(-1 * 160.278%));transform:translateX(calc(-1 * 160.278%))}}@-webkit-keyframes primary-indeterminate-scale{0%{-webkit-transform:scaleX(.08);transform:scaleX(.08)}36.65%{-webkit-animation-timing-function:cubic-bezier(0.334731,0.12482,0.785844,1);animation-timing-function:cubic-bezier(0.334731,0.12482,0.785844,1);-webkit-transform:scaleX(.08);transform:scaleX(.08)}69.15%{-webkit-animation-timing-function:cubic-bezier(0.06,0.11,0.6,1);animation-timing-function:cubic-bezier(0.06,0.11,0.6,1);-webkit-transform:scaleX(.661479);transform:scaleX(.661479)}100%{-webkit-transform:scaleX(.08);transform:scaleX(.08)}}@keyframes primary-indeterminate-scale{0%{-webkit-transform:scaleX(.08);transform:scaleX(.08)}36.65%{-webkit-animation-timing-function:cubic-bezier(0.334731,0.12482,0.785844,1);animation-timing-function:cubic-bezier(0.334731,0.12482,0.785844,1);-webkit-transform:scaleX(.08);transform:scaleX(.08)}69.15%{-webkit-animation-timing-function:cubic-bezier(0.06,0.11,0.6,1);animation-timing-function:cubic-bezier(0.06,0.11,0.6,1);-webkit-transform:scaleX(.661479);transform:scaleX(.661479)}100%{-webkit-transform:scaleX(.08);transform:scaleX(.08)}}@-webkit-keyframes secondary-indeterminate-scale{0%{-webkit-animation-timing-function:cubic-bezier(0.205028,0.057051,0.57661,0.453971);animation-timing-function:cubic-bezier(0.205028,0.057051,0.57661,0.453971);-webkit-transform:scaleX(.08);transform:scaleX(.08)}19.15%{-webkit-animation-timing-function:cubic-bezier(0.152313,0.196432,0.648374,1.00432);animation-timing-function:cubic-bezier(0.152313,0.196432,0.648374,1.00432);-webkit-transform:scaleX(.457104);transform:scaleX(.457104)}44.15%{-webkit-animation-timing-function:cubic-bezier(0.257759,-0.003163,0.211762,1.38179);animation-timing-function:cubic-bezier(0.257759,-0.003163,0.211762,1.38179);-webkit-transform:scaleX(.72796);transform:scaleX(.72796)}100%{-webkit-transform:scaleX(.08);transform:scaleX(.08)}}@keyframes secondary-indeterminate-scale{0%{-webkit-animation-timing-function:cubic-bezier(0.205028,0.057051,0.57661,0.453971);animation-timing-function:cubic-bezier(0.205028,0.057051,0.57661,0.453971);-webkit-transform:scaleX(.08);transform:scaleX(.08)}19.15%{-webkit-animation-timing-function:cubic-bezier(0.152313,0.196432,0.648374,1.00432);animation-timing-function:cubic-bezier(0.152313,0.196432,0.648374,1.00432);-webkit-transform:scaleX(.457104);transform:scaleX(.457104)}44.15%{-webkit-animation-timing-function:cubic-bezier(0.257759,-0.003163,0.211762,1.38179);animation-timing-function:cubic-bezier(0.257759,-0.003163,0.211762,1.38179);-webkit-transform:scaleX(.72796);transform:scaleX(.72796)}100%{-webkit-transform:scaleX(.08);transform:scaleX(.08)}}';
|
|
14
14
|
/**
|
|
15
15
|
* @tag forge-linear-progress
|
|
@@ -31,7 +31,6 @@ const styles = ':host{--_linear-progress-track-height:var(--forge-linear-progres
|
|
|
31
31
|
* @attribute {number} progress - Controls the progress while in a determinate state. Accepts values from `0` to `1`.
|
|
32
32
|
* @attribute {number} buffer - Controls the buffer progress while in a determinate state. Accepts values from `0` to `1`.
|
|
33
33
|
* @attribute {string} theme - Sets the theme.
|
|
34
|
-
* @attribute {string} data-aria-label - Propagates an `aria-label` to the underlying progress bar element.
|
|
35
34
|
*
|
|
36
35
|
* @cssproperty --forge-linear-progress-height - The height of the element.
|
|
37
36
|
* @cssproperty --forge-linear-progress-track-color - The background color of the indicator.
|
|
@@ -52,8 +51,7 @@ let LinearProgressComponent = class LinearProgressComponent extends BaseComponen
|
|
|
52
51
|
LINEAR_PROGRESS_CONSTANTS.attributes.DETERMINATE,
|
|
53
52
|
LINEAR_PROGRESS_CONSTANTS.attributes.PROGRESS,
|
|
54
53
|
LINEAR_PROGRESS_CONSTANTS.attributes.BUFFER,
|
|
55
|
-
LINEAR_PROGRESS_CONSTANTS.attributes.THEME
|
|
56
|
-
LINEAR_PROGRESS_CONSTANTS.attributes.ARIA_LABEL
|
|
54
|
+
LINEAR_PROGRESS_CONSTANTS.attributes.THEME
|
|
57
55
|
];
|
|
58
56
|
}
|
|
59
57
|
constructor() {
|
|
@@ -61,6 +59,9 @@ let LinearProgressComponent = class LinearProgressComponent extends BaseComponen
|
|
|
61
59
|
attachShadowTemplate(this, template, styles);
|
|
62
60
|
this._foundation = new LinearProgressFoundation(new LinearProgressAdapter(this));
|
|
63
61
|
}
|
|
62
|
+
connectedCallback() {
|
|
63
|
+
this._foundation.initialize();
|
|
64
|
+
}
|
|
64
65
|
attributeChangedCallback(name, oldValue, newValue) {
|
|
65
66
|
switch (name) {
|
|
66
67
|
case LINEAR_PROGRESS_CONSTANTS.attributes.DETERMINATE:
|
|
@@ -75,9 +76,6 @@ let LinearProgressComponent = class LinearProgressComponent extends BaseComponen
|
|
|
75
76
|
case LINEAR_PROGRESS_CONSTANTS.attributes.THEME:
|
|
76
77
|
this.theme = newValue;
|
|
77
78
|
break;
|
|
78
|
-
case LINEAR_PROGRESS_CONSTANTS.attributes.ARIA_LABEL:
|
|
79
|
-
this._foundation.ariaLabel = newValue;
|
|
80
|
-
break;
|
|
81
79
|
}
|
|
82
80
|
}
|
|
83
81
|
};
|
|
@@ -10,8 +10,8 @@ import { ListItemFoundation } from './list-item-foundation';
|
|
|
10
10
|
import { LIST_ITEM_CONSTANTS } from './list-item-constants';
|
|
11
11
|
import { StateLayerComponent } from '../../state-layer';
|
|
12
12
|
import { FocusIndicatorComponent } from '../../focus-indicator';
|
|
13
|
-
const template = '<template><div class=\"forge-list-item\" tabindex=\"0\" part=\"root\"><slot name=\"leading\"></slot><slot name=\"avatar\"></slot><div class=\"text-container\" part=\"text-container\"><slot></slot><slot name=\"title\"></slot><slot name=\"primary-text\"></slot><slot name=\"subtitle\"></slot><slot name=\"secondary-text\"></slot><slot name=\"tertiary-text\"></slot><slot name=\"tertiary-title\"></slot></div><slot name=\"trailing\"></slot><forge-state-layer exportparts=\"surface:state-layer\"></forge-state-layer><forge-focus-indicator
|
|
14
|
-
const styles = ':host{--_list-item-indent:var(--forge-list-item-indent, 56px);--_list-item-dense-indent:var(--forge-list-item-dense-indent, 48px)}:host{display:block;outline:0}:host([hidden]){display:none}:host([non-interactive]) .forge-list-item{cursor:initial}:host([disabled]) .forge-list-item{cursor:var(--_list-item-disabled-cursor);opacity:var(--_list-item-disabled-opacity)}:host([two-line]) .forge-list-item{height:var(--_list-item-two-line-height);min-height:var(--_list-item-two-line-height)}:host([three-line]) .forge-list-item{height:var(--_list-item-three-line-height);min-height:var(--_list-item-three-line-height)}:host([dense]) .forge-list-item{height:var(--_list-item-dense-one-line-height);min-height:var(--_list-item-dense-one-line-height)}:host([dense]) .text-container{font-size:var(--_list-item-dense-font-size)}:host([dense][indented]){-webkit-margin-start:var(--_list-item-dense-indent);margin-inline-start:var(--_list-item-dense-indent)}:host([dense][two-line]) .forge-list-item{height:var(--_list-item-dense-two-line-height);min-height:var(--_list-item-dense-two-line-height)}:host([dense][three-line]) .forge-list-item{height:var(--_list-item-dense-three-line-height);min-height:var(--_list-item-dense-three-line-height)}:host([selected]) .forge-list-item{color:var(--_list-item-selected-color)}:host([selected]) .forge-list-item::before{content:\"\";position:absolute;inset:0;border-radius:inherit;opacity:var(--_list-item-selected-opacity);background-color:var(--_list-item-selected-color)}:host([selected]) .forge-list-item ::slotted([slot=leading]),:host([selected]) .forge-list-item ::slotted([slot=trailing]){color:var(--_list-item-selected-color)}:host([selected]) .forge-list-item ::slotted([slot=leading]){color:var(--_list-item-leading-selected-color)}:host([selected]) .forge-list-item ::slotted([slot=trailing]){color:var(--_list-item-trailing-selected-color)}:host([selected]) .text-container{color:var(--_list-item-selected-color)}:host([selected]) forge-state-layer{--forge-state-layer-color:var(--_list-item-selected-color)}:host([indented]){-webkit-margin-start:var(--_list-item-indent);margin-inline-start:var(--_list-item-indent)}.forge-list-item{--_list-item-background-color:var(--forge-list-item-background-color, transparent);--_list-item-shape:var(--forge-list-item-shape, 0);--_list-item-padding:var(--forge-list-item-padding, 8px 16px);--_list-item-margin:var(--forge-list-item-margin, 0);--_list-item-height:var(--forge-list-item-height, 48px);--_list-item-dense-height:var(--forge-list-item-dense-height, 32px);--_list-item-cursor:var(--forge-list-item-cursor, pointer);--_list-item-supporting-text-color:var(--forge-list-item-supporting-text-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.54)));--_list-item-supporting-text-font-size:var(--forge-list-item-supporting-text-font-size, var(--forge-typography-body2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 1))));--_list-item-supporting-text-font-weight:var(--forge-list-item-supporting-text-font-weight, var(--forge-typography-body2-font-weight, 400));--_list-item-supporting-text-line-height:var(--forge-list-item-supporting-text-line-height, 1.5rem);--_list-item-selected-color:var(--forge-list-item-selected-color, var(--forge-theme-primary, #3f51b5));--_list-item-selected-opacity:var(--forge-list-item-selected-opacity, 0.08);--_list-item-selected-leading-color:var(--forge-list-item-selected-leading-color, var(--_list-item-selected-color));--_list-item-selected-trailing-color:var(--forge-list-item-selected-trailing-color, var(--_list-item-selected-color));--_list-item-selected-supporting-text-color:var(--forge-list-item-selected-supporting-text-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.54)));--_list-item-disabled-opacity:var(--forge-list-item-disabled-opacity, 0.38);--_list-item-disabled-cursor:var(--forge-list-item-disabled-cursor, not-allowed);--_list-item-one-line-height:var(--forge-list-item-one-line-height, var(--_list-item-height));--_list-item-two-line-height:var(--forge-list-item-two-line-height, var(--forge-list-item-height, 72px));--_list-item-three-line-height:var(--forge-list-item-three-line-height, var(--forge-list-item-height, 88px));--_list-item-dense-one-line-height:var(--forge-list-item-dense-one-line-height, var(--_list-item-dense-height));--_list-item-dense-two-line-height:var(--forge-list-item-dense-two-line-height, var(--forge-list-item-dense-height, 56px));--_list-item-dense-three-line-height:var(--forge-list-item-dense-three-line-height, var(--forge-list-item-dense-height, 72px));--_list-item-dense-font-size:var(--forge-list-item-dense-font-size, 0.875rem);--_list-item-dense-leading-margin-end:var(--forge-list-item-dense-leading-margin-end, var(--forge-list-item-leading-margin-end, 24px));--_list-item-dense-trailing-margin-start:var(--forge-list-item-dense-trailing-margin-start, var(--forge-list-item-trailing-margin-start, 24px));--_list-item-leading-margin-start:var(--forge-list-item-leading-margin-start, 0);--_list-item-leading-margin-end:var(--forge-list-item-leading-margin-end, 32px);--_list-item-leading-selected-color:var(--forge-list-item-leading-selected-color, var(--_list-item-selected-color));--_list-item-trailing-margin-start:var(--forge-list-item-trailing-margin-start, 32px);--_list-item-trailing-margin-end:var(--forge-list-item-trailing-margin-end, 0);--_list-item-trailing-selected-color:var(--forge-list-item-trailing-selected-color, var(--_list-item-selected-color));--_list-item-avatar-background-color:var(--forge-list-item-avatar-background-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.54)));--_list-item-avatar-color:var(--forge-list-item-avatar-color, var(--forge-theme-on-primary, #ffffff));--_list-item-avatar-shape:var(--forge-list-item-avatar-shape, var(--forge-shape-round, 50%));--_list-item-avatar-margin-start:var(--forge-list-item-avatar-margin-start, 0);--_list-item-avatar-margin-end:var(--forge-list-item-avatar-margin-end, 16px);--_list-item-avatar-size:var(--forge-list-item-avatar-size, 40px)}.forge-list-item{position:relative;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;outline:0;text-decoration:none;background-color:var(--_list-item-background-color);border-radius:var(--_list-item-shape);-webkit-tap-highlight-color:transparent;height:var(--_list-item-height);min-height:var(--_list-item-height);padding:var(--_list-item-padding);margin:var(--_list-item-margin);cursor:var(--_list-item-cursor)}a.forge-list-item{color:inherit}.text-container{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-body2-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));letter-spacing:var(--forge-typography-body2-letter-spacing, .015625em);text-transform:var(--forge-typography-body2-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-body2-text-decoration,inherit);text-decoration:var(--forge-typography-body2-text-decoration,inherit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-box-sizing:border-box;box-sizing:border-box;font-size:var(--_list-item-supporting-text-font-size);font-weight:var(--_list-item-supporting-text-font-weight);line-height:var(--_list-item-supporting-text-line-height);-webkit-box-flex:1;flex:1}slot[name=secondary-text]::slotted(*),slot[name=subtitle]::slotted(*),slot[name=tertiary-text]::slotted(*),slot[name=tertiary-title]::slotted(*){-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-body1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-body1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, .875)));font-weight:var(--forge-typography-body1-font-weight,400);line-height:var(--forge-typography-body1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.125)));letter-spacing:var(--forge-typography-body1-letter-spacing, .0357142857em);text-transform:var(--forge-typography-body1-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-body1-text-decoration,inherit);text-decoration:var(--forge-typography-body1-text-decoration,inherit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--_list-item-supporting-text-color);display:block}:host([selected]) slot[name=secondary-text]::slotted(*),:host([selected]) slot[name=subtitle]::slotted(*),:host([selected]) slot[name=tertiary-text]::slotted(*),:host([selected]) slot[name=tertiary-title]::slotted(*){color:var(--_list-item-selected-supporting-text-color)}::slotted([slot=avatar]){background-color:var(--_list-item-avatar-background-color);color:var(--_list-item-avatar-color);display:-webkit-inline-box;display:inline-flex;flex-shrink:0;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;fill:currentColor;-webkit-margin-start:var(--_list-item-avatar-margin-start);margin-inline-start:var(--_list-item-avatar-margin-start);-webkit-margin-end:var(--_list-item-avatar-margin-end);margin-inline-end:var(--_list-item-avatar-margin-end);min-width:var(--_list-item-avatar-size);min-height:var(--_list-item-avatar-size);border-radius:var(--_list-item-avatar-shape)}::slotted([slot=leading]),::slotted([slot=trailing]){color:var(--_list-item-supporting-text-color);display:-webkit-inline-box;display:inline-flex;flex-shrink:0;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;fill:currentColor}::slotted([slot=leading]){-webkit-margin-start:var(--_list-item-leading-margin-start);margin-inline-start:var(--_list-item-leading-margin-start);-webkit-margin-end:var(--_list-item-leading-margin-end);margin-inline-end:var(--_list-item-leading-margin-end)}:host([selected]) ::slotted([slot=leading]){color:var(--_list-item-leading-selected-color)}:host([dense]) ::slotted([slot=leading]){-webkit-margin-end:var(--_list-item-dense-leading-margin-end);margin-inline-end:var(--_list-item-dense-leading-margin-end)}::slotted([slot=trailing]){-webkit-margin-start:var(--_list-item-trailing-margin-start);margin-inline-start:var(--_list-item-trailing-margin-start);-webkit-margin-end:var(--_list-item-trailing-margin-end);margin-inline-end:var(--_list-item-trailing-margin-end)}:host([selected]) ::slotted([slot=trailing]){color:var(--_list-item-trailing-selected-color)}:host([dense]) ::slotted([slot=trailing]){-webkit-margin-start:var(--_list-item-dense-trailing-margin-start);margin-inline-start:var(--_list-item-dense-trailing-margin-start)}:host([wrap]) .forge-list-item{height:auto}:host([wrap]) .text-container{white-space:normal;overflow:visible;text-overflow:clip}:host([wrap]) slot[name=secondary-text]::slotted(*),:host([wrap]) slot[name=subtitle]::slotted(*),:host([wrap]) slot[name=tertiary-text]::slotted(*),:host([wrap]) slot[name=tertiary-title]::slotted(*){white-space:normal;overflow:visible;text-overflow:clip}forge-focus-indicator{--forge-focus-indicator-shape:var(--forge-shape-medium, 4px)}forge-state-layer{border-radius:inherit}';
|
|
13
|
+
const template = '<template><div class=\"forge-list-item\" tabindex=\"0\" part=\"root\"><slot name=\"leading\"></slot><slot name=\"avatar\"></slot><div class=\"text-container\" part=\"text-container\"><slot></slot><slot name=\"title\"></slot><slot name=\"primary-text\"></slot><slot name=\"subtitle\"></slot><slot name=\"secondary-text\"></slot><slot name=\"tertiary-text\"></slot><slot name=\"tertiary-title\"></slot></div><slot name=\"trailing\"></slot><forge-state-layer exportparts=\"surface:state-layer\"></forge-state-layer><forge-focus-indicator part=\"focus-indicator\" inward></forge-focus-indicator></div></template>';
|
|
14
|
+
const styles = ':host{--_list-item-indent:var(--forge-list-item-indent, 56px);--_list-item-dense-indent:var(--forge-list-item-dense-indent, 48px)}:host{display:block;outline:0}:host([hidden]){display:none}:host([non-interactive]) .forge-list-item{cursor:initial}:host([disabled]) .forge-list-item{cursor:var(--_list-item-disabled-cursor);opacity:var(--_list-item-disabled-opacity)}:host([two-line]) .forge-list-item{height:var(--_list-item-two-line-height);min-height:var(--_list-item-two-line-height)}:host([three-line]) .forge-list-item{height:var(--_list-item-three-line-height);min-height:var(--_list-item-three-line-height)}:host([dense]) .forge-list-item{height:var(--_list-item-dense-one-line-height);min-height:var(--_list-item-dense-one-line-height)}:host([dense]) .text-container{font-size:var(--_list-item-dense-font-size)}:host([dense][indented]){-webkit-margin-start:var(--_list-item-dense-indent);margin-inline-start:var(--_list-item-dense-indent)}:host([dense][two-line]) .forge-list-item{height:var(--_list-item-dense-two-line-height);min-height:var(--_list-item-dense-two-line-height)}:host([dense][three-line]) .forge-list-item{height:var(--_list-item-dense-three-line-height);min-height:var(--_list-item-dense-three-line-height)}:host([selected]) .forge-list-item{color:var(--_list-item-selected-color)}:host([selected]) .forge-list-item::before{content:\"\";position:absolute;inset:0;border-radius:inherit;opacity:var(--_list-item-selected-opacity);background-color:var(--_list-item-selected-color)}:host([selected]) .forge-list-item ::slotted([slot=leading]),:host([selected]) .forge-list-item ::slotted([slot=trailing]){color:var(--_list-item-selected-color)}:host([selected]) .forge-list-item ::slotted([slot=leading]){color:var(--_list-item-leading-selected-color)}:host([selected]) .forge-list-item ::slotted([slot=trailing]){color:var(--_list-item-trailing-selected-color)}:host([selected]) .text-container{color:var(--_list-item-selected-color)}:host([selected]) forge-state-layer{--forge-state-layer-color:var(--_list-item-selected-color)}:host([indented]){-webkit-margin-start:var(--_list-item-indent);margin-inline-start:var(--_list-item-indent)}.forge-list-item{--_list-item-background-color:var(--forge-list-item-background-color, transparent);--_list-item-shape:var(--forge-list-item-shape, 0);--_list-item-padding:var(--forge-list-item-padding, 8px 16px);--_list-item-margin:var(--forge-list-item-margin, 0);--_list-item-height:var(--forge-list-item-height, 48px);--_list-item-dense-height:var(--forge-list-item-dense-height, 32px);--_list-item-cursor:var(--forge-list-item-cursor, pointer);--_list-item-supporting-text-color:var(--forge-list-item-supporting-text-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.54)));--_list-item-supporting-text-font-size:var(--forge-list-item-supporting-text-font-size, var(--forge-typography-body2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 1))));--_list-item-supporting-text-font-weight:var(--forge-list-item-supporting-text-font-weight, var(--forge-typography-body2-font-weight, 400));--_list-item-supporting-text-line-height:var(--forge-list-item-supporting-text-line-height, 1.5rem);--_list-item-selected-color:var(--forge-list-item-selected-color, var(--forge-theme-primary, #3f51b5));--_list-item-selected-opacity:var(--forge-list-item-selected-opacity, 0.08);--_list-item-selected-leading-color:var(--forge-list-item-selected-leading-color, var(--_list-item-selected-color));--_list-item-selected-trailing-color:var(--forge-list-item-selected-trailing-color, var(--_list-item-selected-color));--_list-item-selected-supporting-text-color:var(--forge-list-item-selected-supporting-text-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.54)));--_list-item-disabled-opacity:var(--forge-list-item-disabled-opacity, 0.38);--_list-item-disabled-cursor:var(--forge-list-item-disabled-cursor, not-allowed);--_list-item-one-line-height:var(--forge-list-item-one-line-height, var(--_list-item-height));--_list-item-two-line-height:var(--forge-list-item-two-line-height, var(--forge-list-item-height, 72px));--_list-item-three-line-height:var(--forge-list-item-three-line-height, var(--forge-list-item-height, 88px));--_list-item-dense-one-line-height:var(--forge-list-item-dense-one-line-height, var(--_list-item-dense-height));--_list-item-dense-two-line-height:var(--forge-list-item-dense-two-line-height, var(--forge-list-item-dense-height, 56px));--_list-item-dense-three-line-height:var(--forge-list-item-dense-three-line-height, var(--forge-list-item-dense-height, 72px));--_list-item-dense-font-size:var(--forge-list-item-dense-font-size, 0.875rem);--_list-item-dense-leading-margin-end:var(--forge-list-item-dense-leading-margin-end, var(--forge-list-item-leading-margin-end, 24px));--_list-item-dense-trailing-margin-start:var(--forge-list-item-dense-trailing-margin-start, var(--forge-list-item-trailing-margin-start, 24px));--_list-item-leading-margin-start:var(--forge-list-item-leading-margin-start, 0);--_list-item-leading-margin-end:var(--forge-list-item-leading-margin-end, 32px);--_list-item-leading-selected-color:var(--forge-list-item-leading-selected-color, var(--_list-item-selected-color));--_list-item-trailing-margin-start:var(--forge-list-item-trailing-margin-start, 32px);--_list-item-trailing-margin-end:var(--forge-list-item-trailing-margin-end, 0);--_list-item-trailing-selected-color:var(--forge-list-item-trailing-selected-color, var(--_list-item-selected-color));--_list-item-avatar-background-color:var(--forge-list-item-avatar-background-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.54)));--_list-item-avatar-color:var(--forge-list-item-avatar-color, var(--forge-theme-on-primary, #ffffff));--_list-item-avatar-shape:var(--forge-list-item-avatar-shape, var(--forge-shape-round, 50%));--_list-item-avatar-margin-start:var(--forge-list-item-avatar-margin-start, 0);--_list-item-avatar-margin-end:var(--forge-list-item-avatar-margin-end, 16px);--_list-item-avatar-size:var(--forge-list-item-avatar-size, 40px)}.forge-list-item{position:relative;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;outline:0;text-decoration:none;background-color:var(--_list-item-background-color);border-radius:var(--_list-item-shape);-webkit-tap-highlight-color:transparent;height:var(--_list-item-height);min-height:var(--_list-item-height);padding:var(--_list-item-padding);margin:var(--_list-item-margin);cursor:var(--_list-item-cursor)}a.forge-list-item{color:inherit}.text-container{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-body2-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));letter-spacing:var(--forge-typography-body2-letter-spacing, .015625em);text-transform:var(--forge-typography-body2-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-body2-text-decoration,inherit);text-decoration:var(--forge-typography-body2-text-decoration,inherit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-box-sizing:border-box;box-sizing:border-box;font-size:var(--_list-item-supporting-text-font-size);font-weight:var(--_list-item-supporting-text-font-weight);line-height:var(--_list-item-supporting-text-line-height);-webkit-box-flex:1;flex:1}slot[name=secondary-text]::slotted(*),slot[name=subtitle]::slotted(*),slot[name=tertiary-text]::slotted(*),slot[name=tertiary-title]::slotted(*){-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-body1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-body1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, .875)));font-weight:var(--forge-typography-body1-font-weight,400);line-height:var(--forge-typography-body1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.125)));letter-spacing:var(--forge-typography-body1-letter-spacing, .0357142857em);text-transform:var(--forge-typography-body1-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-body1-text-decoration,inherit);text-decoration:var(--forge-typography-body1-text-decoration,inherit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--_list-item-supporting-text-color);display:block}:host([selected]) slot[name=secondary-text]::slotted(*),:host([selected]) slot[name=subtitle]::slotted(*),:host([selected]) slot[name=tertiary-text]::slotted(*),:host([selected]) slot[name=tertiary-title]::slotted(*){color:var(--_list-item-selected-supporting-text-color)}::slotted([slot=avatar]){background-color:var(--_list-item-avatar-background-color);color:var(--_list-item-avatar-color);display:-webkit-inline-box;display:inline-flex;flex-shrink:0;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;fill:currentColor;-webkit-margin-start:var(--_list-item-avatar-margin-start);margin-inline-start:var(--_list-item-avatar-margin-start);-webkit-margin-end:var(--_list-item-avatar-margin-end);margin-inline-end:var(--_list-item-avatar-margin-end);min-width:var(--_list-item-avatar-size);min-height:var(--_list-item-avatar-size);border-radius:var(--_list-item-avatar-shape)}::slotted([slot=leading]),::slotted([slot=trailing]){color:var(--_list-item-supporting-text-color);display:-webkit-inline-box;display:inline-flex;flex-shrink:0;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;fill:currentColor}::slotted([slot=leading]){-webkit-margin-start:var(--_list-item-leading-margin-start);margin-inline-start:var(--_list-item-leading-margin-start);-webkit-margin-end:var(--_list-item-leading-margin-end);margin-inline-end:var(--_list-item-leading-margin-end)}:host([selected]) ::slotted([slot=leading]){color:var(--_list-item-leading-selected-color)}:host([dense]) ::slotted([slot=leading]){-webkit-margin-end:var(--_list-item-dense-leading-margin-end);margin-inline-end:var(--_list-item-dense-leading-margin-end)}::slotted([slot=trailing]){-webkit-margin-start:var(--_list-item-trailing-margin-start);margin-inline-start:var(--_list-item-trailing-margin-start);-webkit-margin-end:var(--_list-item-trailing-margin-end);margin-inline-end:var(--_list-item-trailing-margin-end)}:host([selected]) ::slotted([slot=trailing]){color:var(--_list-item-trailing-selected-color)}:host([dense]) ::slotted([slot=trailing]){-webkit-margin-start:var(--_list-item-dense-trailing-margin-start);margin-inline-start:var(--_list-item-dense-trailing-margin-start)}:host([wrap]) .forge-list-item{height:auto}:host([wrap]) .text-container{white-space:normal;overflow:visible;text-overflow:clip}:host([wrap]) slot[name=secondary-text]::slotted(*),:host([wrap]) slot[name=subtitle]::slotted(*),:host([wrap]) slot[name=tertiary-text]::slotted(*),:host([wrap]) slot[name=tertiary-title]::slotted(*){white-space:normal;overflow:visible;text-overflow:clip}forge-focus-indicator{z-index:1;--forge-focus-indicator-shape:var(--forge-shape-medium, 4px)}forge-state-layer{border-radius:inherit}';
|
|
15
15
|
/**
|
|
16
16
|
* @tag forge-list-item
|
|
17
17
|
*
|
|
@@ -10,7 +10,7 @@ const classes = {
|
|
|
10
10
|
MENU: 'mdc-menu'
|
|
11
11
|
};
|
|
12
12
|
const selectors = {
|
|
13
|
-
TOGGLE: `.${elementName}__toggle,[${elementName}-toggle],forge-button,button,[type=button],[role=button],a,[tabindex]:not([tabindex^="-"])`,
|
|
13
|
+
TOGGLE: `.${elementName}__toggle,[${elementName}-toggle],forge-button,forge-icon-button,forge-fab,button,[type=button],[role=button],a,[tabindex]:not([tabindex^="-"])`,
|
|
14
14
|
MENU_LIST: 'forge-list'
|
|
15
15
|
};
|
|
16
16
|
const attributes = {
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
* Copyright 2023 Tyler Technologies, Inc.
|
|
4
4
|
* License: Apache-2.0
|
|
5
5
|
*/
|
|
6
|
+
import { ExperimentalFocusOptions } from '../constants';
|
|
6
7
|
import { BaseAdapter, IBaseAdapter } from '../core/base/base-adapter';
|
|
7
8
|
import { IProfileCardComponent } from './profile-card';
|
|
8
9
|
export interface IProfileCardAdapter extends IBaseAdapter {
|
|
@@ -19,10 +20,8 @@ export interface IProfileCardAdapter extends IBaseAdapter {
|
|
|
19
20
|
setProfileButtonText(value: string): void;
|
|
20
21
|
setProfileButtonListener(listener: (evt: Event) => void): void;
|
|
21
22
|
setSignOutButtonListener(listener: (evt: Event) => void): void;
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
requestProfileButtonFocus(): void;
|
|
25
|
-
requestSignOutButtonFocus(): void;
|
|
23
|
+
requestProfileButtonFocus(options?: ExperimentalFocusOptions): void;
|
|
24
|
+
requestSignOutButtonFocus(options?: ExperimentalFocusOptions): void;
|
|
26
25
|
}
|
|
27
26
|
export declare class ProfileCardAdapter extends BaseAdapter<IProfileCardComponent> implements IProfileCardAdapter {
|
|
28
27
|
private _fullNameElement;
|
|
@@ -45,8 +44,6 @@ export declare class ProfileCardAdapter extends BaseAdapter<IProfileCardComponen
|
|
|
45
44
|
setProfileButtonText(value: string): void;
|
|
46
45
|
setProfileButtonListener(listener: (evt: Event) => void): void;
|
|
47
46
|
setSignOutButtonListener(listener: (evt: Event) => void): void;
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
requestProfileButtonFocus(): void;
|
|
51
|
-
requestSignOutButtonFocus(): void;
|
|
47
|
+
requestProfileButtonFocus(options?: ExperimentalFocusOptions): void;
|
|
48
|
+
requestSignOutButtonFocus(options?: ExperimentalFocusOptions): void;
|
|
52
49
|
}
|