@francofantomius/material-components 1.1.2 → 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +30 -0
- package/README.md +2 -1
- package/custom-elements.json +680 -19
- package/dist/chunks/{account-menu-Dau0UHTl.js → account-menu-Bo7NghIm.js} +181 -223
- package/dist/chunks/{account-menu-Dau0UHTl.js.map → account-menu-Bo7NghIm.js.map} +1 -1
- package/dist/chunks/app-drawer-DjKSuatE.js +855 -0
- package/dist/chunks/{app-drawer-Du1ePzxZ.js.map → app-drawer-DjKSuatE.js.map} +1 -1
- package/dist/chunks/{badge-G4EjcMoy.js → badge-sZzNelZz.js} +30 -34
- package/dist/chunks/{badge-G4EjcMoy.js.map → badge-sZzNelZz.js.map} +1 -1
- package/dist/chunks/{bottom-sheet-q79BBYAj.js → bottom-sheet-BGgbUmKd.js} +98 -109
- package/dist/chunks/{bottom-sheet-q79BBYAj.js.map → bottom-sheet-BGgbUmKd.js.map} +1 -1
- package/dist/chunks/{button-D2vn7kJ8.js → button-DeQQlYds.js} +62 -72
- package/dist/chunks/{button-D2vn7kJ8.js.map → button-DeQQlYds.js.map} +1 -1
- package/dist/chunks/button-group-R2jN8FXK.js +136 -0
- package/dist/chunks/{button-group-CNqvJx1n.js.map → button-group-R2jN8FXK.js.map} +1 -1
- package/dist/chunks/{card-DVffdPpv.js → card-CVhWizDF.js} +45 -50
- package/dist/chunks/{card-DVffdPpv.js.map → card-CVhWizDF.js.map} +1 -1
- package/dist/chunks/{carousel-item-BG6kjjjk.js → carousel-item-DNp2zhP9.js} +62 -73
- package/dist/chunks/{carousel-item-BG6kjjjk.js.map → carousel-item-DNp2zhP9.js.map} +1 -1
- package/dist/chunks/{checkbox-BqlboAHd.js → checkbox-CsqUHVOF.js} +59 -64
- package/dist/chunks/{checkbox-BqlboAHd.js.map → checkbox-CsqUHVOF.js.map} +1 -1
- package/dist/chunks/{chip-CI1ZINnr.js → chip-B5c-I8bj.js} +56 -63
- package/dist/chunks/{chip-CI1ZINnr.js.map → chip-B5c-I8bj.js.map} +1 -1
- package/dist/chunks/code-CM6hIZNx.js +1531 -0
- package/dist/chunks/{code-C5UFBkCh.js.map → code-CM6hIZNx.js.map} +1 -1
- package/dist/chunks/date-picker-B15_rR0f.js +774 -0
- package/dist/chunks/date-picker-B15_rR0f.js.map +1 -0
- package/dist/chunks/decorate-DknOJ8FJ.js +40 -0
- package/dist/chunks/{decorate-DXuynaiA.js.map → decorate-DknOJ8FJ.js.map} +1 -1
- package/dist/chunks/{dialog-DGVEE5m_.js → dialog-Czknf8dl.js} +47 -52
- package/dist/chunks/{dialog-DGVEE5m_.js.map → dialog-Czknf8dl.js.map} +1 -1
- package/dist/chunks/divider-DIyCOosa.js +78 -0
- package/dist/chunks/{divider-DNepwoZv.js.map → divider-DIyCOosa.js.map} +1 -1
- package/dist/chunks/{fab-C9j3WBHE.js → fab-aZC0-lHo.js} +38 -44
- package/dist/chunks/{fab-C9j3WBHE.js.map → fab-aZC0-lHo.js.map} +1 -1
- package/dist/chunks/{fab-menu.css-3pu930sZ.js → fab-menu.css-BdVg1k4c.js} +5 -6
- package/dist/chunks/{fab-menu.css-3pu930sZ.js.map → fab-menu.css-BdVg1k4c.js.map} +1 -1
- package/dist/chunks/focus-ring-K6SY_mIm.js +69 -0
- package/dist/chunks/{focus-ring-CuiJuM-y.js.map → focus-ring-K6SY_mIm.js.map} +1 -1
- package/dist/chunks/form-associated-Do5uXckv.js +69 -0
- package/dist/chunks/{form-associated-Cty_ZaS9.js.map → form-associated-Do5uXckv.js.map} +1 -1
- package/dist/chunks/icon-FvKeXi61.js +59 -0
- package/dist/chunks/{icon-DrNqcNEL.js.map → icon-FvKeXi61.js.map} +1 -1
- package/dist/chunks/{icon-button-BQz73GLa.js → icon-button-CulnCZpZ.js} +58 -67
- package/dist/chunks/{icon-button-BQz73GLa.js.map → icon-button-CulnCZpZ.js.map} +1 -1
- package/dist/chunks/{list-D8olR7oZ.js → list-D7yrbJRL.js} +64 -72
- package/dist/chunks/{list-D8olR7oZ.js.map → list-D7yrbJRL.js.map} +1 -1
- package/dist/chunks/{loading-indicator-CvWnZr9o.js → loading-indicator-D9AyxNQh.js} +41 -46
- package/dist/chunks/{loading-indicator-CvWnZr9o.js.map → loading-indicator-D9AyxNQh.js.map} +1 -1
- package/dist/chunks/{menu-item-BBSp5Cqc.js → menu-item-C3entPo7.js} +77 -91
- package/dist/chunks/{menu-item-BBSp5Cqc.js.map → menu-item-C3entPo7.js.map} +1 -1
- package/dist/chunks/{navigation-bar-item-C9DfOEzg.js → navigation-bar-item-CWHCQeNw.js} +98 -115
- package/dist/chunks/{navigation-bar-item-C9DfOEzg.js.map → navigation-bar-item-CWHCQeNw.js.map} +1 -1
- package/dist/chunks/{navigation-drawer-CKl44Ef5.js → navigation-drawer-pGer0t4z.js} +116 -138
- package/dist/chunks/{navigation-drawer-CKl44Ef5.js.map → navigation-drawer-pGer0t4z.js.map} +1 -1
- package/dist/chunks/{navigation-rail-item-6pdhNHJK.js → navigation-rail-item-CWvGjLjC.js} +70 -86
- package/dist/chunks/{navigation-rail-item-6pdhNHJK.js.map → navigation-rail-item-CWvGjLjC.js.map} +1 -1
- package/dist/chunks/{player-C4ydiIpr.js → player-dT08kxeG.js} +423 -466
- package/dist/chunks/{player-C4ydiIpr.js.map → player-dT08kxeG.js.map} +1 -1
- package/dist/chunks/{progress-LQmLMDjX.js → progress-etZuX_VD.js} +46 -53
- package/dist/chunks/{progress-LQmLMDjX.js.map → progress-etZuX_VD.js.map} +1 -1
- package/dist/chunks/radio-jPCwykIa.js +197 -0
- package/dist/chunks/{radio-Bily78NT.js.map → radio-jPCwykIa.js.map} +1 -1
- package/dist/chunks/ripple-CBOKeVfm.js +132 -0
- package/dist/chunks/{ripple-squbKHhj.js.map → ripple-CBOKeVfm.js.map} +1 -1
- package/dist/chunks/{search-bar-CfN-emMP.js → search-bar-B6xxVT7u.js} +167 -185
- package/dist/chunks/{search-bar-CfN-emMP.js.map → search-bar-B6xxVT7u.js.map} +1 -1
- package/dist/chunks/segmented-button-Fon9kOHV.js +253 -0
- package/dist/chunks/{segmented-button-B0BvGSQ7.js.map → segmented-button-Fon9kOHV.js.map} +1 -1
- package/dist/chunks/{side-sheet-S2w081AK.js → side-sheet-sQ8qGKVm.js} +73 -81
- package/dist/chunks/{side-sheet-S2w081AK.js.map → side-sheet-sQ8qGKVm.js.map} +1 -1
- package/dist/chunks/slider-OIyEcUU9.js +448 -0
- package/dist/chunks/slider-OIyEcUU9.js.map +1 -0
- package/dist/chunks/{snackbar-Wsz3BzEY.js → snackbar-Yi6fF9vM.js} +57 -62
- package/dist/chunks/{snackbar-Wsz3BzEY.js.map → snackbar-Yi6fF9vM.js.map} +1 -1
- package/dist/chunks/{split-button-DUfjukQY.js → split-button-CLjVJe3I.js} +155 -172
- package/dist/chunks/{split-button-DUfjukQY.js.map → split-button-CLjVJe3I.js.map} +1 -1
- package/dist/chunks/{switch-DdukrvXb.js → switch-mtu6AVEh.js} +54 -57
- package/dist/chunks/{switch-DdukrvXb.js.map → switch-mtu6AVEh.js.map} +1 -1
- package/dist/chunks/table-C5rCvdFc.js +724 -0
- package/dist/chunks/{table-CqHnneAj.js.map → table-C5rCvdFc.js.map} +1 -1
- package/dist/chunks/tabs-C0mtURlT.js +182 -0
- package/dist/chunks/{tabs-BfOtoeir.js.map → tabs-C0mtURlT.js.map} +1 -1
- package/dist/chunks/{text-field-hN6-2HQy.js → text-field-MifFD7uk.js} +92 -110
- package/dist/chunks/{text-field-hN6-2HQy.js.map → text-field-MifFD7uk.js.map} +1 -1
- package/dist/chunks/time-picker-JTcLcJuz.js +810 -0
- package/dist/chunks/time-picker-JTcLcJuz.js.map +1 -0
- package/dist/chunks/{toolbar-DXVQbQKJ.js → toolbar-CsxKc2Yd.js} +48 -55
- package/dist/chunks/{toolbar-DXVQbQKJ.js.map → toolbar-CsxKc2Yd.js.map} +1 -1
- package/dist/chunks/tooltip-Ds3lNowS.js +380 -0
- package/dist/chunks/{tooltip-CE7JMHMu.js.map → tooltip-Ds3lNowS.js.map} +1 -1
- package/dist/chunks/{top-app-bar-VzrSd-r5.js → top-app-bar-TrnjKzOX.js} +46 -53
- package/dist/chunks/{top-app-bar-VzrSd-r5.js.map → top-app-bar-TrnjKzOX.js.map} +1 -1
- package/dist/components/account-menu/account-menu.js +2 -8
- package/dist/components/app-drawer/app-drawer.js +2 -9
- package/dist/components/badge/badge.js +2 -4
- package/dist/components/bottom-sheet/bottom-sheet.js +2 -4
- package/dist/components/button/button.js +2 -4
- package/dist/components/button-group/button-group.js +2 -4
- package/dist/components/card/card.js +2 -4
- package/dist/components/carousel/carousel-item.js +2 -4
- package/dist/components/carousel/carousel.js +214 -232
- package/dist/components/carousel/carousel.js.map +1 -1
- package/dist/components/checkbox/checkbox.js +2 -4
- package/dist/components/chip/chip.js +2 -5
- package/dist/components/code/code.js +2 -5
- package/dist/components/date-picker/date-picker.js +2 -4
- package/dist/components/dialog/dialog.js +2 -4
- package/dist/components/divider/divider.js +2 -4
- package/dist/components/fab/fab.js +2 -4
- package/dist/components/fab-menu/fab-menu-item.js +53 -61
- package/dist/components/fab-menu/fab-menu-item.js.map +1 -1
- package/dist/components/fab-menu/fab-menu.js +98 -111
- package/dist/components/fab-menu/fab-menu.js.map +1 -1
- package/dist/components/icon/icon.js +2 -4
- package/dist/components/icon-button/icon-button.js +2 -4
- package/dist/components/list/list.js +2 -5
- package/dist/components/loading-indicator/loading-indicator.js +2 -4
- package/dist/components/menu/menu-item.js +2 -4
- package/dist/components/menu/menu.js +165 -183
- package/dist/components/menu/menu.js.map +1 -1
- package/dist/components/navigation-bar/navigation-bar-item.js +2 -5
- package/dist/components/navigation-bar/navigation-bar.js +131 -143
- package/dist/components/navigation-bar/navigation-bar.js.map +1 -1
- package/dist/components/navigation-drawer/navigation-drawer.js +2 -8
- package/dist/components/navigation-rail/navigation-rail-item.js +2 -5
- package/dist/components/navigation-rail/navigation-rail.js +92 -102
- package/dist/components/navigation-rail/navigation-rail.js.map +1 -1
- package/dist/components/player/player.js +2 -7
- package/dist/components/progress/progress.js +2 -5
- package/dist/components/radio/radio.js +2 -5
- package/dist/components/search-bar/search-bar.js +2 -5
- package/dist/components/segmented-button/segmented-button.js +2 -5
- package/dist/components/side-sheet/side-sheet.js +2 -4
- package/dist/components/slider/slider.js +2 -4
- package/dist/components/snackbar/snackbar.js +2 -4
- package/dist/components/split-button/split-button.js +2 -4
- package/dist/components/switch/switch.js +2 -4
- package/dist/components/table/table.js +2 -13
- package/dist/components/tabs/tabs.js +2 -5
- package/dist/components/text-field/text-field.js +2 -4
- package/dist/components/time-picker/time-picker.js +2 -4
- package/dist/components/toolbar/toolbar.js +2 -4
- package/dist/components/tooltip/tooltip.js +2 -4
- package/dist/components/top-app-bar/top-app-bar.js +2 -5
- package/dist/index.js +52 -150
- package/dist/internal/focus-ring/focus-ring.js +2 -4
- package/dist/internal/ripple/ripple.js +2 -4
- package/dist/tokens/index.js +468 -314
- package/dist/tokens/index.js.map +1 -1
- package/llms.txt +72 -8
- package/package.json +2 -14
- package/dist/chunks/app-drawer-Du1ePzxZ.js +0 -903
- package/dist/chunks/button-group-CNqvJx1n.js +0 -143
- package/dist/chunks/code-C5UFBkCh.js +0 -1830
- package/dist/chunks/date-picker-DJeHi4w-.js +0 -777
- package/dist/chunks/date-picker-DJeHi4w-.js.map +0 -1
- package/dist/chunks/decorate-DXuynaiA.js +0 -39
- package/dist/chunks/divider-DNepwoZv.js +0 -82
- package/dist/chunks/focus-ring-CuiJuM-y.js +0 -71
- package/dist/chunks/form-associated-Cty_ZaS9.js +0 -73
- package/dist/chunks/icon-DrNqcNEL.js +0 -62
- package/dist/chunks/radio-Bily78NT.js +0 -205
- package/dist/chunks/ripple-squbKHhj.js +0 -135
- package/dist/chunks/segmented-button-B0BvGSQ7.js +0 -265
- package/dist/chunks/slider-D-mnO8yQ.js +0 -450
- package/dist/chunks/slider-D-mnO8yQ.js.map +0 -1
- package/dist/chunks/table-CqHnneAj.js +0 -773
- package/dist/chunks/tabs-BfOtoeir.js +0 -191
- package/dist/chunks/time-picker-CZnb2sWz.js +0 -785
- package/dist/chunks/time-picker-CZnb2sWz.js.map +0 -1
- package/dist/chunks/tooltip-CE7JMHMu.js +0 -398
- package/dist/components/account-menu/account-menu.css.d.ts +0 -3
- package/dist/components/account-menu/account-menu.css.d.ts.map +0 -1
- package/dist/components/account-menu/account-menu.d.ts +0 -111
- package/dist/components/account-menu/account-menu.d.ts.map +0 -1
- package/dist/components/app-drawer/app-drawer.css.d.ts +0 -3
- package/dist/components/app-drawer/app-drawer.css.d.ts.map +0 -1
- package/dist/components/app-drawer/app-drawer.d.ts +0 -173
- package/dist/components/app-drawer/app-drawer.d.ts.map +0 -1
- package/dist/components/badge/badge.css.d.ts +0 -2
- package/dist/components/badge/badge.css.d.ts.map +0 -1
- package/dist/components/badge/badge.d.ts +0 -16
- package/dist/components/badge/badge.d.ts.map +0 -1
- package/dist/components/bottom-sheet/bottom-sheet.css.d.ts +0 -2
- package/dist/components/bottom-sheet/bottom-sheet.css.d.ts.map +0 -1
- package/dist/components/bottom-sheet/bottom-sheet.d.ts +0 -69
- package/dist/components/bottom-sheet/bottom-sheet.d.ts.map +0 -1
- package/dist/components/button/button.css.d.ts +0 -2
- package/dist/components/button/button.css.d.ts.map +0 -1
- package/dist/components/button/button.d.ts +0 -25
- package/dist/components/button/button.d.ts.map +0 -1
- package/dist/components/button-group/button-group.css.d.ts +0 -2
- package/dist/components/button-group/button-group.css.d.ts.map +0 -1
- package/dist/components/button-group/button-group.d.ts +0 -28
- package/dist/components/button-group/button-group.d.ts.map +0 -1
- package/dist/components/card/card.css.d.ts +0 -2
- package/dist/components/card/card.css.d.ts.map +0 -1
- package/dist/components/card/card.d.ts +0 -18
- package/dist/components/card/card.d.ts.map +0 -1
- package/dist/components/carousel/carousel-item.d.ts +0 -33
- package/dist/components/carousel/carousel-item.d.ts.map +0 -1
- package/dist/components/carousel/carousel.css.d.ts +0 -3
- package/dist/components/carousel/carousel.css.d.ts.map +0 -1
- package/dist/components/carousel/carousel.d.ts +0 -81
- package/dist/components/carousel/carousel.d.ts.map +0 -1
- package/dist/components/checkbox/checkbox.css.d.ts +0 -2
- package/dist/components/checkbox/checkbox.css.d.ts.map +0 -1
- package/dist/components/checkbox/checkbox.d.ts +0 -24
- package/dist/components/checkbox/checkbox.d.ts.map +0 -1
- package/dist/components/chip/chip.css.d.ts +0 -3
- package/dist/components/chip/chip.css.d.ts.map +0 -1
- package/dist/components/chip/chip.d.ts +0 -27
- package/dist/components/chip/chip.d.ts.map +0 -1
- package/dist/components/code/code.css.d.ts +0 -2
- package/dist/components/code/code.css.d.ts.map +0 -1
- package/dist/components/code/code.d.ts +0 -106
- package/dist/components/code/code.d.ts.map +0 -1
- package/dist/components/code/highlighter.d.ts +0 -8
- package/dist/components/code/highlighter.d.ts.map +0 -1
- package/dist/components/code/linter.d.ts +0 -44
- package/dist/components/code/linter.d.ts.map +0 -1
- package/dist/components/date-picker/date-picker.css.d.ts +0 -2
- package/dist/components/date-picker/date-picker.css.d.ts.map +0 -1
- package/dist/components/date-picker/date-picker.d.ts +0 -59
- package/dist/components/date-picker/date-picker.d.ts.map +0 -1
- package/dist/components/dialog/dialog.css.d.ts +0 -2
- package/dist/components/dialog/dialog.css.d.ts.map +0 -1
- package/dist/components/dialog/dialog.d.ts +0 -22
- package/dist/components/dialog/dialog.d.ts.map +0 -1
- package/dist/components/divider/divider.css.d.ts +0 -2
- package/dist/components/divider/divider.css.d.ts.map +0 -1
- package/dist/components/divider/divider.d.ts +0 -16
- package/dist/components/divider/divider.d.ts.map +0 -1
- package/dist/components/fab/fab.css.d.ts +0 -2
- package/dist/components/fab/fab.css.d.ts.map +0 -1
- package/dist/components/fab/fab.d.ts +0 -19
- package/dist/components/fab/fab.d.ts.map +0 -1
- package/dist/components/fab-menu/fab-menu-item.d.ts +0 -35
- package/dist/components/fab-menu/fab-menu-item.d.ts.map +0 -1
- package/dist/components/fab-menu/fab-menu.css.d.ts +0 -3
- package/dist/components/fab-menu/fab-menu.css.d.ts.map +0 -1
- package/dist/components/fab-menu/fab-menu.d.ts +0 -72
- package/dist/components/fab-menu/fab-menu.d.ts.map +0 -1
- package/dist/components/icon/icon.css.d.ts +0 -2
- package/dist/components/icon/icon.css.d.ts.map +0 -1
- package/dist/components/icon/icon.d.ts +0 -15
- package/dist/components/icon/icon.d.ts.map +0 -1
- package/dist/components/icon-button/icon-button.css.d.ts +0 -2
- package/dist/components/icon-button/icon-button.css.d.ts.map +0 -1
- package/dist/components/icon-button/icon-button.d.ts +0 -22
- package/dist/components/icon-button/icon-button.d.ts.map +0 -1
- package/dist/components/list/list.css.d.ts +0 -3
- package/dist/components/list/list.css.d.ts.map +0 -1
- package/dist/components/list/list.d.ts +0 -25
- package/dist/components/list/list.d.ts.map +0 -1
- package/dist/components/loading-indicator/loading-indicator.css.d.ts +0 -2
- package/dist/components/loading-indicator/loading-indicator.css.d.ts.map +0 -1
- package/dist/components/loading-indicator/loading-indicator.d.ts +0 -48
- package/dist/components/loading-indicator/loading-indicator.d.ts.map +0 -1
- package/dist/components/menu/menu-item.d.ts +0 -41
- package/dist/components/menu/menu-item.d.ts.map +0 -1
- package/dist/components/menu/menu.css.d.ts +0 -3
- package/dist/components/menu/menu.css.d.ts.map +0 -1
- package/dist/components/menu/menu.d.ts +0 -91
- package/dist/components/menu/menu.d.ts.map +0 -1
- package/dist/components/navigation-bar/navigation-bar-item.d.ts +0 -49
- package/dist/components/navigation-bar/navigation-bar-item.d.ts.map +0 -1
- package/dist/components/navigation-bar/navigation-bar.css.d.ts +0 -3
- package/dist/components/navigation-bar/navigation-bar.css.d.ts.map +0 -1
- package/dist/components/navigation-bar/navigation-bar.d.ts +0 -50
- package/dist/components/navigation-bar/navigation-bar.d.ts.map +0 -1
- package/dist/components/navigation-drawer/navigation-drawer.css.d.ts +0 -3
- package/dist/components/navigation-drawer/navigation-drawer.css.d.ts.map +0 -1
- package/dist/components/navigation-drawer/navigation-drawer.d.ts +0 -76
- package/dist/components/navigation-drawer/navigation-drawer.d.ts.map +0 -1
- package/dist/components/navigation-rail/navigation-rail-item.d.ts +0 -36
- package/dist/components/navigation-rail/navigation-rail-item.d.ts.map +0 -1
- package/dist/components/navigation-rail/navigation-rail.css.d.ts +0 -3
- package/dist/components/navigation-rail/navigation-rail.css.d.ts.map +0 -1
- package/dist/components/navigation-rail/navigation-rail.d.ts +0 -43
- package/dist/components/navigation-rail/navigation-rail.d.ts.map +0 -1
- package/dist/components/player/player.css.d.ts +0 -2
- package/dist/components/player/player.css.d.ts.map +0 -1
- package/dist/components/player/player.d.ts +0 -99
- package/dist/components/player/player.d.ts.map +0 -1
- package/dist/components/progress/progress.css.d.ts +0 -2
- package/dist/components/progress/progress.css.d.ts.map +0 -1
- package/dist/components/progress/progress.d.ts +0 -21
- package/dist/components/progress/progress.d.ts.map +0 -1
- package/dist/components/radio/radio.css.d.ts +0 -3
- package/dist/components/radio/radio.css.d.ts.map +0 -1
- package/dist/components/radio/radio.d.ts +0 -38
- package/dist/components/radio/radio.d.ts.map +0 -1
- package/dist/components/search-bar/search-bar.css.d.ts +0 -2
- package/dist/components/search-bar/search-bar.css.d.ts.map +0 -1
- package/dist/components/search-bar/search-bar.d.ts +0 -84
- package/dist/components/search-bar/search-bar.d.ts.map +0 -1
- package/dist/components/segmented-button/segmented-button.css.d.ts +0 -3
- package/dist/components/segmented-button/segmented-button.css.d.ts.map +0 -1
- package/dist/components/segmented-button/segmented-button.d.ts +0 -40
- package/dist/components/segmented-button/segmented-button.d.ts.map +0 -1
- package/dist/components/side-sheet/side-sheet.css.d.ts +0 -2
- package/dist/components/side-sheet/side-sheet.css.d.ts.map +0 -1
- package/dist/components/side-sheet/side-sheet.d.ts +0 -57
- package/dist/components/side-sheet/side-sheet.d.ts.map +0 -1
- package/dist/components/slider/slider.css.d.ts +0 -2
- package/dist/components/slider/slider.css.d.ts.map +0 -1
- package/dist/components/slider/slider.d.ts +0 -51
- package/dist/components/slider/slider.d.ts.map +0 -1
- package/dist/components/snackbar/snackbar.css.d.ts +0 -2
- package/dist/components/snackbar/snackbar.css.d.ts.map +0 -1
- package/dist/components/snackbar/snackbar.d.ts +0 -24
- package/dist/components/snackbar/snackbar.d.ts.map +0 -1
- package/dist/components/split-button/split-button.css.d.ts +0 -2
- package/dist/components/split-button/split-button.css.d.ts.map +0 -1
- package/dist/components/split-button/split-button.d.ts +0 -89
- package/dist/components/split-button/split-button.d.ts.map +0 -1
- package/dist/components/switch/switch.css.d.ts +0 -2
- package/dist/components/switch/switch.css.d.ts.map +0 -1
- package/dist/components/switch/switch.d.ts +0 -22
- package/dist/components/switch/switch.d.ts.map +0 -1
- package/dist/components/table/table.css.d.ts +0 -8
- package/dist/components/table/table.css.d.ts.map +0 -1
- package/dist/components/table/table.d.ts +0 -158
- package/dist/components/table/table.d.ts.map +0 -1
- package/dist/components/tabs/tabs.css.d.ts +0 -3
- package/dist/components/tabs/tabs.css.d.ts.map +0 -1
- package/dist/components/tabs/tabs.d.ts +0 -33
- package/dist/components/tabs/tabs.d.ts.map +0 -1
- package/dist/components/text-field/text-field.css.d.ts +0 -2
- package/dist/components/text-field/text-field.css.d.ts.map +0 -1
- package/dist/components/text-field/text-field.d.ts +0 -40
- package/dist/components/text-field/text-field.d.ts.map +0 -1
- package/dist/components/time-picker/time-picker.css.d.ts +0 -2
- package/dist/components/time-picker/time-picker.css.d.ts.map +0 -1
- package/dist/components/time-picker/time-picker.d.ts +0 -87
- package/dist/components/time-picker/time-picker.d.ts.map +0 -1
- package/dist/components/toolbar/toolbar.css.d.ts +0 -2
- package/dist/components/toolbar/toolbar.css.d.ts.map +0 -1
- package/dist/components/toolbar/toolbar.d.ts +0 -53
- package/dist/components/toolbar/toolbar.d.ts.map +0 -1
- package/dist/components/tooltip/tooltip.css.d.ts +0 -2
- package/dist/components/tooltip/tooltip.css.d.ts.map +0 -1
- package/dist/components/tooltip/tooltip.d.ts +0 -89
- package/dist/components/tooltip/tooltip.d.ts.map +0 -1
- package/dist/components/top-app-bar/top-app-bar.css.d.ts +0 -2
- package/dist/components/top-app-bar/top-app-bar.css.d.ts.map +0 -1
- package/dist/components/top-app-bar/top-app-bar.d.ts +0 -29
- package/dist/components/top-app-bar/top-app-bar.d.ts.map +0 -1
- package/dist/index.d.ts +0 -52
- package/dist/index.d.ts.map +0 -1
- package/dist/internal/base-component.d.ts +0 -13
- package/dist/internal/base-component.d.ts.map +0 -1
- package/dist/internal/focus-ring/focus-ring.css.d.ts +0 -2
- package/dist/internal/focus-ring/focus-ring.css.d.ts.map +0 -1
- package/dist/internal/focus-ring/focus-ring.d.ts +0 -18
- package/dist/internal/focus-ring/focus-ring.d.ts.map +0 -1
- package/dist/internal/form-associated.d.ts +0 -26
- package/dist/internal/form-associated.d.ts.map +0 -1
- package/dist/internal/ripple/ripple.css.d.ts +0 -2
- package/dist/internal/ripple/ripple.css.d.ts.map +0 -1
- package/dist/internal/ripple/ripple.d.ts +0 -23
- package/dist/internal/ripple/ripple.d.ts.map +0 -1
- package/dist/tokens/colors.d.ts +0 -42
- package/dist/tokens/colors.d.ts.map +0 -1
- package/dist/tokens/elevation.d.ts +0 -9
- package/dist/tokens/elevation.d.ts.map +0 -1
- package/dist/tokens/index.d.ts +0 -7
- package/dist/tokens/index.d.ts.map +0 -1
- package/dist/tokens/motion.d.ts +0 -21
- package/dist/tokens/motion.d.ts.map +0 -1
- package/dist/tokens/shape.d.ts +0 -10
- package/dist/tokens/shape.d.ts.map +0 -1
- package/dist/tokens/theme.css.d.ts +0 -4
- package/dist/tokens/theme.css.d.ts.map +0 -1
- package/dist/tokens/typography.d.ts +0 -101
- package/dist/tokens/typography.d.ts.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"snackbar-
|
|
1
|
+
{"version":3,"file":"snackbar-Yi6fF9vM.js","names":[],"sources":["../../src/components/snackbar/snackbar.css.ts","../../src/components/snackbar/snackbar.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const snackbarStyles = css`\n :host {\n display: block;\n position: fixed;\n bottom: 24px;\n left: 50%;\n transform: translateX(-50%) translateY(100px);\n opacity: 0;\n pointer-events: none;\n z-index: 2000;\n transition: transform 250ms cubic-bezier(0.2, 0, 0, 1),\n opacity 250ms cubic-bezier(0.2, 0, 0, 1);\n }\n\n :host([open]) {\n transform: translateX(-50%) translateY(0);\n opacity: 1;\n pointer-events: auto;\n }\n\n .snackbar {\n display: flex;\n align-items: center;\n min-width: 288px;\n max-width: 568px;\n min-height: 48px;\n padding: 8px 16px;\n box-sizing: border-box;\n border-radius: var(--md-sys-shape-corner-extra-small, 4px);\n background-color: var(--md-sys-color-inverse-surface, #313033);\n color: var(--md-sys-color-inverse-on-surface, #F4EFF4);\n box-shadow: var(--md-sys-elevation-level3, 0px 1px 3px 0px rgba(0,0,0,0.30));\n font-family: var(--md-sys-typescale-font-family, inherit);\n font-size: var(--md-sys-typescale-body-medium-size, 14px);\n line-height: 20px;\n gap: 12px;\n }\n\n .message {\n flex: 1;\n }\n\n .actions {\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n .action-btn {\n background: transparent;\n border: none;\n color: var(--md-sys-color-inverse-primary, #D0BCFF);\n font-family: inherit;\n font-size: var(--md-sys-typescale-label-large-size, 14px);\n font-weight: 500;\n cursor: pointer;\n padding: 0 8px;\n height: 36px;\n border-radius: var(--md-sys-shape-corner-extra-small, 4px);\n outline: none;\n }\n\n .action-btn:hover {\n background-color: rgba(208, 188, 255, 0.08);\n }\n\n .close-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n background: transparent;\n border: none;\n color: var(--md-sys-color-inverse-on-surface, #F4EFF4);\n cursor: pointer;\n padding: 4px;\n border-radius: 50%;\n outline: none;\n }\n\n .close-btn:hover {\n background-color: rgba(255, 255, 255, 0.08);\n }\n`;\n\n","import { html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { MdBaseElement } from '../../internal/base-component.js';\nimport '../icon/icon.js';\nimport { snackbarStyles } from './snackbar.css.js';\n\n@customElement('md-snackbar')\nexport class MdSnackbar extends MdBaseElement {\n static override styles = [MdBaseElement.styles, snackbarStyles];\n\n @property({ type: Boolean, reflect: true })\n open = false;\n\n @property({ type: String })\n message = '';\n\n @property({ type: String, attribute: 'action-text' })\n actionText = '';\n\n @property({ type: Boolean, reflect: true })\n closeable = false;\n\n @property({ type: Number, attribute: 'timeout-ms' })\n timeoutMs = 4000;\n\n private timerId: number | null = null;\n\n override updated(changedProperties: Map<string, unknown>) {\n super.updated(changedProperties);\n if (changedProperties.has('open')) {\n if (this.open) {\n this.startTimer();\n } else {\n this.clearTimer();\n }\n }\n }\n\n show() {\n this.open = true;\n }\n\n close() {\n this.open = false;\n this.emitEvent('close');\n }\n\n private startTimer() {\n this.clearTimer();\n if (this.timeoutMs > 0) {\n this.timerId = window.setTimeout(() => {\n this.close();\n }, this.timeoutMs);\n }\n }\n\n private clearTimer() {\n if (this.timerId !== null) {\n clearTimeout(this.timerId);\n this.timerId = null;\n }\n }\n\n private handleAction = () => {\n this.emitEvent('action');\n this.close();\n };\n\n private handleClose = () => {\n this.close();\n };\n\n override render() {\n return html`\n <div class=\"snackbar\" role=\"status\" aria-live=\"polite\">\n <div class=\"message\">\n <slot>${this.message}</slot>\n </div>\n\n <div class=\"actions\">\n ${this.actionText\n ? html`\n <button class=\"action-btn\" @click=${this.handleAction}>\n ${this.actionText}\n </button>\n `\n : nothing}\n\n ${this.closeable\n ? html`\n <button class=\"close-btn\" aria-label=\"Dismiss\" @click=${this.handleClose}>\n <md-icon name=\"close\" size=\"18\"></md-icon>\n </button>\n `\n : nothing}\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'md-snackbar': MdSnackbar;\n }\n}\n\n"],"mappings":";;;;;AAEA,IAAa,IAAiB,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GCKpB,IAAN,cAAyB,EAAc;;EA6DhB,aAzDrB,KAAA,OAAA,IAGG,KAAA,UAAA,IAGG,KAAA,aAAA,IAGD,KAAA,YAAA,IAGA,KAAA,YAAA,KAEqB,KAAA,UAAA,MAsCJ,KAAA,qBAAA;GAE3B,AADA,KAAK,UAAU,QAAQ,GACvB,KAAK,MAAM;EACb,GAE4B,KAAA,oBAAA;GAC1B,KAAK,MAAM;EACb;;;EA9DyB,KAAA,SAAA,CAAC,EAAc,QAAQ,CAAc;;CAmB9D,QAAiB,GAAyC;EAExD,AADA,MAAM,QAAQ,CAAiB,GAC3B,EAAkB,IAAI,MAAM,MAC1B,KAAK,OACP,KAAK,WAAW,IAEhB,KAAK,WAAW;CAGtB;CAEA,OAAO;EACL,KAAK,OAAO;CACd;CAEA,QAAQ;EAEN,AADA,KAAK,OAAO,IACZ,KAAK,UAAU,OAAO;CACxB;CAEA,aAAqB;EAEnB,AADA,KAAK,WAAW,GACZ,KAAK,YAAY,MACnB,KAAK,UAAU,OAAO,iBAAiB;GACrC,KAAK,MAAM;EACb,GAAG,KAAK,SAAS;CAErB;CAEA,aAAqB;EACnB,AAAI,KAAK,YAAY,SACnB,aAAa,KAAK,OAAO,GACzB,KAAK,UAAU;CAEnB;CAWA,SAAkB;EAChB,OAAO,CAAI;;;kBAGG,KAAK,QAAQ;;;;YAInB,KAAK,aACH,CAAI;oDACkC,KAAK,aAAa;oBAClD,KAAK,WAAW;;kBAGtB,EAAQ;;YAEV,KAAK,YACH,CAAI;wEACsD,KAAK,YAAY;;;kBAI3E,EAAQ;;;;CAIpB;AACF;AAzFG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GAGzC,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,GAGzB,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,WAAW;AAAc,CAAC,CAAA,GAAA,EAAA,WAAA,cAAA,KAAA,CAAA,GAGnD,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,GAGzC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,WAAW;AAAa,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,GAhBpD,IAAA,EAAA,CAAA,EAAc,aAAa,CAAA,GAAA,CAAA"}
|
|
@@ -1,10 +1,11 @@
|
|
|
1
|
-
import { n as
|
|
2
|
-
import "./ripple-
|
|
3
|
-
import "./focus-ring-
|
|
4
|
-
import "./icon-
|
|
5
|
-
import { css as
|
|
6
|
-
import { customElement as
|
|
7
|
-
|
|
1
|
+
import { n as e, t } from "./decorate-DknOJ8FJ.js";
|
|
2
|
+
import "./ripple-CBOKeVfm.js";
|
|
3
|
+
import "./focus-ring-K6SY_mIm.js";
|
|
4
|
+
import "./icon-FvKeXi61.js";
|
|
5
|
+
import { css as n, html as r, nothing as i } from "lit";
|
|
6
|
+
import { customElement as a, property as o, query as s, queryAssignedElements as c } from "lit/decorators.js";
|
|
7
|
+
//#region src/components/split-button/split-button.css.ts
|
|
8
|
+
var l = n`
|
|
8
9
|
:host {
|
|
9
10
|
display: inline-flex;
|
|
10
11
|
vertical-align: middle;
|
|
@@ -232,118 +233,117 @@ var f = m`
|
|
|
232
233
|
background-color: var(--md-sys-color-outline-variant, #cac4d0);
|
|
233
234
|
border-radius: 3px;
|
|
234
235
|
}
|
|
235
|
-
`,
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
return p`
|
|
236
|
+
`, u = class extends e {
|
|
237
|
+
constructor(...e) {
|
|
238
|
+
super(...e), this.variant = "filled", this.disabled = !1, this.label = "", this.icon = "", this.trailingIcon = "arrow_drop_down", this.open = !1, this.type = "button", this.actionAriaLabel = "", this.menuAriaLabel = "More options", this.menuPlacement = "bottom-end", this.stayOpenOnFocusout = !1, this.closeOnItemClick = !0, this.handleDocumentClick = (e) => {
|
|
239
|
+
this.open && (e.composedPath().includes(this) || this.close());
|
|
240
|
+
}, this.handleWindowKeyDown = (e) => {
|
|
241
|
+
this.open && e.key === "Escape" && (e.preventDefault(), e.stopPropagation(), this.close(), this.menuButton?.focus());
|
|
242
|
+
}, this.handleSurfaceKeyDown = (e) => {
|
|
243
|
+
let t = this.getItems(!0);
|
|
244
|
+
if (t.length === 0) return;
|
|
245
|
+
let n = null;
|
|
246
|
+
try {
|
|
247
|
+
n = document.activeElement;
|
|
248
|
+
} catch {
|
|
249
|
+
n = null;
|
|
250
|
+
}
|
|
251
|
+
let r = t.findIndex((e) => e === n || e.contains(n));
|
|
252
|
+
switch (e.key) {
|
|
253
|
+
case "ArrowDown":
|
|
254
|
+
e.preventDefault(), t[r >= 0 && r < t.length - 1 ? r + 1 : 0]?.focus();
|
|
255
|
+
break;
|
|
256
|
+
case "ArrowUp":
|
|
257
|
+
e.preventDefault(), t[r > 0 ? r - 1 : t.length - 1]?.focus();
|
|
258
|
+
break;
|
|
259
|
+
case "Home":
|
|
260
|
+
e.preventDefault(), t[0]?.focus();
|
|
261
|
+
break;
|
|
262
|
+
case "End":
|
|
263
|
+
e.preventDefault(), t[t.length - 1]?.focus();
|
|
264
|
+
break;
|
|
265
|
+
case "Tab": this.stayOpenOnFocusout || this.close();
|
|
266
|
+
}
|
|
267
|
+
}, this.handleItemSelection = (e) => {
|
|
268
|
+
let t = e.detail;
|
|
269
|
+
this.emitEvent("select", t), !t?.keepOpen && this.closeOnItemClick && (this.close(), this.menuButton?.focus());
|
|
270
|
+
}, this.handleActionClick = (e) => {
|
|
271
|
+
if (this.disabled) {
|
|
272
|
+
e.preventDefault(), e.stopImmediatePropagation();
|
|
273
|
+
return;
|
|
274
|
+
}
|
|
275
|
+
if (this.type === "submit" || this.type === "reset") {
|
|
276
|
+
let e = this.closest("form");
|
|
277
|
+
e && (this.type === "submit" ? e.requestSubmit() : e.reset());
|
|
278
|
+
}
|
|
279
|
+
this.emitEvent("action", {
|
|
280
|
+
target: this,
|
|
281
|
+
open: this.open
|
|
282
|
+
});
|
|
283
|
+
}, this.handleMenuClick = (e) => {
|
|
284
|
+
if (e.stopPropagation(), this.disabled) {
|
|
285
|
+
e.preventDefault(), e.stopImmediatePropagation();
|
|
286
|
+
return;
|
|
287
|
+
}
|
|
288
|
+
this.open = !this.open, this.emitEvent("trailing-click", {
|
|
289
|
+
target: this,
|
|
290
|
+
open: this.open
|
|
291
|
+
}), this.emitEvent("toggle", {
|
|
292
|
+
target: this,
|
|
293
|
+
open: this.open
|
|
294
|
+
});
|
|
295
|
+
}, this.handleBackdropClick = (e) => {
|
|
296
|
+
e.stopPropagation(), this.close();
|
|
297
|
+
};
|
|
298
|
+
}
|
|
299
|
+
static {
|
|
300
|
+
this.styles = [e.styles, l];
|
|
301
|
+
}
|
|
302
|
+
handleSlotChange() {
|
|
303
|
+
let e = !!(this.icon || this.assignedIcons && this.assignedIcons.length > 0);
|
|
304
|
+
this.toggleAttribute("has-icon", e);
|
|
305
|
+
}
|
|
306
|
+
connectedCallback() {
|
|
307
|
+
super.connectedCallback(), window.addEventListener("keydown", this.handleWindowKeyDown), document.addEventListener("pointerdown", this.handleDocumentClick), this.addEventListener("item-click", this.handleItemSelection), this.addEventListener("menu-item-click", this.handleItemSelection);
|
|
308
|
+
}
|
|
309
|
+
disconnectedCallback() {
|
|
310
|
+
super.disconnectedCallback(), window.removeEventListener("keydown", this.handleWindowKeyDown), document.removeEventListener("pointerdown", this.handleDocumentClick), this.removeEventListener("item-click", this.handleItemSelection), this.removeEventListener("menu-item-click", this.handleItemSelection);
|
|
311
|
+
}
|
|
312
|
+
firstUpdated() {
|
|
313
|
+
this.handleSlotChange();
|
|
314
|
+
}
|
|
315
|
+
updated(e) {
|
|
316
|
+
super.updated(e), e.has("open") && (this.open ? (this.emitEvent("open"), setTimeout(() => {
|
|
317
|
+
this.focusFirstItem();
|
|
318
|
+
}, 16)) : this.emitEvent("close"));
|
|
319
|
+
}
|
|
320
|
+
show() {
|
|
321
|
+
this.open ||= !0;
|
|
322
|
+
}
|
|
323
|
+
close() {
|
|
324
|
+
this.open &&= !1;
|
|
325
|
+
}
|
|
326
|
+
toggle() {
|
|
327
|
+
this.open = !this.open;
|
|
328
|
+
}
|
|
329
|
+
getItems(e = !1) {
|
|
330
|
+
let t = Array.from(this.querySelectorAll("md-menu-item, [role=\"menuitem\"], button.menu-item"));
|
|
331
|
+
return e ? t.filter((e) => !(e.hasAttribute("disabled") || e.disabled)) : t;
|
|
332
|
+
}
|
|
333
|
+
focusFirstItem() {
|
|
334
|
+
let e = this.getItems(!0);
|
|
335
|
+
e.length > 0 ? e[0].focus() : this.menuSurfaceElement && this.menuSurfaceElement.focus();
|
|
336
|
+
}
|
|
337
|
+
focusLastItem() {
|
|
338
|
+
let e = this.getItems(!0);
|
|
339
|
+
e.length > 0 && e[e.length - 1].focus();
|
|
340
|
+
}
|
|
341
|
+
focusItemAtIndex(e) {
|
|
342
|
+
let t = this.getItems(!0);
|
|
343
|
+
e >= 0 && e < t.length && t[e].focus();
|
|
344
|
+
}
|
|
345
|
+
render() {
|
|
346
|
+
return r`
|
|
347
347
|
<div class="backdrop" @click=${this.handleBackdropClick}></div>
|
|
348
348
|
|
|
349
349
|
<div class="container" role="group">
|
|
@@ -351,14 +351,14 @@ var f = m`
|
|
|
351
351
|
type=${this.type}
|
|
352
352
|
class="action-button"
|
|
353
353
|
?disabled=${this.disabled}
|
|
354
|
-
aria-label=${this.actionAriaLabel ||
|
|
354
|
+
aria-label=${this.actionAriaLabel || i}
|
|
355
355
|
@click=${this.handleActionClick}
|
|
356
356
|
>
|
|
357
357
|
<md-ripple ?disabled=${this.disabled}></md-ripple>
|
|
358
358
|
<md-focus-ring></md-focus-ring>
|
|
359
359
|
<span class="content">
|
|
360
360
|
<slot name="icon" @slotchange=${this.handleSlotChange}>
|
|
361
|
-
${this.icon ?
|
|
361
|
+
${this.icon ? r`<md-icon name=${this.icon}></md-icon>` : i}
|
|
362
362
|
</slot>
|
|
363
363
|
<slot name="label">${this.label}</slot>
|
|
364
364
|
</span>
|
|
@@ -396,55 +396,38 @@ var f = m`
|
|
|
396
396
|
</div>
|
|
397
397
|
</div>
|
|
398
398
|
`;
|
|
399
|
-
|
|
399
|
+
}
|
|
400
400
|
};
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
})],
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
})],
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
type: Boolean,
|
|
435
|
-
attribute: "stay-open-on-focusout"
|
|
436
|
-
})], n.prototype, "stayOpenOnFocusout", void 0);
|
|
437
|
-
i([s({
|
|
438
|
-
type: Boolean,
|
|
439
|
-
attribute: "close-on-item-click"
|
|
440
|
-
})], n.prototype, "closeOnItemClick", void 0);
|
|
441
|
-
i([l(".action-button")], n.prototype, "actionButton", void 0);
|
|
442
|
-
i([l(".menu-button")], n.prototype, "menuButton", void 0);
|
|
443
|
-
i([l(".menu-surface")], n.prototype, "menuSurfaceElement", void 0);
|
|
444
|
-
i([b({ slot: "icon" })], n.prototype, "assignedIcons", void 0);
|
|
445
|
-
n = i([h("md-split-button")], n);
|
|
446
|
-
export {
|
|
447
|
-
n as t
|
|
448
|
-
};
|
|
449
|
-
|
|
450
|
-
//# sourceMappingURL=split-button-DUfjukQY.js.map
|
|
401
|
+
t([o({
|
|
402
|
+
type: String,
|
|
403
|
+
reflect: !0
|
|
404
|
+
})], u.prototype, "variant", void 0), t([o({
|
|
405
|
+
type: Boolean,
|
|
406
|
+
reflect: !0
|
|
407
|
+
})], u.prototype, "disabled", void 0), t([o({ type: String })], u.prototype, "label", void 0), t([o({ type: String })], u.prototype, "icon", void 0), t([o({
|
|
408
|
+
type: String,
|
|
409
|
+
attribute: "trailing-icon"
|
|
410
|
+
})], u.prototype, "trailingIcon", void 0), t([o({
|
|
411
|
+
type: Boolean,
|
|
412
|
+
reflect: !0
|
|
413
|
+
})], u.prototype, "open", void 0), t([o({ type: String })], u.prototype, "type", void 0), t([o({
|
|
414
|
+
type: String,
|
|
415
|
+
attribute: "action-aria-label"
|
|
416
|
+
})], u.prototype, "actionAriaLabel", void 0), t([o({
|
|
417
|
+
type: String,
|
|
418
|
+
attribute: "menu-aria-label"
|
|
419
|
+
})], u.prototype, "menuAriaLabel", void 0), t([o({
|
|
420
|
+
type: String,
|
|
421
|
+
attribute: "menu-placement",
|
|
422
|
+
reflect: !0
|
|
423
|
+
})], u.prototype, "menuPlacement", void 0), t([o({
|
|
424
|
+
type: Boolean,
|
|
425
|
+
attribute: "stay-open-on-focusout"
|
|
426
|
+
})], u.prototype, "stayOpenOnFocusout", void 0), t([o({
|
|
427
|
+
type: Boolean,
|
|
428
|
+
attribute: "close-on-item-click"
|
|
429
|
+
})], u.prototype, "closeOnItemClick", void 0), t([s(".action-button")], u.prototype, "actionButton", void 0), t([s(".menu-button")], u.prototype, "menuButton", void 0), t([s(".menu-surface")], u.prototype, "menuSurfaceElement", void 0), t([c({ slot: "icon" })], u.prototype, "assignedIcons", void 0), u = t([a("md-split-button")], u);
|
|
430
|
+
//#endregion
|
|
431
|
+
export { u as t };
|
|
432
|
+
|
|
433
|
+
//# sourceMappingURL=split-button-CLjVJe3I.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"split-button-DUfjukQY.js","names":[],"sources":["../../src/components/split-button/split-button.css.ts","../../src/components/split-button/split-button.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const splitButtonStyles = css`\n :host {\n display: inline-flex;\n vertical-align: middle;\n outline: none;\n -webkit-tap-highlight-color: transparent;\n }\n\n :host([disabled]) {\n pointer-events: none;\n }\n\n .container {\n display: inline-flex;\n align-items: stretch;\n gap: var(--md-split-button-gap, 2px);\n position: relative;\n }\n\n button {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n height: 40px;\n border: none;\n font-family: var(--md-sys-typescale-font-family, inherit);\n font-size: var(--md-sys-typescale-label-large-size, 14px);\n font-weight: 500;\n line-height: 20px;\n letter-spacing: 0.1px;\n text-decoration: none;\n text-align: center;\n cursor: pointer;\n user-select: none;\n outline: none;\n transition: box-shadow 200ms cubic-bezier(0.2, 0, 0, 1),\n background-color 200ms cubic-bezier(0.2, 0, 0, 1),\n color 200ms cubic-bezier(0.2, 0, 0, 1);\n overflow: hidden;\n }\n\n .action-button {\n min-width: 48px;\n padding: 0 16px 0 24px;\n border-radius: var(--md-sys-shape-corner-full, 9999px)\n var(--md-sys-shape-corner-extra-small, 4px)\n var(--md-sys-shape-corner-extra-small, 4px)\n var(--md-sys-shape-corner-full, 9999px);\n }\n\n :host([has-icon]) .action-button {\n padding-left: 16px;\n }\n\n .menu-button {\n width: 40px;\n min-width: 40px;\n padding: 0;\n border-radius: var(--md-sys-shape-corner-extra-small, 4px)\n var(--md-sys-shape-corner-full, 9999px)\n var(--md-sys-shape-corner-full, 9999px)\n var(--md-sys-shape-corner-extra-small, 4px);\n }\n\n .content {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n position: relative;\n z-index: 1;\n }\n\n .icon-wrapper {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n position: relative;\n z-index: 1;\n }\n\n /* --- Filled Variant (Default) --- */\n :host(:not([variant])) button,\n :host([variant=\"filled\"]) button {\n background-color: var(--md-sys-color-primary, #6750a4);\n color: var(--md-sys-color-on-primary, #ffffff);\n box-shadow: var(--md-sys-elevation-level0, none);\n }\n\n :host([variant=\"filled\"]:hover) button,\n :host(:not([variant]):hover) button {\n box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0, 0, 0, 0.15));\n }\n\n /* --- Elevated Variant --- */\n :host([variant=\"elevated\"]) button {\n background-color: var(--md-sys-color-surface-container-low, #f7f2fa);\n color: var(--md-sys-color-primary, #6750a4);\n box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0, 0, 0, 0.15));\n }\n\n :host([variant=\"elevated\"]:hover) button {\n box-shadow: var(--md-sys-elevation-level2, 0px 2px 6px 2px rgba(0, 0, 0, 0.15));\n }\n\n /* --- Tonal Variant --- */\n :host([variant=\"tonal\"]) button {\n background-color: var(--md-sys-color-secondary-container, #e8def8);\n color: var(--md-sys-color-on-secondary-container, #1d192b);\n box-shadow: var(--md-sys-elevation-level0, none);\n }\n\n :host([variant=\"tonal\"]:hover) button {\n box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0, 0, 0, 0.15));\n }\n\n /* --- Outlined Variant --- */\n :host([variant=\"outlined\"]) button {\n background-color: transparent;\n color: var(--md-sys-color-primary, #6750a4);\n border: 1px solid var(--md-sys-color-outline, #79747e);\n }\n\n /* --- Disabled State --- */\n :host([disabled]) button {\n cursor: not-allowed;\n box-shadow: none;\n }\n\n :host([disabled]:not([variant=\"outlined\"])) button {\n background-color: rgba(29, 27, 32, 0.12);\n color: rgba(29, 27, 32, 0.38);\n }\n\n :host([disabled][variant=\"outlined\"]) button {\n border-color: rgba(29, 27, 32, 0.12);\n color: rgba(29, 27, 32, 0.38);\n }\n\n /* --- Backdrop --- */\n .backdrop {\n display: none;\n position: fixed;\n inset: 0;\n z-index: 998;\n background-color: transparent;\n }\n\n :host([open]) .backdrop {\n display: block;\n }\n\n /* --- Submenu Surface --- */\n .menu-surface {\n display: none;\n position: absolute;\n z-index: 999;\n min-width: var(--md-menu-min-width, 140px);\n max-width: var(--md-menu-max-width, 280px);\n max-height: var(--md-menu-max-height, calc(100vh - 32px));\n box-sizing: border-box;\n padding: 8px 0;\n margin: 0;\n border-radius: var(--md-sys-shape-corner-extra-small, 4px);\n background-color: var(--md-sys-color-surface-container, #f3edf7);\n color: var(--md-sys-color-on-surface, #1d1b20);\n box-shadow: var(--md-sys-elevation-level2, 0px 2px 6px 2px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30));\n overflow-y: auto;\n overflow-x: hidden;\n overscroll-behavior: contain;\n outline: none;\n user-select: none;\n -webkit-overflow-scrolling: touch;\n top: calc(100% + var(--md-split-button-menu-offset, 4px));\n right: 0;\n transform-origin: top right;\n }\n\n :host([menu-placement=\"bottom-start\"]) .menu-surface,\n :host([menu-placement=\"bottom\"]) .menu-surface {\n left: 0;\n right: auto;\n transform-origin: top left;\n }\n\n :host([menu-placement=\"top-end\"]) .menu-surface {\n top: auto;\n bottom: calc(100% + var(--md-split-button-menu-offset, 4px));\n right: 0;\n left: auto;\n transform-origin: bottom right;\n }\n\n :host([menu-placement=\"top-start\"]) .menu-surface,\n :host([menu-placement=\"top\"]) .menu-surface {\n top: auto;\n bottom: calc(100% + var(--md-split-button-menu-offset, 4px));\n left: 0;\n right: auto;\n transform-origin: bottom left;\n }\n\n :host([open]) .menu-surface {\n display: flex;\n flex-direction: column;\n animation: md-split-menu-fade-in 150ms cubic-bezier(0.2, 0, 0, 1) forwards;\n }\n\n @keyframes md-split-menu-fade-in {\n from {\n opacity: 0;\n transform: scale(0.92, 0.8);\n }\n to {\n opacity: 1;\n transform: scale(1, 1);\n }\n }\n\n .menu-surface::-webkit-scrollbar {\n width: 6px;\n }\n\n .menu-surface::-webkit-scrollbar-thumb {\n background-color: var(--md-sys-color-outline-variant, #cac4d0);\n border-radius: 3px;\n }\n`;\n","import { html, nothing } from 'lit';\nimport { customElement, property, queryAssignedElements, query } from 'lit/decorators.js';\nimport { MdBaseElement } from '../../internal/base-component.js';\nimport '../../internal/ripple/ripple.js';\nimport '../../internal/focus-ring/focus-ring.js';\nimport '../icon/icon.js';\nimport { splitButtonStyles } from './split-button.css.js';\nimport { MdMenuItem } from '../menu/menu-item.js';\n\nexport type SplitButtonVariant = 'filled' | 'elevated' | 'tonal' | 'outlined';\nexport type SplitButtonMenuPlacement = 'bottom-end' | 'bottom-start' | 'top-end' | 'top-start';\n\n/**\n * Material Design 3 Split Button component.\n * Pairs a primary action button with a connected trailing dropdown button that opens a submenu of related secondary actions.\n *\n * @element md-split-button\n *\n * @slot - Default slot for `md-menu-item` submenu choices.\n * @slot menu - Slotted submenu items or custom menu container.\n * @slot label - Primary action button text label.\n * @slot icon - Leading icon for the primary action button.\n * @slot trailing-icon - Dropdown indicator icon for the menu button.\n *\n * @fires action - Dispatched when the leading primary action button is clicked.\n * @fires trailing-click - Dispatched when the trailing menu button is clicked.\n * @fires toggle - Dispatched when the trailing menu trigger is toggled with the new open state.\n * @fires open - Dispatched when the submenu opens.\n * @fires close - Dispatched when the submenu closes.\n * @fires select - Dispatched when a submenu item is selected.\n */\n@customElement('md-split-button')\nexport class MdSplitButton extends MdBaseElement {\n static override styles = [MdBaseElement.styles, splitButtonStyles];\n\n @property({ type: String, reflect: true })\n variant: SplitButtonVariant = 'filled';\n\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n @property({ type: String })\n label = '';\n\n @property({ type: String })\n icon = '';\n\n @property({ type: String, attribute: 'trailing-icon' })\n trailingIcon = 'arrow_drop_down';\n\n @property({ type: Boolean, reflect: true })\n open = false;\n\n @property({ type: String })\n type: 'button' | 'submit' | 'reset' = 'button';\n\n @property({ type: String, attribute: 'action-aria-label' })\n actionAriaLabel = '';\n\n @property({ type: String, attribute: 'menu-aria-label' })\n menuAriaLabel = 'More options';\n\n @property({ type: String, attribute: 'menu-placement', reflect: true })\n menuPlacement: SplitButtonMenuPlacement = 'bottom-end';\n\n @property({ type: Boolean, attribute: 'stay-open-on-focusout' })\n stayOpenOnFocusout = false;\n\n @property({ type: Boolean, attribute: 'close-on-item-click' })\n closeOnItemClick = true;\n\n @query('.action-button')\n actionButton!: HTMLButtonElement;\n\n @query('.menu-button')\n menuButton!: HTMLButtonElement;\n\n @query('.menu-surface')\n private menuSurfaceElement?: HTMLElement;\n\n @queryAssignedElements({ slot: 'icon' })\n private assignedIcons!: HTMLElement[];\n\n private handleSlotChange(): void {\n const hasLeading = Boolean(this.icon || (this.assignedIcons && this.assignedIcons.length > 0));\n this.toggleAttribute('has-icon', hasLeading);\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n window.addEventListener('keydown', this.handleWindowKeyDown);\n document.addEventListener('pointerdown', this.handleDocumentClick);\n this.addEventListener('item-click', this.handleItemSelection as EventListener);\n this.addEventListener('menu-item-click', this.handleItemSelection as EventListener);\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n window.removeEventListener('keydown', this.handleWindowKeyDown);\n document.removeEventListener('pointerdown', this.handleDocumentClick);\n this.removeEventListener('item-click', this.handleItemSelection as EventListener);\n this.removeEventListener('menu-item-click', this.handleItemSelection as EventListener);\n }\n\n override firstUpdated() {\n this.handleSlotChange();\n }\n\n override updated(changedProperties: Map<string, unknown>): void {\n super.updated(changedProperties);\n\n if (changedProperties.has('open')) {\n if (this.open) {\n this.emitEvent('open');\n setTimeout(() => {\n this.focusFirstItem();\n }, 16);\n } else {\n this.emitEvent('close');\n }\n }\n }\n\n private handleDocumentClick = (event: MouseEvent | PointerEvent): void => {\n if (!this.open) return;\n const path = event.composedPath();\n if (path.includes(this)) return;\n this.close();\n };\n\n private handleWindowKeyDown = (event: KeyboardEvent): void => {\n if (!this.open) return;\n\n if (event.key === 'Escape') {\n event.preventDefault();\n event.stopPropagation();\n this.close();\n this.menuButton?.focus();\n }\n };\n\n private handleSurfaceKeyDown = (event: KeyboardEvent): void => {\n const items = this.getItems(true);\n if (items.length === 0) return;\n\n let activeEl: Element | null = null;\n try {\n activeEl = document.activeElement;\n } catch {\n activeEl = null;\n }\n\n const currentIndex = items.findIndex(\n (item) => item === activeEl || item.contains(activeEl)\n );\n\n switch (event.key) {\n case 'ArrowDown': {\n event.preventDefault();\n const nextIndex = currentIndex >= 0 && currentIndex < items.length - 1 ? currentIndex + 1 : 0;\n items[nextIndex]?.focus();\n break;\n }\n case 'ArrowUp': {\n event.preventDefault();\n const prevIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;\n items[prevIndex]?.focus();\n break;\n }\n case 'Home': {\n event.preventDefault();\n items[0]?.focus();\n break;\n }\n case 'End': {\n event.preventDefault();\n items[items.length - 1]?.focus();\n break;\n }\n case 'Tab': {\n if (!this.stayOpenOnFocusout) {\n this.close();\n }\n break;\n }\n }\n };\n\n private handleItemSelection = (event: CustomEvent): void => {\n const detail = event.detail;\n this.emitEvent('select', detail);\n\n if (!detail?.keepOpen && this.closeOnItemClick) {\n this.close();\n this.menuButton?.focus();\n }\n };\n\n private handleActionClick = (event: MouseEvent): void => {\n if (this.disabled) {\n event.preventDefault();\n event.stopImmediatePropagation();\n return;\n }\n\n if (this.type === 'submit' || this.type === 'reset') {\n const form = this.closest('form');\n if (form) {\n if (this.type === 'submit') {\n form.requestSubmit();\n } else {\n form.reset();\n }\n }\n }\n\n this.emitEvent('action', {\n target: this,\n open: this.open,\n });\n };\n\n private handleMenuClick = (event: MouseEvent): void => {\n event.stopPropagation();\n if (this.disabled) {\n event.preventDefault();\n event.stopImmediatePropagation();\n return;\n }\n\n this.open = !this.open;\n\n this.emitEvent('trailing-click', {\n target: this,\n open: this.open,\n });\n\n this.emitEvent('toggle', {\n target: this,\n open: this.open,\n });\n };\n\n private handleBackdropClick = (event: MouseEvent): void => {\n event.stopPropagation();\n this.close();\n };\n\n /**\n * Opens the submenu.\n */\n show(): void {\n if (!this.open) {\n this.open = true;\n }\n }\n\n /**\n * Closes the submenu.\n */\n close(): void {\n if (this.open) {\n this.open = false;\n }\n }\n\n /**\n * Toggles the submenu open/closed state.\n */\n toggle(): void {\n this.open = !this.open;\n }\n\n /**\n * Returns all menu items inside the split button submenu.\n * @param onlyEnabled - If true, filters out disabled items.\n */\n getItems(onlyEnabled = false): HTMLElement[] {\n const items = Array.from(\n this.querySelectorAll('md-menu-item, [role=\"menuitem\"], button.menu-item')\n ) as HTMLElement[];\n\n if (onlyEnabled) {\n return items.filter((item) => {\n const isDisabled = item.hasAttribute('disabled') || (item as any).disabled;\n return !isDisabled;\n });\n }\n return items;\n }\n\n /**\n * Focuses the first non-disabled menu item.\n */\n focusFirstItem(): void {\n const items = this.getItems(true);\n if (items.length > 0) {\n items[0]!.focus();\n } else if (this.menuSurfaceElement) {\n this.menuSurfaceElement.focus();\n }\n }\n\n /**\n * Focuses the last non-disabled menu item.\n */\n focusLastItem(): void {\n const items = this.getItems(true);\n if (items.length > 0) {\n items[items.length - 1]!.focus();\n }\n }\n\n /**\n * Focuses the menu item at the specified index.\n */\n focusItemAtIndex(index: number): void {\n const items = this.getItems(true);\n if (index >= 0 && index < items.length) {\n items[index]!.focus();\n }\n }\n\n override render() {\n return html`\n <div class=\"backdrop\" @click=${this.handleBackdropClick}></div>\n\n <div class=\"container\" role=\"group\">\n <button\n type=${this.type}\n class=\"action-button\"\n ?disabled=${this.disabled}\n aria-label=${this.actionAriaLabel || nothing}\n @click=${this.handleActionClick}\n >\n <md-ripple ?disabled=${this.disabled}></md-ripple>\n <md-focus-ring></md-focus-ring>\n <span class=\"content\">\n <slot name=\"icon\" @slotchange=${this.handleSlotChange}>\n ${this.icon ? html`<md-icon name=${this.icon}></md-icon>` : nothing}\n </slot>\n <slot name=\"label\">${this.label}</slot>\n </span>\n </button>\n\n <button\n type=\"button\"\n class=\"menu-button\"\n ?disabled=${this.disabled}\n aria-haspopup=\"menu\"\n aria-expanded=${this.open ? 'true' : 'false'}\n aria-label=${this.menuAriaLabel}\n @click=${this.handleMenuClick}\n >\n <md-ripple ?disabled=${this.disabled}></md-ripple>\n <md-focus-ring></md-focus-ring>\n <span class=\"icon-wrapper\">\n <slot name=\"trailing-icon\">\n <md-icon name=${this.trailingIcon || 'arrow_drop_down'}></md-icon>\n </slot>\n </span>\n </button>\n\n <!-- Submenu Surface -->\n <div\n class=\"menu-surface\"\n role=\"menu\"\n tabindex=\"-1\"\n aria-label=${this.menuAriaLabel}\n aria-hidden=${this.open ? 'false' : 'true'}\n @keydown=${this.handleSurfaceKeyDown}\n >\n <slot name=\"menu\"></slot>\n <slot></slot>\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'md-split-button': MdSplitButton;\n }\n}\n"],"mappings":";;;;;;AAEA,IAAa,IAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GC8BpB,IAAN,cAA4B,EAAc;AAAA;iBAIjB,KAA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"}
|
|
1
|
+
{"version":3,"file":"split-button-CLjVJe3I.js","names":[],"sources":["../../src/components/split-button/split-button.css.ts","../../src/components/split-button/split-button.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const splitButtonStyles = css`\n :host {\n display: inline-flex;\n vertical-align: middle;\n outline: none;\n -webkit-tap-highlight-color: transparent;\n }\n\n :host([disabled]) {\n pointer-events: none;\n }\n\n .container {\n display: inline-flex;\n align-items: stretch;\n gap: var(--md-split-button-gap, 2px);\n position: relative;\n }\n\n button {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n height: 40px;\n border: none;\n font-family: var(--md-sys-typescale-font-family, inherit);\n font-size: var(--md-sys-typescale-label-large-size, 14px);\n font-weight: 500;\n line-height: 20px;\n letter-spacing: 0.1px;\n text-decoration: none;\n text-align: center;\n cursor: pointer;\n user-select: none;\n outline: none;\n transition: box-shadow 200ms cubic-bezier(0.2, 0, 0, 1),\n background-color 200ms cubic-bezier(0.2, 0, 0, 1),\n color 200ms cubic-bezier(0.2, 0, 0, 1);\n overflow: hidden;\n }\n\n .action-button {\n min-width: 48px;\n padding: 0 16px 0 24px;\n border-radius: var(--md-sys-shape-corner-full, 9999px)\n var(--md-sys-shape-corner-extra-small, 4px)\n var(--md-sys-shape-corner-extra-small, 4px)\n var(--md-sys-shape-corner-full, 9999px);\n }\n\n :host([has-icon]) .action-button {\n padding-left: 16px;\n }\n\n .menu-button {\n width: 40px;\n min-width: 40px;\n padding: 0;\n border-radius: var(--md-sys-shape-corner-extra-small, 4px)\n var(--md-sys-shape-corner-full, 9999px)\n var(--md-sys-shape-corner-full, 9999px)\n var(--md-sys-shape-corner-extra-small, 4px);\n }\n\n .content {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n position: relative;\n z-index: 1;\n }\n\n .icon-wrapper {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n position: relative;\n z-index: 1;\n }\n\n /* --- Filled Variant (Default) --- */\n :host(:not([variant])) button,\n :host([variant=\"filled\"]) button {\n background-color: var(--md-sys-color-primary, #6750a4);\n color: var(--md-sys-color-on-primary, #ffffff);\n box-shadow: var(--md-sys-elevation-level0, none);\n }\n\n :host([variant=\"filled\"]:hover) button,\n :host(:not([variant]):hover) button {\n box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0, 0, 0, 0.15));\n }\n\n /* --- Elevated Variant --- */\n :host([variant=\"elevated\"]) button {\n background-color: var(--md-sys-color-surface-container-low, #f7f2fa);\n color: var(--md-sys-color-primary, #6750a4);\n box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0, 0, 0, 0.15));\n }\n\n :host([variant=\"elevated\"]:hover) button {\n box-shadow: var(--md-sys-elevation-level2, 0px 2px 6px 2px rgba(0, 0, 0, 0.15));\n }\n\n /* --- Tonal Variant --- */\n :host([variant=\"tonal\"]) button {\n background-color: var(--md-sys-color-secondary-container, #e8def8);\n color: var(--md-sys-color-on-secondary-container, #1d192b);\n box-shadow: var(--md-sys-elevation-level0, none);\n }\n\n :host([variant=\"tonal\"]:hover) button {\n box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0, 0, 0, 0.15));\n }\n\n /* --- Outlined Variant --- */\n :host([variant=\"outlined\"]) button {\n background-color: transparent;\n color: var(--md-sys-color-primary, #6750a4);\n border: 1px solid var(--md-sys-color-outline, #79747e);\n }\n\n /* --- Disabled State --- */\n :host([disabled]) button {\n cursor: not-allowed;\n box-shadow: none;\n }\n\n :host([disabled]:not([variant=\"outlined\"])) button {\n background-color: rgba(29, 27, 32, 0.12);\n color: rgba(29, 27, 32, 0.38);\n }\n\n :host([disabled][variant=\"outlined\"]) button {\n border-color: rgba(29, 27, 32, 0.12);\n color: rgba(29, 27, 32, 0.38);\n }\n\n /* --- Backdrop --- */\n .backdrop {\n display: none;\n position: fixed;\n inset: 0;\n z-index: 998;\n background-color: transparent;\n }\n\n :host([open]) .backdrop {\n display: block;\n }\n\n /* --- Submenu Surface --- */\n .menu-surface {\n display: none;\n position: absolute;\n z-index: 999;\n min-width: var(--md-menu-min-width, 140px);\n max-width: var(--md-menu-max-width, 280px);\n max-height: var(--md-menu-max-height, calc(100vh - 32px));\n box-sizing: border-box;\n padding: 8px 0;\n margin: 0;\n border-radius: var(--md-sys-shape-corner-extra-small, 4px);\n background-color: var(--md-sys-color-surface-container, #f3edf7);\n color: var(--md-sys-color-on-surface, #1d1b20);\n box-shadow: var(--md-sys-elevation-level2, 0px 2px 6px 2px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30));\n overflow-y: auto;\n overflow-x: hidden;\n overscroll-behavior: contain;\n outline: none;\n user-select: none;\n -webkit-overflow-scrolling: touch;\n top: calc(100% + var(--md-split-button-menu-offset, 4px));\n right: 0;\n transform-origin: top right;\n }\n\n :host([menu-placement=\"bottom-start\"]) .menu-surface,\n :host([menu-placement=\"bottom\"]) .menu-surface {\n left: 0;\n right: auto;\n transform-origin: top left;\n }\n\n :host([menu-placement=\"top-end\"]) .menu-surface {\n top: auto;\n bottom: calc(100% + var(--md-split-button-menu-offset, 4px));\n right: 0;\n left: auto;\n transform-origin: bottom right;\n }\n\n :host([menu-placement=\"top-start\"]) .menu-surface,\n :host([menu-placement=\"top\"]) .menu-surface {\n top: auto;\n bottom: calc(100% + var(--md-split-button-menu-offset, 4px));\n left: 0;\n right: auto;\n transform-origin: bottom left;\n }\n\n :host([open]) .menu-surface {\n display: flex;\n flex-direction: column;\n animation: md-split-menu-fade-in 150ms cubic-bezier(0.2, 0, 0, 1) forwards;\n }\n\n @keyframes md-split-menu-fade-in {\n from {\n opacity: 0;\n transform: scale(0.92, 0.8);\n }\n to {\n opacity: 1;\n transform: scale(1, 1);\n }\n }\n\n .menu-surface::-webkit-scrollbar {\n width: 6px;\n }\n\n .menu-surface::-webkit-scrollbar-thumb {\n background-color: var(--md-sys-color-outline-variant, #cac4d0);\n border-radius: 3px;\n }\n`;\n","import { html, nothing } from 'lit';\nimport { customElement, property, queryAssignedElements, query } from 'lit/decorators.js';\nimport { MdBaseElement } from '../../internal/base-component.js';\nimport '../../internal/ripple/ripple.js';\nimport '../../internal/focus-ring/focus-ring.js';\nimport '../icon/icon.js';\nimport { splitButtonStyles } from './split-button.css.js';\nimport { MdMenuItem } from '../menu/menu-item.js';\n\nexport type SplitButtonVariant = 'filled' | 'elevated' | 'tonal' | 'outlined';\nexport type SplitButtonMenuPlacement = 'bottom-end' | 'bottom-start' | 'top-end' | 'top-start';\n\n/**\n * Material Design 3 Split Button component.\n * Pairs a primary action button with a connected trailing dropdown button that opens a submenu of related secondary actions.\n *\n * @element md-split-button\n *\n * @slot - Default slot for `md-menu-item` submenu choices.\n * @slot menu - Slotted submenu items or custom menu container.\n * @slot label - Primary action button text label.\n * @slot icon - Leading icon for the primary action button.\n * @slot trailing-icon - Dropdown indicator icon for the menu button.\n *\n * @fires action - Dispatched when the leading primary action button is clicked.\n * @fires trailing-click - Dispatched when the trailing menu button is clicked.\n * @fires toggle - Dispatched when the trailing menu trigger is toggled with the new open state.\n * @fires open - Dispatched when the submenu opens.\n * @fires close - Dispatched when the submenu closes.\n * @fires select - Dispatched when a submenu item is selected.\n */\n@customElement('md-split-button')\nexport class MdSplitButton extends MdBaseElement {\n static override styles = [MdBaseElement.styles, splitButtonStyles];\n\n @property({ type: String, reflect: true })\n variant: SplitButtonVariant = 'filled';\n\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n @property({ type: String })\n label = '';\n\n @property({ type: String })\n icon = '';\n\n @property({ type: String, attribute: 'trailing-icon' })\n trailingIcon = 'arrow_drop_down';\n\n @property({ type: Boolean, reflect: true })\n open = false;\n\n @property({ type: String })\n type: 'button' | 'submit' | 'reset' = 'button';\n\n @property({ type: String, attribute: 'action-aria-label' })\n actionAriaLabel = '';\n\n @property({ type: String, attribute: 'menu-aria-label' })\n menuAriaLabel = 'More options';\n\n @property({ type: String, attribute: 'menu-placement', reflect: true })\n menuPlacement: SplitButtonMenuPlacement = 'bottom-end';\n\n @property({ type: Boolean, attribute: 'stay-open-on-focusout' })\n stayOpenOnFocusout = false;\n\n @property({ type: Boolean, attribute: 'close-on-item-click' })\n closeOnItemClick = true;\n\n @query('.action-button')\n actionButton!: HTMLButtonElement;\n\n @query('.menu-button')\n menuButton!: HTMLButtonElement;\n\n @query('.menu-surface')\n private menuSurfaceElement?: HTMLElement;\n\n @queryAssignedElements({ slot: 'icon' })\n private assignedIcons!: HTMLElement[];\n\n private handleSlotChange(): void {\n const hasLeading = Boolean(this.icon || (this.assignedIcons && this.assignedIcons.length > 0));\n this.toggleAttribute('has-icon', hasLeading);\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n window.addEventListener('keydown', this.handleWindowKeyDown);\n document.addEventListener('pointerdown', this.handleDocumentClick);\n this.addEventListener('item-click', this.handleItemSelection as EventListener);\n this.addEventListener('menu-item-click', this.handleItemSelection as EventListener);\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n window.removeEventListener('keydown', this.handleWindowKeyDown);\n document.removeEventListener('pointerdown', this.handleDocumentClick);\n this.removeEventListener('item-click', this.handleItemSelection as EventListener);\n this.removeEventListener('menu-item-click', this.handleItemSelection as EventListener);\n }\n\n override firstUpdated() {\n this.handleSlotChange();\n }\n\n override updated(changedProperties: Map<string, unknown>): void {\n super.updated(changedProperties);\n\n if (changedProperties.has('open')) {\n if (this.open) {\n this.emitEvent('open');\n setTimeout(() => {\n this.focusFirstItem();\n }, 16);\n } else {\n this.emitEvent('close');\n }\n }\n }\n\n private handleDocumentClick = (event: MouseEvent | PointerEvent): void => {\n if (!this.open) return;\n const path = event.composedPath();\n if (path.includes(this)) return;\n this.close();\n };\n\n private handleWindowKeyDown = (event: KeyboardEvent): void => {\n if (!this.open) return;\n\n if (event.key === 'Escape') {\n event.preventDefault();\n event.stopPropagation();\n this.close();\n this.menuButton?.focus();\n }\n };\n\n private handleSurfaceKeyDown = (event: KeyboardEvent): void => {\n const items = this.getItems(true);\n if (items.length === 0) return;\n\n let activeEl: Element | null = null;\n try {\n activeEl = document.activeElement;\n } catch {\n activeEl = null;\n }\n\n const currentIndex = items.findIndex(\n (item) => item === activeEl || item.contains(activeEl)\n );\n\n switch (event.key) {\n case 'ArrowDown': {\n event.preventDefault();\n const nextIndex = currentIndex >= 0 && currentIndex < items.length - 1 ? currentIndex + 1 : 0;\n items[nextIndex]?.focus();\n break;\n }\n case 'ArrowUp': {\n event.preventDefault();\n const prevIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;\n items[prevIndex]?.focus();\n break;\n }\n case 'Home': {\n event.preventDefault();\n items[0]?.focus();\n break;\n }\n case 'End': {\n event.preventDefault();\n items[items.length - 1]?.focus();\n break;\n }\n case 'Tab': {\n if (!this.stayOpenOnFocusout) {\n this.close();\n }\n break;\n }\n }\n };\n\n private handleItemSelection = (event: CustomEvent): void => {\n const detail = event.detail;\n this.emitEvent('select', detail);\n\n if (!detail?.keepOpen && this.closeOnItemClick) {\n this.close();\n this.menuButton?.focus();\n }\n };\n\n private handleActionClick = (event: MouseEvent): void => {\n if (this.disabled) {\n event.preventDefault();\n event.stopImmediatePropagation();\n return;\n }\n\n if (this.type === 'submit' || this.type === 'reset') {\n const form = this.closest('form');\n if (form) {\n if (this.type === 'submit') {\n form.requestSubmit();\n } else {\n form.reset();\n }\n }\n }\n\n this.emitEvent('action', {\n target: this,\n open: this.open,\n });\n };\n\n private handleMenuClick = (event: MouseEvent): void => {\n event.stopPropagation();\n if (this.disabled) {\n event.preventDefault();\n event.stopImmediatePropagation();\n return;\n }\n\n this.open = !this.open;\n\n this.emitEvent('trailing-click', {\n target: this,\n open: this.open,\n });\n\n this.emitEvent('toggle', {\n target: this,\n open: this.open,\n });\n };\n\n private handleBackdropClick = (event: MouseEvent): void => {\n event.stopPropagation();\n this.close();\n };\n\n /**\n * Opens the submenu.\n */\n show(): void {\n if (!this.open) {\n this.open = true;\n }\n }\n\n /**\n * Closes the submenu.\n */\n close(): void {\n if (this.open) {\n this.open = false;\n }\n }\n\n /**\n * Toggles the submenu open/closed state.\n */\n toggle(): void {\n this.open = !this.open;\n }\n\n /**\n * Returns all menu items inside the split button submenu.\n * @param onlyEnabled - If true, filters out disabled items.\n */\n getItems(onlyEnabled = false): HTMLElement[] {\n const items = Array.from(\n this.querySelectorAll('md-menu-item, [role=\"menuitem\"], button.menu-item')\n ) as HTMLElement[];\n\n if (onlyEnabled) {\n return items.filter((item) => {\n const isDisabled = item.hasAttribute('disabled') || (item as any).disabled;\n return !isDisabled;\n });\n }\n return items;\n }\n\n /**\n * Focuses the first non-disabled menu item.\n */\n focusFirstItem(): void {\n const items = this.getItems(true);\n if (items.length > 0) {\n items[0]!.focus();\n } else if (this.menuSurfaceElement) {\n this.menuSurfaceElement.focus();\n }\n }\n\n /**\n * Focuses the last non-disabled menu item.\n */\n focusLastItem(): void {\n const items = this.getItems(true);\n if (items.length > 0) {\n items[items.length - 1]!.focus();\n }\n }\n\n /**\n * Focuses the menu item at the specified index.\n */\n focusItemAtIndex(index: number): void {\n const items = this.getItems(true);\n if (index >= 0 && index < items.length) {\n items[index]!.focus();\n }\n }\n\n override render() {\n return html`\n <div class=\"backdrop\" @click=${this.handleBackdropClick}></div>\n\n <div class=\"container\" role=\"group\">\n <button\n type=${this.type}\n class=\"action-button\"\n ?disabled=${this.disabled}\n aria-label=${this.actionAriaLabel || nothing}\n @click=${this.handleActionClick}\n >\n <md-ripple ?disabled=${this.disabled}></md-ripple>\n <md-focus-ring></md-focus-ring>\n <span class=\"content\">\n <slot name=\"icon\" @slotchange=${this.handleSlotChange}>\n ${this.icon ? html`<md-icon name=${this.icon}></md-icon>` : nothing}\n </slot>\n <slot name=\"label\">${this.label}</slot>\n </span>\n </button>\n\n <button\n type=\"button\"\n class=\"menu-button\"\n ?disabled=${this.disabled}\n aria-haspopup=\"menu\"\n aria-expanded=${this.open ? 'true' : 'false'}\n aria-label=${this.menuAriaLabel}\n @click=${this.handleMenuClick}\n >\n <md-ripple ?disabled=${this.disabled}></md-ripple>\n <md-focus-ring></md-focus-ring>\n <span class=\"icon-wrapper\">\n <slot name=\"trailing-icon\">\n <md-icon name=${this.trailingIcon || 'arrow_drop_down'}></md-icon>\n </slot>\n </span>\n </button>\n\n <!-- Submenu Surface -->\n <div\n class=\"menu-surface\"\n role=\"menu\"\n tabindex=\"-1\"\n aria-label=${this.menuAriaLabel}\n aria-hidden=${this.open ? 'false' : 'true'}\n @keydown=${this.handleSurfaceKeyDown}\n >\n <slot name=\"menu\"></slot>\n <slot></slot>\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'md-split-button': MdSplitButton;\n }\n}\n"],"mappings":"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"}
|