@mhmo91/schmancy 0.10.29 → 0.10.30
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{mixins-BfazlmLD.js → SchmancyElement-BQ4DFufc.js} +166 -493
- package/dist/SchmancyElement-BQ4DFufc.js.map +1 -0
- package/dist/{mixins-CxGRIPYQ.cjs → SchmancyElement-DhSiMp6Y.cjs} +2 -242
- package/dist/SchmancyElement-DhSiMp6Y.cjs.map +1 -0
- package/dist/agent/{flow-3RrZM-e7.js.map → flow-CvG1fLW5.js.map} +1 -1
- package/dist/agent/schmancy.agent.js +8487 -2979
- package/dist/agent/schmancy.agent.js.map +1 -1
- package/dist/agent/{vendor-material-color-33Mj762T.js.map → vendor-material-color-DcL7ZPxx.js.map} +1 -1
- package/dist/animation-CCOIW4wJ.cjs.map +1 -1
- package/dist/animation-DCznELuT.js.map +1 -1
- package/dist/{area-D5wIy4Fn.js → area-BjpUWvzE.js} +7 -7
- package/dist/{area-D5wIy4Fn.js.map → area-BjpUWvzE.js.map} +1 -1
- package/dist/area-CgTzkxah.cjs +21 -0
- package/dist/{area-HXuLLQnN.cjs.map → area-CgTzkxah.cjs.map} +1 -1
- package/dist/area.cjs +1 -1
- package/dist/area.js +1 -1
- package/dist/{audio-CxO5a2HL.js → audio-CwBJntnB.js} +1 -1
- package/dist/{audio-CxO5a2HL.js.map → audio-CwBJntnB.js.map} +1 -1
- package/dist/{audio-Cvmemu84.cjs → audio-DISBFOaR.cjs} +1 -1
- package/dist/{audio-Cvmemu84.cjs.map → audio-DISBFOaR.cjs.map} +1 -1
- package/dist/audio.cjs +1 -1
- package/dist/audio.js +2 -2
- package/dist/{autocomplete-hj2AQyEF.cjs → autocomplete-DbCUOgWU.cjs} +2 -2
- package/dist/{autocomplete-hj2AQyEF.cjs.map → autocomplete-DbCUOgWU.cjs.map} +1 -1
- package/dist/{autocomplete-DCkkdDON.js → autocomplete-Dy708jem.js} +7 -7
- package/dist/{autocomplete-DCkkdDON.js.map → autocomplete-Dy708jem.js.map} +1 -1
- package/dist/autocomplete.cjs +1 -1
- package/dist/autocomplete.js +1 -1
- package/dist/avatar.cjs +3 -3
- package/dist/avatar.cjs.map +1 -1
- package/dist/avatar.js +5 -5
- package/dist/avatar.js.map +1 -1
- package/dist/badge.cjs +1 -1
- package/dist/badge.js +1 -1
- package/dist/{boat-B_5F_rFr.cjs → boat-BzZN_iwp.cjs} +11 -11
- package/dist/{boat-B_5F_rFr.cjs.map → boat-BzZN_iwp.cjs.map} +1 -1
- package/dist/{boat-BfgbRnhA.js → boat-Z4Lzl3ai.js} +8 -8
- package/dist/{boat-BfgbRnhA.js.map → boat-Z4Lzl3ai.js.map} +1 -1
- package/dist/boat.cjs +1 -1
- package/dist/boat.js +1 -1
- package/dist/breadcrumb.cjs +4 -4
- package/dist/breadcrumb.cjs.map +1 -1
- package/dist/breadcrumb.js +7 -7
- package/dist/breadcrumb.js.map +1 -1
- package/dist/{busy-D6tAS-kW.js → busy-CRFGPkcP.js} +7 -7
- package/dist/{busy-D6tAS-kW.js.map → busy-CRFGPkcP.js.map} +1 -1
- package/dist/{busy-zIt9bTZn.cjs → busy-Cu-47DfN.cjs} +8 -8
- package/dist/{busy-zIt9bTZn.cjs.map → busy-Cu-47DfN.cjs.map} +1 -1
- package/dist/busy.cjs +1 -1
- package/dist/busy.js +1 -1
- package/dist/{button-8oMffyiO.cjs → button-CN_JTjRd.cjs} +15 -15
- package/dist/{button-8oMffyiO.cjs.map → button-CN_JTjRd.cjs.map} +1 -1
- package/dist/{button-D7AejvfK.js → button-D_USF3tt.js} +10 -10
- package/dist/{button-D7AejvfK.js.map → button-D_USF3tt.js.map} +1 -1
- package/dist/button.cjs +19 -19
- package/dist/button.cjs.map +1 -1
- package/dist/button.js +9 -9
- package/dist/button.js.map +1 -1
- package/dist/{card-CTucMMgp.cjs → card-D4P5_gg9.cjs} +10 -10
- package/dist/{card-CTucMMgp.cjs.map → card-D4P5_gg9.cjs.map} +1 -1
- package/dist/{card-CUt9fm_4.js → card-DpN5KIYc.js} +15 -15
- package/dist/{card-CUt9fm_4.js.map → card-DpN5KIYc.js.map} +1 -1
- package/dist/card.cjs +1 -1
- package/dist/card.js +1 -1
- package/dist/{checkbox-DMmqe2OO.js → checkbox-C8ChypKf.js} +5 -5
- package/dist/{checkbox-DMmqe2OO.js.map → checkbox-C8ChypKf.js.map} +1 -1
- package/dist/{checkbox-DrKsfzC4.cjs → checkbox-hhXVXDV1.cjs} +3 -3
- package/dist/{checkbox-DrKsfzC4.cjs.map → checkbox-hhXVXDV1.cjs.map} +1 -1
- package/dist/checkbox.cjs +1 -1
- package/dist/checkbox.js +1 -1
- package/dist/{chips-DRGsqDMA.js → chips-B8R9q4yl.js} +27 -27
- package/dist/{chips-DRGsqDMA.js.map → chips-B8R9q4yl.js.map} +1 -1
- package/dist/{chips-B1yQgLyW.cjs → chips-BTLlO_Ow.cjs} +18 -18
- package/dist/{chips-B1yQgLyW.cjs.map → chips-BTLlO_Ow.cjs.map} +1 -1
- package/dist/chips.cjs +1 -1
- package/dist/chips.js +2 -2
- package/dist/connectivity.cjs +7 -7
- package/dist/connectivity.cjs.map +1 -1
- package/dist/connectivity.js +5 -5
- package/dist/connectivity.js.map +1 -1
- package/dist/content-drawer.cjs +1 -1
- package/dist/content-drawer.js +1 -1
- package/dist/cursor-glow-Ah7VXSj7.js.map +1 -1
- package/dist/cursor-glow-Bulq-38P.cjs.map +1 -1
- package/dist/{date-range-BeF0dW1W.cjs → date-range-9h6ZSkZb.cjs} +3 -3
- package/dist/{date-range-BeF0dW1W.cjs.map → date-range-9h6ZSkZb.cjs.map} +1 -1
- package/dist/{date-range-TDF-f0ss.js → date-range-CS96dWMh.js} +7 -7
- package/dist/{date-range-TDF-f0ss.js.map → date-range-CS96dWMh.js.map} +1 -1
- package/dist/date-range-inline-CAxnHA-l.cjs +43 -0
- package/dist/{date-range-inline-BnhQZTK0.cjs.map → date-range-inline-CAxnHA-l.cjs.map} +1 -1
- package/dist/{date-range-inline-JLsmcle2.js → date-range-inline-DCXdGeRv.js} +5 -5
- package/dist/{date-range-inline-JLsmcle2.js.map → date-range-inline-DCXdGeRv.js.map} +1 -1
- package/dist/date-range-inline.cjs +1 -1
- package/dist/date-range-inline.js +1 -1
- package/dist/date-range.cjs +1 -1
- package/dist/date-range.js +1 -1
- package/dist/delay.cjs +4 -4
- package/dist/delay.cjs.map +1 -1
- package/dist/delay.js +6 -6
- package/dist/delay.js.map +1 -1
- package/dist/{details-T75tUASO.cjs → details-BC0IObBd.cjs} +2 -2
- package/dist/{details-T75tUASO.cjs.map → details-BC0IObBd.cjs.map} +1 -1
- package/dist/{details-ChMhQpcY.js → details-Pgd0slKn.js} +11 -11
- package/dist/{details-ChMhQpcY.js.map → details-Pgd0slKn.js.map} +1 -1
- package/dist/details.cjs +1 -1
- package/dist/details.js +1 -1
- package/dist/{directives-DgPbz0lQ.js → directives-B-RT9R2u.js} +3 -3
- package/dist/{directives-DgPbz0lQ.js.map → directives-B-RT9R2u.js.map} +1 -1
- package/dist/{directives-BkSqmLBV.cjs → directives-CFWacnWU.cjs} +1 -1
- package/dist/{directives-BkSqmLBV.cjs.map → directives-CFWacnWU.cjs.map} +1 -1
- package/dist/directives.cjs +1 -1
- package/dist/directives.js +2 -2
- package/dist/discovery.service-CIa3Eeuk.cjs.map +1 -1
- package/dist/discovery.service-DZFxtRwW.js.map +1 -1
- package/dist/{divider-D69bhEUY.js → divider-BMzm0lOz.js} +5 -5
- package/dist/{divider-D69bhEUY.js.map → divider-BMzm0lOz.js.map} +1 -1
- package/dist/{divider-DopO0yKi.cjs → divider-D1OzaRAQ.cjs} +3 -3
- package/dist/{divider-DopO0yKi.cjs.map → divider-D1OzaRAQ.cjs.map} +1 -1
- package/dist/divider.cjs +1 -1
- package/dist/divider.js +1 -1
- package/dist/dropdown.cjs +4 -4
- package/dist/dropdown.cjs.map +1 -1
- package/dist/dropdown.js +8 -8
- package/dist/dropdown.js.map +1 -1
- package/dist/{expand-KLSx5dea.js → expand-C0Uqxfv0.js} +10 -10
- package/dist/{expand-KLSx5dea.js.map → expand-C0Uqxfv0.js.map} +1 -1
- package/dist/{expand-C386rVT8.cjs → expand-CiQkzth9.cjs} +3 -3
- package/dist/{expand-C386rVT8.cjs.map → expand-CiQkzth9.cjs.map} +1 -1
- package/dist/expand.cjs +1 -1
- package/dist/expand.js +1 -1
- package/dist/float-Bu_IfKRd.cjs +1 -0
- package/dist/{float-DyaPI0qO.cjs.map → float-Bu_IfKRd.cjs.map} +1 -1
- package/dist/{float-BoPLNysg.js → float-DwBMXhek.js} +2 -2
- package/dist/{float-BoPLNysg.js.map → float-DwBMXhek.js.map} +1 -1
- package/dist/float.cjs +1 -1
- package/dist/float.js +1 -1
- package/dist/{form-CYeMWHmy.js → form-B9Je2W_m.js} +7 -7
- package/dist/{form-CYeMWHmy.js.map → form-B9Je2W_m.js.map} +1 -1
- package/dist/{form-CGIJlQyP.cjs → form-BnbAVZyf.cjs} +3 -3
- package/dist/{form-CGIJlQyP.cjs.map → form-BnbAVZyf.cjs.map} +1 -1
- package/dist/form.cjs +6 -6
- package/dist/form.cjs.map +1 -1
- package/dist/form.js +12 -12
- package/dist/form.js.map +1 -1
- package/dist/gravity-6pL6CfIr.cjs.map +1 -1
- package/dist/gravity-sVK3zGBF.js.map +1 -1
- package/dist/handover/agent-runtime-followups.md +1 -1
- package/dist/handover/agent-runtime-v1.md +3 -3
- package/dist/hashContent-BqU6v1Xr.js.map +1 -1
- package/dist/hashContent-iRZJJWtE.cjs.map +1 -1
- package/dist/{icons-CJUA5bfI.cjs → icons-BfWQl5k5.cjs} +6 -6
- package/dist/{icons-CJUA5bfI.cjs.map → icons-BfWQl5k5.cjs.map} +1 -1
- package/dist/{icons-BUQNMhjw.js → icons-DJHPXKgR.js} +4 -4
- package/dist/{icons-BUQNMhjw.js.map → icons-DJHPXKgR.js.map} +1 -1
- package/dist/icons.cjs +1 -1
- package/dist/icons.js +1 -1
- package/dist/{iframe-CbL0jCo1.js → iframe-DLz8ll0s.js} +5 -5
- package/dist/{iframe-CbL0jCo1.js.map → iframe-DLz8ll0s.js.map} +1 -1
- package/dist/{iframe-pn7MIeH8.cjs → iframe-UtczJypj.cjs} +5 -5
- package/dist/{iframe-pn7MIeH8.cjs.map → iframe-UtczJypj.cjs.map} +1 -1
- package/dist/iframe.cjs +1 -1
- package/dist/iframe.js +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.js +69 -70
- package/dist/{input-C1h5lLiJ.js → input-AQbBEj2f.js} +15 -15
- package/dist/{input-C1h5lLiJ.js.map → input-AQbBEj2f.js.map} +1 -1
- package/dist/{input-Cmc0IoUP.cjs → input-Pp6A1m3s.cjs} +2 -2
- package/dist/{input-Cmc0IoUP.cjs.map → input-Pp6A1m3s.cjs.map} +1 -1
- package/dist/{input-chip-B0X_CodJ.cjs → input-chip-B5vYNuEm.cjs} +9 -9
- package/dist/{input-chip-B0X_CodJ.cjs.map → input-chip-B5vYNuEm.cjs.map} +1 -1
- package/dist/{input-chip-DqAR4nPD.js → input-chip-Bbs_gXOB.js} +10 -10
- package/dist/{input-chip-DqAR4nPD.js.map → input-chip-Bbs_gXOB.js.map} +1 -1
- package/dist/input.cjs +1 -1
- package/dist/input.js +1 -1
- package/dist/json.cjs +3 -3
- package/dist/json.cjs.map +1 -1
- package/dist/json.js +5 -5
- package/dist/json.js.map +1 -1
- package/dist/kbd.cjs +2 -2
- package/dist/kbd.cjs.map +1 -1
- package/dist/kbd.js +5 -5
- package/dist/kbd.js.map +1 -1
- package/dist/{layout-DSAjo92m.js → layout-9K1zxhZn.js} +1 -1
- package/dist/{layout-DSAjo92m.js.map → layout-9K1zxhZn.js.map} +1 -1
- package/dist/{layout-eXb9wjDh.cjs → layout-B0dct--7.cjs} +1 -1
- package/dist/{layout-eXb9wjDh.cjs.map → layout-B0dct--7.cjs.map} +1 -1
- package/dist/layout.cjs +2 -2
- package/dist/layout.cjs.map +1 -1
- package/dist/layout.js +7 -7
- package/dist/layout.js.map +1 -1
- package/dist/lazy-CayEFyC3.cjs.map +1 -1
- package/dist/lazy-D-bO2r4m.js.map +1 -1
- package/dist/{lightbox-BiNK_plj.cjs → lightbox-D_EizrG3.cjs} +21 -21
- package/dist/{lightbox-BiNK_plj.cjs.map → lightbox-D_EizrG3.cjs.map} +1 -1
- package/dist/{lightbox-C3zomJ-r.js → lightbox-DmJTs2My.js} +9 -9
- package/dist/{lightbox-C3zomJ-r.js.map → lightbox-DmJTs2My.js.map} +1 -1
- package/dist/lightbox.cjs +1 -1
- package/dist/lightbox.js +1 -1
- package/dist/{list-CbM9w9OM.cjs → list-BSn8czyO.cjs} +5 -5
- package/dist/{list-CbM9w9OM.cjs.map → list-BSn8czyO.cjs.map} +1 -1
- package/dist/{list-Bbmp1uMa.js → list-DjSSRZxF.js} +12 -12
- package/dist/{list-Bbmp1uMa.js.map → list-DjSSRZxF.js.map} +1 -1
- package/dist/list.cjs +1 -1
- package/dist/list.js +1 -1
- package/dist/magnetic-B2VKNfDu.js.map +1 -1
- package/dist/magnetic-MQ3HMHJi.cjs.map +1 -1
- package/dist/{menu-Ph2hboJd.js → menu-CCVEde6u.js} +7 -7
- package/dist/{menu-Ph2hboJd.js.map → menu-CCVEde6u.js.map} +1 -1
- package/dist/menu-DTNnq7j_.cjs +23 -0
- package/dist/{menu-Bfay8vF8.cjs.map → menu-DTNnq7j_.cjs.map} +1 -1
- package/dist/menu.cjs +1 -1
- package/dist/menu.js +1 -1
- package/dist/mixins-BYfSDvbP.js +412 -0
- package/dist/mixins-BYfSDvbP.js.map +1 -0
- package/dist/mixins-YQI9JogS.cjs +245 -0
- package/dist/mixins-YQI9JogS.cjs.map +1 -0
- package/dist/mixins.cjs +1 -1
- package/dist/mixins.js +3 -2
- package/dist/nav-drawer.cjs +1 -1
- package/dist/nav-drawer.js +1 -1
- package/dist/navigation-bar.cjs +1 -1
- package/dist/navigation-bar.js +1 -1
- package/dist/navigation-rail.cjs +10 -10
- package/dist/navigation-rail.cjs.map +1 -1
- package/dist/navigation-rail.js +15 -15
- package/dist/navigation-rail.js.map +1 -1
- package/dist/{notification-Du5FRbYp.js → notification-BNEuu3Q2.js} +7 -7
- package/dist/{notification-Du5FRbYp.js.map → notification-BNEuu3Q2.js.map} +1 -1
- package/dist/notification-RhaYvA1I.cjs +24 -0
- package/dist/{notification-DT_cAi8U.cjs.map → notification-RhaYvA1I.cjs.map} +1 -1
- package/dist/notification.cjs +1 -1
- package/dist/notification.js +1 -1
- package/dist/{option-B7y4FhOn.js → option-BLMYRy5C.js} +6 -6
- package/dist/{option-B7y4FhOn.js.map → option-BLMYRy5C.js.map} +1 -1
- package/dist/{option-Cl5Q987d.cjs → option-Dk7UFFlr.cjs} +5 -5
- package/dist/{option-Cl5Q987d.cjs.map → option-Dk7UFFlr.cjs.map} +1 -1
- package/dist/option.cjs +1 -1
- package/dist/option.js +1 -1
- package/dist/overlay-BbntqsVm.cjs +43 -0
- package/dist/{overlay-CRwfhbyi.cjs.map → overlay-BbntqsVm.cjs.map} +1 -1
- package/dist/{overlay-B79m-KXf.js → overlay-CujzmLxg.js} +11 -11
- package/dist/{overlay-B79m-KXf.js.map → overlay-CujzmLxg.js.map} +1 -1
- package/dist/overlay-stack-Bdr9lOqi.cjs.map +1 -1
- package/dist/overlay-stack-D2rgxQLh.js.map +1 -1
- package/dist/overlay.cjs +1 -1
- package/dist/overlay.confirm-body-CMge0LP5.cjs +70 -0
- package/dist/{overlay.confirm-body-CxOomuN6.cjs.map → overlay.confirm-body-CMge0LP5.cjs.map} +1 -1
- package/dist/{overlay.confirm-body-CW_spktW.js → overlay.confirm-body-CRk4MvKh.js} +13 -13
- package/dist/{overlay.confirm-body-CW_spktW.js.map → overlay.confirm-body-CRk4MvKh.js.map} +1 -1
- package/dist/overlay.js +3 -3
- package/dist/{overlay.service-DsBb_UwG.js → overlay.service-DnT4SBlJ.js} +2 -2
- package/dist/{overlay.service-DsBb_UwG.js.map → overlay.service-DnT4SBlJ.js.map} +1 -1
- package/dist/{overlay.service-fb3KaMiP.cjs → overlay.service-Dq5XtSEL.cjs} +1 -1
- package/dist/{overlay.service-fb3KaMiP.cjs.map → overlay.service-Dq5XtSEL.cjs.map} +1 -1
- package/dist/{progress-fnGrmHpm.cjs → progress-Bqd4DdOQ.cjs} +7 -7
- package/dist/{progress-fnGrmHpm.cjs.map → progress-Bqd4DdOQ.cjs.map} +1 -1
- package/dist/{progress-CMwUEDB1.js → progress-Cu_wh6Sl.js} +10 -10
- package/dist/{progress-CMwUEDB1.js.map → progress-Cu_wh6Sl.js.map} +1 -1
- package/dist/progress.cjs +1 -1
- package/dist/progress.js +1 -1
- package/dist/radio-group-C8rUbYL6.cjs +19 -0
- package/dist/{radio-group-DQRJGMgS.cjs.map → radio-group-C8rUbYL6.cjs.map} +1 -1
- package/dist/{radio-group-Zb0fies1.js → radio-group-Duzgx17I.js} +7 -7
- package/dist/{radio-group-Zb0fies1.js.map → radio-group-Duzgx17I.js.map} +1 -1
- package/dist/radio-group.cjs +1 -1
- package/dist/radio-group.js +1 -1
- package/dist/range.cjs +2 -2
- package/dist/range.cjs.map +1 -1
- package/dist/range.js +5 -5
- package/dist/range.js.map +1 -1
- package/dist/reduced-motion-D-L12p7G.js.map +1 -1
- package/dist/reduced-motion-Ds-HjMzn.cjs.map +1 -1
- package/dist/rxjs-utils-Csnks202.cjs.map +1 -1
- package/dist/rxjs-utils-d-ivVN84.js.map +1 -1
- package/dist/search-DPKoC-dT.cjs.map +1 -1
- package/dist/search-MvIBA93K.js.map +1 -1
- package/dist/{select-BJJKYtEi.js → select-CzCv1f1c.js} +6 -6
- package/dist/{select-BJJKYtEi.js.map → select-CzCv1f1c.js.map} +1 -1
- package/dist/{select-C-acFFtV.cjs → select-DdqEsfnG.cjs} +2 -2
- package/dist/{select-C-acFFtV.cjs.map → select-DdqEsfnG.cjs.map} +1 -1
- package/dist/select.cjs +1 -1
- package/dist/select.js +1 -1
- package/dist/skeleton.cjs +2 -2
- package/dist/skeleton.cjs.map +1 -1
- package/dist/skeleton.js +5 -5
- package/dist/skeleton.js.map +1 -1
- package/dist/skills/form.md +34 -0
- package/dist/skills/schmancy/form.md +34 -0
- package/dist/slider.cjs +7 -7
- package/dist/slider.cjs.map +1 -1
- package/dist/slider.js +6 -6
- package/dist/slider.js.map +1 -1
- package/dist/{sound.service-v_jqCkos.js → sound.service-BOWTBG16.js} +1 -1
- package/dist/{sound.service-v_jqCkos.js.map → sound.service-BOWTBG16.js.map} +1 -1
- package/dist/{sound.service-DVJZb9ox.cjs → sound.service-BwIzAFQx.cjs} +1 -1
- package/dist/{sound.service-DVJZb9ox.cjs.map → sound.service-BwIzAFQx.cjs.map} +1 -1
- package/dist/{splash-screen-CCDpzGg_.js → splash-screen-Dj-zuGuB.js} +6 -6
- package/dist/{splash-screen-CCDpzGg_.js.map → splash-screen-Dj-zuGuB.js.map} +1 -1
- package/dist/splash-screen-_KhxgneW.cjs +41 -0
- package/dist/{splash-screen-CGnhHDB_.cjs.map → splash-screen-_KhxgneW.cjs.map} +1 -1
- package/dist/splash-screen.cjs +1 -1
- package/dist/splash-screen.js +1 -1
- package/dist/src-BSjgxN07.cjs +263 -0
- package/dist/{src-C0MzzF_S.cjs.map → src-BSjgxN07.cjs.map} +1 -1
- package/dist/{src-CUcUMK0M.js → src-Curgs4Yp.js} +82 -82
- package/dist/{src-CUcUMK0M.js.map → src-Curgs4Yp.js.map} +1 -1
- package/dist/state-BthYuA3T.cjs +1 -0
- package/dist/state-BthYuA3T.cjs.map +1 -0
- package/dist/{state-CHbIt2Dw.js → state-E0bVrZ7q.js} +293 -279
- package/dist/state-E0bVrZ7q.js.map +1 -0
- package/dist/state.cjs +1 -1
- package/dist/state.js +3 -3
- package/dist/steps.cjs +10 -10
- package/dist/steps.cjs.map +1 -1
- package/dist/steps.js +9 -9
- package/dist/steps.js.map +1 -1
- package/dist/{surface-CLcc26d2.js → surface-C2TIedTq.js} +4 -4
- package/dist/{surface-CLcc26d2.js.map → surface-C2TIedTq.js.map} +1 -1
- package/dist/surface-D-GqzyLn.cjs +7 -0
- package/dist/{surface-DPzlMMYX.cjs.map → surface-D-GqzyLn.cjs.map} +1 -1
- package/dist/surface.cjs +1 -1
- package/dist/surface.js +1 -1
- package/dist/switch.cjs +2 -2
- package/dist/switch.cjs.map +1 -1
- package/dist/switch.js +6 -6
- package/dist/switch.js.map +1 -1
- package/dist/table.cjs +11 -11
- package/dist/table.cjs.map +1 -1
- package/dist/table.js +10 -10
- package/dist/table.js.map +1 -1
- package/dist/{tabs-BvEal6oS.js → tabs-CLRVe23a.js} +11 -11
- package/dist/{tabs-BvEal6oS.js.map → tabs-CLRVe23a.js.map} +1 -1
- package/dist/{tabs-DEKOKYrn.cjs → tabs-C_493iod.cjs} +4 -4
- package/dist/{tabs-DEKOKYrn.cjs.map → tabs-C_493iod.cjs.map} +1 -1
- package/dist/tabs.cjs +1 -1
- package/dist/tabs.js +1 -1
- package/dist/teleport.cjs +1 -1
- package/dist/teleport.js +1 -1
- package/dist/{textarea-CH62STRD.js → textarea-BWEyOtPy.js} +9 -9
- package/dist/{textarea-CH62STRD.js.map → textarea-BWEyOtPy.js.map} +1 -1
- package/dist/textarea-CICgd2oP.cjs +43 -0
- package/dist/{textarea-Cjlsy3y9.cjs.map → textarea-CICgd2oP.cjs.map} +1 -1
- package/dist/textarea.cjs +1 -1
- package/dist/textarea.js +1 -1
- package/dist/{theme-z82BIRuw.js → theme-Bfg_H2AF.js} +12 -12
- package/dist/{theme-z82BIRuw.js.map → theme-Bfg_H2AF.js.map} +1 -1
- package/dist/theme-D7zOJiyg.cjs +181 -0
- package/dist/{theme-CG3Gpne7.cjs.map → theme-D7zOJiyg.cjs.map} +1 -1
- package/dist/{theme-button-oWeOoeSw.js → theme-button-C53GdQER.js} +4 -4
- package/dist/{theme-button-oWeOoeSw.js.map → theme-button-C53GdQER.js.map} +1 -1
- package/dist/theme-button-DgeBcqFm.cjs +8 -0
- package/dist/{theme-button-CEc_Kl54.cjs.map → theme-button-DgeBcqFm.cjs.map} +1 -1
- package/dist/theme-button.cjs +1 -1
- package/dist/theme-button.js +1 -1
- package/dist/theme.cjs +1 -1
- package/dist/theme.interface-CSt7JUBD.cjs.map +1 -1
- package/dist/theme.interface-odQEpZZH.js.map +1 -1
- package/dist/theme.js +3 -3
- package/dist/{theme.service-Bh08uOSJ.js → theme.service-BqDuioYc.js} +1 -1
- package/dist/{theme.service-Bh08uOSJ.js.map → theme.service-BqDuioYc.js.map} +1 -1
- package/dist/{theme.service-Y-e8b331.cjs → theme.service-C3PoISGd.cjs} +1 -1
- package/dist/{theme.service-Y-e8b331.cjs.map → theme.service-C3PoISGd.cjs.map} +1 -1
- package/dist/tooltip.cjs.map +1 -1
- package/dist/tooltip.js.map +1 -1
- package/dist/tree.cjs +3 -3
- package/dist/tree.cjs.map +1 -1
- package/dist/tree.js +4 -4
- package/dist/tree.js.map +1 -1
- package/dist/types.cjs.map +1 -1
- package/dist/types.js.map +1 -1
- package/dist/typewriter.cjs.map +1 -1
- package/dist/typewriter.js.map +1 -1
- package/dist/{typography-CjAvaB88.cjs → typography-B19fJ5YT.cjs} +4 -4
- package/dist/{typography-CjAvaB88.cjs.map → typography-B19fJ5YT.cjs.map} +1 -1
- package/dist/{typography-DP82e3GJ.js → typography-CzbQv-X0.js} +10 -10
- package/dist/{typography-DP82e3GJ.js.map → typography-CzbQv-X0.js.map} +1 -1
- package/dist/typography.cjs +1 -1
- package/dist/typography.js +1 -1
- package/dist/utils-DTa3QHxk.cjs.map +1 -1
- package/dist/utils-H8wNknWC.js.map +1 -1
- package/dist/visually-hidden.cjs +2 -2
- package/dist/visually-hidden.cjs.map +1 -1
- package/dist/visually-hidden.js +4 -4
- package/dist/visually-hidden.js.map +1 -1
- package/dist/window-DXB53PuA.cjs +59 -0
- package/dist/{window-aVXgfw__.cjs.map → window-DXB53PuA.cjs.map} +1 -1
- package/dist/{window-BkPXY-8m.js → window-DpctMXiy.js} +9 -9
- package/dist/{window-BkPXY-8m.js.map → window-DpctMXiy.js.map} +1 -1
- package/dist/window.cjs +1 -1
- package/dist/window.js +1 -1
- package/package.json +1 -1
- package/skills/schmancy/form.md +34 -0
- package/src/state/active-host.ts +50 -1
- package/src/state/index.ts +50 -11
- package/src/state/schmancy-context.ts +97 -88
- package/src/surface/surface.styles.ts +14 -10
- package/types/src/state/active-host.d.ts +3 -0
- package/types/src/state/index.d.ts +16 -2
- package/types/src/state/schmancy-context.d.ts +2 -2
- package/dist/active-host-BP0zy_Y9.js +0 -63
- package/dist/active-host-BP0zy_Y9.js.map +0 -1
- package/dist/active-host-jH3iloCR.cjs +0 -1
- package/dist/active-host-jH3iloCR.cjs.map +0 -1
- package/dist/agent/overlay.confirm-body-BFYWMa45.js +0 -5518
- package/dist/agent/overlay.confirm-body-BFYWMa45.js.map +0 -1
- package/dist/area-HXuLLQnN.cjs +0 -21
- package/dist/date-range-inline-BnhQZTK0.cjs +0 -43
- package/dist/float-DyaPI0qO.cjs +0 -1
- package/dist/menu-Bfay8vF8.cjs +0 -23
- package/dist/mixins-BfazlmLD.js.map +0 -1
- package/dist/mixins-CxGRIPYQ.cjs.map +0 -1
- package/dist/notification-DT_cAi8U.cjs +0 -24
- package/dist/overlay-CRwfhbyi.cjs +0 -43
- package/dist/overlay.confirm-body-CxOomuN6.cjs +0 -70
- package/dist/radio-group-DQRJGMgS.cjs +0 -19
- package/dist/splash-screen-CGnhHDB_.cjs +0 -41
- package/dist/src-C0MzzF_S.cjs +0 -263
- package/dist/state-CHbIt2Dw.js.map +0 -1
- package/dist/state-DcGj-pJJ.cjs +0 -1
- package/dist/state-DcGj-pJJ.cjs.map +0 -1
- package/dist/surface-DPzlMMYX.cjs +0 -7
- package/dist/textarea-Cjlsy3y9.cjs +0 -43
- package/dist/theme-CG3Gpne7.cjs +0 -181
- package/dist/theme-button-CEc_Kl54.cjs +0 -8
- package/dist/window-aVXgfw__.cjs +0 -59
- /package/dist/agent/{flow-3RrZM-e7.js → flow-CvG1fLW5.js} +0 -0
- /package/dist/agent/{vendor-material-color-33Mj762T.js → vendor-material-color-DcL7ZPxx.js} +0 -0
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
require(`./chunk-CncqDLb2.cjs`);const e=require(`./
|
|
1
|
+
require(`./chunk-CncqDLb2.cjs`);const e=require(`./SchmancyElement-DhSiMp6Y.cjs`);require(`./mixins-YQI9JogS.cjs`);let t=require(`rxjs`),n=require(`rxjs/operators`),r=require(`lit/directives/class-map.js`),i=require(`lit/decorators.js`),a=require(`lit`);var o=class extends e.t{static{this.styles=[a.css`
|
|
2
2
|
:host {
|
|
3
3
|
display: inline-block;
|
|
4
4
|
outline: none;
|
|
@@ -78,9 +78,9 @@ require(`./chunk-CncqDLb2.cjs`);const e=require(`./mixins-CxGRIPYQ.cjs`),t=requi
|
|
|
78
78
|
:host(:not([disabled])) .chip-container:active .state-layer {
|
|
79
79
|
opacity: 0.1;
|
|
80
80
|
}
|
|
81
|
-
`]}constructor(){super(),this.value=``,this.icon=``,this.avatar=``,this.removable=!0,this.disabled=!1,this.elevated=!1,this.chipHover$=new
|
|
81
|
+
`]}constructor(){super(),this.value=``,this.icon=``,this.avatar=``,this.removable=!0,this.disabled=!1,this.elevated=!1,this.chipHover$=new t.BehaviorSubject(!1),this.removeHover$=new t.BehaviorSubject(!1),this.focused$=new t.BehaviorSubject(!1),this.pressed$=new t.BehaviorSubject(!1),this.uiState={chipHover:!1,removeHover:!1,focused:!1,pressed:!1},this.ripples=[],this.nextRippleId=0,this.handleChipClick=e=>{if(this.disabled)return;let t=this.shadowRoot?.querySelector(`.chip-container`);if(t){let n=t.getBoundingClientRect(),r=e.clientX-n.left,i=e.clientY-n.top,a=this.nextRippleId++;this.ripples=[...this.ripples,{x:r,y:i,id:a}],setTimeout(()=>{this.ripples=this.ripples.filter(e=>e.id!==a)},600)}this.dispatchEvent(new CustomEvent(`click`,{detail:{value:this.value},bubbles:!0,composed:!0}))},this.handleRemove=e=>{this.disabled||(e.stopPropagation(),this.dispatchEvent(new CustomEvent(`remove`,{detail:{value:this.value},bubbles:!0,composed:!0})))},this.handleKeyDown=e=>{if(!this.disabled)if(e.key!==`Delete`&&e.key!==`Backspace`||!this.removable){if(e.key===`Enter`){e.preventDefault();let t=new MouseEvent(`click`,{bubbles:!0,cancelable:!0,clientX:0,clientY:0});this.handleChipClick(t)}}else e.preventDefault(),this.handleRemove(e)},this.handleFocus=()=>{this.focused$.next(!0)},this.handleBlur=()=>{this.focused$.next(!1)};try{this.internals=this.attachInternals()}catch{this.internals=void 0}}static{this.shadowRootOptions={...a.LitElement.shadowRootOptions,delegatesFocus:!0}}static{this.formAssociated=!0}get form(){return this.internals?.form}updated(e){super.updated?.(e),e.has(`value`)&&this.internals?.setFormValue(this.value||null)}connectedCallback(){super.connectedCallback(),(0,t.combineLatest)([this.chipHover$,this.removeHover$,this.focused$,this.pressed$]).pipe((0,n.map)(([e,t,n,r])=>({chipHover:e,removeHover:t,focused:n,pressed:r})),(0,n.tap)(e=>{this.uiState=e}),(0,n.takeUntil)(this.disconnecting)).subscribe()}render(){let e=this.avatar||this.icon,t={"chip-container":!0,"inline-flex":!0,"items-center":!0,"gap-2":!0,"h-8":!0,"min-h-[32px]":!0,"rounded-full":!0,"cursor-default":!0,"transition-all":!0,"duration-200":!0,"select-none":!0,"text-sm":!0,"font-medium":!0,relative:!0,"overflow-hidden":!0,"pl-2":e,"pl-4":!e,"pr-2":this.removable,"pr-4":!this.removable,"bg-surface-containerLow":!0,"text-surface-onVariant":!0,"focus-visible:outline":!this.disabled,"focus-visible:outline-2":!this.disabled,"focus-visible:outline-primary":!this.disabled,"focus-visible:outline-offset-2":!this.disabled,"opacity-38":this.disabled,"cursor-not-allowed":this.disabled},n={"size-[18px]":!0,flex:!0,"items-center":!0,"justify-center":!0,"rounded-full":!0,"transition-all":!0,"duration-200":!0,"cursor-pointer":!this.disabled,"-mr-1":!0,"hover:bg-surface-containerHighest":!this.disabled,"opacity-50":this.disabled};return a.html`
|
|
82
82
|
<div
|
|
83
|
-
class=${(0,
|
|
83
|
+
class=${(0,r.classMap)(t)}
|
|
84
84
|
@click=${this.handleChipClick}
|
|
85
85
|
@keydown=${this.handleKeyDown}
|
|
86
86
|
@mouseenter=${()=>this.chipHover$.next(!0)}
|
|
@@ -95,7 +95,7 @@ require(`./chunk-CncqDLb2.cjs`);const e=require(`./mixins-CxGRIPYQ.cjs`),t=requi
|
|
|
95
95
|
aria-label=${this.value}
|
|
96
96
|
>
|
|
97
97
|
<!-- Avatar image (if provided) -->
|
|
98
|
-
${this.avatar?
|
|
98
|
+
${this.avatar?a.html`
|
|
99
99
|
<img
|
|
100
100
|
src=${this.avatar}
|
|
101
101
|
alt=""
|
|
@@ -104,7 +104,7 @@ require(`./chunk-CncqDLb2.cjs`);const e=require(`./mixins-CxGRIPYQ.cjs`),t=requi
|
|
|
104
104
|
`:``}
|
|
105
105
|
|
|
106
106
|
<!-- Icon (if provided and no avatar) -->
|
|
107
|
-
${this.icon&&!this.avatar?
|
|
107
|
+
${this.icon&&!this.avatar?a.html`
|
|
108
108
|
<span class="material-symbols-outlined text-[18px] shrink-0">
|
|
109
109
|
${this.icon}
|
|
110
110
|
</span>
|
|
@@ -116,9 +116,9 @@ require(`./chunk-CncqDLb2.cjs`);const e=require(`./mixins-CxGRIPYQ.cjs`),t=requi
|
|
|
116
116
|
</span>
|
|
117
117
|
|
|
118
118
|
<!-- Remove button (shown by default for input chips) -->
|
|
119
|
-
${this.removable?
|
|
119
|
+
${this.removable?a.html`
|
|
120
120
|
<button
|
|
121
|
-
class=${(0,
|
|
121
|
+
class=${(0,r.classMap)(n)}
|
|
122
122
|
@click=${this.handleRemove}
|
|
123
123
|
@mouseenter=${()=>this.removeHover$.next(!0)}
|
|
124
124
|
@mouseleave=${()=>this.removeHover$.next(!1)}
|
|
@@ -133,7 +133,7 @@ require(`./chunk-CncqDLb2.cjs`);const e=require(`./mixins-CxGRIPYQ.cjs`),t=requi
|
|
|
133
133
|
`:``}
|
|
134
134
|
|
|
135
135
|
<!-- Ripple effects -->
|
|
136
|
-
${this.ripples.map(e=>
|
|
136
|
+
${this.ripples.map(e=>a.html`
|
|
137
137
|
<span
|
|
138
138
|
class="ripple"
|
|
139
139
|
style="left: ${e.x}px; top: ${e.y}px;"
|
|
@@ -143,4 +143,4 @@ require(`./chunk-CncqDLb2.cjs`);const e=require(`./mixins-CxGRIPYQ.cjs`),t=requi
|
|
|
143
143
|
<!-- State layer for M3 hover/focus/pressed states -->
|
|
144
144
|
<div class="state-layer"></div>
|
|
145
145
|
</div>
|
|
146
|
-
`}};
|
|
146
|
+
`}};e.p([(0,i.property)({type:String,reflect:!0})],o.prototype,`value`,void 0),e.p([(0,i.property)({type:String,reflect:!0})],o.prototype,`icon`,void 0),e.p([(0,i.property)({type:String,reflect:!0})],o.prototype,`avatar`,void 0),e.p([(0,i.property)({type:Boolean,reflect:!0})],o.prototype,`removable`,void 0),e.p([(0,i.property)({type:Boolean,reflect:!0})],o.prototype,`disabled`,void 0),e.p([(0,i.property)({type:Boolean,reflect:!0})],o.prototype,`elevated`,void 0),e.p([(0,i.state)()],o.prototype,`uiState`,void 0),e.p([(0,i.state)()],o.prototype,`ripples`,void 0),o=e.p([(0,i.customElement)(`schmancy-input-chip`)],o),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return o}});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input-chip-B0X_CodJ.cjs","names":[],"sources":["../src/chips/input-chip.ts"],"sourcesContent":["import { SchmancyElement } from '@mixins/index'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { BehaviorSubject, combineLatest } from 'rxjs'\nimport { map, takeUntil, tap } from 'rxjs/operators'\n\n/**\n * Input chip component - represents user-provided information that can be removed.\n *\n * IMPORTANT: Per Material Design 3 specification, input chips do NOT have selected state.\n * They represent discrete pieces of user input (like entered tags, selections from lists, etc.)\n * that can only be removed, not toggled on/off.\n *\n * Use cases:\n * - Displaying selected recipients in an email\n * - Showing applied filters that can be removed\n * - Tags or keywords entered by the user\n * - Selected items from a multi-select dropdown\n *\n * @fires click - Optional click event on chip body (value)\n * @fires remove - Dispatched when remove button is clicked (value)\n *\n * @example\n * ```html\n * <schmancy-input-chip value=\"john@example.com\" avatar=\"/avatars/john.jpg\">\n * John Doe\n * </schmancy-input-chip>\n * ```\n */\n@customElement('schmancy-input-chip')\nexport class SchmancyInputChip extends SchmancyElement {\n\tstatic styles = [css`\n\t:host {\n\t\tdisplay: inline-block;\n\t\toutline: none;\n\t\twidth: fit-content;\n\t\tmin-width: fit-content;\n\t}\n\n\t:host([disabled]) {\n\t\tpointer-events: none;\n\t}\n\n\tbutton {\n\t\tfont-family: inherit;\n\t}\n\n\t.avatar-img {\n\t\twidth: 20px;\n\t\theight: 20px;\n\t\tobject-fit: cover;\n\t}\n\n\t/* Material Symbols font for icons */\n\t.material-symbols-outlined {\n\t\tfont-family: 'Material Symbols Outlined';\n\t\tfont-weight: normal;\n\t\tfont-style: normal;\n\t\tfont-size: 18px;\n\t\tline-height: 1;\n\t\tletter-spacing: normal;\n\t\ttext-transform: none;\n\t\tdisplay: inline-block;\n\t\twhite-space: nowrap;\n\t\tword-wrap: normal;\n\t\tdirection: ltr;\n\t\t-webkit-font-smoothing: antialiased;\n\t\ttext-rendering: optimizeLegibility;\n\t\t-moz-osx-font-smoothing: grayscale;\n\t\tfont-feature-settings: 'liga';\n\t\tvertical-align: middle;\n\t}\n\n\t.ripple {\n\t\tposition: absolute;\n\t\tborder-radius: 50%;\n\t\ttransform: scale(0);\n\t\tanimation: ripple 600ms linear;\n\t\tbackground-color: rgba(0, 0, 0, 0.08);\n\t\tpointer-events: none;\n\t}\n\n\t@keyframes ripple {\n\t\tto {\n\t\t\ttransform: scale(4);\n\t\t\topacity: 0;\n\t\t}\n\t}\n\n\t/* State layer for M3 hover/focus/pressed states */\n\t.state-layer {\n\t\tposition: absolute;\n\t\tinset: 0;\n\t\tborder-radius: inherit;\n\t\tpointer-events: none;\n\t\tbackground-color: currentColor;\n\t\topacity: 0;\n\t\ttransition: opacity 200ms ease;\n\t}\n\n\t:host(:not([disabled])) .chip-container:hover .state-layer {\n\t\topacity: 0.08;\n\t}\n\n\t:host(:not([disabled])) .chip-container:focus-visible .state-layer {\n\t\topacity: 0.1;\n\t}\n\n\t:host(:not([disabled])) .chip-container:active .state-layer {\n\t\topacity: 0.1;\n\t}\n`];\n\t/** Value identifier for the chip */\n\t@property({ type: String, reflect: true })\n\tvalue: string = ''\n\n\t/** Optional icon name (Material Symbols) */\n\t@property({ type: String, reflect: true })\n\ticon: string = ''\n\n\t/** Optional avatar image URL */\n\t@property({ type: String, reflect: true })\n\tavatar: string = ''\n\n\t/** Whether to show remove button (default true for input chips) */\n\t@property({ type: Boolean, reflect: true })\n\tremovable: boolean = true\n\n\t/** Disable the chip */\n\t@property({ type: Boolean, reflect: true })\n\tdisabled: boolean = false\n\n\t/** Elevated style variant */\n\t@property({ type: Boolean, reflect: true })\n\televated: boolean = false\n\n\t// RxJS state streams\n\tprivate chipHover$ = new BehaviorSubject<boolean>(false)\n\tprivate removeHover$ = new BehaviorSubject<boolean>(false)\n\tprivate focused$ = new BehaviorSubject<boolean>(false)\n\tprivate pressed$ = new BehaviorSubject<boolean>(false)\n\n\t// UI state from combined streams\n\t@state() uiState = {\n\t\tchipHover: false,\n\t\tremoveHover: false,\n\t\tfocused: false,\n\t\tpressed: false\n\t}\n\n\t// Ripple effects\n\t@state() private ripples: Array<{ x: number; y: number; id: number }> = []\n\tprivate nextRippleId = 0\n\n\tconstructor() {\n\t\tsuper()\n\t\ttry {\n\t\t\tthis.internals = this.attachInternals()\n\t\t} catch {\n\t\t\tthis.internals = undefined\n\t\t}\n\t}\n\n\tprotected static shadowRootOptions = {\n\t\t...LitElement.shadowRootOptions,\n\t\tdelegatesFocus: true,\n\t}\n\n\tstatic formAssociated = true\n\tinternals: ElementInternals | undefined\n\tget form() {\n\t\treturn this.internals?.form\n\t}\n\n\tprotected updated(changed: Map<string, unknown>) {\n\t\tsuper.updated?.(changed)\n\t\tif (changed.has('value')) {\n\t\t\tthis.internals?.setFormValue(this.value || null)\n\t\t}\n\t}\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\n\t\t// Combine all UI state streams\n\t\tcombineLatest([\n\t\t\tthis.chipHover$,\n\t\t\tthis.removeHover$,\n\t\t\tthis.focused$,\n\t\t\tthis.pressed$\n\t\t]).pipe(\n\t\t\tmap(([chipHover, removeHover, focused, pressed]) => ({\n\t\t\t\tchipHover,\n\t\t\t\tremoveHover,\n\t\t\t\tfocused,\n\t\t\t\tpressed\n\t\t\t})),\n\t\t\ttap(state => {\n\t\t\t\tthis.uiState = state\n\t\t\t}),\n\t\t\ttakeUntil(this.disconnecting)\n\t\t).subscribe()\n\t}\n\n\tprivate handleChipClick = (e: MouseEvent) => {\n\t\tif (this.disabled) return\n\n\t\t// Add ripple effect\n\t\tconst chip = this.shadowRoot?.querySelector('.chip-container') as HTMLElement\n\t\tif (chip) {\n\t\t\tconst rect = chip.getBoundingClientRect()\n\t\t\tconst x = e.clientX - rect.left\n\t\t\tconst y = e.clientY - rect.top\n\t\t\tconst id = this.nextRippleId++\n\n\t\t\tthis.ripples = [...this.ripples, { x, y, id }]\n\n\t\t\t// Remove ripple after animation\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.ripples = this.ripples.filter(r => r.id !== id)\n\t\t\t}, 600)\n\t\t}\n\n\t\t// Dispatch optional click event (for custom handling if needed)\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('click', {\n\t\t\t\tdetail: { value: this.value },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t)\n\t}\n\n\tprivate handleRemove = (e: Event) => {\n\t\tif (this.disabled) return\n\n\t\te.stopPropagation()\n\n\t\t// Dispatch remove event\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('remove', {\n\t\t\t\tdetail: { value: this.value },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t)\n\t}\n\n\tprivate handleKeyDown = (e: KeyboardEvent) => {\n\t\tif (this.disabled) return\n\n\t\t// Delete or Backspace removes the chip\n\t\tif ((e.key === 'Delete' || e.key === 'Backspace') && this.removable) {\n\t\t\te.preventDefault()\n\t\t\tthis.handleRemove(e)\n\t\t}\n\t\t// Enter can optionally trigger click\n\t\telse if (e.key === 'Enter') {\n\t\t\te.preventDefault()\n\t\t\tconst clickEvent = new MouseEvent('click', {\n\t\t\t\tbubbles: true,\n\t\t\t\tcancelable: true,\n\t\t\t\tclientX: 0,\n\t\t\t\tclientY: 0\n\t\t\t})\n\t\t\tthis.handleChipClick(clickEvent)\n\t\t}\n\t}\n\n\tprivate handleFocus = () => {\n\t\tthis.focused$.next(true)\n\t}\n\n\tprivate handleBlur = () => {\n\t\tthis.focused$.next(false)\n\t}\n\n\tprotected render(): unknown {\n\t\tconst hasLeadingIcon = this.avatar || this.icon;\n\n\t\tconst chipClasses = {\n\t\t\t'chip-container': true,\n\t\t\t'inline-flex': true,\n\t\t\t'items-center': true,\n\t\t\t'gap-2': true,\n\t\t\t'h-8': true, // M3: 32px height\n\t\t\t'min-h-[32px]': true,\n\t\t\t'rounded-full': true,\n\t\t\t'cursor-default': true,\n\t\t\t'transition-all': true,\n\t\t\t'duration-200': true,\n\t\t\t'select-none': true,\n\t\t\t'text-sm': true, // M3: 14px Label Large\n\t\t\t'font-medium': true, // M3: 500 weight\n\t\t\t'relative': true,\n\t\t\t'overflow-hidden': true,\n\n\t\t\t// M3 Padding: 8px with icon, 16px without (leading), 8px with trailing icon\n\t\t\t'pl-2': hasLeadingIcon, // 8px with avatar/icon\n\t\t\t'pl-4': !hasLeadingIcon, // 16px without\n\t\t\t'pr-2': this.removable, // 8px with remove button\n\t\t\t'pr-4': !this.removable, // 16px without\n\n\t\t\t// M3 Colors for input chips\n\t\t\t'bg-surface-containerLow': true,\n\t\t\t'text-surface-onVariant': true,\n\t\t\t// Input chips are flat (no elevation) per M3\n\n\t\t\t// Focus-visible state\n\t\t\t'focus-visible:outline': !this.disabled,\n\t\t\t'focus-visible:outline-2': !this.disabled,\n\t\t\t'focus-visible:outline-primary': !this.disabled,\n\t\t\t'focus-visible:outline-offset-2': !this.disabled,\n\n\t\t\t// Disabled state\n\t\t\t'opacity-38': this.disabled, // M3 disabled opacity\n\t\t\t'cursor-not-allowed': this.disabled\n\t\t}\n\n\t\tconst removeButtonClasses = {\n\t\t\t'size-[18px]': true, // M3: 18px icon size\n\t\t\t'flex': true,\n\t\t\t'items-center': true,\n\t\t\t'justify-center': true,\n\t\t\t'rounded-full': true,\n\t\t\t'transition-all': true,\n\t\t\t'duration-200': true,\n\t\t\t'cursor-pointer': !this.disabled,\n\t\t\t'-mr-1': true, // Adjust for visual balance\n\n\t\t\t// Hover state for remove button\n\t\t\t'hover:bg-surface-containerHighest': !this.disabled,\n\t\t\t'opacity-50': this.disabled\n\t\t}\n\n\t\treturn html`\n\t\t\t<div\n\t\t\t\tclass=${classMap(chipClasses)}\n\t\t\t\t@click=${this.handleChipClick}\n\t\t\t\t@keydown=${this.handleKeyDown}\n\t\t\t\t@mouseenter=${() => this.chipHover$.next(true)}\n\t\t\t\t@mouseleave=${() => this.chipHover$.next(false)}\n\t\t\t\t@mousedown=${() => this.pressed$.next(true)}\n\t\t\t\t@mouseup=${() => this.pressed$.next(false)}\n\t\t\t\t@focus=${this.handleFocus}\n\t\t\t\t@blur=${this.handleBlur}\n\t\t\t\trole=\"button\"\n\t\t\t\ttabindex=${this.disabled ? '-1' : '0'}\n\t\t\t\taria-disabled=${this.disabled}\n\t\t\t\taria-label=${this.value}\n\t\t\t>\n\t\t\t\t<!-- Avatar image (if provided) -->\n\t\t\t\t${this.avatar ? html`\n\t\t\t\t\t<img\n\t\t\t\t\t\tsrc=${this.avatar}\n\t\t\t\t\t\talt=\"\"\n\t\t\t\t\t\tclass=\"avatar-img rounded-full size-5\"\n\t\t\t\t\t/>\n\t\t\t\t` : ''}\n\n\t\t\t\t<!-- Icon (if provided and no avatar) -->\n\t\t\t\t${this.icon && !this.avatar ? html`\n\t\t\t\t\t<span class=\"material-symbols-outlined text-[18px] shrink-0\">\n\t\t\t\t\t\t${this.icon}\n\t\t\t\t\t</span>\n\t\t\t\t` : ''}\n\n\t\t\t\t<!-- Chip content -->\n\t\t\t\t<span class=\"text-sm font-medium leading-5\">\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</span>\n\n\t\t\t\t<!-- Remove button (shown by default for input chips) -->\n\t\t\t\t${this.removable ? html`\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=${classMap(removeButtonClasses)}\n\t\t\t\t\t\t@click=${this.handleRemove}\n\t\t\t\t\t\t@mouseenter=${() => this.removeHover$.next(true)}\n\t\t\t\t\t\t@mouseleave=${() => this.removeHover$.next(false)}\n\t\t\t\t\t\taria-label=\"Remove\"\n\t\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\t\t?disabled=${this.disabled}\n\t\t\t\t\t>\n\t\t\t\t\t\t<span class=\"material-symbols-outlined text-[18px]\">\n\t\t\t\t\t\t\tclose\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</button>\n\t\t\t\t` : ''}\n\n\t\t\t\t<!-- Ripple effects -->\n\t\t\t\t${this.ripples.map(ripple => html`\n\t\t\t\t\t<span\n\t\t\t\t\t\tclass=\"ripple\"\n\t\t\t\t\t\tstyle=\"left: ${ripple.x}px; top: ${ripple.y}px;\"\n\t\t\t\t\t></span>\n\t\t\t\t`)}\n\n\t\t\t\t<!-- State layer for M3 hover/focus/pressed states -->\n\t\t\t\t<div class=\"state-layer\"></div>\n\t\t\t</div>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-input-chip': SchmancyInputChip\n\t}\n}\n\nexport type InputChipClickEvent = { value: string }\nexport type InputChipRemoveEvent = { value: string }"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"input-chip-B5vYNuEm.cjs","names":[],"sources":["../src/chips/input-chip.ts"],"sourcesContent":["import { SchmancyElement } from '@mixins/index'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { BehaviorSubject, combineLatest } from 'rxjs'\nimport { map, takeUntil, tap } from 'rxjs/operators'\n\n/**\n * Input chip component - represents user-provided information that can be removed.\n *\n * IMPORTANT: Per Material Design 3 specification, input chips do NOT have selected state.\n * They represent discrete pieces of user input (like entered tags, selections from lists, etc.)\n * that can only be removed, not toggled on/off.\n *\n * Use cases:\n * - Displaying selected recipients in an email\n * - Showing applied filters that can be removed\n * - Tags or keywords entered by the user\n * - Selected items from a multi-select dropdown\n *\n * @fires click - Optional click event on chip body (value)\n * @fires remove - Dispatched when remove button is clicked (value)\n *\n * @example\n * ```html\n * <schmancy-input-chip value=\"john@example.com\" avatar=\"/avatars/john.jpg\">\n * John Doe\n * </schmancy-input-chip>\n * ```\n */\n@customElement('schmancy-input-chip')\nexport class SchmancyInputChip extends SchmancyElement {\n\tstatic styles = [css`\n\t:host {\n\t\tdisplay: inline-block;\n\t\toutline: none;\n\t\twidth: fit-content;\n\t\tmin-width: fit-content;\n\t}\n\n\t:host([disabled]) {\n\t\tpointer-events: none;\n\t}\n\n\tbutton {\n\t\tfont-family: inherit;\n\t}\n\n\t.avatar-img {\n\t\twidth: 20px;\n\t\theight: 20px;\n\t\tobject-fit: cover;\n\t}\n\n\t/* Material Symbols font for icons */\n\t.material-symbols-outlined {\n\t\tfont-family: 'Material Symbols Outlined';\n\t\tfont-weight: normal;\n\t\tfont-style: normal;\n\t\tfont-size: 18px;\n\t\tline-height: 1;\n\t\tletter-spacing: normal;\n\t\ttext-transform: none;\n\t\tdisplay: inline-block;\n\t\twhite-space: nowrap;\n\t\tword-wrap: normal;\n\t\tdirection: ltr;\n\t\t-webkit-font-smoothing: antialiased;\n\t\ttext-rendering: optimizeLegibility;\n\t\t-moz-osx-font-smoothing: grayscale;\n\t\tfont-feature-settings: 'liga';\n\t\tvertical-align: middle;\n\t}\n\n\t.ripple {\n\t\tposition: absolute;\n\t\tborder-radius: 50%;\n\t\ttransform: scale(0);\n\t\tanimation: ripple 600ms linear;\n\t\tbackground-color: rgba(0, 0, 0, 0.08);\n\t\tpointer-events: none;\n\t}\n\n\t@keyframes ripple {\n\t\tto {\n\t\t\ttransform: scale(4);\n\t\t\topacity: 0;\n\t\t}\n\t}\n\n\t/* State layer for M3 hover/focus/pressed states */\n\t.state-layer {\n\t\tposition: absolute;\n\t\tinset: 0;\n\t\tborder-radius: inherit;\n\t\tpointer-events: none;\n\t\tbackground-color: currentColor;\n\t\topacity: 0;\n\t\ttransition: opacity 200ms ease;\n\t}\n\n\t:host(:not([disabled])) .chip-container:hover .state-layer {\n\t\topacity: 0.08;\n\t}\n\n\t:host(:not([disabled])) .chip-container:focus-visible .state-layer {\n\t\topacity: 0.1;\n\t}\n\n\t:host(:not([disabled])) .chip-container:active .state-layer {\n\t\topacity: 0.1;\n\t}\n`];\n\t/** Value identifier for the chip */\n\t@property({ type: String, reflect: true })\n\tvalue: string = ''\n\n\t/** Optional icon name (Material Symbols) */\n\t@property({ type: String, reflect: true })\n\ticon: string = ''\n\n\t/** Optional avatar image URL */\n\t@property({ type: String, reflect: true })\n\tavatar: string = ''\n\n\t/** Whether to show remove button (default true for input chips) */\n\t@property({ type: Boolean, reflect: true })\n\tremovable: boolean = true\n\n\t/** Disable the chip */\n\t@property({ type: Boolean, reflect: true })\n\tdisabled: boolean = false\n\n\t/** Elevated style variant */\n\t@property({ type: Boolean, reflect: true })\n\televated: boolean = false\n\n\t// RxJS state streams\n\tprivate chipHover$ = new BehaviorSubject<boolean>(false)\n\tprivate removeHover$ = new BehaviorSubject<boolean>(false)\n\tprivate focused$ = new BehaviorSubject<boolean>(false)\n\tprivate pressed$ = new BehaviorSubject<boolean>(false)\n\n\t// UI state from combined streams\n\t@state() uiState = {\n\t\tchipHover: false,\n\t\tremoveHover: false,\n\t\tfocused: false,\n\t\tpressed: false\n\t}\n\n\t// Ripple effects\n\t@state() private ripples: Array<{ x: number; y: number; id: number }> = []\n\tprivate nextRippleId = 0\n\n\tconstructor() {\n\t\tsuper()\n\t\ttry {\n\t\t\tthis.internals = this.attachInternals()\n\t\t} catch {\n\t\t\tthis.internals = undefined\n\t\t}\n\t}\n\n\tprotected static shadowRootOptions = {\n\t\t...LitElement.shadowRootOptions,\n\t\tdelegatesFocus: true,\n\t}\n\n\tstatic formAssociated = true\n\tinternals: ElementInternals | undefined\n\tget form() {\n\t\treturn this.internals?.form\n\t}\n\n\tprotected updated(changed: Map<string, unknown>) {\n\t\tsuper.updated?.(changed)\n\t\tif (changed.has('value')) {\n\t\t\tthis.internals?.setFormValue(this.value || null)\n\t\t}\n\t}\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\n\t\t// Combine all UI state streams\n\t\tcombineLatest([\n\t\t\tthis.chipHover$,\n\t\t\tthis.removeHover$,\n\t\t\tthis.focused$,\n\t\t\tthis.pressed$\n\t\t]).pipe(\n\t\t\tmap(([chipHover, removeHover, focused, pressed]) => ({\n\t\t\t\tchipHover,\n\t\t\t\tremoveHover,\n\t\t\t\tfocused,\n\t\t\t\tpressed\n\t\t\t})),\n\t\t\ttap(state => {\n\t\t\t\tthis.uiState = state\n\t\t\t}),\n\t\t\ttakeUntil(this.disconnecting)\n\t\t).subscribe()\n\t}\n\n\tprivate handleChipClick = (e: MouseEvent) => {\n\t\tif (this.disabled) return\n\n\t\t// Add ripple effect\n\t\tconst chip = this.shadowRoot?.querySelector('.chip-container') as HTMLElement\n\t\tif (chip) {\n\t\t\tconst rect = chip.getBoundingClientRect()\n\t\t\tconst x = e.clientX - rect.left\n\t\t\tconst y = e.clientY - rect.top\n\t\t\tconst id = this.nextRippleId++\n\n\t\t\tthis.ripples = [...this.ripples, { x, y, id }]\n\n\t\t\t// Remove ripple after animation\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.ripples = this.ripples.filter(r => r.id !== id)\n\t\t\t}, 600)\n\t\t}\n\n\t\t// Dispatch optional click event (for custom handling if needed)\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('click', {\n\t\t\t\tdetail: { value: this.value },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t)\n\t}\n\n\tprivate handleRemove = (e: Event) => {\n\t\tif (this.disabled) return\n\n\t\te.stopPropagation()\n\n\t\t// Dispatch remove event\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('remove', {\n\t\t\t\tdetail: { value: this.value },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t)\n\t}\n\n\tprivate handleKeyDown = (e: KeyboardEvent) => {\n\t\tif (this.disabled) return\n\n\t\t// Delete or Backspace removes the chip\n\t\tif ((e.key === 'Delete' || e.key === 'Backspace') && this.removable) {\n\t\t\te.preventDefault()\n\t\t\tthis.handleRemove(e)\n\t\t}\n\t\t// Enter can optionally trigger click\n\t\telse if (e.key === 'Enter') {\n\t\t\te.preventDefault()\n\t\t\tconst clickEvent = new MouseEvent('click', {\n\t\t\t\tbubbles: true,\n\t\t\t\tcancelable: true,\n\t\t\t\tclientX: 0,\n\t\t\t\tclientY: 0\n\t\t\t})\n\t\t\tthis.handleChipClick(clickEvent)\n\t\t}\n\t}\n\n\tprivate handleFocus = () => {\n\t\tthis.focused$.next(true)\n\t}\n\n\tprivate handleBlur = () => {\n\t\tthis.focused$.next(false)\n\t}\n\n\tprotected render(): unknown {\n\t\tconst hasLeadingIcon = this.avatar || this.icon;\n\n\t\tconst chipClasses = {\n\t\t\t'chip-container': true,\n\t\t\t'inline-flex': true,\n\t\t\t'items-center': true,\n\t\t\t'gap-2': true,\n\t\t\t'h-8': true, // M3: 32px height\n\t\t\t'min-h-[32px]': true,\n\t\t\t'rounded-full': true,\n\t\t\t'cursor-default': true,\n\t\t\t'transition-all': true,\n\t\t\t'duration-200': true,\n\t\t\t'select-none': true,\n\t\t\t'text-sm': true, // M3: 14px Label Large\n\t\t\t'font-medium': true, // M3: 500 weight\n\t\t\t'relative': true,\n\t\t\t'overflow-hidden': true,\n\n\t\t\t// M3 Padding: 8px with icon, 16px without (leading), 8px with trailing icon\n\t\t\t'pl-2': hasLeadingIcon, // 8px with avatar/icon\n\t\t\t'pl-4': !hasLeadingIcon, // 16px without\n\t\t\t'pr-2': this.removable, // 8px with remove button\n\t\t\t'pr-4': !this.removable, // 16px without\n\n\t\t\t// M3 Colors for input chips\n\t\t\t'bg-surface-containerLow': true,\n\t\t\t'text-surface-onVariant': true,\n\t\t\t// Input chips are flat (no elevation) per M3\n\n\t\t\t// Focus-visible state\n\t\t\t'focus-visible:outline': !this.disabled,\n\t\t\t'focus-visible:outline-2': !this.disabled,\n\t\t\t'focus-visible:outline-primary': !this.disabled,\n\t\t\t'focus-visible:outline-offset-2': !this.disabled,\n\n\t\t\t// Disabled state\n\t\t\t'opacity-38': this.disabled, // M3 disabled opacity\n\t\t\t'cursor-not-allowed': this.disabled\n\t\t}\n\n\t\tconst removeButtonClasses = {\n\t\t\t'size-[18px]': true, // M3: 18px icon size\n\t\t\t'flex': true,\n\t\t\t'items-center': true,\n\t\t\t'justify-center': true,\n\t\t\t'rounded-full': true,\n\t\t\t'transition-all': true,\n\t\t\t'duration-200': true,\n\t\t\t'cursor-pointer': !this.disabled,\n\t\t\t'-mr-1': true, // Adjust for visual balance\n\n\t\t\t// Hover state for remove button\n\t\t\t'hover:bg-surface-containerHighest': !this.disabled,\n\t\t\t'opacity-50': this.disabled\n\t\t}\n\n\t\treturn html`\n\t\t\t<div\n\t\t\t\tclass=${classMap(chipClasses)}\n\t\t\t\t@click=${this.handleChipClick}\n\t\t\t\t@keydown=${this.handleKeyDown}\n\t\t\t\t@mouseenter=${() => this.chipHover$.next(true)}\n\t\t\t\t@mouseleave=${() => this.chipHover$.next(false)}\n\t\t\t\t@mousedown=${() => this.pressed$.next(true)}\n\t\t\t\t@mouseup=${() => this.pressed$.next(false)}\n\t\t\t\t@focus=${this.handleFocus}\n\t\t\t\t@blur=${this.handleBlur}\n\t\t\t\trole=\"button\"\n\t\t\t\ttabindex=${this.disabled ? '-1' : '0'}\n\t\t\t\taria-disabled=${this.disabled}\n\t\t\t\taria-label=${this.value}\n\t\t\t>\n\t\t\t\t<!-- Avatar image (if provided) -->\n\t\t\t\t${this.avatar ? html`\n\t\t\t\t\t<img\n\t\t\t\t\t\tsrc=${this.avatar}\n\t\t\t\t\t\talt=\"\"\n\t\t\t\t\t\tclass=\"avatar-img rounded-full size-5\"\n\t\t\t\t\t/>\n\t\t\t\t` : ''}\n\n\t\t\t\t<!-- Icon (if provided and no avatar) -->\n\t\t\t\t${this.icon && !this.avatar ? html`\n\t\t\t\t\t<span class=\"material-symbols-outlined text-[18px] shrink-0\">\n\t\t\t\t\t\t${this.icon}\n\t\t\t\t\t</span>\n\t\t\t\t` : ''}\n\n\t\t\t\t<!-- Chip content -->\n\t\t\t\t<span class=\"text-sm font-medium leading-5\">\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</span>\n\n\t\t\t\t<!-- Remove button (shown by default for input chips) -->\n\t\t\t\t${this.removable ? html`\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=${classMap(removeButtonClasses)}\n\t\t\t\t\t\t@click=${this.handleRemove}\n\t\t\t\t\t\t@mouseenter=${() => this.removeHover$.next(true)}\n\t\t\t\t\t\t@mouseleave=${() => this.removeHover$.next(false)}\n\t\t\t\t\t\taria-label=\"Remove\"\n\t\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\t\t?disabled=${this.disabled}\n\t\t\t\t\t>\n\t\t\t\t\t\t<span class=\"material-symbols-outlined text-[18px]\">\n\t\t\t\t\t\t\tclose\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</button>\n\t\t\t\t` : ''}\n\n\t\t\t\t<!-- Ripple effects -->\n\t\t\t\t${this.ripples.map(ripple => html`\n\t\t\t\t\t<span\n\t\t\t\t\t\tclass=\"ripple\"\n\t\t\t\t\t\tstyle=\"left: ${ripple.x}px; top: ${ripple.y}px;\"\n\t\t\t\t\t></span>\n\t\t\t\t`)}\n\n\t\t\t\t<!-- State layer for M3 hover/focus/pressed states -->\n\t\t\t\t<div class=\"state-layer\"></div>\n\t\t\t</div>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-input-chip': SchmancyInputChip\n\t}\n}\n\nexport type InputChipClickEvent = { value: string }\nexport type InputChipRemoveEvent = { value: string }"],"mappings":"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"}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import
|
|
1
|
+
import { p as e, t } from "./SchmancyElement-BQ4DFufc.js";
|
|
2
|
+
import "./mixins-BYfSDvbP.js";
|
|
3
3
|
import { BehaviorSubject as n, combineLatest as r } from "rxjs";
|
|
4
4
|
import { map as i, takeUntil as a, tap as o } from "rxjs/operators";
|
|
5
5
|
import { classMap as s } from "lit/directives/class-map.js";
|
|
6
6
|
import { customElement as c, property as l, state as u } from "lit/decorators.js";
|
|
7
7
|
import { LitElement as d, css as f, html as p } from "lit";
|
|
8
|
-
var m = class extends
|
|
8
|
+
var m = class extends t {
|
|
9
9
|
static {
|
|
10
10
|
this.styles = [f`
|
|
11
11
|
:host {
|
|
@@ -283,23 +283,23 @@ var m = class extends e {
|
|
|
283
283
|
`;
|
|
284
284
|
}
|
|
285
285
|
};
|
|
286
|
-
|
|
286
|
+
e([l({
|
|
287
287
|
type: String,
|
|
288
288
|
reflect: !0
|
|
289
|
-
})], m.prototype, "value", void 0),
|
|
289
|
+
})], m.prototype, "value", void 0), e([l({
|
|
290
290
|
type: String,
|
|
291
291
|
reflect: !0
|
|
292
|
-
})], m.prototype, "icon", void 0),
|
|
292
|
+
})], m.prototype, "icon", void 0), e([l({
|
|
293
293
|
type: String,
|
|
294
294
|
reflect: !0
|
|
295
|
-
})], m.prototype, "avatar", void 0),
|
|
295
|
+
})], m.prototype, "avatar", void 0), e([l({
|
|
296
296
|
type: Boolean,
|
|
297
297
|
reflect: !0
|
|
298
|
-
})], m.prototype, "removable", void 0),
|
|
298
|
+
})], m.prototype, "removable", void 0), e([l({
|
|
299
299
|
type: Boolean,
|
|
300
300
|
reflect: !0
|
|
301
|
-
})], m.prototype, "disabled", void 0),
|
|
301
|
+
})], m.prototype, "disabled", void 0), e([l({
|
|
302
302
|
type: Boolean,
|
|
303
303
|
reflect: !0
|
|
304
|
-
})], m.prototype, "elevated", void 0),
|
|
304
|
+
})], m.prototype, "elevated", void 0), e([u()], m.prototype, "uiState", void 0), e([u()], m.prototype, "ripples", void 0), m = e([c("schmancy-input-chip")], m);
|
|
305
305
|
export { m as t };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input-chip-DqAR4nPD.js","names":[],"sources":["../src/chips/input-chip.ts"],"sourcesContent":["import { SchmancyElement } from '@mixins/index'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { BehaviorSubject, combineLatest } from 'rxjs'\nimport { map, takeUntil, tap } from 'rxjs/operators'\n\n/**\n * Input chip component - represents user-provided information that can be removed.\n *\n * IMPORTANT: Per Material Design 3 specification, input chips do NOT have selected state.\n * They represent discrete pieces of user input (like entered tags, selections from lists, etc.)\n * that can only be removed, not toggled on/off.\n *\n * Use cases:\n * - Displaying selected recipients in an email\n * - Showing applied filters that can be removed\n * - Tags or keywords entered by the user\n * - Selected items from a multi-select dropdown\n *\n * @fires click - Optional click event on chip body (value)\n * @fires remove - Dispatched when remove button is clicked (value)\n *\n * @example\n * ```html\n * <schmancy-input-chip value=\"john@example.com\" avatar=\"/avatars/john.jpg\">\n * John Doe\n * </schmancy-input-chip>\n * ```\n */\n@customElement('schmancy-input-chip')\nexport class SchmancyInputChip extends SchmancyElement {\n\tstatic styles = [css`\n\t:host {\n\t\tdisplay: inline-block;\n\t\toutline: none;\n\t\twidth: fit-content;\n\t\tmin-width: fit-content;\n\t}\n\n\t:host([disabled]) {\n\t\tpointer-events: none;\n\t}\n\n\tbutton {\n\t\tfont-family: inherit;\n\t}\n\n\t.avatar-img {\n\t\twidth: 20px;\n\t\theight: 20px;\n\t\tobject-fit: cover;\n\t}\n\n\t/* Material Symbols font for icons */\n\t.material-symbols-outlined {\n\t\tfont-family: 'Material Symbols Outlined';\n\t\tfont-weight: normal;\n\t\tfont-style: normal;\n\t\tfont-size: 18px;\n\t\tline-height: 1;\n\t\tletter-spacing: normal;\n\t\ttext-transform: none;\n\t\tdisplay: inline-block;\n\t\twhite-space: nowrap;\n\t\tword-wrap: normal;\n\t\tdirection: ltr;\n\t\t-webkit-font-smoothing: antialiased;\n\t\ttext-rendering: optimizeLegibility;\n\t\t-moz-osx-font-smoothing: grayscale;\n\t\tfont-feature-settings: 'liga';\n\t\tvertical-align: middle;\n\t}\n\n\t.ripple {\n\t\tposition: absolute;\n\t\tborder-radius: 50%;\n\t\ttransform: scale(0);\n\t\tanimation: ripple 600ms linear;\n\t\tbackground-color: rgba(0, 0, 0, 0.08);\n\t\tpointer-events: none;\n\t}\n\n\t@keyframes ripple {\n\t\tto {\n\t\t\ttransform: scale(4);\n\t\t\topacity: 0;\n\t\t}\n\t}\n\n\t/* State layer for M3 hover/focus/pressed states */\n\t.state-layer {\n\t\tposition: absolute;\n\t\tinset: 0;\n\t\tborder-radius: inherit;\n\t\tpointer-events: none;\n\t\tbackground-color: currentColor;\n\t\topacity: 0;\n\t\ttransition: opacity 200ms ease;\n\t}\n\n\t:host(:not([disabled])) .chip-container:hover .state-layer {\n\t\topacity: 0.08;\n\t}\n\n\t:host(:not([disabled])) .chip-container:focus-visible .state-layer {\n\t\topacity: 0.1;\n\t}\n\n\t:host(:not([disabled])) .chip-container:active .state-layer {\n\t\topacity: 0.1;\n\t}\n`];\n\t/** Value identifier for the chip */\n\t@property({ type: String, reflect: true })\n\tvalue: string = ''\n\n\t/** Optional icon name (Material Symbols) */\n\t@property({ type: String, reflect: true })\n\ticon: string = ''\n\n\t/** Optional avatar image URL */\n\t@property({ type: String, reflect: true })\n\tavatar: string = ''\n\n\t/** Whether to show remove button (default true for input chips) */\n\t@property({ type: Boolean, reflect: true })\n\tremovable: boolean = true\n\n\t/** Disable the chip */\n\t@property({ type: Boolean, reflect: true })\n\tdisabled: boolean = false\n\n\t/** Elevated style variant */\n\t@property({ type: Boolean, reflect: true })\n\televated: boolean = false\n\n\t// RxJS state streams\n\tprivate chipHover$ = new BehaviorSubject<boolean>(false)\n\tprivate removeHover$ = new BehaviorSubject<boolean>(false)\n\tprivate focused$ = new BehaviorSubject<boolean>(false)\n\tprivate pressed$ = new BehaviorSubject<boolean>(false)\n\n\t// UI state from combined streams\n\t@state() uiState = {\n\t\tchipHover: false,\n\t\tremoveHover: false,\n\t\tfocused: false,\n\t\tpressed: false\n\t}\n\n\t// Ripple effects\n\t@state() private ripples: Array<{ x: number; y: number; id: number }> = []\n\tprivate nextRippleId = 0\n\n\tconstructor() {\n\t\tsuper()\n\t\ttry {\n\t\t\tthis.internals = this.attachInternals()\n\t\t} catch {\n\t\t\tthis.internals = undefined\n\t\t}\n\t}\n\n\tprotected static shadowRootOptions = {\n\t\t...LitElement.shadowRootOptions,\n\t\tdelegatesFocus: true,\n\t}\n\n\tstatic formAssociated = true\n\tinternals: ElementInternals | undefined\n\tget form() {\n\t\treturn this.internals?.form\n\t}\n\n\tprotected updated(changed: Map<string, unknown>) {\n\t\tsuper.updated?.(changed)\n\t\tif (changed.has('value')) {\n\t\t\tthis.internals?.setFormValue(this.value || null)\n\t\t}\n\t}\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\n\t\t// Combine all UI state streams\n\t\tcombineLatest([\n\t\t\tthis.chipHover$,\n\t\t\tthis.removeHover$,\n\t\t\tthis.focused$,\n\t\t\tthis.pressed$\n\t\t]).pipe(\n\t\t\tmap(([chipHover, removeHover, focused, pressed]) => ({\n\t\t\t\tchipHover,\n\t\t\t\tremoveHover,\n\t\t\t\tfocused,\n\t\t\t\tpressed\n\t\t\t})),\n\t\t\ttap(state => {\n\t\t\t\tthis.uiState = state\n\t\t\t}),\n\t\t\ttakeUntil(this.disconnecting)\n\t\t).subscribe()\n\t}\n\n\tprivate handleChipClick = (e: MouseEvent) => {\n\t\tif (this.disabled) return\n\n\t\t// Add ripple effect\n\t\tconst chip = this.shadowRoot?.querySelector('.chip-container') as HTMLElement\n\t\tif (chip) {\n\t\t\tconst rect = chip.getBoundingClientRect()\n\t\t\tconst x = e.clientX - rect.left\n\t\t\tconst y = e.clientY - rect.top\n\t\t\tconst id = this.nextRippleId++\n\n\t\t\tthis.ripples = [...this.ripples, { x, y, id }]\n\n\t\t\t// Remove ripple after animation\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.ripples = this.ripples.filter(r => r.id !== id)\n\t\t\t}, 600)\n\t\t}\n\n\t\t// Dispatch optional click event (for custom handling if needed)\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('click', {\n\t\t\t\tdetail: { value: this.value },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t)\n\t}\n\n\tprivate handleRemove = (e: Event) => {\n\t\tif (this.disabled) return\n\n\t\te.stopPropagation()\n\n\t\t// Dispatch remove event\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('remove', {\n\t\t\t\tdetail: { value: this.value },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t)\n\t}\n\n\tprivate handleKeyDown = (e: KeyboardEvent) => {\n\t\tif (this.disabled) return\n\n\t\t// Delete or Backspace removes the chip\n\t\tif ((e.key === 'Delete' || e.key === 'Backspace') && this.removable) {\n\t\t\te.preventDefault()\n\t\t\tthis.handleRemove(e)\n\t\t}\n\t\t// Enter can optionally trigger click\n\t\telse if (e.key === 'Enter') {\n\t\t\te.preventDefault()\n\t\t\tconst clickEvent = new MouseEvent('click', {\n\t\t\t\tbubbles: true,\n\t\t\t\tcancelable: true,\n\t\t\t\tclientX: 0,\n\t\t\t\tclientY: 0\n\t\t\t})\n\t\t\tthis.handleChipClick(clickEvent)\n\t\t}\n\t}\n\n\tprivate handleFocus = () => {\n\t\tthis.focused$.next(true)\n\t}\n\n\tprivate handleBlur = () => {\n\t\tthis.focused$.next(false)\n\t}\n\n\tprotected render(): unknown {\n\t\tconst hasLeadingIcon = this.avatar || this.icon;\n\n\t\tconst chipClasses = {\n\t\t\t'chip-container': true,\n\t\t\t'inline-flex': true,\n\t\t\t'items-center': true,\n\t\t\t'gap-2': true,\n\t\t\t'h-8': true, // M3: 32px height\n\t\t\t'min-h-[32px]': true,\n\t\t\t'rounded-full': true,\n\t\t\t'cursor-default': true,\n\t\t\t'transition-all': true,\n\t\t\t'duration-200': true,\n\t\t\t'select-none': true,\n\t\t\t'text-sm': true, // M3: 14px Label Large\n\t\t\t'font-medium': true, // M3: 500 weight\n\t\t\t'relative': true,\n\t\t\t'overflow-hidden': true,\n\n\t\t\t// M3 Padding: 8px with icon, 16px without (leading), 8px with trailing icon\n\t\t\t'pl-2': hasLeadingIcon, // 8px with avatar/icon\n\t\t\t'pl-4': !hasLeadingIcon, // 16px without\n\t\t\t'pr-2': this.removable, // 8px with remove button\n\t\t\t'pr-4': !this.removable, // 16px without\n\n\t\t\t// M3 Colors for input chips\n\t\t\t'bg-surface-containerLow': true,\n\t\t\t'text-surface-onVariant': true,\n\t\t\t// Input chips are flat (no elevation) per M3\n\n\t\t\t// Focus-visible state\n\t\t\t'focus-visible:outline': !this.disabled,\n\t\t\t'focus-visible:outline-2': !this.disabled,\n\t\t\t'focus-visible:outline-primary': !this.disabled,\n\t\t\t'focus-visible:outline-offset-2': !this.disabled,\n\n\t\t\t// Disabled state\n\t\t\t'opacity-38': this.disabled, // M3 disabled opacity\n\t\t\t'cursor-not-allowed': this.disabled\n\t\t}\n\n\t\tconst removeButtonClasses = {\n\t\t\t'size-[18px]': true, // M3: 18px icon size\n\t\t\t'flex': true,\n\t\t\t'items-center': true,\n\t\t\t'justify-center': true,\n\t\t\t'rounded-full': true,\n\t\t\t'transition-all': true,\n\t\t\t'duration-200': true,\n\t\t\t'cursor-pointer': !this.disabled,\n\t\t\t'-mr-1': true, // Adjust for visual balance\n\n\t\t\t// Hover state for remove button\n\t\t\t'hover:bg-surface-containerHighest': !this.disabled,\n\t\t\t'opacity-50': this.disabled\n\t\t}\n\n\t\treturn html`\n\t\t\t<div\n\t\t\t\tclass=${classMap(chipClasses)}\n\t\t\t\t@click=${this.handleChipClick}\n\t\t\t\t@keydown=${this.handleKeyDown}\n\t\t\t\t@mouseenter=${() => this.chipHover$.next(true)}\n\t\t\t\t@mouseleave=${() => this.chipHover$.next(false)}\n\t\t\t\t@mousedown=${() => this.pressed$.next(true)}\n\t\t\t\t@mouseup=${() => this.pressed$.next(false)}\n\t\t\t\t@focus=${this.handleFocus}\n\t\t\t\t@blur=${this.handleBlur}\n\t\t\t\trole=\"button\"\n\t\t\t\ttabindex=${this.disabled ? '-1' : '0'}\n\t\t\t\taria-disabled=${this.disabled}\n\t\t\t\taria-label=${this.value}\n\t\t\t>\n\t\t\t\t<!-- Avatar image (if provided) -->\n\t\t\t\t${this.avatar ? html`\n\t\t\t\t\t<img\n\t\t\t\t\t\tsrc=${this.avatar}\n\t\t\t\t\t\talt=\"\"\n\t\t\t\t\t\tclass=\"avatar-img rounded-full size-5\"\n\t\t\t\t\t/>\n\t\t\t\t` : ''}\n\n\t\t\t\t<!-- Icon (if provided and no avatar) -->\n\t\t\t\t${this.icon && !this.avatar ? html`\n\t\t\t\t\t<span class=\"material-symbols-outlined text-[18px] shrink-0\">\n\t\t\t\t\t\t${this.icon}\n\t\t\t\t\t</span>\n\t\t\t\t` : ''}\n\n\t\t\t\t<!-- Chip content -->\n\t\t\t\t<span class=\"text-sm font-medium leading-5\">\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</span>\n\n\t\t\t\t<!-- Remove button (shown by default for input chips) -->\n\t\t\t\t${this.removable ? html`\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=${classMap(removeButtonClasses)}\n\t\t\t\t\t\t@click=${this.handleRemove}\n\t\t\t\t\t\t@mouseenter=${() => this.removeHover$.next(true)}\n\t\t\t\t\t\t@mouseleave=${() => this.removeHover$.next(false)}\n\t\t\t\t\t\taria-label=\"Remove\"\n\t\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\t\t?disabled=${this.disabled}\n\t\t\t\t\t>\n\t\t\t\t\t\t<span class=\"material-symbols-outlined text-[18px]\">\n\t\t\t\t\t\t\tclose\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</button>\n\t\t\t\t` : ''}\n\n\t\t\t\t<!-- Ripple effects -->\n\t\t\t\t${this.ripples.map(ripple => html`\n\t\t\t\t\t<span\n\t\t\t\t\t\tclass=\"ripple\"\n\t\t\t\t\t\tstyle=\"left: ${ripple.x}px; top: ${ripple.y}px;\"\n\t\t\t\t\t></span>\n\t\t\t\t`)}\n\n\t\t\t\t<!-- State layer for M3 hover/focus/pressed states -->\n\t\t\t\t<div class=\"state-layer\"></div>\n\t\t\t</div>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-input-chip': SchmancyInputChip\n\t}\n}\n\nexport type InputChipClickEvent = { value: string }\nexport type InputChipRemoveEvent = { value: string }"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"input-chip-Bbs_gXOB.js","names":[],"sources":["../src/chips/input-chip.ts"],"sourcesContent":["import { SchmancyElement } from '@mixins/index'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { BehaviorSubject, combineLatest } from 'rxjs'\nimport { map, takeUntil, tap } from 'rxjs/operators'\n\n/**\n * Input chip component - represents user-provided information that can be removed.\n *\n * IMPORTANT: Per Material Design 3 specification, input chips do NOT have selected state.\n * They represent discrete pieces of user input (like entered tags, selections from lists, etc.)\n * that can only be removed, not toggled on/off.\n *\n * Use cases:\n * - Displaying selected recipients in an email\n * - Showing applied filters that can be removed\n * - Tags or keywords entered by the user\n * - Selected items from a multi-select dropdown\n *\n * @fires click - Optional click event on chip body (value)\n * @fires remove - Dispatched when remove button is clicked (value)\n *\n * @example\n * ```html\n * <schmancy-input-chip value=\"john@example.com\" avatar=\"/avatars/john.jpg\">\n * John Doe\n * </schmancy-input-chip>\n * ```\n */\n@customElement('schmancy-input-chip')\nexport class SchmancyInputChip extends SchmancyElement {\n\tstatic styles = [css`\n\t:host {\n\t\tdisplay: inline-block;\n\t\toutline: none;\n\t\twidth: fit-content;\n\t\tmin-width: fit-content;\n\t}\n\n\t:host([disabled]) {\n\t\tpointer-events: none;\n\t}\n\n\tbutton {\n\t\tfont-family: inherit;\n\t}\n\n\t.avatar-img {\n\t\twidth: 20px;\n\t\theight: 20px;\n\t\tobject-fit: cover;\n\t}\n\n\t/* Material Symbols font for icons */\n\t.material-symbols-outlined {\n\t\tfont-family: 'Material Symbols Outlined';\n\t\tfont-weight: normal;\n\t\tfont-style: normal;\n\t\tfont-size: 18px;\n\t\tline-height: 1;\n\t\tletter-spacing: normal;\n\t\ttext-transform: none;\n\t\tdisplay: inline-block;\n\t\twhite-space: nowrap;\n\t\tword-wrap: normal;\n\t\tdirection: ltr;\n\t\t-webkit-font-smoothing: antialiased;\n\t\ttext-rendering: optimizeLegibility;\n\t\t-moz-osx-font-smoothing: grayscale;\n\t\tfont-feature-settings: 'liga';\n\t\tvertical-align: middle;\n\t}\n\n\t.ripple {\n\t\tposition: absolute;\n\t\tborder-radius: 50%;\n\t\ttransform: scale(0);\n\t\tanimation: ripple 600ms linear;\n\t\tbackground-color: rgba(0, 0, 0, 0.08);\n\t\tpointer-events: none;\n\t}\n\n\t@keyframes ripple {\n\t\tto {\n\t\t\ttransform: scale(4);\n\t\t\topacity: 0;\n\t\t}\n\t}\n\n\t/* State layer for M3 hover/focus/pressed states */\n\t.state-layer {\n\t\tposition: absolute;\n\t\tinset: 0;\n\t\tborder-radius: inherit;\n\t\tpointer-events: none;\n\t\tbackground-color: currentColor;\n\t\topacity: 0;\n\t\ttransition: opacity 200ms ease;\n\t}\n\n\t:host(:not([disabled])) .chip-container:hover .state-layer {\n\t\topacity: 0.08;\n\t}\n\n\t:host(:not([disabled])) .chip-container:focus-visible .state-layer {\n\t\topacity: 0.1;\n\t}\n\n\t:host(:not([disabled])) .chip-container:active .state-layer {\n\t\topacity: 0.1;\n\t}\n`];\n\t/** Value identifier for the chip */\n\t@property({ type: String, reflect: true })\n\tvalue: string = ''\n\n\t/** Optional icon name (Material Symbols) */\n\t@property({ type: String, reflect: true })\n\ticon: string = ''\n\n\t/** Optional avatar image URL */\n\t@property({ type: String, reflect: true })\n\tavatar: string = ''\n\n\t/** Whether to show remove button (default true for input chips) */\n\t@property({ type: Boolean, reflect: true })\n\tremovable: boolean = true\n\n\t/** Disable the chip */\n\t@property({ type: Boolean, reflect: true })\n\tdisabled: boolean = false\n\n\t/** Elevated style variant */\n\t@property({ type: Boolean, reflect: true })\n\televated: boolean = false\n\n\t// RxJS state streams\n\tprivate chipHover$ = new BehaviorSubject<boolean>(false)\n\tprivate removeHover$ = new BehaviorSubject<boolean>(false)\n\tprivate focused$ = new BehaviorSubject<boolean>(false)\n\tprivate pressed$ = new BehaviorSubject<boolean>(false)\n\n\t// UI state from combined streams\n\t@state() uiState = {\n\t\tchipHover: false,\n\t\tremoveHover: false,\n\t\tfocused: false,\n\t\tpressed: false\n\t}\n\n\t// Ripple effects\n\t@state() private ripples: Array<{ x: number; y: number; id: number }> = []\n\tprivate nextRippleId = 0\n\n\tconstructor() {\n\t\tsuper()\n\t\ttry {\n\t\t\tthis.internals = this.attachInternals()\n\t\t} catch {\n\t\t\tthis.internals = undefined\n\t\t}\n\t}\n\n\tprotected static shadowRootOptions = {\n\t\t...LitElement.shadowRootOptions,\n\t\tdelegatesFocus: true,\n\t}\n\n\tstatic formAssociated = true\n\tinternals: ElementInternals | undefined\n\tget form() {\n\t\treturn this.internals?.form\n\t}\n\n\tprotected updated(changed: Map<string, unknown>) {\n\t\tsuper.updated?.(changed)\n\t\tif (changed.has('value')) {\n\t\t\tthis.internals?.setFormValue(this.value || null)\n\t\t}\n\t}\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\n\t\t// Combine all UI state streams\n\t\tcombineLatest([\n\t\t\tthis.chipHover$,\n\t\t\tthis.removeHover$,\n\t\t\tthis.focused$,\n\t\t\tthis.pressed$\n\t\t]).pipe(\n\t\t\tmap(([chipHover, removeHover, focused, pressed]) => ({\n\t\t\t\tchipHover,\n\t\t\t\tremoveHover,\n\t\t\t\tfocused,\n\t\t\t\tpressed\n\t\t\t})),\n\t\t\ttap(state => {\n\t\t\t\tthis.uiState = state\n\t\t\t}),\n\t\t\ttakeUntil(this.disconnecting)\n\t\t).subscribe()\n\t}\n\n\tprivate handleChipClick = (e: MouseEvent) => {\n\t\tif (this.disabled) return\n\n\t\t// Add ripple effect\n\t\tconst chip = this.shadowRoot?.querySelector('.chip-container') as HTMLElement\n\t\tif (chip) {\n\t\t\tconst rect = chip.getBoundingClientRect()\n\t\t\tconst x = e.clientX - rect.left\n\t\t\tconst y = e.clientY - rect.top\n\t\t\tconst id = this.nextRippleId++\n\n\t\t\tthis.ripples = [...this.ripples, { x, y, id }]\n\n\t\t\t// Remove ripple after animation\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.ripples = this.ripples.filter(r => r.id !== id)\n\t\t\t}, 600)\n\t\t}\n\n\t\t// Dispatch optional click event (for custom handling if needed)\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('click', {\n\t\t\t\tdetail: { value: this.value },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t)\n\t}\n\n\tprivate handleRemove = (e: Event) => {\n\t\tif (this.disabled) return\n\n\t\te.stopPropagation()\n\n\t\t// Dispatch remove event\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('remove', {\n\t\t\t\tdetail: { value: this.value },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t)\n\t}\n\n\tprivate handleKeyDown = (e: KeyboardEvent) => {\n\t\tif (this.disabled) return\n\n\t\t// Delete or Backspace removes the chip\n\t\tif ((e.key === 'Delete' || e.key === 'Backspace') && this.removable) {\n\t\t\te.preventDefault()\n\t\t\tthis.handleRemove(e)\n\t\t}\n\t\t// Enter can optionally trigger click\n\t\telse if (e.key === 'Enter') {\n\t\t\te.preventDefault()\n\t\t\tconst clickEvent = new MouseEvent('click', {\n\t\t\t\tbubbles: true,\n\t\t\t\tcancelable: true,\n\t\t\t\tclientX: 0,\n\t\t\t\tclientY: 0\n\t\t\t})\n\t\t\tthis.handleChipClick(clickEvent)\n\t\t}\n\t}\n\n\tprivate handleFocus = () => {\n\t\tthis.focused$.next(true)\n\t}\n\n\tprivate handleBlur = () => {\n\t\tthis.focused$.next(false)\n\t}\n\n\tprotected render(): unknown {\n\t\tconst hasLeadingIcon = this.avatar || this.icon;\n\n\t\tconst chipClasses = {\n\t\t\t'chip-container': true,\n\t\t\t'inline-flex': true,\n\t\t\t'items-center': true,\n\t\t\t'gap-2': true,\n\t\t\t'h-8': true, // M3: 32px height\n\t\t\t'min-h-[32px]': true,\n\t\t\t'rounded-full': true,\n\t\t\t'cursor-default': true,\n\t\t\t'transition-all': true,\n\t\t\t'duration-200': true,\n\t\t\t'select-none': true,\n\t\t\t'text-sm': true, // M3: 14px Label Large\n\t\t\t'font-medium': true, // M3: 500 weight\n\t\t\t'relative': true,\n\t\t\t'overflow-hidden': true,\n\n\t\t\t// M3 Padding: 8px with icon, 16px without (leading), 8px with trailing icon\n\t\t\t'pl-2': hasLeadingIcon, // 8px with avatar/icon\n\t\t\t'pl-4': !hasLeadingIcon, // 16px without\n\t\t\t'pr-2': this.removable, // 8px with remove button\n\t\t\t'pr-4': !this.removable, // 16px without\n\n\t\t\t// M3 Colors for input chips\n\t\t\t'bg-surface-containerLow': true,\n\t\t\t'text-surface-onVariant': true,\n\t\t\t// Input chips are flat (no elevation) per M3\n\n\t\t\t// Focus-visible state\n\t\t\t'focus-visible:outline': !this.disabled,\n\t\t\t'focus-visible:outline-2': !this.disabled,\n\t\t\t'focus-visible:outline-primary': !this.disabled,\n\t\t\t'focus-visible:outline-offset-2': !this.disabled,\n\n\t\t\t// Disabled state\n\t\t\t'opacity-38': this.disabled, // M3 disabled opacity\n\t\t\t'cursor-not-allowed': this.disabled\n\t\t}\n\n\t\tconst removeButtonClasses = {\n\t\t\t'size-[18px]': true, // M3: 18px icon size\n\t\t\t'flex': true,\n\t\t\t'items-center': true,\n\t\t\t'justify-center': true,\n\t\t\t'rounded-full': true,\n\t\t\t'transition-all': true,\n\t\t\t'duration-200': true,\n\t\t\t'cursor-pointer': !this.disabled,\n\t\t\t'-mr-1': true, // Adjust for visual balance\n\n\t\t\t// Hover state for remove button\n\t\t\t'hover:bg-surface-containerHighest': !this.disabled,\n\t\t\t'opacity-50': this.disabled\n\t\t}\n\n\t\treturn html`\n\t\t\t<div\n\t\t\t\tclass=${classMap(chipClasses)}\n\t\t\t\t@click=${this.handleChipClick}\n\t\t\t\t@keydown=${this.handleKeyDown}\n\t\t\t\t@mouseenter=${() => this.chipHover$.next(true)}\n\t\t\t\t@mouseleave=${() => this.chipHover$.next(false)}\n\t\t\t\t@mousedown=${() => this.pressed$.next(true)}\n\t\t\t\t@mouseup=${() => this.pressed$.next(false)}\n\t\t\t\t@focus=${this.handleFocus}\n\t\t\t\t@blur=${this.handleBlur}\n\t\t\t\trole=\"button\"\n\t\t\t\ttabindex=${this.disabled ? '-1' : '0'}\n\t\t\t\taria-disabled=${this.disabled}\n\t\t\t\taria-label=${this.value}\n\t\t\t>\n\t\t\t\t<!-- Avatar image (if provided) -->\n\t\t\t\t${this.avatar ? html`\n\t\t\t\t\t<img\n\t\t\t\t\t\tsrc=${this.avatar}\n\t\t\t\t\t\talt=\"\"\n\t\t\t\t\t\tclass=\"avatar-img rounded-full size-5\"\n\t\t\t\t\t/>\n\t\t\t\t` : ''}\n\n\t\t\t\t<!-- Icon (if provided and no avatar) -->\n\t\t\t\t${this.icon && !this.avatar ? html`\n\t\t\t\t\t<span class=\"material-symbols-outlined text-[18px] shrink-0\">\n\t\t\t\t\t\t${this.icon}\n\t\t\t\t\t</span>\n\t\t\t\t` : ''}\n\n\t\t\t\t<!-- Chip content -->\n\t\t\t\t<span class=\"text-sm font-medium leading-5\">\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</span>\n\n\t\t\t\t<!-- Remove button (shown by default for input chips) -->\n\t\t\t\t${this.removable ? html`\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=${classMap(removeButtonClasses)}\n\t\t\t\t\t\t@click=${this.handleRemove}\n\t\t\t\t\t\t@mouseenter=${() => this.removeHover$.next(true)}\n\t\t\t\t\t\t@mouseleave=${() => this.removeHover$.next(false)}\n\t\t\t\t\t\taria-label=\"Remove\"\n\t\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\t\t?disabled=${this.disabled}\n\t\t\t\t\t>\n\t\t\t\t\t\t<span class=\"material-symbols-outlined text-[18px]\">\n\t\t\t\t\t\t\tclose\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</button>\n\t\t\t\t` : ''}\n\n\t\t\t\t<!-- Ripple effects -->\n\t\t\t\t${this.ripples.map(ripple => html`\n\t\t\t\t\t<span\n\t\t\t\t\t\tclass=\"ripple\"\n\t\t\t\t\t\tstyle=\"left: ${ripple.x}px; top: ${ripple.y}px;\"\n\t\t\t\t\t></span>\n\t\t\t\t`)}\n\n\t\t\t\t<!-- State layer for M3 hover/focus/pressed states -->\n\t\t\t\t<div class=\"state-layer\"></div>\n\t\t\t</div>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-input-chip': SchmancyInputChip\n\t}\n}\n\nexport type InputChipClickEvent = { value: string }\nexport type InputChipRemoveEvent = { value: string }"],"mappings":"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"}
|
package/dist/input.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./input-
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./input-Pp6A1m3s.cjs`);exports.SchmancyInput=e.n,Object.defineProperty(exports,`SchmancyInputCompat`,{enumerable:!0,get:function(){return e.t}});
|
package/dist/input.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { n as e, t } from "./input-
|
|
1
|
+
import { n as e, t } from "./input-AQbBEj2f.js";
|
|
2
2
|
export { e as SchmancyInput, t as SchmancyInputCompat };
|
package/dist/json.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunk-CncqDLb2.cjs`);const e=require(`./
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunk-CncqDLb2.cjs`);const e=require(`./SchmancyElement-DhSiMp6Y.cjs`);require(`./mixins-YQI9JogS.cjs`);const t=require(`./notification-RhaYvA1I.cjs`);let n=require(`lit/decorators.js`),r=require(`lit`),i=require(`lit/directives/unsafe-html.js`);var a=class extends e.t{constructor(...e){super(...e),this.data={},this.highlightKeys=[],this.compact=!1}static{this.styles=[r.css`:host { display: block }`]}highlightChanges(e,t){let n=e;return t.forEach(e=>{let t=RegExp(`("${e}":\\s*)([^,\\n}]+)`,`g`);n=n.replace(t,(e,t,n)=>`${t}<span class="text-warning-default font-bold">${n}</span>`)}),n}async copyJSON(){try{await navigator.clipboard.writeText(JSON.stringify(this.data,null,2)),t.r.success(`JSON copied to clipboard`)}catch{t.r.error(`Failed to copy JSON`)}}render(){let e=JSON.stringify(this.data,null,this.compact?0:2),t=this.highlightKeys.length>0?this.highlightChanges(e,this.highlightKeys):e;return r.html`
|
|
2
2
|
<div
|
|
3
3
|
class="bg-surface-container rounded-lg p-2 font-mono overflow-auto cursor-pointer hover:bg-surface-container-high transition-colors"
|
|
4
4
|
@click=${this.copyJSON}
|
|
@@ -6,6 +6,6 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./ch
|
|
|
6
6
|
<div class="flex items-center justify-between mb-1">
|
|
7
7
|
<schmancy-icon class="text-xs text-on-surface-variant">content_copy</schmancy-icon>
|
|
8
8
|
</div>
|
|
9
|
-
<pre class="text-[10px] leading-tight">${(0,
|
|
9
|
+
<pre class="text-[10px] leading-tight">${(0,i.unsafeHTML)(t)}</pre>
|
|
10
10
|
</div>
|
|
11
|
-
`}};
|
|
11
|
+
`}};e.p([(0,n.property)({type:Object})],a.prototype,`data`,void 0),e.p([(0,n.property)({type:Array})],a.prototype,`highlightKeys`,void 0),e.p([(0,n.property)({type:Boolean})],a.prototype,`compact`,void 0),a=e.p([(0,n.customElement)(`schmancy-json`)],a),Object.defineProperty(exports,`SchmancyJson`,{enumerable:!0,get:function(){return a}});
|
package/dist/json.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"json.cjs","names":[],"sources":["../src/json/json.ts"],"sourcesContent":["import { SchmancyElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js'\nimport { $notify } from '@schmancy/notification'\n\n@customElement('schmancy-json')\nexport class SchmancyJson extends SchmancyElement {\n\tstatic styles = [css`:host { display: block }`];\n\t@property({ type: Object }) data: Record<string, any> = {}\n\t@property({ type: Array }) highlightKeys: string[] = []\n\t@property({ type: Boolean }) compact = false\n\n\tprivate highlightChanges(json: string, changedKeys: string[]): string {\n\t\tlet highlighted = json\n\t\tchangedKeys.forEach(key => {\n\t\t\tconst regex = new RegExp(`(\"${key}\":\\\\s*)([^,\\\\n}]+)`, 'g')\n\t\t\thighlighted = highlighted.replace(regex, (_match, keyPart, valuePart) => {\n\t\t\t\treturn `${keyPart}<span class=\"text-warning-default font-bold\">${valuePart}</span>`\n\t\t\t})\n\t\t})\n\t\treturn highlighted\n\t}\n\n\tprivate async copyJSON() {\n\t\ttry {\n\t\t\tawait navigator.clipboard.writeText(JSON.stringify(this.data, null, 2))\n\t\t\t$notify.success('JSON copied to clipboard')\n\t\t} catch {\n\t\t\t$notify.error('Failed to copy JSON')\n\t\t}\n\t}\n\n\trender() {\n\t\tconst jsonString = JSON.stringify(this.data, null, this.compact ? 0 : 2)\n\t\tconst highlighted = this.highlightKeys.length > 0 ? this.highlightChanges(jsonString, this.highlightKeys) : jsonString\n\n\t\treturn html`\n\t\t\t<div\n\t\t\t\tclass=\"bg-surface-container rounded-lg p-2 font-mono overflow-auto cursor-pointer hover:bg-surface-container-high transition-colors\"\n\t\t\t\t@click=${this.copyJSON}\n\t\t\t>\n\t\t\t\t<div class=\"flex items-center justify-between mb-1\">\n\t\t\t\t\t<schmancy-icon class=\"text-xs text-on-surface-variant\">content_copy</schmancy-icon>\n\t\t\t\t</div>\n\t\t\t\t<pre class=\"text-[10px] leading-tight\">${unsafeHTML(highlighted)}</pre>\n\t\t\t</div>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-json': SchmancyJson\n\t}\n}\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"json.cjs","names":[],"sources":["../src/json/json.ts"],"sourcesContent":["import { SchmancyElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js'\nimport { $notify } from '@schmancy/notification'\n\n@customElement('schmancy-json')\nexport class SchmancyJson extends SchmancyElement {\n\tstatic styles = [css`:host { display: block }`];\n\t@property({ type: Object }) data: Record<string, any> = {}\n\t@property({ type: Array }) highlightKeys: string[] = []\n\t@property({ type: Boolean }) compact = false\n\n\tprivate highlightChanges(json: string, changedKeys: string[]): string {\n\t\tlet highlighted = json\n\t\tchangedKeys.forEach(key => {\n\t\t\tconst regex = new RegExp(`(\"${key}\":\\\\s*)([^,\\\\n}]+)`, 'g')\n\t\t\thighlighted = highlighted.replace(regex, (_match, keyPart, valuePart) => {\n\t\t\t\treturn `${keyPart}<span class=\"text-warning-default font-bold\">${valuePart}</span>`\n\t\t\t})\n\t\t})\n\t\treturn highlighted\n\t}\n\n\tprivate async copyJSON() {\n\t\ttry {\n\t\t\tawait navigator.clipboard.writeText(JSON.stringify(this.data, null, 2))\n\t\t\t$notify.success('JSON copied to clipboard')\n\t\t} catch {\n\t\t\t$notify.error('Failed to copy JSON')\n\t\t}\n\t}\n\n\trender() {\n\t\tconst jsonString = JSON.stringify(this.data, null, this.compact ? 0 : 2)\n\t\tconst highlighted = this.highlightKeys.length > 0 ? this.highlightChanges(jsonString, this.highlightKeys) : jsonString\n\n\t\treturn html`\n\t\t\t<div\n\t\t\t\tclass=\"bg-surface-container rounded-lg p-2 font-mono overflow-auto cursor-pointer hover:bg-surface-container-high transition-colors\"\n\t\t\t\t@click=${this.copyJSON}\n\t\t\t>\n\t\t\t\t<div class=\"flex items-center justify-between mb-1\">\n\t\t\t\t\t<schmancy-icon class=\"text-xs text-on-surface-variant\">content_copy</schmancy-icon>\n\t\t\t\t</div>\n\t\t\t\t<pre class=\"text-[10px] leading-tight\">${unsafeHTML(highlighted)}</pre>\n\t\t\t</div>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-json': SchmancyJson\n\t}\n}\n"],"mappings":"oUAOO,IAAA,EAAA,cAA2B,EAAA,CAAA,CAAA,YAAA,GAAA,EAAA,CAAA,MAAA,GAAA,CAAA,EAAA,KAAA,KAEuB,CAAC,EAAA,KAAA,cACJ,CAAA,EAAA,KAAA,QAAA,CACd,CAAA,CAAA,OAAA,KAAA,OAHvB,CAAC,EAAA,GAAG,0BAAA,CAAA,CAKpB,iBAAyB,EAAc,EAAA,CACtC,IAAI,EAAc,EAOlB,OANA,EAAY,QAAQ,GAAA,CACnB,IAAM,EAAY,OAAO,KAAK,EAAA,oBAAyB,GAAA,EACvD,EAAc,EAAY,QAAQ,GAAQ,EAAQ,EAAS,IACnD,GAAG,EAAA,+CAAuD,EAAA,QAAA,CAAA,CAAA,EAG5D,CACR,CAEA,MAAA,UAAc,CACb,GAAA,CAAA,MACO,UAAU,UAAU,UAAU,KAAK,UAAU,KAAK,KAAM,KAAM,CAAA,CAAA,EACpE,EAAA,EAAQ,QAAQ,0BAAA,CACjB,MAAA,CACC,EAAA,EAAQ,MAAM,qBAAA,CACf,CACD,CAEA,QAAA,CACC,IAAM,EAAa,KAAK,UAAU,KAAK,KAAM,KAAM,KAAK,QAAU,EAAI,CAAA,EAChE,EAAc,KAAK,cAAc,OAAS,EAAI,KAAK,iBAAiB,EAAY,KAAK,aAAA,EAAiB,EAE5G,MAAO,GAAA,IAAI;;;aAGA,KAAK,SAAA;;;;;8DAKsC,CAAA,EAAA;;GAGvD,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,UAvCU,CAAE,KAAM,MAAA,CAAA,CAAA,EAAQ,EAAA,UAAA,OAAA,IAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,UAChB,CAAE,KAAM,KAAA,CAAA,CAAA,EAAO,EAAA,UAAA,gBAAA,IAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,UACf,CAAE,KAAM,OAAA,CAAA,CAAA,EAAS,EAAA,UAAA,UAAA,IAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,eALb,eAAA,CAAA,EAAe,CAAA,EAAA,OAAA,eAAA,QAAA,eAAA,CAAA,WAAA,CAAA,EAAA,IAAA,UAAA,CAAA,OAAA,CAAA,CAAA,CAAA"}
|
package/dist/json.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import
|
|
3
|
-
import { r as n } from "./notification-
|
|
1
|
+
import { p as e, t } from "./SchmancyElement-BQ4DFufc.js";
|
|
2
|
+
import "./mixins-BYfSDvbP.js";
|
|
3
|
+
import { r as n } from "./notification-BNEuu3Q2.js";
|
|
4
4
|
import { customElement as r, property as i } from "lit/decorators.js";
|
|
5
5
|
import { css as a, html as o } from "lit";
|
|
6
6
|
import { unsafeHTML as s } from "lit/directives/unsafe-html.js";
|
|
7
|
-
var c = class extends
|
|
7
|
+
var c = class extends t {
|
|
8
8
|
constructor(...e) {
|
|
9
9
|
super(...e), this.data = {}, this.highlightKeys = [], this.compact = !1;
|
|
10
10
|
}
|
|
@@ -40,5 +40,5 @@ var c = class extends e {
|
|
|
40
40
|
`;
|
|
41
41
|
}
|
|
42
42
|
};
|
|
43
|
-
|
|
43
|
+
e([i({ type: Object })], c.prototype, "data", void 0), e([i({ type: Array })], c.prototype, "highlightKeys", void 0), e([i({ type: Boolean })], c.prototype, "compact", void 0), c = e([r("schmancy-json")], c);
|
|
44
44
|
export { c as SchmancyJson };
|
package/dist/json.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"json.js","names":[],"sources":["../src/json/json.ts"],"sourcesContent":["import { SchmancyElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js'\nimport { $notify } from '@schmancy/notification'\n\n@customElement('schmancy-json')\nexport class SchmancyJson extends SchmancyElement {\n\tstatic styles = [css`:host { display: block }`];\n\t@property({ type: Object }) data: Record<string, any> = {}\n\t@property({ type: Array }) highlightKeys: string[] = []\n\t@property({ type: Boolean }) compact = false\n\n\tprivate highlightChanges(json: string, changedKeys: string[]): string {\n\t\tlet highlighted = json\n\t\tchangedKeys.forEach(key => {\n\t\t\tconst regex = new RegExp(`(\"${key}\":\\\\s*)([^,\\\\n}]+)`, 'g')\n\t\t\thighlighted = highlighted.replace(regex, (_match, keyPart, valuePart) => {\n\t\t\t\treturn `${keyPart}<span class=\"text-warning-default font-bold\">${valuePart}</span>`\n\t\t\t})\n\t\t})\n\t\treturn highlighted\n\t}\n\n\tprivate async copyJSON() {\n\t\ttry {\n\t\t\tawait navigator.clipboard.writeText(JSON.stringify(this.data, null, 2))\n\t\t\t$notify.success('JSON copied to clipboard')\n\t\t} catch {\n\t\t\t$notify.error('Failed to copy JSON')\n\t\t}\n\t}\n\n\trender() {\n\t\tconst jsonString = JSON.stringify(this.data, null, this.compact ? 0 : 2)\n\t\tconst highlighted = this.highlightKeys.length > 0 ? this.highlightChanges(jsonString, this.highlightKeys) : jsonString\n\n\t\treturn html`\n\t\t\t<div\n\t\t\t\tclass=\"bg-surface-container rounded-lg p-2 font-mono overflow-auto cursor-pointer hover:bg-surface-container-high transition-colors\"\n\t\t\t\t@click=${this.copyJSON}\n\t\t\t>\n\t\t\t\t<div class=\"flex items-center justify-between mb-1\">\n\t\t\t\t\t<schmancy-icon class=\"text-xs text-on-surface-variant\">content_copy</schmancy-icon>\n\t\t\t\t</div>\n\t\t\t\t<pre class=\"text-[10px] leading-tight\">${unsafeHTML(highlighted)}</pre>\n\t\t\t</div>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-json': SchmancyJson\n\t}\n}\n"],"mappings":";;;;;;AAOO,IAAA,IAAA,cAA2B,EAAA;CAAA,YAAA,GAAA,GAAA;EAAA,MAAA,GAAA,
|
|
1
|
+
{"version":3,"file":"json.js","names":[],"sources":["../src/json/json.ts"],"sourcesContent":["import { SchmancyElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js'\nimport { $notify } from '@schmancy/notification'\n\n@customElement('schmancy-json')\nexport class SchmancyJson extends SchmancyElement {\n\tstatic styles = [css`:host { display: block }`];\n\t@property({ type: Object }) data: Record<string, any> = {}\n\t@property({ type: Array }) highlightKeys: string[] = []\n\t@property({ type: Boolean }) compact = false\n\n\tprivate highlightChanges(json: string, changedKeys: string[]): string {\n\t\tlet highlighted = json\n\t\tchangedKeys.forEach(key => {\n\t\t\tconst regex = new RegExp(`(\"${key}\":\\\\s*)([^,\\\\n}]+)`, 'g')\n\t\t\thighlighted = highlighted.replace(regex, (_match, keyPart, valuePart) => {\n\t\t\t\treturn `${keyPart}<span class=\"text-warning-default font-bold\">${valuePart}</span>`\n\t\t\t})\n\t\t})\n\t\treturn highlighted\n\t}\n\n\tprivate async copyJSON() {\n\t\ttry {\n\t\t\tawait navigator.clipboard.writeText(JSON.stringify(this.data, null, 2))\n\t\t\t$notify.success('JSON copied to clipboard')\n\t\t} catch {\n\t\t\t$notify.error('Failed to copy JSON')\n\t\t}\n\t}\n\n\trender() {\n\t\tconst jsonString = JSON.stringify(this.data, null, this.compact ? 0 : 2)\n\t\tconst highlighted = this.highlightKeys.length > 0 ? this.highlightChanges(jsonString, this.highlightKeys) : jsonString\n\n\t\treturn html`\n\t\t\t<div\n\t\t\t\tclass=\"bg-surface-container rounded-lg p-2 font-mono overflow-auto cursor-pointer hover:bg-surface-container-high transition-colors\"\n\t\t\t\t@click=${this.copyJSON}\n\t\t\t>\n\t\t\t\t<div class=\"flex items-center justify-between mb-1\">\n\t\t\t\t\t<schmancy-icon class=\"text-xs text-on-surface-variant\">content_copy</schmancy-icon>\n\t\t\t\t</div>\n\t\t\t\t<pre class=\"text-[10px] leading-tight\">${unsafeHTML(highlighted)}</pre>\n\t\t\t</div>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-json': SchmancyJson\n\t}\n}\n"],"mappings":";;;;;;AAOO,IAAA,IAAA,cAA2B,EAAA;CAAA,YAAA,GAAA,GAAA;EAAA,MAAA,GAAA,CAAA,GAAA,KAAA,OAEuB,CAAC,GAAA,KAAA,gBACJ,CAAA,GAAA,KAAA,UAAA,CACd;CAAA;CAAA;EAAA,KAAA,SAHvB,CAAC,CAAG,0BAAA;CAAA;CAKpB,iBAAyB,GAAc,GAAA;EACtC,IAAI,IAAc;EAOlB,OANA,EAAY,SAAQ,MAAA;GACnB,IAAM,IAAY,OAAO,KAAK,EAAA,qBAAyB,GAAA;GACvD,IAAc,EAAY,QAAQ,IAAQ,GAAQ,GAAS,MACnD,GAAG,EAAA,+CAAuD,EAAA,QAAA;EAAA,CAAA,GAG5D;CACR;CAEA,MAAA,WAAc;EACb,IAAA;GAAA,MACO,UAAU,UAAU,UAAU,KAAK,UAAU,KAAK,MAAM,MAAM,CAAA,CAAA,GACpE,EAAQ,QAAQ,0BAAA;EACjB,QAAA;GACC,EAAQ,MAAM,qBAAA;EACf;CACD;CAEA,SAAA;EACC,IAAM,IAAa,KAAK,UAAU,KAAK,MAAM,MAAM,KAAK,UAAU,IAAI,CAAA,GAChE,IAAc,KAAK,cAAc,SAAS,IAAI,KAAK,iBAAiB,GAAY,KAAK,aAAA,IAAiB;EAE5G,OAAO,CAAI;;;aAGA,KAAK,SAAA;;;;;6CAK2B,EAAW,CAAA,EAAA;;;CAGvD;AAAA;AAAA,EAAA,CAvCC,EAAS,EAAE,MAAM,OAAA,CAAA,CAAA,GAAQ,EAAA,WAAA,QAAA,KAAA,CAAA,GAAA,EAAA,CACzB,EAAS,EAAE,MAAM,MAAA,CAAA,CAAA,GAAO,EAAA,WAAA,iBAAA,KAAA,CAAA,GAAA,EAAA,CACxB,EAAS,EAAE,MAAM,QAAA,CAAA,CAAA,GAAS,EAAA,WAAA,WAAA,KAAA,CAAA,GAAA,IAAA,EAAA,CAL3B,EAAc,eAAA,CAAA,GAAe,CAAA;AAAA,SAAA,KAAA"}
|
package/dist/kbd.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunk-CncqDLb2.cjs`);const e=require(`./
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunk-CncqDLb2.cjs`);const e=require(`./SchmancyElement-DhSiMp6Y.cjs`);require(`./mixins-YQI9JogS.cjs`);let t=require(`lit/decorators.js`),n=require(`lit`);var r=class extends e.t{constructor(...e){super(...e),this.size=`md`}static{this.styles=[n.css`
|
|
2
2
|
:host {
|
|
3
3
|
display: inline-block;
|
|
4
4
|
vertical-align: middle;
|
|
@@ -25,4 +25,4 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./ch
|
|
|
25
25
|
--_ksize: 1.25rem;
|
|
26
26
|
--_kfont: 0.6875rem;
|
|
27
27
|
}
|
|
28
|
-
`]}render(){return
|
|
28
|
+
`]}render(){return n.html`<kbd part="base"><slot></slot></kbd>`}};e.p([(0,t.property)({type:String,reflect:!0})],r.prototype,`size`,void 0),r=e.p([(0,t.customElement)(`schmancy-kbd`)],r),Object.defineProperty(exports,`SchmancyKbd`,{enumerable:!0,get:function(){return r}});
|
package/dist/kbd.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"kbd.cjs","names":[],"sources":["../src/kbd/kbd.ts"],"sourcesContent":["import { SchmancyElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\n/**\n * Renders a keyboard shortcut hint (e.g. `⌘ K`, `Ctrl+C`). Semantically a\n * `<kbd>` element for screen readers; visually styled as a pressed key.\n *\n * Compose multiple instances for combinations:\n * ```html\n * <schmancy-kbd>⌘</schmancy-kbd> + <schmancy-kbd>K</schmancy-kbd>\n * ```\n *\n * @element schmancy-kbd\n * @slot - The key label (e.g. `⌘`, `Shift`, `K`).\n * @attr size - 'sm' | 'md'. Default 'md'.\n * @csspart base - The inner native `<kbd>` element.\n */\n@customElement('schmancy-kbd')\nexport class SchmancyKbd extends SchmancyElement {\n\tstatic styles = [css`\n\t:host {\n\t\tdisplay: inline-block;\n\t\tvertical-align: middle;\n\t}\n\tkbd {\n\t\tdisplay: inline-flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tmin-width: var(--_ksize, 1.5rem);\n\t\theight: var(--_ksize, 1.5rem);\n\t\tpadding: 0 0.375rem;\n\t\tfont-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;\n\t\tfont-size: var(--_kfont, 0.75rem);\n\t\tfont-weight: 500;\n\t\tline-height: 1;\n\t\tcolor: var(--schmancy-sys-color-surface-on, #1d1b20);\n\t\tbackground: var(--schmancy-sys-color-surface-container, #f3f0f7);\n\t\tborder: 1px solid var(--schmancy-sys-color-outline-variant, #cac4d0);\n\t\tborder-radius: 0.375rem;\n\t\tbox-shadow: inset 0 -1px 0 var(--schmancy-sys-color-outline-variant, #cac4d0);\n\t\twhite-space: nowrap;\n\t}\n\t:host([size='sm']) kbd {\n\t\t--_ksize: 1.25rem;\n\t\t--_kfont: 0.6875rem;\n\t}\n`];\n\t@property({ type: String, reflect: true }) size: 'sm' | 'md' = 'md'\n\n\trender() {\n\t\treturn html`<kbd part=\"base\"><slot></slot></kbd>`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-kbd': SchmancyKbd\n\t}\n}\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"kbd.cjs","names":[],"sources":["../src/kbd/kbd.ts"],"sourcesContent":["import { SchmancyElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\n/**\n * Renders a keyboard shortcut hint (e.g. `⌘ K`, `Ctrl+C`). Semantically a\n * `<kbd>` element for screen readers; visually styled as a pressed key.\n *\n * Compose multiple instances for combinations:\n * ```html\n * <schmancy-kbd>⌘</schmancy-kbd> + <schmancy-kbd>K</schmancy-kbd>\n * ```\n *\n * @element schmancy-kbd\n * @slot - The key label (e.g. `⌘`, `Shift`, `K`).\n * @attr size - 'sm' | 'md'. Default 'md'.\n * @csspart base - The inner native `<kbd>` element.\n */\n@customElement('schmancy-kbd')\nexport class SchmancyKbd extends SchmancyElement {\n\tstatic styles = [css`\n\t:host {\n\t\tdisplay: inline-block;\n\t\tvertical-align: middle;\n\t}\n\tkbd {\n\t\tdisplay: inline-flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tmin-width: var(--_ksize, 1.5rem);\n\t\theight: var(--_ksize, 1.5rem);\n\t\tpadding: 0 0.375rem;\n\t\tfont-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;\n\t\tfont-size: var(--_kfont, 0.75rem);\n\t\tfont-weight: 500;\n\t\tline-height: 1;\n\t\tcolor: var(--schmancy-sys-color-surface-on, #1d1b20);\n\t\tbackground: var(--schmancy-sys-color-surface-container, #f3f0f7);\n\t\tborder: 1px solid var(--schmancy-sys-color-outline-variant, #cac4d0);\n\t\tborder-radius: 0.375rem;\n\t\tbox-shadow: inset 0 -1px 0 var(--schmancy-sys-color-outline-variant, #cac4d0);\n\t\twhite-space: nowrap;\n\t}\n\t:host([size='sm']) kbd {\n\t\t--_ksize: 1.25rem;\n\t\t--_kfont: 0.6875rem;\n\t}\n`];\n\t@property({ type: String, reflect: true }) size: 'sm' | 'md' = 'md'\n\n\trender() {\n\t\treturn html`<kbd part=\"base\"><slot></slot></kbd>`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-kbd': SchmancyKbd\n\t}\n}\n"],"mappings":"0OAmBO,IAAA,EAAA,cAA0B,EAAA,CAAA,CAAA,YAAA,GAAA,EAAA,CAAA,MAAA,GAAA,CAAA,EAAA,KAAA,KA6B+B,IAAA,CAAA,OAAA,KAAA,OA5B/C,CAAC,EAAA,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BpB,QAAA,CACC,MAAO,GAAA,IAAI,sCACZ,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,UAJU,CAAE,KAAM,OAAQ,QAAA,CAAS,CAAA,CAAA,CAAA,EAAM,EAAA,UAAA,OAAA,IAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,eA9B3B,cAAA,CAAA,EAAc,CAAA,EAAA,OAAA,eAAA,QAAA,cAAA,CAAA,WAAA,CAAA,EAAA,IAAA,UAAA,CAAA,OAAA,CAAA,CAAA,CAAA"}
|
package/dist/kbd.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import
|
|
1
|
+
import { p as e, t } from "./SchmancyElement-BQ4DFufc.js";
|
|
2
|
+
import "./mixins-BYfSDvbP.js";
|
|
3
3
|
import { customElement as n, property as r } from "lit/decorators.js";
|
|
4
4
|
import { css as i, html as a } from "lit";
|
|
5
|
-
var o = class extends
|
|
5
|
+
var o = class extends t {
|
|
6
6
|
constructor(...e) {
|
|
7
7
|
super(...e), this.size = "md";
|
|
8
8
|
}
|
|
@@ -40,8 +40,8 @@ var o = class extends e {
|
|
|
40
40
|
return a`<kbd part="base"><slot></slot></kbd>`;
|
|
41
41
|
}
|
|
42
42
|
};
|
|
43
|
-
|
|
43
|
+
e([r({
|
|
44
44
|
type: String,
|
|
45
45
|
reflect: !0
|
|
46
|
-
})], o.prototype, "size", void 0), o =
|
|
46
|
+
})], o.prototype, "size", void 0), o = e([n("schmancy-kbd")], o);
|
|
47
47
|
export { o as SchmancyKbd };
|
package/dist/kbd.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"kbd.js","names":[],"sources":["../src/kbd/kbd.ts"],"sourcesContent":["import { SchmancyElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\n/**\n * Renders a keyboard shortcut hint (e.g. `⌘ K`, `Ctrl+C`). Semantically a\n * `<kbd>` element for screen readers; visually styled as a pressed key.\n *\n * Compose multiple instances for combinations:\n * ```html\n * <schmancy-kbd>⌘</schmancy-kbd> + <schmancy-kbd>K</schmancy-kbd>\n * ```\n *\n * @element schmancy-kbd\n * @slot - The key label (e.g. `⌘`, `Shift`, `K`).\n * @attr size - 'sm' | 'md'. Default 'md'.\n * @csspart base - The inner native `<kbd>` element.\n */\n@customElement('schmancy-kbd')\nexport class SchmancyKbd extends SchmancyElement {\n\tstatic styles = [css`\n\t:host {\n\t\tdisplay: inline-block;\n\t\tvertical-align: middle;\n\t}\n\tkbd {\n\t\tdisplay: inline-flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tmin-width: var(--_ksize, 1.5rem);\n\t\theight: var(--_ksize, 1.5rem);\n\t\tpadding: 0 0.375rem;\n\t\tfont-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;\n\t\tfont-size: var(--_kfont, 0.75rem);\n\t\tfont-weight: 500;\n\t\tline-height: 1;\n\t\tcolor: var(--schmancy-sys-color-surface-on, #1d1b20);\n\t\tbackground: var(--schmancy-sys-color-surface-container, #f3f0f7);\n\t\tborder: 1px solid var(--schmancy-sys-color-outline-variant, #cac4d0);\n\t\tborder-radius: 0.375rem;\n\t\tbox-shadow: inset 0 -1px 0 var(--schmancy-sys-color-outline-variant, #cac4d0);\n\t\twhite-space: nowrap;\n\t}\n\t:host([size='sm']) kbd {\n\t\t--_ksize: 1.25rem;\n\t\t--_kfont: 0.6875rem;\n\t}\n`];\n\t@property({ type: String, reflect: true }) size: 'sm' | 'md' = 'md'\n\n\trender() {\n\t\treturn html`<kbd part=\"base\"><slot></slot></kbd>`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-kbd': SchmancyKbd\n\t}\n}\n"],"mappings":";;;;AAmBO,IAAA,IAAA,cAA0B,EAAA;CAAA,YAAA,GAAA,GAAA;EAAA,MAAA,GAAA,
|
|
1
|
+
{"version":3,"file":"kbd.js","names":[],"sources":["../src/kbd/kbd.ts"],"sourcesContent":["import { SchmancyElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\n/**\n * Renders a keyboard shortcut hint (e.g. `⌘ K`, `Ctrl+C`). Semantically a\n * `<kbd>` element for screen readers; visually styled as a pressed key.\n *\n * Compose multiple instances for combinations:\n * ```html\n * <schmancy-kbd>⌘</schmancy-kbd> + <schmancy-kbd>K</schmancy-kbd>\n * ```\n *\n * @element schmancy-kbd\n * @slot - The key label (e.g. `⌘`, `Shift`, `K`).\n * @attr size - 'sm' | 'md'. Default 'md'.\n * @csspart base - The inner native `<kbd>` element.\n */\n@customElement('schmancy-kbd')\nexport class SchmancyKbd extends SchmancyElement {\n\tstatic styles = [css`\n\t:host {\n\t\tdisplay: inline-block;\n\t\tvertical-align: middle;\n\t}\n\tkbd {\n\t\tdisplay: inline-flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tmin-width: var(--_ksize, 1.5rem);\n\t\theight: var(--_ksize, 1.5rem);\n\t\tpadding: 0 0.375rem;\n\t\tfont-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;\n\t\tfont-size: var(--_kfont, 0.75rem);\n\t\tfont-weight: 500;\n\t\tline-height: 1;\n\t\tcolor: var(--schmancy-sys-color-surface-on, #1d1b20);\n\t\tbackground: var(--schmancy-sys-color-surface-container, #f3f0f7);\n\t\tborder: 1px solid var(--schmancy-sys-color-outline-variant, #cac4d0);\n\t\tborder-radius: 0.375rem;\n\t\tbox-shadow: inset 0 -1px 0 var(--schmancy-sys-color-outline-variant, #cac4d0);\n\t\twhite-space: nowrap;\n\t}\n\t:host([size='sm']) kbd {\n\t\t--_ksize: 1.25rem;\n\t\t--_kfont: 0.6875rem;\n\t}\n`];\n\t@property({ type: String, reflect: true }) size: 'sm' | 'md' = 'md'\n\n\trender() {\n\t\treturn html`<kbd part=\"base\"><slot></slot></kbd>`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-kbd': SchmancyKbd\n\t}\n}\n"],"mappings":";;;;AAmBO,IAAA,IAAA,cAA0B,EAAA;CAAA,YAAA,GAAA,GAAA;EAAA,MAAA,GAAA,CAAA,GAAA,KAAA,OA6B+B;CAAA;CAAA;EAAA,KAAA,SA5B/C,CAAC,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BpB,SAAA;EACC,OAAO,CAAI;CACZ;AAAA;AAAA,EAAA,CAJC,EAAS;CAAE,MAAM;CAAQ,SAAA,CAAS;AAAA,CAAA,CAAA,GAAM,EAAA,WAAA,QAAA,KAAA,CAAA,GAAA,IAAA,EAAA,CA9BzC,EAAc,cAAA,CAAA,GAAc,CAAA;AAAA,SAAA,KAAA"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { n as e } from "./theme.service-
|
|
1
|
+
import { n as e } from "./theme.service-BqDuioYc.js";
|
|
2
2
|
import { EMPTY as t, Observable as n, Subject as r, combineLatest as i, fromEvent as a, merge as o, timer as s } from "rxjs";
|
|
3
3
|
import { debounceTime as c, distinctUntilChanged as l, filter as u, map as d, startWith as f, switchMap as p, takeUntil as m, tap as h } from "rxjs/operators";
|
|
4
4
|
import { AsyncDirective as g } from "lit/async-directive.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"layout-DSAjo92m.js","names":[],"sources":["../src/directives/layout.ts"],"sourcesContent":["import { directive, ElementPart, PartType } from 'lit/directive.js'\nimport { AsyncDirective } from 'lit/async-directive.js'\nimport { Subject, fromEvent, merge, Observable, EMPTY, timer, combineLatest } from 'rxjs'\nimport { debounceTime, switchMap, takeUntil, distinctUntilChanged, map, tap, startWith, filter } from 'rxjs/operators'\n\n/** Returns true if user is pinch-zoomed (scale !== 1) */\nfunction isZoomed(): boolean {\n\tconst vv = window.visualViewport\n\treturn vv ? Math.abs(vv.scale - 1) > 0.01 : false\n}\nimport { theme } from '../theme/theme.service'\n\n// Shared global update stream (lazy-initialized, cleaned up when no elements use it)\nlet update$: Subject<void> | null = null\nlet updateSub: { unsubscribe: () => void } | null = null\nlet elementCount = 0\n\nfunction getUpdateStream(): Subject<void> {\n\tif (!update$) {\n\t\tupdate$ = new Subject<void>()\n\n\t\tconst windowResize$ = fromEvent(window, 'resize', { passive: true })\n\n\t\tconst viewportEvents$ = window.visualViewport\n\t\t\t? merge(\n\t\t\t\t\tfromEvent(window.visualViewport, 'resize', { passive: true }),\n\t\t\t\t\tfromEvent(window.visualViewport, 'scroll', { passive: true })\n\t\t\t\t)\n\t\t\t: windowResize$\n\n\t\tconst orientation$ = fromEvent(window, 'orientationchange')\n\n\t\t// iOS Safari: force recalc after keyboard dismissal\n\t\tconst focusOut$ = fromEvent(document, 'focusout', { passive: true }).pipe(\n\t\t\tswitchMap(() => timer(100))\n\t\t)\n\n\t\tupdateSub = merge(windowResize$, viewportEvents$, orientation$, focusOut$)\n\t\t\t.pipe(debounceTime(16))\n\t\t\t.subscribe(() => update$!.next())\n\t}\n\treturn update$\n}\n\nfunction cleanup() {\n\tif (elementCount === 0 && updateSub) {\n\t\tupdateSub.unsubscribe()\n\t\tupdateSub = null\n\t\tupdate$ = null\n\t}\n}\n\n\n/**\n * RxJS wrapper for ResizeObserver - auto-cleans on unsubscribe\n */\nexport function fromResizeObserver(element: Element): Observable<ResizeObserverEntry[]> {\n\treturn new Observable(subscriber => {\n\t\tconst observer = new ResizeObserver(entries => subscriber.next(entries))\n\t\tobserver.observe(element)\n\t\treturn () => observer.disconnect()\n\t})\n}\n\n/**\n * fullHeight directive - fills remaining viewport space\n *\n * Reactive sources:\n * - Parent ResizeObserver (layout shifts)\n * - Window resize / visualViewport (viewport changes)\n * - Orientation change (device rotation)\n * - Focus out (mobile keyboard dismiss)\n * - Theme fullscreen toggle\n *\n * Performance:\n * - distinctUntilChanged prevents redundant style writes\n * - debounceTime(16) batches rapid events (~60fps)\n * - Single shared stream for global events\n */\nclass FullHeight extends AsyncDirective {\n\tprivate element: HTMLElement | null = null\n\tprivate disconnecting$ = new Subject<void>()\n\n\tprivate calculateHeight(): number {\n\t\tif (!this.element) return 0\n\t\tconst viewportHeight = window.visualViewport?.height ?? window.innerHeight\n\t\tconst topOffset = this.element.getBoundingClientRect().top\n\t\treturn Math.max(0, viewportHeight - topOffset)\n\t}\n\n\tprivate applyStyles(height: number, bottomPadding: number) {\n\t\tif (this.element) {\n\t\t\tthis.element.style.boxSizing = 'border-box'\n\t\t\tthis.element.style.height = `${height}px`\n\t\t\tthis.element.style.paddingBottom = `${bottomPadding}px`\n\t\t}\n\t}\n\n\tprivate setupHeightStream() {\n\t\tif (!this.element) return\n\n\t\tconst element = this.element\n\n\t\t// Parent resize detects layout shifts (e.g., header rendering after load)\n\t\tconst parentResize$ = element.parentElement\n\t\t\t? fromResizeObserver(element.parentElement)\n\t\t\t: EMPTY\n\n\t\t// Global events (resize, viewport, orientation, fullscreen)\n\t\tconst globalEvents$ = getUpdateStream()\n\n\t\t// Combine all sources, calculate height and padding, dedupe, apply\n\t\t// Skip updates while pinch-zoomed to prevent layout thrashing\n\t\tcombineLatest([\n\t\t\tmerge(parentResize$, globalEvents$).pipe(startWith(null)),\n\t\t\ttheme.bottomOffset$,\n\t\t\ttheme.fullscreen$\n\t\t]).pipe(\n\t\t\tfilter(() => !isZoomed()),\n\t\t\tmap(([, bottomOffset, isFullscreen]) => ({\n\t\t\t\theight: this.calculateHeight(),\n\t\t\t\tpadding: isFullscreen ? 0 : bottomOffset\n\t\t\t})),\n\t\t\tdistinctUntilChanged((a, b) => a.height === b.height && a.padding === b.padding),\n\t\t\ttap(({ height, padding }) => this.applyStyles(height, padding)),\n\t\t\ttakeUntil(this.disconnecting$)\n\t\t).subscribe()\n\n\t}\n\n\trender() {\n\t\treturn\n\t}\n\n\tupdate(part: ElementPart) {\n\t\tif (part.type !== PartType.ELEMENT) {\n\t\t\tthrow new Error('fullHeight directive can only be used on elements')\n\t\t}\n\t\tconst el = part.element as HTMLElement\n\t\tif (this.element !== el) {\n\t\t\tthis.element = el\n\t\t\telementCount++\n\t\t\tthis.setupHeightStream()\n\t\t}\n\t}\n\n\tdisconnected() {\n\t\tthis.disconnecting$.next()\n\t\telementCount--\n\t\tcleanup()\n\t\tthis.element = null\n\t}\n\n\treconnected() {\n\t\tif (this.element) {\n\t\t\telementCount++\n\t\t\tthis.disconnecting$ = new Subject<void>()\n\t\t\tthis.setupHeightStream()\n\t\t}\n\t}\n}\n\nexport const fullHeight = directive(FullHeight)\n\n/**\n * fullWidth directive - fills remaining horizontal viewport space\n *\n * Reactive sources:\n * - Element ResizeObserver (detects when element moves/resizes)\n * - Parent ResizeObserver (layout shifts, e.g., sidebar)\n * - Window resize / visualViewport (viewport changes)\n * - Orientation change (device rotation)\n * - Theme fullscreen toggle (sidebar visibility)\n *\n * Performance:\n * - distinctUntilChanged prevents redundant style writes\n * - debounceTime(16) batches rapid events (~60fps)\n * - Single shared stream for global events\n */\nclass FullWidth extends AsyncDirective {\n\tprivate element: HTMLElement | null = null\n\tprivate disconnecting$ = new Subject<void>()\n\n\tprivate calculateWidth(): number {\n\t\tif (!this.element) return 0\n\t\tconst viewportWidth = window.visualViewport?.width ?? window.innerWidth\n\t\tconst leftOffset = this.element.getBoundingClientRect().left\n\t\treturn Math.max(0, viewportWidth - leftOffset)\n\t}\n\n\tprivate applyStyles(width: number) {\n\t\tif (this.element) {\n\t\t\tthis.element.style.boxSizing = 'border-box'\n\t\t\tthis.element.style.maxWidth = `${width}px`\n\t\t}\n\t}\n\n\tprivate setupWidthStream() {\n\t\tif (!this.element) return\n\n\t\tconst element = this.element\n\n\t\t// Element resize detects when element itself moves (e.g., after layout settles)\n\t\tconst elementResize$ = fromResizeObserver(element)\n\n\t\t// Parent resize detects layout shifts (e.g., sidebar opening/closing)\n\t\tconst parentResize$ = element.parentElement\n\t\t\t? fromResizeObserver(element.parentElement)\n\t\t\t: EMPTY\n\n\t\t// Global events (resize, viewport, orientation)\n\t\tconst globalEvents$ = getUpdateStream()\n\n\t\t// Combine all sources with theme observables for synchronous initial emission\n\t\t// theme.fullscreen$ has shareReplay(1) ensuring immediate emission on subscribe\n\t\t// Skip updates while pinch-zoomed to prevent layout thrashing\n\t\tcombineLatest([\n\t\t\tmerge(elementResize$, parentResize$, globalEvents$).pipe(startWith(null)),\n\t\t\ttheme.fullscreen$\n\t\t]).pipe(\n\t\t\tfilter(() => !isZoomed()),\n\t\t\tmap(() => this.calculateWidth()),\n\t\t\tdistinctUntilChanged(),\n\t\t\ttap(width => this.applyStyles(width)),\n\t\t\ttakeUntil(this.disconnecting$)\n\t\t).subscribe()\n\t}\n\n\trender() {\n\t\treturn\n\t}\n\n\tupdate(part: ElementPart) {\n\t\tif (part.type !== PartType.ELEMENT) {\n\t\t\tthrow new Error('fullWidth directive can only be used on elements')\n\t\t}\n\t\tconst el = part.element as HTMLElement\n\t\tif (this.element !== el) {\n\t\t\tthis.element = el\n\t\t\telementCount++\n\t\t\tthis.setupWidthStream()\n\t\t}\n\t}\n\n\tdisconnected() {\n\t\tthis.disconnecting$.next()\n\t\telementCount--\n\t\tcleanup()\n\t\tthis.element = null\n\t}\n\n\treconnected() {\n\t\tif (this.element) {\n\t\t\telementCount++\n\t\t\tthis.disconnecting$ = new Subject<void>()\n\t\t\tthis.setupWidthStream()\n\t\t}\n\t}\n}\n\nexport const fullWidth = directive(FullWidth)\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"layout-9K1zxhZn.js","names":[],"sources":["../src/directives/layout.ts"],"sourcesContent":["import { directive, ElementPart, PartType } from 'lit/directive.js'\nimport { AsyncDirective } from 'lit/async-directive.js'\nimport { Subject, fromEvent, merge, Observable, EMPTY, timer, combineLatest } from 'rxjs'\nimport { debounceTime, switchMap, takeUntil, distinctUntilChanged, map, tap, startWith, filter } from 'rxjs/operators'\n\n/** Returns true if user is pinch-zoomed (scale !== 1) */\nfunction isZoomed(): boolean {\n\tconst vv = window.visualViewport\n\treturn vv ? Math.abs(vv.scale - 1) > 0.01 : false\n}\nimport { theme } from '../theme/theme.service'\n\n// Shared global update stream (lazy-initialized, cleaned up when no elements use it)\nlet update$: Subject<void> | null = null\nlet updateSub: { unsubscribe: () => void } | null = null\nlet elementCount = 0\n\nfunction getUpdateStream(): Subject<void> {\n\tif (!update$) {\n\t\tupdate$ = new Subject<void>()\n\n\t\tconst windowResize$ = fromEvent(window, 'resize', { passive: true })\n\n\t\tconst viewportEvents$ = window.visualViewport\n\t\t\t? merge(\n\t\t\t\t\tfromEvent(window.visualViewport, 'resize', { passive: true }),\n\t\t\t\t\tfromEvent(window.visualViewport, 'scroll', { passive: true })\n\t\t\t\t)\n\t\t\t: windowResize$\n\n\t\tconst orientation$ = fromEvent(window, 'orientationchange')\n\n\t\t// iOS Safari: force recalc after keyboard dismissal\n\t\tconst focusOut$ = fromEvent(document, 'focusout', { passive: true }).pipe(\n\t\t\tswitchMap(() => timer(100))\n\t\t)\n\n\t\tupdateSub = merge(windowResize$, viewportEvents$, orientation$, focusOut$)\n\t\t\t.pipe(debounceTime(16))\n\t\t\t.subscribe(() => update$!.next())\n\t}\n\treturn update$\n}\n\nfunction cleanup() {\n\tif (elementCount === 0 && updateSub) {\n\t\tupdateSub.unsubscribe()\n\t\tupdateSub = null\n\t\tupdate$ = null\n\t}\n}\n\n\n/**\n * RxJS wrapper for ResizeObserver - auto-cleans on unsubscribe\n */\nexport function fromResizeObserver(element: Element): Observable<ResizeObserverEntry[]> {\n\treturn new Observable(subscriber => {\n\t\tconst observer = new ResizeObserver(entries => subscriber.next(entries))\n\t\tobserver.observe(element)\n\t\treturn () => observer.disconnect()\n\t})\n}\n\n/**\n * fullHeight directive - fills remaining viewport space\n *\n * Reactive sources:\n * - Parent ResizeObserver (layout shifts)\n * - Window resize / visualViewport (viewport changes)\n * - Orientation change (device rotation)\n * - Focus out (mobile keyboard dismiss)\n * - Theme fullscreen toggle\n *\n * Performance:\n * - distinctUntilChanged prevents redundant style writes\n * - debounceTime(16) batches rapid events (~60fps)\n * - Single shared stream for global events\n */\nclass FullHeight extends AsyncDirective {\n\tprivate element: HTMLElement | null = null\n\tprivate disconnecting$ = new Subject<void>()\n\n\tprivate calculateHeight(): number {\n\t\tif (!this.element) return 0\n\t\tconst viewportHeight = window.visualViewport?.height ?? window.innerHeight\n\t\tconst topOffset = this.element.getBoundingClientRect().top\n\t\treturn Math.max(0, viewportHeight - topOffset)\n\t}\n\n\tprivate applyStyles(height: number, bottomPadding: number) {\n\t\tif (this.element) {\n\t\t\tthis.element.style.boxSizing = 'border-box'\n\t\t\tthis.element.style.height = `${height}px`\n\t\t\tthis.element.style.paddingBottom = `${bottomPadding}px`\n\t\t}\n\t}\n\n\tprivate setupHeightStream() {\n\t\tif (!this.element) return\n\n\t\tconst element = this.element\n\n\t\t// Parent resize detects layout shifts (e.g., header rendering after load)\n\t\tconst parentResize$ = element.parentElement\n\t\t\t? fromResizeObserver(element.parentElement)\n\t\t\t: EMPTY\n\n\t\t// Global events (resize, viewport, orientation, fullscreen)\n\t\tconst globalEvents$ = getUpdateStream()\n\n\t\t// Combine all sources, calculate height and padding, dedupe, apply\n\t\t// Skip updates while pinch-zoomed to prevent layout thrashing\n\t\tcombineLatest([\n\t\t\tmerge(parentResize$, globalEvents$).pipe(startWith(null)),\n\t\t\ttheme.bottomOffset$,\n\t\t\ttheme.fullscreen$\n\t\t]).pipe(\n\t\t\tfilter(() => !isZoomed()),\n\t\t\tmap(([, bottomOffset, isFullscreen]) => ({\n\t\t\t\theight: this.calculateHeight(),\n\t\t\t\tpadding: isFullscreen ? 0 : bottomOffset\n\t\t\t})),\n\t\t\tdistinctUntilChanged((a, b) => a.height === b.height && a.padding === b.padding),\n\t\t\ttap(({ height, padding }) => this.applyStyles(height, padding)),\n\t\t\ttakeUntil(this.disconnecting$)\n\t\t).subscribe()\n\n\t}\n\n\trender() {\n\t\treturn\n\t}\n\n\tupdate(part: ElementPart) {\n\t\tif (part.type !== PartType.ELEMENT) {\n\t\t\tthrow new Error('fullHeight directive can only be used on elements')\n\t\t}\n\t\tconst el = part.element as HTMLElement\n\t\tif (this.element !== el) {\n\t\t\tthis.element = el\n\t\t\telementCount++\n\t\t\tthis.setupHeightStream()\n\t\t}\n\t}\n\n\tdisconnected() {\n\t\tthis.disconnecting$.next()\n\t\telementCount--\n\t\tcleanup()\n\t\tthis.element = null\n\t}\n\n\treconnected() {\n\t\tif (this.element) {\n\t\t\telementCount++\n\t\t\tthis.disconnecting$ = new Subject<void>()\n\t\t\tthis.setupHeightStream()\n\t\t}\n\t}\n}\n\nexport const fullHeight = directive(FullHeight)\n\n/**\n * fullWidth directive - fills remaining horizontal viewport space\n *\n * Reactive sources:\n * - Element ResizeObserver (detects when element moves/resizes)\n * - Parent ResizeObserver (layout shifts, e.g., sidebar)\n * - Window resize / visualViewport (viewport changes)\n * - Orientation change (device rotation)\n * - Theme fullscreen toggle (sidebar visibility)\n *\n * Performance:\n * - distinctUntilChanged prevents redundant style writes\n * - debounceTime(16) batches rapid events (~60fps)\n * - Single shared stream for global events\n */\nclass FullWidth extends AsyncDirective {\n\tprivate element: HTMLElement | null = null\n\tprivate disconnecting$ = new Subject<void>()\n\n\tprivate calculateWidth(): number {\n\t\tif (!this.element) return 0\n\t\tconst viewportWidth = window.visualViewport?.width ?? window.innerWidth\n\t\tconst leftOffset = this.element.getBoundingClientRect().left\n\t\treturn Math.max(0, viewportWidth - leftOffset)\n\t}\n\n\tprivate applyStyles(width: number) {\n\t\tif (this.element) {\n\t\t\tthis.element.style.boxSizing = 'border-box'\n\t\t\tthis.element.style.maxWidth = `${width}px`\n\t\t}\n\t}\n\n\tprivate setupWidthStream() {\n\t\tif (!this.element) return\n\n\t\tconst element = this.element\n\n\t\t// Element resize detects when element itself moves (e.g., after layout settles)\n\t\tconst elementResize$ = fromResizeObserver(element)\n\n\t\t// Parent resize detects layout shifts (e.g., sidebar opening/closing)\n\t\tconst parentResize$ = element.parentElement\n\t\t\t? fromResizeObserver(element.parentElement)\n\t\t\t: EMPTY\n\n\t\t// Global events (resize, viewport, orientation)\n\t\tconst globalEvents$ = getUpdateStream()\n\n\t\t// Combine all sources with theme observables for synchronous initial emission\n\t\t// theme.fullscreen$ has shareReplay(1) ensuring immediate emission on subscribe\n\t\t// Skip updates while pinch-zoomed to prevent layout thrashing\n\t\tcombineLatest([\n\t\t\tmerge(elementResize$, parentResize$, globalEvents$).pipe(startWith(null)),\n\t\t\ttheme.fullscreen$\n\t\t]).pipe(\n\t\t\tfilter(() => !isZoomed()),\n\t\t\tmap(() => this.calculateWidth()),\n\t\t\tdistinctUntilChanged(),\n\t\t\ttap(width => this.applyStyles(width)),\n\t\t\ttakeUntil(this.disconnecting$)\n\t\t).subscribe()\n\t}\n\n\trender() {\n\t\treturn\n\t}\n\n\tupdate(part: ElementPart) {\n\t\tif (part.type !== PartType.ELEMENT) {\n\t\t\tthrow new Error('fullWidth directive can only be used on elements')\n\t\t}\n\t\tconst el = part.element as HTMLElement\n\t\tif (this.element !== el) {\n\t\t\tthis.element = el\n\t\t\telementCount++\n\t\t\tthis.setupWidthStream()\n\t\t}\n\t}\n\n\tdisconnected() {\n\t\tthis.disconnecting$.next()\n\t\telementCount--\n\t\tcleanup()\n\t\tthis.element = null\n\t}\n\n\treconnected() {\n\t\tif (this.element) {\n\t\t\telementCount++\n\t\t\tthis.disconnecting$ = new Subject<void>()\n\t\t\tthis.setupWidthStream()\n\t\t}\n\t}\n}\n\nexport const fullWidth = directive(FullWidth)\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
require(`./chunk-CncqDLb2.cjs`);const e=require(`./theme.service-
|
|
1
|
+
require(`./chunk-CncqDLb2.cjs`);const e=require(`./theme.service-C3PoISGd.cjs`);let t=require(`rxjs`),n=require(`rxjs/operators`),r=require(`lit/async-directive.js`),i=require(`lit/directive.js`);function a(){let e=window.visualViewport;return!!e&&Math.abs(e.scale-1)>.01}var o=null,s=null,c=0;function l(){if(!o){o=new t.Subject;let e=(0,t.fromEvent)(window,`resize`,{passive:!0});s=(0,t.merge)(e,window.visualViewport?(0,t.merge)((0,t.fromEvent)(window.visualViewport,`resize`,{passive:!0}),(0,t.fromEvent)(window.visualViewport,`scroll`,{passive:!0})):e,(0,t.fromEvent)(window,`orientationchange`),(0,t.fromEvent)(document,`focusout`,{passive:!0}).pipe((0,n.switchMap)(()=>(0,t.timer)(100)))).pipe((0,n.debounceTime)(16)).subscribe(()=>o.next())}return o}function u(){c===0&&s&&(s.unsubscribe(),s=null,o=null)}function d(e){return new t.Observable(t=>{let n=new ResizeObserver(e=>t.next(e));return n.observe(e),()=>n.disconnect()})}var f=class extends r.AsyncDirective{constructor(...e){super(...e),this.element=null,this.disconnecting$=new t.Subject}calculateHeight(){if(!this.element)return 0;let e=window.visualViewport?.height??window.innerHeight,t=this.element.getBoundingClientRect().top;return Math.max(0,e-t)}applyStyles(e,t){this.element&&(this.element.style.boxSizing=`border-box`,this.element.style.height=`${e}px`,this.element.style.paddingBottom=`${t}px`)}setupHeightStream(){if(!this.element)return;let r=this.element;(0,t.combineLatest)([(0,t.merge)(r.parentElement?d(r.parentElement):t.EMPTY,l()).pipe((0,n.startWith)(null)),e.n.bottomOffset$,e.n.fullscreen$]).pipe((0,n.filter)(()=>!a()),(0,n.map)(([,e,t])=>({height:this.calculateHeight(),padding:t?0:e})),(0,n.distinctUntilChanged)((e,t)=>e.height===t.height&&e.padding===t.padding),(0,n.tap)(({height:e,padding:t})=>this.applyStyles(e,t)),(0,n.takeUntil)(this.disconnecting$)).subscribe()}render(){}update(e){if(e.type!==i.PartType.ELEMENT)throw Error(`fullHeight directive can only be used on elements`);let t=e.element;this.element!==t&&(this.element=t,c++,this.setupHeightStream())}disconnected(){this.disconnecting$.next(),c--,u(),this.element=null}reconnected(){this.element&&(c++,this.disconnecting$=new t.Subject,this.setupHeightStream())}},p=(0,i.directive)(f),m=class extends r.AsyncDirective{constructor(...e){super(...e),this.element=null,this.disconnecting$=new t.Subject}calculateWidth(){if(!this.element)return 0;let e=window.visualViewport?.width??window.innerWidth,t=this.element.getBoundingClientRect().left;return Math.max(0,e-t)}applyStyles(e){this.element&&(this.element.style.boxSizing=`border-box`,this.element.style.maxWidth=`${e}px`)}setupWidthStream(){if(!this.element)return;let r=this.element;(0,t.combineLatest)([(0,t.merge)(d(r),r.parentElement?d(r.parentElement):t.EMPTY,l()).pipe((0,n.startWith)(null)),e.n.fullscreen$]).pipe((0,n.filter)(()=>!a()),(0,n.map)(()=>this.calculateWidth()),(0,n.distinctUntilChanged)(),(0,n.tap)(e=>this.applyStyles(e)),(0,n.takeUntil)(this.disconnecting$)).subscribe()}render(){}update(e){if(e.type!==i.PartType.ELEMENT)throw Error(`fullWidth directive can only be used on elements`);let t=e.element;this.element!==t&&(this.element=t,c++,this.setupWidthStream())}disconnected(){this.disconnecting$.next(),c--,u(),this.element=null}reconnected(){this.element&&(c++,this.disconnecting$=new t.Subject,this.setupWidthStream())}},h=(0,i.directive)(m);Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return p}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return h}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return d}});
|