@mhmo91/schmancy 0.3.2 → 0.3.3
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/ai/boat.md +6 -6
- package/ai/index.md +1 -1
- package/ai/layout.md +161 -140
- package/dist/ai/boat.md +6 -6
- package/dist/ai/index.md +1 -1
- package/dist/ai/layout.md +161 -140
- package/dist/{animated-text-B2RjyIK5.js → animated-text-Bd3rsLJs.js} +3 -3
- package/dist/{animated-text-B2RjyIK5.js.map → animated-text-Bd3rsLJs.js.map} +1 -1
- package/dist/{animated-text-DuL0BVFF.cjs → animated-text-DgW2DQuG.cjs} +2 -2
- package/dist/{animated-text-DuL0BVFF.cjs.map → animated-text-DgW2DQuG.cjs.map} +1 -1
- package/dist/animated-text.cjs +1 -1
- package/dist/animated-text.js +1 -1
- package/dist/area.cjs +1 -1
- package/dist/{area.component-C4lraBSz.js → area.component-CU8UnNll.js} +3 -3
- package/dist/{area.component-C4lraBSz.js.map → area.component-CU8UnNll.js.map} +1 -1
- package/dist/{area.component-DYh2KKnh.cjs → area.component-CjdNUfp9.cjs} +2 -2
- package/dist/{area.component-DYh2KKnh.cjs.map → area.component-CjdNUfp9.cjs.map} +1 -1
- package/dist/area.js +1 -1
- package/dist/{autocomplete-C2MgBZdi.cjs → autocomplete-BHegwiIm.cjs} +2 -2
- package/dist/{autocomplete-C2MgBZdi.cjs.map → autocomplete-BHegwiIm.cjs.map} +1 -1
- package/dist/{autocomplete-BXf34fA-.js → autocomplete-BrVxvVKr.js} +3 -3
- package/dist/{autocomplete-BXf34fA-.js.map → autocomplete-BrVxvVKr.js.map} +1 -1
- package/dist/autocomplete.cjs +1 -1
- package/dist/autocomplete.js +1 -1
- package/dist/{avatar-DVN44OzV.cjs → avatar-BhN3BVmX.cjs} +2 -2
- package/dist/{avatar-DVN44OzV.cjs.map → avatar-BhN3BVmX.cjs.map} +1 -1
- package/dist/{avatar-DupGPy32.js → avatar-C2zfmT6Z.js} +43 -43
- package/dist/{avatar-DupGPy32.js.map → avatar-C2zfmT6Z.js.map} +1 -1
- package/dist/badge.cjs +1 -1
- package/dist/badge.js +1 -1
- package/dist/{boat-DeEs020x.cjs → boat-2HKCdLed.cjs} +2 -2
- package/dist/{boat-DeEs020x.cjs.map → boat-2HKCdLed.cjs.map} +1 -1
- package/dist/{boat-D6RMa9wL.js → boat-BpfW38tw.js} +3 -3
- package/dist/{boat-D6RMa9wL.js.map → boat-BpfW38tw.js.map} +1 -1
- package/dist/boat.cjs +1 -1
- package/dist/boat.js +1 -1
- package/dist/busy.cjs +1 -1
- package/dist/busy.js +1 -1
- package/dist/button.cjs +1 -1
- package/dist/button.js +1 -1
- package/dist/card.cjs +1 -1
- package/dist/card.js +1 -1
- package/dist/{checkbox-BSndX5zU.cjs → checkbox-CO07CGjl.cjs} +2 -2
- package/dist/{checkbox-BSndX5zU.cjs.map → checkbox-CO07CGjl.cjs.map} +1 -1
- package/dist/{checkbox-CZUwhaUm.js → checkbox-EbICeHvO.js} +2 -2
- package/dist/{checkbox-CZUwhaUm.js.map → checkbox-EbICeHvO.js.map} +1 -1
- package/dist/checkbox.cjs +1 -1
- package/dist/checkbox.js +1 -1
- package/dist/{chips-Cy-Uf0By.js → chips-BKtX1ZF2.js} +3 -3
- package/dist/{chips-Cy-Uf0By.js.map → chips-BKtX1ZF2.js.map} +1 -1
- package/dist/{chips-Do9LFtJA.cjs → chips-BOq8cZqL.cjs} +2 -2
- package/dist/{chips-Do9LFtJA.cjs.map → chips-BOq8cZqL.cjs.map} +1 -1
- package/dist/chips.cjs +1 -1
- package/dist/chips.js +1 -1
- package/dist/{circular-progress-D5vVDl4d.js → circular-progress-3XVhGWQV.js} +3 -3
- package/dist/{circular-progress-D5vVDl4d.js.map → circular-progress-3XVhGWQV.js.map} +1 -1
- package/dist/{circular-progress-DS6pw54i.cjs → circular-progress-By_vh9T3.cjs} +2 -2
- package/dist/{circular-progress-DS6pw54i.cjs.map → circular-progress-By_vh9T3.cjs.map} +1 -1
- package/dist/circular-progress.cjs +1 -1
- package/dist/circular-progress.js +1 -1
- package/dist/code-highlight.cjs +1 -1
- package/dist/code-highlight.js +1 -1
- package/dist/{code-preview-AQ1T_x11.js → code-preview-CiVDWZR5.js} +3 -3
- package/dist/{code-preview-AQ1T_x11.js.map → code-preview-CiVDWZR5.js.map} +1 -1
- package/dist/{code-preview-CXO3vsRi.cjs → code-preview-D1m21gCB.cjs} +3 -3
- package/dist/{code-preview-CXO3vsRi.cjs.map → code-preview-D1m21gCB.cjs.map} +1 -1
- package/dist/components.cjs +1 -1
- package/dist/components.js +1 -1
- package/dist/content-drawer.cjs +1 -1
- package/dist/content-drawer.js +1 -1
- package/dist/{date-range-B0CSi1D6.cjs → date-range-DTpAltuE.cjs} +2 -2
- package/dist/{date-range-B0CSi1D6.cjs.map → date-range-DTpAltuE.cjs.map} +1 -1
- package/dist/{date-range-IrXoBUVr.js → date-range-I6DQ7lwF.js} +3 -3
- package/dist/{date-range-IrXoBUVr.js.map → date-range-I6DQ7lwF.js.map} +1 -1
- package/dist/date-range.cjs +1 -1
- package/dist/date-range.js +1 -1
- package/dist/{delay-BV4QWYDw.cjs → delay-3P5Bjyfl.cjs} +2 -2
- package/dist/{delay-BV4QWYDw.cjs.map → delay-3P5Bjyfl.cjs.map} +1 -1
- package/dist/{delay-BjYDvkud.js → delay-DPiGrSKB.js} +2 -2
- package/dist/{delay-BjYDvkud.js.map → delay-DPiGrSKB.js.map} +1 -1
- package/dist/delay.cjs +1 -1
- package/dist/delay.js +1 -1
- package/dist/{dialog-content-D9uVow4E.js → dialog-content-Bt6wH4ui.js} +3 -3
- package/dist/{dialog-content-D9uVow4E.js.map → dialog-content-Bt6wH4ui.js.map} +1 -1
- package/dist/{dialog-content-D5kti4-b.cjs → dialog-content-Dv9hKlSq.cjs} +2 -2
- package/dist/{dialog-content-D5kti4-b.cjs.map → dialog-content-Dv9hKlSq.cjs.map} +1 -1
- package/dist/dialog.cjs +1 -1
- package/dist/dialog.js +1 -1
- package/dist/{divider-3tv52Nso.js → divider-B9xXTgZN.js} +3 -3
- package/dist/{divider-3tv52Nso.js.map → divider-B9xXTgZN.js.map} +1 -1
- package/dist/{divider-CEyi1ooH.cjs → divider-ByyMbbYx.cjs} +2 -2
- package/dist/{divider-CEyi1ooH.cjs.map → divider-ByyMbbYx.cjs.map} +1 -1
- package/dist/divider.cjs +1 -1
- package/dist/divider.js +1 -1
- package/dist/{dropdown-content-BoKXumxT.cjs → dropdown-content-C3GWpPBy.cjs} +2 -2
- package/dist/{dropdown-content-BoKXumxT.cjs.map → dropdown-content-C3GWpPBy.cjs.map} +1 -1
- package/dist/{dropdown-content-R-EVmTas.js → dropdown-content-vEvXWt_m.js} +3 -3
- package/dist/{dropdown-content-R-EVmTas.js.map → dropdown-content-vEvXWt_m.js.map} +1 -1
- package/dist/dropdown.cjs +1 -1
- package/dist/dropdown.js +1 -1
- package/dist/extra.cjs +1 -1
- package/dist/extra.js +1 -1
- package/dist/{flex-Dfk62-Dn.cjs → flex-BCLL4F9G.cjs} +2 -2
- package/dist/flex-BCLL4F9G.cjs.map +1 -0
- package/dist/{flex-DFGC-5rG.js → flex-CM2plTnS.js} +2 -2
- package/dist/flex-CM2plTnS.js.map +1 -0
- package/dist/{form-C-YpNF0Z.cjs → form-CAF0euT-.cjs} +2 -2
- package/dist/{form-C-YpNF0Z.cjs.map → form-CAF0euT-.cjs.map} +1 -1
- package/dist/{form-DWz7p8Ru.js → form-TYgVfN5V.js} +2 -2
- package/dist/{form-DWz7p8Ru.js.map → form-TYgVfN5V.js.map} +1 -1
- package/dist/form.cjs +1 -1
- package/dist/form.js +1 -1
- package/dist/{icon-D_0MYmHT.cjs → icon-BfNj3hF_.cjs} +2 -2
- package/dist/{icon-D_0MYmHT.cjs.map → icon-BfNj3hF_.cjs.map} +1 -1
- package/dist/{icon-D-o0ZArk.js → icon-DyP6UK-M.js} +2 -2
- package/dist/{icon-D-o0ZArk.js.map → icon-DyP6UK-M.js.map} +1 -1
- package/dist/{icon-button-fT0E5fJN.cjs → icon-button-C1_Q6BIo.cjs} +2 -2
- package/dist/{icon-button-fT0E5fJN.cjs.map → icon-button-C1_Q6BIo.cjs.map} +1 -1
- package/dist/{icon-button-6K7j0Ifl.js → icon-button-D6wuhOIL.js} +3 -3
- package/dist/{icon-button-6K7j0Ifl.js.map → icon-button-D6wuhOIL.js.map} +1 -1
- package/dist/icons.cjs +1 -1
- package/dist/icons.js +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.js +41 -41
- package/dist/{input-y7H2rS_c.cjs → input-CYeF5NKp.cjs} +2 -2
- package/dist/{input-y7H2rS_c.cjs.map → input-CYeF5NKp.cjs.map} +1 -1
- package/dist/{input-3-d9ijGr.js → input-qU80f6at.js} +2 -2
- package/dist/{input-3-d9ijGr.js.map → input-qU80f6at.js.map} +1 -1
- package/dist/input.cjs +1 -1
- package/dist/input.js +1 -1
- package/dist/layout.cjs +1 -1
- package/dist/layout.js +1 -1
- package/dist/{list-CQCRYpMc.cjs → list-DRfm5GoN.cjs} +2 -2
- package/dist/{list-CQCRYpMc.cjs.map → list-DRfm5GoN.cjs.map} +1 -1
- package/dist/{list-DdZ0XbRC.js → list-DTjKdEH7.js} +2 -2
- package/dist/{list-DdZ0XbRC.js.map → list-DTjKdEH7.js.map} +1 -1
- package/dist/list.cjs +1 -1
- package/dist/list.js +1 -1
- package/dist/{litElement.mixin-DCTPuIQ4.js → litElement.mixin-_JOzinzX.js} +2 -2
- package/dist/{litElement.mixin-DCTPuIQ4.js.map → litElement.mixin-_JOzinzX.js.map} +1 -1
- package/dist/{litElement.mixin-DcYItU_Y.cjs → litElement.mixin-wITTIH5B.cjs} +2 -2
- package/dist/{litElement.mixin-DcYItU_Y.cjs.map → litElement.mixin-wITTIH5B.cjs.map} +1 -1
- package/dist/{menu-BBeCodjv.js → menu-BWlmvpzL.js} +3 -3
- package/dist/{menu-BBeCodjv.js.map → menu-BWlmvpzL.js.map} +1 -1
- package/dist/{menu-DTNNwC3X.cjs → menu-DBwUuoHK.cjs} +2 -2
- package/dist/{menu-DTNNwC3X.cjs.map → menu-DBwUuoHK.cjs.map} +1 -1
- package/dist/menu.cjs +1 -1
- package/dist/menu.js +1 -1
- package/dist/nav-drawer.cjs +1 -1
- package/dist/nav-drawer.js +1 -1
- package/dist/{notification-service-Dw1vWE8m.cjs → notification-service-BdQ0LnCR.cjs} +2 -2
- package/dist/{notification-service-Dw1vWE8m.cjs.map → notification-service-BdQ0LnCR.cjs.map} +1 -1
- package/dist/{notification-service-cV_jYoFM.js → notification-service-CTvp72RJ.js} +3 -3
- package/dist/{notification-service-cV_jYoFM.js.map → notification-service-CTvp72RJ.js.map} +1 -1
- package/dist/notification.cjs +1 -1
- package/dist/notification.js +1 -1
- package/dist/{option-BkYybtqQ.cjs → option-CvHLVjDZ.cjs} +2 -2
- package/dist/{option-BkYybtqQ.cjs.map → option-CvHLVjDZ.cjs.map} +1 -1
- package/dist/{option-D9kAMX93.js → option-CwMxqwog.js} +2 -2
- package/dist/{option-D9kAMX93.js.map → option-CwMxqwog.js.map} +1 -1
- package/dist/option.cjs +1 -1
- package/dist/option.js +1 -1
- package/dist/{payment-card-form-CLRmWodS.cjs → payment-card-form-Do9X2R3c.cjs} +2 -2
- package/dist/{payment-card-form-CLRmWodS.cjs.map → payment-card-form-Do9X2R3c.cjs.map} +1 -1
- package/dist/{payment-card-form-C2X4AyyB.js → payment-card-form-T9CxpmFq.js} +3 -3
- package/dist/{payment-card-form-C2X4AyyB.js.map → payment-card-form-T9CxpmFq.js.map} +1 -1
- package/dist/{radio-button-b-3WocDM.cjs → radio-button-BwnqFF61.cjs} +2 -2
- package/dist/{radio-button-b-3WocDM.cjs.map → radio-button-BwnqFF61.cjs.map} +1 -1
- package/dist/{radio-button-C0IThgUp.js → radio-button-DlYGoRGV.js} +2 -2
- package/dist/{radio-button-C0IThgUp.js.map → radio-button-DlYGoRGV.js.map} +1 -1
- package/dist/radio-group.cjs +1 -1
- package/dist/radio-group.js +1 -1
- package/dist/{schmancy-steps-container-B1pLiWXH.js → schmancy-steps-container-CircxoUg.js} +2 -2
- package/dist/{schmancy-steps-container-B1pLiWXH.js.map → schmancy-steps-container-CircxoUg.js.map} +1 -1
- package/dist/{schmancy-steps-container-zat0B8ZS.cjs → schmancy-steps-container-n8M5N6Ny.cjs} +2 -2
- package/dist/{schmancy-steps-container-zat0B8ZS.cjs.map → schmancy-steps-container-n8M5N6Ny.cjs.map} +1 -1
- package/dist/{select-DsFHJyZw.cjs → select-BUpVOffr.cjs} +2 -2
- package/dist/{select-DsFHJyZw.cjs.map → select-BUpVOffr.cjs.map} +1 -1
- package/dist/{select-BLI7oX60.js → select-CZxy4aLz.js} +3 -3
- package/dist/{select-BLI7oX60.js.map → select-CZxy4aLz.js.map} +1 -1
- package/dist/select.cjs +1 -1
- package/dist/select.js +1 -1
- package/dist/{sheet-xbPPu7eJ.cjs → sheet-C_yWh1Lq.cjs} +2 -2
- package/dist/{sheet-xbPPu7eJ.cjs.map → sheet-C_yWh1Lq.cjs.map} +1 -1
- package/dist/{sheet-cxQG63jb.js → sheet-Du6Heozy.js} +3 -3
- package/dist/{sheet-cxQG63jb.js.map → sheet-Du6Heozy.js.map} +1 -1
- package/dist/sheet.cjs +1 -1
- package/dist/sheet.js +1 -1
- package/dist/{slider-D5GAJBtp.js → slider-BUYRt3Jr.js} +3 -3
- package/dist/{slider-D5GAJBtp.js.map → slider-BUYRt3Jr.js.map} +1 -1
- package/dist/{slider-DI42q9wf.cjs → slider-mAQ1m-p-.cjs} +2 -2
- package/dist/{slider-DI42q9wf.cjs.map → slider-mAQ1m-p-.cjs.map} +1 -1
- package/dist/slider.cjs +1 -1
- package/dist/slider.js +1 -1
- package/dist/{spinner-jxwBlOT6.js → spinner-C0BhuVQ7.js} +3 -3
- package/dist/{spinner-jxwBlOT6.js.map → spinner-C0BhuVQ7.js.map} +1 -1
- package/dist/{spinner-I_J8koHo.cjs → spinner-Cl9aDOKe.cjs} +2 -2
- package/dist/{spinner-I_J8koHo.cjs.map → spinner-Cl9aDOKe.cjs.map} +1 -1
- package/dist/steps.cjs +1 -1
- package/dist/steps.js +1 -1
- package/dist/{surface-KO5G93q6.js → surface-B92ldOHj.js} +2 -2
- package/dist/{surface-KO5G93q6.js.map → surface-B92ldOHj.js.map} +1 -1
- package/dist/{surface-CgjTa2At.cjs → surface-CPlFZxyL.cjs} +2 -2
- package/dist/{surface-CgjTa2At.cjs.map → surface-CPlFZxyL.cjs.map} +1 -1
- package/dist/surface.cjs +1 -1
- package/dist/surface.js +1 -1
- package/dist/{table-tMVVNYqd.cjs → table-C6ei99v9.cjs} +2 -2
- package/dist/{table-tMVVNYqd.cjs.map → table-C6ei99v9.cjs.map} +1 -1
- package/dist/{table-ae8AvxxX.js → table-CHUZ7fA2.js} +2 -2
- package/dist/{table-ae8AvxxX.js.map → table-CHUZ7fA2.js.map} +1 -1
- package/dist/table.cjs +1 -1
- package/dist/table.js +1 -1
- package/dist/{tabs-compatibility-K7hN1FMS.cjs → tabs-compatibility-BvPyuFBg.cjs} +2 -2
- package/dist/{tabs-compatibility-K7hN1FMS.cjs.map → tabs-compatibility-BvPyuFBg.cjs.map} +1 -1
- package/dist/{tabs-compatibility-DgqIx0_d.js → tabs-compatibility-gxIh5AEJ.js} +2 -2
- package/dist/{tabs-compatibility-DgqIx0_d.js.map → tabs-compatibility-gxIh5AEJ.js.map} +1 -1
- package/dist/tabs.cjs +1 -1
- package/dist/tabs.js +1 -1
- package/dist/tailwind.mixin-410noD6d.js +43 -0
- package/dist/{tailwind.mixin-BPIDvfDe.js.map → tailwind.mixin-410noD6d.js.map} +1 -1
- package/dist/tailwind.mixin-CVwT3arh.cjs +2 -0
- package/dist/{tailwind.mixin-DWvvleWP.cjs.map → tailwind.mixin-CVwT3arh.cjs.map} +1 -1
- package/dist/teleport.cjs +1 -1
- package/dist/teleport.js +1 -1
- package/dist/{textarea-DlxS_YbV.cjs → textarea-DILQEma0.cjs} +2 -2
- package/dist/{textarea-DlxS_YbV.cjs.map → textarea-DILQEma0.cjs.map} +1 -1
- package/dist/{textarea-Coqtz8dI.js → textarea-g0WFvdSE.js} +2 -2
- package/dist/{textarea-Coqtz8dI.js.map → textarea-g0WFvdSE.js.map} +1 -1
- package/dist/textarea.cjs +1 -1
- package/dist/textarea.js +1 -1
- package/dist/{theme-button-aGO9tJ2X.js → theme-button-BMnRNiv-.js} +2 -2
- package/dist/{theme-button-aGO9tJ2X.js.map → theme-button-BMnRNiv-.js.map} +1 -1
- package/dist/{theme-button-MLe6lqim.cjs → theme-button-BpOsDZZm.cjs} +2 -2
- package/dist/{theme-button-MLe6lqim.cjs.map → theme-button-BpOsDZZm.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.component-DtSJBwyz.js → theme.component-BamqpWkH.js} +2 -2
- package/dist/{theme.component-DtSJBwyz.js.map → theme.component-BamqpWkH.js.map} +1 -1
- package/dist/{theme.component-Bhodmw04.cjs → theme.component-DaeNFfKX.cjs} +2 -2
- package/dist/{theme.component-Bhodmw04.cjs.map → theme.component-DaeNFfKX.cjs.map} +1 -1
- package/dist/theme.js +1 -1
- package/dist/{timezone-DRzBs7kc.js → timezone-BRUaHb9f.js} +3 -3
- package/dist/{timezone-DRzBs7kc.js.map → timezone-BRUaHb9f.js.map} +1 -1
- package/dist/{timezone-MNEWy4jq.cjs → timezone-Bo6f4JAz.cjs} +2 -2
- package/dist/{timezone-MNEWy4jq.cjs.map → timezone-Bo6f4JAz.cjs.map} +1 -1
- package/dist/{tooltip-CyHXFI4n.js → tooltip-BAIFXAvm.js} +2 -2
- package/dist/{tooltip-CyHXFI4n.js.map → tooltip-BAIFXAvm.js.map} +1 -1
- package/dist/{tooltip-DXepH6lG.cjs → tooltip-Cdk5FVq0.cjs} +2 -2
- package/dist/{tooltip-DXepH6lG.cjs.map → tooltip-Cdk5FVq0.cjs.map} +1 -1
- package/dist/tooltip.cjs +1 -1
- package/dist/tooltip.js +1 -1
- package/dist/{tree-BDvR_Ooq.js → tree-CW1cqb3H.js} +2 -2
- package/dist/{tree-BDvR_Ooq.js.map → tree-CW1cqb3H.js.map} +1 -1
- package/dist/{tree-BkqvB6rh.cjs → tree-CXf7ucSK.cjs} +2 -2
- package/dist/{tree-BkqvB6rh.cjs.map → tree-CXf7ucSK.cjs.map} +1 -1
- package/dist/tree.cjs +1 -1
- package/dist/tree.js +1 -1
- package/dist/{typewriter-B1uzg12Z.js → typewriter-DAemjpmH.js} +4 -4
- package/dist/{typewriter-B1uzg12Z.js.map → typewriter-DAemjpmH.js.map} +1 -1
- package/dist/{typewriter-CoOcshun.cjs → typewriter-DWChIcCl.cjs} +2 -2
- package/dist/{typewriter-CoOcshun.cjs.map → typewriter-DWChIcCl.cjs.map} +1 -1
- package/dist/typewriter.cjs +1 -1
- package/dist/typewriter.js +1 -1
- package/dist/{typography-CRa9BYOd.cjs → typography-Cdamb7lz.cjs} +2 -2
- package/dist/{typography-CRa9BYOd.cjs.map → typography-Cdamb7lz.cjs.map} +1 -1
- package/dist/{typography-BoHmbEy7.js → typography-j1HmQzWs.js} +2 -2
- package/dist/{typography-BoHmbEy7.js.map → typography-j1HmQzWs.js.map} +1 -1
- package/dist/typography.cjs +1 -1
- package/dist/typography.js +1 -1
- package/package.json +1 -1
- package/types/src/layout/flex/flex.d.ts +10 -0
- package/types/src/layout/grid/grid.d.ts +10 -0
- package/types/src/layout/layout.d.ts +10 -0
- package/types/src/layout/v2/flex.d.ts +9 -0
- package/dist/flex-DFGC-5rG.js.map +0 -1
- package/dist/flex-Dfk62-Dn.cjs.map +0 -1
- package/dist/tailwind.mixin-BPIDvfDe.js +0 -43
- package/dist/tailwind.mixin-DWvvleWP.cjs +0 -2
package/dist/ai/layout.md
CHANGED
|
@@ -1,166 +1,187 @@
|
|
|
1
1
|
# Schmancy Layout - AI Reference
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
3
|
+
## ⚠️ DEPRECATION NOTICE
|
|
4
|
+
|
|
5
|
+
The following layout components are **deprecated** and will be removed in a future version:
|
|
6
|
+
- `<schmancy-grid>` - Use Tailwind CSS grid classes instead
|
|
7
|
+
- `<schmancy-flex>` - Use Tailwind CSS flex classes instead
|
|
8
|
+
- `<sch-flex>` - Use Tailwind CSS flex classes instead
|
|
9
|
+
- Layout base class - Use Tailwind utilities directly
|
|
10
|
+
|
|
11
|
+
### Migration Guide
|
|
12
|
+
|
|
13
|
+
```html
|
|
14
|
+
<!-- OLD (deprecated) -->
|
|
15
|
+
<schmancy-grid columns="3" gap="16px">
|
|
16
16
|
<div>Item 1</div>
|
|
17
17
|
<div>Item 2</div>
|
|
18
18
|
<div>Item 3</div>
|
|
19
19
|
</schmancy-grid>
|
|
20
20
|
|
|
21
|
-
|
|
22
|
-
<
|
|
23
|
-
columns="repeat(12, 1fr)"
|
|
24
|
-
rows="auto auto 1fr"
|
|
25
|
-
template-areas="
|
|
26
|
-
'header header header header'
|
|
27
|
-
'sidebar content content content'
|
|
28
|
-
'footer footer footer footer'
|
|
29
|
-
">
|
|
30
|
-
<div style="grid-area: header">Header</div>
|
|
31
|
-
<div style="grid-area: sidebar">Sidebar</div>
|
|
32
|
-
<div style="grid-area: content">Content</div>
|
|
33
|
-
<div style="grid-area: footer">Footer</div>
|
|
34
|
-
</schmancy-grid>
|
|
35
|
-
|
|
36
|
-
// Flex Layout
|
|
37
|
-
<schmancy-flex
|
|
38
|
-
direction="row|column|row-reverse|column-reverse"
|
|
39
|
-
wrap="nowrap|wrap|wrap-reverse"
|
|
40
|
-
justify-content="start|center|end|space-between|space-around|space-evenly"
|
|
41
|
-
align-items="start|center|end|stretch|baseline"
|
|
42
|
-
align-content="start|center|end|space-between|space-around|space-evenly"
|
|
43
|
-
gap="16px" // Gap between items
|
|
44
|
-
column-gap="16px" // Column-specific gap
|
|
45
|
-
row-gap="16px"> // Row-specific gap
|
|
46
|
-
|
|
21
|
+
<!-- NEW (recommended) -->
|
|
22
|
+
<div class="grid grid-cols-3 gap-4">
|
|
47
23
|
<div>Item 1</div>
|
|
48
24
|
<div>Item 2</div>
|
|
49
|
-
<div
|
|
25
|
+
<div>Item 3</div>
|
|
26
|
+
</div>
|
|
27
|
+
|
|
28
|
+
<!-- OLD (deprecated) -->
|
|
29
|
+
<schmancy-flex direction="row" gap="16px" justify-content="space-between">
|
|
30
|
+
<div>Left</div>
|
|
31
|
+
<div>Right</div>
|
|
50
32
|
</schmancy-flex>
|
|
51
33
|
|
|
52
|
-
|
|
53
|
-
<
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
gap="8px"
|
|
59
|
-
gap-md="16px"
|
|
60
|
-
gap-lg="24px">
|
|
61
|
-
|
|
62
|
-
<!-- Content -->
|
|
63
|
-
</schmancy-grid>
|
|
34
|
+
<!-- NEW (recommended) -->
|
|
35
|
+
<div class="flex flex-row gap-4 justify-between">
|
|
36
|
+
<div>Left</div>
|
|
37
|
+
<div>Right</div>
|
|
38
|
+
</div>
|
|
39
|
+
```
|
|
64
40
|
|
|
65
|
-
|
|
66
|
-
direction="column"
|
|
67
|
-
direction-md="row"
|
|
68
|
-
align-items="center"
|
|
69
|
-
justify-content-md="space-between">
|
|
70
|
-
|
|
71
|
-
<!-- Content -->
|
|
72
|
-
</schmancy-flex>
|
|
41
|
+
## Modern Layout Approach with Tailwind CSS
|
|
73
42
|
|
|
74
|
-
|
|
75
|
-
<schmancy-scroll
|
|
76
|
-
direction="vertical|horizontal|both"
|
|
77
|
-
scrollbar="auto|always|hover|none">
|
|
78
|
-
|
|
79
|
-
<!-- Scrollable content -->
|
|
80
|
-
</schmancy-scroll>
|
|
43
|
+
Instead of using deprecated layout components, use Tailwind CSS utilities directly:
|
|
81
44
|
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
</schmancy-flex-v2>
|
|
94
|
-
|
|
95
|
-
<schmancy-grid-v2
|
|
96
|
-
display="grid|inline-grid"
|
|
97
|
-
template-columns="1fr 1fr|repeat(3, 1fr)"
|
|
98
|
-
template-rows="auto|1fr auto"
|
|
99
|
-
template-areas="'header header' 'sidebar content' 'footer footer'"
|
|
100
|
-
gap="none|xs|sm|md|lg|xl"
|
|
101
|
-
justify-content="start|end|center|stretch|space-around|space-between|space-evenly"
|
|
102
|
-
align-content="start|end|center|stretch|space-around|space-between|space-evenly"
|
|
103
|
-
justify-items="start|end|center|stretch"
|
|
104
|
-
align-items="start|end|center|stretch">
|
|
105
|
-
|
|
106
|
-
<!-- Content -->
|
|
107
|
-
</schmancy-grid-v2>
|
|
108
|
-
|
|
109
|
-
// Examples
|
|
110
|
-
// Responsive grid layout
|
|
111
|
-
<schmancy-grid
|
|
112
|
-
columns="1"
|
|
113
|
-
columns-md="2"
|
|
114
|
-
columns-lg="4"
|
|
115
|
-
gap="16px">
|
|
45
|
+
### Grid Layouts
|
|
46
|
+
```html
|
|
47
|
+
<!-- Basic grid -->
|
|
48
|
+
<div class="grid grid-cols-3 gap-4">
|
|
49
|
+
<div>Item 1</div>
|
|
50
|
+
<div>Item 2</div>
|
|
51
|
+
<div>Item 3</div>
|
|
52
|
+
</div>
|
|
53
|
+
|
|
54
|
+
<!-- Responsive grid -->
|
|
55
|
+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
116
56
|
<div>Card 1</div>
|
|
117
57
|
<div>Card 2</div>
|
|
118
58
|
<div>Card 3</div>
|
|
119
59
|
<div>Card 4</div>
|
|
120
|
-
</
|
|
60
|
+
</div>
|
|
61
|
+
|
|
62
|
+
<!-- Grid with template areas -->
|
|
63
|
+
<div class="grid grid-rows-[auto_1fr_auto] grid-cols-[250px_1fr] h-screen">
|
|
64
|
+
<header class="col-span-2">Header</header>
|
|
65
|
+
<aside>Sidebar</aside>
|
|
66
|
+
<main>Content</main>
|
|
67
|
+
<footer class="col-span-2">Footer</footer>
|
|
68
|
+
</div>
|
|
69
|
+
```
|
|
121
70
|
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
<
|
|
71
|
+
### Flex Layouts
|
|
72
|
+
```html
|
|
73
|
+
<!-- Basic flex -->
|
|
74
|
+
<div class="flex gap-4">
|
|
75
|
+
<div>Item 1</div>
|
|
76
|
+
<div>Item 2</div>
|
|
77
|
+
<div class="flex-1">Flexible Item</div>
|
|
78
|
+
</div>
|
|
79
|
+
|
|
80
|
+
<!-- Column direction with alignment -->
|
|
81
|
+
<div class="flex flex-col items-center gap-4">
|
|
82
|
+
<h2>Title</h2>
|
|
83
|
+
<p>Content</p>
|
|
84
|
+
<button>Action</button>
|
|
85
|
+
</div>
|
|
86
|
+
|
|
87
|
+
<!-- Responsive flex -->
|
|
88
|
+
<div class="flex flex-col md:flex-row items-center md:justify-between gap-4">
|
|
89
|
+
<div>Logo</div>
|
|
90
|
+
<nav class="flex gap-2">
|
|
91
|
+
<a href="#">Link 1</a>
|
|
92
|
+
<a href="#">Link 2</a>
|
|
93
|
+
</nav>
|
|
94
|
+
</div>
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
### Common Layout Patterns
|
|
98
|
+
|
|
99
|
+
```html
|
|
100
|
+
<!-- Form layout -->
|
|
101
|
+
<form class="flex flex-col gap-4 max-w-md mx-auto">
|
|
102
|
+
<h2 class="text-2xl font-bold">Contact Form</h2>
|
|
127
103
|
<schmancy-input label="Name"></schmancy-input>
|
|
128
104
|
<schmancy-input label="Email"></schmancy-input>
|
|
129
105
|
<schmancy-textarea label="Message"></schmancy-textarea>
|
|
130
106
|
|
|
131
|
-
<
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
gap="8px">
|
|
135
|
-
<schmancy-button kind="secondary">Cancel</schmancy-button>
|
|
136
|
-
<schmancy-button kind="primary">Submit</schmancy-button>
|
|
137
|
-
</schmancy-flex>
|
|
138
|
-
</schmancy-flex>
|
|
139
|
-
|
|
140
|
-
// App layout with header, sidebar and content
|
|
141
|
-
<schmancy-grid
|
|
142
|
-
style="height: 100vh"
|
|
143
|
-
template-areas="
|
|
144
|
-
'header header'
|
|
145
|
-
'sidebar content'
|
|
146
|
-
"
|
|
147
|
-
template-rows="64px 1fr"
|
|
148
|
-
template-columns="250px 1fr">
|
|
149
|
-
|
|
150
|
-
<div style="grid-area: header">
|
|
151
|
-
<schmancy-appbar>App Title</schmancy-appbar>
|
|
107
|
+
<div class="flex gap-2 justify-end">
|
|
108
|
+
<schmancy-button variant="outlined">Cancel</schmancy-button>
|
|
109
|
+
<schmancy-button variant="filled">Submit</schmancy-button>
|
|
152
110
|
</div>
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
111
|
+
</form>
|
|
112
|
+
|
|
113
|
+
<!-- App layout -->
|
|
114
|
+
<div class="grid grid-rows-[auto_1fr] h-screen">
|
|
115
|
+
<header class="border-b">
|
|
116
|
+
<!-- Navigation -->
|
|
117
|
+
</header>
|
|
118
|
+
<div class="grid grid-cols-[250px_1fr]">
|
|
119
|
+
<aside class="border-r">
|
|
120
|
+
<!-- Sidebar -->
|
|
121
|
+
</aside>
|
|
122
|
+
<main class="overflow-auto p-4">
|
|
123
|
+
<!-- Content -->
|
|
124
|
+
</main>
|
|
160
125
|
</div>
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
</schmancy-
|
|
126
|
+
</div>
|
|
127
|
+
|
|
128
|
+
<!-- Card grid -->
|
|
129
|
+
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 p-6">
|
|
130
|
+
<schmancy-card>Card 1</schmancy-card>
|
|
131
|
+
<schmancy-card>Card 2</schmancy-card>
|
|
132
|
+
<schmancy-card>Card 3</schmancy-card>
|
|
133
|
+
</div>
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
### Useful Tailwind Classes
|
|
137
|
+
|
|
138
|
+
#### Grid
|
|
139
|
+
- `grid` - Display grid
|
|
140
|
+
- `grid-cols-{n}` - Number of columns
|
|
141
|
+
- `grid-rows-{n}` - Number of rows
|
|
142
|
+
- `gap-{size}` - Gap between items
|
|
143
|
+
- `col-span-{n}` - Column span
|
|
144
|
+
- `row-span-{n}` - Row span
|
|
145
|
+
- `place-items-{align}` - Align items
|
|
146
|
+
- `place-content-{align}` - Align content
|
|
147
|
+
|
|
148
|
+
#### Flex
|
|
149
|
+
- `flex` - Display flex
|
|
150
|
+
- `flex-row` / `flex-col` - Direction
|
|
151
|
+
- `flex-wrap` / `flex-nowrap` - Wrapping
|
|
152
|
+
- `items-{align}` - Align items
|
|
153
|
+
- `justify-{align}` - Justify content
|
|
154
|
+
- `gap-{size}` - Gap between items
|
|
155
|
+
- `flex-1` / `flex-none` - Flex grow/shrink
|
|
156
|
+
|
|
157
|
+
#### Spacing
|
|
158
|
+
- `p-{size}` - Padding
|
|
159
|
+
- `m-{size}` - Margin
|
|
160
|
+
- `space-x-{size}` - Horizontal spacing
|
|
161
|
+
- `space-y-{size}` - Vertical spacing
|
|
162
|
+
|
|
163
|
+
#### Sizing
|
|
164
|
+
- `w-{size}` - Width
|
|
165
|
+
- `h-{size}` - Height
|
|
166
|
+
- `min-w-{size}` - Min width
|
|
167
|
+
- `max-w-{size}` - Max width
|
|
168
|
+
- `min-h-{size}` - Min height
|
|
169
|
+
- `max-h-{size}` - Max height
|
|
170
|
+
|
|
171
|
+
## Non-Deprecated Components
|
|
172
|
+
|
|
173
|
+
### Scroll Container (if available)
|
|
174
|
+
```html
|
|
175
|
+
<schmancy-scroll
|
|
176
|
+
direction="vertical|horizontal|both"
|
|
177
|
+
scrollbar="auto|always|hover|none">
|
|
178
|
+
<!-- Scrollable content -->
|
|
179
|
+
</schmancy-scroll>
|
|
180
|
+
```
|
|
181
|
+
|
|
182
|
+
For most cases, use Tailwind's overflow utilities instead:
|
|
183
|
+
```html
|
|
184
|
+
<div class="overflow-auto h-64">
|
|
185
|
+
<!-- Scrollable content -->
|
|
186
|
+
</div>
|
|
166
187
|
```
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { concat as u, interval as g, startWith as y, filter as h, take as d, fromEvent as f, throttleTime as w, map as b, distinctUntilChanged as $, tap as c } from "rxjs";
|
|
2
2
|
import "lit/directives/class-map.js";
|
|
3
3
|
import "lit/directives/style-map.js";
|
|
4
|
-
import { $ as x } from "./litElement.mixin-
|
|
5
|
-
import "./tailwind.mixin-
|
|
4
|
+
import { $ as x } from "./litElement.mixin-_JOzinzX.js";
|
|
5
|
+
import "./tailwind.mixin-410noD6d.js";
|
|
6
6
|
import { css as S, html as Z } from "lit";
|
|
7
7
|
import { property as a, queryAssignedNodes as v, query as m, customElement as A } from "lit/decorators.js";
|
|
8
8
|
var E = Object.defineProperty, O = Object.getOwnPropertyDescriptor, e = (r, s, n, i) => {
|
|
@@ -72,4 +72,4 @@ let t = class extends x(S`
|
|
|
72
72
|
}
|
|
73
73
|
};
|
|
74
74
|
e([a({ type: String })], t.prototype, "ease", 2), e([a({ type: Number })], t.prototype, "delay", 2), e([a({ type: Number })], t.prototype, "stagger", 2), e([a({ type: Number })], t.prototype, "duration", 2), e([a({ type: Array })], t.prototype, "scale", 2), e([a({ type: Array })], t.prototype, "opacity", 2), e([a({ type: Array })], t.prototype, "translateX", 2), e([a({ type: Array })], t.prototype, "translateY", 2), e([a({ type: Array })], t.prototype, "translateZ", 2), e([a({ type: Array })], t.prototype, "rotateZ", 2), e([a({ type: Boolean })], t.prototype, "resetOnScroll", 2), e([v()], t.prototype, "defaultSlot", 2), e([m(".letters")], t.prototype, "letters", 2), e([m(".ml7")], t.prototype, "ml7", 2), t = e([A("schmancy-animated-text")], t);
|
|
75
|
-
//# sourceMappingURL=animated-text-
|
|
75
|
+
//# sourceMappingURL=animated-text-Bd3rsLJs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"animated-text-B2RjyIK5.js","sources":["../src/animated-text/animated-text.ts"],"sourcesContent":["// Removed: import { createTimeline, stagger } from '@packages/anime-beta-master'\nimport { $LitElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property, query, queryAssignedNodes } from 'lit/decorators.js'\nimport {\n\tconcat,\n\tdistinctUntilChanged,\n\tfilter,\n\tfromEvent,\n\tinterval,\n\tmap,\n\tstartWith,\n\ttake,\n\ttap,\n\tthrottleTime,\n} from 'rxjs'\n\n/**\n * @element schmancy-animated-text\n * Inspired by https://tobiasahlin.com/moving-letters/#1\n */\n@customElement('schmancy-animated-text')\nexport default class SchmancyAnimatedText extends $LitElement(css`\n\t:host {\n\t\tfont-family: inherit;\n\t\tdisplay: block;\n\t}\n\t.ml7 {\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t}\n\t.ml7 .text-wrapper {\n\t\tposition: relative;\n\t\tdisplay: inline-block;\n\t\toverflow: hidden;\n\t}\n\t.ml7 .letter {\n\t\ttransform-origin: 0 100%;\n\t\tdisplay: inline-block;\n\t\topacity: 0;\n\t}\n`) {\n\t@property({ type: String }) ease = 'outExpo' // not a built-in string for Web Animations\n\t@property({ type: Number }) delay = 0\n\t@property({ type: Number }) stagger = 50\n\t@property({ type: Number }) duration = 750\n\t@property({ type: Array }) scale = [0, 1]\n\t@property({ type: Array }) opacity = [0, 1]\n\t@property({ type: Array }) translateX = ['0.55em', '0em']\n\t@property({ type: Array }) translateY = ['1.1em', '0em']\n\t@property({ type: Array }) translateZ = [0, 0]\n\t@property({ type: Array }) rotateZ = [180, 0]\n\t@property({ type: Boolean }) resetOnScroll = true\n\n\t@queryAssignedNodes() defaultSlot!: HTMLElement[]\n\t@query('.letters') letters!: HTMLElement\n\t@query('.ml7') ml7!: HTMLElement\n\n\t// Function to check if an element is in the viewport\n\tisInViewport(element: HTMLElement) {\n\t\tconst rect = element.getBoundingClientRect()\n\t\treturn (\n\t\t\trect.top >= 0 &&\n\t\t\trect.left >= 0 &&\n\t\t\trect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&\n\t\t\trect.right <= (window.innerWidth || document.documentElement.clientWidth)\n\t\t)\n\t}\n\n\tasync firstUpdated() {\n\t\t// Split the text into <span class=\"letter\"> ... </span> elements\n\t\tthis.letters.innerHTML = this.defaultSlot[0].textContent!.replace(/\\S/g, `<span class=\"letter\">$&</span>`)\n\n\t\t// Observe viewport + initial readiness\n\t\tconcat(\n\t\t\t// 1) Wait until the element is rendered (width/height > 0)\n\t\t\tinterval(10).pipe(\n\t\t\t\tstartWith(true),\n\t\t\t\tfilter(() => {\n\t\t\t\t\tconst rect = this.getBoundingClientRect()\n\t\t\t\t\treturn rect.width > 0 && rect.height > 0\n\t\t\t\t}),\n\t\t\t\ttake(1),\n\t\t\t),\n\t\t\t// 2) Then handle scroll events, throttled\n\t\t\tfromEvent(window, 'scroll').pipe(\n\t\t\t\tthrottleTime(0, undefined, {\n\t\t\t\t\tleading: true,\n\t\t\t\t\ttrailing: true,\n\t\t\t\t}),\n\t\t\t\tstartWith(true),\n\t\t\t\tmap(() => this.isInViewport(this)),\n\t\t\t\tdistinctUntilChanged(),\n\t\t\t\ttap(inViewport => {\n\t\t\t\t\t// If leaving viewport and `resetOnScroll` is true, reset letters to opacity 0\n\t\t\t\t\tif (!inViewport && this.resetOnScroll) {\n\t\t\t\t\t\tArray.from(this.letters.children).forEach((letter: HTMLElement) => {\n\t\t\t\t\t\t\tletter.style.opacity = '0'\n\t\t\t\t\t\t})\n\t\t\t\t\t}\n\t\t\t\t}),\n\t\t\t\tfilter(isInViewport => isInViewport),\n\t\t\t\t// If resetOnScroll = false, animate only the first time inView. If true, repeat.\n\t\t\t\tthis.resetOnScroll ? tap() : take(1),\n\t\t\t\ttap({\n\t\t\t\t\tnext: () => {\n\t\t\t\t\t\t// Animate letters with the native Web Animations API\n\t\t\t\t\t\tconst letters = this.shadowRoot!.querySelectorAll<HTMLElement>('.ml7 .letter')\n\n\t\t\t\t\t\tletters.forEach((letter, i) => {\n\t\t\t\t\t\t\t// Combine all transforms into one CSS transform string\n\t\t\t\t\t\t\t// From\n\t\t\t\t\t\t\tconst fromTransform = `\n translate3d(${this.translateX[0]}, ${this.translateY[0]}, ${this.translateZ[0]}px)\n rotateZ(${this.rotateZ[0]}deg)\n scale(${this.scale[0]})\n `\n\t\t\t\t\t\t\t// To\n\t\t\t\t\t\t\tconst toTransform = `\n translate3d(${this.translateX[1]}, ${this.translateY[1]}, ${this.translateZ[1]}px)\n rotateZ(${this.rotateZ[1]}deg)\n scale(${this.scale[1]})\n `\n\t\t\t\t\t\t\t// Approximate `outExpo` or pick a standard easing (like 'ease-out'):\n\t\t\t\t\t\t\t// outExpo often approximated by cubic-bezier(0.19, 1, 0.22, 1)\n\t\t\t\t\t\t\tconst easingMap: Record<string, string> = {\n\t\t\t\t\t\t\t\toutExpo: 'cubic-bezier(0.19, 1, 0.22, 1)',\n\t\t\t\t\t\t\t\t// add more if you want\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tconst keyframes: Keyframe[] = [\n\t\t\t\t\t\t\t\t{ transform: fromTransform, opacity: String(this.opacity[0]) },\n\t\t\t\t\t\t\t\t{ transform: toTransform, opacity: String(this.opacity[1]) },\n\t\t\t\t\t\t\t]\n\n\t\t\t\t\t\t\tletter.animate(keyframes, {\n\t\t\t\t\t\t\t\tduration: this.duration,\n\t\t\t\t\t\t\t\teasing: easingMap[this.ease] || 'ease-out',\n\t\t\t\t\t\t\t\tdelay: this.delay + i * this.stagger, // staggered start\n\t\t\t\t\t\t\t\tfill: 'forwards', // so the letters remain visible\n\t\t\t\t\t\t\t})\n\t\t\t\t\t\t})\n\t\t\t\t\t},\n\t\t\t\t}),\n\t\t\t),\n\t\t).subscribe()\n\t}\n\n\trender() {\n\t\treturn html`\n\t\t\t<span class=\"ml7\">\n\t\t\t\t<span class=\"text-wrapper\">\n\t\t\t\t\t<span class=\"letters\">\n\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t</span>\n\t\t\t\t</span>\n\t\t\t</span>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-animated-text': SchmancyAnimatedText\n\t}\n}\n"],"names":["SchmancyAnimatedText","$LitElement","css","super","arguments","this","ease","delay","stagger","duration","scale","opacity","translateX","translateY","translateZ","rotateZ","resetOnScroll","element","rect","getBoundingClientRect","top","left","bottom","window","innerHeight","document","documentElement","clientHeight","right","innerWidth","clientWidth","firstUpdated","letters","innerHTML","defaultSlot","textContent","replace","concat","interval","pipe","startWith","filter","width","height","take","fromEvent","throttleTime","leading","trailing","map","isInViewport","distinctUntilChanged","tap","inViewport","Array","from","children","forEach","letter","style","next","shadowRoot","querySelectorAll","i","fromTransform","toTransform","keyframes","transform","String","animate","easing","outExpo","fill","subscribe","html","__decorateClass","property","type","prototype","Number","Boolean","queryAssignedNodes","query","customElement"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"animated-text-Bd3rsLJs.js","sources":["../src/animated-text/animated-text.ts"],"sourcesContent":["// Removed: import { createTimeline, stagger } from '@packages/anime-beta-master'\nimport { $LitElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property, query, queryAssignedNodes } from 'lit/decorators.js'\nimport {\n\tconcat,\n\tdistinctUntilChanged,\n\tfilter,\n\tfromEvent,\n\tinterval,\n\tmap,\n\tstartWith,\n\ttake,\n\ttap,\n\tthrottleTime,\n} from 'rxjs'\n\n/**\n * @element schmancy-animated-text\n * Inspired by https://tobiasahlin.com/moving-letters/#1\n */\n@customElement('schmancy-animated-text')\nexport default class SchmancyAnimatedText extends $LitElement(css`\n\t:host {\n\t\tfont-family: inherit;\n\t\tdisplay: block;\n\t}\n\t.ml7 {\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t}\n\t.ml7 .text-wrapper {\n\t\tposition: relative;\n\t\tdisplay: inline-block;\n\t\toverflow: hidden;\n\t}\n\t.ml7 .letter {\n\t\ttransform-origin: 0 100%;\n\t\tdisplay: inline-block;\n\t\topacity: 0;\n\t}\n`) {\n\t@property({ type: String }) ease = 'outExpo' // not a built-in string for Web Animations\n\t@property({ type: Number }) delay = 0\n\t@property({ type: Number }) stagger = 50\n\t@property({ type: Number }) duration = 750\n\t@property({ type: Array }) scale = [0, 1]\n\t@property({ type: Array }) opacity = [0, 1]\n\t@property({ type: Array }) translateX = ['0.55em', '0em']\n\t@property({ type: Array }) translateY = ['1.1em', '0em']\n\t@property({ type: Array }) translateZ = [0, 0]\n\t@property({ type: Array }) rotateZ = [180, 0]\n\t@property({ type: Boolean }) resetOnScroll = true\n\n\t@queryAssignedNodes() defaultSlot!: HTMLElement[]\n\t@query('.letters') letters!: HTMLElement\n\t@query('.ml7') ml7!: HTMLElement\n\n\t// Function to check if an element is in the viewport\n\tisInViewport(element: HTMLElement) {\n\t\tconst rect = element.getBoundingClientRect()\n\t\treturn (\n\t\t\trect.top >= 0 &&\n\t\t\trect.left >= 0 &&\n\t\t\trect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&\n\t\t\trect.right <= (window.innerWidth || document.documentElement.clientWidth)\n\t\t)\n\t}\n\n\tasync firstUpdated() {\n\t\t// Split the text into <span class=\"letter\"> ... </span> elements\n\t\tthis.letters.innerHTML = this.defaultSlot[0].textContent!.replace(/\\S/g, `<span class=\"letter\">$&</span>`)\n\n\t\t// Observe viewport + initial readiness\n\t\tconcat(\n\t\t\t// 1) Wait until the element is rendered (width/height > 0)\n\t\t\tinterval(10).pipe(\n\t\t\t\tstartWith(true),\n\t\t\t\tfilter(() => {\n\t\t\t\t\tconst rect = this.getBoundingClientRect()\n\t\t\t\t\treturn rect.width > 0 && rect.height > 0\n\t\t\t\t}),\n\t\t\t\ttake(1),\n\t\t\t),\n\t\t\t// 2) Then handle scroll events, throttled\n\t\t\tfromEvent(window, 'scroll').pipe(\n\t\t\t\tthrottleTime(0, undefined, {\n\t\t\t\t\tleading: true,\n\t\t\t\t\ttrailing: true,\n\t\t\t\t}),\n\t\t\t\tstartWith(true),\n\t\t\t\tmap(() => this.isInViewport(this)),\n\t\t\t\tdistinctUntilChanged(),\n\t\t\t\ttap(inViewport => {\n\t\t\t\t\t// If leaving viewport and `resetOnScroll` is true, reset letters to opacity 0\n\t\t\t\t\tif (!inViewport && this.resetOnScroll) {\n\t\t\t\t\t\tArray.from(this.letters.children).forEach((letter: HTMLElement) => {\n\t\t\t\t\t\t\tletter.style.opacity = '0'\n\t\t\t\t\t\t})\n\t\t\t\t\t}\n\t\t\t\t}),\n\t\t\t\tfilter(isInViewport => isInViewport),\n\t\t\t\t// If resetOnScroll = false, animate only the first time inView. If true, repeat.\n\t\t\t\tthis.resetOnScroll ? tap() : take(1),\n\t\t\t\ttap({\n\t\t\t\t\tnext: () => {\n\t\t\t\t\t\t// Animate letters with the native Web Animations API\n\t\t\t\t\t\tconst letters = this.shadowRoot!.querySelectorAll<HTMLElement>('.ml7 .letter')\n\n\t\t\t\t\t\tletters.forEach((letter, i) => {\n\t\t\t\t\t\t\t// Combine all transforms into one CSS transform string\n\t\t\t\t\t\t\t// From\n\t\t\t\t\t\t\tconst fromTransform = `\n translate3d(${this.translateX[0]}, ${this.translateY[0]}, ${this.translateZ[0]}px)\n rotateZ(${this.rotateZ[0]}deg)\n scale(${this.scale[0]})\n `\n\t\t\t\t\t\t\t// To\n\t\t\t\t\t\t\tconst toTransform = `\n translate3d(${this.translateX[1]}, ${this.translateY[1]}, ${this.translateZ[1]}px)\n rotateZ(${this.rotateZ[1]}deg)\n scale(${this.scale[1]})\n `\n\t\t\t\t\t\t\t// Approximate `outExpo` or pick a standard easing (like 'ease-out'):\n\t\t\t\t\t\t\t// outExpo often approximated by cubic-bezier(0.19, 1, 0.22, 1)\n\t\t\t\t\t\t\tconst easingMap: Record<string, string> = {\n\t\t\t\t\t\t\t\toutExpo: 'cubic-bezier(0.19, 1, 0.22, 1)',\n\t\t\t\t\t\t\t\t// add more if you want\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tconst keyframes: Keyframe[] = [\n\t\t\t\t\t\t\t\t{ transform: fromTransform, opacity: String(this.opacity[0]) },\n\t\t\t\t\t\t\t\t{ transform: toTransform, opacity: String(this.opacity[1]) },\n\t\t\t\t\t\t\t]\n\n\t\t\t\t\t\t\tletter.animate(keyframes, {\n\t\t\t\t\t\t\t\tduration: this.duration,\n\t\t\t\t\t\t\t\teasing: easingMap[this.ease] || 'ease-out',\n\t\t\t\t\t\t\t\tdelay: this.delay + i * this.stagger, // staggered start\n\t\t\t\t\t\t\t\tfill: 'forwards', // so the letters remain visible\n\t\t\t\t\t\t\t})\n\t\t\t\t\t\t})\n\t\t\t\t\t},\n\t\t\t\t}),\n\t\t\t),\n\t\t).subscribe()\n\t}\n\n\trender() {\n\t\treturn html`\n\t\t\t<span class=\"ml7\">\n\t\t\t\t<span class=\"text-wrapper\">\n\t\t\t\t\t<span class=\"letters\">\n\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t</span>\n\t\t\t\t</span>\n\t\t\t</span>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-animated-text': SchmancyAnimatedText\n\t}\n}\n"],"names":["SchmancyAnimatedText","$LitElement","css","super","arguments","this","ease","delay","stagger","duration","scale","opacity","translateX","translateY","translateZ","rotateZ","resetOnScroll","element","rect","getBoundingClientRect","top","left","bottom","window","innerHeight","document","documentElement","clientHeight","right","innerWidth","clientWidth","firstUpdated","letters","innerHTML","defaultSlot","textContent","replace","concat","interval","pipe","startWith","filter","width","height","take","fromEvent","throttleTime","leading","trailing","map","isInViewport","distinctUntilChanged","tap","inViewport","Array","from","children","forEach","letter","style","next","shadowRoot","querySelectorAll","i","fromTransform","toTransform","keyframes","transform","String","animate","easing","outExpo","fill","subscribe","html","__decorateClass","property","type","prototype","Number","Boolean","queryAssignedNodes","query","customElement"],"mappings":";;;;;;;;;;;AAsBA,IAAqBA,IAArB,cAAkDC,EAAYC;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,CAA9D,EAAA;AAAA,EAAA,cAAAC;AAAAA,UAAAA,GAAAC,SAoBoCC,GAAAA,KAAAC,OAAA,WACCD,KAAAE,QAAA,GACEF,KAAAG,UAAA,IACCH,KAAAI,WAAA,KACJJ,KAAAK,QAAA,CAAC,GAAG,CAAA,GACFL,KAAAM,UAAA,CAAC,GAAG,CACDN,GAAAA,KAAAO,aAAA,CAAC,UAAU,KAAA,GACXP,KAAAQ,aAAA,CAAC,SAAS,KACVR,GAAAA,KAAAS,aAAA,CAAC,GAAG,CAAA,GACPT,KAAAU,UAAA,CAAC,KAAK,CACEV,GAAAA,KAAAW,gBAAA;AAAA,EAAA;AAAA,EAO7C,aAAaC,GAAAA;AACN,UAAAC,IAAOD,EAAQE,sBAAAA;AACrB,WACCD,EAAKE,OAAO,KACZF,EAAKG,QAAQ,KACbH,EAAKI,WAAWC,OAAOC,eAAeC,SAASC,gBAAgBC,iBAC/DT,EAAKU,UAAUL,OAAOM,cAAcJ,SAASC,gBAAgBI;AAAAA,EAAA;AAAA,EAI/D,MAAMC,eAAAA;AAEA1B,SAAA2B,QAAQC,YAAY5B,KAAK6B,YAAY,CAAA,EAAGC,YAAaC,QAAQ,OAAO,gCAAA,GAGzEC,EAECC,EAAS,EAAIC,EAAAA,KACZC,EAAU,EAAA,GACVC,EAAO,MAAA;AACA,YAAAvB,IAAOb,KAAKc,sBAAAA;AAClB,aAAOD,EAAKwB,QAAQ,KAAKxB,EAAKyB,SAAS;AAAA,IAAA,CAAA,GAExCC,EAAK,CAAA,CAAA,GAGNC,EAAUtB,QAAQ,QAAUgB,EAAAA,KAC3BO,EAAa,GAAA,QAAc,EAC1BC,SAAS,IACTC,UAAU,GAAA,CAAA,GAEXR,EAAU,EAAA,GACVS,EAAI,MAAM5C,KAAK6C,aAAa7C,IAC5B8C,CAAAA,GAAAA,EAAAA,GACAC,EAAkBC,CAAAA,MAAAA;AAAAA,OAEZA,KAAchD,KAAKW,iBACvBsC,MAAMC,KAAKlD,KAAK2B,QAAQwB,QAAAA,EAAUC,QAASC,CAAAA,MAAAA;AAC1CA,QAAAA,EAAOC,MAAMhD,UAAU;AAAA,MAAA,CACvB;AAAA,IAAA,CAAA,GAGH8B,SAAuBS,CAEvB7C,GAAAA,KAAKW,gBAAgBoC,EAAAA,IAAQR,EAAK,CAAA,GAClCQ,EAAI,EACHQ,MAAM,MAAA;AAEWvD,WAAKwD,WAAYC,iBAA8B,cAAA,EAEvDL,QAAQ,CAACC,GAAQK,MAAAA;AAGxB,cAAMC,IAAgB;AAAA,8BACC3D,KAAKO,WAAW,CAAA,CAAA,KAAOP,KAAKQ,WAAW,CAAOR,CAAAA,KAAAA,KAAKS,WAAW,CAAA,CAAA;AAAA,0BAClET,KAAKU,QAAQ,CACfV,CAAAA;AAAAA,wBAAAA,KAAKK,MAAM,CAAA,CAAA;AAAA,iBAGtBuD,IAAc;AAAA,8BACG5D,KAAKO,WAAW,CAAOP,CAAAA,KAAAA,KAAKQ,WAAW,CAAA,CAAA,KAAOR,KAAKS,WAAW,CAClET,CAAAA;AAAAA,0BAAAA,KAAKU,QAAQ,CAAA,CAAA;AAAA,wBACfV,KAAKK,MAAM,CAQtBwD,CAAAA;AAAAA,iBAAAA,IAAwB,CAC7B,EAAEC,WAAWH,GAAerD,SAASyD,OAAO/D,KAAKM,QAAQ,CACzD,CAAA,EAAA,GAAA,EAAEwD,WAAWF,GAAatD,SAASyD,OAAO/D,KAAKM,QAAQ,CAGxD+C,CAAAA,EAAAA,CAAAA;AAAAA,QAAAA,EAAOW,QAAQH,GAAW,EACzBzD,UAAUJ,KAAKI,UACf6D,QAXyC,EACzCC,SAAS,iCAAA,EAUSlE,KAAKC,IAAAA,KAAS,YAChCC,OAAOF,KAAKE,QAAQwD,IAAI1D,KAAKG,SAC7BgE,MAAM,WACN,CAAA;AAAA,MAAA,CAAA;AAAA,IACD,EAIHC,CAAAA,CAAAA,CAAAA,EAAAA,UAAAA;AAAAA,EAAU;AAAA,EAGb,SACQ;AAAA,WAAAC;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,EAAA;AAAA;AA1GoBC,EAAA,CAA3BC,EAAS,EAAEC,MAAMT,OAAAA,CAAAA,CAAAA,GApBEpE,EAoBQ8E,WAAA,QAAA,CAAA,GACAH,EAAA,CAA3BC,EAAS,EAAEC,MAAME,OArBE/E,CAAAA,CAAAA,GAAAA,EAqBQ8E,WAAA,SAAA,CACAH,GAAAA,EAAA,CAA3BC,EAAS,EAAEC,MAAME,OAAAA,CAAAA,CAAAA,GAtBE/E,EAsBQ8E,WAAA,WAAA,CAAA,GACAH,EAAA,CAA3BC,EAAS,EAAEC,MAAME,OAvBE/E,CAAAA,CAAAA,GAAAA,EAuBQ8E,WAAA,YAAA,CACDH,GAAAA,EAAA,CAA1BC,EAAS,EAAEC,MAAMvB,MAxBEtD,CAAAA,CAAAA,GAAAA,EAwBO8E,WAAA,SAAA,CAAA,GACAH,EAAA,CAA1BC,EAAS,EAAEC,MAAMvB,MAAAA,CAAAA,CAAAA,GAzBEtD,EAyBO8E,WAAA,WAAA,CACAH,GAAAA,EAAA,CAA1BC,EAAS,EAAEC,MAAMvB,WA1BEtD,EA0BO8E,WAAA,cAAA,CAAA,GACAH,EAAA,CAA1BC,EAAS,EAAEC,MAAMvB,MAAAA,CAAAA,CAAAA,GA3BEtD,EA2BO8E,WAAA,cAAA,CAAA,GACAH,EAAA,CAA1BC,EAAS,EAAEC,MAAMvB,MA5BEtD,CAAAA,CAAAA,GAAAA,EA4BO8E,WAAA,cAAA,CACAH,GAAAA,EAAA,CAA1BC,EAAS,EAAEC,MAAMvB,MAAAA,CAAAA,CAAAA,GA7BEtD,EA6BO8E,WAAA,WAAA,CAAA,GACEH,EAAA,CAA5BC,EAAS,EAAEC,MAAMG,QA9BEhF,CAAAA,CAAAA,GAAAA,EA8BS8E,WAAA,iBAAA,IAEPH,EAAA,CAArBM,EAhCmBjF,CAAAA,GAAAA,EAgCE8E,WAAA,eAAA,CACHH,GAAAA,EAAA,CAAlBO,EAAM,UAAA,CAAA,GAjCalF,EAiCD8E,WAAA,WAAA,CAAA,GACJH,EAAA,CAAdO,EAAM,MAlCalF,CAAAA,GAAAA,EAkCL8E,WAAA,OAAA,CAlCK9E,GAAAA,IAArB2E,EAAA,CADCQ,EAAc,wBACMnF,CAAAA,GAAAA,CAAAA;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";const e=require("rxjs");require("lit/directives/class-map.js"),require("lit/directives/style-map.js");const h=require("./litElement.mixin-
|
|
1
|
+
"use strict";const e=require("rxjs");require("lit/directives/class-map.js"),require("lit/directives/style-map.js");const h=require("./litElement.mixin-wITTIH5B.cjs");require("./tailwind.mixin-CVwT3arh.cjs");const c=require("lit"),r=require("lit/decorators.js");var d=Object.defineProperty,u=Object.getOwnPropertyDescriptor,s=(i,a,p,n)=>{for(var l,o=n>1?void 0:n?u(a,p):a,y=i.length-1;y>=0;y--)(l=i[y])&&(o=(n?l(a,p,o):l(o))||o);return n&&o&&d(a,p,o),o};let t=class extends h.$LitElement(c.css`
|
|
2
2
|
:host {
|
|
3
3
|
font-family: inherit;
|
|
4
4
|
display: block;
|
|
@@ -34,4 +34,4 @@
|
|
|
34
34
|
</span>
|
|
35
35
|
</span>
|
|
36
36
|
`}};s([r.property({type:String})],t.prototype,"ease",2),s([r.property({type:Number})],t.prototype,"delay",2),s([r.property({type:Number})],t.prototype,"stagger",2),s([r.property({type:Number})],t.prototype,"duration",2),s([r.property({type:Array})],t.prototype,"scale",2),s([r.property({type:Array})],t.prototype,"opacity",2),s([r.property({type:Array})],t.prototype,"translateX",2),s([r.property({type:Array})],t.prototype,"translateY",2),s([r.property({type:Array})],t.prototype,"translateZ",2),s([r.property({type:Array})],t.prototype,"rotateZ",2),s([r.property({type:Boolean})],t.prototype,"resetOnScroll",2),s([r.queryAssignedNodes()],t.prototype,"defaultSlot",2),s([r.query(".letters")],t.prototype,"letters",2),s([r.query(".ml7")],t.prototype,"ml7",2),t=s([r.customElement("schmancy-animated-text")],t);
|
|
37
|
-
//# sourceMappingURL=animated-text-
|
|
37
|
+
//# sourceMappingURL=animated-text-DgW2DQuG.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"animated-text-DuL0BVFF.cjs","sources":["../src/animated-text/animated-text.ts"],"sourcesContent":["// Removed: import { createTimeline, stagger } from '@packages/anime-beta-master'\nimport { $LitElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property, query, queryAssignedNodes } from 'lit/decorators.js'\nimport {\n\tconcat,\n\tdistinctUntilChanged,\n\tfilter,\n\tfromEvent,\n\tinterval,\n\tmap,\n\tstartWith,\n\ttake,\n\ttap,\n\tthrottleTime,\n} from 'rxjs'\n\n/**\n * @element schmancy-animated-text\n * Inspired by https://tobiasahlin.com/moving-letters/#1\n */\n@customElement('schmancy-animated-text')\nexport default class SchmancyAnimatedText extends $LitElement(css`\n\t:host {\n\t\tfont-family: inherit;\n\t\tdisplay: block;\n\t}\n\t.ml7 {\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t}\n\t.ml7 .text-wrapper {\n\t\tposition: relative;\n\t\tdisplay: inline-block;\n\t\toverflow: hidden;\n\t}\n\t.ml7 .letter {\n\t\ttransform-origin: 0 100%;\n\t\tdisplay: inline-block;\n\t\topacity: 0;\n\t}\n`) {\n\t@property({ type: String }) ease = 'outExpo' // not a built-in string for Web Animations\n\t@property({ type: Number }) delay = 0\n\t@property({ type: Number }) stagger = 50\n\t@property({ type: Number }) duration = 750\n\t@property({ type: Array }) scale = [0, 1]\n\t@property({ type: Array }) opacity = [0, 1]\n\t@property({ type: Array }) translateX = ['0.55em', '0em']\n\t@property({ type: Array }) translateY = ['1.1em', '0em']\n\t@property({ type: Array }) translateZ = [0, 0]\n\t@property({ type: Array }) rotateZ = [180, 0]\n\t@property({ type: Boolean }) resetOnScroll = true\n\n\t@queryAssignedNodes() defaultSlot!: HTMLElement[]\n\t@query('.letters') letters!: HTMLElement\n\t@query('.ml7') ml7!: HTMLElement\n\n\t// Function to check if an element is in the viewport\n\tisInViewport(element: HTMLElement) {\n\t\tconst rect = element.getBoundingClientRect()\n\t\treturn (\n\t\t\trect.top >= 0 &&\n\t\t\trect.left >= 0 &&\n\t\t\trect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&\n\t\t\trect.right <= (window.innerWidth || document.documentElement.clientWidth)\n\t\t)\n\t}\n\n\tasync firstUpdated() {\n\t\t// Split the text into <span class=\"letter\"> ... </span> elements\n\t\tthis.letters.innerHTML = this.defaultSlot[0].textContent!.replace(/\\S/g, `<span class=\"letter\">$&</span>`)\n\n\t\t// Observe viewport + initial readiness\n\t\tconcat(\n\t\t\t// 1) Wait until the element is rendered (width/height > 0)\n\t\t\tinterval(10).pipe(\n\t\t\t\tstartWith(true),\n\t\t\t\tfilter(() => {\n\t\t\t\t\tconst rect = this.getBoundingClientRect()\n\t\t\t\t\treturn rect.width > 0 && rect.height > 0\n\t\t\t\t}),\n\t\t\t\ttake(1),\n\t\t\t),\n\t\t\t// 2) Then handle scroll events, throttled\n\t\t\tfromEvent(window, 'scroll').pipe(\n\t\t\t\tthrottleTime(0, undefined, {\n\t\t\t\t\tleading: true,\n\t\t\t\t\ttrailing: true,\n\t\t\t\t}),\n\t\t\t\tstartWith(true),\n\t\t\t\tmap(() => this.isInViewport(this)),\n\t\t\t\tdistinctUntilChanged(),\n\t\t\t\ttap(inViewport => {\n\t\t\t\t\t// If leaving viewport and `resetOnScroll` is true, reset letters to opacity 0\n\t\t\t\t\tif (!inViewport && this.resetOnScroll) {\n\t\t\t\t\t\tArray.from(this.letters.children).forEach((letter: HTMLElement) => {\n\t\t\t\t\t\t\tletter.style.opacity = '0'\n\t\t\t\t\t\t})\n\t\t\t\t\t}\n\t\t\t\t}),\n\t\t\t\tfilter(isInViewport => isInViewport),\n\t\t\t\t// If resetOnScroll = false, animate only the first time inView. If true, repeat.\n\t\t\t\tthis.resetOnScroll ? tap() : take(1),\n\t\t\t\ttap({\n\t\t\t\t\tnext: () => {\n\t\t\t\t\t\t// Animate letters with the native Web Animations API\n\t\t\t\t\t\tconst letters = this.shadowRoot!.querySelectorAll<HTMLElement>('.ml7 .letter')\n\n\t\t\t\t\t\tletters.forEach((letter, i) => {\n\t\t\t\t\t\t\t// Combine all transforms into one CSS transform string\n\t\t\t\t\t\t\t// From\n\t\t\t\t\t\t\tconst fromTransform = `\n translate3d(${this.translateX[0]}, ${this.translateY[0]}, ${this.translateZ[0]}px)\n rotateZ(${this.rotateZ[0]}deg)\n scale(${this.scale[0]})\n `\n\t\t\t\t\t\t\t// To\n\t\t\t\t\t\t\tconst toTransform = `\n translate3d(${this.translateX[1]}, ${this.translateY[1]}, ${this.translateZ[1]}px)\n rotateZ(${this.rotateZ[1]}deg)\n scale(${this.scale[1]})\n `\n\t\t\t\t\t\t\t// Approximate `outExpo` or pick a standard easing (like 'ease-out'):\n\t\t\t\t\t\t\t// outExpo often approximated by cubic-bezier(0.19, 1, 0.22, 1)\n\t\t\t\t\t\t\tconst easingMap: Record<string, string> = {\n\t\t\t\t\t\t\t\toutExpo: 'cubic-bezier(0.19, 1, 0.22, 1)',\n\t\t\t\t\t\t\t\t// add more if you want\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tconst keyframes: Keyframe[] = [\n\t\t\t\t\t\t\t\t{ transform: fromTransform, opacity: String(this.opacity[0]) },\n\t\t\t\t\t\t\t\t{ transform: toTransform, opacity: String(this.opacity[1]) },\n\t\t\t\t\t\t\t]\n\n\t\t\t\t\t\t\tletter.animate(keyframes, {\n\t\t\t\t\t\t\t\tduration: this.duration,\n\t\t\t\t\t\t\t\teasing: easingMap[this.ease] || 'ease-out',\n\t\t\t\t\t\t\t\tdelay: this.delay + i * this.stagger, // staggered start\n\t\t\t\t\t\t\t\tfill: 'forwards', // so the letters remain visible\n\t\t\t\t\t\t\t})\n\t\t\t\t\t\t})\n\t\t\t\t\t},\n\t\t\t\t}),\n\t\t\t),\n\t\t).subscribe()\n\t}\n\n\trender() {\n\t\treturn html`\n\t\t\t<span class=\"ml7\">\n\t\t\t\t<span class=\"text-wrapper\">\n\t\t\t\t\t<span class=\"letters\">\n\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t</span>\n\t\t\t\t</span>\n\t\t\t</span>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-animated-text': SchmancyAnimatedText\n\t}\n}\n"],"names":["SchmancyAnimatedText","$LitElement","css","super","arguments","this","ease","delay","stagger","duration","scale","opacity","translateX","translateY","translateZ","rotateZ","resetOnScroll","element","rect","getBoundingClientRect","top","left","bottom","window","innerHeight","document","documentElement","clientHeight","right","innerWidth","clientWidth","firstUpdated","letters","innerHTML","defaultSlot","textContent","replace","concat","interval","pipe","startWith","filter","width","height","take","fromEvent","throttleTime","leading","trailing","map","isInViewport","distinctUntilChanged","tap","inViewport","Array","from","children","forEach","letter","style","next","shadowRoot","querySelectorAll","i","fromTransform","toTransform","keyframes","transform","String","animate","easing","outExpo","fill","subscribe","html","__decorateClass","property","type","prototype","Number","Boolean","queryAssignedNodes","query","customElement"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"animated-text-DgW2DQuG.cjs","sources":["../src/animated-text/animated-text.ts"],"sourcesContent":["// Removed: import { createTimeline, stagger } from '@packages/anime-beta-master'\nimport { $LitElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property, query, queryAssignedNodes } from 'lit/decorators.js'\nimport {\n\tconcat,\n\tdistinctUntilChanged,\n\tfilter,\n\tfromEvent,\n\tinterval,\n\tmap,\n\tstartWith,\n\ttake,\n\ttap,\n\tthrottleTime,\n} from 'rxjs'\n\n/**\n * @element schmancy-animated-text\n * Inspired by https://tobiasahlin.com/moving-letters/#1\n */\n@customElement('schmancy-animated-text')\nexport default class SchmancyAnimatedText extends $LitElement(css`\n\t:host {\n\t\tfont-family: inherit;\n\t\tdisplay: block;\n\t}\n\t.ml7 {\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t}\n\t.ml7 .text-wrapper {\n\t\tposition: relative;\n\t\tdisplay: inline-block;\n\t\toverflow: hidden;\n\t}\n\t.ml7 .letter {\n\t\ttransform-origin: 0 100%;\n\t\tdisplay: inline-block;\n\t\topacity: 0;\n\t}\n`) {\n\t@property({ type: String }) ease = 'outExpo' // not a built-in string for Web Animations\n\t@property({ type: Number }) delay = 0\n\t@property({ type: Number }) stagger = 50\n\t@property({ type: Number }) duration = 750\n\t@property({ type: Array }) scale = [0, 1]\n\t@property({ type: Array }) opacity = [0, 1]\n\t@property({ type: Array }) translateX = ['0.55em', '0em']\n\t@property({ type: Array }) translateY = ['1.1em', '0em']\n\t@property({ type: Array }) translateZ = [0, 0]\n\t@property({ type: Array }) rotateZ = [180, 0]\n\t@property({ type: Boolean }) resetOnScroll = true\n\n\t@queryAssignedNodes() defaultSlot!: HTMLElement[]\n\t@query('.letters') letters!: HTMLElement\n\t@query('.ml7') ml7!: HTMLElement\n\n\t// Function to check if an element is in the viewport\n\tisInViewport(element: HTMLElement) {\n\t\tconst rect = element.getBoundingClientRect()\n\t\treturn (\n\t\t\trect.top >= 0 &&\n\t\t\trect.left >= 0 &&\n\t\t\trect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&\n\t\t\trect.right <= (window.innerWidth || document.documentElement.clientWidth)\n\t\t)\n\t}\n\n\tasync firstUpdated() {\n\t\t// Split the text into <span class=\"letter\"> ... </span> elements\n\t\tthis.letters.innerHTML = this.defaultSlot[0].textContent!.replace(/\\S/g, `<span class=\"letter\">$&</span>`)\n\n\t\t// Observe viewport + initial readiness\n\t\tconcat(\n\t\t\t// 1) Wait until the element is rendered (width/height > 0)\n\t\t\tinterval(10).pipe(\n\t\t\t\tstartWith(true),\n\t\t\t\tfilter(() => {\n\t\t\t\t\tconst rect = this.getBoundingClientRect()\n\t\t\t\t\treturn rect.width > 0 && rect.height > 0\n\t\t\t\t}),\n\t\t\t\ttake(1),\n\t\t\t),\n\t\t\t// 2) Then handle scroll events, throttled\n\t\t\tfromEvent(window, 'scroll').pipe(\n\t\t\t\tthrottleTime(0, undefined, {\n\t\t\t\t\tleading: true,\n\t\t\t\t\ttrailing: true,\n\t\t\t\t}),\n\t\t\t\tstartWith(true),\n\t\t\t\tmap(() => this.isInViewport(this)),\n\t\t\t\tdistinctUntilChanged(),\n\t\t\t\ttap(inViewport => {\n\t\t\t\t\t// If leaving viewport and `resetOnScroll` is true, reset letters to opacity 0\n\t\t\t\t\tif (!inViewport && this.resetOnScroll) {\n\t\t\t\t\t\tArray.from(this.letters.children).forEach((letter: HTMLElement) => {\n\t\t\t\t\t\t\tletter.style.opacity = '0'\n\t\t\t\t\t\t})\n\t\t\t\t\t}\n\t\t\t\t}),\n\t\t\t\tfilter(isInViewport => isInViewport),\n\t\t\t\t// If resetOnScroll = false, animate only the first time inView. If true, repeat.\n\t\t\t\tthis.resetOnScroll ? tap() : take(1),\n\t\t\t\ttap({\n\t\t\t\t\tnext: () => {\n\t\t\t\t\t\t// Animate letters with the native Web Animations API\n\t\t\t\t\t\tconst letters = this.shadowRoot!.querySelectorAll<HTMLElement>('.ml7 .letter')\n\n\t\t\t\t\t\tletters.forEach((letter, i) => {\n\t\t\t\t\t\t\t// Combine all transforms into one CSS transform string\n\t\t\t\t\t\t\t// From\n\t\t\t\t\t\t\tconst fromTransform = `\n translate3d(${this.translateX[0]}, ${this.translateY[0]}, ${this.translateZ[0]}px)\n rotateZ(${this.rotateZ[0]}deg)\n scale(${this.scale[0]})\n `\n\t\t\t\t\t\t\t// To\n\t\t\t\t\t\t\tconst toTransform = `\n translate3d(${this.translateX[1]}, ${this.translateY[1]}, ${this.translateZ[1]}px)\n rotateZ(${this.rotateZ[1]}deg)\n scale(${this.scale[1]})\n `\n\t\t\t\t\t\t\t// Approximate `outExpo` or pick a standard easing (like 'ease-out'):\n\t\t\t\t\t\t\t// outExpo often approximated by cubic-bezier(0.19, 1, 0.22, 1)\n\t\t\t\t\t\t\tconst easingMap: Record<string, string> = {\n\t\t\t\t\t\t\t\toutExpo: 'cubic-bezier(0.19, 1, 0.22, 1)',\n\t\t\t\t\t\t\t\t// add more if you want\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tconst keyframes: Keyframe[] = [\n\t\t\t\t\t\t\t\t{ transform: fromTransform, opacity: String(this.opacity[0]) },\n\t\t\t\t\t\t\t\t{ transform: toTransform, opacity: String(this.opacity[1]) },\n\t\t\t\t\t\t\t]\n\n\t\t\t\t\t\t\tletter.animate(keyframes, {\n\t\t\t\t\t\t\t\tduration: this.duration,\n\t\t\t\t\t\t\t\teasing: easingMap[this.ease] || 'ease-out',\n\t\t\t\t\t\t\t\tdelay: this.delay + i * this.stagger, // staggered start\n\t\t\t\t\t\t\t\tfill: 'forwards', // so the letters remain visible\n\t\t\t\t\t\t\t})\n\t\t\t\t\t\t})\n\t\t\t\t\t},\n\t\t\t\t}),\n\t\t\t),\n\t\t).subscribe()\n\t}\n\n\trender() {\n\t\treturn html`\n\t\t\t<span class=\"ml7\">\n\t\t\t\t<span class=\"text-wrapper\">\n\t\t\t\t\t<span class=\"letters\">\n\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t</span>\n\t\t\t\t</span>\n\t\t\t</span>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-animated-text': SchmancyAnimatedText\n\t}\n}\n"],"names":["SchmancyAnimatedText","$LitElement","css","super","arguments","this","ease","delay","stagger","duration","scale","opacity","translateX","translateY","translateZ","rotateZ","resetOnScroll","element","rect","getBoundingClientRect","top","left","bottom","window","innerHeight","document","documentElement","clientHeight","right","innerWidth","clientWidth","firstUpdated","letters","innerHTML","defaultSlot","textContent","replace","concat","interval","pipe","startWith","filter","width","height","take","fromEvent","throttleTime","leading","trailing","map","isInViewport","distinctUntilChanged","tap","inViewport","Array","from","children","forEach","letter","style","next","shadowRoot","querySelectorAll","i","fromTransform","toTransform","keyframes","transform","String","animate","easing","outExpo","fill","subscribe","html","__decorateClass","property","type","prototype","Number","Boolean","queryAssignedNodes","query","customElement"],"mappings":"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"}
|
package/dist/animated-text.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";require("./animated-text-
|
|
1
|
+
"use strict";require("./animated-text-DgW2DQuG.cjs");
|
|
2
2
|
//# sourceMappingURL=animated-text.cjs.map
|
package/dist/animated-text.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import "./animated-text-
|
|
1
|
+
import "./animated-text-Bd3rsLJs.js";
|
|
2
2
|
//# sourceMappingURL=animated-text.js.map
|
package/dist/area.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./area.component-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./area.component-CjdNUfp9.cjs"),e=require("./utils-BqFGvnN9.cjs");exports.FINDING_MORTIES=t.FINDING_MORTIES,exports.HERE_RICKY=t.HERE_RICKY,exports.HISTORY_STRATEGY=t.HISTORY_STRATEGY,Object.defineProperty(exports,"SchmancyArea",{enumerable:!0,get:()=>t.SchmancyArea}),exports.area=t.area,exports.routerHistory=t.routerHistory,exports.buildQueryString=e.buildQueryString,exports.compareActiveRoutes=e.compareActiveRoutes,exports.compareCustomElementConstructors=e.compareCustomElementConstructors,exports.compareRouteActions=e.compareRouteActions,exports.createRouteCacheKey=e.createRouteCacheKey,exports.debounce=e.debounce,exports.decodeRouteState=e.decodeRouteState,exports.deepMerge=e.deepMerge,exports.encodeRouteState=e.encodeRouteState,exports.extractQueryParams=e.extractQueryParams,exports.getTagName=e.getTagName,exports.isObject=e.isObject,exports.normalizeTagName=e.normalizeTagName,exports.sanitizeRouteState=e.sanitizeRouteState;
|
|
2
2
|
//# sourceMappingURL=area.cjs.map
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { Subject as U, ReplaySubject as A, distinctUntilChanged as S, shareReplay as P, skip as R, map as i, filter as l, catchError as y, EMPTY as d, zip as J, fromEvent as $, of as m, bufferTime as L, tap as g, timeout as M, merge as q, switchMap as b, take as F, takeUntil as j, from as H } from "rxjs";
|
|
2
2
|
import "lit/directives/class-map.js";
|
|
3
3
|
import "lit/directives/style-map.js";
|
|
4
|
-
import { $ as x } from "./litElement.mixin-
|
|
5
|
-
import "./tailwind.mixin-
|
|
4
|
+
import { $ as x } from "./litElement.mixin-_JOzinzX.js";
|
|
5
|
+
import "./tailwind.mixin-410noD6d.js";
|
|
6
6
|
import { css as k, html as I } from "lit";
|
|
7
7
|
import { property as v, customElement as B } from "lit/decorators.js";
|
|
8
8
|
import { l as T } from "./index-CuY8m6ta.js";
|
|
@@ -277,4 +277,4 @@ export {
|
|
|
277
277
|
u as b,
|
|
278
278
|
N as r
|
|
279
279
|
};
|
|
280
|
-
//# sourceMappingURL=area.component-
|
|
280
|
+
//# sourceMappingURL=area.component-CU8UnNll.js.map
|