@redvars/peacock 3.8.1 → 3.8.2
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/{BaseInput-14YmcfK7.js → BaseInput-CU1zZYKc.js} +3 -3
- package/dist/{BaseInput-14YmcfK7.js.map → BaseInput-CU1zZYKc.js.map} +1 -1
- package/dist/ButtonConstants-CahP2_NA.js +4 -0
- package/dist/ButtonConstants-CahP2_NA.js.map +1 -0
- package/dist/{IndividualComponent-DUINtMGK.js → IndividualComponent-Bdwyrvd6.js} +2 -2
- package/dist/{IndividualComponent-DUINtMGK.js.map → IndividualComponent-Bdwyrvd6.js.map} +1 -1
- package/dist/{NativeHyperlinkMixin-DrYXyfMQ.js → NativeHyperlinkMixin-D9J4aBTy.js} +4 -30
- package/dist/NativeHyperlinkMixin-D9J4aBTy.js.map +1 -0
- package/dist/accordion-item.js +338 -0
- package/dist/accordion-item.js.map +1 -0
- package/dist/accordion.js +159 -0
- package/dist/accordion.js.map +1 -0
- package/dist/alert.js +190 -0
- package/dist/alert.js.map +1 -0
- package/dist/app-bar.js +324 -0
- package/dist/app-bar.js.map +1 -0
- package/dist/assets/components.css +1 -1
- package/dist/assets/components.css.map +1 -1
- package/dist/assets/styles.css +1 -1
- package/dist/assets/styles.css.map +1 -1
- package/dist/attachable-controller-CAKVrfcG.js +119 -0
- package/dist/attachable-controller-CAKVrfcG.js.map +1 -0
- package/dist/avatar.js +114 -0
- package/dist/avatar.js.map +1 -0
- package/dist/badge.js +91 -0
- package/dist/badge.js.map +1 -0
- package/dist/base-Cl6v8-BZ.js +9 -0
- package/dist/base-Cl6v8-BZ.js.map +1 -0
- package/dist/bottom-sheet.js +14 -5
- package/dist/bottom-sheet.js.map +1 -1
- package/dist/breadcrumb-item.js +163 -0
- package/dist/breadcrumb-item.js.map +1 -0
- package/dist/breadcrumb.js +95 -0
- package/dist/breadcrumb.js.map +1 -0
- package/dist/button-group.js +87 -137
- package/dist/button-group.js.map +1 -1
- package/dist/button.js +863 -133
- package/dist/button.js.map +1 -1
- package/dist/calendar-column-view.js +8 -4
- package/dist/calendar-column-view.js.map +1 -1
- package/dist/calendar-month-view.js +8 -4
- package/dist/calendar-month-view.js.map +1 -1
- package/dist/calendar.js +8 -4
- package/dist/calendar.js.map +1 -1
- package/dist/canvas.js +8 -4
- package/dist/canvas.js.map +1 -1
- package/dist/card-content.js +1 -1
- package/dist/card.js +23 -45
- package/dist/card.js.map +1 -1
- package/dist/cb-compound-expression.js +6 -2
- package/dist/cb-compound-expression.js.map +1 -1
- package/dist/cb-divider.js +7 -3
- package/dist/cb-divider.js.map +1 -1
- package/dist/cb-expression.js +6 -2
- package/dist/cb-expression.js.map +1 -1
- package/dist/cb-predicate.js +7 -3
- package/dist/cb-predicate.js.map +1 -1
- package/dist/{chart-bar-cn6rrna-.js → chart-bar-CYoGNXnK.js} +6 -2
- package/dist/{chart-bar-cn6rrna-.js.map → chart-bar-CYoGNXnK.js.map} +1 -1
- package/dist/chart-bar.js +7 -6
- package/dist/chart-bar.js.map +1 -1
- package/dist/chart-doughnut.js +8 -3
- package/dist/chart-doughnut.js.map +1 -1
- package/dist/chart-pie.js +8 -3
- package/dist/chart-pie.js.map +1 -1
- package/dist/chart-stacked-bar.js +7 -6
- package/dist/chart-stacked-bar.js.map +1 -1
- package/dist/checkbox.js +526 -0
- package/dist/checkbox.js.map +1 -0
- package/dist/chip.js +459 -0
- package/dist/chip.js.map +1 -0
- package/dist/{class-map-YU7g0o3B.js → class-map-DG7CA1et.js} +2 -2
- package/dist/{class-map-YU7g0o3B.js.map → class-map-DG7CA1et.js.map} +1 -1
- package/dist/clock.js +6 -2
- package/dist/clock.js.map +1 -1
- package/dist/code-editor.js +45 -30
- package/dist/code-editor.js.map +1 -1
- package/dist/code-highlighter.js +9 -5
- package/dist/code-highlighter.js.map +1 -1
- package/dist/condition-builder.js +5 -1
- package/dist/condition-builder.js.map +1 -1
- package/dist/container.js +141 -0
- package/dist/container.js.map +1 -0
- package/dist/custom-elements-jsdocs.json +721 -769
- package/dist/custom-elements.json +3213 -1979
- package/dist/datasource-B2eRh6Or.js +108 -0
- package/dist/datasource-B2eRh6Or.js.map +1 -0
- package/dist/dispatch-event-utils-CuEqjlPT.js.map +1 -1
- package/dist/divider.js +135 -0
- package/dist/divider.js.map +1 -0
- package/dist/dropdown-button.js +11 -6
- package/dist/dropdown-button.js.map +1 -1
- package/dist/element-internals-2CMts_0M.js +290 -0
- package/dist/element-internals-2CMts_0M.js.map +1 -0
- package/dist/elevation.js +94 -0
- package/dist/elevation.js.map +1 -0
- package/dist/empty-state.js +194 -0
- package/dist/empty-state.js.map +1 -0
- package/dist/{event-manager-D-QCmUgR.js → event-manager-DTyX2uYD.js} +2 -2
- package/dist/{event-manager-D-QCmUgR.js.map → event-manager-DTyX2uYD.js.map} +1 -1
- package/dist/fab.js +138 -145
- package/dist/fab.js.map +1 -1
- package/dist/field.js +461 -0
- package/dist/field.js.map +1 -0
- package/dist/{popover-DUPmMVWS.js → floating-controller-CnUZnOhK.js} +2 -171
- package/dist/floating-controller-CnUZnOhK.js.map +1 -0
- package/dist/{flow-designer-node-BWrPuxAR.js → flow-designer-node-DsVwQTac.js} +7 -3
- package/dist/{flow-designer-node-BWrPuxAR.js.map → flow-designer-node-DsVwQTac.js.map} +1 -1
- package/dist/flow-designer-node.js +3 -3
- package/dist/flow-designer.js +19 -12
- package/dist/flow-designer.js.map +1 -1
- package/dist/focus-ring.js +126 -0
- package/dist/focus-ring.js.map +1 -0
- package/dist/form-associated-BXADnjOB.js +388 -0
- package/dist/form-associated-BXADnjOB.js.map +1 -0
- package/dist/html-editor.js +21 -9
- package/dist/html-editor.js.map +1 -1
- package/dist/hyperlink-DLvb6MXE.js +98 -0
- package/dist/hyperlink-DLvb6MXE.js.map +1 -0
- package/dist/icon-button.js +1064 -0
- package/dist/icon-button.js.map +1 -0
- package/dist/icon.js +170 -0
- package/dist/icon.js.map +1 -0
- package/dist/if-defined-BXZpRQ4P.js +10 -0
- package/dist/if-defined-BXZpRQ4P.js.map +1 -0
- package/dist/image.js +201 -0
- package/dist/image.js.map +1 -0
- package/dist/index.js +73 -20
- package/dist/index.js.map +1 -1
- package/dist/is-dark-mode-DOcaw4Yq.js.map +1 -1
- package/dist/is-link-Dk2OV3PM.js +6 -0
- package/dist/is-link-Dk2OV3PM.js.map +1 -0
- package/dist/item.js +212 -0
- package/dist/item.js.map +1 -0
- package/dist/link.js +75 -0
- package/dist/link.js.map +1 -0
- package/dist/list-D6JLh1uh.js +352 -0
- package/dist/list-D6JLh1uh.js.map +1 -0
- package/dist/list.js +14 -0
- package/dist/list.js.map +1 -0
- package/dist/{peacock-loader.js → loader.js} +83 -22
- package/dist/loader.js.map +1 -0
- package/dist/menu-item.js +318 -0
- package/dist/menu-item.js.map +1 -0
- package/dist/menu.js +534 -0
- package/dist/menu.js.map +1 -0
- package/dist/modal.js +9 -5
- package/dist/modal.js.map +1 -1
- package/dist/navigation-rail-item.js +385 -0
- package/dist/navigation-rail-item.js.map +1 -0
- package/dist/navigation-rail.js +217 -0
- package/dist/navigation-rail.js.map +1 -0
- package/dist/notification-manager.js +8 -4
- package/dist/notification-manager.js.map +1 -1
- package/dist/notification.js +8 -4
- package/dist/notification.js.map +1 -1
- package/dist/number-counter.js +7 -3
- package/dist/number-counter.js.map +1 -1
- package/dist/{observe-slot-change-D8Xg-kSS.js → observe-slot-change-DPxaZrZF.js} +3 -4
- package/dist/observe-slot-change-DPxaZrZF.js.map +1 -0
- package/dist/option.js +121 -0
- package/dist/option.js.map +1 -0
- package/dist/pagination.js +255 -0
- package/dist/pagination.js.map +1 -0
- package/dist/popover-content.js +7 -3
- package/dist/popover-content.js.map +1 -1
- package/dist/popover.js +175 -3
- package/dist/popover.js.map +1 -1
- package/dist/{property-1psGvXOq.js → property-B49QQ8pS.js} +2 -2
- package/dist/{property-1psGvXOq.js.map → property-B49QQ8pS.js.map} +1 -1
- package/dist/query-CHb9Ft_d.js +10 -0
- package/dist/query-CHb9Ft_d.js.map +1 -0
- package/dist/query-assigned-elements-BJaGSqM0.js +10 -0
- package/dist/query-assigned-elements-BJaGSqM0.js.map +1 -0
- package/dist/radio.js +476 -0
- package/dist/radio.js.map +1 -0
- package/dist/ripple.js +506 -0
- package/dist/ripple.js.map +1 -0
- package/dist/search.js +12 -7
- package/dist/search.js.map +1 -1
- package/dist/segmented-button-group.js +137 -0
- package/dist/segmented-button-group.js.map +1 -0
- package/dist/segmented-button.js +289 -0
- package/dist/segmented-button.js.map +1 -0
- package/dist/select-Dwtk0RIU.js +3937 -0
- package/dist/select-Dwtk0RIU.js.map +1 -0
- package/dist/side-sheet.js +8 -4
- package/dist/side-sheet.js.map +1 -1
- package/dist/skeleton.js +122 -0
- package/dist/skeleton.js.map +1 -0
- package/dist/slider.js +346 -0
- package/dist/slider.js.map +1 -0
- package/dist/snackbar.js +335 -0
- package/dist/snackbar.js.map +1 -0
- package/dist/spinner.js +100 -0
- package/dist/spinner.js.map +1 -0
- package/dist/split-button.js +10 -5
- package/dist/split-button.js.map +1 -1
- package/dist/spread-B5cgadZl.js +32 -0
- package/dist/spread-B5cgadZl.js.map +1 -0
- package/dist/src/__internal/aria/aria.d.ts +98 -0
- package/dist/src/__internal/aria/delegate.d.ts +54 -0
- package/dist/src/__internal/events/dispatch-hooks.d.ts +80 -0
- package/dist/src/__internal/mixins/element-internals.d.ts +40 -0
- package/dist/src/__internal/mixins/form-associated.d.ts +174 -0
- package/dist/src/__internal/mixins/form-submitter.d.ts +59 -0
- package/dist/src/__internal/mixins/hyperlink.d.ts +42 -0
- package/dist/src/__internal/mixins/mixin.d.ts +49 -0
- package/dist/src/{__utils → __internal/utils}/observe-slot-change.d.ts +1 -0
- package/dist/src/accordion/accordion-item.d.ts +3 -1
- package/dist/src/accordion/accordion.d.ts +1 -1
- package/dist/src/alert/alert.d.ts +43 -0
- package/dist/src/alert/index.d.ts +1 -0
- package/dist/src/app-bar/app-bar.d.ts +92 -0
- package/dist/src/app-bar/index.d.ts +1 -0
- package/dist/src/avatar/avatar.d.ts +2 -0
- package/dist/src/bottom-sheet/bottom-sheet.d.ts +1 -1
- package/dist/src/breadcrumb/breadcrumb-item/breadcrumb-item.d.ts +1 -0
- package/dist/src/button/ButtonTypes.d.ts +5 -0
- package/dist/src/button/base-button/base-button.d.ts +18 -0
- package/dist/src/button/button/button.d.ts +29 -37
- package/dist/src/button/button-group/button-group.d.ts +17 -18
- package/dist/src/{fab → button/fab}/fab.d.ts +8 -26
- package/dist/src/button/icon-button/icon-button.d.ts +20 -27
- package/dist/src/button/index.d.ts +1 -0
- package/dist/src/calendar/calendar.d.ts +1 -1
- package/dist/src/canvas/canvas.d.ts +1 -1
- package/dist/src/card/card.d.ts +5 -6
- package/dist/src/chart-bar/chart-bar.d.ts +1 -1
- package/dist/src/chart-bar/chart-stacked-bar.d.ts +1 -1
- package/dist/src/checkbox/checkbox.d.ts +5 -1
- package/dist/src/chip/chip/chip.d.ts +9 -8
- package/dist/src/container/container.d.ts +5 -1
- package/dist/src/divider/divider.d.ts +2 -0
- package/dist/src/empty-state/empty-state.d.ts +1 -0
- package/dist/src/field/field.d.ts +19 -1
- package/dist/src/focus-ring/focus-ring.d.ts +3 -7
- package/dist/src/html-editor/html-editor.d.ts +1 -1
- package/dist/src/icon/icon.d.ts +9 -4
- package/dist/src/image/image.d.ts +4 -0
- package/dist/src/index.d.ts +7 -6
- package/dist/src/item/item.d.ts +20 -29
- package/dist/src/link/link.d.ts +1 -1
- package/dist/src/list/list-item.d.ts +7 -5
- package/dist/src/list/list.d.ts +3 -2
- package/dist/src/menu/menu/menu.d.ts +14 -0
- package/dist/src/menu/menu-item/menu-item.d.ts +10 -2
- package/dist/src/modal/modal.d.ts +1 -1
- package/dist/src/navigation-rail/navigation-rail-item.d.ts +5 -4
- package/dist/src/navigation-rail/navigation-rail.d.ts +1 -1
- package/dist/src/radio/radio.d.ts +5 -0
- package/dist/src/ripple/ripple.d.ts +10 -1
- package/dist/src/search/search.d.ts +1 -1
- package/dist/src/segmented-button/segmented-button-group.d.ts +2 -2
- package/dist/src/segmented-button/segmented-button.d.ts +2 -0
- package/dist/src/side-sheet/side-sheet.d.ts +1 -1
- package/dist/src/skeleton/skeleton.d.ts +1 -0
- package/dist/src/slider/slider.d.ts +1 -0
- package/dist/src/snackbar/snackbar.d.ts +12 -2
- package/dist/src/svg/svg.d.ts +5 -0
- package/dist/src/table/table.d.ts +5 -0
- package/dist/src/tabs/tab.d.ts +2 -7
- package/dist/src/toolbar/toolbar.d.ts +2 -2
- package/dist/{state-DwbEjqVk.js → state-DkTK9EGF.js} +2 -2
- package/dist/{state-DwbEjqVk.js.map → state-DkTK9EGF.js.map} +1 -1
- package/dist/{style-map-DVmWOuYy.js → style-map-BQD5Et1D.js} +2 -2
- package/dist/{style-map-DVmWOuYy.js.map → style-map-BQD5Et1D.js.map} +1 -1
- package/dist/sub-menu.js +241 -0
- package/dist/sub-menu.js.map +1 -0
- package/dist/svg.js +273 -0
- package/dist/svg.js.map +1 -0
- package/dist/tab-group.js +188 -0
- package/dist/tab-group.js.map +1 -0
- package/dist/tab-panel.js +61 -0
- package/dist/tab-panel.js.map +1 -0
- package/dist/tab.js +658 -0
- package/dist/tab.js.map +1 -0
- package/dist/table.js +620 -0
- package/dist/table.js.map +1 -0
- package/dist/tabs.js +240 -0
- package/dist/tabs.js.map +1 -0
- package/dist/throttle-C7ZAPqtu.js +24 -0
- package/dist/throttle-C7ZAPqtu.js.map +1 -0
- package/dist/toolbar.js +9 -5
- package/dist/toolbar.js.map +1 -1
- package/dist/tooltip.js +270 -0
- package/dist/tooltip.js.map +1 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/{unsafe-html-BsGUjx94.js → unsafe-html-Ct0N2_UU.js} +2 -2
- package/dist/{unsafe-html-BsGUjx94.js.map → unsafe-html-Ct0N2_UU.js.map} +1 -1
- package/dist/when-DEJm_QN9.js +9 -0
- package/dist/when-DEJm_QN9.js.map +1 -0
- package/package.json +4 -2
- package/readme.md +3 -3
- package/scss/mixin.scss +8 -6
- package/src/__internal/aria/aria.ts +293 -0
- package/src/__internal/aria/delegate.ts +206 -0
- package/src/__internal/events/dispatch-hooks.ts +182 -0
- package/src/__internal/mixins/element-internals.ts +73 -0
- package/src/__internal/mixins/form-associated.ts +295 -0
- package/src/__internal/mixins/form-submitter.ts +133 -0
- package/src/__internal/mixins/hyperlink.ts +71 -0
- package/src/__internal/mixins/mixin.ts +58 -0
- package/src/{__utils → __internal/utils}/observe-slot-change.ts +2 -5
- package/src/accordion/accordion-item.ts +6 -2
- package/src/accordion/accordion.ts +4 -2
- package/src/accordion/demo/index.html +95 -90
- package/src/alert/alert.scss +82 -0
- package/src/{banner/banner.ts → alert/alert.ts} +22 -22
- package/src/alert/index.ts +1 -0
- package/src/app-bar/app-bar-colors.scss +17 -0
- package/src/app-bar/app-bar.scss +165 -0
- package/src/app-bar/app-bar.ts +155 -0
- package/src/app-bar/index.ts +1 -0
- package/src/avatar/avatar.ts +4 -0
- package/src/badge/badge.ts +2 -0
- package/src/bottom-sheet/bottom-sheet.ts +8 -2
- package/src/breadcrumb/breadcrumb/breadcrumb.ts +2 -0
- package/src/breadcrumb/breadcrumb-item/breadcrumb-item.ts +3 -0
- package/src/button/ButtonTypes.ts +17 -0
- package/src/button/base-button/base-button.ts +85 -0
- package/src/button/button/button-base.scss +306 -0
- package/src/button/button/button-colors.scss +27 -32
- package/src/button/button/button-layers.scss +126 -39
- package/src/button/button/button-shapes.scss +73 -0
- package/src/button/button/button.scss +12 -286
- package/src/button/button/button.ts +174 -194
- package/src/button/button-group/button-group.scss +43 -36
- package/src/button/button-group/button-group.ts +26 -137
- package/src/{fab → button/fab}/fab-colors.scss +0 -10
- package/src/button/fab/fab-sizes.scss +37 -0
- package/src/button/fab/fab.scss +172 -0
- package/src/{fab → button/fab}/fab.ts +69 -105
- package/src/button/icon-button/icon-button-sizes.scss +18 -3
- package/src/button/icon-button/icon-button.scss +5 -0
- package/src/button/icon-button/icon-button.ts +111 -141
- package/src/button/index.ts +7 -0
- package/src/calendar/calendar.ts +2 -2
- package/src/canvas/canvas.ts +2 -2
- package/src/card/card.scss +3 -3
- package/src/card/card.ts +20 -40
- package/src/chart-bar/chart-bar.ts +2 -2
- package/src/chart-bar/chart-stacked-bar.ts +2 -2
- package/src/checkbox/checkbox.ts +12 -4
- package/src/chip/chip/chip.scss +1 -1
- package/src/chip/chip/chip.ts +35 -55
- package/src/chip/demo/index.html +30 -26
- package/src/code-editor/code-editor.ts +68 -58
- package/src/code-editor/demo/index.html +32 -27
- package/src/code-highlighter/code-highlighter.ts +1 -1
- package/src/code-highlighter/demo/index.html +24 -21
- package/src/container/container.ts +8 -2
- package/src/date-picker/date-picker.ts +2 -3
- package/src/divider/divider.ts +5 -1
- package/src/dropdown-button/demo/index.html +106 -101
- package/src/dropdown-button/dropdown-button.ts +1 -1
- package/src/elevation/elevation.ts +2 -0
- package/src/empty-state/empty-state.ts +3 -0
- package/src/field/field.ts +52 -33
- package/src/focus-ring/focus-ring.ts +5 -7
- package/src/html-editor/html-editor.ts +28 -16
- package/src/icon/datasource.ts +1 -1
- package/src/icon/icon.ts +27 -15
- package/src/image/image.ts +18 -6
- package/src/index.ts +24 -6
- package/src/input/input.ts +2 -2
- package/src/item/item.scss +126 -162
- package/src/item/item.ts +70 -323
- package/src/link/link.ts +3 -1
- package/src/list/list-item.scss +43 -31
- package/src/list/list-item.ts +79 -75
- package/src/list/list.scss +1 -13
- package/src/list/list.ts +6 -3
- package/src/{peacock-loader.ts → loader.ts} +91 -79
- package/src/menu/menu/menu.scss +14 -11
- package/src/menu/menu/menu.ts +20 -8
- package/src/menu/menu-item/menu-item.scss +35 -3
- package/src/menu/menu-item/menu-item.ts +40 -34
- package/src/menu/sub-menu/sub-menu.ts +3 -0
- package/src/modal/modal.ts +2 -2
- package/src/navigation-rail/navigation-rail-item.ts +21 -36
- package/src/navigation-rail/navigation-rail.scss +1 -0
- package/src/navigation-rail/navigation-rail.ts +4 -2
- package/src/number-field/number-field.ts +2 -2
- package/src/pagination/pagination.ts +2 -0
- package/src/popover/popover.ts +3 -3
- package/src/radio/radio.ts +13 -5
- package/src/ripple/ripple.ts +14 -1
- package/src/search/search.ts +3 -3
- package/src/segmented-button/segmented-button-group.ts +8 -4
- package/src/segmented-button/segmented-button.ts +4 -0
- package/src/select/option.ts +2 -0
- package/src/side-sheet/side-sheet.ts +2 -2
- package/src/sidebar-menu/sidebar-menu-item.ts +3 -2
- package/src/skeleton/skeleton.ts +3 -0
- package/src/slider/slider.ts +4 -1
- package/src/snackbar/snackbar.ts +40 -25
- package/src/spinner/spinner.ts +2 -0
- package/src/svg/svg.ts +27 -9
- package/src/switch/switch.ts +1 -1
- package/src/table/table.ts +16 -3
- package/src/tabs/demo/index.html +79 -79
- package/src/tabs/tab-group.ts +2 -0
- package/src/tabs/tab-panel.ts +2 -0
- package/src/tabs/tab.scss +4 -4
- package/src/tabs/tab.ts +16 -39
- package/src/tabs/tabs.ts +2 -0
- package/src/textarea/textarea.ts +2 -2
- package/src/time-picker/time-picker.ts +2 -2
- package/src/toolbar/toolbar.ts +3 -3
- package/src/tooltip/tooltip.ts +14 -8
- package/src/url-field/url-field.ts +2 -3
- package/dist/ButtonConstants-D06bY4uy.js +0 -114
- package/dist/ButtonConstants-D06bY4uy.js.map +0 -1
- package/dist/NativeHyperlinkMixin-DrYXyfMQ.js.map +0 -1
- package/dist/banner.js +0 -186
- package/dist/banner.js.map +0 -1
- package/dist/button-colors-D7sJyPy8.js +0 -586
- package/dist/button-colors-D7sJyPy8.js.map +0 -1
- package/dist/icon-CueRR7wx.js +0 -260
- package/dist/icon-CueRR7wx.js.map +0 -1
- package/dist/icon-button-CAzYr_qr.js +0 -318
- package/dist/icon-button-CAzYr_qr.js.map +0 -1
- package/dist/navigation-rail-CM_svs5_.js +0 -14184
- package/dist/navigation-rail-CM_svs5_.js.map +0 -1
- package/dist/observe-slot-change-D8Xg-kSS.js.map +0 -1
- package/dist/peacock-loader.js.map +0 -1
- package/dist/popover-DUPmMVWS.js.map +0 -1
- package/dist/query-QBcUV-L_.js +0 -15
- package/dist/query-QBcUV-L_.js.map +0 -1
- package/dist/src/banner/banner.d.ts +0 -43
- package/dist/src/banner/index.d.ts +0 -1
- package/dist/src/button/GroupButtonInterface.d.ts +0 -4
- package/src/banner/banner.scss +0 -82
- package/src/banner/index.ts +0 -1
- package/src/button/GroupButtonInterface.ts +0 -4
- package/src/button/button/only-button.scss +0 -13
- package/src/fab/fab-sizes.scss +0 -37
- package/src/fab/fab.scss +0 -143
- /package/dist/src/{__controllers → __internal/controllers}/attachable-controller.d.ts +0 -0
- /package/dist/src/{__controllers → __internal/controllers}/floating-controller.d.ts +0 -0
- /package/dist/src/{__directive → __internal/directive}/spread.d.ts +0 -0
- /package/dist/src/{__mixins → __internal/mixins}/MixinConstructor.d.ts +0 -0
- /package/dist/src/{__mixins → __internal/mixins}/NativeButtonMixin.d.ts +0 -0
- /package/dist/src/{__mixins → __internal/mixins}/NativeHyperlinkMixin.d.ts +0 -0
- /package/dist/src/{__utils → __internal/utils}/cache-fetch.d.ts +0 -0
- /package/dist/src/{__utils → __internal/utils}/copy-to-clipboard.d.ts +0 -0
- /package/dist/src/{__utils → __internal/utils}/dispatch-event-utils.d.ts +0 -0
- /package/dist/src/{__utils → __internal/utils}/is-dark-mode.d.ts +0 -0
- /package/dist/src/{__utils → __internal/utils}/is-in-viewport.d.ts +0 -0
- /package/dist/src/{__utils → __internal/utils}/is-link.d.ts +0 -0
- /package/dist/src/{__utils → __internal/utils}/observe-theme-change.d.ts +0 -0
- /package/dist/src/{__utils → __internal/utils}/sanitize-svg.d.ts +0 -0
- /package/dist/src/{__utils → __internal/utils}/throttle.d.ts +0 -0
- /package/dist/src/{fab → button/fab}/index.d.ts +0 -0
- /package/dist/src/{peacock-loader.d.ts → loader.d.ts} +0 -0
- /package/dist/test/{banner.test.d.ts → alert.test.d.ts} +0 -0
- /package/src/{__controllers → __internal/controllers}/attachable-controller.ts +0 -0
- /package/src/{__controllers → __internal/controllers}/floating-controller.ts +0 -0
- /package/src/{__directive → __internal/directive}/spread.ts +0 -0
- /package/src/{__mixins → __internal/mixins}/MixinConstructor.ts +0 -0
- /package/src/{__mixins → __internal/mixins}/NativeButtonMixin.ts +0 -0
- /package/src/{__mixins → __internal/mixins}/NativeHyperlinkMixin.ts +0 -0
- /package/src/{__mixins → __internal/mixins}/README.md +0 -0
- /package/src/{__utils → __internal/utils}/cache-fetch.ts +0 -0
- /package/src/{__utils → __internal/utils}/copy-to-clipboard.ts +0 -0
- /package/src/{__utils → __internal/utils}/dispatch-event-utils.ts +0 -0
- /package/src/{__utils → __internal/utils}/is-dark-mode.ts +0 -0
- /package/src/{__utils → __internal/utils}/is-in-viewport.ts +0 -0
- /package/src/{__utils → __internal/utils}/is-link.ts +0 -0
- /package/src/{__utils → __internal/utils}/observe-theme-change.ts +0 -0
- /package/src/{__utils → __internal/utils}/sanitize-svg.ts +0 -0
- /package/src/{__utils → __internal/utils}/throttle.ts +0 -0
- /package/src/{fab → button/fab}/index.ts +0 -0
package/dist/button.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.js","sources":["../../src/button/button/button.ts"],"sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { when } from 'lit/directives/when.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport styles from './button.scss';\nimport onlyButton from './only-button.scss';\nimport buttonLayers from './button-layers.scss';\nimport colorStyles from './button-colors.scss';\nimport sizeStyles from './button-sizes.scss';\nimport { throttle } from '@/__utils/throttle.js';\nimport { spread } from '@/__directive/spread.js';\nimport { isLink } from '@/__utils/is-link.js';\nimport { observerSlotChangesWithCallback } from '@/__utils/observe-slot-change.js';\nimport NativeButtonMixin from '@/__mixins/NativeButtonMixin.js';\nimport NativeHyperlinkMixin from '@/__mixins/NativeHyperlinkMixin.js';\nimport { GroupButtonInterface } from '@/button/GroupButtonInterface.js';\nimport {\n dispatchActivationClick,\n isActivationClick,\n} from '@/__utils/dispatch-event-utils.js';\nimport { DISABLED_REASON_ID } from '@/button/ButtonConstants.js';\n\n/**\n * @label Button\n * @tag wc-button\n * @rawTag button\n *\n * @summary Buttons help people initiate actions, from sending an email, to sharing a document, to liking a post.\n * @overview\n * <p>Buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with pages in a variety of ways. Button labels express what action will occur when the user interacts with it.</p>\n *\n * @cssprop --button-container-shape: Defines the border radius of the button container shape.\n *\n * @cssprop --button-container-shape-start-start: Defines the start position of the button container shape.\n * @cssprop --button-container-shape-start-end: Defines the end position of the button container shape.\n * @cssprop --button-container-shape-end-start: Defines the start position of the button container shape.\n * @cssprop --button-container-shape-end-end: Defines the end position of the button container shape.\n *\n *\n * @cssprop --filled-button-container-color: Color of the filled button container.\n * @cssprop --filled-button-label-text-color: Text color of the filled button label.\n *\n * @cssprop --outlined-button-container-color: Color of the outlined button container.\n * @cssprop --outlined-button-label-text-color: Text color of the outlined button label.\n *\n * @cssprop --text-button-label-text-color: Text color of the text button label.\n *\n * @cssprop --tonal-button-container-color: Color of the tonal button container.\n * @cssprop --tonal-button-label-text-color: Text color of the tonal button label.\n *\n * @cssprop --elevated-button-container-color: Color of the elevated button container.\n * @cssprop --elevated-button-label-text-color: Text color of the elevated button label.\n *\n * @cssprop --neo-button-container-color: Color of the neo button container.\n * @cssprop --neo-button-label-text-color: Text color of the neo button label.\n *\n * @fires {MouseEvent} click - Dispatched when the button is clicked.\n *\n * @example\n * ```html\n * <wc-button>Button</wc-button>\n * ```\n * @tags display\n */\n@IndividualComponent\nexport class Button\n extends NativeButtonMixin(NativeHyperlinkMixin(LitElement))\n implements GroupButtonInterface\n{\n static override styles = [\n buttonLayers,\n styles,\n onlyButton,\n sizeStyles,\n colorStyles,\n ];\n\n /**\n * Icon alignment.\n * Possible values are `\"start\"`, `\"end\"`. Defaults to `\"end\"`.\n */\n @property({ type: Boolean, reflect: true, attribute: 'trailing-icon' })\n trailingIcon = false;\n\n /**\n * Button size.\n * Possible values are `\"xs\"`, `\"sm\"`, `\"md\"`, `\"lg\"`, `\"xl\"`. Defaults to `\"sm\"`.\n */\n @property({ reflect: true }) size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'sm';\n\n /**\n * Type is preset of color and variant. Type will be only applied.\n *\n */\n @property({ type: String }) type?: 'primary' | 'secondary' | 'tertiary';\n\n /**\n * The visual style of the button.\n *\n * Possible variant values:\n * `\"filled\"` is a filled button.\n * `\"outlined\"` is an outlined button.\n * `\"text\"` is a transparent button.\n * `\"tonal\"` is a light color button.\n * `\"elevated\"` is elevated button\n */\n @property({ reflect: true }) variant:\n | 'elevated'\n | 'filled'\n | 'tonal'\n | 'outlined'\n | 'text'\n | 'neo' = 'filled';\n\n /**\n * Defines the primary color of the button. This can be set to predefined color names to apply specific color themes.\n */\n @property({ reflect: true }) color:\n | 'primary'\n | 'success'\n | 'danger'\n | 'warning'\n | 'surface'\n | 'on-surface' = 'primary';\n\n /**\n * Additional ARIA attributes to pass to the inner button/anchor element.\n */\n @property({ reflect: true })\n configAria?: { [key: string]: any };\n\n override focus() {\n this.getControl()?.focus();\n }\n\n override blur() {\n this.getControl()?.blur();\n }\n\n override firstUpdated() {\n this.__dispatchClickWithThrottle = throttle(\n this.__dispatchClick,\n this.throttleDelay,\n );\n\n this.__convertTypeToVariantAndColor();\n // Initialize slot presence tracking for smooth transitions when label/icon are added/removed\n const iconSlot = this.renderRoot.querySelector(\n 'slot[name=\"icon\"]',\n ) as HTMLSlotElement | null;\n const labelSlot = this.renderRoot.querySelector(\n 'slot.label',\n ) as HTMLSlotElement | null;\n\n // Use MutationObserver-based helper so we react to content/character changes\n if (iconSlot) {\n this.__iconSlotCleanup = observerSlotChangesWithCallback(\n iconSlot,\n has => {\n this.toggleAttribute('has-icon', has);\n },\n );\n }\n\n if (labelSlot) {\n this.__labelSlotCleanup = observerSlotChangesWithCallback(\n labelSlot,\n has => {\n this.toggleAttribute('has-label', has);\n },\n );\n }\n }\n\n __convertTypeToVariantAndColor() {\n if (this.type === 'primary') {\n this.color = 'primary';\n this.variant = 'filled';\n } else if (this.type === 'secondary') {\n this.color = 'surface';\n this.variant = 'filled';\n } else if (this.type === 'tertiary') {\n this.color = 'primary';\n this.variant = 'text';\n } else if (this.type === 'danger') {\n this.color = 'danger';\n this.variant = 'filled';\n }\n }\n\n override render() {\n const buttonId = isLink(this) ? 'link' : 'button';\n\n return html`\n <wc-focus-ring class=\"focus-ring\" for=${buttonId}></wc-focus-ring>\n <wc-elevation class=\"elevation\"></wc-elevation>\n ${when(\n this.variant === 'neo',\n () => html`<div class=\"neo-background\"></div>`,\n )}\n <div class=\"background\"></div>\n ${when(\n this.variant === 'outlined' || this.variant === 'neo',\n () => html`<div class=\"outline\"></div>`,\n )}\n <wc-ripple class=\"ripple\" for=${buttonId}></wc-ripple>\n <wc-skeleton class=\"skeleton\"></wc-skeleton>\n\n ${this.renderButtonElement()} ${this.__renderTooltip()}\n `;\n }\n\n renderButtonElement() {\n const isElementLink = isLink(this);\n\n const cssClasses: any = {\n button: true,\n 'native-button': !isElementLink,\n 'native-link': isElementLink,\n 'trailing-icon': this.trailingIcon,\n };\n\n if (isElementLink) {\n return html`<a\n class=${classMap(cssClasses)}\n id=\"link\"\n href=${this.href}\n target=${this.target}\n tabindex=${this.disabled ? '-1' : '0'}\n @click=${this.__dispatchClick}\n @mousedown=${this.__handlePress}\n @keydown=${this.__handlePress}\n @keyup=${this.__handlePress}\n role=\"button\"\n aria-describedby=${ifDefined(\n this.softDisabled ? DISABLED_REASON_ID : undefined,\n )}\n ?aria-disabled=${this.softDisabled}\n ${spread(this.configAria)}\n >\n ${this.renderButtonContent()}\n </a>`;\n }\n return html`<button\n class=${classMap(cssClasses)}\n id=\"button\"\n type=${this.htmlType}\n @click=${this.__dispatchClickWithThrottle}\n @mousedown=${this.__handlePress}\n @keydown=${this.__handlePress}\n @keyup=${this.__handlePress}\n aria-describedby=${ifDefined(\n this.softDisabled ? DISABLED_REASON_ID : undefined,\n )}\n ?aria-disabled=${this.softDisabled}\n ?disabled=${this.disabled}\n ${spread(this.configAria)}\n >\n ${this.renderButtonContent()}\n </button>\n ${this.__renderTooltip()}`;\n }\n\n renderButtonContent() {\n return html` <slot class=\"icon-slot\" name=\"icon\"></slot>\n <slot class=\"label\"></slot>\n <div class=\"touch\"></div>\n\n ${this.__renderDisabledReason(this.softDisabled)}`;\n }\n\n @property({ type: Boolean, reflect: true }) skeleton: boolean = false;\n\n @property({ type: Boolean, reflect: true }) toggle: boolean = false;\n\n @property({ type: Boolean, reflect: true }) selected: boolean = false;\n\n /**\n * Sets the delay for throttle in milliseconds. Defaults to 200 milliseconds.\n */\n @property() throttleDelay = 200;\n\n @property() tooltip?: string;\n\n /**\n * States\n */\n @property({ type: Boolean, reflect: true })\n pressed = false;\n\n // Query the internal control (button or link) on demand instead of\n // keeping a persistent query reference.\n\n // cleanup functions returned by observerSlotChangesWithCallback\n private __iconSlotCleanup: (() => void) | null = null;\n\n private __labelSlotCleanup: (() => void) | null = null;\n\n override connectedCallback() {\n super.connectedCallback();\n this.addEventListener('click', this.__dispatchClickWithThrottle);\n window.addEventListener('mouseup', this.__handlePress);\n }\n\n override disconnectedCallback() {\n // disconnect slot observers first to avoid callbacks during teardown\n try {\n this.__iconSlotCleanup?.();\n } catch (e) {\n /* ignore */\n }\n try {\n this.__labelSlotCleanup?.();\n } catch (e) {\n /* ignore */\n }\n\n window.removeEventListener('mouseup', this.__handlePress);\n this.removeEventListener('click', this.__dispatchClickWithThrottle);\n super.disconnectedCallback();\n }\n\n __handlePress = (event: KeyboardEvent | MouseEvent) => {\n if (this.disabled || this.skeleton || this.softDisabled) return;\n this.pressed =\n (event instanceof KeyboardEvent &&\n event.type === 'keydown' &&\n (event.key === 'Enter' || event.key === ' ')) ||\n event.type === 'mousedown';\n };\n\n __dispatchClickWithThrottle: (event: MouseEvent | KeyboardEvent) => void =\n event => {\n this.__dispatchClick(event);\n };\n\n __dispatchClick = (event: MouseEvent | KeyboardEvent) => {\n // If the button is soft-disabled or a disabled link, we need to explicitly\n // prevent the click from propagating to other event listeners as well as\n // prevent the default action.\n if (this.softDisabled || (this.disabled && this.href) || this.skeleton) {\n event.stopImmediatePropagation();\n event.preventDefault();\n return;\n }\n\n const control = this.getControl();\n\n if (!isActivationClick(event) || !control) {\n return;\n }\n\n if (this.toggle) {\n this.selected = !this.selected;\n }\n\n this.focus();\n dispatchActivationClick(control);\n };\n\n private getControl(): HTMLElement | null {\n return (\n (this.renderRoot?.querySelector('#button') as HTMLElement | null) ??\n (this.renderRoot?.querySelector('#link') as HTMLElement | null)\n );\n }\n\n __renderDisabledReason(softDisabled: boolean) {\n if (softDisabled)\n return html`<div\n id=${DISABLED_REASON_ID}\n role=\"tooltip\"\n aria-label=${this.disabledReason}\n class=\"screen-reader-only\"\n >\n ${this.disabledReason}\n </div>`;\n return nothing;\n }\n\n __renderTooltip() {\n if (this.tooltip) {\n const buttonId = isLink(this) ? 'link' : 'button';\n return html`<wc-tooltip class=\"tooltip\" for=${buttonId}>${this.tooltip}</wc-tooltip>`;\n }\n return nothing;\n }\n}\n"],"names":["LitElement","html","when","classMap","ifDefined","nothing","buttonLayers","styles","onlyButton","sizeStyles","colorStyles","property"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"button.js","sources":["../../src/button/button/button.ts"],"sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { when } from 'lit/directives/when.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport styles from './button.scss';\n\nimport type {\n ButtonSize,\n ButtonLevel,\n ButtonShape,\n ButtonVariant,\n ButtonColor,\n} from '@/button/ButtonTypes.js';\nimport { isLink } from '@/__internal/utils/is-link.js';\nimport { observerSlotChangesWithCallback } from '@/__internal/utils/observe-slot-change.js';\nimport {\n dispatchActivationClick,\n isActivationClick,\n} from '@/__internal/utils/dispatch-event-utils.js';\nimport { DISABLED_REASON_ID } from '@/button/ButtonConstants.js';\nimport { mixinDelegatesAria } from '@/__internal/aria/delegate.js';\nimport { ARIAMixinStrict } from '@/__internal/aria/aria.js';\nimport { mixinFormSubmitter } from '@/__internal/mixins/form-submitter.js';\nimport { mixinElementInternals } from '@/__internal/mixins/element-internals.js';\nimport { mixinBaseButton } from '../base-button/base-button.js';\nimport { mixinFormAssociated } from '@/__internal/mixins/form-associated.js';\nimport { mixinHyperlink } from '@/__internal/mixins/hyperlink.js';\nexport type {\n ButtonSize,\n ButtonLevel,\n ButtonShape,\n ButtonVariant,\n ButtonColor,\n} from '@/button/ButtonTypes.js';\n\n/**\n * @label Button\n * @tag wc-button\n * @rawTag button\n *\n * @summary Buttons help people initiate actions, from sending an email, to sharing a document, to liking a post.\n * @overview\n * <p>Buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with pages in a variety of ways. Button labels express what action will occur when the user interacts with it.</p>\n *\n * @cssprop --button-container-shape: Defines the border radius of the button container shape.\n *\n * @cssprop --button-container-shape-start-start: Defines the start position of the button container shape.\n * @cssprop --button-container-shape-start-end: Defines the end position of the button container shape.\n * @cssprop --button-container-shape-end-start: Defines the start position of the button container shape.\n * @cssprop --button-container-shape-end-end: Defines the end position of the button container shape.\n *\n *\n * @cssprop --filled-button-container-color: Color of the filled button container.\n * @cssprop --filled-button-label-text-color: Text color of the filled button label.\n *\n * @cssprop --outlined-button-container-color: Color of the outlined button container.\n * @cssprop --outlined-button-label-text-color: Text color of the outlined button label.\n *\n * @cssprop --text-button-label-text-color: Text color of the text button label.\n *\n * @cssprop --tonal-button-container-color: Color of the tonal button container.\n * @cssprop --tonal-button-label-text-color: Text color of the tonal button label.\n *\n * @cssprop --elevated-button-container-color: Color of the elevated button container.\n * @cssprop --elevated-button-label-text-color: Text color of the elevated button label.\n *\n * @cssprop --neo-button-container-color: Color of the neo button container.\n * @cssprop --neo-button-label-text-color: Text color of the neo button label.\n *\n * @fires {MouseEvent} click - Dispatched when the button is clicked.\n *\n * @example\n * ```html\n * <wc-button>Button</wc-button>\n * ```\n * @tags display\n */\n@IndividualComponent\nexport class Button extends mixinBaseButton(\n mixinHyperlink(\n mixinDelegatesAria(\n mixinFormSubmitter(\n mixinFormAssociated(mixinElementInternals(LitElement)),\n ),\n ),\n ),\n) {\n // ── Static ───────────────────────────────────────────────────────────────\n\n /** @nocollapse */ // eslint-disable-next-line\n static override shadowRootOptions: ShadowRootInit = {\n mode: 'open',\n delegatesFocus: true,\n };\n\n static override styles = [styles];\n\n // ── Properties ───────────────────────────────────────────────────────────\n\n /**\n * Icon alignment.\n * Possible values are `\"start\"`, `\"end\"`. Defaults to `\"end\"`.\n */\n @property({ type: Boolean, reflect: true, attribute: 'trailing-icon' })\n trailingIcon = false;\n\n /**\n * Button size.\n * Possible values are `\"xs\"`, `\"sm\"`, `\"md\"`, `\"lg\"`, `\"xl\"`. Defaults to `\"sm\"`.\n */\n @property({ reflect: true }) size: ButtonSize = 'sm';\n\n /**\n * Level is preset of color and variant. If Level provided it overrides the default color and variant.\n */\n @property({ type: String }) level?: ButtonLevel;\n\n /** Shape of the button container. */\n @property({ type: String, reflect: true }) shape: ButtonShape = 'square';\n\n /**\n * The visual style of the button.\n *\n * Possible variant values:\n * `\"filled\"` is a filled button.\n * `\"outlined\"` is an outlined button.\n * `\"text\"` is a transparent button.\n * `\"tonal\"` is a light color button.\n * `\"elevated\"` is elevated button\n */\n @property({ reflect: true }) variant: ButtonVariant = 'filled';\n\n /**\n * Defines the primary color of the button. This can be set to predefined color names to apply specific color themes.\n */\n @property({ reflect: true }) color: ButtonColor = 'primary';\n\n /** When true, renders the button in a loading skeleton state. */\n @property({ type: Boolean, reflect: true }) skeleton: boolean = false;\n\n /** When true, the button acts as a toggle. Use with `selected`. */\n @property({ type: Boolean, reflect: true }) toggle: boolean = false;\n\n /** When true (and `toggle` is set), the button is in the selected/pressed state. */\n @property({ type: Boolean, reflect: true }) selected: boolean = false;\n\n /** Optional tooltip text displayed on hover. */\n @property() tooltip?: string;\n\n // ── Queries ───────────────────────────────────────────────────────────────\n\n @query('.button') private readonly buttonElement!: HTMLElement | null;\n\n // ── Private fields ────────────────────────────────────────────────────────\n\n /** Cleanup returned by observerSlotChangesWithCallback for the icon slot. */\n private __iconSlotCleanup: (() => void) | null = null;\n\n /** Cleanup returned by observerSlotChangesWithCallback for the label slot. */\n private __labelSlotCleanup: (() => void) | null = null;\n\n // ── Constructor ───────────────────────────────────────────────────────────\n\n constructor() {\n super();\n this.addEventListener('click', this.__dispatchClickWithThrottle);\n }\n\n // ── Lifecycle ─────────────────────────────────────────────────────────────\n\n override disconnectedCallback() {\n // disconnect slot observers first to avoid callbacks during teardown\n try {\n this.__iconSlotCleanup?.();\n } catch (e) {\n /* ignore */\n }\n try {\n this.__labelSlotCleanup?.();\n } catch (e) {\n /* ignore */\n }\n\n super.disconnectedCallback();\n }\n\n override firstUpdated(changedProperties: Map<PropertyKey, unknown>) {\n super.firstUpdated(changedProperties);\n this.__convertTypeToVariantAndColor();\n // Initialize slot presence tracking for smooth transitions when label/icon are added/removed\n const iconSlot = this.renderRoot.querySelector(\n 'slot[name=\"icon\"]',\n ) as HTMLSlotElement | null;\n const labelSlot = this.renderRoot.querySelector(\n 'slot.label',\n ) as HTMLSlotElement | null;\n\n // Use MutationObserver-based helper so we react to content/character changes\n if (iconSlot) {\n this.__iconSlotCleanup = observerSlotChangesWithCallback(\n iconSlot,\n has => {\n this.toggleAttribute('has-icon', has);\n },\n );\n }\n\n if (labelSlot) {\n this.__labelSlotCleanup = observerSlotChangesWithCallback(\n labelSlot,\n has => {\n this.toggleAttribute('has-label', has);\n },\n );\n }\n }\n\n // ── Public methods ────────────────────────────────────────────────────────\n\n override focus() {\n this.buttonElement?.focus();\n }\n\n override blur() {\n this.buttonElement?.blur();\n }\n\n // ── Private methods ───────────────────────────────────────────────────────\n\n __convertTypeToVariantAndColor() {\n if (this.level === 'primary') {\n this.color = 'primary';\n this.variant = 'filled';\n } else if (this.level === 'secondary') {\n this.color = 'surface';\n this.variant = 'tonal';\n } else if (this.level === 'tertiary') {\n this.color = 'primary';\n this.variant = 'text';\n } else if (this.level === 'danger') {\n this.color = 'danger';\n this.variant = 'filled';\n }\n }\n\n __dispatchClick = (event: MouseEvent | KeyboardEvent) => {\n // If the button is soft-disabled or a disabled link, we need to explicitly\n // prevent the click from propagating to other event listeners as well as\n // prevent the default action.\n if (this.softDisabled || (this.disabled && this.href) || this.skeleton) {\n event.stopImmediatePropagation();\n event.preventDefault();\n return;\n }\n\n if (!isActivationClick(event) || !this.buttonElement) {\n return;\n }\n\n this.focus();\n dispatchActivationClick(this.buttonElement);\n };\n\n // ── Render helpers ────────────────────────────────────────────────────────\n\n renderButtonElement() {\n const isElementLink = isLink(this);\n\n const cssClasses: any = {\n button: true,\n 'native-button': !isElementLink,\n 'native-link': isElementLink,\n 'trailing-icon': this.trailingIcon,\n };\n\n // Needed for closure conformance\n const { ariaLabel, ariaHasPopup, ariaExpanded } = this as ARIAMixinStrict;\n\n if (isElementLink) {\n return html`<a\n class=${classMap(cssClasses)}\n id=\"link\"\n href=${this.href}\n target=${this.target}\n tabindex=${this.disabled ? '-1' : '0'}\n aria-label=\"${ariaLabel || nothing}\"\n aria-haspopup=\"${ariaHasPopup || nothing}\"\n aria-expanded=\"${ariaExpanded || nothing}\"\n aria-describedby=${ifDefined(\n this.softDisabled ? DISABLED_REASON_ID : undefined,\n )}\n ?aria-disabled=${this.softDisabled}\n >\n ${this.renderButtonContent()}\n </a>`;\n }\n return html`<button\n class=${classMap(cssClasses)}\n id=\"button\"\n aria-label=\"${ariaLabel || nothing}\"\n aria-haspopup=\"${ariaHasPopup || nothing}\"\n aria-expanded=\"${ariaExpanded || nothing}\"\n aria-describedby=${ifDefined(\n this.softDisabled ? DISABLED_REASON_ID : undefined,\n )}\n ?aria-disabled=${this.softDisabled}\n ?disabled=${this.disabled}\n >\n ${this.renderButtonContent()}\n </button>\n ${this.renderTooltip()}`;\n }\n\n renderButtonContent() {\n return html` <slot class=\"icon-slot\" name=\"icon\"></slot>\n <slot class=\"label\"></slot>\n <div class=\"touch\"></div>\n\n ${this.renderDisabledReason(this.softDisabled)}`;\n }\n\n renderDisabledReason(softDisabled: boolean) {\n if (softDisabled)\n return html`<div\n id=${DISABLED_REASON_ID}\n role=\"tooltip\"\n aria-label=${this.disabledReason}\n class=\"screen-reader-only\"\n >\n ${this.disabledReason}\n </div>`;\n return nothing;\n }\n\n renderTooltip() {\n if (this.tooltip) {\n const buttonId = isLink(this) ? 'link' : 'button';\n return html`<wc-tooltip class=\"tooltip\" for=${buttonId}\n >${this.tooltip}</wc-tooltip\n >`;\n }\n return nothing;\n }\n\n // ── Render ────────────────────────────────────────────────────────────────\n\n override render() {\n const buttonId = isLink(this) ? 'link' : 'button';\n\n return html`\n <wc-focus-ring class=\"focus-ring\" for=${buttonId}></wc-focus-ring>\n <wc-elevation class=\"elevation\"></wc-elevation>\n ${when(\n this.variant === 'neo',\n () => html`<div class=\"neo-background\"></div>`,\n )}\n <div class=\"background\"></div>\n ${when(\n this.variant === 'outlined' || this.variant === 'neo',\n () => html`<div class=\"outline\"></div>`,\n )}\n <wc-ripple class=\"ripple\" for=${buttonId}></wc-ripple>\n <wc-skeleton class=\"skeleton\"></wc-skeleton>\n\n ${this.renderButtonElement()} ${this.renderTooltip()}\n `;\n }\n}\n"],"names":["LitElement","html","classMap","nothing","ifDefined","when","styles","property","query"],"mappings":"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"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { n } from './property-
|
|
3
|
-
import { r } from './state-
|
|
1
|
+
import { i, _ as __decorate, I as IndividualComponent, a as i$1, b, A } from './IndividualComponent-Bdwyrvd6.js';
|
|
2
|
+
import { n } from './property-B49QQ8pS.js';
|
|
3
|
+
import { r } from './state-DkTK9EGF.js';
|
|
4
4
|
import { g as getTimePercent, c as calculateDateRange, B as BaseEvent, s as startOfDay, e as endOfDay, d as differenceInDays, a as addDays, f as formatDate, h as addHours, L as LONG_EVENT_PADDING } from './calendar-event-BrQ_SEKD.js';
|
|
5
|
-
import { E as EventManager } from './event-manager-
|
|
5
|
+
import { E as EventManager } from './event-manager-DTyX2uYD.js';
|
|
6
6
|
|
|
7
7
|
var css_248z = i`@charset "UTF-8";
|
|
8
8
|
* {
|
|
@@ -13,6 +13,10 @@ var css_248z = i`@charset "UTF-8";
|
|
|
13
13
|
display: none !important;
|
|
14
14
|
}
|
|
15
15
|
|
|
16
|
+
[hidden] {
|
|
17
|
+
display: none !important;
|
|
18
|
+
}
|
|
19
|
+
|
|
16
20
|
:host {
|
|
17
21
|
display: block;
|
|
18
22
|
height: 100%;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"calendar-column-view.js","sources":["../../src/calendar/calendar-column-view.ts"],"sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport {\n addDays,\n addHours,\n differenceInDays,\n startOfDay,\n endOfDay,\n calculateDateRange,\n formatDate,\n getTimePercent,\n LONG_EVENT_PADDING,\n} from './utils.js';\nimport { BaseEvent } from './base-event.js';\nimport { CalendarEvent } from './calendar-event.js';\nimport { EventManager } from './event-manager.js';\nimport type { ColumnEvent } from './event-manager.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport styles from './calendar-column-view.scss';\n\n/**\n * @label Calendar Column View\n * @tag wc-calendar-column-view\n * @rawTag calendar-column-view\n * @summary Internal column view component for the calendar (day/week views).\n */\n@IndividualComponent\nexport class CalendarColumnView extends LitElement {\n static styles = [styles];\n\n @property({ type: Array })\n events: CalendarEvent[] = [];\n\n @property({ type: String })\n view: string = 'week';\n\n @property({ type: Number })\n days: number = 7;\n\n @property({ type: Boolean, attribute: 'event-clickable' })\n eventClickable: boolean = true;\n\n @property({ type: Object, attribute: false })\n currentTime: Date = new Date();\n\n @property({ type: Object, attribute: false })\n contextDate: Date = new Date();\n\n @state()\n private dateRange: any = {};\n\n @state()\n private singleDayEvents: Record<string, ColumnEvent[][]> = {};\n\n @state()\n private multiDayEvents: ColumnEvent[][] = [];\n\n override connectedCallback() {\n super.connectedCallback();\n this._processEvents();\n }\n\n override willUpdate(changedProperties: Map<string, unknown>) {\n if (\n changedProperties.has('events') ||\n changedProperties.has('contextDate') ||\n changedProperties.has('view') ||\n changedProperties.has('days')\n ) {\n this._processEvents();\n }\n }\n\n override firstUpdated() {\n const viewBody = this.renderRoot.querySelector('.view-body');\n if (viewBody) {\n const viewBodyHeight = viewBody.scrollHeight;\n viewBody.scrollTo({\n top:\n (getTimePercent(this.currentTime) / 100) * viewBodyHeight - 150,\n });\n }\n }\n\n private _processEvents() {\n this.dateRange = calculateDateRange(this.view, this.contextDate, this.days);\n this.singleDayEvents = {};\n\n this._forEachDayInRange(i => {\n const manager = new EventManager();\n manager.addEvents(\n this.events.filter(\n event =>\n event.isOverlapping(new BaseEvent(startOfDay(i), endOfDay(i))) &&\n event.length() < 86400000,\n ),\n );\n manager.process();\n this.singleDayEvents[this._getDateOnly(i)] = manager.columns;\n });\n\n const multiManager = new EventManager();\n multiManager.addEvents(\n this.events.filter(\n event =>\n event.isOverlapping(\n new BaseEvent(this.dateRange.startDate, this.dateRange.endDate),\n ) && event.length() >= 86400000,\n ),\n );\n multiManager.process();\n this.multiDayEvents = multiManager.columns;\n }\n\n private _forEachDayInRange(callback: (d: Date) => void) {\n for (\n let i = new Date(this.dateRange.startDate);\n differenceInDays(startOfDay(this.dateRange.endDate), i) >= 0;\n i = addDays(i, 1)\n ) {\n callback(i);\n }\n }\n\n private _getDateOnly(date: Date): string {\n return formatDate(date, 'dd-MM-yyyy');\n }\n\n private _getDatePercent(date: Date): number {\n const currentDay = differenceInDays(\n startOfDay(date),\n this.dateRange.startDate,\n );\n const percent = (currentDay / this.dateRange.totalDays) * 100;\n if (percent < 0) return 0;\n if (percent > 100) return 100;\n return percent;\n }\n\n private _getDayClass(date: Date): string {\n const diff = differenceInDays(startOfDay(date), startOfDay(this.currentTime));\n if (diff === 0) return 'column today';\n if (diff < 0) return 'column past';\n return 'column future';\n }\n\n private _populateColorVars(\n styles: Record<string, string>,\n color: string,\n ) {\n styles['--calendar-event-bg-color'] = `var(--color-${color}-container)`;\n styles['--calendar-event-bg-color--hover'] = `var(--color-inverse-${color})`;\n styles['--calendar-event-border-color'] = `var(--color-${color})`;\n styles['--calendar-event-text-color'] = `var(--color-on-${color}-container)`;\n styles['--calendar-event-text-color--hover'] = `var(--color-on-${color})`;\n }\n\n private _emitDateClick(date: Date) {\n this.dispatchEvent(\n new CustomEvent('column-view-date-click', {\n detail: { date },\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n private _emitEventClick(event: any) {\n this.dispatchEvent(\n new CustomEvent('column-view-event-click', {\n detail: { event },\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n private _renderHeader() {\n const columns: any[] = [];\n this._forEachDayInRange(i => {\n columns.push(html`\n <div class=${this._getDayClass(i)}>\n <div class=\"column-content\">\n <div\n class=\"date\"\n @click=${() => this._emitDateClick(i)}\n >\n ${formatDate(i, 'dd')}\n </div>\n <div class=\"day\">${formatDate(i, 'E')}</div>\n </div>\n </div>\n `);\n });\n return columns;\n }\n\n private _renderMultiDayBackground() {\n const columns: any[] = [];\n this._forEachDayInRange(i => {\n columns.push(html`<div class=${this._getDayClass(i)}></div>`);\n });\n return columns;\n }\n\n private _renderScale() {\n const rows: any[] = [];\n for (let i = 0; i < 48; i++) {\n const cls = i % 2 ? 'row hour' : 'row';\n const sd = startOfDay(new Date());\n rows.push(html`\n <div class=${cls}>\n ${i % 2 === 0 && i\n ? html`<div class=\"time\">${formatDate(addHours(sd, i / 2), 'hh a')}</div>`\n : nothing}\n </div>\n `);\n }\n return html`<div class=\"background\">${rows}</div>`;\n }\n\n private _renderBackgroundGrid() {\n const rows: any[] = [];\n for (let i = 0; i < 48; i++) {\n const cls = i % 2 ? 'row hour' : 'row';\n const columns: any[] = [];\n this._forEachDayInRange(d => {\n columns.push(html`<div class=${this._getDayClass(d)}></div>`);\n });\n rows.push(html`<div class=${cls}>${columns}</div>`);\n }\n return html`<div class=\"background\">${rows}</div>`;\n }\n\n private _renderEvents() {\n const columns: any[] = [];\n this._forEachDayInRange(i => {\n const cls = this._getDayClass(i);\n const eventDay = this.singleDayEvents[this._getDateOnly(i)];\n columns.push(html`\n <div class=${cls}>\n <div class=\"column-content\">\n ${eventDay\n ? eventDay.map((nodes, columnIndex) =>\n nodes.map(node => {\n const evtCls = this.eventClickable\n ? 'event clickable'\n : 'event';\n const evtStyles: Record<string, string> = {\n top: `${getTimePercent(node.start, startOfDay(i))}%`,\n height: `${getTimePercent(node.end, startOfDay(i)) - getTimePercent(node.start, startOfDay(i))}%`,\n left: `${(columnIndex / eventDay.length) * 100}%`,\n width: `calc(${((1 * node.width) / eventDay.length) * 100}% - 1px)`,\n };\n if (node.color) {\n this._populateColorVars(evtStyles, node.color);\n }\n return html`\n <div\n class=${evtCls}\n style=${this._styleMap(evtStyles)}\n @click=${() => {\n if (this.eventClickable) this._emitEventClick(node.data);\n }}\n >\n <div class=\"event-title\">\n ${node.title || '(no title)'}\n </div>\n </div>\n `;\n }),\n )\n : nothing}\n </div>\n </div>\n `);\n });\n return html`<div class=\"events-container\">${columns}</div>`;\n }\n\n private _renderMultiDayEvents() {\n if (!this.multiDayEvents || !this.multiDayEvents.length) return nothing;\n return html`\n <div class=\"row-content\">\n ${this.multiDayEvents.map(\n nodes => html`\n <div class=\"row\">\n ${nodes.map(node => {\n const evtCls = this.eventClickable\n ? 'event clickable'\n : 'event';\n const evtStyles: Record<string, string> = {\n left: `${this._getDatePercent(node.start) + LONG_EVENT_PADDING}%`,\n width: `${this._getDatePercent(addDays(node.end, 1)) - this._getDatePercent(node.start) - 2 * LONG_EVENT_PADDING}%`,\n };\n if (node.color) {\n this._populateColorVars(evtStyles, node.color);\n }\n return html`\n <div\n class=${evtCls}\n style=${this._styleMap(evtStyles)}\n @click=${() => {\n if (this.eventClickable) this._emitEventClick(node.data);\n }}\n >\n <div class=\"event-title\">\n ${node.title || '(no title)'}\n </div>\n </div>\n `;\n })}\n </div>\n `,\n )}\n <div class=\"row-spacer\"></div>\n </div>\n `;\n }\n\n private _renderCurrentTime() {\n if (\n this.currentTime.valueOf() < this.dateRange.startDate?.valueOf() - 1 ||\n this.currentTime.valueOf() > this.dateRange.endDate?.valueOf() + 1\n ) {\n return nothing;\n }\n return html`\n <div\n class=\"current-time-line\"\n style=\"top: calc(${getTimePercent(this.currentTime)}% - 1px)\"\n >\n <div class=\"time\">${formatDate(this.currentTime, 'hh:mm a')}</div>\n <div\n class=\"dash-line\"\n style=\"width: ${this._getDatePercent(this.currentTime)}%\"\n ></div>\n <div\n class=\"dot\"\n style=\"left: calc(${this._getDatePercent(this.currentTime)}% - 0.25rem)\"\n ></div>\n <div\n class=\"line\"\n style=\"left: ${this._getDatePercent(this.currentTime)}%; width: ${(1 / this.dateRange.totalDays) * 100}%\"\n ></div>\n </div>\n `;\n }\n\n private _styleMap(styles: Record<string, string>): string {\n return Object.entries(styles)\n .map(([k, v]) => `${k}:${v}`)\n .join(';');\n }\n\n render() {\n return html`\n <div class=\"calendar-column-view\">\n <div class=\"view-header\">\n <div class=\"scale\"></div>\n <div class=\"columns\">${this._renderHeader()}</div>\n <div class=\"scrollbar-placeholder\"></div>\n </div>\n <div class=\"multi-day-section-wrapper\">\n <div class=\"multi-day-section-scroll\">\n <div class=\"multi-day-section\">\n <div class=\"multi-day-background\">\n <div class=\"scale\"></div>\n <div class=\"columns\">\n ${this._renderMultiDayBackground()}\n </div>\n </div>\n <div class=\"multi-events\">\n ${this._renderMultiDayEvents()}\n </div>\n </div>\n </div>\n </div>\n <div class=\"view-body\">\n <div class=\"view-body-scroll\">\n <div class=\"scale\">${this._renderScale()}</div>\n <div class=\"drawing-area\">\n ${this._renderBackgroundGrid()} ${this._renderEvents()}\n </div>\n ${this._renderCurrentTime()}\n </div>\n </div>\n </div>\n `;\n }\n}\n"],"names":["LitElement","html","nothing","styles","property","state"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBA;;;;;AAKG;AAEI,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQA,GAAU,CAAA;AAA3C,IAAA,WAAA,GAAA;;QAIL,IAAA,CAAA,MAAM,GAAoB,EAAE;QAG5B,IAAA,CAAA,IAAI,GAAW,MAAM;QAGrB,IAAA,CAAA,IAAI,GAAW,CAAC;QAGhB,IAAA,CAAA,cAAc,GAAY,IAAI;AAG9B,QAAA,IAAA,CAAA,WAAW,GAAS,IAAI,IAAI,EAAE;AAG9B,QAAA,IAAA,CAAA,WAAW,GAAS,IAAI,IAAI,EAAE;QAGtB,IAAA,CAAA,SAAS,GAAQ,EAAE;QAGnB,IAAA,CAAA,eAAe,GAAoC,EAAE;QAGrD,IAAA,CAAA,cAAc,GAAoB,EAAE;IA+U9C;IA7UW,iBAAiB,GAAA;QACxB,KAAK,CAAC,iBAAiB,EAAE;QACzB,IAAI,CAAC,cAAc,EAAE;IACvB;AAES,IAAA,UAAU,CAAC,iBAAuC,EAAA;AACzD,QAAA,IACE,iBAAiB,CAAC,GAAG,CAAC,QAAQ,CAAC;AAC/B,YAAA,iBAAiB,CAAC,GAAG,CAAC,aAAa,CAAC;AACpC,YAAA,iBAAiB,CAAC,GAAG,CAAC,MAAM,CAAC;AAC7B,YAAA,iBAAiB,CAAC,GAAG,CAAC,MAAM,CAAC,EAC7B;YACA,IAAI,CAAC,cAAc,EAAE;QACvB;IACF;IAES,YAAY,GAAA;QACnB,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,YAAY,CAAC;QAC5D,IAAI,QAAQ,EAAE;AACZ,YAAA,MAAM,cAAc,GAAG,QAAQ,CAAC,YAAY;YAC5C,QAAQ,CAAC,QAAQ,CAAC;AAChB,gBAAA,GAAG,EACD,CAAC,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,GAAG,IAAI,cAAc,GAAG,GAAG;AAClE,aAAA,CAAC;QACJ;IACF;IAEQ,cAAc,GAAA;AACpB,QAAA,IAAI,CAAC,SAAS,GAAG,kBAAkB,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,IAAI,CAAC;AAC3E,QAAA,IAAI,CAAC,eAAe,GAAG,EAAE;AAEzB,QAAA,IAAI,CAAC,kBAAkB,CAAC,CAAC,IAAG;AAC1B,YAAA,MAAM,OAAO,GAAG,IAAI,YAAY,EAAE;AAClC,YAAA,OAAO,CAAC,SAAS,CACf,IAAI,CAAC,MAAM,CAAC,MAAM,CAChB,KAAK,IACH,KAAK,CAAC,aAAa,CAAC,IAAI,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;AAC9D,gBAAA,KAAK,CAAC,MAAM,EAAE,GAAG,QAAQ,CAC5B,CACF;YACD,OAAO,CAAC,OAAO,EAAE;AACjB,YAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC,OAAO;AAC9D,QAAA,CAAC,CAAC;AAEF,QAAA,MAAM,YAAY,GAAG,IAAI,YAAY,EAAE;AACvC,QAAA,YAAY,CAAC,SAAS,CACpB,IAAI,CAAC,MAAM,CAAC,MAAM,CAChB,KAAK,IACH,KAAK,CAAC,aAAa,CACjB,IAAI,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAChE,IAAI,KAAK,CAAC,MAAM,EAAE,IAAI,QAAQ,CAClC,CACF;QACD,YAAY,CAAC,OAAO,EAAE;AACtB,QAAA,IAAI,CAAC,cAAc,GAAG,YAAY,CAAC,OAAO;IAC5C;AAEQ,IAAA,kBAAkB,CAAC,QAA2B,EAAA;AACpD,QAAA,KACE,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,EAC1C,gBAAgB,CAAC,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,EAC5D,CAAC,GAAG,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC,EACjB;YACA,QAAQ,CAAC,CAAC,CAAC;QACb;IACF;AAEQ,IAAA,YAAY,CAAC,IAAU,EAAA;AAC7B,QAAA,OAAO,UAAU,CAAC,IAAI,EAAE,YAAY,CAAC;IACvC;AAEQ,IAAA,eAAe,CAAC,IAAU,EAAA;AAChC,QAAA,MAAM,UAAU,GAAG,gBAAgB,CACjC,UAAU,CAAC,IAAI,CAAC,EAChB,IAAI,CAAC,SAAS,CAAC,SAAS,CACzB;AACD,QAAA,MAAM,OAAO,GAAG,CAAC,UAAU,GAAG,IAAI,CAAC,SAAS,CAAC,SAAS,IAAI,GAAG;QAC7D,IAAI,OAAO,GAAG,CAAC;AAAE,YAAA,OAAO,CAAC;QACzB,IAAI,OAAO,GAAG,GAAG;AAAE,YAAA,OAAO,GAAG;AAC7B,QAAA,OAAO,OAAO;IAChB;AAEQ,IAAA,YAAY,CAAC,IAAU,EAAA;AAC7B,QAAA,MAAM,IAAI,GAAG,gBAAgB,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAC7E,IAAI,IAAI,KAAK,CAAC;AAAE,YAAA,OAAO,cAAc;QACrC,IAAI,IAAI,GAAG,CAAC;AAAE,YAAA,OAAO,aAAa;AAClC,QAAA,OAAO,eAAe;IACxB;IAEQ,kBAAkB,CACxB,MAA8B,EAC9B,KAAa,EAAA;AAEb,QAAA,MAAM,CAAC,2BAA2B,CAAC,GAAG,CAAA,YAAA,EAAe,KAAK,aAAa;AACvE,QAAA,MAAM,CAAC,kCAAkC,CAAC,GAAG,CAAA,oBAAA,EAAuB,KAAK,GAAG;AAC5E,QAAA,MAAM,CAAC,+BAA+B,CAAC,GAAG,CAAA,YAAA,EAAe,KAAK,GAAG;AACjE,QAAA,MAAM,CAAC,6BAA6B,CAAC,GAAG,CAAA,eAAA,EAAkB,KAAK,aAAa;AAC5E,QAAA,MAAM,CAAC,oCAAoC,CAAC,GAAG,CAAA,eAAA,EAAkB,KAAK,GAAG;IAC3E;AAEQ,IAAA,cAAc,CAAC,IAAU,EAAA;AAC/B,QAAA,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,wBAAwB,EAAE;YACxC,MAAM,EAAE,EAAE,IAAI,EAAE;AAChB,YAAA,OAAO,EAAE,IAAI;AACb,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA,CAAC,CACH;IACH;AAEQ,IAAA,eAAe,CAAC,KAAU,EAAA;AAChC,QAAA,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,yBAAyB,EAAE;YACzC,MAAM,EAAE,EAAE,KAAK,EAAE;AACjB,YAAA,OAAO,EAAE,IAAI;AACb,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA,CAAC,CACH;IACH;IAEQ,aAAa,GAAA;QACnB,MAAM,OAAO,GAAU,EAAE;AACzB,QAAA,IAAI,CAAC,kBAAkB,CAAC,CAAC,IAAG;AAC1B,YAAA,OAAO,CAAC,IAAI,CAACC,CAAI,CAAA;AACF,mBAAA,EAAA,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAA;;;;AAIlB,qBAAA,EAAA,MAAM,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC;;AAEnC,cAAA,EAAA,UAAU,CAAC,CAAC,EAAE,IAAI,CAAC;;AAEJ,6BAAA,EAAA,UAAU,CAAC,CAAC,EAAE,GAAG,CAAC,CAAA;;;AAG1C,MAAA,CAAA,CAAC;AACJ,QAAA,CAAC,CAAC;AACF,QAAA,OAAO,OAAO;IAChB;IAEQ,yBAAyB,GAAA;QAC/B,MAAM,OAAO,GAAU,EAAE;AACzB,QAAA,IAAI,CAAC,kBAAkB,CAAC,CAAC,IAAG;AAC1B,YAAA,OAAO,CAAC,IAAI,CAACA,CAAI,CAAA,CAAA,WAAA,EAAc,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAA,OAAA,CAAS,CAAC;AAC/D,QAAA,CAAC,CAAC;AACF,QAAA,OAAO,OAAO;IAChB;IAEQ,YAAY,GAAA;QAClB,MAAM,IAAI,GAAU,EAAE;AACtB,QAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,EAAE,EAAE;AAC3B,YAAA,MAAM,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,UAAU,GAAG,KAAK;YACtC,MAAM,EAAE,GAAG,UAAU,CAAC,IAAI,IAAI,EAAE,CAAC;AACjC,YAAA,IAAI,CAAC,IAAI,CAACA,CAAI,CAAA;qBACC,GAAG,CAAA;AACZ,UAAA,EAAA,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI;AACf,kBAAEA,CAAI,CAAA,CAAA,kBAAA,EAAqB,UAAU,CAAC,QAAQ,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC,CAAA,MAAA;AAClE,kBAAEC,CAAO;;AAEd,MAAA,CAAA,CAAC;QACJ;AACA,QAAA,OAAOD,CAAI,CAAA,CAAA,wBAAA,EAA2B,IAAI,QAAQ;IACpD;IAEQ,qBAAqB,GAAA;QAC3B,MAAM,IAAI,GAAU,EAAE;AACtB,QAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,EAAE,EAAE;AAC3B,YAAA,MAAM,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,UAAU,GAAG,KAAK;YACtC,MAAM,OAAO,GAAU,EAAE;AACzB,YAAA,IAAI,CAAC,kBAAkB,CAAC,CAAC,IAAG;AAC1B,gBAAA,OAAO,CAAC,IAAI,CAACA,CAAI,CAAA,CAAA,WAAA,EAAc,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAA,OAAA,CAAS,CAAC;AAC/D,YAAA,CAAC,CAAC;YACF,IAAI,CAAC,IAAI,CAACA,CAAI,CAAA,CAAA,WAAA,EAAc,GAAG,CAAA,CAAA,EAAI,OAAO,CAAA,MAAA,CAAQ,CAAC;QACrD;AACA,QAAA,OAAOA,CAAI,CAAA,CAAA,wBAAA,EAA2B,IAAI,QAAQ;IACpD;IAEQ,aAAa,GAAA;QACnB,MAAM,OAAO,GAAU,EAAE;AACzB,QAAA,IAAI,CAAC,kBAAkB,CAAC,CAAC,IAAG;YAC1B,MAAM,GAAG,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;AAChC,YAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;AAC3D,YAAA,OAAO,CAAC,IAAI,CAACA,CAAI,CAAA;qBACF,GAAG,CAAA;;cAEV;AACA,kBAAE,QAAQ,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,WAAW,KAC9B,KAAK,CAAC,GAAG,CAAC,IAAI,IAAG;AACf,oBAAA,MAAM,MAAM,GAAG,IAAI,CAAC;AAClB,0BAAE;0BACA,OAAO;AACX,oBAAA,MAAM,SAAS,GAA2B;AACxC,wBAAA,GAAG,EAAE,CAAA,EAAG,cAAc,CAAC,IAAI,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAA,CAAA,CAAG;wBACpD,MAAM,EAAE,CAAA,EAAG,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,GAAG,cAAc,CAAC,IAAI,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAA,CAAA,CAAG;wBACjG,IAAI,EAAE,CAAA,EAAG,CAAC,WAAW,GAAG,QAAQ,CAAC,MAAM,IAAI,GAAG,CAAA,CAAA,CAAG;AACjD,wBAAA,KAAK,EAAE,CAAA,KAAA,EAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,IAAI,QAAQ,CAAC,MAAM,IAAI,GAAG,CAAA,QAAA,CAAU;qBACpE;AACD,oBAAA,IAAI,IAAI,CAAC,KAAK,EAAE;wBACd,IAAI,CAAC,kBAAkB,CAAC,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC;oBAChD;AACA,oBAAA,OAAOA,CAAI,CAAA;;gCAEC,MAAM;AACN,8BAAA,EAAA,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC;AACxB,+BAAA,EAAA,MAAK;wBACZ,IAAI,IAAI,CAAC,cAAc;AAAE,4BAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC;oBAC1D,CAAC;;;4BAGG,IAAI,CAAC,KAAK,IAAI,YAAY;;;qBAGjC;AACH,gBAAA,CAAC,CAAC;AAEN,kBAAEC,CAAO;;;AAGhB,MAAA,CAAA,CAAC;AACJ,QAAA,CAAC,CAAC;AACF,QAAA,OAAOD,CAAI,CAAA,CAAA,8BAAA,EAAiC,OAAO,QAAQ;IAC7D;IAEQ,qBAAqB,GAAA;QAC3B,IAAI,CAAC,IAAI,CAAC,cAAc,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,MAAM;AAAE,YAAA,OAAOC,CAAO;AACvE,QAAA,OAAOD,CAAI,CAAA;;UAEL,IAAI,CAAC,cAAc,CAAC,GAAG,CACvB,KAAK,IAAIA,CAAI,CAAA;;AAEP,cAAA,EAAA,KAAK,CAAC,GAAG,CAAC,IAAI,IAAG;AACjB,YAAA,MAAM,MAAM,GAAG,IAAI,CAAC;AAClB,kBAAE;kBACA,OAAO;AACX,YAAA,MAAM,SAAS,GAA2B;AACxC,gBAAA,IAAI,EAAE,CAAA,EAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,kBAAkB,CAAA,CAAA,CAAG;AACjE,gBAAA,KAAK,EAAE,CAAA,EAAG,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,kBAAkB,CAAA,CAAA,CAAG;aACpH;AACD,YAAA,IAAI,IAAI,CAAC,KAAK,EAAE;gBACd,IAAI,CAAC,kBAAkB,CAAC,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC;YAChD;AACA,YAAA,OAAOA,CAAI,CAAA;;4BAEC,MAAM;AACN,0BAAA,EAAA,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC;AACxB,2BAAA,EAAA,MAAK;gBACZ,IAAI,IAAI,CAAC,cAAc;AAAE,oBAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC;YAC1D,CAAC;;;wBAGG,IAAI,CAAC,KAAK,IAAI,YAAY;;;iBAGjC;AACH,QAAA,CAAC,CAAC;;WAEL,CACF;;;KAGJ;IACH;IAEQ,kBAAkB,GAAA;AACxB,QAAA,IACE,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,OAAO,EAAE,GAAG,CAAC;AACpE,YAAA,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,OAAO,EAAE,GAAG,CAAC,EAClE;AACA,YAAA,OAAOC,CAAO;QAChB;AACA,QAAA,OAAOD,CAAI,CAAA;;;AAGY,yBAAA,EAAA,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA;;AAE/B,0BAAA,EAAA,UAAU,CAAC,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,CAAA;;;AAGzC,wBAAA,EAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA;;;;AAIlC,4BAAA,EAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA;;;;AAI3C,uBAAA,EAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA,UAAA,EAAa,CAAC,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC,SAAS,IAAI,GAAG,CAAA;;;KAG3G;IACH;AAEQ,IAAA,SAAS,CAAC,MAA8B,EAAA;AAC9C,QAAA,OAAO,MAAM,CAAC,OAAO,CAAC,MAAM;AACzB,aAAA,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,CAAA,EAAG,CAAC,CAAA,CAAA,EAAI,CAAC,EAAE;aAC3B,IAAI,CAAC,GAAG,CAAC;IACd;IAEA,MAAM,GAAA;AACJ,QAAA,OAAOA,CAAI,CAAA;;;;iCAIkB,IAAI,CAAC,aAAa,EAAE,CAAA;;;;;;;;;oBASjC,IAAI,CAAC,yBAAyB,EAAE;;;;kBAIlC,IAAI,CAAC,qBAAqB,EAAE;;;;;;;iCAOb,IAAI,CAAC,YAAY,EAAE,CAAA;;AAEpC,cAAA,EAAA,IAAI,CAAC,qBAAqB,EAAE,IAAI,IAAI,CAAC,aAAa,EAAE;;cAEtD,IAAI,CAAC,kBAAkB,EAAE;;;;KAIlC;IACH;;AAzWO,kBAAA,CAAA,MAAM,GAAG,CAACE,QAAM,CAAC;AAGxB,UAAA,CAAA;AADC,IAAAC,CAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE;AACI,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,QAAA,EAAA,MAAA,CAAA;AAG7B,UAAA,CAAA;AADC,IAAAA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE;AACJ,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,MAAA,EAAA,MAAA,CAAA;AAGtB,UAAA,CAAA;AADC,IAAAA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE;AACT,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,MAAA,EAAA,MAAA,CAAA;AAGjB,UAAA,CAAA;IADCA,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE;AAC1B,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,gBAAA,EAAA,MAAA,CAAA;AAG/B,UAAA,CAAA;IADCA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE;AACb,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,aAAA,EAAA,MAAA,CAAA;AAG/B,UAAA,CAAA;IADCA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE;AACb,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,aAAA,EAAA,MAAA,CAAA;AAGvB,UAAA,CAAA;AADP,IAAAC,CAAK;AACsB,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,WAAA,EAAA,MAAA,CAAA;AAGpB,UAAA,CAAA;AADP,IAAAA,CAAK;AACwD,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,iBAAA,EAAA,MAAA,CAAA;AAGtD,UAAA,CAAA;AADP,IAAAA,CAAK;AACuC,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,gBAAA,EAAA,MAAA,CAAA;AA5BlC,kBAAkB,GAAA,UAAA,CAAA;IAD9B;AACY,CAAA,EAAA,kBAAkB,CA2W9B;;;;"}
|
|
1
|
+
{"version":3,"file":"calendar-column-view.js","sources":["../../src/calendar/calendar-column-view.ts"],"sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport {\n addDays,\n addHours,\n differenceInDays,\n startOfDay,\n endOfDay,\n calculateDateRange,\n formatDate,\n getTimePercent,\n LONG_EVENT_PADDING,\n} from './utils.js';\nimport { BaseEvent } from './base-event.js';\nimport { CalendarEvent } from './calendar-event.js';\nimport { EventManager } from './event-manager.js';\nimport type { ColumnEvent } from './event-manager.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport styles from './calendar-column-view.scss';\n\n/**\n * @label Calendar Column View\n * @tag wc-calendar-column-view\n * @rawTag calendar-column-view\n * @summary Internal column view component for the calendar (day/week views).\n */\n@IndividualComponent\nexport class CalendarColumnView extends LitElement {\n static styles = [styles];\n\n @property({ type: Array })\n events: CalendarEvent[] = [];\n\n @property({ type: String })\n view: string = 'week';\n\n @property({ type: Number })\n days: number = 7;\n\n @property({ type: Boolean, attribute: 'event-clickable' })\n eventClickable: boolean = true;\n\n @property({ type: Object, attribute: false })\n currentTime: Date = new Date();\n\n @property({ type: Object, attribute: false })\n contextDate: Date = new Date();\n\n @state()\n private dateRange: any = {};\n\n @state()\n private singleDayEvents: Record<string, ColumnEvent[][]> = {};\n\n @state()\n private multiDayEvents: ColumnEvent[][] = [];\n\n override connectedCallback() {\n super.connectedCallback();\n this._processEvents();\n }\n\n override willUpdate(changedProperties: Map<string, unknown>) {\n if (\n changedProperties.has('events') ||\n changedProperties.has('contextDate') ||\n changedProperties.has('view') ||\n changedProperties.has('days')\n ) {\n this._processEvents();\n }\n }\n\n override firstUpdated() {\n const viewBody = this.renderRoot.querySelector('.view-body');\n if (viewBody) {\n const viewBodyHeight = viewBody.scrollHeight;\n viewBody.scrollTo({\n top:\n (getTimePercent(this.currentTime) / 100) * viewBodyHeight - 150,\n });\n }\n }\n\n private _processEvents() {\n this.dateRange = calculateDateRange(this.view, this.contextDate, this.days);\n this.singleDayEvents = {};\n\n this._forEachDayInRange(i => {\n const manager = new EventManager();\n manager.addEvents(\n this.events.filter(\n event =>\n event.isOverlapping(new BaseEvent(startOfDay(i), endOfDay(i))) &&\n event.length() < 86400000,\n ),\n );\n manager.process();\n this.singleDayEvents[this._getDateOnly(i)] = manager.columns;\n });\n\n const multiManager = new EventManager();\n multiManager.addEvents(\n this.events.filter(\n event =>\n event.isOverlapping(\n new BaseEvent(this.dateRange.startDate, this.dateRange.endDate),\n ) && event.length() >= 86400000,\n ),\n );\n multiManager.process();\n this.multiDayEvents = multiManager.columns;\n }\n\n private _forEachDayInRange(callback: (d: Date) => void) {\n for (\n let i = new Date(this.dateRange.startDate);\n differenceInDays(startOfDay(this.dateRange.endDate), i) >= 0;\n i = addDays(i, 1)\n ) {\n callback(i);\n }\n }\n\n private _getDateOnly(date: Date): string {\n return formatDate(date, 'dd-MM-yyyy');\n }\n\n private _getDatePercent(date: Date): number {\n const currentDay = differenceInDays(\n startOfDay(date),\n this.dateRange.startDate,\n );\n const percent = (currentDay / this.dateRange.totalDays) * 100;\n if (percent < 0) return 0;\n if (percent > 100) return 100;\n return percent;\n }\n\n private _getDayClass(date: Date): string {\n const diff = differenceInDays(startOfDay(date), startOfDay(this.currentTime));\n if (diff === 0) return 'column today';\n if (diff < 0) return 'column past';\n return 'column future';\n }\n\n private _populateColorVars(\n styles: Record<string, string>,\n color: string,\n ) {\n styles['--calendar-event-bg-color'] = `var(--color-${color}-container)`;\n styles['--calendar-event-bg-color--hover'] = `var(--color-inverse-${color})`;\n styles['--calendar-event-border-color'] = `var(--color-${color})`;\n styles['--calendar-event-text-color'] = `var(--color-on-${color}-container)`;\n styles['--calendar-event-text-color--hover'] = `var(--color-on-${color})`;\n }\n\n private _emitDateClick(date: Date) {\n this.dispatchEvent(\n new CustomEvent('column-view-date-click', {\n detail: { date },\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n private _emitEventClick(event: any) {\n this.dispatchEvent(\n new CustomEvent('column-view-event-click', {\n detail: { event },\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n private _renderHeader() {\n const columns: any[] = [];\n this._forEachDayInRange(i => {\n columns.push(html`\n <div class=${this._getDayClass(i)}>\n <div class=\"column-content\">\n <div\n class=\"date\"\n @click=${() => this._emitDateClick(i)}\n >\n ${formatDate(i, 'dd')}\n </div>\n <div class=\"day\">${formatDate(i, 'E')}</div>\n </div>\n </div>\n `);\n });\n return columns;\n }\n\n private _renderMultiDayBackground() {\n const columns: any[] = [];\n this._forEachDayInRange(i => {\n columns.push(html`<div class=${this._getDayClass(i)}></div>`);\n });\n return columns;\n }\n\n private _renderScale() {\n const rows: any[] = [];\n for (let i = 0; i < 48; i++) {\n const cls = i % 2 ? 'row hour' : 'row';\n const sd = startOfDay(new Date());\n rows.push(html`\n <div class=${cls}>\n ${i % 2 === 0 && i\n ? html`<div class=\"time\">${formatDate(addHours(sd, i / 2), 'hh a')}</div>`\n : nothing}\n </div>\n `);\n }\n return html`<div class=\"background\">${rows}</div>`;\n }\n\n private _renderBackgroundGrid() {\n const rows: any[] = [];\n for (let i = 0; i < 48; i++) {\n const cls = i % 2 ? 'row hour' : 'row';\n const columns: any[] = [];\n this._forEachDayInRange(d => {\n columns.push(html`<div class=${this._getDayClass(d)}></div>`);\n });\n rows.push(html`<div class=${cls}>${columns}</div>`);\n }\n return html`<div class=\"background\">${rows}</div>`;\n }\n\n private _renderEvents() {\n const columns: any[] = [];\n this._forEachDayInRange(i => {\n const cls = this._getDayClass(i);\n const eventDay = this.singleDayEvents[this._getDateOnly(i)];\n columns.push(html`\n <div class=${cls}>\n <div class=\"column-content\">\n ${eventDay\n ? eventDay.map((nodes, columnIndex) =>\n nodes.map(node => {\n const evtCls = this.eventClickable\n ? 'event clickable'\n : 'event';\n const evtStyles: Record<string, string> = {\n top: `${getTimePercent(node.start, startOfDay(i))}%`,\n height: `${getTimePercent(node.end, startOfDay(i)) - getTimePercent(node.start, startOfDay(i))}%`,\n left: `${(columnIndex / eventDay.length) * 100}%`,\n width: `calc(${((1 * node.width) / eventDay.length) * 100}% - 1px)`,\n };\n if (node.color) {\n this._populateColorVars(evtStyles, node.color);\n }\n return html`\n <div\n class=${evtCls}\n style=${this._styleMap(evtStyles)}\n @click=${() => {\n if (this.eventClickable) this._emitEventClick(node.data);\n }}\n >\n <div class=\"event-title\">\n ${node.title || '(no title)'}\n </div>\n </div>\n `;\n }),\n )\n : nothing}\n </div>\n </div>\n `);\n });\n return html`<div class=\"events-container\">${columns}</div>`;\n }\n\n private _renderMultiDayEvents() {\n if (!this.multiDayEvents || !this.multiDayEvents.length) return nothing;\n return html`\n <div class=\"row-content\">\n ${this.multiDayEvents.map(\n nodes => html`\n <div class=\"row\">\n ${nodes.map(node => {\n const evtCls = this.eventClickable\n ? 'event clickable'\n : 'event';\n const evtStyles: Record<string, string> = {\n left: `${this._getDatePercent(node.start) + LONG_EVENT_PADDING}%`,\n width: `${this._getDatePercent(addDays(node.end, 1)) - this._getDatePercent(node.start) - 2 * LONG_EVENT_PADDING}%`,\n };\n if (node.color) {\n this._populateColorVars(evtStyles, node.color);\n }\n return html`\n <div\n class=${evtCls}\n style=${this._styleMap(evtStyles)}\n @click=${() => {\n if (this.eventClickable) this._emitEventClick(node.data);\n }}\n >\n <div class=\"event-title\">\n ${node.title || '(no title)'}\n </div>\n </div>\n `;\n })}\n </div>\n `,\n )}\n <div class=\"row-spacer\"></div>\n </div>\n `;\n }\n\n private _renderCurrentTime() {\n if (\n this.currentTime.valueOf() < this.dateRange.startDate?.valueOf() - 1 ||\n this.currentTime.valueOf() > this.dateRange.endDate?.valueOf() + 1\n ) {\n return nothing;\n }\n return html`\n <div\n class=\"current-time-line\"\n style=\"top: calc(${getTimePercent(this.currentTime)}% - 1px)\"\n >\n <div class=\"time\">${formatDate(this.currentTime, 'hh:mm a')}</div>\n <div\n class=\"dash-line\"\n style=\"width: ${this._getDatePercent(this.currentTime)}%\"\n ></div>\n <div\n class=\"dot\"\n style=\"left: calc(${this._getDatePercent(this.currentTime)}% - 0.25rem)\"\n ></div>\n <div\n class=\"line\"\n style=\"left: ${this._getDatePercent(this.currentTime)}%; width: ${(1 / this.dateRange.totalDays) * 100}%\"\n ></div>\n </div>\n `;\n }\n\n private _styleMap(styles: Record<string, string>): string {\n return Object.entries(styles)\n .map(([k, v]) => `${k}:${v}`)\n .join(';');\n }\n\n render() {\n return html`\n <div class=\"calendar-column-view\">\n <div class=\"view-header\">\n <div class=\"scale\"></div>\n <div class=\"columns\">${this._renderHeader()}</div>\n <div class=\"scrollbar-placeholder\"></div>\n </div>\n <div class=\"multi-day-section-wrapper\">\n <div class=\"multi-day-section-scroll\">\n <div class=\"multi-day-section\">\n <div class=\"multi-day-background\">\n <div class=\"scale\"></div>\n <div class=\"columns\">\n ${this._renderMultiDayBackground()}\n </div>\n </div>\n <div class=\"multi-events\">\n ${this._renderMultiDayEvents()}\n </div>\n </div>\n </div>\n </div>\n <div class=\"view-body\">\n <div class=\"view-body-scroll\">\n <div class=\"scale\">${this._renderScale()}</div>\n <div class=\"drawing-area\">\n ${this._renderBackgroundGrid()} ${this._renderEvents()}\n </div>\n ${this._renderCurrentTime()}\n </div>\n </div>\n </div>\n `;\n }\n}\n"],"names":["LitElement","html","nothing","styles","property","state"],"mappings":"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"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { n } from './property-
|
|
3
|
-
import { r } from './state-
|
|
1
|
+
import { i, _ as __decorate, I as IndividualComponent, a as i$1, b } from './IndividualComponent-Bdwyrvd6.js';
|
|
2
|
+
import { n } from './property-B49QQ8pS.js';
|
|
3
|
+
import { r } from './state-DkTK9EGF.js';
|
|
4
4
|
import { g as getTimePercent, i as calculateMonthRange, a as addDays, B as BaseEvent, s as startOfDay, e as endOfDay, d as differenceInDays, f as formatDate, L as LONG_EVENT_PADDING } from './calendar-event-BrQ_SEKD.js';
|
|
5
|
-
import { M as MonthEventManager } from './event-manager-
|
|
5
|
+
import { M as MonthEventManager } from './event-manager-DTyX2uYD.js';
|
|
6
6
|
|
|
7
7
|
var css_248z = i`@charset "UTF-8";
|
|
8
8
|
* {
|
|
@@ -13,6 +13,10 @@ var css_248z = i`@charset "UTF-8";
|
|
|
13
13
|
display: none !important;
|
|
14
14
|
}
|
|
15
15
|
|
|
16
|
+
[hidden] {
|
|
17
|
+
display: none !important;
|
|
18
|
+
}
|
|
19
|
+
|
|
16
20
|
:host {
|
|
17
21
|
display: block;
|
|
18
22
|
height: 100%;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"calendar-month-view.js","sources":["../../src/calendar/calendar-month-view.ts"],"sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport {\n addDays,\n differenceInDays,\n startOfDay,\n endOfDay,\n calculateMonthRange,\n formatDate,\n getTimePercent,\n LONG_EVENT_PADDING,\n} from './utils.js';\nimport { BaseEvent } from './base-event.js';\nimport { CalendarEvent } from './calendar-event.js';\nimport { MonthEventManager } from './event-manager.js';\nimport type { ColumnEvent } from './event-manager.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport styles from './calendar-month-view.scss';\n\n/**\n * @label Calendar Month View\n * @tag wc-calendar-month-view\n * @rawTag calendar-month-view\n * @summary Internal month view component for the calendar.\n */\n@IndividualComponent\nexport class CalendarMonthView extends LitElement {\n static styles = [styles];\n\n @property({ type: Array })\n events: CalendarEvent[] = [];\n\n @property({ type: Boolean, attribute: 'event-clickable' })\n eventClickable: boolean = true;\n\n @property({ type: Object, attribute: false })\n currentTime: Date = new Date();\n\n @property({ type: Object, attribute: false })\n contextDate: Date = new Date();\n\n @state()\n private dateRange: any = {};\n\n @state()\n private weekDayEvents: ColumnEvent[][][] = [];\n\n override connectedCallback() {\n super.connectedCallback();\n this._processEvents();\n }\n\n override willUpdate(changedProperties: Map<string, unknown>) {\n if (\n changedProperties.has('events') ||\n changedProperties.has('contextDate')\n ) {\n this._processEvents();\n }\n }\n\n override firstUpdated() {\n const viewBody = this.renderRoot.querySelector('.view-body');\n if (viewBody) {\n const viewBodyHeight = viewBody.scrollHeight;\n viewBody.scrollTo({\n top:\n (getTimePercent(this.currentTime) / 100) * viewBodyHeight - 150,\n });\n }\n }\n\n private _processEvents() {\n this.dateRange = calculateMonthRange(this.contextDate, 1);\n this.weekDayEvents = [];\n\n for (\n let i = new Date(this.dateRange.startDate), j = 0;\n j < 6;\n i = addDays(i, 7), j++\n ) {\n const manager = new MonthEventManager();\n manager.addEvents(\n this.events.filter(event =>\n event.isOverlapping(\n new BaseEvent(startOfDay(i), endOfDay(addDays(i, 6))),\n ),\n ),\n );\n manager.process();\n this.weekDayEvents.push(manager.columns);\n }\n }\n\n private _getDatePercent(date: Date, dateRangeStartDate: Date): number {\n const currentDay = differenceInDays(startOfDay(date), dateRangeStartDate);\n const percent = (currentDay / 7) * 100;\n if (percent < 0) return 0;\n if (percent > 100) return 100;\n return percent;\n }\n\n private _getDayClass(date: Date): string {\n const diff = differenceInDays(\n startOfDay(date),\n startOfDay(this.currentTime),\n );\n if (diff === 0) return 'column today';\n if (diff < 0) return 'column past';\n return 'column future';\n }\n\n private _populateColorVars(\n styles: Record<string, string>,\n color: string,\n ) {\n styles['--calendar-event-bg-color'] = `var(--color-${color}-container)`;\n styles['--calendar-event-bg-color--hover'] = `var(--color-inverse-${color})`;\n styles['--calendar-event-border-color'] = `var(--color-${color})`;\n styles['--calendar-event-text-color'] = `var(--color-on-${color}-container)`;\n styles['--calendar-event-text-color--hover'] = `var(--color-on-${color})`;\n }\n\n private _emitEventClick(event: any) {\n this.dispatchEvent(\n new CustomEvent('month-view-event-click', {\n detail: { event },\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n private _renderHeader() {\n const columns: any[] = [];\n for (\n let i = new Date(this.dateRange.startDate), j = 0;\n j < 7;\n i = addDays(i, 1), j++\n ) {\n columns.push(html`\n <div class=\"column\">\n <div class=\"column-content\">\n <div class=\"day\">${formatDate(i, 'EEEE')}</div>\n </div>\n </div>\n `);\n }\n return columns;\n }\n\n private _renderMultiDayBackground(sd: Date) {\n const columns: any[] = [];\n for (let i = new Date(sd), j = 0; j < 7; i = addDays(i, 1), j++) {\n columns.push(html`\n <div class=${this._getDayClass(i)}>\n <div class=\"column-content\">\n <div class=\"column-header\">\n <div class=\"day\">${formatDate(i, 'd')}</div>\n </div>\n </div>\n </div>\n `);\n }\n return columns;\n }\n\n private _renderEvents() {\n return this.weekDayEvents.map((eventDay, index) => {\n const weekStartDate = addDays(this.dateRange.startDate, index * 7);\n return html`\n <div class=\"multi-day-section\">\n <div class=\"multi-day-body-scroll\">\n <div class=\"multi-day-background\">\n <div class=\"columns\">\n ${this._renderMultiDayBackground(weekStartDate)}\n </div>\n </div>\n <div class=\"multi-events\">\n <div class=\"row-content\">\n ${eventDay.map(\n nodes => html`\n <div class=\"row\">\n ${nodes.map(node => {\n const evtCls = this.eventClickable\n ? 'event clickable'\n : 'event';\n const evtStyles: Record<string, string> = {\n left: `${this._getDatePercent(node.start, weekStartDate) + LONG_EVENT_PADDING}%`,\n width: `${this._getDatePercent(addDays(node.end, 1), weekStartDate) - this._getDatePercent(node.start, weekStartDate) - 2 * LONG_EVENT_PADDING}%`,\n };\n if (node.color) {\n this._populateColorVars(evtStyles, node.color);\n }\n return html`\n <div\n class=${evtCls}\n style=${this._styleMap(evtStyles)}\n @click=${() => {\n if (this.eventClickable)\n this._emitEventClick(node.data);\n }}\n >\n <div class=\"event-title\">\n ${node.title || '(no title)'}\n </div>\n </div>\n `;\n })}\n </div>\n `,\n )}\n <div class=\"row-spacer\"></div>\n </div>\n </div>\n </div>\n </div>\n `;\n });\n }\n\n private _styleMap(styles: Record<string, string>): string {\n return Object.entries(styles)\n .map(([k, v]) => `${k}:${v}`)\n .join(';');\n }\n\n render() {\n return html`\n <div class=\"calendar-month-view\">\n <div class=\"view-header\">\n <div class=\"columns\">${this._renderHeader()}</div>\n <div class=\"scrollbar-placeholder\"></div>\n </div>\n <div class=\"view-body\">\n <div class=\"view-body-scroll\">\n <div class=\"drawing-area\">${this._renderEvents()}</div>\n </div>\n </div>\n </div>\n `;\n }\n}\n"],"names":["LitElement","html","styles","property","state"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"calendar-month-view.js","sources":["../../src/calendar/calendar-month-view.ts"],"sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport {\n addDays,\n differenceInDays,\n startOfDay,\n endOfDay,\n calculateMonthRange,\n formatDate,\n getTimePercent,\n LONG_EVENT_PADDING,\n} from './utils.js';\nimport { BaseEvent } from './base-event.js';\nimport { CalendarEvent } from './calendar-event.js';\nimport { MonthEventManager } from './event-manager.js';\nimport type { ColumnEvent } from './event-manager.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport styles from './calendar-month-view.scss';\n\n/**\n * @label Calendar Month View\n * @tag wc-calendar-month-view\n * @rawTag calendar-month-view\n * @summary Internal month view component for the calendar.\n */\n@IndividualComponent\nexport class CalendarMonthView extends LitElement {\n static styles = [styles];\n\n @property({ type: Array })\n events: CalendarEvent[] = [];\n\n @property({ type: Boolean, attribute: 'event-clickable' })\n eventClickable: boolean = true;\n\n @property({ type: Object, attribute: false })\n currentTime: Date = new Date();\n\n @property({ type: Object, attribute: false })\n contextDate: Date = new Date();\n\n @state()\n private dateRange: any = {};\n\n @state()\n private weekDayEvents: ColumnEvent[][][] = [];\n\n override connectedCallback() {\n super.connectedCallback();\n this._processEvents();\n }\n\n override willUpdate(changedProperties: Map<string, unknown>) {\n if (\n changedProperties.has('events') ||\n changedProperties.has('contextDate')\n ) {\n this._processEvents();\n }\n }\n\n override firstUpdated() {\n const viewBody = this.renderRoot.querySelector('.view-body');\n if (viewBody) {\n const viewBodyHeight = viewBody.scrollHeight;\n viewBody.scrollTo({\n top:\n (getTimePercent(this.currentTime) / 100) * viewBodyHeight - 150,\n });\n }\n }\n\n private _processEvents() {\n this.dateRange = calculateMonthRange(this.contextDate, 1);\n this.weekDayEvents = [];\n\n for (\n let i = new Date(this.dateRange.startDate), j = 0;\n j < 6;\n i = addDays(i, 7), j++\n ) {\n const manager = new MonthEventManager();\n manager.addEvents(\n this.events.filter(event =>\n event.isOverlapping(\n new BaseEvent(startOfDay(i), endOfDay(addDays(i, 6))),\n ),\n ),\n );\n manager.process();\n this.weekDayEvents.push(manager.columns);\n }\n }\n\n private _getDatePercent(date: Date, dateRangeStartDate: Date): number {\n const currentDay = differenceInDays(startOfDay(date), dateRangeStartDate);\n const percent = (currentDay / 7) * 100;\n if (percent < 0) return 0;\n if (percent > 100) return 100;\n return percent;\n }\n\n private _getDayClass(date: Date): string {\n const diff = differenceInDays(\n startOfDay(date),\n startOfDay(this.currentTime),\n );\n if (diff === 0) return 'column today';\n if (diff < 0) return 'column past';\n return 'column future';\n }\n\n private _populateColorVars(\n styles: Record<string, string>,\n color: string,\n ) {\n styles['--calendar-event-bg-color'] = `var(--color-${color}-container)`;\n styles['--calendar-event-bg-color--hover'] = `var(--color-inverse-${color})`;\n styles['--calendar-event-border-color'] = `var(--color-${color})`;\n styles['--calendar-event-text-color'] = `var(--color-on-${color}-container)`;\n styles['--calendar-event-text-color--hover'] = `var(--color-on-${color})`;\n }\n\n private _emitEventClick(event: any) {\n this.dispatchEvent(\n new CustomEvent('month-view-event-click', {\n detail: { event },\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n private _renderHeader() {\n const columns: any[] = [];\n for (\n let i = new Date(this.dateRange.startDate), j = 0;\n j < 7;\n i = addDays(i, 1), j++\n ) {\n columns.push(html`\n <div class=\"column\">\n <div class=\"column-content\">\n <div class=\"day\">${formatDate(i, 'EEEE')}</div>\n </div>\n </div>\n `);\n }\n return columns;\n }\n\n private _renderMultiDayBackground(sd: Date) {\n const columns: any[] = [];\n for (let i = new Date(sd), j = 0; j < 7; i = addDays(i, 1), j++) {\n columns.push(html`\n <div class=${this._getDayClass(i)}>\n <div class=\"column-content\">\n <div class=\"column-header\">\n <div class=\"day\">${formatDate(i, 'd')}</div>\n </div>\n </div>\n </div>\n `);\n }\n return columns;\n }\n\n private _renderEvents() {\n return this.weekDayEvents.map((eventDay, index) => {\n const weekStartDate = addDays(this.dateRange.startDate, index * 7);\n return html`\n <div class=\"multi-day-section\">\n <div class=\"multi-day-body-scroll\">\n <div class=\"multi-day-background\">\n <div class=\"columns\">\n ${this._renderMultiDayBackground(weekStartDate)}\n </div>\n </div>\n <div class=\"multi-events\">\n <div class=\"row-content\">\n ${eventDay.map(\n nodes => html`\n <div class=\"row\">\n ${nodes.map(node => {\n const evtCls = this.eventClickable\n ? 'event clickable'\n : 'event';\n const evtStyles: Record<string, string> = {\n left: `${this._getDatePercent(node.start, weekStartDate) + LONG_EVENT_PADDING}%`,\n width: `${this._getDatePercent(addDays(node.end, 1), weekStartDate) - this._getDatePercent(node.start, weekStartDate) - 2 * LONG_EVENT_PADDING}%`,\n };\n if (node.color) {\n this._populateColorVars(evtStyles, node.color);\n }\n return html`\n <div\n class=${evtCls}\n style=${this._styleMap(evtStyles)}\n @click=${() => {\n if (this.eventClickable)\n this._emitEventClick(node.data);\n }}\n >\n <div class=\"event-title\">\n ${node.title || '(no title)'}\n </div>\n </div>\n `;\n })}\n </div>\n `,\n )}\n <div class=\"row-spacer\"></div>\n </div>\n </div>\n </div>\n </div>\n `;\n });\n }\n\n private _styleMap(styles: Record<string, string>): string {\n return Object.entries(styles)\n .map(([k, v]) => `${k}:${v}`)\n .join(';');\n }\n\n render() {\n return html`\n <div class=\"calendar-month-view\">\n <div class=\"view-header\">\n <div class=\"columns\">${this._renderHeader()}</div>\n <div class=\"scrollbar-placeholder\"></div>\n </div>\n <div class=\"view-body\">\n <div class=\"view-body-scroll\">\n <div class=\"drawing-area\">${this._renderEvents()}</div>\n </div>\n </div>\n </div>\n `;\n }\n}\n"],"names":["LitElement","html","styles","property","state"],"mappings":"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"}
|
package/dist/calendar.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { n } from './property-
|
|
3
|
-
import { r } from './state-
|
|
1
|
+
import { i, _ as __decorate, I as IndividualComponent, a as i$1, b, A } from './IndividualComponent-Bdwyrvd6.js';
|
|
2
|
+
import { n } from './property-B49QQ8pS.js';
|
|
3
|
+
import { r } from './state-DkTK9EGF.js';
|
|
4
4
|
import { a as addDays, b as addMonths, f as formatDate, C as CalendarEvent } from './calendar-event-BrQ_SEKD.js';
|
|
5
5
|
|
|
6
6
|
var css_248z = i`* {
|
|
@@ -11,6 +11,10 @@ var css_248z = i`* {
|
|
|
11
11
|
display: none !important;
|
|
12
12
|
}
|
|
13
13
|
|
|
14
|
+
[hidden] {
|
|
15
|
+
display: none !important;
|
|
16
|
+
}
|
|
17
|
+
|
|
14
18
|
:host {
|
|
15
19
|
display: block;
|
|
16
20
|
height: 100%;
|
|
@@ -74,7 +78,7 @@ var css_248z = i`* {
|
|
|
74
78
|
* @label Calendar
|
|
75
79
|
* @tag wc-calendar
|
|
76
80
|
* @rawTag calendar
|
|
77
|
-
* @summary A
|
|
81
|
+
* @summary A full calendar component for displaying events in day, week, or month views.
|
|
78
82
|
*
|
|
79
83
|
* @cssprop --calendar-border-color - Border color used throughout the calendar grid.
|
|
80
84
|
* @cssprop --calendar-event-bg-color - Background color for calendar events.
|
package/dist/calendar.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"calendar.js","sources":["../../src/calendar/calendar.ts"],"sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { addDays, addMonths, formatDate } from './utils.js';\nimport { CalendarEvent } from './calendar-event.js';\nimport type { CalendarViewType, EventType } from './types.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport styles from './calendar.scss';\n\n/**\n * @label Calendar\n * @tag wc-calendar\n * @rawTag calendar\n * @summary A Material 3 inspired full calendar component for displaying events in day, week, or month views.\n *\n * @cssprop --calendar-border-color - Border color used throughout the calendar grid.\n * @cssprop --calendar-event-bg-color - Background color for calendar events.\n * @cssprop --calendar-event-border-color - Left border color for calendar events.\n *\n * @fires {CustomEvent} event-click - Dispatched when a calendar event is clicked. Detail contains `{ event }`.\n * @fires {CustomEvent} view-change - Dispatched when the calendar view changes. Detail contains `{ view }`.\n * @fires {CustomEvent} date-change - Dispatched when the context date changes. Detail contains `{ date }`.\n *\n * @example\n * ```html\n * <wc-calendar view=\"week\" style=\"height: 600px\"></wc-calendar>\n * ```\n */\n@IndividualComponent\nexport class Calendar extends LitElement {\n static styles = [styles];\n\n /**\n * Calendar events array.\n */\n @property({ type: Array })\n events: EventType[] = [];\n\n /**\n * Available views configuration.\n */\n @property({ type: Array, attribute: 'available-views' })\n availableViews: CalendarViewType[] = [\n { label: 'Day', value: 'day', type: 'column', days: 1 },\n { label: 'Week', value: 'week', type: 'column', days: 7 },\n { label: 'Month', value: 'month', type: 'month' },\n ];\n\n /**\n * Current calendar view.\n */\n @property({ type: String, reflect: true })\n view: string = 'week';\n\n /**\n * Whether events are clickable.\n */\n @property({ type: Boolean, attribute: 'event-clickable' })\n eventClickable: boolean = true;\n\n /**\n * Show loading state.\n */\n @property({ type: Boolean, attribute: 'show-loader' })\n showLoader: boolean = false;\n\n /**\n * Timezone string (e.g. 'America/New_York').\n */\n @property({ type: String })\n timezone: string = '';\n\n /**\n * The context date for the calendar view.\n */\n @property({ type: Object, attribute: false })\n contextDate: Date | null = null;\n\n @state()\n private _currentTime: Date = new Date();\n\n @state()\n private _currentView: CalendarViewType | undefined;\n\n override connectedCallback() {\n super.connectedCallback();\n if (this.timezone) {\n this._currentTime = new Date(\n new Date().toLocaleString('en', { timeZone: this.timezone }),\n );\n } else {\n this._currentTime = new Date();\n }\n if (!this.contextDate) {\n this.contextDate = this._currentTime;\n }\n }\n\n override willUpdate(changedProperties: Map<string, unknown>) {\n if (changedProperties.has('view') || changedProperties.has('availableViews')) {\n this._currentView = this.availableViews.find(v => v.value === this.view);\n }\n }\n\n private _onColumnViewDateClick(evt: CustomEvent) {\n evt.stopPropagation();\n this.view = 'day';\n this.contextDate = evt.detail.date;\n this.dispatchEvent(\n new CustomEvent('view-change', {\n detail: { view: this.view },\n bubbles: true,\n composed: true,\n }),\n );\n this.dispatchEvent(\n new CustomEvent('date-change', {\n detail: { date: this.contextDate },\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n private _onEventClick(evt: CustomEvent) {\n evt.stopPropagation();\n this.dispatchEvent(\n new CustomEvent('event-click', {\n detail: { event: evt.detail.event },\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n previous() {\n if (!this._currentView) return;\n if (this._currentView.days) {\n this.contextDate = addDays(\n this.contextDate!,\n -1 * this._currentView.days,\n );\n } else if (this._currentView.type === 'month') {\n this.contextDate = addMonths(this.contextDate!, -1);\n }\n this.dispatchEvent(\n new CustomEvent('date-change', {\n detail: { date: this.contextDate },\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n next() {\n if (!this._currentView) return;\n if (this._currentView.days) {\n this.contextDate = addDays(\n this.contextDate!,\n this._currentView.days,\n );\n } else if (this._currentView.type === 'month') {\n this.contextDate = addMonths(this.contextDate!, 1);\n }\n this.dispatchEvent(\n new CustomEvent('date-change', {\n detail: { date: this.contextDate },\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n private _goToToday() {\n this.contextDate = this._currentTime;\n this.dispatchEvent(\n new CustomEvent('date-change', {\n detail: { date: this.contextDate },\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n private _onViewSegmentChange(evt: CustomEvent<{ value: string | null }>) {\n if (!evt.detail.value) return;\n this.view = evt.detail.value;\n this.dispatchEvent(\n new CustomEvent('view-change', {\n detail: { view: this.view },\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n private _renderHeader() {\n return html`\n <div class=\"calendar-header-classic\">\n <div class=\"header-left\">\n <wc-button\n variant=\"outlined\"\n size=\"sm\"\n class=\"color-secondary\"\n @click=${() => this._goToToday()}\n >\n Today\n </wc-button>\n <wc-icon-button\n variant=\"text\"\n size=\"sm\"\n class=\"color-secondary\"\n @click=${() => this.previous()}\n >\n <wc-icon name=\"chevron_left\"></wc-icon>\n </wc-icon-button>\n <wc-icon-button\n variant=\"text\"\n size=\"sm\"\n class=\"color-secondary\"\n @click=${() => this.next()}\n >\n <wc-icon name=\"chevron_right\"></wc-icon>\n </wc-icon-button>\n <div class=\"title\">\n ${this.contextDate\n ? formatDate(this.contextDate, 'MMMM d, yyyy')\n : ''}\n </div>\n </div>\n <div class=\"header-right\">\n <wc-segmented-button-group @change=${this._onViewSegmentChange}>\n ${this.availableViews.map(\n v =>\n html`<wc-segmented-button\n .value=${v.value}\n ?selected=${this.view === v.value}\n >\n ${v.label}\n </wc-segmented-button>`,\n )}\n </wc-segmented-button-group>\n </div>\n </div>\n `;\n }\n\n private _renderCalendarView() {\n if (!this._currentView) return html`<div>Invalid view</div>`;\n\n const calEvents = this.events.map(\n event =>\n new CalendarEvent(\n event.start,\n event.end,\n event.title,\n event.color,\n event,\n ),\n );\n\n if (this._currentView.type === 'column') {\n return html`\n <wc-calendar-column-view\n .events=${calEvents}\n .view=${this._currentView.value}\n .days=${this._currentView.days || 7}\n .currentTime=${this._currentTime}\n .contextDate=${this.contextDate}\n ?event-clickable=${this.eventClickable}\n @column-view-date-click=${this._onColumnViewDateClick}\n @column-view-event-click=${this._onEventClick}\n ></wc-calendar-column-view>\n `;\n } else if (this._currentView.type === 'month') {\n return html`\n <wc-calendar-month-view\n .events=${calEvents}\n .currentTime=${this._currentTime}\n .contextDate=${this.contextDate}\n ?event-clickable=${this.eventClickable}\n @month-view-event-click=${this._onEventClick}\n ></wc-calendar-month-view>\n `;\n }\n return nothing;\n }\n\n render() {\n return html`\n <div class=\"calendar\">\n <div class=\"calendar-header\">${this._renderHeader()}</div>\n <div class=\"calendar-body\">\n <div class=\"view-container\">${this._renderCalendarView()}</div>\n </div>\n </div>\n `;\n }\n}\n"],"names":["LitElement","html","nothing","styles","property","state"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"calendar.js","sources":["../../src/calendar/calendar.ts"],"sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { addDays, addMonths, formatDate } from './utils.js';\nimport { CalendarEvent } from './calendar-event.js';\nimport type { CalendarViewType, EventType } from './types.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport styles from './calendar.scss';\n\n/**\n * @label Calendar\n * @tag wc-calendar\n * @rawTag calendar\n * @summary A full calendar component for displaying events in day, week, or month views.\n *\n * @cssprop --calendar-border-color - Border color used throughout the calendar grid.\n * @cssprop --calendar-event-bg-color - Background color for calendar events.\n * @cssprop --calendar-event-border-color - Left border color for calendar events.\n *\n * @fires {CustomEvent} event-click - Dispatched when a calendar event is clicked. Detail contains `{ event }`.\n * @fires {CustomEvent} view-change - Dispatched when the calendar view changes. Detail contains `{ view }`.\n * @fires {CustomEvent} date-change - Dispatched when the context date changes. Detail contains `{ date }`.\n *\n * @example\n * ```html\n * <wc-calendar view=\"week\" style=\"height: 600px\"></wc-calendar>\n * ```\n */\n@IndividualComponent\nexport class Calendar extends LitElement {\n static styles = [styles];\n\n /**\n * Calendar events array.\n */\n @property({ type: Array })\n events: EventType[] = [];\n\n /**\n * Available views configuration.\n */\n @property({ type: Array, attribute: 'available-views' })\n availableViews: CalendarViewType[] = [\n { label: 'Day', value: 'day', type: 'column', days: 1 },\n { label: 'Week', value: 'week', type: 'column', days: 7 },\n { label: 'Month', value: 'month', type: 'month' },\n ];\n\n /**\n * Current calendar view.\n */\n @property({ type: String, reflect: true })\n view: string = 'week';\n\n /**\n * Whether events are clickable.\n */\n @property({ type: Boolean, attribute: 'event-clickable' })\n eventClickable: boolean = true;\n\n /**\n * Show loading state.\n */\n @property({ type: Boolean, attribute: 'show-loader' })\n showLoader: boolean = false;\n\n /**\n * Timezone string (e.g. 'America/New_York').\n */\n @property({ type: String })\n timezone: string = '';\n\n /**\n * The context date for the calendar view.\n */\n @property({ type: Object, attribute: false })\n contextDate: Date | null = null;\n\n @state()\n private _currentTime: Date = new Date();\n\n @state()\n private _currentView: CalendarViewType | undefined;\n\n override connectedCallback() {\n super.connectedCallback();\n if (this.timezone) {\n this._currentTime = new Date(\n new Date().toLocaleString('en', { timeZone: this.timezone }),\n );\n } else {\n this._currentTime = new Date();\n }\n if (!this.contextDate) {\n this.contextDate = this._currentTime;\n }\n }\n\n override willUpdate(changedProperties: Map<string, unknown>) {\n if (changedProperties.has('view') || changedProperties.has('availableViews')) {\n this._currentView = this.availableViews.find(v => v.value === this.view);\n }\n }\n\n private _onColumnViewDateClick(evt: CustomEvent) {\n evt.stopPropagation();\n this.view = 'day';\n this.contextDate = evt.detail.date;\n this.dispatchEvent(\n new CustomEvent('view-change', {\n detail: { view: this.view },\n bubbles: true,\n composed: true,\n }),\n );\n this.dispatchEvent(\n new CustomEvent('date-change', {\n detail: { date: this.contextDate },\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n private _onEventClick(evt: CustomEvent) {\n evt.stopPropagation();\n this.dispatchEvent(\n new CustomEvent('event-click', {\n detail: { event: evt.detail.event },\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n previous() {\n if (!this._currentView) return;\n if (this._currentView.days) {\n this.contextDate = addDays(\n this.contextDate!,\n -1 * this._currentView.days,\n );\n } else if (this._currentView.type === 'month') {\n this.contextDate = addMonths(this.contextDate!, -1);\n }\n this.dispatchEvent(\n new CustomEvent('date-change', {\n detail: { date: this.contextDate },\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n next() {\n if (!this._currentView) return;\n if (this._currentView.days) {\n this.contextDate = addDays(\n this.contextDate!,\n this._currentView.days,\n );\n } else if (this._currentView.type === 'month') {\n this.contextDate = addMonths(this.contextDate!, 1);\n }\n this.dispatchEvent(\n new CustomEvent('date-change', {\n detail: { date: this.contextDate },\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n private _goToToday() {\n this.contextDate = this._currentTime;\n this.dispatchEvent(\n new CustomEvent('date-change', {\n detail: { date: this.contextDate },\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n private _onViewSegmentChange(evt: CustomEvent<{ value: string | null }>) {\n if (!evt.detail.value) return;\n this.view = evt.detail.value;\n this.dispatchEvent(\n new CustomEvent('view-change', {\n detail: { view: this.view },\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n private _renderHeader() {\n return html`\n <div class=\"calendar-header-classic\">\n <div class=\"header-left\">\n <wc-button\n variant=\"outlined\"\n size=\"sm\"\n class=\"color-secondary\"\n @click=${() => this._goToToday()}\n >\n Today\n </wc-button>\n <wc-icon-button\n variant=\"text\"\n size=\"sm\"\n class=\"color-secondary\"\n @click=${() => this.previous()}\n >\n <wc-icon name=\"chevron_left\"></wc-icon>\n </wc-icon-button>\n <wc-icon-button\n variant=\"text\"\n size=\"sm\"\n class=\"color-secondary\"\n @click=${() => this.next()}\n >\n <wc-icon name=\"chevron_right\"></wc-icon>\n </wc-icon-button>\n <div class=\"title\">\n ${this.contextDate\n ? formatDate(this.contextDate, 'MMMM d, yyyy')\n : ''}\n </div>\n </div>\n <div class=\"header-right\">\n <wc-segmented-button-group @change=${this._onViewSegmentChange}>\n ${this.availableViews.map(\n v =>\n html`<wc-segmented-button\n .value=${v.value}\n ?selected=${this.view === v.value}\n >\n ${v.label}\n </wc-segmented-button>`,\n )}\n </wc-segmented-button-group>\n </div>\n </div>\n `;\n }\n\n private _renderCalendarView() {\n if (!this._currentView) return html`<div>Invalid view</div>`;\n\n const calEvents = this.events.map(\n event =>\n new CalendarEvent(\n event.start,\n event.end,\n event.title,\n event.color,\n event,\n ),\n );\n\n if (this._currentView.type === 'column') {\n return html`\n <wc-calendar-column-view\n .events=${calEvents}\n .view=${this._currentView.value}\n .days=${this._currentView.days || 7}\n .currentTime=${this._currentTime}\n .contextDate=${this.contextDate}\n ?event-clickable=${this.eventClickable}\n @column-view-date-click=${this._onColumnViewDateClick}\n @column-view-event-click=${this._onEventClick}\n ></wc-calendar-column-view>\n `;\n } else if (this._currentView.type === 'month') {\n return html`\n <wc-calendar-month-view\n .events=${calEvents}\n .currentTime=${this._currentTime}\n .contextDate=${this.contextDate}\n ?event-clickable=${this.eventClickable}\n @month-view-event-click=${this._onEventClick}\n ></wc-calendar-month-view>\n `;\n }\n return nothing;\n }\n\n render() {\n return html`\n <div class=\"calendar\">\n <div class=\"calendar-header\">${this._renderHeader()}</div>\n <div class=\"calendar-body\">\n <div class=\"view-container\">${this._renderCalendarView()}</div>\n </div>\n </div>\n `;\n }\n}\n"],"names":["LitElement","html","nothing","styles","property","state"],"mappings":"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"}
|
package/dist/canvas.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { n } from './property-
|
|
3
|
-
import { e } from './class-map-
|
|
1
|
+
import { i, _ as __decorate, I as IndividualComponent, a as i$1, A, w, b } from './IndividualComponent-Bdwyrvd6.js';
|
|
2
|
+
import { n } from './property-B49QQ8pS.js';
|
|
3
|
+
import { e } from './class-map-DG7CA1et.js';
|
|
4
4
|
import './directive-ZPhl09Yt.js';
|
|
5
5
|
|
|
6
6
|
var css_248z = i`* {
|
|
@@ -11,6 +11,10 @@ var css_248z = i`* {
|
|
|
11
11
|
display: none !important;
|
|
12
12
|
}
|
|
13
13
|
|
|
14
|
+
[hidden] {
|
|
15
|
+
display: none !important;
|
|
16
|
+
}
|
|
17
|
+
|
|
14
18
|
:host {
|
|
15
19
|
display: block;
|
|
16
20
|
--canvas-background: var(--color-surface-container-low);
|
|
@@ -83,7 +87,7 @@ const GRID_DOT_RADIUS = 1;
|
|
|
83
87
|
* @label Canvas
|
|
84
88
|
* @tag wc-canvas
|
|
85
89
|
* @rawTag canvas
|
|
86
|
-
* @summary A
|
|
90
|
+
* @summary A SVG canvas for drawing shapes, lines, and connectors on a dotted grid.
|
|
87
91
|
*
|
|
88
92
|
* @cssprop --canvas-background - Background color for the canvas wrapper. Defaults to surface-container-low.
|
|
89
93
|
* @cssprop --canvas-dot-color - Color of the background grid dots. Defaults to outline-variant.
|
package/dist/canvas.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"canvas.js","sources":["../../src/canvas/canvas.ts"],"sourcesContent":["import { html, LitElement, svg, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport styles from './canvas.scss';\n\nexport type CanvasDirection = 'up' | 'down' | 'left' | 'right';\n\nexport type CanvasStrokeVariant = 'solid' | 'dashed' | 'animated-dashed';\n\nexport interface CanvasPoint {\n x: number;\n y: number;\n}\n\nexport interface CanvasPathSegment {\n direction: CanvasDirection;\n length: number;\n}\n\ninterface BaseCanvasShape {\n color?: string;\n}\n\ninterface BaseCanvasStrokeShape extends BaseCanvasShape {\n variant?: CanvasStrokeVariant;\n showArrow?: boolean;\n clickable?: boolean;\n}\n\nexport interface CanvasCircleShape extends BaseCanvasShape {\n type: 'circle';\n x?: number;\n y?: number;\n radius?: number;\n}\n\nexport interface CanvasRectShape extends BaseCanvasShape {\n type: 'rect';\n x?: number;\n y?: number;\n width?: number;\n height?: number;\n}\n\nexport interface CanvasLineShape extends BaseCanvasStrokeShape {\n type: 'line';\n start?: CanvasPoint;\n end?: CanvasPoint;\n}\n\nexport interface CanvasConnectorShape extends BaseCanvasStrokeShape {\n type: 'connector';\n start?: CanvasPoint;\n path?: CanvasPathSegment[];\n}\n\nexport type CanvasShape =\n | CanvasCircleShape\n | CanvasRectShape\n | CanvasLineShape\n | CanvasConnectorShape;\n\nconst GRID_GAP = 10;\nconst GRID_DOT_RADIUS = 1;\n\ninterface CanvasBounds {\n x: number;\n y: number;\n width: number;\n height: number;\n}\n\ninterface CanvasExtents {\n minX: number;\n minY: number;\n maxX: number;\n maxY: number;\n}\n\ninterface CanvasViewBox {\n x: number;\n y: number;\n width: number;\n height: number;\n}\n\n/**\n * @label Canvas\n * @tag wc-canvas\n * @rawTag canvas\n * @summary A Material 3 inspired SVG canvas for drawing shapes, lines, and connectors on a dotted grid.\n *\n * @cssprop --canvas-background - Background color for the canvas wrapper. Defaults to surface-container-low.\n * @cssprop --canvas-dot-color - Color of the background grid dots. Defaults to outline-variant.\n * @cssprop --canvas-line-color - Default stroke color for lines and connectors. Defaults to on-surface.\n * @cssprop --canvas-hover-color - Stroke color on hover for clickable shapes. Defaults to primary.\n * @cssprop --canvas-arrow-color - Stroke color for arrow markers. Defaults to on-surface.\n *\n * @example\n * ```html\n * <wc-canvas id=\"my-canvas\"></wc-canvas>\n * <script>\n * document.querySelector('#my-canvas').shapes = [\n * { type: 'circle', x: 0, y: 0, radius: 0.25, color: 'red' },\n * ];\n * </script>\n * ```\n */\n@IndividualComponent\nexport class Canvas extends LitElement {\n static styles = [styles];\n\n /**\n * Array of shape objects to render on the canvas.\n */\n @property({ type: Array })\n shapes: CanvasShape[] = [];\n\n /**\n * Padding around the computed viewbox (in grid units).\n */\n @property({ type: Number, reflect: true })\n padding: number = 1;\n\n /**\n * Zoom multiplier for the canvas dimensions.\n */\n @property({ type: Number, reflect: true })\n zoom: number = 1;\n\n /**\n * Optional viewbox override string (e.g. \"0 0 100 100\").\n */\n @property({ type: String })\n viewbox?: string;\n\n private static getNextPoint(\n point: CanvasPoint,\n direction: CanvasDirection,\n length: number,\n ): CanvasPoint {\n if (direction === 'down') return { x: point.x, y: point.y + length };\n if (direction === 'up') return { x: point.x, y: point.y - length };\n if (direction === 'left') return { x: point.x - length, y: point.y };\n if (direction === 'right') return { x: point.x + length, y: point.y };\n return { x: point.x, y: point.y };\n }\n\n private static updateExtents(\n extents: CanvasExtents,\n x: number,\n y: number,\n ) {\n if (x < extents.minX) extents.minX = x;\n if (x > extents.maxX) extents.maxX = x;\n if (y < extents.minY) extents.minY = y;\n if (y > extents.maxY) extents.maxY = y;\n }\n\n private static getStrokeVariantClasses(variant?: CanvasStrokeVariant) {\n return {\n line: true,\n 'variant-dashed': variant === 'dashed' || variant === 'animated-dashed',\n 'variant-animated-dashed': variant === 'animated-dashed',\n };\n }\n\n private computeShapes(initialBounds: CanvasBounds) {\n // Track world-space bounds (grid units) as shapes are processed.\n const extents: CanvasExtents = {\n minX: initialBounds.x,\n minY: initialBounds.y,\n maxX: initialBounds.x + initialBounds.width,\n maxY: initialBounds.y + initialBounds.height,\n };\n\n const shapes = this.shapes.map(shape => {\n switch (shape.type) {\n case 'circle': {\n const r = shape.radius || 1;\n const cx = shape.x || 0;\n const cy = shape.y || 0;\n Canvas.updateExtents(extents, cx - r, cy - r);\n Canvas.updateExtents(extents, cx + r, cy + r);\n\n // Convert from grid units to SVG pixels using the fixed gap.\n return svg`<circle\n cx=${cx * GRID_GAP + GRID_DOT_RADIUS}\n cy=${cy * GRID_GAP + GRID_DOT_RADIUS}\n r=${r * GRID_GAP}\n fill=${shape.color || 'var(--canvas-line-color, var(--color-on-surface))'}\n />`;\n }\n case 'rect': {\n const w = shape.width || 1;\n const h = shape.height || 1;\n const rx = shape.x || 0;\n const ry = shape.y || 0;\n Canvas.updateExtents(extents, rx, ry);\n Canvas.updateExtents(extents, rx + w, ry + h);\n\n return svg`<rect\n x=${rx * GRID_GAP + GRID_DOT_RADIUS}\n y=${ry * GRID_GAP}\n width=${w * GRID_GAP + GRID_DOT_RADIUS}\n height=${h * GRID_GAP + GRID_DOT_RADIUS}\n fill=${shape.color || 'var(--canvas-line-color, var(--color-on-surface))'}\n />`;\n }\n case 'line': {\n const start = shape.start || { x: 0, y: 0 };\n const end = shape.end || { x: 0, y: 0 };\n Canvas.updateExtents(extents, start.x, start.y);\n Canvas.updateExtents(extents, end.x, end.y);\n const pathString = `M${start.x * GRID_GAP + GRID_DOT_RADIUS} ${start.y * GRID_GAP + GRID_DOT_RADIUS} L${end.x * GRID_GAP + GRID_DOT_RADIUS} ${end.y * GRID_GAP + GRID_DOT_RADIUS}`;\n const strokeColor =\n shape.color ||\n 'var(--canvas-line-color, var(--color-on-surface))';\n\n return svg`<path\n class=${classMap({\n ...Canvas.getStrokeVariantClasses(shape.variant),\n clickable: !!shape.clickable,\n })}\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke=${strokeColor}\n marker-end=${shape.showArrow ? 'url(#endarrow)' : ''}\n d=${pathString}\n stroke-dasharray=${shape.variant === 'dashed' || shape.variant === 'animated-dashed' ? '6,6' : nothing}\n fill=\"none\"\n />`;\n }\n case 'connector': {\n const start = shape.start || { x: 0, y: 0 };\n let pathString = `M${start.x * GRID_GAP + GRID_DOT_RADIUS} ${start.y * GRID_GAP + GRID_DOT_RADIUS}`;\n let current = { ...start };\n Canvas.updateExtents(extents, current.x, current.y);\n\n const pathSegments = shape.path || [];\n for (let i = 0; i < pathSegments.length; i += 1) {\n const path = pathSegments[i];\n\n if (i === 0) {\n // Move one unit first so curved corner joins don't overlap start.\n const point = Canvas.getNextPoint(current, path.direction, 1);\n pathString += ` L${point.x * GRID_GAP + GRID_DOT_RADIUS} ${point.y * GRID_GAP + GRID_DOT_RADIUS}`;\n current = { ...point };\n Canvas.updateExtents(extents, current.x, current.y);\n }\n\n const point = Canvas.getNextPoint(\n current,\n path.direction,\n path.length - 2,\n );\n pathString += ` L${point.x * GRID_GAP + GRID_DOT_RADIUS} ${point.y * GRID_GAP + GRID_DOT_RADIUS}`;\n current = { ...point };\n Canvas.updateExtents(extents, current.x, current.y);\n\n if (i === pathSegments.length - 1) {\n const endPoint = Canvas.getNextPoint(current, path.direction, 1);\n pathString += ` L${endPoint.x * GRID_GAP + GRID_DOT_RADIUS} ${endPoint.y * GRID_GAP + GRID_DOT_RADIUS}`;\n current = { ...endPoint };\n Canvas.updateExtents(extents, current.x, current.y);\n } else {\n const nextPath = pathSegments[i + 1];\n const midPoint = Canvas.getNextPoint(current, path.direction, 1);\n Canvas.updateExtents(extents, midPoint.x, midPoint.y);\n const nextPoint = Canvas.getNextPoint(\n midPoint,\n nextPath.direction,\n 1,\n );\n // Use a quadratic segment to round corners between directions.\n pathString += ` Q ${midPoint.x * GRID_GAP + GRID_DOT_RADIUS} ${midPoint.y * GRID_GAP + GRID_DOT_RADIUS} ${nextPoint.x * GRID_GAP + GRID_DOT_RADIUS} ${nextPoint.y * GRID_GAP + GRID_DOT_RADIUS}`;\n current = { ...nextPoint };\n Canvas.updateExtents(extents, current.x, current.y);\n }\n }\n\n const strokeColor =\n shape.color ||\n 'var(--canvas-line-color, var(--color-on-surface))';\n\n return svg`<g class=${classMap({ clickable: !!shape.clickable })}>\n <path\n class=${classMap({\n ...Canvas.getStrokeVariantClasses(shape.variant),\n })}\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke=${strokeColor}\n marker-end=${shape.showArrow ? 'url(#endarrow)' : ''}\n d=${pathString}\n stroke-dasharray=${shape.variant === 'dashed' || shape.variant === 'animated-dashed' ? '6,6' : nothing}\n fill=\"none\"\n />\n <path\n stroke-width=\"10\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke=\"transparent\"\n d=${pathString}\n fill=\"none\"\n />\n </g>`;\n }\n default:\n return nothing;\n }\n });\n\n // Expand bounds with padding so shapes are not flush to the edge.\n const computedViewbox = {\n x: extents.minX - this.padding,\n y: extents.minY - this.padding,\n width: Math.max(extents.maxX - extents.minX + this.padding * 2, 0),\n height: Math.max(extents.maxY - extents.minY + this.padding * 2, 0),\n };\n\n return { shapes, computedViewbox };\n }\n\n private renderBackgroundSvg(computedViewBox: CanvasViewBox, svgViewBox: string) {\n return html`\n <svg\n class=\"canvas canvas-background\"\n height=\"100%\"\n width=\"100%\"\n viewBox=${svgViewBox}\n aria-hidden=\"true\"\n >\n <defs>\n <pattern\n id=\"canvas-background\"\n patternUnits=\"userSpaceOnUse\"\n width=${GRID_GAP}\n height=${GRID_GAP}\n >\n <circle cx=\"1\" cy=\"1\" r=${GRID_DOT_RADIUS} />\n </pattern>\n </defs>\n\n <rect\n x=${computedViewBox.x * GRID_GAP}\n y=${computedViewBox.y * GRID_GAP}\n width=\"100%\"\n height=\"100%\"\n fill=\"url(#canvas-background)\"\n />\n </svg>\n `;\n }\n\n private renderShapesSvg(shapes: unknown[], svgViewBox: string) {\n return html`\n <svg\n class=\"canvas canvas-shapes\"\n height=\"100%\"\n width=\"100%\"\n viewBox=${svgViewBox}\n >\n <defs>\n <marker id=\"endarrow\" markerWidth=\"10\" markerHeight=\"10\" refX=\"5\" refY=\"5\" markerUnits=\"strokeWidth\" orient=\"auto\">\n <polyline points=\"0 2, 5 5, 0 8\"></polyline>\n </marker>\n </defs>\n\n ${shapes}\n </svg>\n `;\n }\n\n protected render() {\n let computedViewBox = { width: 0, height: 0, x: 0, y: 0 };\n\n const { shapes, computedViewbox } = this.computeShapes(computedViewBox);\n computedViewBox = computedViewbox;\n\n if (this.viewbox) {\n const viewBox = this.viewbox.split(' ');\n computedViewBox = {\n x: parseInt(viewBox[0], 10),\n y: parseInt(viewBox[1], 10),\n width: parseInt(viewBox[2], 10),\n height: parseInt(viewBox[3], 10),\n };\n }\n\n // Zoom scales the outer viewport size while the SVG viewBox stays in world units.\n const wrapperWidth =\n (computedViewBox.width * GRID_GAP + 2) * GRID_DOT_RADIUS * this.zoom;\n const wrapperHeight =\n (computedViewBox.height * GRID_GAP + 2) * GRID_DOT_RADIUS * this.zoom;\n\n // viewBox maps world-space extents into the internal SVG coordinate system.\n const svgViewBox = `${computedViewBox.x * GRID_GAP} ${computedViewBox.y * GRID_GAP} ${computedViewBox.width * GRID_GAP + 2 * GRID_DOT_RADIUS} ${computedViewBox.height * GRID_GAP + 2 * GRID_DOT_RADIUS}`;\n\n return html`\n <div\n class=\"canvas-wrapper\"\n style=\"width: ${wrapperWidth}px; height: ${wrapperHeight}px;\"\n >\n ${this.renderBackgroundSvg(computedViewBox, svgViewBox)}\n ${this.renderShapesSvg(shapes, svgViewBox)}\n </div>\n `;\n }\n}\n"],"names":["LitElement","svg","w","classMap","nothing","html","styles","property"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"canvas.js","sources":["../../src/canvas/canvas.ts"],"sourcesContent":["import { html, LitElement, svg, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport styles from './canvas.scss';\n\nexport type CanvasDirection = 'up' | 'down' | 'left' | 'right';\n\nexport type CanvasStrokeVariant = 'solid' | 'dashed' | 'animated-dashed';\n\nexport interface CanvasPoint {\n x: number;\n y: number;\n}\n\nexport interface CanvasPathSegment {\n direction: CanvasDirection;\n length: number;\n}\n\ninterface BaseCanvasShape {\n color?: string;\n}\n\ninterface BaseCanvasStrokeShape extends BaseCanvasShape {\n variant?: CanvasStrokeVariant;\n showArrow?: boolean;\n clickable?: boolean;\n}\n\nexport interface CanvasCircleShape extends BaseCanvasShape {\n type: 'circle';\n x?: number;\n y?: number;\n radius?: number;\n}\n\nexport interface CanvasRectShape extends BaseCanvasShape {\n type: 'rect';\n x?: number;\n y?: number;\n width?: number;\n height?: number;\n}\n\nexport interface CanvasLineShape extends BaseCanvasStrokeShape {\n type: 'line';\n start?: CanvasPoint;\n end?: CanvasPoint;\n}\n\nexport interface CanvasConnectorShape extends BaseCanvasStrokeShape {\n type: 'connector';\n start?: CanvasPoint;\n path?: CanvasPathSegment[];\n}\n\nexport type CanvasShape =\n | CanvasCircleShape\n | CanvasRectShape\n | CanvasLineShape\n | CanvasConnectorShape;\n\nconst GRID_GAP = 10;\nconst GRID_DOT_RADIUS = 1;\n\ninterface CanvasBounds {\n x: number;\n y: number;\n width: number;\n height: number;\n}\n\ninterface CanvasExtents {\n minX: number;\n minY: number;\n maxX: number;\n maxY: number;\n}\n\ninterface CanvasViewBox {\n x: number;\n y: number;\n width: number;\n height: number;\n}\n\n/**\n * @label Canvas\n * @tag wc-canvas\n * @rawTag canvas\n * @summary A SVG canvas for drawing shapes, lines, and connectors on a dotted grid.\n *\n * @cssprop --canvas-background - Background color for the canvas wrapper. Defaults to surface-container-low.\n * @cssprop --canvas-dot-color - Color of the background grid dots. Defaults to outline-variant.\n * @cssprop --canvas-line-color - Default stroke color for lines and connectors. Defaults to on-surface.\n * @cssprop --canvas-hover-color - Stroke color on hover for clickable shapes. Defaults to primary.\n * @cssprop --canvas-arrow-color - Stroke color for arrow markers. Defaults to on-surface.\n *\n * @example\n * ```html\n * <wc-canvas id=\"my-canvas\"></wc-canvas>\n * <script>\n * document.querySelector('#my-canvas').shapes = [\n * { type: 'circle', x: 0, y: 0, radius: 0.25, color: 'red' },\n * ];\n * </script>\n * ```\n */\n@IndividualComponent\nexport class Canvas extends LitElement {\n static styles = [styles];\n\n /**\n * Array of shape objects to render on the canvas.\n */\n @property({ type: Array })\n shapes: CanvasShape[] = [];\n\n /**\n * Padding around the computed viewbox (in grid units).\n */\n @property({ type: Number, reflect: true })\n padding: number = 1;\n\n /**\n * Zoom multiplier for the canvas dimensions.\n */\n @property({ type: Number, reflect: true })\n zoom: number = 1;\n\n /**\n * Optional viewbox override string (e.g. \"0 0 100 100\").\n */\n @property({ type: String })\n viewbox?: string;\n\n private static getNextPoint(\n point: CanvasPoint,\n direction: CanvasDirection,\n length: number,\n ): CanvasPoint {\n if (direction === 'down') return { x: point.x, y: point.y + length };\n if (direction === 'up') return { x: point.x, y: point.y - length };\n if (direction === 'left') return { x: point.x - length, y: point.y };\n if (direction === 'right') return { x: point.x + length, y: point.y };\n return { x: point.x, y: point.y };\n }\n\n private static updateExtents(\n extents: CanvasExtents,\n x: number,\n y: number,\n ) {\n if (x < extents.minX) extents.minX = x;\n if (x > extents.maxX) extents.maxX = x;\n if (y < extents.minY) extents.minY = y;\n if (y > extents.maxY) extents.maxY = y;\n }\n\n private static getStrokeVariantClasses(variant?: CanvasStrokeVariant) {\n return {\n line: true,\n 'variant-dashed': variant === 'dashed' || variant === 'animated-dashed',\n 'variant-animated-dashed': variant === 'animated-dashed',\n };\n }\n\n private computeShapes(initialBounds: CanvasBounds) {\n // Track world-space bounds (grid units) as shapes are processed.\n const extents: CanvasExtents = {\n minX: initialBounds.x,\n minY: initialBounds.y,\n maxX: initialBounds.x + initialBounds.width,\n maxY: initialBounds.y + initialBounds.height,\n };\n\n const shapes = this.shapes.map(shape => {\n switch (shape.type) {\n case 'circle': {\n const r = shape.radius || 1;\n const cx = shape.x || 0;\n const cy = shape.y || 0;\n Canvas.updateExtents(extents, cx - r, cy - r);\n Canvas.updateExtents(extents, cx + r, cy + r);\n\n // Convert from grid units to SVG pixels using the fixed gap.\n return svg`<circle\n cx=${cx * GRID_GAP + GRID_DOT_RADIUS}\n cy=${cy * GRID_GAP + GRID_DOT_RADIUS}\n r=${r * GRID_GAP}\n fill=${shape.color || 'var(--canvas-line-color, var(--color-on-surface))'}\n />`;\n }\n case 'rect': {\n const w = shape.width || 1;\n const h = shape.height || 1;\n const rx = shape.x || 0;\n const ry = shape.y || 0;\n Canvas.updateExtents(extents, rx, ry);\n Canvas.updateExtents(extents, rx + w, ry + h);\n\n return svg`<rect\n x=${rx * GRID_GAP + GRID_DOT_RADIUS}\n y=${ry * GRID_GAP}\n width=${w * GRID_GAP + GRID_DOT_RADIUS}\n height=${h * GRID_GAP + GRID_DOT_RADIUS}\n fill=${shape.color || 'var(--canvas-line-color, var(--color-on-surface))'}\n />`;\n }\n case 'line': {\n const start = shape.start || { x: 0, y: 0 };\n const end = shape.end || { x: 0, y: 0 };\n Canvas.updateExtents(extents, start.x, start.y);\n Canvas.updateExtents(extents, end.x, end.y);\n const pathString = `M${start.x * GRID_GAP + GRID_DOT_RADIUS} ${start.y * GRID_GAP + GRID_DOT_RADIUS} L${end.x * GRID_GAP + GRID_DOT_RADIUS} ${end.y * GRID_GAP + GRID_DOT_RADIUS}`;\n const strokeColor =\n shape.color ||\n 'var(--canvas-line-color, var(--color-on-surface))';\n\n return svg`<path\n class=${classMap({\n ...Canvas.getStrokeVariantClasses(shape.variant),\n clickable: !!shape.clickable,\n })}\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke=${strokeColor}\n marker-end=${shape.showArrow ? 'url(#endarrow)' : ''}\n d=${pathString}\n stroke-dasharray=${shape.variant === 'dashed' || shape.variant === 'animated-dashed' ? '6,6' : nothing}\n fill=\"none\"\n />`;\n }\n case 'connector': {\n const start = shape.start || { x: 0, y: 0 };\n let pathString = `M${start.x * GRID_GAP + GRID_DOT_RADIUS} ${start.y * GRID_GAP + GRID_DOT_RADIUS}`;\n let current = { ...start };\n Canvas.updateExtents(extents, current.x, current.y);\n\n const pathSegments = shape.path || [];\n for (let i = 0; i < pathSegments.length; i += 1) {\n const path = pathSegments[i];\n\n if (i === 0) {\n // Move one unit first so curved corner joins don't overlap start.\n const point = Canvas.getNextPoint(current, path.direction, 1);\n pathString += ` L${point.x * GRID_GAP + GRID_DOT_RADIUS} ${point.y * GRID_GAP + GRID_DOT_RADIUS}`;\n current = { ...point };\n Canvas.updateExtents(extents, current.x, current.y);\n }\n\n const point = Canvas.getNextPoint(\n current,\n path.direction,\n path.length - 2,\n );\n pathString += ` L${point.x * GRID_GAP + GRID_DOT_RADIUS} ${point.y * GRID_GAP + GRID_DOT_RADIUS}`;\n current = { ...point };\n Canvas.updateExtents(extents, current.x, current.y);\n\n if (i === pathSegments.length - 1) {\n const endPoint = Canvas.getNextPoint(current, path.direction, 1);\n pathString += ` L${endPoint.x * GRID_GAP + GRID_DOT_RADIUS} ${endPoint.y * GRID_GAP + GRID_DOT_RADIUS}`;\n current = { ...endPoint };\n Canvas.updateExtents(extents, current.x, current.y);\n } else {\n const nextPath = pathSegments[i + 1];\n const midPoint = Canvas.getNextPoint(current, path.direction, 1);\n Canvas.updateExtents(extents, midPoint.x, midPoint.y);\n const nextPoint = Canvas.getNextPoint(\n midPoint,\n nextPath.direction,\n 1,\n );\n // Use a quadratic segment to round corners between directions.\n pathString += ` Q ${midPoint.x * GRID_GAP + GRID_DOT_RADIUS} ${midPoint.y * GRID_GAP + GRID_DOT_RADIUS} ${nextPoint.x * GRID_GAP + GRID_DOT_RADIUS} ${nextPoint.y * GRID_GAP + GRID_DOT_RADIUS}`;\n current = { ...nextPoint };\n Canvas.updateExtents(extents, current.x, current.y);\n }\n }\n\n const strokeColor =\n shape.color ||\n 'var(--canvas-line-color, var(--color-on-surface))';\n\n return svg`<g class=${classMap({ clickable: !!shape.clickable })}>\n <path\n class=${classMap({\n ...Canvas.getStrokeVariantClasses(shape.variant),\n })}\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke=${strokeColor}\n marker-end=${shape.showArrow ? 'url(#endarrow)' : ''}\n d=${pathString}\n stroke-dasharray=${shape.variant === 'dashed' || shape.variant === 'animated-dashed' ? '6,6' : nothing}\n fill=\"none\"\n />\n <path\n stroke-width=\"10\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke=\"transparent\"\n d=${pathString}\n fill=\"none\"\n />\n </g>`;\n }\n default:\n return nothing;\n }\n });\n\n // Expand bounds with padding so shapes are not flush to the edge.\n const computedViewbox = {\n x: extents.minX - this.padding,\n y: extents.minY - this.padding,\n width: Math.max(extents.maxX - extents.minX + this.padding * 2, 0),\n height: Math.max(extents.maxY - extents.minY + this.padding * 2, 0),\n };\n\n return { shapes, computedViewbox };\n }\n\n private renderBackgroundSvg(computedViewBox: CanvasViewBox, svgViewBox: string) {\n return html`\n <svg\n class=\"canvas canvas-background\"\n height=\"100%\"\n width=\"100%\"\n viewBox=${svgViewBox}\n aria-hidden=\"true\"\n >\n <defs>\n <pattern\n id=\"canvas-background\"\n patternUnits=\"userSpaceOnUse\"\n width=${GRID_GAP}\n height=${GRID_GAP}\n >\n <circle cx=\"1\" cy=\"1\" r=${GRID_DOT_RADIUS} />\n </pattern>\n </defs>\n\n <rect\n x=${computedViewBox.x * GRID_GAP}\n y=${computedViewBox.y * GRID_GAP}\n width=\"100%\"\n height=\"100%\"\n fill=\"url(#canvas-background)\"\n />\n </svg>\n `;\n }\n\n private renderShapesSvg(shapes: unknown[], svgViewBox: string) {\n return html`\n <svg\n class=\"canvas canvas-shapes\"\n height=\"100%\"\n width=\"100%\"\n viewBox=${svgViewBox}\n >\n <defs>\n <marker id=\"endarrow\" markerWidth=\"10\" markerHeight=\"10\" refX=\"5\" refY=\"5\" markerUnits=\"strokeWidth\" orient=\"auto\">\n <polyline points=\"0 2, 5 5, 0 8\"></polyline>\n </marker>\n </defs>\n\n ${shapes}\n </svg>\n `;\n }\n\n protected render() {\n let computedViewBox = { width: 0, height: 0, x: 0, y: 0 };\n\n const { shapes, computedViewbox } = this.computeShapes(computedViewBox);\n computedViewBox = computedViewbox;\n\n if (this.viewbox) {\n const viewBox = this.viewbox.split(' ');\n computedViewBox = {\n x: parseInt(viewBox[0], 10),\n y: parseInt(viewBox[1], 10),\n width: parseInt(viewBox[2], 10),\n height: parseInt(viewBox[3], 10),\n };\n }\n\n // Zoom scales the outer viewport size while the SVG viewBox stays in world units.\n const wrapperWidth =\n (computedViewBox.width * GRID_GAP + 2) * GRID_DOT_RADIUS * this.zoom;\n const wrapperHeight =\n (computedViewBox.height * GRID_GAP + 2) * GRID_DOT_RADIUS * this.zoom;\n\n // viewBox maps world-space extents into the internal SVG coordinate system.\n const svgViewBox = `${computedViewBox.x * GRID_GAP} ${computedViewBox.y * GRID_GAP} ${computedViewBox.width * GRID_GAP + 2 * GRID_DOT_RADIUS} ${computedViewBox.height * GRID_GAP + 2 * GRID_DOT_RADIUS}`;\n\n return html`\n <div\n class=\"canvas-wrapper\"\n style=\"width: ${wrapperWidth}px; height: ${wrapperHeight}px;\"\n >\n ${this.renderBackgroundSvg(computedViewBox, svgViewBox)}\n ${this.renderShapesSvg(shapes, svgViewBox)}\n </div>\n `;\n }\n}\n"],"names":["LitElement","svg","w","classMap","nothing","html","styles","property"],"mappings":"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"}
|