@mhmo91/schmancy 0.2.104 → 0.2.105
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{animated-text-DMvZ91Pi.cjs → animated-text-B-gRGTS2.cjs} +2 -2
- package/dist/{animated-text-DMvZ91Pi.cjs.map → animated-text-B-gRGTS2.cjs.map} +1 -1
- package/dist/{animated-text-Zzonc23y.js → animated-text-gc7T0HLa.js} +3 -3
- package/dist/{animated-text-Zzonc23y.js.map → animated-text-gc7T0HLa.js.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-B1dh2oPl.js → area.component-Bd-yUYxJ.js} +3 -3
- package/dist/{area.component-B1dh2oPl.js.map → area.component-Bd-yUYxJ.js.map} +1 -1
- package/dist/{area.component-u1833ygY.cjs → area.component-DaAJvOaf.cjs} +2 -2
- package/dist/{area.component-u1833ygY.cjs.map → area.component-DaAJvOaf.cjs.map} +1 -1
- package/dist/area.js +1 -1
- package/dist/{autocomplete-2xI-YGmY.cjs → autocomplete-Ct3zhedL.cjs} +2 -2
- package/dist/{autocomplete-2xI-YGmY.cjs.map → autocomplete-Ct3zhedL.cjs.map} +1 -1
- package/dist/{autocomplete-DgPHNNK4.js → autocomplete-DNypXTYG.js} +3 -3
- package/dist/{autocomplete-DgPHNNK4.js.map → autocomplete-DNypXTYG.js.map} +1 -1
- package/dist/autocomplete.cjs +1 -1
- package/dist/autocomplete.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-CKrSzer3.js → checkbox-DxHSWouk.js} +2 -2
- package/dist/{checkbox-CKrSzer3.js.map → checkbox-DxHSWouk.js.map} +1 -1
- package/dist/{checkbox-Dii2nqhC.cjs → checkbox-VYAzANWi.cjs} +2 -2
- package/dist/{checkbox-Dii2nqhC.cjs.map → checkbox-VYAzANWi.cjs.map} +1 -1
- package/dist/checkbox.cjs +1 -1
- package/dist/checkbox.js +1 -1
- package/dist/{chips-BRgVxSAK.js → chips-CR5QTRYd.js} +3 -3
- package/dist/{chips-BRgVxSAK.js.map → chips-CR5QTRYd.js.map} +1 -1
- package/dist/{chips-oAoJx3xK.cjs → chips-SxuwP65D.cjs} +2 -2
- package/dist/{chips-oAoJx3xK.cjs.map → chips-SxuwP65D.cjs.map} +1 -1
- package/dist/chips.cjs +1 -1
- package/dist/chips.js +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-CrgRRdGS.cjs → date-range-BKcjHwBs.cjs} +2 -2
- package/dist/{date-range-CrgRRdGS.cjs.map → date-range-BKcjHwBs.cjs.map} +1 -1
- package/dist/{date-range-B8lM-Gwr.js → date-range-CUnECMbS.js} +3 -3
- package/dist/{date-range-B8lM-Gwr.js.map → date-range-CUnECMbS.js.map} +1 -1
- package/dist/date-range.cjs +1 -1
- package/dist/date-range.js +1 -1
- package/dist/{delay-DyWOCKIu.js → delay-6t2zn7t4.js} +2 -2
- package/dist/{delay-DyWOCKIu.js.map → delay-6t2zn7t4.js.map} +1 -1
- package/dist/{delay-DORzS-xz.cjs → delay-DE7SE2Lx.cjs} +2 -2
- package/dist/{delay-DORzS-xz.cjs.map → delay-DE7SE2Lx.cjs.map} +1 -1
- package/dist/delay.cjs +1 -1
- package/dist/delay.js +1 -1
- package/dist/{divider-BQK0_zpf.js → divider-CdjlZINp.js} +3 -3
- package/dist/{divider-BQK0_zpf.js.map → divider-CdjlZINp.js.map} +1 -1
- package/dist/{divider-AD7B5zhm.cjs → divider-DZ_aPVkO.cjs} +2 -2
- package/dist/{divider-AD7B5zhm.cjs.map → divider-DZ_aPVkO.cjs.map} +1 -1
- package/dist/divider.cjs +1 -1
- package/dist/divider.js +1 -1
- package/dist/{flex-CZr7oQ9Y.cjs → flex-BONU-PFy.cjs} +2 -2
- package/dist/{flex-CZr7oQ9Y.cjs.map → flex-BONU-PFy.cjs.map} +1 -1
- package/dist/{flex-CgyFcRT6.js → flex-CxlUwIat.js} +2 -2
- package/dist/{flex-CgyFcRT6.js.map → flex-CxlUwIat.js.map} +1 -1
- package/dist/{form-gVJ0RRu0.cjs → form-CD_4LDVO.cjs} +2 -2
- package/dist/{form-gVJ0RRu0.cjs.map → form-CD_4LDVO.cjs.map} +1 -1
- package/dist/{form-Cid-0MaA.js → form-CRprmM0w.js} +2 -2
- package/dist/{form-Cid-0MaA.js.map → form-CRprmM0w.js.map} +1 -1
- package/dist/form.cjs +1 -1
- package/dist/form.js +1 -1
- package/dist/{icon-BPuovSPn.cjs → icon-CHArNkiO.cjs} +2 -2
- package/dist/{icon-BPuovSPn.cjs.map → icon-CHArNkiO.cjs.map} +1 -1
- package/dist/{icon-button-Cb44AXI8.cjs → icon-button-Bj7wtydv.cjs} +2 -2
- package/dist/{icon-button-Cb44AXI8.cjs.map → icon-button-Bj7wtydv.cjs.map} +1 -1
- package/dist/{icon-button-HBCK5RRi.js → icon-button-DtoWe88O.js} +3 -3
- package/dist/{icon-button-HBCK5RRi.js.map → icon-button-DtoWe88O.js.map} +1 -1
- package/dist/{icon-wGj9VX16.js → icon-rVYBp2x-.js} +3 -3
- package/dist/{icon-wGj9VX16.js.map → icon-rVYBp2x-.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 +33 -33
- package/dist/{input-yQZmwfun.js → input-Ctt6mtZc.js} +6 -6
- package/dist/{input-yQZmwfun.js.map → input-Ctt6mtZc.js.map} +1 -1
- package/dist/{input-C8b7bCcP.cjs → input-jRmXX3rp.cjs} +4 -4
- package/dist/{input-C8b7bCcP.cjs.map → input-jRmXX3rp.cjs.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-D230Vky3.js → list-6C-kQqCi.js} +2 -2
- package/dist/{list-D230Vky3.js.map → list-6C-kQqCi.js.map} +1 -1
- package/dist/{list-80LJZy4q.cjs → list-BZ55pU5L.cjs} +2 -2
- package/dist/{list-80LJZy4q.cjs.map → list-BZ55pU5L.cjs.map} +1 -1
- package/dist/list.cjs +1 -1
- package/dist/list.js +1 -1
- package/dist/{litElement.mixin-DA1nq3OE.cjs → litElement.mixin-9sOZ1KTq.cjs} +2 -2
- package/dist/{litElement.mixin-DA1nq3OE.cjs.map → litElement.mixin-9sOZ1KTq.cjs.map} +1 -1
- package/dist/{litElement.mixin-DIIXFwwy.js → litElement.mixin-B43tuAsM.js} +2 -2
- package/dist/{litElement.mixin-DIIXFwwy.js.map → litElement.mixin-B43tuAsM.js.map} +1 -1
- package/dist/{menu-D_sTXBbO.cjs → menu-Bd6Yleqx.cjs} +2 -2
- package/dist/{menu-D_sTXBbO.cjs.map → menu-Bd6Yleqx.cjs.map} +1 -1
- package/dist/{menu-9q6mbHaG.js → menu-D0izP8_9.js} +3 -3
- package/dist/{menu-9q6mbHaG.js.map → menu-D0izP8_9.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.cjs +1 -1
- package/dist/notification.js +1 -1
- package/dist/{option-CzgSfsqO.cjs → option-CLhNC_i9.cjs} +2 -2
- package/dist/{option-CzgSfsqO.cjs.map → option-CLhNC_i9.cjs.map} +1 -1
- package/dist/{option-OVXvZzXX.js → option-CxIpiUcJ.js} +2 -2
- package/dist/{option-OVXvZzXX.js.map → option-CxIpiUcJ.js.map} +1 -1
- package/dist/option.cjs +1 -1
- package/dist/option.js +1 -1
- package/dist/{outlet-DT80LcoZ.js → outlet-B16Pt3na.js} +2 -2
- package/dist/{outlet-DT80LcoZ.js.map → outlet-B16Pt3na.js.map} +1 -1
- package/dist/{outlet-C7rjq28x.cjs → outlet-CT1apG_R.cjs} +2 -2
- package/dist/{outlet-C7rjq28x.cjs.map → outlet-CT1apG_R.cjs.map} +1 -1
- package/dist/{payment-card-form-Cxw8K4Bz.js → payment-card-form-BwmcjAMM.js} +3 -3
- package/dist/{payment-card-form-Cxw8K4Bz.js.map → payment-card-form-BwmcjAMM.js.map} +1 -1
- package/dist/{payment-card-form--b3A-llt.cjs → payment-card-form-CQB_MKO_.cjs} +2 -2
- package/dist/{payment-card-form--b3A-llt.cjs.map → payment-card-form-CQB_MKO_.cjs.map} +1 -1
- package/dist/{radio-group-DYCBFhJg.js → radio-group-BvtrNylW.js} +2 -2
- package/dist/{radio-group-DYCBFhJg.js.map → radio-group-BvtrNylW.js.map} +1 -1
- package/dist/{radio-group-Bby3q70w.cjs → radio-group-BwJ-r3hy.cjs} +2 -2
- package/dist/{radio-group-Bby3q70w.cjs.map → radio-group-BwJ-r3hy.cjs.map} +1 -1
- package/dist/radio-group.cjs +1 -1
- package/dist/radio-group.js +1 -1
- package/dist/{select-BEP8d8b_.js → select-D6nFemFx.js} +3 -3
- package/dist/{select-BEP8d8b_.js.map → select-D6nFemFx.js.map} +1 -1
- package/dist/{select-BLjr99KM.cjs → select-DOTwG1aT.cjs} +2 -2
- package/dist/{select-BLjr99KM.cjs.map → select-DOTwG1aT.cjs.map} +1 -1
- package/dist/select.cjs +1 -1
- package/dist/select.js +1 -1
- package/dist/{sheet-oAe0B1jm.cjs → sheet-C_gzbR0e.cjs} +2 -2
- package/dist/{sheet-oAe0B1jm.cjs.map → sheet-C_gzbR0e.cjs.map} +1 -1
- package/dist/{sheet-BzcToxel.js → sheet-Y-ULBa4y.js} +3 -3
- package/dist/{sheet-BzcToxel.js.map → sheet-Y-ULBa4y.js.map} +1 -1
- package/dist/sheet.cjs +1 -1
- package/dist/sheet.js +1 -1
- package/dist/{slider-BAcT1aNo.js → slider-CFLiNdqN.js} +3 -3
- package/dist/{slider-BAcT1aNo.js.map → slider-CFLiNdqN.js.map} +1 -1
- package/dist/{slider-7tOxo-JN.cjs → slider-uzR2YTuo.cjs} +2 -2
- package/dist/{slider-7tOxo-JN.cjs.map → slider-uzR2YTuo.cjs.map} +1 -1
- package/dist/slider.cjs +1 -1
- package/dist/slider.js +1 -1
- package/dist/{spinner-BWLmpEe4.js → spinner-Ca50o0jU.js} +3 -3
- package/dist/{spinner-BWLmpEe4.js.map → spinner-Ca50o0jU.js.map} +1 -1
- package/dist/{spinner-C5tyUoUH.cjs → spinner-DisHMwJU.cjs} +2 -2
- package/dist/{spinner-C5tyUoUH.cjs.map → spinner-DisHMwJU.cjs.map} +1 -1
- package/dist/{surface-BHw-E4Ns.js → surface-D_qD1cZj.js} +2 -2
- package/dist/{surface-BHw-E4Ns.js.map → surface-D_qD1cZj.js.map} +1 -1
- package/dist/{surface-DQzIpP6p.cjs → surface-jiFO8Fq-.cjs} +2 -2
- package/dist/{surface-DQzIpP6p.cjs.map → surface-jiFO8Fq-.cjs.map} +1 -1
- package/dist/surface.cjs +1 -1
- package/dist/surface.js +1 -1
- package/dist/{table-svmLYHeN.cjs → table-B2-vIMmg.cjs} +2 -2
- package/dist/{table-svmLYHeN.cjs.map → table-B2-vIMmg.cjs.map} +1 -1
- package/dist/{table-CoqnMB3v.js → table-QyTaL_m4.js} +2 -2
- package/dist/{table-CoqnMB3v.js.map → table-QyTaL_m4.js.map} +1 -1
- package/dist/table.cjs +1 -1
- package/dist/table.js +1 -1
- package/dist/{tabs-group-BpRky0TZ.js → tabs-group-CWM0kWDK.js} +2 -2
- package/dist/{tabs-group-BpRky0TZ.js.map → tabs-group-CWM0kWDK.js.map} +1 -1
- package/dist/{tabs-group-1zlDT88I.cjs → tabs-group-DIkk0A7J.cjs} +2 -2
- package/dist/{tabs-group-1zlDT88I.cjs.map → tabs-group-DIkk0A7J.cjs.map} +1 -1
- package/dist/tabs.cjs +1 -1
- package/dist/tabs.js +1 -1
- package/dist/tailwind.mixin-DFM3jd9q.cjs +2 -0
- package/dist/{tailwind.mixin-BCq9pcGg.cjs.map → tailwind.mixin-DFM3jd9q.cjs.map} +1 -1
- package/dist/{tailwind.mixin-CXbUcwTo.js → tailwind.mixin-ECkyl80C.js} +2 -2
- package/dist/{tailwind.mixin-CXbUcwTo.js.map → tailwind.mixin-ECkyl80C.js.map} +1 -1
- package/dist/teleport.cjs +1 -1
- package/dist/{teleport.component-fFlS00qb.js → teleport.component-BbJ2RCj-.js} +35 -35
- package/dist/{teleport.component-fFlS00qb.js.map → teleport.component-BbJ2RCj-.js.map} +1 -1
- package/dist/{teleport.component-DL_aASxo.cjs → teleport.component-CLtX4xnl.cjs} +2 -2
- package/dist/{teleport.component-DL_aASxo.cjs.map → teleport.component-CLtX4xnl.cjs.map} +1 -1
- package/dist/teleport.js +1 -1
- package/dist/{textarea-ChIWzFaU.js → textarea-BMSNswLn.js} +2 -2
- package/dist/{textarea-ChIWzFaU.js.map → textarea-BMSNswLn.js.map} +1 -1
- package/dist/{textarea-hCVSw5xF.cjs → textarea-hbpsxkKy.cjs} +2 -2
- package/dist/{textarea-hCVSw5xF.cjs.map → textarea-hbpsxkKy.cjs.map} +1 -1
- package/dist/textarea.cjs +1 -1
- package/dist/textarea.js +1 -1
- package/dist/{theme-button-DpWfaCzm.js → theme-button-BoAxkMWO.js} +2 -2
- package/dist/{theme-button-DpWfaCzm.js.map → theme-button-BoAxkMWO.js.map} +1 -1
- package/dist/{theme-button-0_Dyv3N3.cjs → theme-button-CsWs0AS9.cjs} +2 -2
- package/dist/{theme-button-0_Dyv3N3.cjs.map → theme-button-CsWs0AS9.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-CafBed3r.js → theme.component-BIjHKguL.js} +2 -2
- package/dist/{theme.component-CafBed3r.js.map → theme.component-BIjHKguL.js.map} +1 -1
- package/dist/{theme.component-B3Bkeuj8.cjs → theme.component-BYbrrqK3.cjs} +2 -2
- package/dist/{theme.component-B3Bkeuj8.cjs.map → theme.component-BYbrrqK3.cjs.map} +1 -1
- package/dist/theme.js +1 -1
- package/dist/{tree-dGVAUSaR.cjs → tree-OqMXhWak.cjs} +2 -2
- package/dist/{tree-dGVAUSaR.cjs.map → tree-OqMXhWak.cjs.map} +1 -1
- package/dist/{tree-CWoVwnF3.js → tree-YkLiYcr_.js} +2 -2
- package/dist/{tree-CWoVwnF3.js.map → tree-YkLiYcr_.js.map} +1 -1
- package/dist/tree.cjs +1 -1
- package/dist/tree.js +1 -1
- package/dist/{typewriter-CJHUghKa.cjs → typewriter-CAmStzUa.cjs} +2 -2
- package/dist/{typewriter-CJHUghKa.cjs.map → typewriter-CAmStzUa.cjs.map} +1 -1
- package/dist/{typewriter-B7vPiHXT.js → typewriter-SgYEA2OC.js} +4 -4
- package/dist/{typewriter-B7vPiHXT.js.map → typewriter-SgYEA2OC.js.map} +1 -1
- package/dist/typewriter.cjs +1 -1
- package/dist/typewriter.js +1 -1
- package/dist/{typography-DFkEsBL_.js → typography-BXJ-xs12.js} +2 -2
- package/dist/{typography-DFkEsBL_.js.map → typography-BXJ-xs12.js.map} +1 -1
- package/dist/{typography-BmwF96eo.cjs → typography-CMNtjzZE.cjs} +2 -2
- package/dist/{typography-BmwF96eo.cjs.map → typography-CMNtjzZE.cjs.map} +1 -1
- package/dist/typography.cjs +1 -1
- package/dist/typography.js +1 -1
- package/package.json +1 -1
- package/dist/tailwind.mixin-BCq9pcGg.cjs +0 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"slider-BAcT1aNo.js","sources":["../src/slider/slide.ts","../src/slider/slider.ts"],"sourcesContent":["import { $LitElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { cache } from 'lit/directives/cache.js'\n\n/**\n * Supported slide \"types.\"\n * - 'image': Renders an <img>\n * - 'video': Renders a <video>\n * - 'content': Renders a <slot> (the default)\n */\ntype SlideType = 'image' | 'video' | 'content'\n\n/**\n * Allowed values for the 'fit' property,\n * which maps to CSS object-fit.\n */\ntype ObjectFit = 'cover' | 'contain' | 'fill' | 'scale-down' | 'none'\n\n@customElement('schmancy-slide')\nexport class SchmancySlide extends $LitElement(css`\n\t:host {\n\t\tdisplay: block;\n\t\tscroll-snap-align: center; /* If your slider uses scroll-snap */\n\t}\n\n\t.slide {\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t\theight: auto;\n\t\tobject-fit: var(--object-fit, cover);\n\t}\n`) {\n\t/**\n\t * Determines how this slide should be rendered.\n\t * Defaults to 'content' if not provided.\n\t */\n\t@property({ type: String }) type: SlideType = 'content'\n\n\t/**\n\t * Source for images or videos (if `type` is 'image' or 'video').\n\t */\n\t@property({ type: String }) src: string = ''\n\n\t/**\n\t * Alternate text for images.\n\t */\n\t@property({ type: String }) alt: string = ''\n\n\t/**\n\t * Whether to show default video controls (if `type` is 'video').\n\t */\n\t@property({ type: Boolean }) controls = true\n\n\t/**\n\t * Whether the video should autoplay (if `type` is 'video').\n\t */\n\t@property({ type: Boolean }) autoplay = false\n\n\t/**\n\t * Whether the video should loop (if `type` is 'video').\n\t */\n\t@property({ type: Boolean }) loop = false\n\n\t/**\n\t * Whether the video is muted (if `type` is 'video').\n\t */\n\t@property({ type: Boolean }) muted = false\n\n\t/**\n\t * CSS `object-fit` property, applied to images/videos.\n\t */\n\t@property({ type: String }) fit: ObjectFit = 'cover'\n\n\trender() {\n\t\treturn html` <div style=\"--object-fit: ${this.fit}\">${cache(this.renderSlide())}</div> `\n\t}\n\n\tprivate renderSlide() {\n\t\tswitch (this.type) {\n\t\t\tcase 'image':\n\t\t\t\treturn html` <img class=\"slide\" src=\"${this.src}\" alt=\"${this.alt}\" loading=\"lazy\" /> `\n\t\t\tcase 'video':\n\t\t\t\treturn html`\n\t\t\t\t\t<video\n\t\t\t\t\t\tclass=\"slide\"\n\t\t\t\t\t\tsrc=\"${this.src}\"\n\t\t\t\t\t\t?controls=\"${this.controls}\"\n\t\t\t\t\t\t?autoplay=\"${this.autoplay}\"\n\t\t\t\t\t\t?loop=\"${this.loop}\"\n\t\t\t\t\t\t?muted=\"${this.muted}\"\n\t\t\t\t\t>\n\t\t\t\t\t\tYour browser does not support HTML video.\n\t\t\t\t\t</video>\n\t\t\t\t`\n\t\t\tcase 'content':\n\t\t\tdefault:\n\t\t\t\treturn html`<slot></slot>`\n\t\t}\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-slide': SchmancySlide\n\t}\n}\n","import { $LitElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { fromEvent } from 'rxjs'\nimport { throttleTime } from 'rxjs/operators'\n\n@customElement('schmancy-slider')\nexport class SchmancySlider extends $LitElement(css`\n\t.slider {\n\t\t/* Lay out slides horizontally, one after another */\n\t\tdisplay: flex;\n\t\toverflow-x: auto;\n\n\t\t/* Optional: scroll snapping */\n\t\tscroll-snap-type: x mandatory;\n\n\t\t/* Hide scrollbars */\n\t\t-ms-overflow-style: none; /* IE and Edge */\n\t\tscrollbar-width: none; /* Firefox */\n\t}\n\t.slider::-webkit-scrollbar {\n\t\tdisplay: none; /* Chrome, Safari, Opera */\n\t}\n\n\t/* \n Ensure each slide takes up the full slider width.\n \"schmancy-slide\" is the child custom element.\n */\n\t::slotted(schmancy-slide) {\n\t\tflex: 0 0 100%;\n\t\tbox-sizing: border-box;\n\t}\n`) {\n\t/**\n\t * Currently centered slide index\n\t */\n\t@state() private selectedIndex: number = 0\n\n\t/**\n\t * If true, renders next/prev buttons\n\t */\n\t@property({ type: Boolean }) showArrows: boolean = true\n\n\t@query('#slider') private slider!: HTMLDivElement\n\t@query('slot') private defaultSlot!: HTMLSlotElement\n\n\tprotected firstUpdated() {\n\t\t// Start at leftmost position\n\t\tthis.slider.scrollLeft = 0\n\n\t\t// Throttle scroll events to update selected index\n\t\tfromEvent(this.slider, 'scroll')\n\t\t\t.pipe(throttleTime(100, undefined, { trailing: true }))\n\t\t\t.subscribe(() => {\n\t\t\t\tthis.updateSelectedIndexOnScroll()\n\t\t\t})\n\t}\n\n\tprivate updateSelectedIndexOnScroll() {\n\t\tconst slides = this.defaultSlot?.assignedElements({ flatten: true }) ?? []\n\t\tif (!slides.length) return\n\n\t\tconst oldIndex = this.selectedIndex\n\n\t\t// Center of the slider’s visible area\n\t\tconst sliderCenter = this.slider.scrollLeft + this.slider.clientWidth / 2\n\n\t\tlet closestIndex = 0\n\t\tlet closestDistance = Infinity\n\n\t\tslides.forEach((slide, index) => {\n\t\t\tconst itemStart = (slide as HTMLElement).offsetLeft\n\t\t\tconst itemCenter = itemStart + slide.clientWidth / 2\n\t\t\tconst distance = Math.abs(sliderCenter - itemCenter)\n\n\t\t\tif (distance < closestDistance) {\n\t\t\t\tclosestDistance = distance\n\t\t\t\tclosestIndex = index\n\t\t\t}\n\t\t})\n\n\t\tthis.selectedIndex = closestIndex\n\n\t\t// If the index changed, dispatch event\n\t\tif (this.selectedIndex !== oldIndex) {\n\t\t\tthis.dispatchEvent(\n\t\t\t\tnew CustomEvent('slide-changed', {\n\t\t\t\t\tdetail: { index: this.selectedIndex },\n\t\t\t\t}),\n\t\t\t)\n\t\t}\n\t}\n\n\tprivate goToSlide(newIndex: number) {\n\t\tconst slides = this.defaultSlot?.assignedElements({ flatten: true }) ?? []\n\t\tif (!slides[newIndex]) return\n\n\t\tthis.slider.scrollTo({\n\t\t\tleft: (slides[newIndex] as HTMLElement).offsetLeft,\n\t\t\tbehavior: 'smooth',\n\t\t})\n\t}\n\n\tprivate onPrevClick() {\n\t\tthis.goToSlide(this.selectedIndex - 1)\n\t}\n\n\tprivate onNextClick() {\n\t\tconst slides = this.defaultSlot?.assignedElements({ flatten: true }) ?? []\n\t\tif (this.selectedIndex < slides.length - 1) {\n\t\t\tthis.goToSlide(this.selectedIndex + 1)\n\t\t}\n\t}\n\n\trender() {\n\t\tconst slides = this.defaultSlot?.assignedElements({ flatten: true }) ?? []\n\n\t\treturn html`\n\t\t\t<div class=\"relative inset-0\">\n\t\t\t\t<!-- The scrollable track -->\n\t\t\t\t<div class=\"slider\" id=\"slider\">\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</div>\n\n\t\t\t\t<!-- Next/Prev Buttons (Optional) -->\n\t\t\t\t${this.showArrows\n\t\t\t\t\t? html`\n\t\t\t\t\t\t\t<schmancy-icon-button\n\t\t\t\t\t\t\t\tclass=\"absolute left-2 top-1/2 -translate-y-1/2\"\n\t\t\t\t\t\t\t\t@click=${this.onPrevClick}\n\t\t\t\t\t\t\t\t?disabled=${this.selectedIndex === 0}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tchevron_left\n\t\t\t\t\t\t\t</schmancy-icon-button>\n\t\t\t\t\t\t\t<schmancy-icon-button\n\t\t\t\t\t\t\t\tclass=\"absolute right-2 top-1/2 -translate-y-1/2\"\n\t\t\t\t\t\t\t\t@click=${this.onNextClick}\n\t\t\t\t\t\t\t\t?disabled=${this.selectedIndex === slides.length - 1}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tchevron_right\n\t\t\t\t\t\t\t</schmancy-icon-button>\n\t\t\t\t\t\t`\n\t\t\t\t\t: null}\n\n\t\t\t\t<!-- Dots / indicators -->\n\t\t\t\t<div class=\"absolute bottom-4 left-1/2 -translate-x-1/2 flex space-x-2\">\n\t\t\t\t\t${slides.map((_, index) => {\n\t\t\t\t\t\tconst isSelected = index === this.selectedIndex\n\t\t\t\t\t\treturn html`\n\t\t\t\t\t\t\t<schmancy-button .variant=${isSelected ? 'filled tonal' : 'outlined'} class=\"rounded-full \">\n\t\t\t\t\t\t\t</schmancy-button>\n\t\t\t\t\t\t`\n\t\t\t\t\t})}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-slider': SchmancySlider\n\t}\n}\n"],"names":["SchmancySlide","$LitElement","css","constructor","super","arguments","this","type","src","alt","controls","autoplay","loop","muted","fit","html","cache","renderSlide","__decorateClass","property","String","prototype","Boolean","customElement","SchmancySlider","selectedIndex","showArrows","slider","scrollLeft","fromEvent","pipe","throttleTime","trailing","subscribe","updateSelectedIndexOnScroll","slides","defaultSlot","assignedElements","flatten","length","oldIndex","sliderCenter","clientWidth","closestIndex","closestDistance","Infinity","forEach","slide","index","itemCenter","offsetLeft","distance","Math","abs","dispatchEvent","CustomEvent","detail","newIndex","scrollTo","left","behavior","goToSlide","onNextClick","render","onPrevClick","map","_","isSelected","state","query"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"slider-CFLiNdqN.js","sources":["../src/slider/slide.ts","../src/slider/slider.ts"],"sourcesContent":["import { $LitElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { cache } from 'lit/directives/cache.js'\n\n/**\n * Supported slide \"types.\"\n * - 'image': Renders an <img>\n * - 'video': Renders a <video>\n * - 'content': Renders a <slot> (the default)\n */\ntype SlideType = 'image' | 'video' | 'content'\n\n/**\n * Allowed values for the 'fit' property,\n * which maps to CSS object-fit.\n */\ntype ObjectFit = 'cover' | 'contain' | 'fill' | 'scale-down' | 'none'\n\n@customElement('schmancy-slide')\nexport class SchmancySlide extends $LitElement(css`\n\t:host {\n\t\tdisplay: block;\n\t\tscroll-snap-align: center; /* If your slider uses scroll-snap */\n\t}\n\n\t.slide {\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t\theight: auto;\n\t\tobject-fit: var(--object-fit, cover);\n\t}\n`) {\n\t/**\n\t * Determines how this slide should be rendered.\n\t * Defaults to 'content' if not provided.\n\t */\n\t@property({ type: String }) type: SlideType = 'content'\n\n\t/**\n\t * Source for images or videos (if `type` is 'image' or 'video').\n\t */\n\t@property({ type: String }) src: string = ''\n\n\t/**\n\t * Alternate text for images.\n\t */\n\t@property({ type: String }) alt: string = ''\n\n\t/**\n\t * Whether to show default video controls (if `type` is 'video').\n\t */\n\t@property({ type: Boolean }) controls = true\n\n\t/**\n\t * Whether the video should autoplay (if `type` is 'video').\n\t */\n\t@property({ type: Boolean }) autoplay = false\n\n\t/**\n\t * Whether the video should loop (if `type` is 'video').\n\t */\n\t@property({ type: Boolean }) loop = false\n\n\t/**\n\t * Whether the video is muted (if `type` is 'video').\n\t */\n\t@property({ type: Boolean }) muted = false\n\n\t/**\n\t * CSS `object-fit` property, applied to images/videos.\n\t */\n\t@property({ type: String }) fit: ObjectFit = 'cover'\n\n\trender() {\n\t\treturn html` <div style=\"--object-fit: ${this.fit}\">${cache(this.renderSlide())}</div> `\n\t}\n\n\tprivate renderSlide() {\n\t\tswitch (this.type) {\n\t\t\tcase 'image':\n\t\t\t\treturn html` <img class=\"slide\" src=\"${this.src}\" alt=\"${this.alt}\" loading=\"lazy\" /> `\n\t\t\tcase 'video':\n\t\t\t\treturn html`\n\t\t\t\t\t<video\n\t\t\t\t\t\tclass=\"slide\"\n\t\t\t\t\t\tsrc=\"${this.src}\"\n\t\t\t\t\t\t?controls=\"${this.controls}\"\n\t\t\t\t\t\t?autoplay=\"${this.autoplay}\"\n\t\t\t\t\t\t?loop=\"${this.loop}\"\n\t\t\t\t\t\t?muted=\"${this.muted}\"\n\t\t\t\t\t>\n\t\t\t\t\t\tYour browser does not support HTML video.\n\t\t\t\t\t</video>\n\t\t\t\t`\n\t\t\tcase 'content':\n\t\t\tdefault:\n\t\t\t\treturn html`<slot></slot>`\n\t\t}\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-slide': SchmancySlide\n\t}\n}\n","import { $LitElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { fromEvent } from 'rxjs'\nimport { throttleTime } from 'rxjs/operators'\n\n@customElement('schmancy-slider')\nexport class SchmancySlider extends $LitElement(css`\n\t.slider {\n\t\t/* Lay out slides horizontally, one after another */\n\t\tdisplay: flex;\n\t\toverflow-x: auto;\n\n\t\t/* Optional: scroll snapping */\n\t\tscroll-snap-type: x mandatory;\n\n\t\t/* Hide scrollbars */\n\t\t-ms-overflow-style: none; /* IE and Edge */\n\t\tscrollbar-width: none; /* Firefox */\n\t}\n\t.slider::-webkit-scrollbar {\n\t\tdisplay: none; /* Chrome, Safari, Opera */\n\t}\n\n\t/* \n Ensure each slide takes up the full slider width.\n \"schmancy-slide\" is the child custom element.\n */\n\t::slotted(schmancy-slide) {\n\t\tflex: 0 0 100%;\n\t\tbox-sizing: border-box;\n\t}\n`) {\n\t/**\n\t * Currently centered slide index\n\t */\n\t@state() private selectedIndex: number = 0\n\n\t/**\n\t * If true, renders next/prev buttons\n\t */\n\t@property({ type: Boolean }) showArrows: boolean = true\n\n\t@query('#slider') private slider!: HTMLDivElement\n\t@query('slot') private defaultSlot!: HTMLSlotElement\n\n\tprotected firstUpdated() {\n\t\t// Start at leftmost position\n\t\tthis.slider.scrollLeft = 0\n\n\t\t// Throttle scroll events to update selected index\n\t\tfromEvent(this.slider, 'scroll')\n\t\t\t.pipe(throttleTime(100, undefined, { trailing: true }))\n\t\t\t.subscribe(() => {\n\t\t\t\tthis.updateSelectedIndexOnScroll()\n\t\t\t})\n\t}\n\n\tprivate updateSelectedIndexOnScroll() {\n\t\tconst slides = this.defaultSlot?.assignedElements({ flatten: true }) ?? []\n\t\tif (!slides.length) return\n\n\t\tconst oldIndex = this.selectedIndex\n\n\t\t// Center of the slider’s visible area\n\t\tconst sliderCenter = this.slider.scrollLeft + this.slider.clientWidth / 2\n\n\t\tlet closestIndex = 0\n\t\tlet closestDistance = Infinity\n\n\t\tslides.forEach((slide, index) => {\n\t\t\tconst itemStart = (slide as HTMLElement).offsetLeft\n\t\t\tconst itemCenter = itemStart + slide.clientWidth / 2\n\t\t\tconst distance = Math.abs(sliderCenter - itemCenter)\n\n\t\t\tif (distance < closestDistance) {\n\t\t\t\tclosestDistance = distance\n\t\t\t\tclosestIndex = index\n\t\t\t}\n\t\t})\n\n\t\tthis.selectedIndex = closestIndex\n\n\t\t// If the index changed, dispatch event\n\t\tif (this.selectedIndex !== oldIndex) {\n\t\t\tthis.dispatchEvent(\n\t\t\t\tnew CustomEvent('slide-changed', {\n\t\t\t\t\tdetail: { index: this.selectedIndex },\n\t\t\t\t}),\n\t\t\t)\n\t\t}\n\t}\n\n\tprivate goToSlide(newIndex: number) {\n\t\tconst slides = this.defaultSlot?.assignedElements({ flatten: true }) ?? []\n\t\tif (!slides[newIndex]) return\n\n\t\tthis.slider.scrollTo({\n\t\t\tleft: (slides[newIndex] as HTMLElement).offsetLeft,\n\t\t\tbehavior: 'smooth',\n\t\t})\n\t}\n\n\tprivate onPrevClick() {\n\t\tthis.goToSlide(this.selectedIndex - 1)\n\t}\n\n\tprivate onNextClick() {\n\t\tconst slides = this.defaultSlot?.assignedElements({ flatten: true }) ?? []\n\t\tif (this.selectedIndex < slides.length - 1) {\n\t\t\tthis.goToSlide(this.selectedIndex + 1)\n\t\t}\n\t}\n\n\trender() {\n\t\tconst slides = this.defaultSlot?.assignedElements({ flatten: true }) ?? []\n\n\t\treturn html`\n\t\t\t<div class=\"relative inset-0\">\n\t\t\t\t<!-- The scrollable track -->\n\t\t\t\t<div class=\"slider\" id=\"slider\">\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</div>\n\n\t\t\t\t<!-- Next/Prev Buttons (Optional) -->\n\t\t\t\t${this.showArrows\n\t\t\t\t\t? html`\n\t\t\t\t\t\t\t<schmancy-icon-button\n\t\t\t\t\t\t\t\tclass=\"absolute left-2 top-1/2 -translate-y-1/2\"\n\t\t\t\t\t\t\t\t@click=${this.onPrevClick}\n\t\t\t\t\t\t\t\t?disabled=${this.selectedIndex === 0}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tchevron_left\n\t\t\t\t\t\t\t</schmancy-icon-button>\n\t\t\t\t\t\t\t<schmancy-icon-button\n\t\t\t\t\t\t\t\tclass=\"absolute right-2 top-1/2 -translate-y-1/2\"\n\t\t\t\t\t\t\t\t@click=${this.onNextClick}\n\t\t\t\t\t\t\t\t?disabled=${this.selectedIndex === slides.length - 1}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tchevron_right\n\t\t\t\t\t\t\t</schmancy-icon-button>\n\t\t\t\t\t\t`\n\t\t\t\t\t: null}\n\n\t\t\t\t<!-- Dots / indicators -->\n\t\t\t\t<div class=\"absolute bottom-4 left-1/2 -translate-x-1/2 flex space-x-2\">\n\t\t\t\t\t${slides.map((_, index) => {\n\t\t\t\t\t\tconst isSelected = index === this.selectedIndex\n\t\t\t\t\t\treturn html`\n\t\t\t\t\t\t\t<schmancy-button .variant=${isSelected ? 'filled tonal' : 'outlined'} class=\"rounded-full \">\n\t\t\t\t\t\t\t</schmancy-button>\n\t\t\t\t\t\t`\n\t\t\t\t\t})}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-slider': SchmancySlider\n\t}\n}\n"],"names":["SchmancySlide","$LitElement","css","constructor","super","arguments","this","type","src","alt","controls","autoplay","loop","muted","fit","html","cache","renderSlide","__decorateClass","property","String","prototype","Boolean","customElement","SchmancySlider","selectedIndex","showArrows","slider","scrollLeft","fromEvent","pipe","throttleTime","trailing","subscribe","updateSelectedIndexOnScroll","slides","defaultSlot","assignedElements","flatten","length","oldIndex","sliderCenter","clientWidth","closestIndex","closestDistance","Infinity","forEach","slide","index","itemCenter","offsetLeft","distance","Math","abs","dispatchEvent","CustomEvent","detail","newIndex","scrollTo","left","behavior","goToSlide","onNextClick","render","onPrevClick","map","_","isSelected","state","query"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";const m=require("rxjs");require("lit/directives/class-map.js"),require("lit/directives/style-map.js");const p=require("./litElement.mixin-
|
|
1
|
+
"use strict";const m=require("rxjs");require("lit/directives/class-map.js"),require("lit/directives/style-map.js");const p=require("./litElement.mixin-9sOZ1KTq.cjs");require("./tailwind.mixin-DFM3jd9q.cjs");const d=require("lit"),o=require("lit/decorators.js"),S=require("lit/directives/cache.js"),f=require("rxjs/operators");var v=Object.defineProperty,b=Object.getOwnPropertyDescriptor,c=(s,e,i,l)=>{for(var r,t=l>1?void 0:l?b(e,i):e,n=s.length-1;n>=0;n--)(r=s[n])&&(t=(l?r(e,i,t):r(t))||t);return l&&t&&v(e,i,t),t};exports.SchmancySlide=class extends p.$LitElement(d.css`
|
|
2
2
|
:host {
|
|
3
3
|
display: block;
|
|
4
4
|
scroll-snap-align: center; /* If your slider uses scroll-snap */
|
|
@@ -80,4 +80,4 @@
|
|
|
80
80
|
</div>
|
|
81
81
|
</div>
|
|
82
82
|
`}},a([o.state()],exports.SchmancySlider.prototype,"selectedIndex",2),a([o.property({type:Boolean})],exports.SchmancySlider.prototype,"showArrows",2),a([o.query("#slider")],exports.SchmancySlider.prototype,"slider",2),a([o.query("slot")],exports.SchmancySlider.prototype,"defaultSlot",2),exports.SchmancySlider=a([o.customElement("schmancy-slider")],exports.SchmancySlider);
|
|
83
|
-
//# sourceMappingURL=slider-
|
|
83
|
+
//# sourceMappingURL=slider-uzR2YTuo.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"slider-7tOxo-JN.cjs","sources":["../src/slider/slide.ts","../src/slider/slider.ts"],"sourcesContent":["import { $LitElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { cache } from 'lit/directives/cache.js'\n\n/**\n * Supported slide \"types.\"\n * - 'image': Renders an <img>\n * - 'video': Renders a <video>\n * - 'content': Renders a <slot> (the default)\n */\ntype SlideType = 'image' | 'video' | 'content'\n\n/**\n * Allowed values for the 'fit' property,\n * which maps to CSS object-fit.\n */\ntype ObjectFit = 'cover' | 'contain' | 'fill' | 'scale-down' | 'none'\n\n@customElement('schmancy-slide')\nexport class SchmancySlide extends $LitElement(css`\n\t:host {\n\t\tdisplay: block;\n\t\tscroll-snap-align: center; /* If your slider uses scroll-snap */\n\t}\n\n\t.slide {\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t\theight: auto;\n\t\tobject-fit: var(--object-fit, cover);\n\t}\n`) {\n\t/**\n\t * Determines how this slide should be rendered.\n\t * Defaults to 'content' if not provided.\n\t */\n\t@property({ type: String }) type: SlideType = 'content'\n\n\t/**\n\t * Source for images or videos (if `type` is 'image' or 'video').\n\t */\n\t@property({ type: String }) src: string = ''\n\n\t/**\n\t * Alternate text for images.\n\t */\n\t@property({ type: String }) alt: string = ''\n\n\t/**\n\t * Whether to show default video controls (if `type` is 'video').\n\t */\n\t@property({ type: Boolean }) controls = true\n\n\t/**\n\t * Whether the video should autoplay (if `type` is 'video').\n\t */\n\t@property({ type: Boolean }) autoplay = false\n\n\t/**\n\t * Whether the video should loop (if `type` is 'video').\n\t */\n\t@property({ type: Boolean }) loop = false\n\n\t/**\n\t * Whether the video is muted (if `type` is 'video').\n\t */\n\t@property({ type: Boolean }) muted = false\n\n\t/**\n\t * CSS `object-fit` property, applied to images/videos.\n\t */\n\t@property({ type: String }) fit: ObjectFit = 'cover'\n\n\trender() {\n\t\treturn html` <div style=\"--object-fit: ${this.fit}\">${cache(this.renderSlide())}</div> `\n\t}\n\n\tprivate renderSlide() {\n\t\tswitch (this.type) {\n\t\t\tcase 'image':\n\t\t\t\treturn html` <img class=\"slide\" src=\"${this.src}\" alt=\"${this.alt}\" loading=\"lazy\" /> `\n\t\t\tcase 'video':\n\t\t\t\treturn html`\n\t\t\t\t\t<video\n\t\t\t\t\t\tclass=\"slide\"\n\t\t\t\t\t\tsrc=\"${this.src}\"\n\t\t\t\t\t\t?controls=\"${this.controls}\"\n\t\t\t\t\t\t?autoplay=\"${this.autoplay}\"\n\t\t\t\t\t\t?loop=\"${this.loop}\"\n\t\t\t\t\t\t?muted=\"${this.muted}\"\n\t\t\t\t\t>\n\t\t\t\t\t\tYour browser does not support HTML video.\n\t\t\t\t\t</video>\n\t\t\t\t`\n\t\t\tcase 'content':\n\t\t\tdefault:\n\t\t\t\treturn html`<slot></slot>`\n\t\t}\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-slide': SchmancySlide\n\t}\n}\n","import { $LitElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { fromEvent } from 'rxjs'\nimport { throttleTime } from 'rxjs/operators'\n\n@customElement('schmancy-slider')\nexport class SchmancySlider extends $LitElement(css`\n\t.slider {\n\t\t/* Lay out slides horizontally, one after another */\n\t\tdisplay: flex;\n\t\toverflow-x: auto;\n\n\t\t/* Optional: scroll snapping */\n\t\tscroll-snap-type: x mandatory;\n\n\t\t/* Hide scrollbars */\n\t\t-ms-overflow-style: none; /* IE and Edge */\n\t\tscrollbar-width: none; /* Firefox */\n\t}\n\t.slider::-webkit-scrollbar {\n\t\tdisplay: none; /* Chrome, Safari, Opera */\n\t}\n\n\t/* \n Ensure each slide takes up the full slider width.\n \"schmancy-slide\" is the child custom element.\n */\n\t::slotted(schmancy-slide) {\n\t\tflex: 0 0 100%;\n\t\tbox-sizing: border-box;\n\t}\n`) {\n\t/**\n\t * Currently centered slide index\n\t */\n\t@state() private selectedIndex: number = 0\n\n\t/**\n\t * If true, renders next/prev buttons\n\t */\n\t@property({ type: Boolean }) showArrows: boolean = true\n\n\t@query('#slider') private slider!: HTMLDivElement\n\t@query('slot') private defaultSlot!: HTMLSlotElement\n\n\tprotected firstUpdated() {\n\t\t// Start at leftmost position\n\t\tthis.slider.scrollLeft = 0\n\n\t\t// Throttle scroll events to update selected index\n\t\tfromEvent(this.slider, 'scroll')\n\t\t\t.pipe(throttleTime(100, undefined, { trailing: true }))\n\t\t\t.subscribe(() => {\n\t\t\t\tthis.updateSelectedIndexOnScroll()\n\t\t\t})\n\t}\n\n\tprivate updateSelectedIndexOnScroll() {\n\t\tconst slides = this.defaultSlot?.assignedElements({ flatten: true }) ?? []\n\t\tif (!slides.length) return\n\n\t\tconst oldIndex = this.selectedIndex\n\n\t\t// Center of the slider’s visible area\n\t\tconst sliderCenter = this.slider.scrollLeft + this.slider.clientWidth / 2\n\n\t\tlet closestIndex = 0\n\t\tlet closestDistance = Infinity\n\n\t\tslides.forEach((slide, index) => {\n\t\t\tconst itemStart = (slide as HTMLElement).offsetLeft\n\t\t\tconst itemCenter = itemStart + slide.clientWidth / 2\n\t\t\tconst distance = Math.abs(sliderCenter - itemCenter)\n\n\t\t\tif (distance < closestDistance) {\n\t\t\t\tclosestDistance = distance\n\t\t\t\tclosestIndex = index\n\t\t\t}\n\t\t})\n\n\t\tthis.selectedIndex = closestIndex\n\n\t\t// If the index changed, dispatch event\n\t\tif (this.selectedIndex !== oldIndex) {\n\t\t\tthis.dispatchEvent(\n\t\t\t\tnew CustomEvent('slide-changed', {\n\t\t\t\t\tdetail: { index: this.selectedIndex },\n\t\t\t\t}),\n\t\t\t)\n\t\t}\n\t}\n\n\tprivate goToSlide(newIndex: number) {\n\t\tconst slides = this.defaultSlot?.assignedElements({ flatten: true }) ?? []\n\t\tif (!slides[newIndex]) return\n\n\t\tthis.slider.scrollTo({\n\t\t\tleft: (slides[newIndex] as HTMLElement).offsetLeft,\n\t\t\tbehavior: 'smooth',\n\t\t})\n\t}\n\n\tprivate onPrevClick() {\n\t\tthis.goToSlide(this.selectedIndex - 1)\n\t}\n\n\tprivate onNextClick() {\n\t\tconst slides = this.defaultSlot?.assignedElements({ flatten: true }) ?? []\n\t\tif (this.selectedIndex < slides.length - 1) {\n\t\t\tthis.goToSlide(this.selectedIndex + 1)\n\t\t}\n\t}\n\n\trender() {\n\t\tconst slides = this.defaultSlot?.assignedElements({ flatten: true }) ?? []\n\n\t\treturn html`\n\t\t\t<div class=\"relative inset-0\">\n\t\t\t\t<!-- The scrollable track -->\n\t\t\t\t<div class=\"slider\" id=\"slider\">\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</div>\n\n\t\t\t\t<!-- Next/Prev Buttons (Optional) -->\n\t\t\t\t${this.showArrows\n\t\t\t\t\t? html`\n\t\t\t\t\t\t\t<schmancy-icon-button\n\t\t\t\t\t\t\t\tclass=\"absolute left-2 top-1/2 -translate-y-1/2\"\n\t\t\t\t\t\t\t\t@click=${this.onPrevClick}\n\t\t\t\t\t\t\t\t?disabled=${this.selectedIndex === 0}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tchevron_left\n\t\t\t\t\t\t\t</schmancy-icon-button>\n\t\t\t\t\t\t\t<schmancy-icon-button\n\t\t\t\t\t\t\t\tclass=\"absolute right-2 top-1/2 -translate-y-1/2\"\n\t\t\t\t\t\t\t\t@click=${this.onNextClick}\n\t\t\t\t\t\t\t\t?disabled=${this.selectedIndex === slides.length - 1}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tchevron_right\n\t\t\t\t\t\t\t</schmancy-icon-button>\n\t\t\t\t\t\t`\n\t\t\t\t\t: null}\n\n\t\t\t\t<!-- Dots / indicators -->\n\t\t\t\t<div class=\"absolute bottom-4 left-1/2 -translate-x-1/2 flex space-x-2\">\n\t\t\t\t\t${slides.map((_, index) => {\n\t\t\t\t\t\tconst isSelected = index === this.selectedIndex\n\t\t\t\t\t\treturn html`\n\t\t\t\t\t\t\t<schmancy-button .variant=${isSelected ? 'filled tonal' : 'outlined'} class=\"rounded-full \">\n\t\t\t\t\t\t\t</schmancy-button>\n\t\t\t\t\t\t`\n\t\t\t\t\t})}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-slider': SchmancySlider\n\t}\n}\n"],"names":["SchmancySlide","$LitElement","css","super","arguments","this","type","src","alt","controls","autoplay","loop","muted","fit","render","html","cache","renderSlide","__decorateClass","property","String","prototype","Boolean","customElement","SchmancySlider","selectedIndex","showArrows","slider","scrollLeft","fromEvent","pipe","throttleTime","trailing","subscribe","updateSelectedIndexOnScroll","slides","defaultSlot","assignedElements","flatten","length","oldIndex","sliderCenter","clientWidth","closestIndex","closestDistance","Infinity","forEach","slide","index","itemCenter","offsetLeft","distance","Math","abs","dispatchEvent","CustomEvent","detail","newIndex","scrollTo","left","behavior","goToSlide","onNextClick","onPrevClick","map","_","isSelected","state","query"],"mappings":"sgBAoBaA,QAAAA,cAAN,cAA4BC,EAAAA,YAAYC,EAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,CAAxC,CAAA,CAAA,aAAAC,CAAAA,MAAAA,GAAAC,SAiBwCC,EAAAA,KAAAC,KAAA,UAKJD,KAAAE,IAAA,GAKAF,KAAAG,IAAA,GAKFH,KAAAI,SAAAA,GAKAJ,KAAAK,SAAA,GAKJL,KAAAM,KAAAA,GAKCN,KAAAO,MAAA,GAKQP,KAAAQ,IAAA,OAAA,CAE7C,QAAAC,CACQ,OAAAC,oCAAkCV,KAAKQ,GAAAA,KAAQG,QAAMX,KAAKY,YAAAA,CAAAA,CAAAA,SAAc,CAGxE,aACP,CAAA,OAAQZ,KAAKC,KAAAA,CACZ,IAAK,QACJ,OAAOS,EAAgCA,gCAAAV,KAAKE,GAAAA,UAAaF,KAAKG,GAAAA,uBAC/D,IAAK,QACG,OAAAO,EAAAA;AAAAA;AAAAA;AAAAA,aAGEV,KAAKE,GAAAA;AAAAA,mBACCF,KAAKI,QAAAA;AAAAA,mBACLJ,KAAKK,QAAAA;AAAAA,eACTL,KAAKM,IAAAA;AAAAA,gBACJN,KAAKO,KAAAA;AAAAA;AAAAA;AAAAA;AAAAA,MAMlB,QACQ,OAAAG,EAAAA,mBACT,CAAA,CAAA,EA7D2BG,EAAA,CAA3BC,WAAS,CAAEb,KAAMc,MAjBNpB,CAAAA,CAAAA,EAAAA,sBAiBgBqB,UAAA,OAAA,GAKAH,EAAA,CAA3BC,WAAS,CAAEb,KAAMc,MAAAA,CAAAA,CAAAA,EAtBNpB,sBAsBgBqB,UAAA,MAAA,CAKAH,EAAAA,EAAA,CAA3BC,WAAS,CAAEb,KAAMc,UA3BNpB,sBA2BgBqB,UAAA,MAAA,CAAA,EAKCH,EAAA,CAA5BC,WAAS,CAAEb,KAAMgB,OAAAA,CAAAA,CAAAA,EAhCNtB,sBAgCiBqB,UAAA,WAAA,CAAA,EAKAH,EAAA,CAA5BC,WAAS,CAAEb,KAAMgB,WArCNtB,sBAqCiBqB,UAAA,WAAA,GAKAH,EAAA,CAA5BC,WAAS,CAAEb,KAAMgB,OA1CNtB,CAAAA,CAAAA,EAAAA,sBA0CiBqB,UAAA,OAAA,CAKAH,EAAAA,EAAA,CAA5BC,WAAS,CAAEb,KAAMgB,OAAAA,CAAAA,CAAAA,EA/CNtB,sBA+CiBqB,UAAA,QAAA,CAAA,EAKDH,EAAA,CAA3BC,WAAS,CAAEb,KAAMc,MAAAA,CAAAA,CAAAA,EApDNpB,sBAoDgBqB,UAAA,MAAA,CApDhBrB,EAAAA,QAANA,cAAAkB,EAAA,CADNK,EAAAA,cAAc,mBACFvB,uNCbAwB,QAAAA,eAAN,cAA6BvB,EAAAA,YAAYC,EAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,CAAzC,CAAA,CAAA,cAAAC,MAAAC,GAAAA,SAAAA,EA6BGC,KAAQoB,cAAwB,EAKUpB,KAAAqB,WAAA,EAAA,CAKzC,eAETrB,KAAKsB,OAAOC,WAAa,EAGzBC,EAAAA,UAAUxB,KAAKsB,OAAQ,QACrBG,EAAAA,KAAKC,EAAaA,aAAA,IAAA,OAAgB,CAAEC,SAAAA,MACpCC,UAAU,IAAA,CACV5B,KAAK6B,4BAA4B,CAAA,CAAA,CACjC,CAGK,6BAAAA,OACD,MAAAC,IAAS9B,EAAAA,KAAK+B,cAAL/B,YAAAA,EAAkBgC,iBAAiB,CAAEC,QAAS,EAAA,KAAW,GACpE,GAACH,CAAAA,EAAOI,OAAQ,OAEpB,MAAMC,EAAWnC,KAAKoB,cAGhBgB,EAAepC,KAAKsB,OAAOC,WAAavB,KAAKsB,OAAOe,YAAc,EAExE,IAAIC,EAAe,EACfC,EAAkBC,IAEfV,EAAAW,QAAQ,CAACC,EAAOC,IACtB,CAAA,MACMC,EADaF,EAAsBG,WACVH,EAAML,YAAc,EAC7CS,EAAWC,KAAKC,IAAIZ,EAAeQ,CAErCE,EAAAA,EAAWP,IACIA,EAAAO,EACHR,EAAAK,EAAA,GAIjB3C,KAAKoB,cAAgBkB,EAGjBtC,KAAKoB,gBAAkBe,GACrBnC,KAAAiD,cACJ,IAAIC,YAAY,gBAAiB,CAChCC,OAAQ,CAAER,MAAO3C,KAAKoB,iBAGzB,CAGO,UAAUgC,EAAAA,OACX,MAAAtB,IAAS9B,EAAAA,KAAK+B,cAAL/B,YAAAA,EAAkBgC,iBAAiB,CAAEC,UAAoB,KAAA,CAAA,EACnEH,EAAOsB,CAEZpD,GAAAA,KAAKsB,OAAO+B,SAAS,CACpBC,KAAOxB,EAAOsB,CAAAA,EAA0BP,WACxCU,SAAU,QAAA,CAAA,CACV,CAGM,cACFvD,KAAAwD,UAAUxD,KAAKoB,cAAgB,CAAA,CAAC,CAG9B,aAAAqC,OACD,MAAA3B,IAAS9B,EAAAA,KAAK+B,cAAL/B,YAAAA,EAAkBgC,iBAAiB,CAAEC,UAAoB,KAAA,CAAA,EACpEjC,KAAKoB,cAAgBU,EAAOI,OAAS,GACnClC,KAAAwD,UAAUxD,KAAKoB,cAAgB,CACrC,CAAA,CAGD,QACO,OAAA,MAAAU,IAAS9B,EAAAA,KAAK+B,cAAL/B,YAAAA,EAAkBgC,iBAAiB,CAAEC,QAAAA,OAAoB,CAEjE,EAAA,OAAAvB,EAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,MAQHV,KAAKqB,WACJX,EAAAA;AAAAA;AAAAA;AAAAA,iBAGUV,KAAK0D,WAAAA;AAAAA,oBACF1D,KAAKoB,gBAAkB,CAAlBA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,iBAMRpB,KAAKyD,WAAAA;AAAAA,oBACFzD,KAAKoB,gBAAkBU,EAAOI,OAAS,CAAA;AAAA;AAAA;AAAA;AAAA,QAKpD,IAAA;AAAA;AAAA;AAAA;AAAA,OAIAJ,EAAO6B,IAAI,CAACC,EAAGjB,IACV,CAAA,MAAAkB,EAAalB,IAAU3C,KAAKoB,cAC3B,OAAAV,EAAAA;AAAAA,mCACsBmD,EAAa,eAAiB,UAAA;AAAA;AAAA,OAAU,CAAA,CAAA;AAAA;AAAA;AAAA,GAGpE,CApHWhD,EAAAA,EAAA,CAAhBiD,EAAMA,MAAAA,CAAAA,EA7BK3C,uBA6BKH,UAAA,gBAAA,CAAA,EAKYH,EAAA,CAA5BC,WAAS,CAAEb,KAAMgB,OAlCNE,CAAAA,CAAAA,EAAAA,uBAkCiBH,UAAA,aAAA,CAEHH,EAAAA,EAAA,CAAzBkD,EAAAA,MAAM,SApCK5C,CAAAA,EAAAA,uBAoCcH,UAAA,SAAA,GACHH,EAAA,CAAtBkD,EAAAA,MAAM,MArCK5C,CAAAA,EAAAA,uBAqCWH,UAAA,cAAA,GArCXG,QAANA,eAAAN,EAAA,CADNK,EAAAA,cAAc,iBAAA,CAAA,EACFC"}
|
|
1
|
+
{"version":3,"file":"slider-uzR2YTuo.cjs","sources":["../src/slider/slide.ts","../src/slider/slider.ts"],"sourcesContent":["import { $LitElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { cache } from 'lit/directives/cache.js'\n\n/**\n * Supported slide \"types.\"\n * - 'image': Renders an <img>\n * - 'video': Renders a <video>\n * - 'content': Renders a <slot> (the default)\n */\ntype SlideType = 'image' | 'video' | 'content'\n\n/**\n * Allowed values for the 'fit' property,\n * which maps to CSS object-fit.\n */\ntype ObjectFit = 'cover' | 'contain' | 'fill' | 'scale-down' | 'none'\n\n@customElement('schmancy-slide')\nexport class SchmancySlide extends $LitElement(css`\n\t:host {\n\t\tdisplay: block;\n\t\tscroll-snap-align: center; /* If your slider uses scroll-snap */\n\t}\n\n\t.slide {\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t\theight: auto;\n\t\tobject-fit: var(--object-fit, cover);\n\t}\n`) {\n\t/**\n\t * Determines how this slide should be rendered.\n\t * Defaults to 'content' if not provided.\n\t */\n\t@property({ type: String }) type: SlideType = 'content'\n\n\t/**\n\t * Source for images or videos (if `type` is 'image' or 'video').\n\t */\n\t@property({ type: String }) src: string = ''\n\n\t/**\n\t * Alternate text for images.\n\t */\n\t@property({ type: String }) alt: string = ''\n\n\t/**\n\t * Whether to show default video controls (if `type` is 'video').\n\t */\n\t@property({ type: Boolean }) controls = true\n\n\t/**\n\t * Whether the video should autoplay (if `type` is 'video').\n\t */\n\t@property({ type: Boolean }) autoplay = false\n\n\t/**\n\t * Whether the video should loop (if `type` is 'video').\n\t */\n\t@property({ type: Boolean }) loop = false\n\n\t/**\n\t * Whether the video is muted (if `type` is 'video').\n\t */\n\t@property({ type: Boolean }) muted = false\n\n\t/**\n\t * CSS `object-fit` property, applied to images/videos.\n\t */\n\t@property({ type: String }) fit: ObjectFit = 'cover'\n\n\trender() {\n\t\treturn html` <div style=\"--object-fit: ${this.fit}\">${cache(this.renderSlide())}</div> `\n\t}\n\n\tprivate renderSlide() {\n\t\tswitch (this.type) {\n\t\t\tcase 'image':\n\t\t\t\treturn html` <img class=\"slide\" src=\"${this.src}\" alt=\"${this.alt}\" loading=\"lazy\" /> `\n\t\t\tcase 'video':\n\t\t\t\treturn html`\n\t\t\t\t\t<video\n\t\t\t\t\t\tclass=\"slide\"\n\t\t\t\t\t\tsrc=\"${this.src}\"\n\t\t\t\t\t\t?controls=\"${this.controls}\"\n\t\t\t\t\t\t?autoplay=\"${this.autoplay}\"\n\t\t\t\t\t\t?loop=\"${this.loop}\"\n\t\t\t\t\t\t?muted=\"${this.muted}\"\n\t\t\t\t\t>\n\t\t\t\t\t\tYour browser does not support HTML video.\n\t\t\t\t\t</video>\n\t\t\t\t`\n\t\t\tcase 'content':\n\t\t\tdefault:\n\t\t\t\treturn html`<slot></slot>`\n\t\t}\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-slide': SchmancySlide\n\t}\n}\n","import { $LitElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { fromEvent } from 'rxjs'\nimport { throttleTime } from 'rxjs/operators'\n\n@customElement('schmancy-slider')\nexport class SchmancySlider extends $LitElement(css`\n\t.slider {\n\t\t/* Lay out slides horizontally, one after another */\n\t\tdisplay: flex;\n\t\toverflow-x: auto;\n\n\t\t/* Optional: scroll snapping */\n\t\tscroll-snap-type: x mandatory;\n\n\t\t/* Hide scrollbars */\n\t\t-ms-overflow-style: none; /* IE and Edge */\n\t\tscrollbar-width: none; /* Firefox */\n\t}\n\t.slider::-webkit-scrollbar {\n\t\tdisplay: none; /* Chrome, Safari, Opera */\n\t}\n\n\t/* \n Ensure each slide takes up the full slider width.\n \"schmancy-slide\" is the child custom element.\n */\n\t::slotted(schmancy-slide) {\n\t\tflex: 0 0 100%;\n\t\tbox-sizing: border-box;\n\t}\n`) {\n\t/**\n\t * Currently centered slide index\n\t */\n\t@state() private selectedIndex: number = 0\n\n\t/**\n\t * If true, renders next/prev buttons\n\t */\n\t@property({ type: Boolean }) showArrows: boolean = true\n\n\t@query('#slider') private slider!: HTMLDivElement\n\t@query('slot') private defaultSlot!: HTMLSlotElement\n\n\tprotected firstUpdated() {\n\t\t// Start at leftmost position\n\t\tthis.slider.scrollLeft = 0\n\n\t\t// Throttle scroll events to update selected index\n\t\tfromEvent(this.slider, 'scroll')\n\t\t\t.pipe(throttleTime(100, undefined, { trailing: true }))\n\t\t\t.subscribe(() => {\n\t\t\t\tthis.updateSelectedIndexOnScroll()\n\t\t\t})\n\t}\n\n\tprivate updateSelectedIndexOnScroll() {\n\t\tconst slides = this.defaultSlot?.assignedElements({ flatten: true }) ?? []\n\t\tif (!slides.length) return\n\n\t\tconst oldIndex = this.selectedIndex\n\n\t\t// Center of the slider’s visible area\n\t\tconst sliderCenter = this.slider.scrollLeft + this.slider.clientWidth / 2\n\n\t\tlet closestIndex = 0\n\t\tlet closestDistance = Infinity\n\n\t\tslides.forEach((slide, index) => {\n\t\t\tconst itemStart = (slide as HTMLElement).offsetLeft\n\t\t\tconst itemCenter = itemStart + slide.clientWidth / 2\n\t\t\tconst distance = Math.abs(sliderCenter - itemCenter)\n\n\t\t\tif (distance < closestDistance) {\n\t\t\t\tclosestDistance = distance\n\t\t\t\tclosestIndex = index\n\t\t\t}\n\t\t})\n\n\t\tthis.selectedIndex = closestIndex\n\n\t\t// If the index changed, dispatch event\n\t\tif (this.selectedIndex !== oldIndex) {\n\t\t\tthis.dispatchEvent(\n\t\t\t\tnew CustomEvent('slide-changed', {\n\t\t\t\t\tdetail: { index: this.selectedIndex },\n\t\t\t\t}),\n\t\t\t)\n\t\t}\n\t}\n\n\tprivate goToSlide(newIndex: number) {\n\t\tconst slides = this.defaultSlot?.assignedElements({ flatten: true }) ?? []\n\t\tif (!slides[newIndex]) return\n\n\t\tthis.slider.scrollTo({\n\t\t\tleft: (slides[newIndex] as HTMLElement).offsetLeft,\n\t\t\tbehavior: 'smooth',\n\t\t})\n\t}\n\n\tprivate onPrevClick() {\n\t\tthis.goToSlide(this.selectedIndex - 1)\n\t}\n\n\tprivate onNextClick() {\n\t\tconst slides = this.defaultSlot?.assignedElements({ flatten: true }) ?? []\n\t\tif (this.selectedIndex < slides.length - 1) {\n\t\t\tthis.goToSlide(this.selectedIndex + 1)\n\t\t}\n\t}\n\n\trender() {\n\t\tconst slides = this.defaultSlot?.assignedElements({ flatten: true }) ?? []\n\n\t\treturn html`\n\t\t\t<div class=\"relative inset-0\">\n\t\t\t\t<!-- The scrollable track -->\n\t\t\t\t<div class=\"slider\" id=\"slider\">\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</div>\n\n\t\t\t\t<!-- Next/Prev Buttons (Optional) -->\n\t\t\t\t${this.showArrows\n\t\t\t\t\t? html`\n\t\t\t\t\t\t\t<schmancy-icon-button\n\t\t\t\t\t\t\t\tclass=\"absolute left-2 top-1/2 -translate-y-1/2\"\n\t\t\t\t\t\t\t\t@click=${this.onPrevClick}\n\t\t\t\t\t\t\t\t?disabled=${this.selectedIndex === 0}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tchevron_left\n\t\t\t\t\t\t\t</schmancy-icon-button>\n\t\t\t\t\t\t\t<schmancy-icon-button\n\t\t\t\t\t\t\t\tclass=\"absolute right-2 top-1/2 -translate-y-1/2\"\n\t\t\t\t\t\t\t\t@click=${this.onNextClick}\n\t\t\t\t\t\t\t\t?disabled=${this.selectedIndex === slides.length - 1}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tchevron_right\n\t\t\t\t\t\t\t</schmancy-icon-button>\n\t\t\t\t\t\t`\n\t\t\t\t\t: null}\n\n\t\t\t\t<!-- Dots / indicators -->\n\t\t\t\t<div class=\"absolute bottom-4 left-1/2 -translate-x-1/2 flex space-x-2\">\n\t\t\t\t\t${slides.map((_, index) => {\n\t\t\t\t\t\tconst isSelected = index === this.selectedIndex\n\t\t\t\t\t\treturn html`\n\t\t\t\t\t\t\t<schmancy-button .variant=${isSelected ? 'filled tonal' : 'outlined'} class=\"rounded-full \">\n\t\t\t\t\t\t\t</schmancy-button>\n\t\t\t\t\t\t`\n\t\t\t\t\t})}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-slider': SchmancySlider\n\t}\n}\n"],"names":["SchmancySlide","$LitElement","css","super","arguments","this","type","src","alt","controls","autoplay","loop","muted","fit","render","html","cache","renderSlide","__decorateClass","property","String","prototype","Boolean","customElement","SchmancySlider","selectedIndex","showArrows","slider","scrollLeft","fromEvent","pipe","throttleTime","trailing","subscribe","updateSelectedIndexOnScroll","slides","defaultSlot","assignedElements","flatten","length","oldIndex","sliderCenter","clientWidth","closestIndex","closestDistance","Infinity","forEach","slide","index","itemCenter","offsetLeft","distance","Math","abs","dispatchEvent","CustomEvent","detail","newIndex","scrollTo","left","behavior","goToSlide","onNextClick","onPrevClick","map","_","isSelected","state","query"],"mappings":"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"}
|
package/dist/slider.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./slider-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./slider-uzR2YTuo.cjs");Object.defineProperty(exports,"SchmancySlide",{enumerable:!0,get:()=>e.SchmancySlide}),Object.defineProperty(exports,"SchmancySlider",{enumerable:!0,get:()=>e.SchmancySlider});
|
|
2
2
|
//# sourceMappingURL=slider.cjs.map
|
package/dist/slider.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import "./theme.component-
|
|
1
|
+
import "./theme.component-BIjHKguL.js";
|
|
2
2
|
import { S as l } from "./theme.interface-C5Kj6WjD.js";
|
|
3
3
|
import { c as u } from "./ripple-BumgqsDT.js";
|
|
4
4
|
import "rxjs";
|
|
5
5
|
import "lit/directives/class-map.js";
|
|
6
6
|
import "lit/directives/style-map.js";
|
|
7
|
-
import { T as m } from "./tailwind.mixin-
|
|
7
|
+
import { T as m } from "./tailwind.mixin-ECkyl80C.js";
|
|
8
8
|
import { css as y, html as h } from "lit";
|
|
9
9
|
import { customElement as f, property as p } from "lit/decorators.js";
|
|
10
10
|
var v = Object.getOwnPropertyDescriptor;
|
|
@@ -74,4 +74,4 @@ let a = class extends m(y`
|
|
|
74
74
|
}
|
|
75
75
|
};
|
|
76
76
|
c([p({ type: String })], a.prototype, "color", 2), c([p({ type: String })], a.prototype, "size", 2), a = c([f("schmancy-spinner")], a);
|
|
77
|
-
//# sourceMappingURL=spinner-
|
|
77
|
+
//# sourceMappingURL=spinner-Ca50o0jU.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"spinner-
|
|
1
|
+
{"version":3,"file":"spinner-Ca50o0jU.js","sources":["../src/busy/busy.ts","../src/busy/spinner.ts"],"sourcesContent":["import { SchmancyTheme } from '@schmancy/theme'\nimport { color } from '@schmancy/directives'\nimport { TailwindElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\n@customElement('schmancy-busy')\nexport default class SchmancyBusy extends TailwindElement(css`\n\t:host {\n\t\tdisplay: inline;\n\t\tposition: absolute;\n\t\tinset: 0;\n\t}\n`) {\n\tprotected render(): unknown {\n\t\treturn html`\n\t\t\t<div class=\"absolute inset-0 flex justify-center items-center animate-pulse\">\n\t\t\t\t<!-- glass window -->\n\t\t\t\t<div\n\t\t\t\t\t${color({\n\t\t\t\t\t\tbgColor: SchmancyTheme.sys.color.secondary.container,\n\t\t\t\t\t\tcolor: SchmancyTheme.sys.color.tertiary.onContainer,\n\t\t\t\t\t})}\n\t\t\t\t\tclass=\"absolute transform-gpu inset-0 rounded-[inherit] opacity-50 flex align-middle justify-center items-center \"\n\t\t\t\t>\n\t\t\t\t\t<slot> </slot>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-busy': SchmancyBusy\n\t}\n}\n","import { TailwindElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\n@customElement('schmancy-spinner')\nexport default class SchmnacySpinner extends TailwindElement(css`\n\t.spinner {\n\t\tanimation: spin 1s linear infinite;\n\t\tanimation-direction: reverse;\n\t}\n\n\t@keyframes spin {\n\t\tfrom {\n\t\t\ttransform: rotate(0deg);\n\t\t}\n\t\tto {\n\t\t\ttransform: rotate(360deg);\n\t\t}\n\t}\n`) {\n\t@property({ type: String }) color: string = 'gray'\n\t@property({ type: String }) size: string = '24px'\n\n\tprotected render(): unknown {\n\t\tconst style = {\n\t\t\tfontSize: this.size,\n\t\t\tmaxWidth: this.size,\n\t\t\toverflow: 'hidden',\n\t\t}\n\t\treturn html`\n\t\t\t<div class=\"spinner\" style=${this.styleMap(style)}>\n\t\t\t\t<svg fill=\"none\" viewBox=\"0 0 16 16\" class=\"anim-rotate\" aria-hidden=\"true\" role=\"img\">\n\t\t\t\t\t<path\n\t\t\t\t\t\topacity=\".5\"\n\t\t\t\t\t\td=\"M8 15A7 7 0 108 1a7 7 0 000 14v0z\"\n\t\t\t\t\t\tstroke=\"var(--schmancy-sys-color-secondary-default)\"\n\t\t\t\t\t\tstroke-width=\"2\"\n\t\t\t\t\t></path>\n\t\t\t\t\t<path d=\"M15 8a7 7 0 01-7 7\" stroke=\"var(--schmancy-sys-color-secondary-default)\" stroke-width=\"2\"></path>\n\t\t\t\t\t<path d=\"M8 12a4 4 0 100-8 4 4 0 000 8z\" fill=\"var(--schmancy-sys-color-secondary-default)\"></path>\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-spinner': SchmnacySpinner\n\t}\n}\n"],"names":["SchmancyBusy","TailwindElement","css","render","html","color","bgColor","SchmancyTheme","sys","secondary","container","tertiary","onContainer","customElement","SchmnacySpinner","constructor","super","arguments","this","size","style","fontSize","maxWidth","overflow","styleMap","__decorateClass","property","type","String","prototype"],"mappings":";;;;;;;;;;AAOA,IAAqBA,IAArB,cAA0CC,EAAgBC;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;EAO/C,SAAAC;AACF,WAAAC;AAAAA;AAAAA;AAAAA;AAAAA,OAIFC,EAAM,EACPC,SAASC,EAAcC,IAAIH,MAAMI,UAAUC,WAC3CL,OAAOE,EAAcC,IAAIH,MAAMM,SAASC,YAAAA,CAAAA,CAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,EACvC;AAfcZ;AAAAA;;;GAArB,CADCa,EAAc,mBACMb;;;;;ACFrB,IAAqBc,IAArB,cAA6Cb,EAAgBC;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;EAA7D,cAAAa;AAAAC,UAAAC,GAAAA,SAAAA,GAe6CC,KAAAb,QAAA,QACDa,KAAAC,OAAA;AAAA,EAAA;AAAA,EAEjC,SAAAhB;AACT,UAAMiB,IAAQ,EACbC,UAAUH,KAAKC,MACfG,UAAUJ,KAAKC,MACfI,UAAU,SAEJ;AAAA,WAAAnB;AAAAA,gCACuBc,KAAKM,SAASJ,CAAAA,CAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,EAAM;AAVvBK;AAAAA,EAAA,CAA3BC,EAAS,EAAEC,MAAMC,YAfEd,EAeQe,WAAA,SAAA,CAAA,GACAJ,EAAA,CAA3BC,EAAS,EAAEC,MAAMC,OAhBEd,CAAAA,CAAAA,GAAAA,EAgBQe,WAAA,QAAA,IAhBRf,IAArBW,EAAA,CADCZ,EAAc,kBACMC,CAAAA,GAAAA,CAAAA;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";require("./theme.component-
|
|
1
|
+
"use strict";require("./theme.component-BYbrrqK3.cjs");const y=require("./theme.interface-Xg5Zi46a.cjs"),u=require("./ripple-C2BHbhcS.cjs");require("rxjs"),require("lit/directives/class-map.js"),require("lit/directives/style-map.js");const m=require("./tailwind.mixin-DFM3jd9q.cjs"),l=require("lit"),c=require("lit/decorators.js");var h=Object.getOwnPropertyDescriptor;let p=class extends m.TailwindElement(l.css`
|
|
2
2
|
:host {
|
|
3
3
|
display: inline;
|
|
4
4
|
position: absolute;
|
|
@@ -42,4 +42,4 @@
|
|
|
42
42
|
</svg>
|
|
43
43
|
</div>
|
|
44
44
|
`}};d([c.property({type:String})],a.prototype,"color",2),d([c.property({type:String})],a.prototype,"size",2),a=d([c.customElement("schmancy-spinner")],a);
|
|
45
|
-
//# sourceMappingURL=spinner-
|
|
45
|
+
//# sourceMappingURL=spinner-DisHMwJU.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"spinner-
|
|
1
|
+
{"version":3,"file":"spinner-DisHMwJU.cjs","sources":["../src/busy/busy.ts","../src/busy/spinner.ts"],"sourcesContent":["import { SchmancyTheme } from '@schmancy/theme'\nimport { color } from '@schmancy/directives'\nimport { TailwindElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\n@customElement('schmancy-busy')\nexport default class SchmancyBusy extends TailwindElement(css`\n\t:host {\n\t\tdisplay: inline;\n\t\tposition: absolute;\n\t\tinset: 0;\n\t}\n`) {\n\tprotected render(): unknown {\n\t\treturn html`\n\t\t\t<div class=\"absolute inset-0 flex justify-center items-center animate-pulse\">\n\t\t\t\t<!-- glass window -->\n\t\t\t\t<div\n\t\t\t\t\t${color({\n\t\t\t\t\t\tbgColor: SchmancyTheme.sys.color.secondary.container,\n\t\t\t\t\t\tcolor: SchmancyTheme.sys.color.tertiary.onContainer,\n\t\t\t\t\t})}\n\t\t\t\t\tclass=\"absolute transform-gpu inset-0 rounded-[inherit] opacity-50 flex align-middle justify-center items-center \"\n\t\t\t\t>\n\t\t\t\t\t<slot> </slot>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-busy': SchmancyBusy\n\t}\n}\n","import { TailwindElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\n@customElement('schmancy-spinner')\nexport default class SchmnacySpinner extends TailwindElement(css`\n\t.spinner {\n\t\tanimation: spin 1s linear infinite;\n\t\tanimation-direction: reverse;\n\t}\n\n\t@keyframes spin {\n\t\tfrom {\n\t\t\ttransform: rotate(0deg);\n\t\t}\n\t\tto {\n\t\t\ttransform: rotate(360deg);\n\t\t}\n\t}\n`) {\n\t@property({ type: String }) color: string = 'gray'\n\t@property({ type: String }) size: string = '24px'\n\n\tprotected render(): unknown {\n\t\tconst style = {\n\t\t\tfontSize: this.size,\n\t\t\tmaxWidth: this.size,\n\t\t\toverflow: 'hidden',\n\t\t}\n\t\treturn html`\n\t\t\t<div class=\"spinner\" style=${this.styleMap(style)}>\n\t\t\t\t<svg fill=\"none\" viewBox=\"0 0 16 16\" class=\"anim-rotate\" aria-hidden=\"true\" role=\"img\">\n\t\t\t\t\t<path\n\t\t\t\t\t\topacity=\".5\"\n\t\t\t\t\t\td=\"M8 15A7 7 0 108 1a7 7 0 000 14v0z\"\n\t\t\t\t\t\tstroke=\"var(--schmancy-sys-color-secondary-default)\"\n\t\t\t\t\t\tstroke-width=\"2\"\n\t\t\t\t\t></path>\n\t\t\t\t\t<path d=\"M15 8a7 7 0 01-7 7\" stroke=\"var(--schmancy-sys-color-secondary-default)\" stroke-width=\"2\"></path>\n\t\t\t\t\t<path d=\"M8 12a4 4 0 100-8 4 4 0 000 8z\" fill=\"var(--schmancy-sys-color-secondary-default)\"></path>\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-spinner': SchmnacySpinner\n\t}\n}\n"],"names":["SchmancyBusy","TailwindElement","css","render","html","color","bgColor","SchmancyTheme","sys","secondary","container","tertiary","onContainer","customElement","SchmnacySpinner","constructor","super","arguments","this","size","style","fontSize","maxWidth","overflow","styleMap","__decorateClass","property","type","String","prototype"],"mappings":"iXAOA,IAAqBA,EAArB,cAA0CC,EAAAA,gBAAgBC,EAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,GAO/C,QAAAC,CACF,OAAAC,EAAAA;AAAAA;AAAAA;AAAAA;AAAAA,OAIFC,QAAM,CACPC,QAASC,EAAAA,cAAcC,IAAIH,MAAMI,UAAUC,UAC3CL,MAAOE,EAAAA,cAAcC,IAAIH,MAAMM,SAASC,WAAAA,CAAAA,CAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,GACvC,CAfcZ,EAAAA,wGAArB,CADCa,EAAAA,cAAc,eAAA,CAAA,EACMb,mMCFrB,IAAqBc,EAArB,cAA6Cb,EAAAA,gBAAgBC,EAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,GAA7D,aAAAa,CAAAC,MAAAC,GAAAA,SAAAA,EAe6CC,KAAAb,MAAA,OACDa,KAAAC,KAAA,MAAA,CAEjC,QAAAhB,CACT,MAAMiB,EAAQ,CACbC,SAAUH,KAAKC,KACfG,SAAUJ,KAAKC,KACfI,SAAU,QAAA,EAEJ,OAAAnB,EAAAA;AAAAA,gCACuBc,KAAKM,SAASJ,CAAAA,CAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,GAAM,CAVvBK,EAAAA,EAAA,CAA3BC,WAAS,CAAEC,KAAMC,MAAAA,CAAAA,CAAAA,EAfEd,EAeQe,UAAA,QAAA,CAAA,EACAJ,EAAA,CAA3BC,WAAS,CAAEC,KAAMC,MAhBEd,CAAAA,CAAAA,EAAAA,EAgBQe,UAAA,OAAA,CAhBRf,EAAAA,EAArBW,EAAA,CADCZ,EAAAA,cAAc,kBACMC,CAAAA,EAAAA,CAAAA"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { e as c, n as p } from "./provide-BLSgVvMJ.js";
|
|
2
|
-
import { T as d } from "./tailwind.mixin-
|
|
2
|
+
import { T as d } from "./tailwind.mixin-ECkyl80C.js";
|
|
3
3
|
import { css as u, html as f } from "lit";
|
|
4
4
|
import { property as h, customElement as y } from "lit/decorators.js";
|
|
5
5
|
import { classMap as g } from "lit/directives/class-map.js";
|
|
@@ -40,4 +40,4 @@ export {
|
|
|
40
40
|
w as S,
|
|
41
41
|
e as a
|
|
42
42
|
};
|
|
43
|
-
//# sourceMappingURL=surface-
|
|
43
|
+
//# sourceMappingURL=surface-D_qD1cZj.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"surface-
|
|
1
|
+
{"version":3,"file":"surface-D_qD1cZj.js","sources":["../src/surface/surface.ts"],"sourcesContent":["import { createContext, provide } from '@lit/context'\nimport { TailwindElement } from '@mixins/tailwind.mixin'\nimport { TSurfaceColor } from '@schmancy/types'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js' // Import classMap\n\nexport const SchmancySurfaceTypeContext = createContext<TSurfaceColor>('surface')\n\nexport type SchmancySurfaceFill = 'all' | 'width' | 'height' | 'auto'\n/**\n * `<schmancy-surface>` component\n *\n * This component renders a styled container that adapts its dimensions based on the `fill` property.\n * It supports various rounding options, elevation levels, and applies background and text color classes\n * based on the specified surface variant. Additionally, when the `scroller` property is true, the component\n * enables internal scrolling by applying overflow and scroll-behavior styles.\n *\n * @element schmancy-surface\n * @slot - Default slot for projecting child content.\n *\n * @example\n * <schmancy-surface fill=\"all\" rounded=\"all\" elevation=\"3\" type=\"surfaceBright\" scroller>\n * <p>Your scrollable content here</p>\n * </schmancy-surface>\n */\n@customElement('schmancy-surface')\nexport class SchmancySurface extends TailwindElement(css`\n\t:host([fill='all']) {\n\t\theight: 100%;\n\t\twidth: 100%;\n\t}\n\t:host([fill='width']) {\n\t\twidth: 100%;\n\t}\n\t:host([fill='height']) {\n\t\theight: 100%;\n\t}\n\t:host {\n\t\tdisplay: block;\n\t}\n`) {\n\t/**\n\t * Fill the width and/or height of the parent container.\n\t * Options: 'all', 'width', 'height', 'auto'.\n\t * @default 'auto'\n\t */\n\t@property({ type: String, reflect: true })\n\tfill: 'all' | 'width' | 'height' | 'auto' = 'auto'\n\n\t/**\n\t * Specifies the rounding style of the component's corners.\n\t * Options: 'none', 'top', 'left', 'right', 'bottom', 'all'.\n\t * @default 'none'\n\t */\n\t@property()\n\trounded: 'none' | 'top' | 'left' | 'right' | 'bottom' | 'all' = 'none'\n\n\t/**\n\t * Specifies the surface type for styling.\n\t * Provided to descendant components via context.\n\t * Options: 'surface', 'surfaceDim', 'surfaceBright', 'containerLowest',\n\t * 'containerLow', 'container', 'containerHigh', 'containerHighest'.\n\t * @default 'surface'\n\t */\n\t@provide({ context: SchmancySurfaceTypeContext })\n\t@property()\n\ttype: TSurfaceColor = 'surface'\n\n\t/**\n\t * Defines the elevation level (shadow depth) of the surface.\n\t * Valid values: 0, 1, 2, 3, 4, 5.\n\t * @default 0\n\t */\n\t@property({ type: Number, reflect: true })\n\televation: 0 | 1 | 2 | 3 | 4 | 5 = 0\n\n\tprotected render(): unknown {\n\t\tconst classes = {\n\t\t\trelative: true,\n\t\t\t'inset-0': true,\n\t\t\tblock: true,\n\t\t\t'box-border': true,\n\t\t\t// Rounding classes\n\t\t\t'rounded-none': this.rounded === 'none',\n\t\t\t'rounded-t-[8px]': this.rounded === 'top',\n\t\t\t'rounded-l-[8px]': this.rounded === 'left',\n\t\t\t'rounded-r-[8px]': this.rounded === 'right',\n\t\t\t'rounded-b-[8px]': this.rounded === 'bottom',\n\t\t\t'rounded-[8px]': this.rounded === 'all',\n\t\t\t// Fill classes\n\t\t\t'w-full': this.fill === 'width' || this.fill === 'all',\n\t\t\t'h-full': this.fill === 'height' || this.fill === 'all',\n\t\t\t// Elevation shadow classes\n\t\t\t'shadow-xs': this.elevation === 1,\n\t\t\t'shadow-sm': this.elevation === 2,\n\t\t\t'shadow-md': this.elevation === 3,\n\t\t\t'shadow-lg': this.elevation === 4,\n\t\t\t'shadow-xl': this.elevation === 5,\n\t\t\t// Text color based on the surface variant for optimal readability\n\t\t\t'text-surface-on':\n\t\t\t\tthis.type === 'surface' ||\n\t\t\t\tthis.type === 'surfaceDim' ||\n\t\t\t\tthis.type === 'surfaceBright' ||\n\t\t\t\tthis.type === 'containerLowest' ||\n\t\t\t\tthis.type === 'containerLow' ||\n\t\t\t\tthis.type === 'container' ||\n\t\t\t\tthis.type === 'containerHigh' ||\n\t\t\t\tthis.type === 'containerHighest',\n\t\t\t// Background color classes based on the surface variant\n\t\t\t'bg-surface-default': this.type === 'surface',\n\t\t\t'bg-surface-dim': this.type === 'surfaceDim',\n\t\t\t'bg-surface-bright': this.type === 'surfaceBright',\n\t\t\t'bg-surface-lowest': this.type === 'containerLowest',\n\t\t\t'bg-surface-low': this.type === 'containerLow',\n\t\t\t'bg-surface-container': this.type === 'container',\n\t\t\t'bg-surface-high': this.type === 'containerHigh',\n\t\t\t'bg-surface-highest': this.type === 'containerHighest',\n\t\t}\n\n\t\treturn html`\n\t\t\t<section class=${classMap(classes)}>\n\t\t\t\t<slot></slot>\n\t\t\t</section>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-surface': SchmancySurface\n\t}\n}\n"],"names":["SchmancySurfaceTypeContext","createContext","SchmancySurface","TailwindElement","css","super","arguments","this","fill","rounded","type","elevation","render","classes","relative","block","html","classMap","__decorateClass","property","String","reflect","prototype","provide","context","Number","customElement"],"mappings":";;;;;;;;;AAOa,MAAAA,IAA6BC,EAA6B,SAoB1D;AAAA,IAAAC,IAAN,cAA8BC,EAAgBC;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,CAA9C,EAAA;AAAA,EAAA,cAAAC;AAAAA,UAAAA,GAAAC,SAqBsCC,GAAAA,KAAAC,OAAA,QAQoBD,KAAAE,UAAA,QAW1CF,KAAAG,OAAA,WAQaH,KAAAI,YAAA;AAAA,EAAA;AAAA,EAEzB,SAAAC;AACT,UAAMC,IAAU,EACfC,UAAAA,IACA,WAAW,IACXC,OAAO,IACP,kBAEA,gBAAgBR,KAAKE,YAAY,QACjC,mBAAmBF,KAAKE,YAAY,OACpC,mBAAmBF,KAAKE,YAAY,QACpC,mBAAmBF,KAAKE,YAAY,SACpC,mBAAmBF,KAAKE,YAAY,UACpC,iBAAiBF,KAAKE,YAAY,OAElC,UAAUF,KAAKC,SAAS,WAAWD,KAAKC,SAAS,OACjD,UAAUD,KAAKC,SAAS,YAAYD,KAAKC,SAAS,OAElD,aAAaD,KAAKI,cAAc,GAChC,aAAaJ,KAAKI,cAAc,GAChC,aAAaJ,KAAKI,cAAc,GAChC,aAAaJ,KAAKI,cAAc,GAChC,aAAaJ,KAAKI,cAAc,GAEhC,mBACCJ,KAAKG,SAAS,aACdH,KAAKG,SAAS,gBACdH,KAAKG,SAAS,mBACdH,KAAKG,SAAS,qBACdH,KAAKG,SAAS,kBACdH,KAAKG,SAAS,eACdH,KAAKG,SAAS,mBACdH,KAAKG,SAAS,oBAEf,sBAAsBH,KAAKG,SAAS,WACpC,kBAAkBH,KAAKG,SAAS,cAChC,qBAAqBH,KAAKG,SAAS,iBACnC,qBAAqBH,KAAKG,SAAS,mBACnC,kBAAkBH,KAAKG,SAAS,gBAChC,wBAAwBH,KAAKG,SAAS,aACtC,mBAAmBH,KAAKG,SAAS,iBACjC,sBAAsBH,KAAKG,SAAS,mBAATA;AAGrB,WAAAM;AAAAA,oBACWC,EAASJ,CAAAA,CAAAA;AAAAA;AAAAA;AAAAA;AAAAA,EAAQ;AAzEpCK;AAAAA,EAAA,CADCC,EAAS,EAAET,MAAMU,QAAQC,SAAAA,GApBdnB,CAAAA,CAAAA,GAAAA,EAqBZoB,WAAA,QAAA,IAQAJ,EAAA,CADCC,MA5BWjB,EA6BZoB,WAAA,WAAA,CAWAJ,GAAAA,EAAA,CAFCK,EAAQ,EAAEC,SAASxB,MACnBmB,EAvCWjB,CAAAA,GAAAA,EAwCZoB,WAAA,QAAA,CAAA,GAQAJ,EAAA,CADCC,EAAS,EAAET,MAAMe,QAAQJ,SAAAA,QA/CdnB,EAgDZoB,WAAA,aAAA,CAhDYpB,GAAAA,IAANgB,EAAA,CADNQ,EAAc,kBACFxB,CAAAA,GAAAA,CAAAA;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";const u=require("./provide-DSU87U5x.cjs"),p=require("./tailwind.mixin-
|
|
1
|
+
"use strict";const u=require("./provide-DSU87U5x.cjs"),p=require("./tailwind.mixin-DFM3jd9q.cjs"),c=require("lit"),t=require("lit/decorators.js"),d=require("lit/directives/class-map.js");var f=Object.defineProperty,y=Object.getOwnPropertyDescriptor,r=(i,s,h,o)=>{for(var n,e=o>1?void 0:o?y(s,h):s,a=i.length-1;a>=0;a--)(n=i[a])&&(e=(o?n(s,h,e):n(e))||e);return o&&e&&f(s,h,e),e};const l=u.n("surface");exports.SchmancySurface=class extends p.TailwindElement(c.css`
|
|
2
2
|
:host([fill='all']) {
|
|
3
3
|
height: 100%;
|
|
4
4
|
width: 100%;
|
|
@@ -17,4 +17,4 @@
|
|
|
17
17
|
<slot></slot>
|
|
18
18
|
</section>
|
|
19
19
|
`}},r([t.property({type:String,reflect:!0})],exports.SchmancySurface.prototype,"fill",2),r([t.property()],exports.SchmancySurface.prototype,"rounded",2),r([u.e({context:l}),t.property()],exports.SchmancySurface.prototype,"type",2),r([t.property({type:Number,reflect:!0})],exports.SchmancySurface.prototype,"elevation",2),exports.SchmancySurface=r([t.customElement("schmancy-surface")],exports.SchmancySurface),exports.SchmancySurfaceTypeContext=l;
|
|
20
|
-
//# sourceMappingURL=surface-
|
|
20
|
+
//# sourceMappingURL=surface-jiFO8Fq-.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"surface-
|
|
1
|
+
{"version":3,"file":"surface-jiFO8Fq-.cjs","sources":["../src/surface/surface.ts"],"sourcesContent":["import { createContext, provide } from '@lit/context'\nimport { TailwindElement } from '@mixins/tailwind.mixin'\nimport { TSurfaceColor } from '@schmancy/types'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js' // Import classMap\n\nexport const SchmancySurfaceTypeContext = createContext<TSurfaceColor>('surface')\n\nexport type SchmancySurfaceFill = 'all' | 'width' | 'height' | 'auto'\n/**\n * `<schmancy-surface>` component\n *\n * This component renders a styled container that adapts its dimensions based on the `fill` property.\n * It supports various rounding options, elevation levels, and applies background and text color classes\n * based on the specified surface variant. Additionally, when the `scroller` property is true, the component\n * enables internal scrolling by applying overflow and scroll-behavior styles.\n *\n * @element schmancy-surface\n * @slot - Default slot for projecting child content.\n *\n * @example\n * <schmancy-surface fill=\"all\" rounded=\"all\" elevation=\"3\" type=\"surfaceBright\" scroller>\n * <p>Your scrollable content here</p>\n * </schmancy-surface>\n */\n@customElement('schmancy-surface')\nexport class SchmancySurface extends TailwindElement(css`\n\t:host([fill='all']) {\n\t\theight: 100%;\n\t\twidth: 100%;\n\t}\n\t:host([fill='width']) {\n\t\twidth: 100%;\n\t}\n\t:host([fill='height']) {\n\t\theight: 100%;\n\t}\n\t:host {\n\t\tdisplay: block;\n\t}\n`) {\n\t/**\n\t * Fill the width and/or height of the parent container.\n\t * Options: 'all', 'width', 'height', 'auto'.\n\t * @default 'auto'\n\t */\n\t@property({ type: String, reflect: true })\n\tfill: 'all' | 'width' | 'height' | 'auto' = 'auto'\n\n\t/**\n\t * Specifies the rounding style of the component's corners.\n\t * Options: 'none', 'top', 'left', 'right', 'bottom', 'all'.\n\t * @default 'none'\n\t */\n\t@property()\n\trounded: 'none' | 'top' | 'left' | 'right' | 'bottom' | 'all' = 'none'\n\n\t/**\n\t * Specifies the surface type for styling.\n\t * Provided to descendant components via context.\n\t * Options: 'surface', 'surfaceDim', 'surfaceBright', 'containerLowest',\n\t * 'containerLow', 'container', 'containerHigh', 'containerHighest'.\n\t * @default 'surface'\n\t */\n\t@provide({ context: SchmancySurfaceTypeContext })\n\t@property()\n\ttype: TSurfaceColor = 'surface'\n\n\t/**\n\t * Defines the elevation level (shadow depth) of the surface.\n\t * Valid values: 0, 1, 2, 3, 4, 5.\n\t * @default 0\n\t */\n\t@property({ type: Number, reflect: true })\n\televation: 0 | 1 | 2 | 3 | 4 | 5 = 0\n\n\tprotected render(): unknown {\n\t\tconst classes = {\n\t\t\trelative: true,\n\t\t\t'inset-0': true,\n\t\t\tblock: true,\n\t\t\t'box-border': true,\n\t\t\t// Rounding classes\n\t\t\t'rounded-none': this.rounded === 'none',\n\t\t\t'rounded-t-[8px]': this.rounded === 'top',\n\t\t\t'rounded-l-[8px]': this.rounded === 'left',\n\t\t\t'rounded-r-[8px]': this.rounded === 'right',\n\t\t\t'rounded-b-[8px]': this.rounded === 'bottom',\n\t\t\t'rounded-[8px]': this.rounded === 'all',\n\t\t\t// Fill classes\n\t\t\t'w-full': this.fill === 'width' || this.fill === 'all',\n\t\t\t'h-full': this.fill === 'height' || this.fill === 'all',\n\t\t\t// Elevation shadow classes\n\t\t\t'shadow-xs': this.elevation === 1,\n\t\t\t'shadow-sm': this.elevation === 2,\n\t\t\t'shadow-md': this.elevation === 3,\n\t\t\t'shadow-lg': this.elevation === 4,\n\t\t\t'shadow-xl': this.elevation === 5,\n\t\t\t// Text color based on the surface variant for optimal readability\n\t\t\t'text-surface-on':\n\t\t\t\tthis.type === 'surface' ||\n\t\t\t\tthis.type === 'surfaceDim' ||\n\t\t\t\tthis.type === 'surfaceBright' ||\n\t\t\t\tthis.type === 'containerLowest' ||\n\t\t\t\tthis.type === 'containerLow' ||\n\t\t\t\tthis.type === 'container' ||\n\t\t\t\tthis.type === 'containerHigh' ||\n\t\t\t\tthis.type === 'containerHighest',\n\t\t\t// Background color classes based on the surface variant\n\t\t\t'bg-surface-default': this.type === 'surface',\n\t\t\t'bg-surface-dim': this.type === 'surfaceDim',\n\t\t\t'bg-surface-bright': this.type === 'surfaceBright',\n\t\t\t'bg-surface-lowest': this.type === 'containerLowest',\n\t\t\t'bg-surface-low': this.type === 'containerLow',\n\t\t\t'bg-surface-container': this.type === 'container',\n\t\t\t'bg-surface-high': this.type === 'containerHigh',\n\t\t\t'bg-surface-highest': this.type === 'containerHighest',\n\t\t}\n\n\t\treturn html`\n\t\t\t<section class=${classMap(classes)}>\n\t\t\t\t<slot></slot>\n\t\t\t</section>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-surface': SchmancySurface\n\t}\n}\n"],"names":["SchmancySurfaceTypeContext","createContext","SchmancySurface","TailwindElement","css","super","arguments","this","fill","rounded","type","elevation","render","classes","relative","block","html","classMap","__decorateClass","property","String","reflect","prototype","provide","context","Number","customElement"],"mappings":"2XAOa,MAAAA,EAA6BC,IAA6B,WAoB1DC,QAAAA,gBAAN,cAA8BC,EAAAA,gBAAgBC,EAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,CAA9C,CAAA,CAAA,aAAAC,CAAAA,MAAAA,GAAAC,SAqBsCC,EAAAA,KAAAC,KAAA,OAQoBD,KAAAE,QAAA,OAW1CF,KAAAG,KAAA,UAQaH,KAAAI,UAAA,CAAA,CAEzB,QAAAC,CACT,MAAMC,EAAU,CACfC,SAAAA,GACA,UAAW,GACXC,MAAO,GACP,gBAEA,eAAgBR,KAAKE,UAAY,OACjC,kBAAmBF,KAAKE,UAAY,MACpC,kBAAmBF,KAAKE,UAAY,OACpC,kBAAmBF,KAAKE,UAAY,QACpC,kBAAmBF,KAAKE,UAAY,SACpC,gBAAiBF,KAAKE,UAAY,MAElC,SAAUF,KAAKC,OAAS,SAAWD,KAAKC,OAAS,MACjD,SAAUD,KAAKC,OAAS,UAAYD,KAAKC,OAAS,MAElD,YAAaD,KAAKI,YAAc,EAChC,YAAaJ,KAAKI,YAAc,EAChC,YAAaJ,KAAKI,YAAc,EAChC,YAAaJ,KAAKI,YAAc,EAChC,YAAaJ,KAAKI,YAAc,EAEhC,kBACCJ,KAAKG,OAAS,WACdH,KAAKG,OAAS,cACdH,KAAKG,OAAS,iBACdH,KAAKG,OAAS,mBACdH,KAAKG,OAAS,gBACdH,KAAKG,OAAS,aACdH,KAAKG,OAAS,iBACdH,KAAKG,OAAS,mBAEf,qBAAsBH,KAAKG,OAAS,UACpC,iBAAkBH,KAAKG,OAAS,aAChC,oBAAqBH,KAAKG,OAAS,gBACnC,oBAAqBH,KAAKG,OAAS,kBACnC,iBAAkBH,KAAKG,OAAS,eAChC,uBAAwBH,KAAKG,OAAS,YACtC,kBAAmBH,KAAKG,OAAS,gBACjC,qBAAsBH,KAAKG,OAAS,kBAG9B,EAAA,OAAAM,EAAAA;AAAAA,oBACWC,EAAAA,SAASJ,CAAAA,CAAAA;AAAAA;AAAAA;AAAAA,GAAQ,CAAA,EAzEpCK,EAAA,CADCC,EAAAA,SAAS,CAAET,KAAMU,OAAQC,QAAAA,EApBdnB,CAAAA,CAAAA,EAAAA,wBAqBZoB,UAAA,OAAA,CAAA,EAQAJ,EAAA,CADCC,EAASA,SAAAA,CAAAA,EA5BEjB,wBA6BZoB,UAAA,UAAA,CAWAJ,EAAAA,EAAA,CAFCK,IAAQ,CAAEC,QAASxB,CAAAA,CAAAA,EACnBmB,EAASA,SAAAA,CAAAA,EAvCEjB,wBAwCZoB,UAAA,OAAA,CAQAJ,EAAAA,EAAA,CADCC,EAAAA,SAAS,CAAET,KAAMe,OAAQJ,QAAS,EAAA,CAAA,CAAA,EA/CvBnB,wBAgDZoB,UAAA,YAAA,CAhDYpB,EAAAA,QAANA,gBAAAgB,EAAA,CADNQ,EAAAA,cAAc,kBAAA,CAAA,EACFxB"}
|
package/dist/surface.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./surface-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./surface-jiFO8Fq-.cjs");Object.defineProperty(exports,"SchmancySurface",{enumerable:!0,get:()=>e.SchmancySurface}),exports.SchmancySurfaceTypeContext=e.SchmancySurfaceTypeContext;
|
|
2
2
|
//# sourceMappingURL=surface.cjs.map
|
package/dist/surface.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
"use strict";require("rxjs"),require("lit/directives/class-map.js"),require("lit/directives/style-map.js");const u=require("./tailwind.mixin-
|
|
1
|
+
"use strict";require("rxjs"),require("lit/directives/class-map.js"),require("lit/directives/style-map.js");const u=require("./tailwind.mixin-DFM3jd9q.cjs"),c=require("lit"),m=require("lit/decorators.js");var a=Object.getOwnPropertyDescriptor;let o=class extends u.TailwindElement(){render(){return c.html`
|
|
2
2
|
<slot name="header"></slot>
|
|
3
3
|
<slot></slot>
|
|
4
4
|
<slot name="footer"></slot>
|
|
5
5
|
`}};o=((t,s,i,l)=>{for(var n,e=l>1?void 0:l?a(s,i):s,r=t.length-1;r>=0;r--)(n=t[r])&&(e=n(e)||e);return e})([m.customElement("schmancy-table")],o);
|
|
6
|
-
//# sourceMappingURL=table-
|
|
6
|
+
//# sourceMappingURL=table-B2-vIMmg.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-
|
|
1
|
+
{"version":3,"file":"table-B2-vIMmg.cjs","sources":["../src/table/table.ts"],"sourcesContent":["import { TailwindElement } from '@mixins/index'\nimport { html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\n@customElement('schmancy-table')\nexport default class SchmancyTable extends TailwindElement() {\n\tprotected render(): unknown {\n\t\treturn html`\n\t\t\t<slot name=\"header\"></slot>\n\t\t\t<slot></slot>\n\t\t\t<slot name=\"footer\"></slot>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-table': SchmancyTable\n\t}\n}\n"],"names":["SchmancyTable","TailwindElement","html","customElement"],"mappings":"kPAKA,IAAqBA,EAArB,cAA2CC,EAAAA,gBAChC,CAAA,CAAA,QACF,CAAA,OAAAC,EAAAA;AAAAA;AAAAA;AAAAA;AAAAA,GAAA,CAAA,EAFYF,wGAArB,CADCG,EAAAA,cAAc,gBACMH,CAAAA,EAAAA,CAAAA"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import "rxjs";
|
|
2
2
|
import "lit/directives/class-map.js";
|
|
3
3
|
import "lit/directives/style-map.js";
|
|
4
|
-
import { T as l } from "./tailwind.mixin-
|
|
4
|
+
import { T as l } from "./tailwind.mixin-ECkyl80C.js";
|
|
5
5
|
import { html as p } from "lit";
|
|
6
6
|
import { customElement as i } from "lit/decorators.js";
|
|
7
7
|
var c = Object.getOwnPropertyDescriptor;
|
|
@@ -18,4 +18,4 @@ a = ((o, e, n, s) => {
|
|
|
18
18
|
for (var m, t = s > 1 ? void 0 : s ? c(e, n) : e, r = o.length - 1; r >= 0; r--) (m = o[r]) && (t = m(t) || t);
|
|
19
19
|
return t;
|
|
20
20
|
})([i("schmancy-table")], a);
|
|
21
|
-
//# sourceMappingURL=table-
|
|
21
|
+
//# sourceMappingURL=table-QyTaL_m4.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-
|
|
1
|
+
{"version":3,"file":"table-QyTaL_m4.js","sources":["../src/table/table.ts"],"sourcesContent":["import { TailwindElement } from '@mixins/index'\nimport { html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\n@customElement('schmancy-table')\nexport default class SchmancyTable extends TailwindElement() {\n\tprotected render(): unknown {\n\t\treturn html`\n\t\t\t<slot name=\"header\"></slot>\n\t\t\t<slot></slot>\n\t\t\t<slot name=\"footer\"></slot>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-table': SchmancyTable\n\t}\n}\n"],"names":["SchmancyTable","TailwindElement","render","html","customElement"],"mappings":";;;;;;;AAKA,IAAqBA,IAArB,cAA2CC;EAChC,SAAAC;AACF,WAAAC;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,EAAA;AAAA;AAFYH;;;GAArB,CADCI,EAAc,gBACMJ,CAAAA,GAAAA,CAAAA;"}
|
package/dist/table.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";require("./table-
|
|
1
|
+
"use strict";require("./table-B2-vIMmg.cjs");
|
|
2
2
|
//# sourceMappingURL=table.cjs.map
|
package/dist/table.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import "./table-
|
|
1
|
+
import "./table-QyTaL_m4.js";
|
|
2
2
|
//# sourceMappingURL=table.js.map
|
|
@@ -2,7 +2,7 @@ import { c as E } from "./consume-fRVATvdE.js";
|
|
|
2
2
|
import { fromEvent as x, throttleTime as T, filter as d, map as k, interval as C, take as w } from "rxjs";
|
|
3
3
|
import "lit/directives/class-map.js";
|
|
4
4
|
import "lit/directives/style-map.js";
|
|
5
|
-
import { T as v } from "./tailwind.mixin-
|
|
5
|
+
import { T as v } from "./tailwind.mixin-ECkyl80C.js";
|
|
6
6
|
import { css as u, html as b } from "lit";
|
|
7
7
|
import { property as h, state as y, customElement as f, queryAssignedElements as $, query as m } from "lit/decorators.js";
|
|
8
8
|
import { n as O, e as j } from "./provide-BLSgVvMJ.js";
|
|
@@ -100,4 +100,4 @@ let r = class extends v(u`
|
|
|
100
100
|
}
|
|
101
101
|
};
|
|
102
102
|
i([j({ context: g }), h({ type: String })], r.prototype, "mode", 2), i([h({ type: Boolean })], r.prototype, "rounded", 2), i([h({ type: String, reflect: !0 })], r.prototype, "activeTab", 2), i([$({ flatten: !0 })], r.prototype, "tabsElements", 2), i([m("#tabsNavigation")], r.prototype, "navElement", 2), i([m("#tabsContent")], r.prototype, "tabsContent", 2), i([y()], r.prototype, "tabs", 2), r = i([f("schmancy-tab-group")], r);
|
|
103
|
-
//# sourceMappingURL=tabs-group-
|
|
103
|
+
//# sourceMappingURL=tabs-group-CWM0kWDK.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabs-group-BpRky0TZ.js","sources":["../src/tabs/context.ts","../src/tabs/tab.ts","../src/tabs/tabs-group.ts"],"sourcesContent":["import { createContext } from '@lit/context'\n\nexport type TSchmancyTabsMode = 'scroll' | 'tabs'\n\nexport const SchmancyTabsModeContext = createContext<TSchmancyTabsMode>('tabs')\n","import { consume } from '@lit/context'\nimport { TailwindElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { SchmancyTabsModeContext } from './context'\n\n@customElement('schmancy-tab')\nexport default class SchmancyTab extends TailwindElement(css`\n\t:host {\n\t\tdisplay: block;\n\t}\n`) {\n\t@property({ type: String, reflect: true }) label\n\t@property({ type: String, reflect: true }) value\n\t@property({ type: Boolean, reflect: true }) active!: boolean\n\n\t@consume({ context: SchmancyTabsModeContext, subscribe: true })\n\t@state()\n\tmode\n\tprotected render(): unknown {\n\t\treturn html` <slot .hidden=${this.mode === 'tabs' ? !this.active : false}></slot> `\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-tab': SchmancyTab\n\t}\n}\n","import { provide } from '@lit/context'\nimport { TailwindElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property, query, queryAssignedElements, state } from 'lit/decorators.js'\nimport { repeat } from 'lit/directives/repeat.js'\nimport { filter, fromEvent, interval, map, take, throttleTime } from 'rxjs'\nimport { SchmancyTabsModeContext, TSchmancyTabsMode } from './context'\nimport SchmancyTab from './tab'\n\n/**\n * @slot - The content of the tab group\n * @fires tab-changed - The event fired when the tab is changed\n */\n@customElement('schmancy-tab-group')\nexport default class SchmancyTabGroup extends TailwindElement(css`\n\t:host {\n\t\tdisplay: block;\n\t}\n`) {\n\t@provide({ context: SchmancyTabsModeContext })\n\t@property({ type: String })\n\tmode: TSchmancyTabsMode = 'tabs'\n\n\t@property({ type: Boolean }) rounded = true\n\n\t@property({ type: String, reflect: true }) activeTab: string\n\t@queryAssignedElements({\n\t\tflatten: true,\n\t})\n\tprivate tabsElements!: Array<SchmancyTab>\n\n\t@query('#tabsNavigation') navElement!: HTMLElement\n\t@query('#tabsContent') tabsContent!: HTMLElement\n\n\t@state()\n\tprivate tabs: Array<SchmancyTab> = []\n\n\tconnectedCallback(): void {\n\t\tsuper.connectedCallback()\n\t\tfromEvent(window, 'scroll')\n\t\t\t.pipe(\n\t\t\t\tthrottleTime(1000),\n\t\t\t\tfilter(() => this.mode === 'scroll'),\n\t\t\t\tmap(() => {\n\t\t\t\t\tlet closestDiv = null\n\t\t\t\t\tlet closestDistance = Infinity\n\t\t\t\t\tthis.tabsElements.forEach(div => {\n\t\t\t\t\t\tconst distance =\n\t\t\t\t\t\t\tdiv.getBoundingClientRect().top - this.navElement.clientHeight + document.body.offsetHeight / 3\n\n\t\t\t\t\t\tif (distance < closestDistance && distance > 0) {\n\t\t\t\t\t\t\tclosestDistance = distance\n\t\t\t\t\t\t\tclosestDiv = div\n\t\t\t\t\t\t}\n\t\t\t\t\t})\n\t\t\t\t\treturn closestDiv\n\t\t\t\t}),\n\t\t\t\tfilter((el: SchmancyTab | null) => el !== null),\n\t\t\t)\n\t\t\t.subscribe({\n\t\t\t\tnext: (el: SchmancyTab) => {\n\t\t\t\t\tthis.activeTab = el.value\n\t\t\t\t},\n\t\t\t})\n\t}\n\n\tfirstUpdated() {\n\t\tinterval(0)\n\t\t\t.pipe(\n\t\t\t\tfilter(() => !!this.navElement.clientHeight),\n\t\t\t\ttake(1),\n\t\t\t)\n\t\t\t.subscribe(() => {\n\t\t\t\tthis.tabsElements.forEach(tab => {\n\t\t\t\t\tif (this.mode === 'scroll') tab.style.paddingTop = this.navElement.clientHeight + 'px'\n\t\t\t\t})\n\t\t\t})\n\t}\n\n\thydrateTabs() {\n\t\tthis.tabs = this.tabsElements\n\t\tif (!this.activeTab && this.tabsElements[0]) {\n\t\t\tthis.activeTab = this.tabsElements[0].value\n\t\t\tthis.tabsElements[0].active = true\n\t\t} else {\n\t\t\tthis.tabsElements.forEach(tab => {\n\t\t\t\tif (tab.value === this.activeTab) tab.active = true\n\t\t\t\telse tab.active = false\n\t\t\t})\n\t\t}\n\t\tconst lastTab = this.tabs?.[-1]\n\t\tif (lastTab) {\n\t\t\tlastTab.style.paddingBottom = lastTab.offsetHeight + 'px'\n\t\t}\n\t}\n\n\ttabChanged(selectedTab: { label: string; value: string }) {\n\t\tlet activeTabElement: SchmancyTab | undefined\n\t\tthis.tabsElements.forEach(tab => {\n\t\t\tif (tab.value === selectedTab.value) {\n\t\t\t\ttab.active = true\n\t\t\t\tactiveTabElement = tab\n\t\t\t\t// scroll to the tab\n\t\t\t\tif (this.mode === 'scroll') {\n\t\t\t\t\t// Scroll the desired element into view\n\t\t\t\t\tactiveTabElement.scrollIntoView({\n\t\t\t\t\t\tbehavior: 'smooth',\n\t\t\t\t\t\tblock: 'start',\n\t\t\t\t\t\tinline: 'start',\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\ttab.active = false\n\t\t\t}\n\t\t})\n\t\tthis.mode === 'tabs' && (this.activeTab = selectedTab.value)\n\t\tthis.dispatchEvent(new CustomEvent('tab-changed', { detail: this.activeTab }))\n\t}\n\n\tprotected render(): unknown {\n\t\tconst tabs = {\n\t\t\t'bg-surface-default color-surface-on': true,\n\t\t\t'flex z-50': true,\n\t\t\t'sticky top-0 shadow-md': this.mode === 'scroll',\n\t\t\t'rounded-full': this.rounded,\n\t\t}\n\n\t\tconst activeTab = {\n\t\t\t'text-primary-default': true,\n\t\t}\n\n\t\tconst inactiveTab = {\n\t\t\t'border-transparent': true,\n\t\t\t'hover:text-gray-700': true,\n\t\t\t'hover:border-gray-300': true,\n\t\t\t'text-gray-500': true,\n\t\t}\n\n\t\treturn html`\n\t\t\t<section id=\"tabsNavigation\" class=\"${this.classMap(tabs)}\" aria-label=\"Tabs\">\n\t\t\t\t${repeat(\n\t\t\t\t\tthis.tabs,\n\t\t\t\t\ttab => tab.value,\n\t\t\t\t\ttab => html`\n\t\t\t\t\t\t<schmancy-button\n\t\t\t\t\t\t\t@click=${() => {\n\t\t\t\t\t\t\t\tthis.tabChanged({\n\t\t\t\t\t\t\t\t\tlabel: tab.label,\n\t\t\t\t\t\t\t\t\tvalue: tab.value,\n\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\taria-current=\"page\"\n\t\t\t\t\t\t\tclass=\"h-auto relative\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclass=\"px-4 py-3 ${this.activeTab === tab.value\n\t\t\t\t\t\t\t\t\t? this.classMap(activeTab)\n\t\t\t\t\t\t\t\t\t: this.classMap(inactiveTab)}\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<schmancy-typography class=\"h-full align-middle flex \" type=\"title\" token=\"md\" weight=\"medium\">\n\t\t\t\t\t\t\t\t\t${tab.label}\n\t\t\t\t\t\t\t\t</schmancy-typography>\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t.hidden=${this.activeTab !== tab.value}\n\t\t\t\t\t\t\t\t\tclass=\"border-primary-default absolute bottom-0 inset-x-6 border-solid border-2 rounded-t-full\"\n\t\t\t\t\t\t\t\t></div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</schmancy-button>\n\t\t\t\t\t`,\n\t\t\t\t)}\n\t\t\t</section>\n\t\t\t<schmancy-divider class=\"px-6\"></schmancy-divider>\n\t\t\t<section id=\"tabsContent\">\n\t\t\t\t<slot @slotchange=${() => this.hydrateTabs()}></slot>\n\t\t\t</section>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-tab-group': SchmancyTabGroup\n\t}\n}\n"],"names":["SchmancyTabsModeContext","createContext","SchmancyTab","TailwindElement","css","render","html","this","mode","active","__decorateClass","property","type","String","reflect","prototype","Boolean","consume","context","subscribe","state","customElement","SchmancyTabGroup","constructor","super","arguments","rounded","tabs","connectedCallback","fromEvent","window","pipe","throttleTime","filter","map","closestDiv","closestDistance","Infinity","tabsElements","forEach","div","distance","getBoundingClientRect","top","navElement","clientHeight","document","body","offsetHeight","el","next","activeTab","value","firstUpdated","interval","take","tab","style","paddingTop","hydrateTabs","lastTab","paddingBottom","selectedTab","activeTabElement","scrollIntoView","behavior","block","inline","dispatchEvent","CustomEvent","detail","inactiveTab","classMap","repeat","tabChanged","label","provide","queryAssignedElements","flatten","query"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"tabs-group-CWM0kWDK.js","sources":["../src/tabs/context.ts","../src/tabs/tab.ts","../src/tabs/tabs-group.ts"],"sourcesContent":["import { createContext } from '@lit/context'\n\nexport type TSchmancyTabsMode = 'scroll' | 'tabs'\n\nexport const SchmancyTabsModeContext = createContext<TSchmancyTabsMode>('tabs')\n","import { consume } from '@lit/context'\nimport { TailwindElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { SchmancyTabsModeContext } from './context'\n\n@customElement('schmancy-tab')\nexport default class SchmancyTab extends TailwindElement(css`\n\t:host {\n\t\tdisplay: block;\n\t}\n`) {\n\t@property({ type: String, reflect: true }) label\n\t@property({ type: String, reflect: true }) value\n\t@property({ type: Boolean, reflect: true }) active!: boolean\n\n\t@consume({ context: SchmancyTabsModeContext, subscribe: true })\n\t@state()\n\tmode\n\tprotected render(): unknown {\n\t\treturn html` <slot .hidden=${this.mode === 'tabs' ? !this.active : false}></slot> `\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-tab': SchmancyTab\n\t}\n}\n","import { provide } from '@lit/context'\nimport { TailwindElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property, query, queryAssignedElements, state } from 'lit/decorators.js'\nimport { repeat } from 'lit/directives/repeat.js'\nimport { filter, fromEvent, interval, map, take, throttleTime } from 'rxjs'\nimport { SchmancyTabsModeContext, TSchmancyTabsMode } from './context'\nimport SchmancyTab from './tab'\n\n/**\n * @slot - The content of the tab group\n * @fires tab-changed - The event fired when the tab is changed\n */\n@customElement('schmancy-tab-group')\nexport default class SchmancyTabGroup extends TailwindElement(css`\n\t:host {\n\t\tdisplay: block;\n\t}\n`) {\n\t@provide({ context: SchmancyTabsModeContext })\n\t@property({ type: String })\n\tmode: TSchmancyTabsMode = 'tabs'\n\n\t@property({ type: Boolean }) rounded = true\n\n\t@property({ type: String, reflect: true }) activeTab: string\n\t@queryAssignedElements({\n\t\tflatten: true,\n\t})\n\tprivate tabsElements!: Array<SchmancyTab>\n\n\t@query('#tabsNavigation') navElement!: HTMLElement\n\t@query('#tabsContent') tabsContent!: HTMLElement\n\n\t@state()\n\tprivate tabs: Array<SchmancyTab> = []\n\n\tconnectedCallback(): void {\n\t\tsuper.connectedCallback()\n\t\tfromEvent(window, 'scroll')\n\t\t\t.pipe(\n\t\t\t\tthrottleTime(1000),\n\t\t\t\tfilter(() => this.mode === 'scroll'),\n\t\t\t\tmap(() => {\n\t\t\t\t\tlet closestDiv = null\n\t\t\t\t\tlet closestDistance = Infinity\n\t\t\t\t\tthis.tabsElements.forEach(div => {\n\t\t\t\t\t\tconst distance =\n\t\t\t\t\t\t\tdiv.getBoundingClientRect().top - this.navElement.clientHeight + document.body.offsetHeight / 3\n\n\t\t\t\t\t\tif (distance < closestDistance && distance > 0) {\n\t\t\t\t\t\t\tclosestDistance = distance\n\t\t\t\t\t\t\tclosestDiv = div\n\t\t\t\t\t\t}\n\t\t\t\t\t})\n\t\t\t\t\treturn closestDiv\n\t\t\t\t}),\n\t\t\t\tfilter((el: SchmancyTab | null) => el !== null),\n\t\t\t)\n\t\t\t.subscribe({\n\t\t\t\tnext: (el: SchmancyTab) => {\n\t\t\t\t\tthis.activeTab = el.value\n\t\t\t\t},\n\t\t\t})\n\t}\n\n\tfirstUpdated() {\n\t\tinterval(0)\n\t\t\t.pipe(\n\t\t\t\tfilter(() => !!this.navElement.clientHeight),\n\t\t\t\ttake(1),\n\t\t\t)\n\t\t\t.subscribe(() => {\n\t\t\t\tthis.tabsElements.forEach(tab => {\n\t\t\t\t\tif (this.mode === 'scroll') tab.style.paddingTop = this.navElement.clientHeight + 'px'\n\t\t\t\t})\n\t\t\t})\n\t}\n\n\thydrateTabs() {\n\t\tthis.tabs = this.tabsElements\n\t\tif (!this.activeTab && this.tabsElements[0]) {\n\t\t\tthis.activeTab = this.tabsElements[0].value\n\t\t\tthis.tabsElements[0].active = true\n\t\t} else {\n\t\t\tthis.tabsElements.forEach(tab => {\n\t\t\t\tif (tab.value === this.activeTab) tab.active = true\n\t\t\t\telse tab.active = false\n\t\t\t})\n\t\t}\n\t\tconst lastTab = this.tabs?.[-1]\n\t\tif (lastTab) {\n\t\t\tlastTab.style.paddingBottom = lastTab.offsetHeight + 'px'\n\t\t}\n\t}\n\n\ttabChanged(selectedTab: { label: string; value: string }) {\n\t\tlet activeTabElement: SchmancyTab | undefined\n\t\tthis.tabsElements.forEach(tab => {\n\t\t\tif (tab.value === selectedTab.value) {\n\t\t\t\ttab.active = true\n\t\t\t\tactiveTabElement = tab\n\t\t\t\t// scroll to the tab\n\t\t\t\tif (this.mode === 'scroll') {\n\t\t\t\t\t// Scroll the desired element into view\n\t\t\t\t\tactiveTabElement.scrollIntoView({\n\t\t\t\t\t\tbehavior: 'smooth',\n\t\t\t\t\t\tblock: 'start',\n\t\t\t\t\t\tinline: 'start',\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\ttab.active = false\n\t\t\t}\n\t\t})\n\t\tthis.mode === 'tabs' && (this.activeTab = selectedTab.value)\n\t\tthis.dispatchEvent(new CustomEvent('tab-changed', { detail: this.activeTab }))\n\t}\n\n\tprotected render(): unknown {\n\t\tconst tabs = {\n\t\t\t'bg-surface-default color-surface-on': true,\n\t\t\t'flex z-50': true,\n\t\t\t'sticky top-0 shadow-md': this.mode === 'scroll',\n\t\t\t'rounded-full': this.rounded,\n\t\t}\n\n\t\tconst activeTab = {\n\t\t\t'text-primary-default': true,\n\t\t}\n\n\t\tconst inactiveTab = {\n\t\t\t'border-transparent': true,\n\t\t\t'hover:text-gray-700': true,\n\t\t\t'hover:border-gray-300': true,\n\t\t\t'text-gray-500': true,\n\t\t}\n\n\t\treturn html`\n\t\t\t<section id=\"tabsNavigation\" class=\"${this.classMap(tabs)}\" aria-label=\"Tabs\">\n\t\t\t\t${repeat(\n\t\t\t\t\tthis.tabs,\n\t\t\t\t\ttab => tab.value,\n\t\t\t\t\ttab => html`\n\t\t\t\t\t\t<schmancy-button\n\t\t\t\t\t\t\t@click=${() => {\n\t\t\t\t\t\t\t\tthis.tabChanged({\n\t\t\t\t\t\t\t\t\tlabel: tab.label,\n\t\t\t\t\t\t\t\t\tvalue: tab.value,\n\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\taria-current=\"page\"\n\t\t\t\t\t\t\tclass=\"h-auto relative\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclass=\"px-4 py-3 ${this.activeTab === tab.value\n\t\t\t\t\t\t\t\t\t? this.classMap(activeTab)\n\t\t\t\t\t\t\t\t\t: this.classMap(inactiveTab)}\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<schmancy-typography class=\"h-full align-middle flex \" type=\"title\" token=\"md\" weight=\"medium\">\n\t\t\t\t\t\t\t\t\t${tab.label}\n\t\t\t\t\t\t\t\t</schmancy-typography>\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t.hidden=${this.activeTab !== tab.value}\n\t\t\t\t\t\t\t\t\tclass=\"border-primary-default absolute bottom-0 inset-x-6 border-solid border-2 rounded-t-full\"\n\t\t\t\t\t\t\t\t></div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</schmancy-button>\n\t\t\t\t\t`,\n\t\t\t\t)}\n\t\t\t</section>\n\t\t\t<schmancy-divider class=\"px-6\"></schmancy-divider>\n\t\t\t<section id=\"tabsContent\">\n\t\t\t\t<slot @slotchange=${() => this.hydrateTabs()}></slot>\n\t\t\t</section>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-tab-group': SchmancyTabGroup\n\t}\n}\n"],"names":["SchmancyTabsModeContext","createContext","SchmancyTab","TailwindElement","css","render","html","this","mode","active","__decorateClass","property","type","String","reflect","prototype","Boolean","consume","context","subscribe","state","customElement","SchmancyTabGroup","constructor","super","arguments","rounded","tabs","connectedCallback","fromEvent","window","pipe","throttleTime","filter","map","closestDiv","closestDistance","Infinity","tabsElements","forEach","div","distance","getBoundingClientRect","top","navElement","clientHeight","document","body","offsetHeight","el","next","activeTab","value","firstUpdated","interval","take","tab","style","paddingTop","hydrateTabs","lastTab","paddingBottom","selectedTab","activeTabElement","scrollIntoView","behavior","block","inline","dispatchEvent","CustomEvent","detail","inactiveTab","classMap","repeat","tabChanged","label","provide","queryAssignedElements","flatten","query"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";const v=require("./consume-Bb7_UzYd.cjs"),l=require("rxjs");require("lit/directives/class-map.js"),require("lit/directives/style-map.js");const u=require("./tailwind.mixin-
|
|
1
|
+
"use strict";const v=require("./consume-Bb7_UzYd.cjs"),l=require("rxjs");require("lit/directives/class-map.js"),require("lit/directives/style-map.js");const u=require("./tailwind.mixin-DFM3jd9q.cjs"),b=require("lit"),i=require("lit/decorators.js"),y=require("./provide-DSU87U5x.cjs"),g=require("lit/directives/repeat.js"),m=y.n("tabs");var f=Object.defineProperty,E=Object.getOwnPropertyDescriptor,d=(t,a,e,s)=>{for(var c,r=s>1?void 0:s?E(a,e):a,h=t.length-1;h>=0;h--)(c=t[h])&&(r=(s?c(a,e,r):c(r))||r);return s&&r&&f(a,e,r),r};let p=class extends u.TailwindElement(b.css`
|
|
2
2
|
:host {
|
|
3
3
|
display: block;
|
|
4
4
|
}
|
|
@@ -33,4 +33,4 @@
|
|
|
33
33
|
<slot @slotchange=${()=>this.hydrateTabs()}></slot>
|
|
34
34
|
</section>
|
|
35
35
|
`}};n([y.e({context:m}),i.property({type:String})],o.prototype,"mode",2),n([i.property({type:Boolean})],o.prototype,"rounded",2),n([i.property({type:String,reflect:!0})],o.prototype,"activeTab",2),n([i.queryAssignedElements({flatten:!0})],o.prototype,"tabsElements",2),n([i.query("#tabsNavigation")],o.prototype,"navElement",2),n([i.query("#tabsContent")],o.prototype,"tabsContent",2),n([i.state()],o.prototype,"tabs",2),o=n([i.customElement("schmancy-tab-group")],o);
|
|
36
|
-
//# sourceMappingURL=tabs-group-
|
|
36
|
+
//# sourceMappingURL=tabs-group-DIkk0A7J.cjs.map
|