@mhmo91/schmancy 0.2.201 → 0.2.202
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/chips.md +89 -123
- package/dist/ai/chips.md +89 -123
- package/dist/{animated-text-Dr60iE4v.js → animated-text-BYS4ollO.js} +3 -3
- package/dist/{animated-text-Dr60iE4v.js.map → animated-text-BYS4ollO.js.map} +1 -1
- package/dist/{animated-text-IaaGcNeD.cjs → animated-text-jb8xtsKZ.cjs} +2 -2
- package/dist/{animated-text-IaaGcNeD.cjs.map → animated-text-jb8xtsKZ.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-FmOhHylt.js → area.component-DxNRxMvF.js} +4 -4
- package/dist/area.component-DxNRxMvF.js.map +1 -0
- package/dist/{area.component-C2dpnyWJ.cjs → area.component-VivYGPFY.cjs} +3 -3
- package/dist/area.component-VivYGPFY.cjs.map +1 -0
- package/dist/area.js +1 -1
- package/dist/{autocomplete-D1_1Gh-W.js → autocomplete-Bau2LIoa.js} +3 -3
- package/dist/{autocomplete-D1_1Gh-W.js.map → autocomplete-Bau2LIoa.js.map} +1 -1
- package/dist/{autocomplete-Bw-YykAE.cjs → autocomplete-CfpLrL2J.cjs} +2 -2
- package/dist/{autocomplete-Bw-YykAE.cjs.map → autocomplete-CfpLrL2J.cjs.map} +1 -1
- package/dist/autocomplete.cjs +1 -1
- package/dist/autocomplete.js +1 -1
- package/dist/{avatar-CkolR0PQ.cjs → avatar-CUD4cs6U.cjs} +2 -2
- package/dist/{avatar-CkolR0PQ.cjs.map → avatar-CUD4cs6U.cjs.map} +1 -1
- package/dist/{avatar-DWQCLmQc.js → avatar-CsMJfDiv.js} +43 -43
- package/dist/{avatar-DWQCLmQc.js.map → avatar-CsMJfDiv.js.map} +1 -1
- package/dist/badge.cjs +1 -1
- package/dist/badge.js +1 -1
- package/dist/{boat-BOprkgg-.cjs → boat-BH_EwwX-.cjs} +2 -2
- package/dist/{boat-BOprkgg-.cjs.map → boat-BH_EwwX-.cjs.map} +1 -1
- package/dist/{boat-C6361uOb.js → boat-CqW5lpYZ.js} +3 -3
- package/dist/{boat-C6361uOb.js.map → boat-CqW5lpYZ.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-DtU97oO6.cjs → checkbox-BPaB8gjl.cjs} +2 -2
- package/dist/{checkbox-DtU97oO6.cjs.map → checkbox-BPaB8gjl.cjs.map} +1 -1
- package/dist/{checkbox-CTo4qcmS.js → checkbox-DWzhuPa4.js} +2 -2
- package/dist/{checkbox-CTo4qcmS.js.map → checkbox-DWzhuPa4.js.map} +1 -1
- package/dist/checkbox.cjs +1 -1
- package/dist/checkbox.js +1 -1
- package/dist/{chips-CwwieBdF.cjs → chips-B_JKvtqB.cjs} +2 -2
- package/dist/{chips-CwwieBdF.cjs.map → chips-B_JKvtqB.cjs.map} +1 -1
- package/dist/{chips-DMvV4T1B.js → chips-K6z9BIbc.js} +3 -3
- package/dist/{chips-DMvV4T1B.js.map → chips-K6z9BIbc.js.map} +1 -1
- package/dist/chips.cjs +1 -1
- package/dist/chips.js +1 -1
- package/dist/{circular-progress-D3Jt291j.cjs → circular-progress-BG_EnVTn.cjs} +2 -2
- package/dist/{circular-progress-D3Jt291j.cjs.map → circular-progress-BG_EnVTn.cjs.map} +1 -1
- package/dist/{circular-progress-B4TOfd8J.js → circular-progress-irMd5G3E.js} +3 -3
- package/dist/{circular-progress-B4TOfd8J.js.map → circular-progress-irMd5G3E.js.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-BWAcgpVl.cjs → code-preview-BDi-9C_7.cjs} +14 -9
- package/dist/{code-preview-BWAcgpVl.cjs.map → code-preview-BDi-9C_7.cjs.map} +1 -1
- package/dist/{code-preview-CGtqgdc7.js → code-preview-D_QJybDt.js} +129 -124
- package/dist/{code-preview-CGtqgdc7.js.map → code-preview-D_QJybDt.js.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-CrCwkBhk.cjs → date-range--jCSlkf3.cjs} +2 -2
- package/dist/{date-range-CrCwkBhk.cjs.map → date-range--jCSlkf3.cjs.map} +1 -1
- package/dist/{date-range-BPWHcYDO.js → date-range-B9UeIzcl.js} +3 -3
- package/dist/{date-range-BPWHcYDO.js.map → date-range-B9UeIzcl.js.map} +1 -1
- package/dist/date-range.cjs +1 -1
- package/dist/date-range.js +1 -1
- package/dist/{delay-BRK6QqCQ.js → delay-CCOKwDX3.js} +2 -2
- package/dist/{delay-BRK6QqCQ.js.map → delay-CCOKwDX3.js.map} +1 -1
- package/dist/{delay-DBEPTzJx.cjs → delay-OOtwG41o.cjs} +2 -2
- package/dist/{delay-DBEPTzJx.cjs.map → delay-OOtwG41o.cjs.map} +1 -1
- package/dist/delay.cjs +1 -1
- package/dist/delay.js +1 -1
- package/dist/{dialog-content-DTW-jlGG.cjs → dialog-content-B3kd79fM.cjs} +2 -2
- package/dist/{dialog-content-DTW-jlGG.cjs.map → dialog-content-B3kd79fM.cjs.map} +1 -1
- package/dist/{dialog-content-3jFhSjfz.js → dialog-content-BpvJPGA8.js} +3 -3
- package/dist/{dialog-content-3jFhSjfz.js.map → dialog-content-BpvJPGA8.js.map} +1 -1
- package/dist/dialog.cjs +1 -1
- package/dist/dialog.js +1 -1
- package/dist/{divider-CUiOCxcv.cjs → divider-Bf9Slnvo.cjs} +2 -2
- package/dist/{divider-CUiOCxcv.cjs.map → divider-Bf9Slnvo.cjs.map} +1 -1
- package/dist/{divider-DLedYg2o.js → divider-CmpZyxZz.js} +3 -3
- package/dist/{divider-DLedYg2o.js.map → divider-CmpZyxZz.js.map} +1 -1
- package/dist/divider.cjs +1 -1
- package/dist/divider.js +1 -1
- package/dist/{dropdown-content-CHcK5vDp.js → dropdown-content-CU1cly-s.js} +3 -3
- package/dist/{dropdown-content-CHcK5vDp.js.map → dropdown-content-CU1cly-s.js.map} +1 -1
- package/dist/{dropdown-content-rLIDGVfK.cjs → dropdown-content-DBk4DHeT.cjs} +2 -2
- package/dist/{dropdown-content-rLIDGVfK.cjs.map → dropdown-content-DBk4DHeT.cjs.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-DDmzufXs.js → flex-CujhhojR.js} +2 -2
- package/dist/{flex-DDmzufXs.js.map → flex-CujhhojR.js.map} +1 -1
- package/dist/{flex-aKz0Ms65.cjs → flex-W05LrmiY.cjs} +2 -2
- package/dist/{flex-aKz0Ms65.cjs.map → flex-W05LrmiY.cjs.map} +1 -1
- package/dist/{form-CWCw7gLZ.js → form-BHEhndln.js} +2 -2
- package/dist/{form-CWCw7gLZ.js.map → form-BHEhndln.js.map} +1 -1
- package/dist/{form-BfeOUZjw.cjs → form-D99IyIWZ.cjs} +2 -2
- package/dist/{form-BfeOUZjw.cjs.map → form-D99IyIWZ.cjs.map} +1 -1
- package/dist/form.cjs +1 -1
- package/dist/form.js +1 -1
- package/dist/{icon-DfDdy5YY.js → icon-C200ch2d.js} +2 -2
- package/dist/{icon-DfDdy5YY.js.map → icon-C200ch2d.js.map} +1 -1
- package/dist/{icon-DOMq_VrC.cjs → icon-DwMgmWET.cjs} +2 -2
- package/dist/{icon-DOMq_VrC.cjs.map → icon-DwMgmWET.cjs.map} +1 -1
- package/dist/{icon-button-Cq0E6Y7I.js → icon-button-CpaZ6Sl4.js} +3 -3
- package/dist/{icon-button-Cq0E6Y7I.js.map → icon-button-CpaZ6Sl4.js.map} +1 -1
- package/dist/{icon-button-BWO3kLWC.cjs → icon-button-DjdXn0i9.cjs} +2 -2
- package/dist/{icon-button-BWO3kLWC.cjs.map → icon-button-DjdXn0i9.cjs.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-BBi8YkYi.cjs → input-BeOn-cgH.cjs} +2 -2
- package/dist/{input-BBi8YkYi.cjs.map → input-BeOn-cgH.cjs.map} +1 -1
- package/dist/{input-DVdHjbNu.js → input-oJU4j5gv.js} +2 -2
- package/dist/{input-DVdHjbNu.js.map → input-oJU4j5gv.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-Bh9W7eBM.cjs → list-77ofKN4f.cjs} +2 -2
- package/dist/{list-Bh9W7eBM.cjs.map → list-77ofKN4f.cjs.map} +1 -1
- package/dist/{list-ByACnM5l.js → list-DA5qfp5T.js} +2 -2
- package/dist/{list-ByACnM5l.js.map → list-DA5qfp5T.js.map} +1 -1
- package/dist/list.cjs +1 -1
- package/dist/list.js +1 -1
- package/dist/{litElement.mixin-BHvj00po.js → litElement.mixin-BWl8md6o.js} +2 -2
- package/dist/{litElement.mixin-BHvj00po.js.map → litElement.mixin-BWl8md6o.js.map} +1 -1
- package/dist/{litElement.mixin-Bk1VBCai.cjs → litElement.mixin-DWxMKydc.cjs} +2 -2
- package/dist/{litElement.mixin-Bk1VBCai.cjs.map → litElement.mixin-DWxMKydc.cjs.map} +1 -1
- package/dist/{menu-BIrEM0LW.cjs → menu-Bo6lczzN.cjs} +2 -2
- package/dist/{menu-BIrEM0LW.cjs.map → menu-Bo6lczzN.cjs.map} +1 -1
- package/dist/{menu-B0W8bS5x.js → menu-DHJGkSYp.js} +3 -3
- package/dist/{menu-B0W8bS5x.js.map → menu-DHJGkSYp.js.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-C8rKbKf8.js → notification-service-DzLqQyQY.js} +3 -3
- package/dist/{notification-service-C8rKbKf8.js.map → notification-service-DzLqQyQY.js.map} +1 -1
- package/dist/{notification-service-DID_WpGV.cjs → notification-service-WLfJOHGg.cjs} +2 -2
- package/dist/{notification-service-DID_WpGV.cjs.map → notification-service-WLfJOHGg.cjs.map} +1 -1
- package/dist/notification.cjs +1 -1
- package/dist/notification.js +1 -1
- package/dist/{option-BlDPqrw1.cjs → option-D7kpmdEM.cjs} +2 -2
- package/dist/{option-BlDPqrw1.cjs.map → option-D7kpmdEM.cjs.map} +1 -1
- package/dist/{option-Cz1zyVde.js → option-DQpRizvO.js} +2 -2
- package/dist/{option-Cz1zyVde.js.map → option-DQpRizvO.js.map} +1 -1
- package/dist/option.cjs +1 -1
- package/dist/option.js +1 -1
- package/dist/{payment-card-form-CL8RwARO.js → payment-card-form-BZLHY7HJ.js} +3 -3
- package/dist/{payment-card-form-CL8RwARO.js.map → payment-card-form-BZLHY7HJ.js.map} +1 -1
- package/dist/{payment-card-form-Ct3M1hzR.cjs → payment-card-form-DfgGRWy8.cjs} +2 -2
- package/dist/{payment-card-form-Ct3M1hzR.cjs.map → payment-card-form-DfgGRWy8.cjs.map} +1 -1
- package/dist/{radio-button-CzA6BGJT.js → radio-button-BNpFaQX8.js} +2 -2
- package/dist/{radio-button-CzA6BGJT.js.map → radio-button-BNpFaQX8.js.map} +1 -1
- package/dist/{radio-button-BHeHYYA3.cjs → radio-button-BiHHYFbP.cjs} +2 -2
- package/dist/{radio-button-BHeHYYA3.cjs.map → radio-button-BiHHYFbP.cjs.map} +1 -1
- package/dist/radio-group.cjs +1 -1
- package/dist/radio-group.js +1 -1
- package/dist/{schmancy-steps-container-Cl_oWCxT.cjs → schmancy-steps-container-DhJWC3Lf.cjs} +2 -2
- package/dist/{schmancy-steps-container-Cl_oWCxT.cjs.map → schmancy-steps-container-DhJWC3Lf.cjs.map} +1 -1
- package/dist/{schmancy-steps-container-CTgSYtS0.js → schmancy-steps-container-idw6M7gT.js} +2 -2
- package/dist/{schmancy-steps-container-CTgSYtS0.js.map → schmancy-steps-container-idw6M7gT.js.map} +1 -1
- package/dist/{select-BerRDrTL.cjs → select-BQVRqkgK.cjs} +2 -2
- package/dist/{select-BerRDrTL.cjs.map → select-BQVRqkgK.cjs.map} +1 -1
- package/dist/{select-DAMjx78G.js → select-DV_tG6Z1.js} +3 -3
- package/dist/{select-DAMjx78G.js.map → select-DV_tG6Z1.js.map} +1 -1
- package/dist/select.cjs +1 -1
- package/dist/select.js +1 -1
- package/dist/{sheet-CrGvhxN3.js → sheet-DGaUsOLM.js} +3 -3
- package/dist/{sheet-CrGvhxN3.js.map → sheet-DGaUsOLM.js.map} +1 -1
- package/dist/{sheet-YHSlWQRv.cjs → sheet-Ds_huwa_.cjs} +2 -2
- package/dist/{sheet-YHSlWQRv.cjs.map → sheet-Ds_huwa_.cjs.map} +1 -1
- package/dist/sheet.cjs +1 -1
- package/dist/sheet.js +1 -1
- package/dist/{slider-CiRA-NEX.cjs → slider-CJINpiTK.cjs} +2 -2
- package/dist/{slider-CiRA-NEX.cjs.map → slider-CJINpiTK.cjs.map} +1 -1
- package/dist/{slider-BMijf5Js.js → slider-Cl30H-Ky.js} +3 -3
- package/dist/{slider-BMijf5Js.js.map → slider-Cl30H-Ky.js.map} +1 -1
- package/dist/slider.cjs +1 -1
- package/dist/slider.js +1 -1
- package/dist/{spinner-FEk-Ttf7.js → spinner-Dpo3W3c-.js} +3 -3
- package/dist/{spinner-FEk-Ttf7.js.map → spinner-Dpo3W3c-.js.map} +1 -1
- package/dist/{spinner-uFgJCTW9.cjs → spinner-uO1siKhB.cjs} +2 -2
- package/dist/{spinner-uFgJCTW9.cjs.map → spinner-uO1siKhB.cjs.map} +1 -1
- package/dist/steps.cjs +1 -1
- package/dist/steps.js +1 -1
- package/dist/{surface-BVF_3RnX.js → surface-C6Krb1lv.js} +3 -3
- package/dist/{surface-BVF_3RnX.js.map → surface-C6Krb1lv.js.map} +1 -1
- package/dist/{surface-AwNWjIdg.cjs → surface-JsTE_chE.cjs} +3 -3
- package/dist/{surface-AwNWjIdg.cjs.map → surface-JsTE_chE.cjs.map} +1 -1
- package/dist/surface.cjs +1 -1
- package/dist/surface.js +1 -1
- package/dist/{table-CSCZMivU.js → table-Dbf_6MHf.js} +2 -2
- package/dist/{table-CSCZMivU.js.map → table-Dbf_6MHf.js.map} +1 -1
- package/dist/{table-D6sHLyxt.cjs → table-ZmivCJrn.cjs} +2 -2
- package/dist/{table-D6sHLyxt.cjs.map → table-ZmivCJrn.cjs.map} +1 -1
- package/dist/table.cjs +1 -1
- package/dist/table.js +1 -1
- package/dist/{tabs-compatibility-tx3PViNI.js → tabs-compatibility-CDMklQAm.js} +2 -2
- package/dist/{tabs-compatibility-tx3PViNI.js.map → tabs-compatibility-CDMklQAm.js.map} +1 -1
- package/dist/{tabs-compatibility-Dlij_WIx.cjs → tabs-compatibility-CTswDDwq.cjs} +2 -2
- package/dist/{tabs-compatibility-Dlij_WIx.cjs.map → tabs-compatibility-CTswDDwq.cjs.map} +1 -1
- package/dist/tabs.cjs +1 -1
- package/dist/tabs.js +1 -1
- package/dist/tailwind.mixin-B1NF3tDz.cjs +2 -0
- package/dist/{tailwind.mixin-Xs0QJUOE.cjs.map → tailwind.mixin-B1NF3tDz.cjs.map} +1 -1
- package/dist/tailwind.mixin-DRbXmwPy.js +43 -0
- package/dist/{tailwind.mixin-C3BFeflA.js.map → tailwind.mixin-DRbXmwPy.js.map} +1 -1
- package/dist/teleport.cjs +1 -1
- package/dist/teleport.js +1 -1
- package/dist/{textarea-qDsdI_sm.cjs → textarea-B5NhHUmB.cjs} +2 -2
- package/dist/{textarea-qDsdI_sm.cjs.map → textarea-B5NhHUmB.cjs.map} +1 -1
- package/dist/{textarea-Cam1Bejh.js → textarea-BgIcOe2_.js} +2 -2
- package/dist/{textarea-Cam1Bejh.js.map → textarea-BgIcOe2_.js.map} +1 -1
- package/dist/textarea.cjs +1 -1
- package/dist/textarea.js +1 -1
- package/dist/{theme-button-B3jMXzi4.cjs → theme-button-ByTuVI2m.cjs} +2 -2
- package/dist/{theme-button-B3jMXzi4.cjs.map → theme-button-ByTuVI2m.cjs.map} +1 -1
- package/dist/{theme-button-delusSKh.js → theme-button-CHfJgh_S.js} +2 -2
- package/dist/{theme-button-delusSKh.js.map → theme-button-CHfJgh_S.js.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-D3rDl8K0.js → theme.component-BOA_RlkP.js} +2 -2
- package/dist/{theme.component-D3rDl8K0.js.map → theme.component-BOA_RlkP.js.map} +1 -1
- package/dist/{theme.component-C9jqo1WB.cjs → theme.component-Dqb12V2Y.cjs} +2 -2
- package/dist/{theme.component-C9jqo1WB.cjs.map → theme.component-Dqb12V2Y.cjs.map} +1 -1
- package/dist/theme.js +1 -1
- package/dist/{timezone-B9QDIwnj.cjs → timezone-CeArJOdv.cjs} +2 -2
- package/dist/{timezone-B9QDIwnj.cjs.map → timezone-CeArJOdv.cjs.map} +1 -1
- package/dist/{timezone-rultNrNC.js → timezone-EnguJE1R.js} +3 -3
- package/dist/{timezone-rultNrNC.js.map → timezone-EnguJE1R.js.map} +1 -1
- package/dist/{tooltip-CmBYAmna.js → tooltip-beiWb2qf.js} +2 -2
- package/dist/{tooltip-CmBYAmna.js.map → tooltip-beiWb2qf.js.map} +1 -1
- package/dist/{tooltip-DLqcf-Co.cjs → tooltip-swpV3EIO.cjs} +2 -2
- package/dist/{tooltip-DLqcf-Co.cjs.map → tooltip-swpV3EIO.cjs.map} +1 -1
- package/dist/tooltip.cjs +1 -1
- package/dist/tooltip.js +1 -1
- package/dist/{tree-Bqxzo_84.js → tree-BJfdIGMP.js} +2 -2
- package/dist/{tree-Bqxzo_84.js.map → tree-BJfdIGMP.js.map} +1 -1
- package/dist/{tree-DTO2h6VT.cjs → tree-CwNbvxdt.cjs} +2 -2
- package/dist/{tree-DTO2h6VT.cjs.map → tree-CwNbvxdt.cjs.map} +1 -1
- package/dist/tree.cjs +1 -1
- package/dist/tree.js +1 -1
- package/dist/{typewriter-BHnCxd9O.js → typewriter-BAfCN_JJ.js} +4 -4
- package/dist/{typewriter-BHnCxd9O.js.map → typewriter-BAfCN_JJ.js.map} +1 -1
- package/dist/{typewriter-Bw0LLuVh.cjs → typewriter-CQePZbSj.cjs} +2 -2
- package/dist/{typewriter-Bw0LLuVh.cjs.map → typewriter-CQePZbSj.cjs.map} +1 -1
- package/dist/typewriter.cjs +1 -1
- package/dist/typewriter.js +1 -1
- package/dist/typography-CUv4DPU-.js +342 -0
- package/dist/typography-CUv4DPU-.js.map +1 -0
- package/dist/typography-DrDWI6Bh.cjs +318 -0
- package/dist/typography-DrDWI6Bh.cjs.map +1 -0
- package/dist/typography.cjs +1 -1
- package/dist/typography.js +1 -1
- package/package.json +15 -15
- package/types/src/area/area.component.d.ts +1 -1
- package/types/src/area/router.types.d.ts +1 -1
- package/types/src/surface/surface.d.ts +1 -1
- package/types/src/typography/typography.d.ts +6 -5
- package/dist/area.component-C2dpnyWJ.cjs.map +0 -1
- package/dist/area.component-FmOhHylt.js.map +0 -1
- package/dist/tailwind.mixin-C3BFeflA.js +0 -43
- package/dist/tailwind.mixin-Xs0QJUOE.cjs +0 -2
- package/dist/typography-BLd8VN8Q.cjs +0 -10
- package/dist/typography-BLd8VN8Q.cjs.map +0 -1
- package/dist/typography-ClEPUgIN.js +0 -37
- package/dist/typography-ClEPUgIN.js.map +0 -1
package/ai/chips.md
CHANGED
|
@@ -3,178 +3,144 @@
|
|
|
3
3
|
```js
|
|
4
4
|
// Single Chip
|
|
5
5
|
<schmancy-chip
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
6
|
+
value="chip-value"
|
|
7
|
+
selected?
|
|
8
|
+
icon="emoji-icon"
|
|
9
|
+
readOnly?
|
|
10
10
|
disabled?
|
|
11
|
-
@
|
|
11
|
+
@change=${handleChange}
|
|
12
12
|
@click=${handleClick}>
|
|
13
|
+
Chip Text
|
|
13
14
|
</schmancy-chip>
|
|
14
15
|
|
|
15
16
|
// Chip with icon
|
|
16
|
-
<schmancy-chip
|
|
17
|
-
|
|
17
|
+
<schmancy-chip icon="📝" value="javascript">
|
|
18
|
+
JavaScript
|
|
18
19
|
</schmancy-chip>
|
|
19
20
|
|
|
20
|
-
//
|
|
21
|
-
<schmancy-chip text="John Doe">
|
|
22
|
-
<schmancy-avatar slot="prefix" src="path/to/avatar.jpg" size="small"></schmancy-avatar>
|
|
23
|
-
</schmancy-chip>
|
|
24
|
-
|
|
25
|
-
// Chips Container
|
|
21
|
+
// Chips Container - Single Selection
|
|
26
22
|
<schmancy-chips
|
|
23
|
+
.value=${selectedValue}
|
|
27
24
|
@change=${handleSelectionChange}>
|
|
28
|
-
<schmancy-chip
|
|
29
|
-
<schmancy-chip
|
|
30
|
-
<schmancy-chip
|
|
25
|
+
<schmancy-chip value="1">Option 1</schmancy-chip>
|
|
26
|
+
<schmancy-chip value="2">Option 2</schmancy-chip>
|
|
27
|
+
<schmancy-chip value="3">Option 3</schmancy-chip>
|
|
31
28
|
</schmancy-chips>
|
|
32
29
|
|
|
33
|
-
// Chips Container
|
|
30
|
+
// Chips Container - Multiple Selection
|
|
34
31
|
<schmancy-chips
|
|
35
|
-
|
|
36
|
-
.
|
|
32
|
+
multi
|
|
33
|
+
.values=${selectedValues}
|
|
37
34
|
@change=${handleSelectionChange}>
|
|
38
|
-
<schmancy-chip
|
|
39
|
-
<schmancy-chip
|
|
40
|
-
<schmancy-chip
|
|
35
|
+
<schmancy-chip value="red">Red</schmancy-chip>
|
|
36
|
+
<schmancy-chip value="green">Green</schmancy-chip>
|
|
37
|
+
<schmancy-chip value="blue">Blue</schmancy-chip>
|
|
41
38
|
</schmancy-chips>
|
|
42
39
|
|
|
43
|
-
//
|
|
44
|
-
<schmancy-chips
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
<schmancy-chip
|
|
50
|
-
<schmancy-chip text="Vue" closable></schmancy-chip>
|
|
51
|
-
<schmancy-chip text="Angular" closable></schmancy-chip>
|
|
40
|
+
// Horizontal scrolling chips
|
|
41
|
+
<schmancy-chips wrap="false">
|
|
42
|
+
<schmancy-chip value="mon">Monday</schmancy-chip>
|
|
43
|
+
<schmancy-chip value="tue">Tuesday</schmancy-chip>
|
|
44
|
+
<schmancy-chip value="wed">Wednesday</schmancy-chip>
|
|
45
|
+
<schmancy-chip value="thu">Thursday</schmancy-chip>
|
|
46
|
+
<schmancy-chip value="fri">Friday</schmancy-chip>
|
|
52
47
|
</schmancy-chips>
|
|
53
48
|
|
|
54
49
|
// Chip Properties
|
|
55
|
-
text: string // Text content of the chip
|
|
56
50
|
value: string // Value for selection purposes
|
|
57
|
-
variant: string // Visual style: "default", "primary", "secondary", etc.
|
|
58
|
-
size: string // Size: "small", "medium", "large"
|
|
59
|
-
closable: boolean // Show close button
|
|
60
|
-
disabled: boolean // Disable the chip
|
|
61
51
|
selected: boolean // Whether the chip is selected
|
|
52
|
+
icon: string // Emoji icon to display
|
|
53
|
+
readOnly: boolean // Makes chip non-interactive
|
|
54
|
+
disabled: boolean // Disable the chip
|
|
62
55
|
|
|
63
56
|
// Chips Container Properties
|
|
64
|
-
|
|
65
|
-
value: string
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
max: number // Maximum number of chips allowed
|
|
69
|
-
disabled: boolean // Disable the entire container
|
|
57
|
+
multi: boolean // Enable multiple selection mode
|
|
58
|
+
value: string // Selected value (single selection)
|
|
59
|
+
values: string[] // Selected values (multiple selection)
|
|
60
|
+
wrap: boolean // Whether chips wrap to new lines (default: true)
|
|
70
61
|
|
|
71
62
|
// Chip Events
|
|
72
63
|
@click // Fires when chip is clicked
|
|
73
|
-
@
|
|
74
|
-
@keydown // Fires on keydown events
|
|
64
|
+
@change // Fires when selection changes, with { detail: { value: string, selected: boolean } }
|
|
75
65
|
|
|
76
66
|
// Chips Container Events
|
|
77
|
-
@change // Fires when selection changes, with
|
|
78
|
-
@add // Fires when a chip is added, with { detail: { text, value } }
|
|
79
|
-
@remove // Fires when a chip is removed, with { detail: { text, value } }
|
|
67
|
+
@change // Fires when selection changes, with detail being string (single) or string[] (multi)
|
|
80
68
|
|
|
81
69
|
// Examples
|
|
82
70
|
// Basic chips
|
|
83
71
|
<div>
|
|
84
|
-
<schmancy-chip
|
|
85
|
-
<schmancy-chip
|
|
86
|
-
<schmancy-chip
|
|
87
|
-
<schmancy-chip
|
|
88
|
-
<schmancy-chip
|
|
89
|
-
</div>
|
|
90
|
-
|
|
91
|
-
// Closable chips
|
|
92
|
-
<div>
|
|
93
|
-
<schmancy-chip
|
|
94
|
-
text="JavaScript"
|
|
95
|
-
closable
|
|
96
|
-
@close=${() => removeTag('javascript')}>
|
|
97
|
-
<schmancy-icon slot="prefix" icon="code"></schmancy-icon>
|
|
98
|
-
</schmancy-chip>
|
|
99
|
-
|
|
100
|
-
<schmancy-chip
|
|
101
|
-
text="TypeScript"
|
|
102
|
-
closable
|
|
103
|
-
@close=${() => removeTag('typescript')}>
|
|
104
|
-
<schmancy-icon slot="prefix" icon="code"></schmancy-icon>
|
|
105
|
-
</schmancy-chip>
|
|
72
|
+
<schmancy-chip value="basic">Basic</schmancy-chip>
|
|
73
|
+
<schmancy-chip value="javascript" icon="📝">JavaScript</schmancy-chip>
|
|
74
|
+
<schmancy-chip value="react" icon="⚛️">React</schmancy-chip>
|
|
75
|
+
<schmancy-chip value="vue" icon="💚">Vue</schmancy-chip>
|
|
76
|
+
<schmancy-chip value="angular" icon="🅰️">Angular</schmancy-chip>
|
|
106
77
|
</div>
|
|
107
78
|
|
|
108
79
|
// Single selection chips
|
|
109
80
|
<schmancy-chips
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
<schmancy-chip
|
|
114
|
-
<schmancy-chip
|
|
115
|
-
<schmancy-chip text="Large" value="lg"></schmancy-chip>
|
|
81
|
+
.value=${selectedSize}
|
|
82
|
+
@change=${(e) => selectedSize = e.detail}>
|
|
83
|
+
<schmancy-chip value="sm">Small</schmancy-chip>
|
|
84
|
+
<schmancy-chip value="md">Medium</schmancy-chip>
|
|
85
|
+
<schmancy-chip value="lg">Large</schmancy-chip>
|
|
116
86
|
</schmancy-chips>
|
|
117
87
|
|
|
118
88
|
// Multiple selection chips
|
|
119
89
|
<schmancy-chips
|
|
120
|
-
|
|
121
|
-
.
|
|
122
|
-
@change=${(e) => selectedToppings = e.detail
|
|
123
|
-
<schmancy-chip
|
|
124
|
-
<schmancy-chip
|
|
125
|
-
<schmancy-chip
|
|
126
|
-
<schmancy-chip
|
|
127
|
-
<schmancy-chip
|
|
90
|
+
multi
|
|
91
|
+
.values=${selectedToppings}
|
|
92
|
+
@change=${(e) => selectedToppings = e.detail}>
|
|
93
|
+
<schmancy-chip value="cheese">Cheese</schmancy-chip>
|
|
94
|
+
<schmancy-chip value="pepperoni">Pepperoni</schmancy-chip>
|
|
95
|
+
<schmancy-chip value="mushrooms">Mushrooms</schmancy-chip>
|
|
96
|
+
<schmancy-chip value="onions">Onions</schmancy-chip>
|
|
97
|
+
<schmancy-chip value="peppers">Peppers</schmancy-chip>
|
|
128
98
|
</schmancy-chips>
|
|
129
99
|
|
|
130
|
-
//
|
|
100
|
+
// Date selector with horizontal scrolling
|
|
131
101
|
<schmancy-chips
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
@
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
102
|
+
wrap="false"
|
|
103
|
+
.value=${selectedDate}
|
|
104
|
+
@change=${(e) => selectedDate = e.detail}>
|
|
105
|
+
<schmancy-chip value="2024-01-15">Mon 15</schmancy-chip>
|
|
106
|
+
<schmancy-chip value="2024-01-16">Tue 16</schmancy-chip>
|
|
107
|
+
<schmancy-chip value="2024-01-17">Wed 17</schmancy-chip>
|
|
108
|
+
<schmancy-chip value="2024-01-18">Thu 18</schmancy-chip>
|
|
109
|
+
<schmancy-chip value="2024-01-19">Fri 19</schmancy-chip>
|
|
110
|
+
<schmancy-chip value="2024-01-20">Sat 20</schmancy-chip>
|
|
111
|
+
<schmancy-chip value="2024-01-21">Sun 21</schmancy-chip>
|
|
112
|
+
</schmancy-chips>
|
|
113
|
+
|
|
114
|
+
// Category filters
|
|
115
|
+
<schmancy-chips
|
|
116
|
+
multi
|
|
117
|
+
.values=${selectedCategories}
|
|
118
|
+
@change=${(e) => selectedCategories = e.detail}>
|
|
119
|
+
<schmancy-chip value="electronics" icon="💻">Electronics</schmancy-chip>
|
|
120
|
+
<schmancy-chip value="clothing" icon="👕">Clothing</schmancy-chip>
|
|
121
|
+
<schmancy-chip value="books" icon="📚">Books</schmancy-chip>
|
|
122
|
+
<schmancy-chip value="home" icon="🏠">Home & Garden</schmancy-chip>
|
|
123
|
+
<schmancy-chip value="sports" icon="⚽">Sports</schmancy-chip>
|
|
142
124
|
</schmancy-chips>
|
|
143
125
|
|
|
144
|
-
//
|
|
126
|
+
// Skills/Tags selection
|
|
145
127
|
<schmancy-chips
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
@
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
src=${recipient.avatar}
|
|
155
|
-
size="small">
|
|
156
|
-
</schmancy-avatar>
|
|
128
|
+
multi
|
|
129
|
+
.values=${selectedSkills}
|
|
130
|
+
@change=${(e) => selectedSkills = e.detail}>
|
|
131
|
+
${availableSkills.map(skill => html`
|
|
132
|
+
<schmancy-chip
|
|
133
|
+
value=${skill.id}
|
|
134
|
+
icon=${skill.icon}>
|
|
135
|
+
${skill.name}
|
|
157
136
|
</schmancy-chip>
|
|
158
137
|
`)}
|
|
159
138
|
</schmancy-chips>
|
|
160
139
|
|
|
161
|
-
//
|
|
140
|
+
// Read-only chips display
|
|
162
141
|
<div>
|
|
163
|
-
<
|
|
164
|
-
<schmancy-
|
|
165
|
-
|
|
166
|
-
<schmancy-chip
|
|
167
|
-
text=${filter.label}
|
|
168
|
-
closable
|
|
169
|
-
@close=${() => removeFilter(filter.id)}>
|
|
170
|
-
</schmancy-chip>
|
|
171
|
-
`)}
|
|
172
|
-
|
|
173
|
-
<schmancy-chip
|
|
174
|
-
text="Add Filter"
|
|
175
|
-
@click=${openFilterDialog}>
|
|
176
|
-
<schmancy-icon slot="prefix" icon="add"></schmancy-icon>
|
|
177
|
-
</schmancy-chip>
|
|
178
|
-
</schmancy-chips>
|
|
142
|
+
<schmancy-chip value="completed" icon="✅" readOnly>Completed</schmancy-chip>
|
|
143
|
+
<schmancy-chip value="pending" icon="⏳" readOnly>Pending</schmancy-chip>
|
|
144
|
+
<schmancy-chip value="cancelled" icon="❌" readOnly>Cancelled</schmancy-chip>
|
|
179
145
|
</div>
|
|
180
146
|
```
|
package/dist/ai/chips.md
CHANGED
|
@@ -3,178 +3,144 @@
|
|
|
3
3
|
```js
|
|
4
4
|
// Single Chip
|
|
5
5
|
<schmancy-chip
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
6
|
+
value="chip-value"
|
|
7
|
+
selected?
|
|
8
|
+
icon="emoji-icon"
|
|
9
|
+
readOnly?
|
|
10
10
|
disabled?
|
|
11
|
-
@
|
|
11
|
+
@change=${handleChange}
|
|
12
12
|
@click=${handleClick}>
|
|
13
|
+
Chip Text
|
|
13
14
|
</schmancy-chip>
|
|
14
15
|
|
|
15
16
|
// Chip with icon
|
|
16
|
-
<schmancy-chip
|
|
17
|
-
|
|
17
|
+
<schmancy-chip icon="📝" value="javascript">
|
|
18
|
+
JavaScript
|
|
18
19
|
</schmancy-chip>
|
|
19
20
|
|
|
20
|
-
//
|
|
21
|
-
<schmancy-chip text="John Doe">
|
|
22
|
-
<schmancy-avatar slot="prefix" src="path/to/avatar.jpg" size="small"></schmancy-avatar>
|
|
23
|
-
</schmancy-chip>
|
|
24
|
-
|
|
25
|
-
// Chips Container
|
|
21
|
+
// Chips Container - Single Selection
|
|
26
22
|
<schmancy-chips
|
|
23
|
+
.value=${selectedValue}
|
|
27
24
|
@change=${handleSelectionChange}>
|
|
28
|
-
<schmancy-chip
|
|
29
|
-
<schmancy-chip
|
|
30
|
-
<schmancy-chip
|
|
25
|
+
<schmancy-chip value="1">Option 1</schmancy-chip>
|
|
26
|
+
<schmancy-chip value="2">Option 2</schmancy-chip>
|
|
27
|
+
<schmancy-chip value="3">Option 3</schmancy-chip>
|
|
31
28
|
</schmancy-chips>
|
|
32
29
|
|
|
33
|
-
// Chips Container
|
|
30
|
+
// Chips Container - Multiple Selection
|
|
34
31
|
<schmancy-chips
|
|
35
|
-
|
|
36
|
-
.
|
|
32
|
+
multi
|
|
33
|
+
.values=${selectedValues}
|
|
37
34
|
@change=${handleSelectionChange}>
|
|
38
|
-
<schmancy-chip
|
|
39
|
-
<schmancy-chip
|
|
40
|
-
<schmancy-chip
|
|
35
|
+
<schmancy-chip value="red">Red</schmancy-chip>
|
|
36
|
+
<schmancy-chip value="green">Green</schmancy-chip>
|
|
37
|
+
<schmancy-chip value="blue">Blue</schmancy-chip>
|
|
41
38
|
</schmancy-chips>
|
|
42
39
|
|
|
43
|
-
//
|
|
44
|
-
<schmancy-chips
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
<schmancy-chip
|
|
50
|
-
<schmancy-chip text="Vue" closable></schmancy-chip>
|
|
51
|
-
<schmancy-chip text="Angular" closable></schmancy-chip>
|
|
40
|
+
// Horizontal scrolling chips
|
|
41
|
+
<schmancy-chips wrap="false">
|
|
42
|
+
<schmancy-chip value="mon">Monday</schmancy-chip>
|
|
43
|
+
<schmancy-chip value="tue">Tuesday</schmancy-chip>
|
|
44
|
+
<schmancy-chip value="wed">Wednesday</schmancy-chip>
|
|
45
|
+
<schmancy-chip value="thu">Thursday</schmancy-chip>
|
|
46
|
+
<schmancy-chip value="fri">Friday</schmancy-chip>
|
|
52
47
|
</schmancy-chips>
|
|
53
48
|
|
|
54
49
|
// Chip Properties
|
|
55
|
-
text: string // Text content of the chip
|
|
56
50
|
value: string // Value for selection purposes
|
|
57
|
-
variant: string // Visual style: "default", "primary", "secondary", etc.
|
|
58
|
-
size: string // Size: "small", "medium", "large"
|
|
59
|
-
closable: boolean // Show close button
|
|
60
|
-
disabled: boolean // Disable the chip
|
|
61
51
|
selected: boolean // Whether the chip is selected
|
|
52
|
+
icon: string // Emoji icon to display
|
|
53
|
+
readOnly: boolean // Makes chip non-interactive
|
|
54
|
+
disabled: boolean // Disable the chip
|
|
62
55
|
|
|
63
56
|
// Chips Container Properties
|
|
64
|
-
|
|
65
|
-
value: string
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
max: number // Maximum number of chips allowed
|
|
69
|
-
disabled: boolean // Disable the entire container
|
|
57
|
+
multi: boolean // Enable multiple selection mode
|
|
58
|
+
value: string // Selected value (single selection)
|
|
59
|
+
values: string[] // Selected values (multiple selection)
|
|
60
|
+
wrap: boolean // Whether chips wrap to new lines (default: true)
|
|
70
61
|
|
|
71
62
|
// Chip Events
|
|
72
63
|
@click // Fires when chip is clicked
|
|
73
|
-
@
|
|
74
|
-
@keydown // Fires on keydown events
|
|
64
|
+
@change // Fires when selection changes, with { detail: { value: string, selected: boolean } }
|
|
75
65
|
|
|
76
66
|
// Chips Container Events
|
|
77
|
-
@change // Fires when selection changes, with
|
|
78
|
-
@add // Fires when a chip is added, with { detail: { text, value } }
|
|
79
|
-
@remove // Fires when a chip is removed, with { detail: { text, value } }
|
|
67
|
+
@change // Fires when selection changes, with detail being string (single) or string[] (multi)
|
|
80
68
|
|
|
81
69
|
// Examples
|
|
82
70
|
// Basic chips
|
|
83
71
|
<div>
|
|
84
|
-
<schmancy-chip
|
|
85
|
-
<schmancy-chip
|
|
86
|
-
<schmancy-chip
|
|
87
|
-
<schmancy-chip
|
|
88
|
-
<schmancy-chip
|
|
89
|
-
</div>
|
|
90
|
-
|
|
91
|
-
// Closable chips
|
|
92
|
-
<div>
|
|
93
|
-
<schmancy-chip
|
|
94
|
-
text="JavaScript"
|
|
95
|
-
closable
|
|
96
|
-
@close=${() => removeTag('javascript')}>
|
|
97
|
-
<schmancy-icon slot="prefix" icon="code"></schmancy-icon>
|
|
98
|
-
</schmancy-chip>
|
|
99
|
-
|
|
100
|
-
<schmancy-chip
|
|
101
|
-
text="TypeScript"
|
|
102
|
-
closable
|
|
103
|
-
@close=${() => removeTag('typescript')}>
|
|
104
|
-
<schmancy-icon slot="prefix" icon="code"></schmancy-icon>
|
|
105
|
-
</schmancy-chip>
|
|
72
|
+
<schmancy-chip value="basic">Basic</schmancy-chip>
|
|
73
|
+
<schmancy-chip value="javascript" icon="📝">JavaScript</schmancy-chip>
|
|
74
|
+
<schmancy-chip value="react" icon="⚛️">React</schmancy-chip>
|
|
75
|
+
<schmancy-chip value="vue" icon="💚">Vue</schmancy-chip>
|
|
76
|
+
<schmancy-chip value="angular" icon="🅰️">Angular</schmancy-chip>
|
|
106
77
|
</div>
|
|
107
78
|
|
|
108
79
|
// Single selection chips
|
|
109
80
|
<schmancy-chips
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
<schmancy-chip
|
|
114
|
-
<schmancy-chip
|
|
115
|
-
<schmancy-chip text="Large" value="lg"></schmancy-chip>
|
|
81
|
+
.value=${selectedSize}
|
|
82
|
+
@change=${(e) => selectedSize = e.detail}>
|
|
83
|
+
<schmancy-chip value="sm">Small</schmancy-chip>
|
|
84
|
+
<schmancy-chip value="md">Medium</schmancy-chip>
|
|
85
|
+
<schmancy-chip value="lg">Large</schmancy-chip>
|
|
116
86
|
</schmancy-chips>
|
|
117
87
|
|
|
118
88
|
// Multiple selection chips
|
|
119
89
|
<schmancy-chips
|
|
120
|
-
|
|
121
|
-
.
|
|
122
|
-
@change=${(e) => selectedToppings = e.detail
|
|
123
|
-
<schmancy-chip
|
|
124
|
-
<schmancy-chip
|
|
125
|
-
<schmancy-chip
|
|
126
|
-
<schmancy-chip
|
|
127
|
-
<schmancy-chip
|
|
90
|
+
multi
|
|
91
|
+
.values=${selectedToppings}
|
|
92
|
+
@change=${(e) => selectedToppings = e.detail}>
|
|
93
|
+
<schmancy-chip value="cheese">Cheese</schmancy-chip>
|
|
94
|
+
<schmancy-chip value="pepperoni">Pepperoni</schmancy-chip>
|
|
95
|
+
<schmancy-chip value="mushrooms">Mushrooms</schmancy-chip>
|
|
96
|
+
<schmancy-chip value="onions">Onions</schmancy-chip>
|
|
97
|
+
<schmancy-chip value="peppers">Peppers</schmancy-chip>
|
|
128
98
|
</schmancy-chips>
|
|
129
99
|
|
|
130
|
-
//
|
|
100
|
+
// Date selector with horizontal scrolling
|
|
131
101
|
<schmancy-chips
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
@
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
102
|
+
wrap="false"
|
|
103
|
+
.value=${selectedDate}
|
|
104
|
+
@change=${(e) => selectedDate = e.detail}>
|
|
105
|
+
<schmancy-chip value="2024-01-15">Mon 15</schmancy-chip>
|
|
106
|
+
<schmancy-chip value="2024-01-16">Tue 16</schmancy-chip>
|
|
107
|
+
<schmancy-chip value="2024-01-17">Wed 17</schmancy-chip>
|
|
108
|
+
<schmancy-chip value="2024-01-18">Thu 18</schmancy-chip>
|
|
109
|
+
<schmancy-chip value="2024-01-19">Fri 19</schmancy-chip>
|
|
110
|
+
<schmancy-chip value="2024-01-20">Sat 20</schmancy-chip>
|
|
111
|
+
<schmancy-chip value="2024-01-21">Sun 21</schmancy-chip>
|
|
112
|
+
</schmancy-chips>
|
|
113
|
+
|
|
114
|
+
// Category filters
|
|
115
|
+
<schmancy-chips
|
|
116
|
+
multi
|
|
117
|
+
.values=${selectedCategories}
|
|
118
|
+
@change=${(e) => selectedCategories = e.detail}>
|
|
119
|
+
<schmancy-chip value="electronics" icon="💻">Electronics</schmancy-chip>
|
|
120
|
+
<schmancy-chip value="clothing" icon="👕">Clothing</schmancy-chip>
|
|
121
|
+
<schmancy-chip value="books" icon="📚">Books</schmancy-chip>
|
|
122
|
+
<schmancy-chip value="home" icon="🏠">Home & Garden</schmancy-chip>
|
|
123
|
+
<schmancy-chip value="sports" icon="⚽">Sports</schmancy-chip>
|
|
142
124
|
</schmancy-chips>
|
|
143
125
|
|
|
144
|
-
//
|
|
126
|
+
// Skills/Tags selection
|
|
145
127
|
<schmancy-chips
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
@
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
src=${recipient.avatar}
|
|
155
|
-
size="small">
|
|
156
|
-
</schmancy-avatar>
|
|
128
|
+
multi
|
|
129
|
+
.values=${selectedSkills}
|
|
130
|
+
@change=${(e) => selectedSkills = e.detail}>
|
|
131
|
+
${availableSkills.map(skill => html`
|
|
132
|
+
<schmancy-chip
|
|
133
|
+
value=${skill.id}
|
|
134
|
+
icon=${skill.icon}>
|
|
135
|
+
${skill.name}
|
|
157
136
|
</schmancy-chip>
|
|
158
137
|
`)}
|
|
159
138
|
</schmancy-chips>
|
|
160
139
|
|
|
161
|
-
//
|
|
140
|
+
// Read-only chips display
|
|
162
141
|
<div>
|
|
163
|
-
<
|
|
164
|
-
<schmancy-
|
|
165
|
-
|
|
166
|
-
<schmancy-chip
|
|
167
|
-
text=${filter.label}
|
|
168
|
-
closable
|
|
169
|
-
@close=${() => removeFilter(filter.id)}>
|
|
170
|
-
</schmancy-chip>
|
|
171
|
-
`)}
|
|
172
|
-
|
|
173
|
-
<schmancy-chip
|
|
174
|
-
text="Add Filter"
|
|
175
|
-
@click=${openFilterDialog}>
|
|
176
|
-
<schmancy-icon slot="prefix" icon="add"></schmancy-icon>
|
|
177
|
-
</schmancy-chip>
|
|
178
|
-
</schmancy-chips>
|
|
142
|
+
<schmancy-chip value="completed" icon="✅" readOnly>Completed</schmancy-chip>
|
|
143
|
+
<schmancy-chip value="pending" icon="⏳" readOnly>Pending</schmancy-chip>
|
|
144
|
+
<schmancy-chip value="cancelled" icon="❌" readOnly>Cancelled</schmancy-chip>
|
|
179
145
|
</div>
|
|
180
146
|
```
|
|
@@ -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-BWl8md6o.js";
|
|
5
|
+
import "./tailwind.mixin-DRbXmwPy.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-BYS4ollO.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"animated-text-Dr60iE4v.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-BYS4ollO.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,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-DWxMKydc.cjs");require("./tailwind.mixin-B1NF3tDz.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-jb8xtsKZ.cjs.map
|