ngwr 8.0.0 → 9.0.1
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/README.md +76 -29
- package/action-sheet/styles/_index.scss +93 -0
- package/alert/styles/_index.scss +10 -10
- package/anchor/styles/_index.scss +3 -3
- package/back-top/styles/_index.scss +1 -1
- package/badge/styles/_tag.scss +3 -3
- package/bar-chart/styles/_index.scss +4 -4
- package/border-glow/styles/_index.scss +3 -3
- package/breadcrumbs/styles/_index.scss +3 -3
- package/burger/styles/_index.scss +1 -1
- package/button/styles/_index.scss +4 -4
- package/calendar/styles/_index.scss +4 -4
- package/calendar-heatmap/styles/_index.scss +3 -3
- package/card/styles/_index.scss +5 -5
- package/carousel/styles/_index.scss +5 -5
- package/cascader/styles/_index.scss +15 -15
- package/checkbox/styles/_index.scss +20 -5
- package/collapse/styles/_index.scss +6 -6
- package/color-picker/styles/_index.scss +15 -9
- package/command-palette/styles/_index.scss +19 -16
- package/compare/styles/_index.scss +3 -3
- package/context-menu/styles/_index.scss +16 -6
- package/counter/styles/_index.scss +12 -1
- package/date-picker/styles/_index.scss +8 -8
- package/descriptions/styles/_index.scss +9 -9
- package/dialog/styles/_index.scss +7 -6
- package/divider/styles/_index.scss +2 -2
- package/donut-chart/styles/_index.scss +3 -3
- package/drag-drop/styles/_index.scss +11 -6
- package/drawer/styles/_index.scss +15 -6
- package/dropdown/styles/_index.scss +5 -5
- package/empty/styles/_index.scss +4 -4
- package/fesm2022/ngwr-action-sheet.mjs +81 -0
- package/fesm2022/ngwr-action-sheet.mjs.map +1 -0
- package/fesm2022/ngwr-affix.mjs +3 -3
- package/fesm2022/ngwr-alert.mjs +4 -4
- package/fesm2022/ngwr-alert.mjs.map +1 -1
- package/fesm2022/ngwr-anchor.mjs +4 -4
- package/fesm2022/ngwr-anchor.mjs.map +1 -1
- package/fesm2022/ngwr-aurora.mjs +5 -4
- package/fesm2022/ngwr-aurora.mjs.map +1 -1
- package/fesm2022/ngwr-avatar.mjs +4 -4
- package/fesm2022/ngwr-avatar.mjs.map +1 -1
- package/fesm2022/ngwr-back-top.mjs +4 -4
- package/fesm2022/ngwr-back-top.mjs.map +1 -1
- package/fesm2022/ngwr-badge.mjs +8 -8
- package/fesm2022/ngwr-badge.mjs.map +1 -1
- package/fesm2022/ngwr-bar-chart.mjs +4 -4
- package/fesm2022/ngwr-bar-chart.mjs.map +1 -1
- package/fesm2022/ngwr-blur-text.mjs +3 -3
- package/fesm2022/ngwr-border-glow.mjs +4 -4
- package/fesm2022/ngwr-border-glow.mjs.map +1 -1
- package/fesm2022/ngwr-breadcrumbs.mjs +8 -8
- package/fesm2022/ngwr-breadcrumbs.mjs.map +1 -1
- package/fesm2022/ngwr-burger.mjs +4 -4
- package/fesm2022/ngwr-burger.mjs.map +1 -1
- package/fesm2022/ngwr-button.mjs +8 -8
- package/fesm2022/ngwr-button.mjs.map +1 -1
- package/fesm2022/ngwr-calendar-heatmap.mjs +4 -4
- package/fesm2022/ngwr-calendar-heatmap.mjs.map +1 -1
- package/fesm2022/ngwr-calendar.mjs +4 -4
- package/fesm2022/ngwr-calendar.mjs.map +1 -1
- package/fesm2022/ngwr-card.mjs +11 -11
- package/fesm2022/ngwr-card.mjs.map +1 -1
- package/fesm2022/ngwr-carousel.mjs +7 -7
- package/fesm2022/ngwr-carousel.mjs.map +1 -1
- package/fesm2022/ngwr-cascader.mjs +52 -60
- package/fesm2022/ngwr-cascader.mjs.map +1 -1
- package/fesm2022/ngwr-checkbox.mjs +74 -106
- package/fesm2022/ngwr-checkbox.mjs.map +1 -1
- package/fesm2022/ngwr-circular-text.mjs +5 -4
- package/fesm2022/ngwr-circular-text.mjs.map +1 -1
- package/fesm2022/ngwr-click-spark.mjs +5 -4
- package/fesm2022/ngwr-click-spark.mjs.map +1 -1
- package/fesm2022/ngwr-clipboard.mjs +4 -4
- package/fesm2022/ngwr-clipboard.mjs.map +1 -1
- package/fesm2022/ngwr-collapse.mjs +12 -12
- package/fesm2022/ngwr-collapse.mjs.map +1 -1
- package/fesm2022/ngwr-color-picker.mjs +58 -66
- package/fesm2022/ngwr-color-picker.mjs.map +1 -1
- package/fesm2022/ngwr-command-palette.mjs +4 -4
- package/fesm2022/ngwr-command-palette.mjs.map +1 -1
- package/fesm2022/ngwr-compare.mjs +4 -4
- package/fesm2022/ngwr-compare.mjs.map +1 -1
- package/fesm2022/ngwr-confetti.mjs +3 -3
- package/fesm2022/ngwr-context-menu.mjs +86 -15
- package/fesm2022/ngwr-context-menu.mjs.map +1 -1
- package/fesm2022/ngwr-cookie.mjs +19 -6
- package/fesm2022/ngwr-cookie.mjs.map +1 -1
- package/fesm2022/ngwr-counter.mjs +26 -12
- package/fesm2022/ngwr-counter.mjs.map +1 -1
- package/fesm2022/ngwr-date-adapter-fns.mjs +3 -3
- package/fesm2022/ngwr-date-adapter-luxon.mjs +3 -3
- package/fesm2022/ngwr-date-adapter.mjs +10 -5
- package/fesm2022/ngwr-date-adapter.mjs.map +1 -1
- package/fesm2022/ngwr-date-picker.mjs +128 -123
- package/fesm2022/ngwr-date-picker.mjs.map +1 -1
- package/fesm2022/ngwr-decrypt-text.mjs +3 -3
- package/fesm2022/ngwr-density.mjs +7 -7
- package/fesm2022/ngwr-density.mjs.map +1 -1
- package/fesm2022/ngwr-descriptions.mjs +7 -7
- package/fesm2022/ngwr-descriptions.mjs.map +1 -1
- package/fesm2022/ngwr-dialog.mjs +16 -16
- package/fesm2022/ngwr-dialog.mjs.map +1 -1
- package/fesm2022/ngwr-directives.mjs +21 -15
- package/fesm2022/ngwr-directives.mjs.map +1 -1
- package/fesm2022/ngwr-divider.mjs +4 -4
- package/fesm2022/ngwr-divider.mjs.map +1 -1
- package/fesm2022/ngwr-donut-chart.mjs +4 -4
- package/fesm2022/ngwr-donut-chart.mjs.map +1 -1
- package/fesm2022/ngwr-drag-drop.mjs +10 -9
- package/fesm2022/ngwr-drag-drop.mjs.map +1 -1
- package/fesm2022/ngwr-drawer.mjs +19 -18
- package/fesm2022/ngwr-drawer.mjs.map +1 -1
- package/fesm2022/ngwr-dropdown.mjs +13 -12
- package/fesm2022/ngwr-dropdown.mjs.map +1 -1
- package/fesm2022/ngwr-empty.mjs +4 -4
- package/fesm2022/ngwr-empty.mjs.map +1 -1
- package/fesm2022/ngwr-falling-text.mjs +5 -4
- package/fesm2022/ngwr-falling-text.mjs.map +1 -1
- package/fesm2022/ngwr-file-upload.mjs +58 -60
- package/fesm2022/ngwr-file-upload.mjs.map +1 -1
- package/fesm2022/ngwr-form.mjs +11 -11
- package/fesm2022/ngwr-form.mjs.map +1 -1
- package/fesm2022/ngwr-fuzzy-text.mjs +5 -4
- package/fesm2022/ngwr-fuzzy-text.mjs.map +1 -1
- package/fesm2022/ngwr-gauge.mjs +4 -4
- package/fesm2022/ngwr-gauge.mjs.map +1 -1
- package/fesm2022/ngwr-glitch-text.mjs +4 -4
- package/fesm2022/ngwr-glitch-text.mjs.map +1 -1
- package/fesm2022/ngwr-gradient-text.mjs +4 -4
- package/fesm2022/ngwr-gradient-text.mjs.map +1 -1
- package/fesm2022/ngwr-hotkey.mjs +7 -7
- package/fesm2022/ngwr-hotkey.mjs.map +1 -1
- package/fesm2022/ngwr-i18n.mjs +10 -10
- package/fesm2022/ngwr-i18n.mjs.map +1 -1
- package/fesm2022/ngwr-icon-adapters-lucide.mjs +6 -7
- package/fesm2022/ngwr-icon-adapters-lucide.mjs.map +1 -1
- package/fesm2022/ngwr-icon.mjs +4 -4
- package/fesm2022/ngwr-icon.mjs.map +1 -1
- package/fesm2022/ngwr-image-cropper.mjs +6 -5
- package/fesm2022/ngwr-image-cropper.mjs.map +1 -1
- package/fesm2022/ngwr-input-number.mjs +56 -73
- package/fesm2022/ngwr-input-number.mjs.map +1 -1
- package/fesm2022/ngwr-input-otp.mjs +46 -52
- package/fesm2022/ngwr-input-otp.mjs.map +1 -1
- package/fesm2022/ngwr-input.mjs +17 -17
- package/fesm2022/ngwr-input.mjs.map +1 -1
- package/fesm2022/ngwr-keyboard.mjs +4 -4
- package/fesm2022/ngwr-keyboard.mjs.map +1 -1
- package/fesm2022/ngwr-knob.mjs +47 -58
- package/fesm2022/ngwr-knob.mjs.map +1 -1
- package/fesm2022/ngwr-layout.mjs +16 -16
- package/fesm2022/ngwr-layout.mjs.map +1 -1
- package/fesm2022/ngwr-lightbox.mjs +7 -6
- package/fesm2022/ngwr-lightbox.mjs.map +1 -1
- package/fesm2022/ngwr-line-chart.mjs +4 -4
- package/fesm2022/ngwr-line-chart.mjs.map +1 -1
- package/fesm2022/ngwr-list.mjs +8 -8
- package/fesm2022/ngwr-list.mjs.map +1 -1
- package/fesm2022/ngwr-loading-bar.mjs +7 -7
- package/fesm2022/ngwr-loading-bar.mjs.map +1 -1
- package/fesm2022/ngwr-marquee.mjs +6 -5
- package/fesm2022/ngwr-marquee.mjs.map +1 -1
- package/fesm2022/ngwr-media.mjs +4 -4
- package/fesm2022/ngwr-media.mjs.map +1 -1
- package/fesm2022/ngwr-mention.mjs +15 -9
- package/fesm2022/ngwr-mention.mjs.map +1 -1
- package/fesm2022/ngwr-meta.mjs +7 -7
- package/fesm2022/ngwr-meta.mjs.map +1 -1
- package/fesm2022/ngwr-meter-group.mjs +4 -4
- package/fesm2022/ngwr-meter-group.mjs.map +1 -1
- package/fesm2022/ngwr-overlay.mjs +9 -4
- package/fesm2022/ngwr-overlay.mjs.map +1 -1
- package/fesm2022/ngwr-page-header.mjs +4 -4
- package/fesm2022/ngwr-page-header.mjs.map +1 -1
- package/fesm2022/ngwr-pagination.mjs +4 -4
- package/fesm2022/ngwr-pagination.mjs.map +1 -1
- package/fesm2022/ngwr-pipes.mjs +21 -21
- package/fesm2022/ngwr-platform.mjs +169 -5
- package/fesm2022/ngwr-platform.mjs.map +1 -1
- package/fesm2022/ngwr-popconfirm.mjs +7 -7
- package/fesm2022/ngwr-popconfirm.mjs.map +1 -1
- package/fesm2022/ngwr-popover.mjs +7 -7
- package/fesm2022/ngwr-popover.mjs.map +1 -1
- package/fesm2022/ngwr-progress.mjs +4 -4
- package/fesm2022/ngwr-progress.mjs.map +1 -1
- package/fesm2022/ngwr-pull-to-refresh.mjs +172 -0
- package/fesm2022/ngwr-pull-to-refresh.mjs.map +1 -0
- package/fesm2022/ngwr-qr.mjs +5 -5
- package/fesm2022/ngwr-qr.mjs.map +1 -1
- package/fesm2022/ngwr-radio.mjs +27 -52
- package/fesm2022/ngwr-radio.mjs.map +1 -1
- package/fesm2022/ngwr-rating.mjs +35 -48
- package/fesm2022/ngwr-rating.mjs.map +1 -1
- package/fesm2022/ngwr-result.mjs +13 -13
- package/fesm2022/ngwr-result.mjs.map +1 -1
- package/fesm2022/ngwr-rotating-text.mjs +15 -4
- package/fesm2022/ngwr-rotating-text.mjs.map +1 -1
- package/fesm2022/ngwr-scroll.mjs +4 -4
- package/fesm2022/ngwr-scroll.mjs.map +1 -1
- package/fesm2022/ngwr-segmented.mjs +3 -3
- package/fesm2022/ngwr-segmented.mjs.map +1 -1
- package/fesm2022/ngwr-select.mjs +289 -85
- package/fesm2022/ngwr-select.mjs.map +1 -1
- package/fesm2022/ngwr-shiny-text.mjs +7 -7
- package/fesm2022/ngwr-shiny-text.mjs.map +1 -1
- package/fesm2022/ngwr-sidebar.mjs +4 -4
- package/fesm2022/ngwr-sidebar.mjs.map +1 -1
- package/fesm2022/ngwr-skeleton.mjs +4 -4
- package/fesm2022/ngwr-skeleton.mjs.map +1 -1
- package/fesm2022/ngwr-slider.mjs +79 -73
- package/fesm2022/ngwr-slider.mjs.map +1 -1
- package/fesm2022/ngwr-sparkline.mjs +4 -4
- package/fesm2022/ngwr-sparkline.mjs.map +1 -1
- package/fesm2022/ngwr-speed-dial.mjs +13 -5
- package/fesm2022/ngwr-speed-dial.mjs.map +1 -1
- package/fesm2022/ngwr-spinner.mjs +4 -4
- package/fesm2022/ngwr-spinner.mjs.map +1 -1
- package/fesm2022/ngwr-splash-cursor.mjs +4 -4
- package/fesm2022/ngwr-splash-cursor.mjs.map +1 -1
- package/fesm2022/ngwr-split-text.mjs +3 -3
- package/fesm2022/ngwr-splitter.mjs +4 -4
- package/fesm2022/ngwr-splitter.mjs.map +1 -1
- package/fesm2022/ngwr-spotlight-card.mjs +7 -7
- package/fesm2022/ngwr-spotlight-card.mjs.map +1 -1
- package/fesm2022/ngwr-squircle.mjs +7 -7
- package/fesm2022/ngwr-squircle.mjs.map +1 -1
- package/fesm2022/ngwr-star-border.mjs +4 -4
- package/fesm2022/ngwr-star-border.mjs.map +1 -1
- package/fesm2022/ngwr-statistic.mjs +65 -10
- package/fesm2022/ngwr-statistic.mjs.map +1 -1
- package/fesm2022/ngwr-stepper.mjs +8 -8
- package/fesm2022/ngwr-stepper.mjs.map +1 -1
- package/fesm2022/ngwr-storage.mjs +4 -4
- package/fesm2022/ngwr-storage.mjs.map +1 -1
- package/fesm2022/ngwr-switch.mjs +16 -48
- package/fesm2022/ngwr-switch.mjs.map +1 -1
- package/fesm2022/ngwr-table.mjs +824 -20
- package/fesm2022/ngwr-table.mjs.map +1 -1
- package/fesm2022/ngwr-tabs.mjs +9 -8
- package/fesm2022/ngwr-tabs.mjs.map +1 -1
- package/fesm2022/ngwr-textarea.mjs +18 -50
- package/fesm2022/ngwr-textarea.mjs.map +1 -1
- package/fesm2022/ngwr-theme.mjs +20 -5
- package/fesm2022/ngwr-theme.mjs.map +1 -1
- package/fesm2022/ngwr-tilt-card.mjs +27 -11
- package/fesm2022/ngwr-tilt-card.mjs.map +1 -1
- package/fesm2022/ngwr-timeline.mjs +7 -7
- package/fesm2022/ngwr-timeline.mjs.map +1 -1
- package/fesm2022/ngwr-toast.mjs +10 -10
- package/fesm2022/ngwr-toast.mjs.map +1 -1
- package/fesm2022/ngwr-toolbar.mjs +4 -4
- package/fesm2022/ngwr-toolbar.mjs.map +1 -1
- package/fesm2022/ngwr-tree.mjs +280 -84
- package/fesm2022/ngwr-tree.mjs.map +1 -1
- package/fesm2022/ngwr-typewriter.mjs +10 -5
- package/fesm2022/ngwr-typewriter.mjs.map +1 -1
- package/fesm2022/ngwr-typography.mjs +4 -4
- package/fesm2022/ngwr-typography.mjs.map +1 -1
- package/fesm2022/ngwr-validators.mjs +1 -1
- package/fesm2022/ngwr-validators.mjs.map +1 -1
- package/fesm2022/ngwr-version.mjs +1 -1
- package/fesm2022/ngwr-version.mjs.map +1 -1
- package/fesm2022/ngwr-virtual-scroll.mjs +9 -7
- package/fesm2022/ngwr-virtual-scroll.mjs.map +1 -1
- package/fesm2022/ngwr-waves.mjs +6 -5
- package/fesm2022/ngwr-waves.mjs.map +1 -1
- package/fesm2022/ngwr-window.mjs +16 -15
- package/fesm2022/ngwr-window.mjs.map +1 -1
- package/file-upload/styles/_index.scss +11 -11
- package/form/styles/_index.scss +4 -4
- package/gauge/styles/_index.scss +2 -2
- package/glitch-text/styles/_index.scss +1 -1
- package/gradient-text/styles/_index.scss +1 -1
- package/image-cropper/styles/_index.scss +5 -4
- package/input/styles/_index.scss +9 -9
- package/input-number/styles/_index.scss +1 -1
- package/input-otp/styles/_index.scss +5 -5
- package/keyboard/styles/_index.scss +5 -5
- package/knob/styles/_index.scss +6 -2
- package/layout/styles/_index.scss +12 -12
- package/lightbox/styles/_index.scss +10 -8
- package/line-chart/styles/_index.scss +5 -5
- package/list/styles/_index.scss +3 -3
- package/llms-full.txt +31 -5
- package/llms.txt +48 -32
- package/marquee/styles/_index.scss +1 -1
- package/mention/styles/_index.scss +4 -4
- package/meter-group/styles/_index.scss +4 -4
- package/overlay/styles/_index.scss +8 -0
- package/package.json +21 -9
- package/page-header/styles/_index.scss +4 -4
- package/pagination/styles/_index.scss +3 -3
- package/popconfirm/styles/_index.scss +3 -3
- package/popover/styles/_index.scss +5 -5
- package/progress/styles/_index.scss +1 -1
- package/pull-to-refresh/styles/_index.scss +38 -0
- package/radio/styles/_index.scss +4 -4
- package/rating/styles/_index.scss +1 -1
- package/result/styles/_index.scss +3 -3
- package/schematics/migrations/v9/index.js +71 -0
- package/schematics/migrations.json +5 -0
- package/schematics/ng-add/schema.json +1 -1
- package/schematics/use/symbol-map.json +13 -0
- package/segmented/styles/_index.scss +4 -4
- package/select/styles/_index.scss +53 -18
- package/shiny-text/styles/_index.scss +4 -4
- package/sidebar/styles/_index.scss +12 -12
- package/slider/styles/_index.scss +5 -5
- package/speed-dial/styles/_index.scss +22 -6
- package/splash-cursor/styles/_index.scss +1 -0
- package/splitter/styles/_index.scss +7 -4
- package/spotlight-card/styles/_index.scss +7 -7
- package/star-border/styles/_index.scss +3 -3
- package/statistic/styles/_index.scss +51 -4
- package/stepper/styles/_index.scss +6 -6
- package/styles/_typography.scss +4 -1
- package/styles.scss +2 -0
- package/switch/styles/_index.scss +4 -4
- package/table/styles/_index.scss +447 -17
- package/tabs/styles/_index.scss +3 -3
- package/textarea/styles/_index.scss +7 -7
- package/theme/styles/_colors.scss +27 -3
- package/tilt-card/styles/_index.scss +4 -4
- package/timeline/styles/_index.scss +7 -6
- package/toast/styles/_index.scss +11 -11
- package/toolbar/styles/_index.scss +4 -4
- package/tree/styles/_index.scss +45 -15
- package/types/ngwr-action-sheet.d.ts +75 -0
- package/types/ngwr-alert.d.ts +1 -1
- package/types/ngwr-anchor.d.ts +1 -1
- package/types/ngwr-avatar.d.ts +1 -1
- package/types/ngwr-back-top.d.ts +1 -1
- package/types/ngwr-badge.d.ts +4 -4
- package/types/ngwr-bar-chart.d.ts +1 -1
- package/types/ngwr-breadcrumbs.d.ts +1 -1
- package/types/ngwr-burger.d.ts +1 -1
- package/types/ngwr-button.d.ts +3 -3
- package/types/ngwr-calendar-heatmap.d.ts +1 -1
- package/types/ngwr-calendar.d.ts +1 -1
- package/types/ngwr-card.d.ts +1 -1
- package/types/ngwr-carousel.d.ts +1 -1
- package/types/ngwr-cascader.d.ts +27 -16
- package/types/ngwr-checkbox.d.ts +63 -43
- package/types/ngwr-clipboard.d.ts +1 -1
- package/types/ngwr-collapse.d.ts +3 -3
- package/types/ngwr-color-picker.d.ts +24 -19
- package/types/ngwr-command-palette.d.ts +1 -1
- package/types/ngwr-compare.d.ts +1 -1
- package/types/ngwr-context-menu.d.ts +25 -1
- package/types/ngwr-cookie.d.ts +7 -1
- package/types/ngwr-counter.d.ts +9 -2
- package/types/ngwr-date-picker.d.ts +36 -23
- package/types/ngwr-density.d.ts +1 -1
- package/types/ngwr-descriptions.d.ts +1 -1
- package/types/ngwr-dialog.d.ts +1 -1
- package/types/ngwr-directives.d.ts +1 -0
- package/types/ngwr-divider.d.ts +2 -2
- package/types/ngwr-donut-chart.d.ts +1 -1
- package/types/ngwr-drag-drop.d.ts +1 -1
- package/types/ngwr-drawer.d.ts +1 -1
- package/types/ngwr-dropdown.d.ts +1 -1
- package/types/ngwr-empty.d.ts +1 -1
- package/types/ngwr-file-upload.d.ts +28 -17
- package/types/ngwr-form.d.ts +2 -2
- package/types/ngwr-gauge.d.ts +1 -1
- package/types/ngwr-hotkey.d.ts +1 -1
- package/types/ngwr-i18n.d.ts +1 -1
- package/types/ngwr-icon-adapters-lucide.d.ts +5 -3
- package/types/ngwr-icon.d.ts +1 -1
- package/types/ngwr-image-cropper.d.ts +1 -1
- package/types/ngwr-input-number.d.ts +25 -19
- package/types/ngwr-input-otp.d.ts +23 -17
- package/types/ngwr-input.d.ts +2 -2
- package/types/ngwr-keyboard.d.ts +1 -1
- package/types/ngwr-knob.d.ts +24 -19
- package/types/ngwr-layout.d.ts +1 -1
- package/types/ngwr-lightbox.d.ts +1 -1
- package/types/ngwr-line-chart.d.ts +1 -1
- package/types/ngwr-list.d.ts +1 -1
- package/types/ngwr-loading-bar.d.ts +1 -1
- package/types/ngwr-marquee.d.ts +1 -1
- package/types/ngwr-media.d.ts +1 -1
- package/types/ngwr-mention.d.ts +1 -1
- package/types/ngwr-meta.d.ts +1 -1
- package/types/ngwr-meter-group.d.ts +1 -1
- package/types/ngwr-page-header.d.ts +1 -1
- package/types/ngwr-pagination.d.ts +1 -1
- package/types/ngwr-platform.d.ts +93 -2
- package/types/ngwr-popconfirm.d.ts +3 -3
- package/types/ngwr-progress.d.ts +2 -2
- package/types/ngwr-pull-to-refresh.d.ts +69 -0
- package/types/ngwr-qr.d.ts +1 -1
- package/types/ngwr-radio.d.ts +25 -22
- package/types/ngwr-rating.d.ts +28 -20
- package/types/ngwr-result.d.ts +1 -1
- package/types/ngwr-rotating-text.d.ts +1 -0
- package/types/ngwr-scroll.d.ts +1 -1
- package/types/ngwr-segmented.d.ts +1 -1
- package/types/ngwr-select.d.ts +93 -26
- package/types/ngwr-sidebar.d.ts +1 -1
- package/types/ngwr-skeleton.d.ts +2 -2
- package/types/ngwr-slider.d.ts +35 -21
- package/types/ngwr-sparkline.d.ts +1 -1
- package/types/ngwr-speed-dial.d.ts +8 -2
- package/types/ngwr-spinner.d.ts +1 -1
- package/types/ngwr-splitter.d.ts +1 -1
- package/types/ngwr-squircle.d.ts +1 -1
- package/types/ngwr-statistic.d.ts +40 -5
- package/types/ngwr-stepper.d.ts +2 -2
- package/types/ngwr-storage.d.ts +1 -1
- package/types/ngwr-switch.d.ts +20 -16
- package/types/ngwr-table.d.ts +417 -6
- package/types/ngwr-tabs.d.ts +1 -1
- package/types/ngwr-textarea.d.ts +21 -18
- package/types/ngwr-theme.d.ts +7 -2
- package/types/ngwr-tilt-card.d.ts +3 -0
- package/types/ngwr-timeline.d.ts +1 -1
- package/types/ngwr-toast.d.ts +1 -1
- package/types/ngwr-toolbar.d.ts +1 -1
- package/types/ngwr-tree.d.ts +100 -19
- package/types/ngwr-typography.d.ts +1 -1
- package/types/ngwr-validators.d.ts +1 -1
- package/types/ngwr-version.d.ts +1 -1
- package/types/ngwr-virtual-scroll.d.ts +1 -1
- package/types/ngwr-window.d.ts +1 -1
- package/typography/styles/_index.scss +11 -11
- package/virtual-scroll/styles/_index.scss +1 -1
- package/waves/styles/_index.scss +1 -1
- package/window/styles/_index.scss +18 -18
package/fesm2022/ngwr-list.mjs
CHANGED
|
@@ -28,7 +28,7 @@ import { input, computed, ViewEncapsulation, Component } from '@angular/core';
|
|
|
28
28
|
* </wr-list>
|
|
29
29
|
* ```
|
|
30
30
|
*
|
|
31
|
-
* @see https://ngwr.dev/components/list
|
|
31
|
+
* @see https://ngwr.dev/reference/components/list
|
|
32
32
|
*/
|
|
33
33
|
class WrList {
|
|
34
34
|
/** Wrap the list in a card-style border + radius. @default false */
|
|
@@ -51,15 +51,15 @@ class WrList {
|
|
|
51
51
|
return parts.join(' ');
|
|
52
52
|
}, /* @ts-ignore */
|
|
53
53
|
...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
54
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
55
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: WrList, isStandalone: true, selector: "wr-list", inputs: { bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, dividers: { classPropertyName: "dividers", publicName: "dividers", isSignal: true, isRequired: false, transformFunction: null }, dense: { classPropertyName: "dense", publicName: "dense", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.aria-label": "ariaLabel() || null" } }, ngImport: i0, template: '<ul class="wr-list__items" role="list"><ng-content /></ul>', isInline: true, styles: [":root{--wr-color-white: #ffffff;--wr-color-white-rgb: 255, 255, 255;--wr-color-black: #000000;--wr-color-black-rgb: 0, 0, 0;--wr-color-backdrop-rgb: 0, 0, 0;--wr-color-hover: rgba(var(--wr-color-light-rgb), .4);--wr-color-border: rgba(var(--wr-color-light-rgb), .5);--wr-color-border-subtle: rgba(var(--wr-color-light-rgb), .35);--wr-color-border-strong: rgba(var(--wr-color-light-rgb), .6);--wr-color-overlay: rgba(var(--wr-color-backdrop-rgb), .45);--wr-color-text-muted: rgba(var(--wr-color-medium-rgb), .85);--wr-color-text-faint: rgba(var(--wr-color-medium-rgb), .6);--wr-color-gray-50: #f8fafc;--wr-color-gray-100: #f1f5f9;--wr-color-gray-200: #e2e8f0;--wr-color-gray-300: #cbd5e1;--wr-color-gray-400: #94a3b8;--wr-color-gray-500: #64748b;--wr-color-gray-600: #475569;--wr-color-gray-700: #334155;--wr-color-gray-800: #1e293b;--wr-color-gray-900: #0f172a;--wr-color-gray-950: #020617;--wr-color-surface: var(--wr-color-white);--wr-color-on-surface: var(--wr-color-dark);--wr-color-on-surface-muted: var(--wr-color-medium);--wr-color-primary: #3969e2;--wr-color-primary-rgb: 57, 105, 226;--wr-color-primary-contrast: #ffffff;--wr-color-primary-dark: rgb(34.7577092511, 88.1497797357, 222.7422907489);--wr-color-primary-darker: rgb(29.6387665198, 78.6960352423, 202.3612334802);--wr-color-primary-light: rgb(79.2422907489, 121.8502202643, 229.2577092511);--wr-color-primary-lighter: rgb(101.4845814978, 138.7004405286, 232.5154185022);--wr-color-secondary: #f51c6a;--wr-color-secondary-rgb: 245, 28, 106;--wr-color-secondary-contrast: #ffffff;--wr-color-secondary-dark: rgb(237.0569620253, 10.4430379747, 91.8987341772);--wr-color-secondary-darker: rgb(212.6329113924, 9.3670886076, 82.4303797468);--wr-color-secondary-light: rgb(246.0759493671, 52.4240506329, 122.0316455696);--wr-color-secondary-lighter: rgb(247.1518987342, 76.8481012658, 138.0632911392);--wr-color-success: #00a400;--wr-color-success-rgb: 0, 164, 0;--wr-color-success-contrast: #ffffff;--wr-color-success-dark: rgb(0, 138.5, 0);--wr-color-success-darker: #007100;--wr-color-success-light: rgb(0, 189.5, 0);--wr-color-success-lighter: #00d700;--wr-color-warning: #ffba00;--wr-color-warning-rgb: 255, 186, 0;--wr-color-warning-contrast: #171616;--wr-color-warning-dark: rgb(229.5, 167.4, 0);--wr-color-warning-darker: rgb(204, 148.8, 0);--wr-color-warning-light: rgb(255, 192.9, 25.5);--wr-color-warning-lighter: rgb(255, 199.8, 51);--wr-color-danger: #fa383e;--wr-color-danger-rgb: 250, 56, 62;--wr-color-danger-contrast: #ffffff;--wr-color-danger-dark: rgb(249.375, 31.125, 37.875);--wr-color-danger-darker: rgb(248.75, 6.25, 13.75);--wr-color-danger-light: rgb(250.625, 80.875, 86.125);--wr-color-danger-lighter: rgb(251.25, 105.75, 110.25);--wr-color-info: #3b82f6;--wr-color-info-rgb: 59, 130, 246;--wr-color-info-contrast: #ffffff;--wr-color-info-dark: rgb(34.6195121951, 114.4512195122, 244.8804878049);--wr-color-info-darker: rgb(11.1512195122, 99.1219512195, 242.8487804878);--wr-color-info-light: rgb(83.3804878049, 145.5487804878, 247.1195121951);--wr-color-info-lighter: rgb(107.7609756098, 161.0975609756, 248.2390243902);--wr-color-light: #cbd5e1;--wr-color-light-rgb: 203, 213, 225;--wr-color-light-contrast: #171616;--wr-color-light-dark: rgb(186.8292682927, 199.9390243902, 215.6707317073);--wr-color-light-darker: rgb(170.6585365854, 186.8780487805, 206.3414634146);--wr-color-light-light: rgb(219.1707317073, 226.0609756098, 234.3292682927);--wr-color-light-lighter: rgb(235.3414634146, 239.1219512195, 243.6585365854);--wr-color-medium: #8594a4;--wr-color-medium-rgb: 133, 148, 164;--wr-color-medium-contrast: #ffffff;--wr-color-medium-dark: rgb(118.3943661972, 135.1901408451, 153.1056338028);--wr-color-medium-darker: rgb(105.0985915493, 122.4225352113, 140.9014084507);--wr-color-medium-light: rgb(147.6056338028, 160.8098591549, 174.8943661972);--wr-color-medium-lighter: rgb(162.2112676056, 173.6197183099, 185.7887323944);--wr-color-dark: #0f172a;--wr-color-dark-rgb: 15, 23, 42;--wr-color-dark-contrast: #ffffff;--wr-color-dark-dark: rgb(8.2894736842, 12.7105263158, 23.2105263158);--wr-color-dark-darker: rgb(1.5789473684, 2.4210526316, 4.4210526316);--wr-color-dark-light: rgb(21.7105263158, 33.2894736842, 60.7894736842);--wr-color-dark-lighter: rgb(28.4210526316, 43.5789473684, 79.5789473684);--wr-color-primary-soft: rgba(var(--wr-color-primary-rgb), .12);--wr-color-primary-soft-border: rgba(var(--wr-color-primary-rgb), .3);--wr-color-primary-soft-contrast: color-mix(in srgb, var(--wr-color-primary) 62%, var(--wr-color-dark));--wr-color-primary-active: rgba(var(--wr-color-primary-rgb), .2);--wr-color-secondary-soft: rgba(var(--wr-color-secondary-rgb), .12);--wr-color-secondary-soft-border: rgba(var(--wr-color-secondary-rgb), .3);--wr-color-secondary-soft-contrast: color-mix(in srgb, var(--wr-color-secondary) 62%, var(--wr-color-dark));--wr-color-secondary-active: rgba(var(--wr-color-secondary-rgb), .2);--wr-color-success-soft: rgba(var(--wr-color-success-rgb), .12);--wr-color-success-soft-border: rgba(var(--wr-color-success-rgb), .3);--wr-color-success-soft-contrast: color-mix(in srgb, var(--wr-color-success) 62%, var(--wr-color-dark));--wr-color-success-active: rgba(var(--wr-color-success-rgb), .2);--wr-color-warning-soft: rgba(var(--wr-color-warning-rgb), .12);--wr-color-warning-soft-border: rgba(var(--wr-color-warning-rgb), .3);--wr-color-warning-soft-contrast: color-mix(in srgb, var(--wr-color-warning) 62%, var(--wr-color-dark));--wr-color-warning-active: rgba(var(--wr-color-warning-rgb), .2);--wr-color-danger-soft: rgba(var(--wr-color-danger-rgb), .12);--wr-color-danger-soft-border: rgba(var(--wr-color-danger-rgb), .3);--wr-color-danger-soft-contrast: color-mix(in srgb, var(--wr-color-danger) 62%, var(--wr-color-dark));--wr-color-danger-active: rgba(var(--wr-color-danger-rgb), .2);--wr-color-info-soft: rgba(var(--wr-color-info-rgb), .12);--wr-color-info-soft-border: rgba(var(--wr-color-info-rgb), .3);--wr-color-info-soft-contrast: color-mix(in srgb, var(--wr-color-info) 62%, var(--wr-color-dark));--wr-color-info-active: rgba(var(--wr-color-info-rgb), .2);--wr-color-medium-soft: rgba(var(--wr-color-medium-rgb), .12);--wr-color-medium-soft-border: rgba(var(--wr-color-medium-rgb), .3);--wr-color-medium-soft-contrast: color-mix(in srgb, var(--wr-color-medium) 62%, var(--wr-color-dark));--wr-color-medium-active: rgba(var(--wr-color-medium-rgb), .2)}:root{--wr-border-radius-sm: .375rem;--wr-border-radius-base: .625rem;--wr-border-radius-lg: 1rem;--wr-border-radius-pill: 50rem;--wr-control-padding-y-sm: .125rem;--wr-control-padding-y-md: .25rem;--wr-control-padding-y-lg: .3125rem;--wr-control-padding-x-sm: .5rem;--wr-control-padding-x-md: .75rem;--wr-control-padding-x-lg: 1rem;--wr-control-line-height-sm: 1rem;--wr-control-line-height-md: 1.25rem;--wr-control-line-height-lg: 1.5rem;--wr-control-font-size-sm: var(--wr-text-xs);--wr-control-font-size-md: var(--wr-text-sm);--wr-control-font-size-lg: var(--wr-text-base);--wr-control-radius-sm: 5px;--wr-control-radius-md: 6px;--wr-control-radius-lg: 7px;--wr-ease-linear: linear;--wr-ease-out: cubic-bezier(.16, 1, .3, 1);--wr-ease-in: cubic-bezier(.7, 0, .84, 0);--wr-ease-in-out: cubic-bezier(.65, 0, .35, 1);--wr-ease-spring: cubic-bezier(.34, 1.56, .64, 1);--wr-duration-fast: .1s;--wr-duration-base: .15s;--wr-duration-slow: .3s;--wr-duration-slower: .5s;--wr-transition-short: var(--wr-duration-fast) var(--wr-ease-out);--wr-transition-base: var(--wr-duration-base) var(--wr-ease-linear);--wr-transition-long: var(--wr-duration-slow) var(--wr-ease-out);--wr-shadow-xs: 0 1px 2px rgb(0 0 0 / 5%);--wr-shadow-sm: 0 2px 8px rgb(0 0 0 / 15%);--wr-shadow-overlay: 0 8px 24px rgb(0 0 0 / 12%), 0 2px 4px rgb(0 0 0 / 6%);--wr-shadow-float: 0 8px 24px rgb(0 0 0 / 18%);--wr-shadow-modal: 0 20px 48px rgb(0 0 0 / 25%);--wr-z-overlay: 1000;--wr-z-window: 1100;--wr-z-top: 9999;--wr-overlay-duration: var(--wr-duration-base);--wr-overlay-ease: var(--wr-ease-out);--wr-font-family-base: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;--wr-font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;--wr-text-xs: .75rem;--wr-text-sm: .875rem;--wr-text-base: 1rem;--wr-text-lg: 1.125rem;--wr-text-xl: 1.25rem;--wr-text-2xl: 1.5rem;--wr-text-3xl: 1.875rem;--wr-text-4xl: 2.25rem;--wr-text-5xl: 3rem;--wr-font-weight-thin: 200;--wr-font-weight-light: 300;--wr-font-weight-regular: 400;--wr-font-weight-medium: 500;--wr-font-weight-semibold: 600;--wr-font-weight-bold: 700;--wr-font-weight-extrabold: 800;--wr-leading-none: 1;--wr-leading-tight: 1.25;--wr-leading-snug: 1.375;--wr-leading-normal: 1.5;--wr-leading-relaxed: 1.625;--wr-leading-loose: 2;--wr-tracking-tighter: -.05em;--wr-tracking-tight: -.025em;--wr-tracking-normal: 0;--wr-tracking-wide: .025em;--wr-tracking-wider: .05em;--wr-tracking-widest: .1em}@keyframes wr-overlay-in{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}[data-theme=dark]{--wr-color-white: #0b1120;--wr-color-white-rgb: 11, 17, 32;--wr-color-dark: #e6ebf3;--wr-color-dark-rgb: 230, 235, 243;--wr-color-dark-contrast: #0b1120;--wr-color-white-contrast: #e6ebf3;--wr-color-light: #262f44;--wr-color-light-rgb: 38, 47, 68;--wr-color-light-contrast: #e6ebf3;--wr-color-light-lighter: #1a2236;--wr-color-light-darker: #3a4661;--wr-color-medium: #9aa6b8;--wr-color-medium-rgb: 154, 166, 184;--wr-color-primary: #5b85ff;--wr-color-primary-rgb: 91, 133, 255;--wr-color-primary-light: #7a9eff;--wr-color-primary-dark: #2f56c9;--wr-color-primary-lighter: #99b6ff;--wr-color-primary-darker: #1f3a99;--wr-color-success: #34c759;--wr-color-success-rgb: 52, 199, 89;--wr-color-success-light: rgb(69.874501992, 206.625498008, 104.2948207171);--wr-color-success-lighter: rgb(90.0916334661, 211.9083665339, 120.7529880478);--wr-color-success-dark: rgb(46.7171314741, 178.7828685259, 79.9581673307);--wr-color-success-darker: rgb(41.4342629482, 158.5657370518, 70.9163346614);--wr-color-warning: #ffcc33;--wr-color-warning-rgb: 255, 204, 51;--wr-color-warning-light: rgb(255, 210.375, 76.5);--wr-color-warning-lighter: rgb(255, 216.75, 102);--wr-color-warning-dark: rgb(255, 197.625, 25.5);--wr-color-warning-darker: rgb(255, 191.25, 0);--wr-color-danger: #ff5c5c;--wr-color-danger-rgb: 255, 92, 92;--wr-color-danger-light: rgb(255, 117.5, 117.5);--wr-color-danger-lighter: #ff8f8f;--wr-color-danger-dark: rgb(255, 66.5, 66.5);--wr-color-danger-darker: #ff2929;--wr-shadow-xs: 0 1px 2px rgb(0 0 0 / 35%);--wr-shadow-sm: 0 2px 8px rgb(0 0 0 / 45%);--wr-shadow-overlay: 0 8px 24px rgb(0 0 0 / 50%), 0 2px 4px rgb(0 0 0 / 35%);--wr-shadow-float: 0 8px 24px rgb(0 0 0 / 55%);--wr-shadow-modal: 0 24px 56px rgb(0 0 0 / 60%);color-scheme:dark}.wr-tabs__tab:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--wr-color-primary-rgb),.25)}.wr-sidebar__entry:focus-visible,.wr-sidebar__item:focus-visible,.wr-sidebar__group-toggle:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--wr-color-primary-rgb),.25)}.wr-anchor__link:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--wr-color-primary-rgb),.25)}.wr-collapse__header:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--wr-color-primary-rgb),.25)}.wr-command-palette__option:focus-visible,.wr-command-palette__panel input:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--wr-color-primary-rgb),.25)}.wr-mention__option:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--wr-color-primary-rgb),.25)}.wr-segmented__option:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--wr-color-primary-rgb),.25)}.wr-back-top:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--wr-color-primary-rgb),.25)}.wr-carousel__nav:focus-visible,.wr-carousel__dot:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--wr-color-primary-rgb),.25)}.wr-speed-dial__trigger:focus-visible,.wr-speed-dial__action:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--wr-color-primary-rgb),.25)}.wr-stepper__step:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--wr-color-primary-rgb),.25)}.wr-toast__close:focus-visible,.wr-toast__copy:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--wr-color-primary-rgb),.25)}.wr-window__chrome-action:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--wr-color-primary-rgb),.25)}.wr-date-picker__trigger:focus-visible,.wr-time-picker__step:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--wr-color-primary-rgb),.25)}.wr-dropdown-item:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--wr-color-primary-rgb),.25)}.wr-alert__close:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--wr-color-primary-rgb),.25)}.wr-list{--wr-list-item-padding-y: .625rem;--wr-list-item-padding-x: 1rem;--wr-list-item-gap: .75rem;--wr-list-divider-color: var(--wr-color-light);--wr-list-bg: transparent;--wr-list-hover-bg: var(--wr-color-hover);--wr-list-active-bg: rgba(var(--wr-color-primary-rgb), .08);display:block;font-family:var(--wr-font-family-base);font-size:var(--wr-text-sm);color:var(--wr-color-dark);background:var(--wr-list-bg)}.wr-list__items{list-style:none;margin:0;padding:0}.wr-list--bordered{border:1px solid var(--wr-list-divider-color);border-radius:var(--wr-border-radius-base)}@supports (corner-shape: squircle){.wr-list--bordered{corner-shape:squircle;border-radius:calc(var(--wr-border-radius-base) * 1.85)}}.wr-list--bordered{overflow:hidden}.wr-list--dividers .wr-list__item:not(:last-child){border-bottom:1px solid var(--wr-list-divider-color)}.wr-list--dense{--wr-list-item-padding-y: .375rem}.wr-list__item{display:flex;align-items:center;gap:var(--wr-list-item-gap);padding:calc(var(--wr-list-item-padding-y) * var(--wr-density-y, 1)) calc(var(--wr-list-item-padding-x) * var(--wr-density-x, 1));color:inherit;transition:background .12s ease}.wr-list__item--interactive{cursor:pointer}.wr-list__item--interactive:hover{background:var(--wr-list-hover-bg)}.wr-list__item--interactive:active{background:var(--wr-list-active-bg)}.wr-list__item--interactive:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--wr-color-primary-rgb),.25);outline-offset:-2px}.wr-list__item--disabled{opacity:.55;pointer-events:none;cursor:not-allowed}.wr-list__leading,.wr-list__trailing{display:inline-flex;align-items:center;flex:0 0 auto;color:rgba(var(--wr-color-dark-rgb),.65)}.wr-list__leading:empty,.wr-list__trailing:empty{display:none}.wr-list__body{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], encapsulation: i0.ViewEncapsulation.None });
|
|
54
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrList, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
55
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: WrList, isStandalone: true, selector: "wr-list", inputs: { bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, dividers: { classPropertyName: "dividers", publicName: "dividers", isSignal: true, isRequired: false, transformFunction: null }, dense: { classPropertyName: "dense", publicName: "dense", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.aria-label": "ariaLabel() || null" } }, ngImport: i0, template: '<ul class="wr-list__items" role="list"><ng-content /></ul>', isInline: true, styles: [":root{--wr-color-white: #ffffff;--wr-color-white-rgb: 255, 255, 255;--wr-color-black: #000000;--wr-color-black-rgb: 0, 0, 0;--wr-color-backdrop-rgb: 0, 0, 0;--wr-color-hover: rgba(var(--wr-color-light-rgb), .4);--wr-color-border: rgba(var(--wr-color-light-rgb), .5);--wr-color-border-subtle: rgba(var(--wr-color-light-rgb), .35);--wr-color-border-strong: rgba(var(--wr-color-light-rgb), .6);--wr-color-overlay: rgba(var(--wr-color-backdrop-rgb), .45);--wr-color-text-muted: rgba(var(--wr-color-medium-rgb), .85);--wr-color-text-faint: rgba(var(--wr-color-medium-rgb), .6);--wr-color-gray-50: #f8fafc;--wr-color-gray-100: #f1f5f9;--wr-color-gray-200: #e2e8f0;--wr-color-gray-300: #cbd5e1;--wr-color-gray-400: #94a3b8;--wr-color-gray-500: #64748b;--wr-color-gray-600: #475569;--wr-color-gray-700: #334155;--wr-color-gray-800: #1e293b;--wr-color-gray-900: #0f172a;--wr-color-gray-950: #020617;--wr-color-surface: var(--wr-color-white);--wr-color-surface-rgb: var(--wr-color-white-rgb);--wr-color-on-surface: var(--wr-color-dark);--wr-color-on-surface-rgb: var(--wr-color-dark-rgb);--wr-color-on-surface-muted: var(--wr-color-medium);--wr-color-on-surface-muted-rgb: var(--wr-color-medium-rgb);--wr-color-outline: var(--wr-color-light);--wr-color-outline-rgb: var(--wr-color-light-rgb);--wr-color-primary: #3969e2;--wr-color-primary-rgb: 57, 105, 226;--wr-color-primary-contrast: #ffffff;--wr-color-primary-dark: rgb(34.7577092511, 88.1497797357, 222.7422907489);--wr-color-primary-darker: rgb(29.6387665198, 78.6960352423, 202.3612334802);--wr-color-primary-light: rgb(79.2422907489, 121.8502202643, 229.2577092511);--wr-color-primary-lighter: rgb(101.4845814978, 138.7004405286, 232.5154185022);--wr-color-secondary: #f51c6a;--wr-color-secondary-rgb: 245, 28, 106;--wr-color-secondary-contrast: #ffffff;--wr-color-secondary-dark: rgb(237.0569620253, 10.4430379747, 91.8987341772);--wr-color-secondary-darker: rgb(212.6329113924, 9.3670886076, 82.4303797468);--wr-color-secondary-light: rgb(246.0759493671, 52.4240506329, 122.0316455696);--wr-color-secondary-lighter: rgb(247.1518987342, 76.8481012658, 138.0632911392);--wr-color-success: #00a400;--wr-color-success-rgb: 0, 164, 0;--wr-color-success-contrast: #ffffff;--wr-color-success-dark: rgb(0, 138.5, 0);--wr-color-success-darker: #007100;--wr-color-success-light: rgb(0, 189.5, 0);--wr-color-success-lighter: #00d700;--wr-color-warning: #ffba00;--wr-color-warning-rgb: 255, 186, 0;--wr-color-warning-contrast: #171616;--wr-color-warning-dark: rgb(229.5, 167.4, 0);--wr-color-warning-darker: rgb(204, 148.8, 0);--wr-color-warning-light: rgb(255, 192.9, 25.5);--wr-color-warning-lighter: rgb(255, 199.8, 51);--wr-color-danger: #fa383e;--wr-color-danger-rgb: 250, 56, 62;--wr-color-danger-contrast: #ffffff;--wr-color-danger-dark: rgb(249.375, 31.125, 37.875);--wr-color-danger-darker: rgb(248.75, 6.25, 13.75);--wr-color-danger-light: rgb(250.625, 80.875, 86.125);--wr-color-danger-lighter: rgb(251.25, 105.75, 110.25);--wr-color-info: #3b82f6;--wr-color-info-rgb: 59, 130, 246;--wr-color-info-contrast: #ffffff;--wr-color-info-dark: rgb(34.6195121951, 114.4512195122, 244.8804878049);--wr-color-info-darker: rgb(11.1512195122, 99.1219512195, 242.8487804878);--wr-color-info-light: rgb(83.3804878049, 145.5487804878, 247.1195121951);--wr-color-info-lighter: rgb(107.7609756098, 161.0975609756, 248.2390243902);--wr-color-light: #cbd5e1;--wr-color-light-rgb: 203, 213, 225;--wr-color-light-contrast: #171616;--wr-color-light-dark: rgb(186.8292682927, 199.9390243902, 215.6707317073);--wr-color-light-darker: rgb(170.6585365854, 186.8780487805, 206.3414634146);--wr-color-light-light: rgb(219.1707317073, 226.0609756098, 234.3292682927);--wr-color-light-lighter: rgb(235.3414634146, 239.1219512195, 243.6585365854);--wr-color-medium: #8594a4;--wr-color-medium-rgb: 133, 148, 164;--wr-color-medium-contrast: #ffffff;--wr-color-medium-dark: rgb(118.3943661972, 135.1901408451, 153.1056338028);--wr-color-medium-darker: rgb(105.0985915493, 122.4225352113, 140.9014084507);--wr-color-medium-light: rgb(147.6056338028, 160.8098591549, 174.8943661972);--wr-color-medium-lighter: rgb(162.2112676056, 173.6197183099, 185.7887323944);--wr-color-dark: #0f172a;--wr-color-dark-rgb: 15, 23, 42;--wr-color-dark-contrast: #ffffff;--wr-color-dark-dark: rgb(8.2894736842, 12.7105263158, 23.2105263158);--wr-color-dark-darker: rgb(1.5789473684, 2.4210526316, 4.4210526316);--wr-color-dark-light: rgb(21.7105263158, 33.2894736842, 60.7894736842);--wr-color-dark-lighter: rgb(28.4210526316, 43.5789473684, 79.5789473684);--wr-color-primary-soft: rgba(var(--wr-color-primary-rgb), .12);--wr-color-primary-soft-border: rgba(var(--wr-color-primary-rgb), .3);--wr-color-primary-soft-contrast: color-mix(in srgb, var(--wr-color-primary) 62%, var(--wr-color-dark));--wr-color-primary-active: rgba(var(--wr-color-primary-rgb), .2);--wr-color-secondary-soft: rgba(var(--wr-color-secondary-rgb), .12);--wr-color-secondary-soft-border: rgba(var(--wr-color-secondary-rgb), .3);--wr-color-secondary-soft-contrast: color-mix(in srgb, var(--wr-color-secondary) 62%, var(--wr-color-dark));--wr-color-secondary-active: rgba(var(--wr-color-secondary-rgb), .2);--wr-color-success-soft: rgba(var(--wr-color-success-rgb), .12);--wr-color-success-soft-border: rgba(var(--wr-color-success-rgb), .3);--wr-color-success-soft-contrast: color-mix(in srgb, var(--wr-color-success) 62%, var(--wr-color-dark));--wr-color-success-active: rgba(var(--wr-color-success-rgb), .2);--wr-color-warning-soft: rgba(var(--wr-color-warning-rgb), .12);--wr-color-warning-soft-border: rgba(var(--wr-color-warning-rgb), .3);--wr-color-warning-soft-contrast: color-mix(in srgb, var(--wr-color-warning) 62%, var(--wr-color-dark));--wr-color-warning-active: rgba(var(--wr-color-warning-rgb), .2);--wr-color-danger-soft: rgba(var(--wr-color-danger-rgb), .12);--wr-color-danger-soft-border: rgba(var(--wr-color-danger-rgb), .3);--wr-color-danger-soft-contrast: color-mix(in srgb, var(--wr-color-danger) 62%, var(--wr-color-dark));--wr-color-danger-active: rgba(var(--wr-color-danger-rgb), .2);--wr-color-info-soft: rgba(var(--wr-color-info-rgb), .12);--wr-color-info-soft-border: rgba(var(--wr-color-info-rgb), .3);--wr-color-info-soft-contrast: color-mix(in srgb, var(--wr-color-info) 62%, var(--wr-color-dark));--wr-color-info-active: rgba(var(--wr-color-info-rgb), .2);--wr-color-medium-soft: rgba(var(--wr-color-medium-rgb), .12);--wr-color-medium-soft-border: rgba(var(--wr-color-medium-rgb), .3);--wr-color-medium-soft-contrast: color-mix(in srgb, var(--wr-color-medium) 62%, var(--wr-color-dark));--wr-color-medium-active: rgba(var(--wr-color-medium-rgb), .2)}:root{--wr-border-radius-sm: .375rem;--wr-border-radius-base: .625rem;--wr-border-radius-lg: 1rem;--wr-border-radius-pill: 50rem;--wr-control-padding-y-sm: .125rem;--wr-control-padding-y-md: .25rem;--wr-control-padding-y-lg: .3125rem;--wr-control-padding-x-sm: .5rem;--wr-control-padding-x-md: .75rem;--wr-control-padding-x-lg: 1rem;--wr-control-line-height-sm: 1rem;--wr-control-line-height-md: 1.25rem;--wr-control-line-height-lg: 1.5rem;--wr-control-font-size-sm: var(--wr-text-xs);--wr-control-font-size-md: var(--wr-text-sm);--wr-control-font-size-lg: var(--wr-text-base);--wr-control-radius-sm: 5px;--wr-control-radius-md: 6px;--wr-control-radius-lg: 7px;--wr-ease-linear: linear;--wr-ease-out: cubic-bezier(.16, 1, .3, 1);--wr-ease-in: cubic-bezier(.7, 0, .84, 0);--wr-ease-in-out: cubic-bezier(.65, 0, .35, 1);--wr-ease-spring: cubic-bezier(.34, 1.56, .64, 1);--wr-duration-fast: .1s;--wr-duration-base: .15s;--wr-duration-slow: .3s;--wr-duration-slower: .5s;--wr-transition-short: var(--wr-duration-fast) var(--wr-ease-out);--wr-transition-base: var(--wr-duration-base) var(--wr-ease-linear);--wr-transition-long: var(--wr-duration-slow) var(--wr-ease-out);--wr-shadow-xs: 0 1px 2px rgb(0 0 0 / 5%);--wr-shadow-sm: 0 2px 8px rgb(0 0 0 / 15%);--wr-shadow-overlay: 0 8px 24px rgb(0 0 0 / 12%), 0 2px 4px rgb(0 0 0 / 6%);--wr-shadow-float: 0 8px 24px rgb(0 0 0 / 18%);--wr-shadow-modal: 0 20px 48px rgb(0 0 0 / 25%);--wr-z-overlay: 1000;--wr-z-window: 1100;--wr-z-top: 9999;--wr-overlay-duration: var(--wr-duration-base);--wr-overlay-ease: var(--wr-ease-out);--wr-font-family-base: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;--wr-font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;--wr-text-xs: .75rem;--wr-text-sm: .875rem;--wr-text-base: 1rem;--wr-text-lg: 1.125rem;--wr-text-xl: 1.25rem;--wr-text-2xl: 1.5rem;--wr-text-3xl: 1.875rem;--wr-text-4xl: 2.25rem;--wr-text-5xl: 3rem;--wr-font-weight-thin: 200;--wr-font-weight-light: 300;--wr-font-weight-regular: 400;--wr-font-weight-medium: 500;--wr-font-weight-semibold: 600;--wr-font-weight-bold: 700;--wr-font-weight-extrabold: 800;--wr-leading-none: 1;--wr-leading-tight: 1.25;--wr-leading-snug: 1.375;--wr-leading-normal: 1.5;--wr-leading-relaxed: 1.625;--wr-leading-loose: 2;--wr-tracking-tighter: -.05em;--wr-tracking-tight: -.025em;--wr-tracking-normal: 0;--wr-tracking-wide: .025em;--wr-tracking-wider: .05em;--wr-tracking-widest: .1em}@keyframes wr-overlay-in{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}[data-theme=dark]{--wr-color-white: #0b1120;--wr-color-white-rgb: 11, 17, 32;--wr-color-dark: #e6ebf3;--wr-color-dark-rgb: 230, 235, 243;--wr-color-dark-contrast: #0b1120;--wr-color-white-contrast: #e6ebf3;--wr-color-light: #262f44;--wr-color-light-rgb: 38, 47, 68;--wr-color-light-contrast: #e6ebf3;--wr-color-light-lighter: #1a2236;--wr-color-light-darker: #3a4661;--wr-color-medium: #9aa6b8;--wr-color-medium-rgb: 154, 166, 184;--wr-color-primary: #5b85ff;--wr-color-primary-rgb: 91, 133, 255;--wr-color-primary-light: #7a9eff;--wr-color-primary-dark: #2f56c9;--wr-color-primary-lighter: #99b6ff;--wr-color-primary-darker: #1f3a99;--wr-color-success: #34c759;--wr-color-success-rgb: 52, 199, 89;--wr-color-success-light: rgb(69.874501992, 206.625498008, 104.2948207171);--wr-color-success-lighter: rgb(90.0916334661, 211.9083665339, 120.7529880478);--wr-color-success-dark: rgb(46.7171314741, 178.7828685259, 79.9581673307);--wr-color-success-darker: rgb(41.4342629482, 158.5657370518, 70.9163346614);--wr-color-warning: #ffcc33;--wr-color-warning-rgb: 255, 204, 51;--wr-color-warning-light: rgb(255, 210.375, 76.5);--wr-color-warning-lighter: rgb(255, 216.75, 102);--wr-color-warning-dark: rgb(255, 197.625, 25.5);--wr-color-warning-darker: rgb(255, 191.25, 0);--wr-color-danger: #ff5c5c;--wr-color-danger-rgb: 255, 92, 92;--wr-color-danger-light: rgb(255, 117.5, 117.5);--wr-color-danger-lighter: #ff8f8f;--wr-color-danger-dark: rgb(255, 66.5, 66.5);--wr-color-danger-darker: #ff2929;--wr-shadow-xs: 0 1px 2px rgb(0 0 0 / 35%);--wr-shadow-sm: 0 2px 8px rgb(0 0 0 / 45%);--wr-shadow-overlay: 0 8px 24px rgb(0 0 0 / 50%), 0 2px 4px rgb(0 0 0 / 35%);--wr-shadow-float: 0 8px 24px rgb(0 0 0 / 55%);--wr-shadow-modal: 0 24px 56px rgb(0 0 0 / 60%);color-scheme:dark}.wr-tabs__tab:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--wr-color-primary-rgb),.25)}.wr-sidebar__entry:focus-visible,.wr-sidebar__item:focus-visible,.wr-sidebar__group-toggle:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--wr-color-primary-rgb),.25)}.wr-anchor__link:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--wr-color-primary-rgb),.25)}.wr-collapse__header:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--wr-color-primary-rgb),.25)}.wr-command-palette__option:focus-visible,.wr-command-palette__panel input:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--wr-color-primary-rgb),.25)}.wr-mention__option:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--wr-color-primary-rgb),.25)}.wr-segmented__option:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--wr-color-primary-rgb),.25)}.wr-back-top:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--wr-color-primary-rgb),.25)}.wr-carousel__nav:focus-visible,.wr-carousel__dot:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--wr-color-primary-rgb),.25)}.wr-speed-dial__trigger:focus-visible,.wr-speed-dial__action:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--wr-color-primary-rgb),.25)}.wr-stepper__step:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--wr-color-primary-rgb),.25)}.wr-toast__close:focus-visible,.wr-toast__copy:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--wr-color-primary-rgb),.25)}.wr-window__chrome-action:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--wr-color-primary-rgb),.25)}.wr-date-picker__trigger:focus-visible,.wr-time-picker__step:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--wr-color-primary-rgb),.25)}.wr-dropdown-item:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--wr-color-primary-rgb),.25)}.wr-alert__close:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--wr-color-primary-rgb),.25)}.wr-list{--wr-list-item-padding-y: .625rem;--wr-list-item-padding-x: 1rem;--wr-list-item-gap: .75rem;--wr-list-divider-color: var(--wr-color-outline);--wr-list-bg: transparent;--wr-list-hover-bg: var(--wr-color-hover);--wr-list-active-bg: rgba(var(--wr-color-primary-rgb), .08);display:block;font-family:var(--wr-font-family-base);font-size:var(--wr-text-sm);color:var(--wr-color-on-surface);background:var(--wr-list-bg)}.wr-list__items{list-style:none;margin:0;padding:0}.wr-list--bordered{border:1px solid var(--wr-list-divider-color);border-radius:var(--wr-border-radius-base)}@supports (corner-shape: squircle){.wr-list--bordered{corner-shape:squircle;border-radius:calc(var(--wr-border-radius-base) * 1.85)}}.wr-list--bordered{overflow:hidden}.wr-list--dividers .wr-list__item:not(:last-child){border-bottom:1px solid var(--wr-list-divider-color)}.wr-list--dense{--wr-list-item-padding-y: .375rem}.wr-list__item{display:flex;align-items:center;gap:var(--wr-list-item-gap);padding:calc(var(--wr-list-item-padding-y) * var(--wr-density-y, 1)) calc(var(--wr-list-item-padding-x) * var(--wr-density-x, 1));color:inherit;transition:background .12s ease}.wr-list__item--interactive{cursor:pointer}.wr-list__item--interactive:hover{background:var(--wr-list-hover-bg)}.wr-list__item--interactive:active{background:var(--wr-list-active-bg)}.wr-list__item--interactive:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--wr-color-primary-rgb),.25);outline-offset:-2px}.wr-list__item--disabled{opacity:.55;pointer-events:none;cursor:not-allowed}.wr-list__leading,.wr-list__trailing{display:inline-flex;align-items:center;flex:0 0 auto;color:rgba(var(--wr-color-on-surface-rgb),.65)}.wr-list__leading:empty,.wr-list__trailing:empty{display:none}.wr-list__body{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], encapsulation: i0.ViewEncapsulation.None });
|
|
56
56
|
}
|
|
57
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
57
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrList, decorators: [{
|
|
58
58
|
type: Component,
|
|
59
59
|
args: [{ selector: 'wr-list', template: '<ul class="wr-list__items" role="list"><ng-content /></ul>', encapsulation: ViewEncapsulation.None, host: {
|
|
60
60
|
'[class]': 'classes()',
|
|
61
61
|
'[attr.aria-label]': 'ariaLabel() || null',
|
|
62
|
-
}, styles: [":root{--wr-color-white: #ffffff;--wr-color-white-rgb: 255, 255, 255;--wr-color-black: #000000;--wr-color-black-rgb: 0, 0, 0;--wr-color-backdrop-rgb: 0, 0, 0;--wr-color-hover: rgba(var(--wr-color-light-rgb), .4);--wr-color-border: rgba(var(--wr-color-light-rgb), .5);--wr-color-border-subtle: rgba(var(--wr-color-light-rgb), .35);--wr-color-border-strong: rgba(var(--wr-color-light-rgb), .6);--wr-color-overlay: rgba(var(--wr-color-backdrop-rgb), .45);--wr-color-text-muted: rgba(var(--wr-color-medium-rgb), .85);--wr-color-text-faint: rgba(var(--wr-color-medium-rgb), .6);--wr-color-gray-50: #f8fafc;--wr-color-gray-100: #f1f5f9;--wr-color-gray-200: #e2e8f0;--wr-color-gray-300: #cbd5e1;--wr-color-gray-400: #94a3b8;--wr-color-gray-500: #64748b;--wr-color-gray-600: #475569;--wr-color-gray-700: #334155;--wr-color-gray-800: #1e293b;--wr-color-gray-900: #0f172a;--wr-color-gray-950: #020617;--wr-color-surface: var(--wr-color-white);--wr-color-on-surface: var(--wr-color-dark);--wr-color-on-surface-muted: var(--wr-color-medium);--wr-color-primary: #3969e2;--wr-color-primary-rgb: 57, 105, 226;--wr-color-primary-contrast: #ffffff;--wr-color-primary-dark: rgb(34.7577092511, 88.1497797357, 222.7422907489);--wr-color-primary-darker: rgb(29.6387665198, 78.6960352423, 202.3612334802);--wr-color-primary-light: rgb(79.2422907489, 121.8502202643, 229.2577092511);--wr-color-primary-lighter: rgb(101.4845814978, 138.7004405286, 232.5154185022);--wr-color-secondary: #f51c6a;--wr-color-secondary-rgb: 245, 28, 106;--wr-color-secondary-contrast: #ffffff;--wr-color-secondary-dark: rgb(237.0569620253, 10.4430379747, 91.8987341772);--wr-color-secondary-darker: rgb(212.6329113924, 9.3670886076, 82.4303797468);--wr-color-secondary-light: rgb(246.0759493671, 52.4240506329, 122.0316455696);--wr-color-secondary-lighter: rgb(247.1518987342, 76.8481012658, 138.0632911392);--wr-color-success: #00a400;--wr-color-success-rgb: 0, 164, 0;--wr-color-success-contrast: #ffffff;--wr-color-success-dark: rgb(0, 138.5, 0);--wr-color-success-darker: #007100;--wr-color-success-light: rgb(0, 189.5, 0);--wr-color-success-lighter: #00d700;--wr-color-warning: #ffba00;--wr-color-warning-rgb: 255, 186, 0;--wr-color-warning-contrast: #171616;--wr-color-warning-dark: rgb(229.5, 167.4, 0);--wr-color-warning-darker: rgb(204, 148.8, 0);--wr-color-warning-light: rgb(255, 192.9, 25.5);--wr-color-warning-lighter: rgb(255, 199.8, 51);--wr-color-danger: #fa383e;--wr-color-danger-rgb: 250, 56, 62;--wr-color-danger-contrast: #ffffff;--wr-color-danger-dark: rgb(249.375, 31.125, 37.875);--wr-color-danger-darker: rgb(248.75, 6.25, 13.75);--wr-color-danger-light: rgb(250.625, 80.875, 86.125);--wr-color-danger-lighter: rgb(251.25, 105.75, 110.25);--wr-color-info: #3b82f6;--wr-color-info-rgb: 59, 130, 246;--wr-color-info-contrast: #ffffff;--wr-color-info-dark: rgb(34.6195121951, 114.4512195122, 244.8804878049);--wr-color-info-darker: rgb(11.1512195122, 99.1219512195, 242.8487804878);--wr-color-info-light: rgb(83.3804878049, 145.5487804878, 247.1195121951);--wr-color-info-lighter: rgb(107.7609756098, 161.0975609756, 248.2390243902);--wr-color-light: #cbd5e1;--wr-color-light-rgb: 203, 213, 225;--wr-color-light-contrast: #171616;--wr-color-light-dark: rgb(186.8292682927, 199.9390243902, 215.6707317073);--wr-color-light-darker: rgb(170.6585365854, 186.8780487805, 206.3414634146);--wr-color-light-light: rgb(219.1707317073, 226.0609756098, 234.3292682927);--wr-color-light-lighter: rgb(235.3414634146, 239.1219512195, 243.6585365854);--wr-color-medium: #8594a4;--wr-color-medium-rgb: 133, 148, 164;--wr-color-medium-contrast: #ffffff;--wr-color-medium-dark: rgb(118.3943661972, 135.1901408451, 153.1056338028);--wr-color-medium-darker: rgb(105.0985915493, 122.4225352113, 140.9014084507);--wr-color-medium-light: rgb(147.6056338028, 160.8098591549, 174.8943661972);--wr-color-medium-lighter: rgb(162.2112676056, 173.6197183099, 185.7887323944);--wr-color-dark: #0f172a;--wr-color-dark-rgb: 15, 23, 42;--wr-color-dark-contrast: #ffffff;--wr-color-dark-dark: rgb(8.2894736842, 12.7105263158, 23.2105263158);--wr-color-dark-darker: rgb(1.5789473684, 2.4210526316, 4.4210526316);--wr-color-dark-light: rgb(21.7105263158, 33.2894736842, 60.7894736842);--wr-color-dark-lighter: rgb(28.4210526316, 43.5789473684, 79.5789473684);--wr-color-primary-soft: rgba(var(--wr-color-primary-rgb), .12);--wr-color-primary-soft-border: rgba(var(--wr-color-primary-rgb), .3);--wr-color-primary-soft-contrast: color-mix(in srgb, var(--wr-color-primary) 62%, var(--wr-color-dark));--wr-color-primary-active: rgba(var(--wr-color-primary-rgb), .2);--wr-color-secondary-soft: rgba(var(--wr-color-secondary-rgb), .12);--wr-color-secondary-soft-border: rgba(var(--wr-color-secondary-rgb), .3);--wr-color-secondary-soft-contrast: color-mix(in srgb, var(--wr-color-secondary) 62%, var(--wr-color-dark));--wr-color-secondary-active: rgba(var(--wr-color-secondary-rgb), .2);--wr-color-success-soft: rgba(var(--wr-color-success-rgb), .12);--wr-color-success-soft-border: rgba(var(--wr-color-success-rgb), .3);--wr-color-success-soft-contrast: color-mix(in srgb, var(--wr-color-success) 62%, var(--wr-color-dark));--wr-color-success-active: rgba(var(--wr-color-success-rgb), .2);--wr-color-warning-soft: rgba(var(--wr-color-warning-rgb), .12);--wr-color-warning-soft-border: rgba(var(--wr-color-warning-rgb), .3);--wr-color-warning-soft-contrast: color-mix(in srgb, var(--wr-color-warning) 62%, var(--wr-color-dark));--wr-color-warning-active: rgba(var(--wr-color-warning-rgb), .2);--wr-color-danger-soft: rgba(var(--wr-color-danger-rgb), .12);--wr-color-danger-soft-border: rgba(var(--wr-color-danger-rgb), .3);--wr-color-danger-soft-contrast: color-mix(in srgb, var(--wr-color-danger) 62%, var(--wr-color-dark));--wr-color-danger-active: rgba(var(--wr-color-danger-rgb), .2);--wr-color-info-soft: rgba(var(--wr-color-info-rgb), .12);--wr-color-info-soft-border: rgba(var(--wr-color-info-rgb), .3);--wr-color-info-soft-contrast: color-mix(in srgb, var(--wr-color-info) 62%, var(--wr-color-dark));--wr-color-info-active: rgba(var(--wr-color-info-rgb), .2);--wr-color-medium-soft: rgba(var(--wr-color-medium-rgb), .12);--wr-color-medium-soft-border: rgba(var(--wr-color-medium-rgb), .3);--wr-color-medium-soft-contrast: color-mix(in srgb, var(--wr-color-medium) 62%, var(--wr-color-dark));--wr-color-medium-active: rgba(var(--wr-color-medium-rgb), .2)}:root{--wr-border-radius-sm: .375rem;--wr-border-radius-base: .625rem;--wr-border-radius-lg: 1rem;--wr-border-radius-pill: 50rem;--wr-control-padding-y-sm: .125rem;--wr-control-padding-y-md: .25rem;--wr-control-padding-y-lg: .3125rem;--wr-control-padding-x-sm: .5rem;--wr-control-padding-x-md: .75rem;--wr-control-padding-x-lg: 1rem;--wr-control-line-height-sm: 1rem;--wr-control-line-height-md: 1.25rem;--wr-control-line-height-lg: 1.5rem;--wr-control-font-size-sm: var(--wr-text-xs);--wr-control-font-size-md: var(--wr-text-sm);--wr-control-font-size-lg: var(--wr-text-base);--wr-control-radius-sm: 5px;--wr-control-radius-md: 6px;--wr-control-radius-lg: 7px;--wr-ease-linear: linear;--wr-ease-out: cubic-bezier(.16, 1, .3, 1);--wr-ease-in: cubic-bezier(.7, 0, .84, 0);--wr-ease-in-out: cubic-bezier(.65, 0, .35, 1);--wr-ease-spring: cubic-bezier(.34, 1.56, .64, 1);--wr-duration-fast: .1s;--wr-duration-base: .15s;--wr-duration-slow: .3s;--wr-duration-slower: .5s;--wr-transition-short: var(--wr-duration-fast) var(--wr-ease-out);--wr-transition-base: var(--wr-duration-base) var(--wr-ease-linear);--wr-transition-long: var(--wr-duration-slow) var(--wr-ease-out);--wr-shadow-xs: 0 1px 2px rgb(0 0 0 / 5%);--wr-shadow-sm: 0 2px 8px rgb(0 0 0 / 15%);--wr-shadow-overlay: 0 8px 24px rgb(0 0 0 / 12%), 0 2px 4px rgb(0 0 0 / 6%);--wr-shadow-float: 0 8px 24px rgb(0 0 0 / 18%);--wr-shadow-modal: 0 20px 48px rgb(0 0 0 / 25%);--wr-z-overlay: 1000;--wr-z-window: 1100;--wr-z-top: 9999;--wr-overlay-duration: var(--wr-duration-base);--wr-overlay-ease: var(--wr-ease-out);--wr-font-family-base: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;--wr-font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;--wr-text-xs: .75rem;--wr-text-sm: .875rem;--wr-text-base: 1rem;--wr-text-lg: 1.125rem;--wr-text-xl: 1.25rem;--wr-text-2xl: 1.5rem;--wr-text-3xl: 1.875rem;--wr-text-4xl: 2.25rem;--wr-text-5xl: 3rem;--wr-font-weight-thin: 200;--wr-font-weight-light: 300;--wr-font-weight-regular: 400;--wr-font-weight-medium: 500;--wr-font-weight-semibold: 600;--wr-font-weight-bold: 700;--wr-font-weight-extrabold: 800;--wr-leading-none: 1;--wr-leading-tight: 1.25;--wr-leading-snug: 1.375;--wr-leading-normal: 1.5;--wr-leading-relaxed: 1.625;--wr-leading-loose: 2;--wr-tracking-tighter: -.05em;--wr-tracking-tight: -.025em;--wr-tracking-normal: 0;--wr-tracking-wide: .025em;--wr-tracking-wider: .05em;--wr-tracking-widest: .1em}@keyframes wr-overlay-in{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}[data-theme=dark]{--wr-color-white: #0b1120;--wr-color-white-rgb: 11, 17, 32;--wr-color-dark: #e6ebf3;--wr-color-dark-rgb: 230, 235, 243;--wr-color-dark-contrast: #0b1120;--wr-color-white-contrast: #e6ebf3;--wr-color-light: #262f44;--wr-color-light-rgb: 38, 47, 68;--wr-color-light-contrast: #e6ebf3;--wr-color-light-lighter: #1a2236;--wr-color-light-darker: #3a4661;--wr-color-medium: #9aa6b8;--wr-color-medium-rgb: 154, 166, 184;--wr-color-primary: #5b85ff;--wr-color-primary-rgb: 91, 133, 255;--wr-color-primary-light: #7a9eff;--wr-color-primary-dark: #2f56c9;--wr-color-primary-lighter: #99b6ff;--wr-color-primary-darker: #1f3a99;--wr-color-success: #34c759;--wr-color-success-rgb: 52, 199, 89;--wr-color-success-light: rgb(69.874501992, 206.625498008, 104.2948207171);--wr-color-success-lighter: rgb(90.0916334661, 211.9083665339, 120.7529880478);--wr-color-success-dark: rgb(46.7171314741, 178.7828685259, 79.9581673307);--wr-color-success-darker: rgb(41.4342629482, 158.5657370518, 70.9163346614);--wr-color-warning: #ffcc33;--wr-color-warning-rgb: 255, 204, 51;--wr-color-warning-light: rgb(255, 210.375, 76.5);--wr-color-warning-lighter: rgb(255, 216.75, 102);--wr-color-warning-dark: rgb(255, 197.625, 25.5);--wr-color-warning-darker: rgb(255, 191.25, 0);--wr-color-danger: #ff5c5c;--wr-color-danger-rgb: 255, 92, 92;--wr-color-danger-light: rgb(255, 117.5, 117.5);--wr-color-danger-lighter: #ff8f8f;--wr-color-danger-dark: rgb(255, 66.5, 66.5);--wr-color-danger-darker: #ff2929;--wr-shadow-xs: 0 1px 2px rgb(0 0 0 / 35%);--wr-shadow-sm: 0 2px 8px rgb(0 0 0 / 45%);--wr-shadow-overlay: 0 8px 24px rgb(0 0 0 / 50%), 0 2px 4px rgb(0 0 0 / 35%);--wr-shadow-float: 0 8px 24px rgb(0 0 0 / 55%);--wr-shadow-modal: 0 24px 56px rgb(0 0 0 / 60%);color-scheme:dark}.wr-tabs__tab:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--wr-color-primary-rgb),.25)}.wr-sidebar__entry:focus-visible,.wr-sidebar__item:focus-visible,.wr-sidebar__group-toggle:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--wr-color-primary-rgb),.25)}.wr-anchor__link:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--wr-color-primary-rgb),.25)}.wr-collapse__header:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--wr-color-primary-rgb),.25)}.wr-command-palette__option:focus-visible,.wr-command-palette__panel input:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--wr-color-primary-rgb),.25)}.wr-mention__option:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--wr-color-primary-rgb),.25)}.wr-segmented__option:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--wr-color-primary-rgb),.25)}.wr-back-top:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--wr-color-primary-rgb),.25)}.wr-carousel__nav:focus-visible,.wr-carousel__dot:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--wr-color-primary-rgb),.25)}.wr-speed-dial__trigger:focus-visible,.wr-speed-dial__action:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--wr-color-primary-rgb),.25)}.wr-stepper__step:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--wr-color-primary-rgb),.25)}.wr-toast__close:focus-visible,.wr-toast__copy:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--wr-color-primary-rgb),.25)}.wr-window__chrome-action:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--wr-color-primary-rgb),.25)}.wr-date-picker__trigger:focus-visible,.wr-time-picker__step:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--wr-color-primary-rgb),.25)}.wr-dropdown-item:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--wr-color-primary-rgb),.25)}.wr-alert__close:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--wr-color-primary-rgb),.25)}.wr-list{--wr-list-item-padding-y: .625rem;--wr-list-item-padding-x: 1rem;--wr-list-item-gap: .75rem;--wr-list-divider-color: var(--wr-color-light);--wr-list-bg: transparent;--wr-list-hover-bg: var(--wr-color-hover);--wr-list-active-bg: rgba(var(--wr-color-primary-rgb), .08);display:block;font-family:var(--wr-font-family-base);font-size:var(--wr-text-sm);color:var(--wr-color-dark);background:var(--wr-list-bg)}.wr-list__items{list-style:none;margin:0;padding:0}.wr-list--bordered{border:1px solid var(--wr-list-divider-color);border-radius:var(--wr-border-radius-base)}@supports (corner-shape: squircle){.wr-list--bordered{corner-shape:squircle;border-radius:calc(var(--wr-border-radius-base) * 1.85)}}.wr-list--bordered{overflow:hidden}.wr-list--dividers .wr-list__item:not(:last-child){border-bottom:1px solid var(--wr-list-divider-color)}.wr-list--dense{--wr-list-item-padding-y: .375rem}.wr-list__item{display:flex;align-items:center;gap:var(--wr-list-item-gap);padding:calc(var(--wr-list-item-padding-y) * var(--wr-density-y, 1)) calc(var(--wr-list-item-padding-x) * var(--wr-density-x, 1));color:inherit;transition:background .12s ease}.wr-list__item--interactive{cursor:pointer}.wr-list__item--interactive:hover{background:var(--wr-list-hover-bg)}.wr-list__item--interactive:active{background:var(--wr-list-active-bg)}.wr-list__item--interactive:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--wr-color-primary-rgb),.25);outline-offset:-2px}.wr-list__item--disabled{opacity:.55;pointer-events:none;cursor:not-allowed}.wr-list__leading,.wr-list__trailing{display:inline-flex;align-items:center;flex:0 0 auto;color:rgba(var(--wr-color-dark-rgb),.65)}.wr-list__leading:empty,.wr-list__trailing:empty{display:none}.wr-list__body{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
|
|
62
|
+
}, styles: [":root{--wr-color-white: #ffffff;--wr-color-white-rgb: 255, 255, 255;--wr-color-black: #000000;--wr-color-black-rgb: 0, 0, 0;--wr-color-backdrop-rgb: 0, 0, 0;--wr-color-hover: rgba(var(--wr-color-light-rgb), .4);--wr-color-border: rgba(var(--wr-color-light-rgb), .5);--wr-color-border-subtle: rgba(var(--wr-color-light-rgb), .35);--wr-color-border-strong: rgba(var(--wr-color-light-rgb), .6);--wr-color-overlay: rgba(var(--wr-color-backdrop-rgb), .45);--wr-color-text-muted: rgba(var(--wr-color-medium-rgb), .85);--wr-color-text-faint: rgba(var(--wr-color-medium-rgb), .6);--wr-color-gray-50: #f8fafc;--wr-color-gray-100: #f1f5f9;--wr-color-gray-200: #e2e8f0;--wr-color-gray-300: #cbd5e1;--wr-color-gray-400: #94a3b8;--wr-color-gray-500: #64748b;--wr-color-gray-600: #475569;--wr-color-gray-700: #334155;--wr-color-gray-800: #1e293b;--wr-color-gray-900: #0f172a;--wr-color-gray-950: #020617;--wr-color-surface: var(--wr-color-white);--wr-color-surface-rgb: var(--wr-color-white-rgb);--wr-color-on-surface: var(--wr-color-dark);--wr-color-on-surface-rgb: var(--wr-color-dark-rgb);--wr-color-on-surface-muted: var(--wr-color-medium);--wr-color-on-surface-muted-rgb: var(--wr-color-medium-rgb);--wr-color-outline: var(--wr-color-light);--wr-color-outline-rgb: var(--wr-color-light-rgb);--wr-color-primary: #3969e2;--wr-color-primary-rgb: 57, 105, 226;--wr-color-primary-contrast: #ffffff;--wr-color-primary-dark: rgb(34.7577092511, 88.1497797357, 222.7422907489);--wr-color-primary-darker: rgb(29.6387665198, 78.6960352423, 202.3612334802);--wr-color-primary-light: rgb(79.2422907489, 121.8502202643, 229.2577092511);--wr-color-primary-lighter: rgb(101.4845814978, 138.7004405286, 232.5154185022);--wr-color-secondary: #f51c6a;--wr-color-secondary-rgb: 245, 28, 106;--wr-color-secondary-contrast: #ffffff;--wr-color-secondary-dark: rgb(237.0569620253, 10.4430379747, 91.8987341772);--wr-color-secondary-darker: rgb(212.6329113924, 9.3670886076, 82.4303797468);--wr-color-secondary-light: rgb(246.0759493671, 52.4240506329, 122.0316455696);--wr-color-secondary-lighter: rgb(247.1518987342, 76.8481012658, 138.0632911392);--wr-color-success: #00a400;--wr-color-success-rgb: 0, 164, 0;--wr-color-success-contrast: #ffffff;--wr-color-success-dark: rgb(0, 138.5, 0);--wr-color-success-darker: #007100;--wr-color-success-light: rgb(0, 189.5, 0);--wr-color-success-lighter: #00d700;--wr-color-warning: #ffba00;--wr-color-warning-rgb: 255, 186, 0;--wr-color-warning-contrast: #171616;--wr-color-warning-dark: rgb(229.5, 167.4, 0);--wr-color-warning-darker: rgb(204, 148.8, 0);--wr-color-warning-light: rgb(255, 192.9, 25.5);--wr-color-warning-lighter: rgb(255, 199.8, 51);--wr-color-danger: #fa383e;--wr-color-danger-rgb: 250, 56, 62;--wr-color-danger-contrast: #ffffff;--wr-color-danger-dark: rgb(249.375, 31.125, 37.875);--wr-color-danger-darker: rgb(248.75, 6.25, 13.75);--wr-color-danger-light: rgb(250.625, 80.875, 86.125);--wr-color-danger-lighter: rgb(251.25, 105.75, 110.25);--wr-color-info: #3b82f6;--wr-color-info-rgb: 59, 130, 246;--wr-color-info-contrast: #ffffff;--wr-color-info-dark: rgb(34.6195121951, 114.4512195122, 244.8804878049);--wr-color-info-darker: rgb(11.1512195122, 99.1219512195, 242.8487804878);--wr-color-info-light: rgb(83.3804878049, 145.5487804878, 247.1195121951);--wr-color-info-lighter: rgb(107.7609756098, 161.0975609756, 248.2390243902);--wr-color-light: #cbd5e1;--wr-color-light-rgb: 203, 213, 225;--wr-color-light-contrast: #171616;--wr-color-light-dark: rgb(186.8292682927, 199.9390243902, 215.6707317073);--wr-color-light-darker: rgb(170.6585365854, 186.8780487805, 206.3414634146);--wr-color-light-light: rgb(219.1707317073, 226.0609756098, 234.3292682927);--wr-color-light-lighter: rgb(235.3414634146, 239.1219512195, 243.6585365854);--wr-color-medium: #8594a4;--wr-color-medium-rgb: 133, 148, 164;--wr-color-medium-contrast: #ffffff;--wr-color-medium-dark: rgb(118.3943661972, 135.1901408451, 153.1056338028);--wr-color-medium-darker: rgb(105.0985915493, 122.4225352113, 140.9014084507);--wr-color-medium-light: rgb(147.6056338028, 160.8098591549, 174.8943661972);--wr-color-medium-lighter: rgb(162.2112676056, 173.6197183099, 185.7887323944);--wr-color-dark: #0f172a;--wr-color-dark-rgb: 15, 23, 42;--wr-color-dark-contrast: #ffffff;--wr-color-dark-dark: rgb(8.2894736842, 12.7105263158, 23.2105263158);--wr-color-dark-darker: rgb(1.5789473684, 2.4210526316, 4.4210526316);--wr-color-dark-light: rgb(21.7105263158, 33.2894736842, 60.7894736842);--wr-color-dark-lighter: rgb(28.4210526316, 43.5789473684, 79.5789473684);--wr-color-primary-soft: rgba(var(--wr-color-primary-rgb), .12);--wr-color-primary-soft-border: rgba(var(--wr-color-primary-rgb), .3);--wr-color-primary-soft-contrast: color-mix(in srgb, var(--wr-color-primary) 62%, var(--wr-color-dark));--wr-color-primary-active: rgba(var(--wr-color-primary-rgb), .2);--wr-color-secondary-soft: rgba(var(--wr-color-secondary-rgb), .12);--wr-color-secondary-soft-border: rgba(var(--wr-color-secondary-rgb), .3);--wr-color-secondary-soft-contrast: color-mix(in srgb, var(--wr-color-secondary) 62%, var(--wr-color-dark));--wr-color-secondary-active: rgba(var(--wr-color-secondary-rgb), .2);--wr-color-success-soft: rgba(var(--wr-color-success-rgb), .12);--wr-color-success-soft-border: rgba(var(--wr-color-success-rgb), .3);--wr-color-success-soft-contrast: color-mix(in srgb, var(--wr-color-success) 62%, var(--wr-color-dark));--wr-color-success-active: rgba(var(--wr-color-success-rgb), .2);--wr-color-warning-soft: rgba(var(--wr-color-warning-rgb), .12);--wr-color-warning-soft-border: rgba(var(--wr-color-warning-rgb), .3);--wr-color-warning-soft-contrast: color-mix(in srgb, var(--wr-color-warning) 62%, var(--wr-color-dark));--wr-color-warning-active: rgba(var(--wr-color-warning-rgb), .2);--wr-color-danger-soft: rgba(var(--wr-color-danger-rgb), .12);--wr-color-danger-soft-border: rgba(var(--wr-color-danger-rgb), .3);--wr-color-danger-soft-contrast: color-mix(in srgb, var(--wr-color-danger) 62%, var(--wr-color-dark));--wr-color-danger-active: rgba(var(--wr-color-danger-rgb), .2);--wr-color-info-soft: rgba(var(--wr-color-info-rgb), .12);--wr-color-info-soft-border: rgba(var(--wr-color-info-rgb), .3);--wr-color-info-soft-contrast: color-mix(in srgb, var(--wr-color-info) 62%, var(--wr-color-dark));--wr-color-info-active: rgba(var(--wr-color-info-rgb), .2);--wr-color-medium-soft: rgba(var(--wr-color-medium-rgb), .12);--wr-color-medium-soft-border: rgba(var(--wr-color-medium-rgb), .3);--wr-color-medium-soft-contrast: color-mix(in srgb, var(--wr-color-medium) 62%, var(--wr-color-dark));--wr-color-medium-active: rgba(var(--wr-color-medium-rgb), .2)}:root{--wr-border-radius-sm: .375rem;--wr-border-radius-base: .625rem;--wr-border-radius-lg: 1rem;--wr-border-radius-pill: 50rem;--wr-control-padding-y-sm: .125rem;--wr-control-padding-y-md: .25rem;--wr-control-padding-y-lg: .3125rem;--wr-control-padding-x-sm: .5rem;--wr-control-padding-x-md: .75rem;--wr-control-padding-x-lg: 1rem;--wr-control-line-height-sm: 1rem;--wr-control-line-height-md: 1.25rem;--wr-control-line-height-lg: 1.5rem;--wr-control-font-size-sm: var(--wr-text-xs);--wr-control-font-size-md: var(--wr-text-sm);--wr-control-font-size-lg: var(--wr-text-base);--wr-control-radius-sm: 5px;--wr-control-radius-md: 6px;--wr-control-radius-lg: 7px;--wr-ease-linear: linear;--wr-ease-out: cubic-bezier(.16, 1, .3, 1);--wr-ease-in: cubic-bezier(.7, 0, .84, 0);--wr-ease-in-out: cubic-bezier(.65, 0, .35, 1);--wr-ease-spring: cubic-bezier(.34, 1.56, .64, 1);--wr-duration-fast: .1s;--wr-duration-base: .15s;--wr-duration-slow: .3s;--wr-duration-slower: .5s;--wr-transition-short: var(--wr-duration-fast) var(--wr-ease-out);--wr-transition-base: var(--wr-duration-base) var(--wr-ease-linear);--wr-transition-long: var(--wr-duration-slow) var(--wr-ease-out);--wr-shadow-xs: 0 1px 2px rgb(0 0 0 / 5%);--wr-shadow-sm: 0 2px 8px rgb(0 0 0 / 15%);--wr-shadow-overlay: 0 8px 24px rgb(0 0 0 / 12%), 0 2px 4px rgb(0 0 0 / 6%);--wr-shadow-float: 0 8px 24px rgb(0 0 0 / 18%);--wr-shadow-modal: 0 20px 48px rgb(0 0 0 / 25%);--wr-z-overlay: 1000;--wr-z-window: 1100;--wr-z-top: 9999;--wr-overlay-duration: var(--wr-duration-base);--wr-overlay-ease: var(--wr-ease-out);--wr-font-family-base: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;--wr-font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;--wr-text-xs: .75rem;--wr-text-sm: .875rem;--wr-text-base: 1rem;--wr-text-lg: 1.125rem;--wr-text-xl: 1.25rem;--wr-text-2xl: 1.5rem;--wr-text-3xl: 1.875rem;--wr-text-4xl: 2.25rem;--wr-text-5xl: 3rem;--wr-font-weight-thin: 200;--wr-font-weight-light: 300;--wr-font-weight-regular: 400;--wr-font-weight-medium: 500;--wr-font-weight-semibold: 600;--wr-font-weight-bold: 700;--wr-font-weight-extrabold: 800;--wr-leading-none: 1;--wr-leading-tight: 1.25;--wr-leading-snug: 1.375;--wr-leading-normal: 1.5;--wr-leading-relaxed: 1.625;--wr-leading-loose: 2;--wr-tracking-tighter: -.05em;--wr-tracking-tight: -.025em;--wr-tracking-normal: 0;--wr-tracking-wide: .025em;--wr-tracking-wider: .05em;--wr-tracking-widest: .1em}@keyframes wr-overlay-in{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}[data-theme=dark]{--wr-color-white: #0b1120;--wr-color-white-rgb: 11, 17, 32;--wr-color-dark: #e6ebf3;--wr-color-dark-rgb: 230, 235, 243;--wr-color-dark-contrast: #0b1120;--wr-color-white-contrast: #e6ebf3;--wr-color-light: #262f44;--wr-color-light-rgb: 38, 47, 68;--wr-color-light-contrast: #e6ebf3;--wr-color-light-lighter: #1a2236;--wr-color-light-darker: #3a4661;--wr-color-medium: #9aa6b8;--wr-color-medium-rgb: 154, 166, 184;--wr-color-primary: #5b85ff;--wr-color-primary-rgb: 91, 133, 255;--wr-color-primary-light: #7a9eff;--wr-color-primary-dark: #2f56c9;--wr-color-primary-lighter: #99b6ff;--wr-color-primary-darker: #1f3a99;--wr-color-success: #34c759;--wr-color-success-rgb: 52, 199, 89;--wr-color-success-light: rgb(69.874501992, 206.625498008, 104.2948207171);--wr-color-success-lighter: rgb(90.0916334661, 211.9083665339, 120.7529880478);--wr-color-success-dark: rgb(46.7171314741, 178.7828685259, 79.9581673307);--wr-color-success-darker: rgb(41.4342629482, 158.5657370518, 70.9163346614);--wr-color-warning: #ffcc33;--wr-color-warning-rgb: 255, 204, 51;--wr-color-warning-light: rgb(255, 210.375, 76.5);--wr-color-warning-lighter: rgb(255, 216.75, 102);--wr-color-warning-dark: rgb(255, 197.625, 25.5);--wr-color-warning-darker: rgb(255, 191.25, 0);--wr-color-danger: #ff5c5c;--wr-color-danger-rgb: 255, 92, 92;--wr-color-danger-light: rgb(255, 117.5, 117.5);--wr-color-danger-lighter: #ff8f8f;--wr-color-danger-dark: rgb(255, 66.5, 66.5);--wr-color-danger-darker: #ff2929;--wr-shadow-xs: 0 1px 2px rgb(0 0 0 / 35%);--wr-shadow-sm: 0 2px 8px rgb(0 0 0 / 45%);--wr-shadow-overlay: 0 8px 24px rgb(0 0 0 / 50%), 0 2px 4px rgb(0 0 0 / 35%);--wr-shadow-float: 0 8px 24px rgb(0 0 0 / 55%);--wr-shadow-modal: 0 24px 56px rgb(0 0 0 / 60%);color-scheme:dark}.wr-tabs__tab:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--wr-color-primary-rgb),.25)}.wr-sidebar__entry:focus-visible,.wr-sidebar__item:focus-visible,.wr-sidebar__group-toggle:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--wr-color-primary-rgb),.25)}.wr-anchor__link:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--wr-color-primary-rgb),.25)}.wr-collapse__header:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--wr-color-primary-rgb),.25)}.wr-command-palette__option:focus-visible,.wr-command-palette__panel input:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--wr-color-primary-rgb),.25)}.wr-mention__option:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--wr-color-primary-rgb),.25)}.wr-segmented__option:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--wr-color-primary-rgb),.25)}.wr-back-top:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--wr-color-primary-rgb),.25)}.wr-carousel__nav:focus-visible,.wr-carousel__dot:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--wr-color-primary-rgb),.25)}.wr-speed-dial__trigger:focus-visible,.wr-speed-dial__action:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--wr-color-primary-rgb),.25)}.wr-stepper__step:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--wr-color-primary-rgb),.25)}.wr-toast__close:focus-visible,.wr-toast__copy:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--wr-color-primary-rgb),.25)}.wr-window__chrome-action:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--wr-color-primary-rgb),.25)}.wr-date-picker__trigger:focus-visible,.wr-time-picker__step:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--wr-color-primary-rgb),.25)}.wr-dropdown-item:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--wr-color-primary-rgb),.25)}.wr-alert__close:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--wr-color-primary-rgb),.25)}.wr-list{--wr-list-item-padding-y: .625rem;--wr-list-item-padding-x: 1rem;--wr-list-item-gap: .75rem;--wr-list-divider-color: var(--wr-color-outline);--wr-list-bg: transparent;--wr-list-hover-bg: var(--wr-color-hover);--wr-list-active-bg: rgba(var(--wr-color-primary-rgb), .08);display:block;font-family:var(--wr-font-family-base);font-size:var(--wr-text-sm);color:var(--wr-color-on-surface);background:var(--wr-list-bg)}.wr-list__items{list-style:none;margin:0;padding:0}.wr-list--bordered{border:1px solid var(--wr-list-divider-color);border-radius:var(--wr-border-radius-base)}@supports (corner-shape: squircle){.wr-list--bordered{corner-shape:squircle;border-radius:calc(var(--wr-border-radius-base) * 1.85)}}.wr-list--bordered{overflow:hidden}.wr-list--dividers .wr-list__item:not(:last-child){border-bottom:1px solid var(--wr-list-divider-color)}.wr-list--dense{--wr-list-item-padding-y: .375rem}.wr-list__item{display:flex;align-items:center;gap:var(--wr-list-item-gap);padding:calc(var(--wr-list-item-padding-y) * var(--wr-density-y, 1)) calc(var(--wr-list-item-padding-x) * var(--wr-density-x, 1));color:inherit;transition:background .12s ease}.wr-list__item--interactive{cursor:pointer}.wr-list__item--interactive:hover{background:var(--wr-list-hover-bg)}.wr-list__item--interactive:active{background:var(--wr-list-active-bg)}.wr-list__item--interactive:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--wr-color-primary-rgb),.25);outline-offset:-2px}.wr-list__item--disabled{opacity:.55;pointer-events:none;cursor:not-allowed}.wr-list__leading,.wr-list__trailing{display:inline-flex;align-items:center;flex:0 0 auto;color:rgba(var(--wr-color-on-surface-rgb),.65)}.wr-list__leading:empty,.wr-list__trailing:empty{display:none}.wr-list__body{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
|
|
63
63
|
}], propDecorators: { bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], dividers: [{ type: i0.Input, args: [{ isSignal: true, alias: "dividers", required: false }] }], dense: [{ type: i0.Input, args: [{ isSignal: true, alias: "dense", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
|
|
64
64
|
|
|
65
65
|
/**
|
|
@@ -109,10 +109,10 @@ class WrListItem {
|
|
|
109
109
|
event.preventDefault();
|
|
110
110
|
event.currentTarget.click();
|
|
111
111
|
}
|
|
112
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
113
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0
|
|
112
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrListItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
113
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: WrListItem, isStandalone: true, selector: "wr-list-item", inputs: { interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listitem" }, listeners: { "keydown.enter": "onActivate($event)", "keydown.space": "onActivate($event)" }, properties: { "class": "classes()", "attr.tabindex": "interactive() ? \"0\" : null", "attr.aria-disabled": "disabled() || null" } }, ngImport: i0, template: "<span class=\"wr-list__leading\"><ng-content select=\"[wrListItemLeading]\" /></span>\n<span class=\"wr-list__body\"><ng-content /></span>\n<span class=\"wr-list__trailing\"><ng-content select=\"[wrListItemTrailing]\" /></span>\n", encapsulation: i0.ViewEncapsulation.None });
|
|
114
114
|
}
|
|
115
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
115
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrListItem, decorators: [{
|
|
116
116
|
type: Component,
|
|
117
117
|
args: [{ selector: 'wr-list-item', encapsulation: ViewEncapsulation.None, host: {
|
|
118
118
|
'[class]': 'classes()',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ngwr-list.mjs","sources":["../../../projects/lib/list/list.ts","../../../projects/lib/list/list-item.ts","../../../projects/lib/list/list-item.html","../../../projects/lib/list/ngwr-list.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { Component, ViewEncapsulation, computed, input } from '@angular/core';\n\n/**\n * Generic list container. Renders `<ul role=\"list\">` with optional\n * borders, dividers between items, and dense (compact) padding. Project\n * `<wr-list-item>` children — they pick up the container's settings\n * through CSS cascade, no DI needed.\n *\n * @example\n * ```html\n * <wr-list bordered dividers>\n * <wr-list-item>\n * <wr-icon ngProjectAs=\"[wrListItemLeading]\" name=\"folder\" />\n * Reports\n * <span ngProjectAs=\"[wrListItemTrailing]\">12</span>\n * </wr-list-item>\n * <wr-list-item interactive (click)=\"open(item)\">\n * Click anywhere on this row\n * </wr-list-item>\n * </wr-list>\n * ```\n *\n * @see https://ngwr.dev/components/list\n */\n@Component({\n selector: 'wr-list',\n template: '<ul class=\"wr-list__items\" role=\"list\"><ng-content /></ul>',\n styleUrl: './list.scss',\n encapsulation: ViewEncapsulation.None,\n host: {\n '[class]': 'classes()',\n '[attr.aria-label]': 'ariaLabel() || null',\n },\n})\nexport class WrList {\n /** Wrap the list in a card-style border + radius. @default false */\n readonly bordered = input(false, { transform: coerceBooleanProperty });\n\n /** Draw a thin divider between items. @default false */\n readonly dividers = input(false, { transform: coerceBooleanProperty });\n\n /** Use compact padding on every item. @default false */\n readonly dense = input(false, { transform: coerceBooleanProperty });\n\n /** Optional accessible label for the list. */\n readonly ariaLabel = input<string>('');\n\n protected readonly classes = computed(() => {\n const parts = ['wr-list'];\n if (this.bordered()) parts.push('wr-list--bordered');\n if (this.dividers()) parts.push('wr-list--dividers');\n if (this.dense()) parts.push('wr-list--dense');\n return parts.join(' ');\n });\n}\n","/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { Component, ViewEncapsulation, computed, input } from '@angular/core';\n\n/**\n * Row inside `<wr-list>`. Three projection slots:\n *\n * - `[wrListItemLeading]` — icon, avatar, status dot, etc.\n * - default — main label / body\n * - `[wrListItemTrailing]` — meta value, action button, chevron\n *\n * Set `interactive` to get hover, cursor, keyboard activation, and the\n * appropriate ARIA role for click handling.\n *\n * @example\n * ```html\n * <wr-list-item>Plain row</wr-list-item>\n *\n * <wr-list-item interactive (click)=\"onPick(item)\">\n * <wr-icon ngProjectAs=\"[wrListItemLeading]\" name=\"folder\" />\n * Reports\n * <span ngProjectAs=\"[wrListItemTrailing]\">12</span>\n * </wr-list-item>\n * ```\n */\n@Component({\n selector: 'wr-list-item',\n templateUrl: './list-item.html',\n encapsulation: ViewEncapsulation.None,\n host: {\n '[class]': 'classes()',\n role: 'listitem',\n '[attr.tabindex]': 'interactive() ? \"0\" : null',\n '[attr.aria-disabled]': 'disabled() || null',\n '(keydown.enter)': 'onActivate($event)',\n '(keydown.space)': 'onActivate($event)',\n },\n})\nexport class WrListItem {\n /** Adds hover / cursor styles + keyboard activation. @default false */\n readonly interactive = input(false, { transform: coerceBooleanProperty });\n\n /** Visual disabled state. Suppresses hover + keyboard activation. @default false */\n readonly disabled = input(false, { transform: coerceBooleanProperty });\n\n protected readonly classes = computed(() => {\n const parts = ['wr-list__item'];\n if (this.interactive()) parts.push('wr-list__item--interactive');\n if (this.disabled()) parts.push('wr-list__item--disabled');\n return parts.join(' ');\n });\n\n protected onActivate(event: Event): void {\n if (!this.interactive() || this.disabled()) return;\n event.preventDefault();\n (event.currentTarget as HTMLElement).click();\n }\n}\n","<span class=\"wr-list__leading\"><ng-content select=\"[wrListItemLeading]\" /></span>\n<span class=\"wr-list__body\"><ng-content /></span>\n<span class=\"wr-list__trailing\"><ng-content select=\"[wrListItemTrailing]\" /></span>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;AAAA;;;;;AAKG;AAKH;;;;;;;;;;;;;;;;;;;;;AAqBG;MAWU,MAAM,CAAA;;IAER,QAAQ,GAAG,KAAK,CAAC,KAAK,gFAAI,SAAS,EAAE,qBAAqB,EAAA,CAAG;;IAG7D,QAAQ,GAAG,KAAK,CAAC,KAAK,gFAAI,SAAS,EAAE,qBAAqB,EAAA,CAAG;;IAG7D,KAAK,GAAG,KAAK,CAAC,KAAK,6EAAI,SAAS,EAAE,qBAAqB,EAAA,CAAG;;IAG1D,SAAS,GAAG,KAAK,CAAS,EAAE;kFAAC;AAEnB,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAK;AACzC,QAAA,MAAM,KAAK,GAAG,CAAC,SAAS,CAAC;QACzB,IAAI,IAAI,CAAC,QAAQ,EAAE;AAAE,YAAA,KAAK,CAAC,IAAI,CAAC,mBAAmB,CAAC;QACpD,IAAI,IAAI,CAAC,QAAQ,EAAE;AAAE,YAAA,KAAK,CAAC,IAAI,CAAC,mBAAmB,CAAC;QACpD,IAAI,IAAI,CAAC,KAAK,EAAE;AAAE,YAAA,KAAK,CAAC,IAAI,CAAC,gBAAgB,CAAC;AAC9C,QAAA,OAAO,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;IACxB,CAAC;gFAAC;uGAnBS,MAAM,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAN,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAM,uqBARP,4DAA4D,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,
|
|
1
|
+
{"version":3,"file":"ngwr-list.mjs","sources":["../../../projects/lib/list/list.ts","../../../projects/lib/list/list-item.ts","../../../projects/lib/list/list-item.html","../../../projects/lib/list/ngwr-list.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { Component, ViewEncapsulation, computed, input } from '@angular/core';\n\n/**\n * Generic list container. Renders `<ul role=\"list\">` with optional\n * borders, dividers between items, and dense (compact) padding. Project\n * `<wr-list-item>` children — they pick up the container's settings\n * through CSS cascade, no DI needed.\n *\n * @example\n * ```html\n * <wr-list bordered dividers>\n * <wr-list-item>\n * <wr-icon ngProjectAs=\"[wrListItemLeading]\" name=\"folder\" />\n * Reports\n * <span ngProjectAs=\"[wrListItemTrailing]\">12</span>\n * </wr-list-item>\n * <wr-list-item interactive (click)=\"open(item)\">\n * Click anywhere on this row\n * </wr-list-item>\n * </wr-list>\n * ```\n *\n * @see https://ngwr.dev/reference/components/list\n */\n@Component({\n selector: 'wr-list',\n template: '<ul class=\"wr-list__items\" role=\"list\"><ng-content /></ul>',\n styleUrl: './list.scss',\n encapsulation: ViewEncapsulation.None,\n host: {\n '[class]': 'classes()',\n '[attr.aria-label]': 'ariaLabel() || null',\n },\n})\nexport class WrList {\n /** Wrap the list in a card-style border + radius. @default false */\n readonly bordered = input(false, { transform: coerceBooleanProperty });\n\n /** Draw a thin divider between items. @default false */\n readonly dividers = input(false, { transform: coerceBooleanProperty });\n\n /** Use compact padding on every item. @default false */\n readonly dense = input(false, { transform: coerceBooleanProperty });\n\n /** Optional accessible label for the list. */\n readonly ariaLabel = input<string>('');\n\n protected readonly classes = computed(() => {\n const parts = ['wr-list'];\n if (this.bordered()) parts.push('wr-list--bordered');\n if (this.dividers()) parts.push('wr-list--dividers');\n if (this.dense()) parts.push('wr-list--dense');\n return parts.join(' ');\n });\n}\n","/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { Component, ViewEncapsulation, computed, input } from '@angular/core';\n\n/**\n * Row inside `<wr-list>`. Three projection slots:\n *\n * - `[wrListItemLeading]` — icon, avatar, status dot, etc.\n * - default — main label / body\n * - `[wrListItemTrailing]` — meta value, action button, chevron\n *\n * Set `interactive` to get hover, cursor, keyboard activation, and the\n * appropriate ARIA role for click handling.\n *\n * @example\n * ```html\n * <wr-list-item>Plain row</wr-list-item>\n *\n * <wr-list-item interactive (click)=\"onPick(item)\">\n * <wr-icon ngProjectAs=\"[wrListItemLeading]\" name=\"folder\" />\n * Reports\n * <span ngProjectAs=\"[wrListItemTrailing]\">12</span>\n * </wr-list-item>\n * ```\n */\n@Component({\n selector: 'wr-list-item',\n templateUrl: './list-item.html',\n encapsulation: ViewEncapsulation.None,\n host: {\n '[class]': 'classes()',\n role: 'listitem',\n '[attr.tabindex]': 'interactive() ? \"0\" : null',\n '[attr.aria-disabled]': 'disabled() || null',\n '(keydown.enter)': 'onActivate($event)',\n '(keydown.space)': 'onActivate($event)',\n },\n})\nexport class WrListItem {\n /** Adds hover / cursor styles + keyboard activation. @default false */\n readonly interactive = input(false, { transform: coerceBooleanProperty });\n\n /** Visual disabled state. Suppresses hover + keyboard activation. @default false */\n readonly disabled = input(false, { transform: coerceBooleanProperty });\n\n protected readonly classes = computed(() => {\n const parts = ['wr-list__item'];\n if (this.interactive()) parts.push('wr-list__item--interactive');\n if (this.disabled()) parts.push('wr-list__item--disabled');\n return parts.join(' ');\n });\n\n protected onActivate(event: Event): void {\n if (!this.interactive() || this.disabled()) return;\n event.preventDefault();\n (event.currentTarget as HTMLElement).click();\n }\n}\n","<span class=\"wr-list__leading\"><ng-content select=\"[wrListItemLeading]\" /></span>\n<span class=\"wr-list__body\"><ng-content /></span>\n<span class=\"wr-list__trailing\"><ng-content select=\"[wrListItemTrailing]\" /></span>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -25,7 +25,7 @@ import { filter } from 'rxjs';
|
|
|
25
25
|
* return next(req).pipe(finalize(() => bar.complete()));
|
|
26
26
|
* ```
|
|
27
27
|
*
|
|
28
|
-
* @see https://ngwr.dev/services/loading-bar
|
|
28
|
+
* @see https://ngwr.dev/reference/services/loading-bar
|
|
29
29
|
*/
|
|
30
30
|
class WrLoadingBar {
|
|
31
31
|
router = inject(Router, { optional: true });
|
|
@@ -108,10 +108,10 @@ class WrLoadingBar {
|
|
|
108
108
|
this._progress.set(0);
|
|
109
109
|
}, 220);
|
|
110
110
|
}
|
|
111
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
112
|
-
static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.0
|
|
111
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrLoadingBar, deps: [], target: i0.ɵɵFactoryTarget.Service });
|
|
112
|
+
static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.0", ngImport: i0, type: WrLoadingBar });
|
|
113
113
|
}
|
|
114
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
114
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrLoadingBar, decorators: [{
|
|
115
115
|
type: Service
|
|
116
116
|
}], ctorParameters: () => [] });
|
|
117
117
|
|
|
@@ -144,10 +144,10 @@ class WrLoadingBarComponent {
|
|
|
144
144
|
bar = inject(WrLoadingBar);
|
|
145
145
|
active = computed(() => this.bar.state() !== 'idle', /* @ts-ignore */
|
|
146
146
|
...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
|
|
147
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
148
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0
|
|
147
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrLoadingBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
148
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: WrLoadingBarComponent, isStandalone: true, selector: "wr-loading-bar", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "wr-loading-bar" }, ngImport: i0, template: "<div class=\"wr-loading-bar__track\" [class.wr-loading-bar--active]=\"active()\">\n <div\n class=\"wr-loading-bar__fill\"\n [style.width.%]=\"bar.progress() * 100\"\n [style.background]=\"color()\"\n [style.height]=\"height()\"\n ></div>\n</div>\n", styles: [".wr-loading-bar{position:fixed;top:0;left:0;right:0;z-index:var(--wr-z-top, 9999);pointer-events:none}.wr-loading-bar__track{width:100%;overflow:hidden;opacity:0;transition:opacity .2s ease}.wr-loading-bar--active{opacity:1}.wr-loading-bar__fill{width:0;height:2px;background:var(--wr-color-primary);box-shadow:0 0 8px rgb(var(--wr-color-primary-rgb)/60%);transition:width .15s ease-out,opacity .2s ease}\n"], encapsulation: i0.ViewEncapsulation.None });
|
|
149
149
|
}
|
|
150
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
150
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrLoadingBarComponent, decorators: [{
|
|
151
151
|
type: Component,
|
|
152
152
|
args: [{ selector: 'wr-loading-bar', encapsulation: ViewEncapsulation.None, host: { class: 'wr-loading-bar' }, template: "<div class=\"wr-loading-bar__track\" [class.wr-loading-bar--active]=\"active()\">\n <div\n class=\"wr-loading-bar__fill\"\n [style.width.%]=\"bar.progress() * 100\"\n [style.background]=\"color()\"\n [style.height]=\"height()\"\n ></div>\n</div>\n", styles: [".wr-loading-bar{position:fixed;top:0;left:0;right:0;z-index:var(--wr-z-top, 9999);pointer-events:none}.wr-loading-bar__track{width:100%;overflow:hidden;opacity:0;transition:opacity .2s ease}.wr-loading-bar--active{opacity:1}.wr-loading-bar__fill{width:0;height:2px;background:var(--wr-color-primary);box-shadow:0 0 8px rgb(var(--wr-color-primary-rgb)/60%);transition:width .15s ease-out,opacity .2s ease}\n"] }]
|
|
153
153
|
}], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }] } });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ngwr-loading-bar.mjs","sources":["../../../projects/lib/loading-bar/services/loading-bar.ts","../../../projects/lib/loading-bar/loading-bar.component.ts","../../../projects/lib/loading-bar/loading-bar.component.html","../../../projects/lib/loading-bar/ngwr-loading-bar.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { Service, type Signal, computed, inject, signal } from '@angular/core';\nimport { toSignal } from '@angular/core/rxjs-interop';\nimport { NavigationCancel, NavigationEnd, NavigationError, NavigationStart, Router } from '@angular/router';\n\nimport { filter } from 'rxjs';\n\nimport type { WrLoadingState } from '../interfaces';\n\n/**\n * Singleton state machine for a top-of-page progress indicator. Driven\n * by router events out of the box, plus a manual `start()` / `complete()`\n * API for HTTP-interceptor-style usage.\n *\n * Pair with `<wr-loading-bar>` to render the bar at the top of your shell.\n *\n * @example\n * ```ts\n * // From an HttpInterceptor:\n * const bar = inject(WrLoadingBar);\n * bar.start();\n * return next(req).pipe(finalize(() => bar.complete()));\n * ```\n *\n * @see https://ngwr.dev/services/loading-bar\n */\n@Service()\nexport class WrLoadingBar {\n private readonly router = inject(Router, { optional: true });\n\n /** Live count of pending \"tasks\" (manual + router). */\n private readonly count = signal(0);\n\n /** Tween value `[0, 1]` — the bar's actual width. */\n private readonly _progress = signal(0);\n readonly progress: Signal<number> = this._progress.asReadonly();\n\n readonly state: Signal<WrLoadingState> = computed(() => {\n if (this.count() > 0) return 'running';\n return this._progress() > 0 ? 'completing' : 'idle';\n });\n\n private timer: ReturnType<typeof setInterval> | null = null;\n\n constructor() {\n if (this.router) {\n // Mirror router events: any in-flight navigation starts the bar,\n // each terminal event releases one slot.\n toSignal(\n this.router.events.pipe(\n filter(\n e =>\n e instanceof NavigationStart ||\n e instanceof NavigationEnd ||\n e instanceof NavigationCancel ||\n e instanceof NavigationError\n )\n ),\n { manualCleanup: true }\n );\n this.router.events.subscribe(event => {\n if (event instanceof NavigationStart) this.start();\n else if (\n event instanceof NavigationEnd ||\n event instanceof NavigationCancel ||\n event instanceof NavigationError\n ) {\n this.complete();\n }\n });\n }\n }\n\n /** Reserve a slot. The bar starts trickling as long as `count > 0`. */\n start(): void {\n if (this.count() === 0) this.beginTrickle();\n this.count.update(v => v + 1);\n }\n\n /** Release a slot. When the last one closes, the bar fast-forwards to 100% then resets. */\n complete(): void {\n this.count.update(v => Math.max(0, v - 1));\n if (this.count() === 0) this.finish();\n }\n\n /** Cancel without animating the bar to 100%. Resets immediately. */\n reset(): void {\n this.count.set(0);\n this.stopTrickle();\n this._progress.set(0);\n }\n\n // Internals\n\n private beginTrickle(): void {\n this.stopTrickle();\n if (this._progress() === 0) this._progress.set(0.08);\n this.timer = setInterval(() => {\n const p = this._progress();\n // Approach 90% asymptotically — we want the user-visible final jump\n // to clearly indicate completion.\n const next = p + (0.9 - p) * 0.08;\n this._progress.set(next);\n }, 150);\n }\n\n private stopTrickle(): void {\n if (this.timer === null) return;\n clearInterval(this.timer);\n this.timer = null;\n }\n\n private finish(): void {\n this.stopTrickle();\n this._progress.set(1);\n // Give the bar a moment to render the final 100% width before resetting.\n setTimeout(() => {\n if (this.count() === 0) this._progress.set(0);\n }, 220);\n }\n}\n\nexport type { WrLoadingState } from '../interfaces';\n","/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { Component, ViewEncapsulation, computed, inject, input } from '@angular/core';\n\nimport { WrLoadingBar } from './services/loading-bar';\n\n/**\n * Thin progress bar fixed to the top of the viewport.\n *\n * Drop one at the root of your shell. Reads the singleton {@link WrLoadingBar}\n * — every router navigation drives it automatically; HTTP interceptors\n * can call `start()` / `complete()` to add their own slots.\n *\n * @example\n * ```html\n * <wr-loading-bar /> <!-- top, primary color -->\n * <wr-loading-bar color=\"#9b51e0\" height=\"3px\" />\n * ```\n */\n@Component({\n selector: 'wr-loading-bar',\n templateUrl: './loading-bar.component.html',\n styleUrl: './loading-bar.scss',\n encapsulation: ViewEncapsulation.None,\n host: { class: 'wr-loading-bar' },\n})\nexport class WrLoadingBarComponent {\n /** Bar colour. Defaults to the primary brand colour. */\n readonly color = input<string>('var(--wr-color-primary)');\n\n /** Bar height. */\n readonly height = input<string>('2px');\n\n protected readonly bar = inject(WrLoadingBar);\n\n protected readonly active = computed(() => this.bar.state() !== 'idle');\n}\n","<div class=\"wr-loading-bar__track\" [class.wr-loading-bar--active]=\"active()\">\n <div\n class=\"wr-loading-bar__fill\"\n [style.width.%]=\"bar.progress() * 100\"\n [style.background]=\"color()\"\n [style.height]=\"height()\"\n ></div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ngwr-loading-bar.mjs","sources":["../../../projects/lib/loading-bar/services/loading-bar.ts","../../../projects/lib/loading-bar/loading-bar.component.ts","../../../projects/lib/loading-bar/loading-bar.component.html","../../../projects/lib/loading-bar/ngwr-loading-bar.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { Service, type Signal, computed, inject, signal } from '@angular/core';\nimport { toSignal } from '@angular/core/rxjs-interop';\nimport { NavigationCancel, NavigationEnd, NavigationError, NavigationStart, Router } from '@angular/router';\n\nimport { filter } from 'rxjs';\n\nimport type { WrLoadingState } from '../interfaces';\n\n/**\n * Singleton state machine for a top-of-page progress indicator. Driven\n * by router events out of the box, plus a manual `start()` / `complete()`\n * API for HTTP-interceptor-style usage.\n *\n * Pair with `<wr-loading-bar>` to render the bar at the top of your shell.\n *\n * @example\n * ```ts\n * // From an HttpInterceptor:\n * const bar = inject(WrLoadingBar);\n * bar.start();\n * return next(req).pipe(finalize(() => bar.complete()));\n * ```\n *\n * @see https://ngwr.dev/reference/services/loading-bar\n */\n@Service()\nexport class WrLoadingBar {\n private readonly router = inject(Router, { optional: true });\n\n /** Live count of pending \"tasks\" (manual + router). */\n private readonly count = signal(0);\n\n /** Tween value `[0, 1]` — the bar's actual width. */\n private readonly _progress = signal(0);\n readonly progress: Signal<number> = this._progress.asReadonly();\n\n readonly state: Signal<WrLoadingState> = computed(() => {\n if (this.count() > 0) return 'running';\n return this._progress() > 0 ? 'completing' : 'idle';\n });\n\n private timer: ReturnType<typeof setInterval> | null = null;\n\n constructor() {\n if (this.router) {\n // Mirror router events: any in-flight navigation starts the bar,\n // each terminal event releases one slot.\n toSignal(\n this.router.events.pipe(\n filter(\n e =>\n e instanceof NavigationStart ||\n e instanceof NavigationEnd ||\n e instanceof NavigationCancel ||\n e instanceof NavigationError\n )\n ),\n { manualCleanup: true }\n );\n this.router.events.subscribe(event => {\n if (event instanceof NavigationStart) this.start();\n else if (\n event instanceof NavigationEnd ||\n event instanceof NavigationCancel ||\n event instanceof NavigationError\n ) {\n this.complete();\n }\n });\n }\n }\n\n /** Reserve a slot. The bar starts trickling as long as `count > 0`. */\n start(): void {\n if (this.count() === 0) this.beginTrickle();\n this.count.update(v => v + 1);\n }\n\n /** Release a slot. When the last one closes, the bar fast-forwards to 100% then resets. */\n complete(): void {\n this.count.update(v => Math.max(0, v - 1));\n if (this.count() === 0) this.finish();\n }\n\n /** Cancel without animating the bar to 100%. Resets immediately. */\n reset(): void {\n this.count.set(0);\n this.stopTrickle();\n this._progress.set(0);\n }\n\n // Internals\n\n private beginTrickle(): void {\n this.stopTrickle();\n if (this._progress() === 0) this._progress.set(0.08);\n this.timer = setInterval(() => {\n const p = this._progress();\n // Approach 90% asymptotically — we want the user-visible final jump\n // to clearly indicate completion.\n const next = p + (0.9 - p) * 0.08;\n this._progress.set(next);\n }, 150);\n }\n\n private stopTrickle(): void {\n if (this.timer === null) return;\n clearInterval(this.timer);\n this.timer = null;\n }\n\n private finish(): void {\n this.stopTrickle();\n this._progress.set(1);\n // Give the bar a moment to render the final 100% width before resetting.\n setTimeout(() => {\n if (this.count() === 0) this._progress.set(0);\n }, 220);\n }\n}\n\nexport type { WrLoadingState } from '../interfaces';\n","/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { Component, ViewEncapsulation, computed, inject, input } from '@angular/core';\n\nimport { WrLoadingBar } from './services/loading-bar';\n\n/**\n * Thin progress bar fixed to the top of the viewport.\n *\n * Drop one at the root of your shell. Reads the singleton {@link WrLoadingBar}\n * — every router navigation drives it automatically; HTTP interceptors\n * can call `start()` / `complete()` to add their own slots.\n *\n * @example\n * ```html\n * <wr-loading-bar /> <!-- top, primary color -->\n * <wr-loading-bar color=\"#9b51e0\" height=\"3px\" />\n * ```\n */\n@Component({\n selector: 'wr-loading-bar',\n templateUrl: './loading-bar.component.html',\n styleUrl: './loading-bar.scss',\n encapsulation: ViewEncapsulation.None,\n host: { class: 'wr-loading-bar' },\n})\nexport class WrLoadingBarComponent {\n /** Bar colour. Defaults to the primary brand colour. */\n readonly color = input<string>('var(--wr-color-primary)');\n\n /** Bar height. */\n readonly height = input<string>('2px');\n\n protected readonly bar = inject(WrLoadingBar);\n\n protected readonly active = computed(() => this.bar.state() !== 'idle');\n}\n","<div class=\"wr-loading-bar__track\" [class.wr-loading-bar--active]=\"active()\">\n <div\n class=\"wr-loading-bar__fill\"\n [style.width.%]=\"bar.progress() * 100\"\n [style.background]=\"color()\"\n [style.height]=\"height()\"\n ></div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -70,7 +70,8 @@ class WrMarquee {
|
|
|
70
70
|
/** Accessible label for the carousel region. @default 'Marquee' */
|
|
71
71
|
ariaLabel = input('Marquee', /* @ts-ignore */
|
|
72
72
|
...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
73
|
-
trackEl = viewChild.required('track'
|
|
73
|
+
trackEl = viewChild.required('track', /* @ts-ignore */
|
|
74
|
+
...(ngDevMode ? [{ debugName: "trackEl" }] : /* istanbul ignore next */ []));
|
|
74
75
|
host = inject(ElementRef);
|
|
75
76
|
destroyRef = inject(DestroyRef);
|
|
76
77
|
isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
|
|
@@ -199,10 +200,10 @@ class WrMarquee {
|
|
|
199
200
|
raf = requestAnimationFrame(tick);
|
|
200
201
|
this.destroyRef.onDestroy(() => cancelAnimationFrame(raf));
|
|
201
202
|
}
|
|
202
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
203
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0
|
|
203
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrMarquee, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
204
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: WrMarquee, isStandalone: true, selector: "wr-marquee", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, speed: { classPropertyName: "speed", publicName: "speed", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, pauseOnHover: { classPropertyName: "pauseOnHover", publicName: "pauseOnHover", isSignal: true, isRequired: false, transformFunction: null }, hoverSpeed: { classPropertyName: "hoverSpeed", publicName: "hoverSpeed", isSignal: true, isRequired: false, transformFunction: null }, fadeOut: { classPropertyName: "fadeOut", publicName: "fadeOut", isSignal: true, isRequired: false, transformFunction: null }, fadeOutColor: { classPropertyName: "fadeOutColor", publicName: "fadeOutColor", isSignal: true, isRequired: false, transformFunction: null }, scaleOnHover: { classPropertyName: "scaleOnHover", publicName: "scaleOnHover", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.wr-marquee--fade": "fadeOut()", "class.wr-marquee--scale-hover": "scaleOnHover()", "style.--wr-marquee-gap.px": "gap()", "style.--wr-marquee-height.px": "itemHeight()", "style.--wr-marquee-fade-color": "fadeOutColor() || null", "attr.role": "\"region\"", "attr.aria-label": "ariaLabel()" }, classAttribute: "wr-marquee" }, viewQueries: [{ propertyName: "trackEl", first: true, predicate: ["track"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"wr-marquee__track\" #track (mouseenter)=\"onEnter()\" (mouseleave)=\"onLeave()\">\n @for (copyIndex of copyIndices(); track copyIndex) {\n <ul class=\"wr-marquee__list\" role=\"list\" [attr.aria-hidden]=\"copyIndex > 0\" [attr.data-copy]=\"copyIndex\">\n @for (item of items(); track $index) {\n <li class=\"wr-marquee__item\" role=\"listitem\">\n @if (item.href) {\n <a\n class=\"wr-marquee__link\"\n [href]=\"item.href\"\n [attr.aria-label]=\"\n isNodeItem(item) ? item.ariaLabel || item.title || 'link' : item.alt || item.title || 'link'\n \"\n target=\"_blank\"\n rel=\"noreferrer noopener\"\n >\n <ng-container *ngTemplateOutlet=\"content; context: { $implicit: item }\" />\n </a>\n } @else {\n <ng-container *ngTemplateOutlet=\"content; context: { $implicit: item }\" />\n }\n </li>\n }\n </ul>\n }\n</div>\n\n<ng-template #content let-item>\n @if (isNodeItem(item)) {\n <span class=\"wr-marquee__node\" [attr.aria-hidden]=\"!!item.href && !item.ariaLabel\">\n <ng-container *ngTemplateOutlet=\"item.node\" />\n </span>\n } @else {\n <img\n [src]=\"item.src\"\n [srcset]=\"item.srcSet || null\"\n [sizes]=\"item.sizes || null\"\n [width]=\"item.width || null\"\n [height]=\"item.height || null\"\n [alt]=\"item.alt || ''\"\n [title]=\"item.title || null\"\n loading=\"lazy\"\n decoding=\"async\"\n draggable=\"false\"\n />\n }\n</ng-template>\n", styles: [".wr-marquee{--wr-marquee-gap: 32px;--wr-marquee-height: 28px;--wr-marquee-fade-color-auto: var(--wr-color-surface, #ffffff);position:relative;display:block;width:100%;overflow:hidden}.wr-marquee--scale-hover{padding-top:calc(var(--wr-marquee-height) * .1);padding-bottom:calc(var(--wr-marquee-height) * .1)}.wr-marquee__track{display:flex;width:max-content;will-change:transform;-webkit-user-select:none;user-select:none;position:relative;z-index:0}.wr-marquee__list{display:flex;align-items:center;margin:0;padding:0;list-style:none}.wr-marquee__item{flex:0 0 auto;margin-right:var(--wr-marquee-gap);font-size:var(--wr-marquee-height);line-height:1}.wr-marquee__item:last-child{margin-right:var(--wr-marquee-gap)}.wr-marquee__node{display:inline-flex;align-items:center}.wr-marquee__item img{height:var(--wr-marquee-height);width:auto;display:block;object-fit:contain;image-rendering:-webkit-optimize-contrast;-webkit-user-drag:none;pointer-events:none;transition:transform .3s cubic-bezier(.4,0,.2,1)}.wr-marquee--scale-hover .wr-marquee__item{overflow:visible}.wr-marquee--scale-hover .wr-marquee__item:hover img,.wr-marquee--scale-hover .wr-marquee__item:hover .wr-marquee__node{transform:scale(1.2);transform-origin:center center}.wr-marquee--scale-hover .wr-marquee__node{transition:transform .3s cubic-bezier(.4,0,.2,1)}.wr-marquee__link{display:inline-flex;align-items:center;text-decoration:none;border-radius:4px;transition:opacity .2s ease}.wr-marquee__link:hover{opacity:.8}.wr-marquee__link:focus-visible{outline:2px solid currentColor;outline-offset:2px}.wr-marquee--fade:before,.wr-marquee--fade:after{content:\"\";position:absolute;top:0;bottom:0;width:clamp(24px,8%,120px);pointer-events:none;z-index:10}.wr-marquee--fade:before{left:0;background:linear-gradient(to right,var(--wr-marquee-fade-color, var(--wr-marquee-fade-color-auto)) 0%,rgba(0,0,0,0) 100%)}.wr-marquee--fade:after{right:0;background:linear-gradient(to left,var(--wr-marquee-fade-color, var(--wr-marquee-fade-color-auto)) 0%,rgba(0,0,0,0) 100%)}@media(prefers-reduced-motion:reduce){.wr-marquee .wr-marquee__track{transform:translateZ(0)!important}.wr-marquee .wr-marquee__item img,.wr-marquee .wr-marquee__node{transition:none!important}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
204
205
|
}
|
|
205
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
206
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrMarquee, decorators: [{
|
|
206
207
|
type: Component,
|
|
207
208
|
args: [{ selector: 'wr-marquee', encapsulation: ViewEncapsulation.None, imports: [NgTemplateOutlet], host: {
|
|
208
209
|
class: 'wr-marquee',
|
|
@@ -213,7 +214,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
|
|
|
213
214
|
'[style.--wr-marquee-fade-color]': 'fadeOutColor() || null',
|
|
214
215
|
'[attr.role]': '"region"',
|
|
215
216
|
'[attr.aria-label]': 'ariaLabel()',
|
|
216
|
-
}, template: "<div class=\"wr-marquee__track\" #track (mouseenter)=\"onEnter()\" (mouseleave)=\"onLeave()\">\n @for (copyIndex of copyIndices(); track copyIndex) {\n <ul class=\"wr-marquee__list\" role=\"list\" [attr.aria-hidden]=\"copyIndex > 0\" [attr.data-copy]=\"copyIndex\">\n @for (item of items(); track $index) {\n <li class=\"wr-marquee__item\" role=\"listitem\">\n @if (item.href) {\n <a\n class=\"wr-marquee__link\"\n [href]=\"item.href\"\n [attr.aria-label]=\"\n isNodeItem(item) ? item.ariaLabel || item.title || 'link' : item.alt || item.title || 'link'\n \"\n target=\"_blank\"\n rel=\"noreferrer noopener\"\n >\n <ng-container *ngTemplateOutlet=\"content; context: { $implicit: item }\" />\n </a>\n } @else {\n <ng-container *ngTemplateOutlet=\"content; context: { $implicit: item }\" />\n }\n </li>\n }\n </ul>\n }\n</div>\n\n<ng-template #content let-item>\n @if (isNodeItem(item)) {\n <span class=\"wr-marquee__node\" [attr.aria-hidden]=\"!!item.href && !item.ariaLabel\">\n <ng-container *ngTemplateOutlet=\"item.node\" />\n </span>\n } @else {\n <img\n [src]=\"item.src\"\n [srcset]=\"item.srcSet || null\"\n [sizes]=\"item.sizes || null\"\n [width]=\"item.width || null\"\n [height]=\"item.height || null\"\n [alt]=\"item.alt || ''\"\n [title]=\"item.title || null\"\n loading=\"lazy\"\n decoding=\"async\"\n draggable=\"false\"\n />\n }\n</ng-template>\n", styles: [".wr-marquee{--wr-marquee-gap: 32px;--wr-marquee-height: 28px;--wr-marquee-fade-color-auto: var(--wr-color-
|
|
217
|
+
}, template: "<div class=\"wr-marquee__track\" #track (mouseenter)=\"onEnter()\" (mouseleave)=\"onLeave()\">\n @for (copyIndex of copyIndices(); track copyIndex) {\n <ul class=\"wr-marquee__list\" role=\"list\" [attr.aria-hidden]=\"copyIndex > 0\" [attr.data-copy]=\"copyIndex\">\n @for (item of items(); track $index) {\n <li class=\"wr-marquee__item\" role=\"listitem\">\n @if (item.href) {\n <a\n class=\"wr-marquee__link\"\n [href]=\"item.href\"\n [attr.aria-label]=\"\n isNodeItem(item) ? item.ariaLabel || item.title || 'link' : item.alt || item.title || 'link'\n \"\n target=\"_blank\"\n rel=\"noreferrer noopener\"\n >\n <ng-container *ngTemplateOutlet=\"content; context: { $implicit: item }\" />\n </a>\n } @else {\n <ng-container *ngTemplateOutlet=\"content; context: { $implicit: item }\" />\n }\n </li>\n }\n </ul>\n }\n</div>\n\n<ng-template #content let-item>\n @if (isNodeItem(item)) {\n <span class=\"wr-marquee__node\" [attr.aria-hidden]=\"!!item.href && !item.ariaLabel\">\n <ng-container *ngTemplateOutlet=\"item.node\" />\n </span>\n } @else {\n <img\n [src]=\"item.src\"\n [srcset]=\"item.srcSet || null\"\n [sizes]=\"item.sizes || null\"\n [width]=\"item.width || null\"\n [height]=\"item.height || null\"\n [alt]=\"item.alt || ''\"\n [title]=\"item.title || null\"\n loading=\"lazy\"\n decoding=\"async\"\n draggable=\"false\"\n />\n }\n</ng-template>\n", styles: [".wr-marquee{--wr-marquee-gap: 32px;--wr-marquee-height: 28px;--wr-marquee-fade-color-auto: var(--wr-color-surface, #ffffff);position:relative;display:block;width:100%;overflow:hidden}.wr-marquee--scale-hover{padding-top:calc(var(--wr-marquee-height) * .1);padding-bottom:calc(var(--wr-marquee-height) * .1)}.wr-marquee__track{display:flex;width:max-content;will-change:transform;-webkit-user-select:none;user-select:none;position:relative;z-index:0}.wr-marquee__list{display:flex;align-items:center;margin:0;padding:0;list-style:none}.wr-marquee__item{flex:0 0 auto;margin-right:var(--wr-marquee-gap);font-size:var(--wr-marquee-height);line-height:1}.wr-marquee__item:last-child{margin-right:var(--wr-marquee-gap)}.wr-marquee__node{display:inline-flex;align-items:center}.wr-marquee__item img{height:var(--wr-marquee-height);width:auto;display:block;object-fit:contain;image-rendering:-webkit-optimize-contrast;-webkit-user-drag:none;pointer-events:none;transition:transform .3s cubic-bezier(.4,0,.2,1)}.wr-marquee--scale-hover .wr-marquee__item{overflow:visible}.wr-marquee--scale-hover .wr-marquee__item:hover img,.wr-marquee--scale-hover .wr-marquee__item:hover .wr-marquee__node{transform:scale(1.2);transform-origin:center center}.wr-marquee--scale-hover .wr-marquee__node{transition:transform .3s cubic-bezier(.4,0,.2,1)}.wr-marquee__link{display:inline-flex;align-items:center;text-decoration:none;border-radius:4px;transition:opacity .2s ease}.wr-marquee__link:hover{opacity:.8}.wr-marquee__link:focus-visible{outline:2px solid currentColor;outline-offset:2px}.wr-marquee--fade:before,.wr-marquee--fade:after{content:\"\";position:absolute;top:0;bottom:0;width:clamp(24px,8%,120px);pointer-events:none;z-index:10}.wr-marquee--fade:before{left:0;background:linear-gradient(to right,var(--wr-marquee-fade-color, var(--wr-marquee-fade-color-auto)) 0%,rgba(0,0,0,0) 100%)}.wr-marquee--fade:after{right:0;background:linear-gradient(to left,var(--wr-marquee-fade-color, var(--wr-marquee-fade-color-auto)) 0%,rgba(0,0,0,0) 100%)}@media(prefers-reduced-motion:reduce){.wr-marquee .wr-marquee__track{transform:translateZ(0)!important}.wr-marquee .wr-marquee__item img,.wr-marquee .wr-marquee__node{transition:none!important}}\n"] }]
|
|
217
218
|
}], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], speed: [{ type: i0.Input, args: [{ isSignal: true, alias: "speed", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], itemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemHeight", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], pauseOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "pauseOnHover", required: false }] }], hoverSpeed: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverSpeed", required: false }] }], fadeOut: [{ type: i0.Input, args: [{ isSignal: true, alias: "fadeOut", required: false }] }], fadeOutColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "fadeOutColor", required: false }] }], scaleOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "scaleOnHover", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], trackEl: [{ type: i0.ViewChild, args: ['track', { isSignal: true }] }] } });
|
|
218
219
|
|
|
219
220
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ngwr-marquee.mjs","sources":["../../../projects/lib/marquee/marquee.ts","../../../projects/lib/marquee/marquee.html","../../../projects/lib/marquee/ngwr-marquee.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n *\n * Angular adaptation of the LogoLoop effect by David Haz / reactbits.dev.\n * Original: https://www.reactbits.dev/animations/logo-loop\n *\n * Renamed `wr-marquee` in ngwr — same rAF-driven infinite carousel,\n * supports image + template items, optional fade/scale/pause-on-hover.\n */\n\nimport { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';\nimport { NgTemplateOutlet, isPlatformBrowser } from '@angular/common';\nimport {\n Component,\n DestroyRef,\n ElementRef,\n PLATFORM_ID,\n ViewEncapsulation,\n afterNextRender,\n computed,\n effect,\n inject,\n input,\n signal,\n viewChild,\n} from '@angular/core';\n\nimport { numAttr } from 'ngwr/utils';\n\nimport type { WrMarqueeNode, WrMarqueeItem } from './interfaces';\n\nconst SMOOTH_TAU = 0.25;\nconst MIN_COPIES = 2;\nconst COPY_HEADROOM = 2;\n\nfunction isNode(item: WrMarqueeItem): item is WrMarqueeNode {\n return 'node' in item;\n}\n\n/**\n * Endless horizontal marquee. Auto-duplicates the items list until it\n * covers the container width, then animates the track with a smooth\n * rAF-driven scroll. Optional edge fades, scale-on-hover, and pause /\n * variable-speed hover behaviour.\n *\n * @example\n * ```html\n * <wr-marquee\n * [items]=\"logos\"\n * [speed]=\"80\"\n * [gap]=\"48\"\n * [itemHeight]=\"36\"\n * [fadeOut]=\"true\"\n * [scaleOnHover]=\"true\"\n * [pauseOnHover]=\"true\"\n * />\n * ```\n *\n * @see https://www.reactbits.dev/animations/logo-loop\n */\n@Component({\n selector: 'wr-marquee',\n templateUrl: './marquee.html',\n styleUrl: './marquee.scss',\n encapsulation: ViewEncapsulation.None,\n imports: [NgTemplateOutlet],\n host: {\n class: 'wr-marquee',\n '[class.wr-marquee--fade]': 'fadeOut()',\n '[class.wr-marquee--scale-hover]': 'scaleOnHover()',\n '[style.--wr-marquee-gap.px]': 'gap()',\n '[style.--wr-marquee-height.px]': 'itemHeight()',\n '[style.--wr-marquee-fade-color]': 'fadeOutColor() || null',\n '[attr.role]': '\"region\"',\n '[attr.aria-label]': 'ariaLabel()',\n },\n})\nexport class WrMarquee {\n /** Items to display. Each entry is either an image source or a TemplateRef node. */\n readonly items = input.required<readonly WrMarqueeItem[]>();\n\n /** Scroll speed in pixels per second. Negative reverses direction. @default 120 */\n readonly speed = input(120, { transform: numAttr(120) });\n\n /** Track direction. @default 'left' */\n readonly direction = input<'left' | 'right'>('left');\n\n /** Item height in pixels. @default 28 */\n readonly itemHeight = input(28, { transform: numAttr(28) });\n\n /** Gap between items in pixels. @default 32 */\n readonly gap = input(32, { transform: numAttr(32) });\n\n /** Pause the loop on hover. @default false */\n readonly pauseOnHover = input(false, { transform: coerceBooleanProperty });\n\n /** Custom speed (px/s) when hovered. Overrides `pauseOnHover`. */\n readonly hoverSpeed = input<number | undefined>(undefined, {\n transform: (v: unknown): number | undefined => (v == null || v === '' ? undefined : coerceNumberProperty(v, 0)),\n });\n\n /** Apply edge fade-out gradients. @default false */\n readonly fadeOut = input(false, { transform: coerceBooleanProperty });\n\n /** CSS colour for the fade-out gradient. Defaults to the page background. */\n readonly fadeOutColor = input<string>('');\n\n /** Scale individual items up on hover. @default false */\n readonly scaleOnHover = input(false, { transform: coerceBooleanProperty });\n\n /** Accessible label for the carousel region. @default 'Marquee' */\n readonly ariaLabel = input('Marquee');\n\n private readonly trackEl = viewChild.required<ElementRef<HTMLElement>>('track');\n\n private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n private readonly destroyRef = inject(DestroyRef);\n private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));\n\n protected readonly seqWidth = signal(0);\n protected readonly copyCount = signal(MIN_COPIES);\n protected readonly isHovered = signal(false);\n\n protected readonly copyIndices = computed(() => Array.from({ length: this.copyCount() }, (_, i) => i));\n\n /** Resolved hover speed: `hoverSpeed` overrides, else 0 when `pauseOnHover`, else live. */\n private readonly effectiveHoverSpeed = computed<number | undefined>(() => {\n const explicit = this.hoverSpeed();\n if (explicit !== undefined) return explicit;\n return this.pauseOnHover() ? 0 : undefined;\n });\n\n /** Target velocity in px/s, sign baked in. */\n private readonly targetVelocity = computed(() => {\n const s = this.speed();\n const sign = this.direction() === 'left' ? 1 : -1;\n return Math.abs(s) * sign * (s < 0 ? -1 : 1);\n });\n\n constructor() {\n if (!this.isBrowser) return;\n\n afterNextRender(() => {\n this.measure();\n this.watchResize();\n this.watchImageLoads();\n this.startLoop();\n });\n\n // Re-measure on input changes that affect layout (items, gap, height).\n effect(() => {\n this.items();\n this.gap();\n this.itemHeight();\n queueMicrotask(() => this.measure());\n });\n }\n\n protected onEnter(): void {\n if (this.effectiveHoverSpeed() !== undefined) this.isHovered.set(true);\n }\n protected onLeave(): void {\n if (this.effectiveHoverSpeed() !== undefined) this.isHovered.set(false);\n }\n protected isNodeItem = isNode;\n\n // Internals\n\n /** Read first sequence width + decide how many copies cover the viewport. */\n private measure(): void {\n const hostEl = this.host.nativeElement;\n const seqEl = hostEl.querySelector<HTMLElement>('.wr-marquee__list');\n if (!seqEl) return;\n const seqWidth = Math.ceil(seqEl.getBoundingClientRect().width);\n if (seqWidth <= 0) return;\n this.seqWidth.set(seqWidth);\n const containerWidth = hostEl.clientWidth || seqWidth;\n const copies = Math.max(MIN_COPIES, Math.ceil(containerWidth / seqWidth) + COPY_HEADROOM);\n this.copyCount.set(copies);\n }\n\n private watchResize(): void {\n const hostEl = this.host.nativeElement;\n if (typeof ResizeObserver === 'undefined') {\n const onResize = (): void => this.measure();\n window.addEventListener('resize', onResize);\n this.destroyRef.onDestroy(() => window.removeEventListener('resize', onResize));\n return;\n }\n const ro = new ResizeObserver(() => this.measure());\n ro.observe(hostEl);\n const seqEl = hostEl.querySelector<HTMLElement>('.wr-marquee__list');\n if (seqEl) ro.observe(seqEl);\n this.destroyRef.onDestroy(() => ro.disconnect());\n }\n\n private watchImageLoads(): void {\n const hostEl = this.host.nativeElement;\n const seqEl = hostEl.querySelector<HTMLElement>('.wr-marquee__list');\n if (!seqEl) return;\n const imgs = seqEl.querySelectorAll('img');\n if (imgs.length === 0) return;\n let remaining = imgs.length;\n const onDone = (): void => {\n remaining -= 1;\n if (remaining === 0) this.measure();\n };\n imgs.forEach(img => {\n if (img.complete) onDone();\n else {\n img.addEventListener('load', onDone, { once: true });\n img.addEventListener('error', onDone, { once: true });\n }\n });\n }\n\n private startLoop(): void {\n const track = this.trackEl().nativeElement;\n let raf = 0;\n let lastTs: number | null = null;\n let offset = 0;\n let velocity = 0;\n\n const tick = (ts: number): void => {\n lastTs ??= ts;\n const dt = Math.max(0, ts - lastTs) / 1000;\n lastTs = ts;\n\n const target = this.isHovered() ? (this.effectiveHoverSpeed() ?? this.targetVelocity()) : this.targetVelocity();\n const ease = 1 - Math.exp(-dt / SMOOTH_TAU);\n velocity += (target - velocity) * ease;\n\n const w = this.seqWidth();\n if (w > 0) {\n offset = (((offset + velocity * dt) % w) + w) % w;\n track.style.transform = `translate3d(${-offset}px, 0, 0)`;\n }\n raf = requestAnimationFrame(tick);\n };\n\n raf = requestAnimationFrame(tick);\n this.destroyRef.onDestroy(() => cancelAnimationFrame(raf));\n }\n}\n\nexport type { WrMarqueeImage, WrMarqueeNode, WrMarqueeItem } from './interfaces';\n","<div class=\"wr-marquee__track\" #track (mouseenter)=\"onEnter()\" (mouseleave)=\"onLeave()\">\n @for (copyIndex of copyIndices(); track copyIndex) {\n <ul class=\"wr-marquee__list\" role=\"list\" [attr.aria-hidden]=\"copyIndex > 0\" [attr.data-copy]=\"copyIndex\">\n @for (item of items(); track $index) {\n <li class=\"wr-marquee__item\" role=\"listitem\">\n @if (item.href) {\n <a\n class=\"wr-marquee__link\"\n [href]=\"item.href\"\n [attr.aria-label]=\"\n isNodeItem(item) ? item.ariaLabel || item.title || 'link' : item.alt || item.title || 'link'\n \"\n target=\"_blank\"\n rel=\"noreferrer noopener\"\n >\n <ng-container *ngTemplateOutlet=\"content; context: { $implicit: item }\" />\n </a>\n } @else {\n <ng-container *ngTemplateOutlet=\"content; context: { $implicit: item }\" />\n }\n </li>\n }\n </ul>\n }\n</div>\n\n<ng-template #content let-item>\n @if (isNodeItem(item)) {\n <span class=\"wr-marquee__node\" [attr.aria-hidden]=\"!!item.href && !item.ariaLabel\">\n <ng-container *ngTemplateOutlet=\"item.node\" />\n </span>\n } @else {\n <img\n [src]=\"item.src\"\n [srcset]=\"item.srcSet || null\"\n [sizes]=\"item.sizes || null\"\n [width]=\"item.width || null\"\n [height]=\"item.height || null\"\n [alt]=\"item.alt || ''\"\n [title]=\"item.title || null\"\n loading=\"lazy\"\n decoding=\"async\"\n draggable=\"false\"\n />\n }\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ngwr-marquee.mjs","sources":["../../../projects/lib/marquee/marquee.ts","../../../projects/lib/marquee/marquee.html","../../../projects/lib/marquee/ngwr-marquee.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n *\n * Angular adaptation of the LogoLoop effect by David Haz / reactbits.dev.\n * Original: https://www.reactbits.dev/animations/logo-loop\n *\n * Renamed `wr-marquee` in ngwr — same rAF-driven infinite carousel,\n * supports image + template items, optional fade/scale/pause-on-hover.\n */\n\nimport { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';\nimport { NgTemplateOutlet, isPlatformBrowser } from '@angular/common';\nimport {\n Component,\n DestroyRef,\n ElementRef,\n PLATFORM_ID,\n ViewEncapsulation,\n afterNextRender,\n computed,\n effect,\n inject,\n input,\n signal,\n viewChild,\n} from '@angular/core';\n\nimport { numAttr } from 'ngwr/utils';\n\nimport type { WrMarqueeNode, WrMarqueeItem } from './interfaces';\n\nconst SMOOTH_TAU = 0.25;\nconst MIN_COPIES = 2;\nconst COPY_HEADROOM = 2;\n\nfunction isNode(item: WrMarqueeItem): item is WrMarqueeNode {\n return 'node' in item;\n}\n\n/**\n * Endless horizontal marquee. Auto-duplicates the items list until it\n * covers the container width, then animates the track with a smooth\n * rAF-driven scroll. Optional edge fades, scale-on-hover, and pause /\n * variable-speed hover behaviour.\n *\n * @example\n * ```html\n * <wr-marquee\n * [items]=\"logos\"\n * [speed]=\"80\"\n * [gap]=\"48\"\n * [itemHeight]=\"36\"\n * [fadeOut]=\"true\"\n * [scaleOnHover]=\"true\"\n * [pauseOnHover]=\"true\"\n * />\n * ```\n *\n * @see https://www.reactbits.dev/animations/logo-loop\n */\n@Component({\n selector: 'wr-marquee',\n templateUrl: './marquee.html',\n styleUrl: './marquee.scss',\n encapsulation: ViewEncapsulation.None,\n imports: [NgTemplateOutlet],\n host: {\n class: 'wr-marquee',\n '[class.wr-marquee--fade]': 'fadeOut()',\n '[class.wr-marquee--scale-hover]': 'scaleOnHover()',\n '[style.--wr-marquee-gap.px]': 'gap()',\n '[style.--wr-marquee-height.px]': 'itemHeight()',\n '[style.--wr-marquee-fade-color]': 'fadeOutColor() || null',\n '[attr.role]': '\"region\"',\n '[attr.aria-label]': 'ariaLabel()',\n },\n})\nexport class WrMarquee {\n /** Items to display. Each entry is either an image source or a TemplateRef node. */\n readonly items = input.required<readonly WrMarqueeItem[]>();\n\n /** Scroll speed in pixels per second. Negative reverses direction. @default 120 */\n readonly speed = input(120, { transform: numAttr(120) });\n\n /** Track direction. @default 'left' */\n readonly direction = input<'left' | 'right'>('left');\n\n /** Item height in pixels. @default 28 */\n readonly itemHeight = input(28, { transform: numAttr(28) });\n\n /** Gap between items in pixels. @default 32 */\n readonly gap = input(32, { transform: numAttr(32) });\n\n /** Pause the loop on hover. @default false */\n readonly pauseOnHover = input(false, { transform: coerceBooleanProperty });\n\n /** Custom speed (px/s) when hovered. Overrides `pauseOnHover`. */\n readonly hoverSpeed = input<number | undefined>(undefined, {\n transform: (v: unknown): number | undefined => (v == null || v === '' ? undefined : coerceNumberProperty(v, 0)),\n });\n\n /** Apply edge fade-out gradients. @default false */\n readonly fadeOut = input(false, { transform: coerceBooleanProperty });\n\n /** CSS colour for the fade-out gradient. Defaults to the page background. */\n readonly fadeOutColor = input<string>('');\n\n /** Scale individual items up on hover. @default false */\n readonly scaleOnHover = input(false, { transform: coerceBooleanProperty });\n\n /** Accessible label for the carousel region. @default 'Marquee' */\n readonly ariaLabel = input('Marquee');\n\n private readonly trackEl = viewChild.required<ElementRef<HTMLElement>>('track');\n\n private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n private readonly destroyRef = inject(DestroyRef);\n private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));\n\n protected readonly seqWidth = signal(0);\n protected readonly copyCount = signal(MIN_COPIES);\n protected readonly isHovered = signal(false);\n\n protected readonly copyIndices = computed(() => Array.from({ length: this.copyCount() }, (_, i) => i));\n\n /** Resolved hover speed: `hoverSpeed` overrides, else 0 when `pauseOnHover`, else live. */\n private readonly effectiveHoverSpeed = computed<number | undefined>(() => {\n const explicit = this.hoverSpeed();\n if (explicit !== undefined) return explicit;\n return this.pauseOnHover() ? 0 : undefined;\n });\n\n /** Target velocity in px/s, sign baked in. */\n private readonly targetVelocity = computed(() => {\n const s = this.speed();\n const sign = this.direction() === 'left' ? 1 : -1;\n return Math.abs(s) * sign * (s < 0 ? -1 : 1);\n });\n\n constructor() {\n if (!this.isBrowser) return;\n\n afterNextRender(() => {\n this.measure();\n this.watchResize();\n this.watchImageLoads();\n this.startLoop();\n });\n\n // Re-measure on input changes that affect layout (items, gap, height).\n effect(() => {\n this.items();\n this.gap();\n this.itemHeight();\n queueMicrotask(() => this.measure());\n });\n }\n\n protected onEnter(): void {\n if (this.effectiveHoverSpeed() !== undefined) this.isHovered.set(true);\n }\n protected onLeave(): void {\n if (this.effectiveHoverSpeed() !== undefined) this.isHovered.set(false);\n }\n protected isNodeItem = isNode;\n\n // Internals\n\n /** Read first sequence width + decide how many copies cover the viewport. */\n private measure(): void {\n const hostEl = this.host.nativeElement;\n const seqEl = hostEl.querySelector<HTMLElement>('.wr-marquee__list');\n if (!seqEl) return;\n const seqWidth = Math.ceil(seqEl.getBoundingClientRect().width);\n if (seqWidth <= 0) return;\n this.seqWidth.set(seqWidth);\n const containerWidth = hostEl.clientWidth || seqWidth;\n const copies = Math.max(MIN_COPIES, Math.ceil(containerWidth / seqWidth) + COPY_HEADROOM);\n this.copyCount.set(copies);\n }\n\n private watchResize(): void {\n const hostEl = this.host.nativeElement;\n if (typeof ResizeObserver === 'undefined') {\n const onResize = (): void => this.measure();\n window.addEventListener('resize', onResize);\n this.destroyRef.onDestroy(() => window.removeEventListener('resize', onResize));\n return;\n }\n const ro = new ResizeObserver(() => this.measure());\n ro.observe(hostEl);\n const seqEl = hostEl.querySelector<HTMLElement>('.wr-marquee__list');\n if (seqEl) ro.observe(seqEl);\n this.destroyRef.onDestroy(() => ro.disconnect());\n }\n\n private watchImageLoads(): void {\n const hostEl = this.host.nativeElement;\n const seqEl = hostEl.querySelector<HTMLElement>('.wr-marquee__list');\n if (!seqEl) return;\n const imgs = seqEl.querySelectorAll('img');\n if (imgs.length === 0) return;\n let remaining = imgs.length;\n const onDone = (): void => {\n remaining -= 1;\n if (remaining === 0) this.measure();\n };\n imgs.forEach(img => {\n if (img.complete) onDone();\n else {\n img.addEventListener('load', onDone, { once: true });\n img.addEventListener('error', onDone, { once: true });\n }\n });\n }\n\n private startLoop(): void {\n const track = this.trackEl().nativeElement;\n let raf = 0;\n let lastTs: number | null = null;\n let offset = 0;\n let velocity = 0;\n\n const tick = (ts: number): void => {\n lastTs ??= ts;\n const dt = Math.max(0, ts - lastTs) / 1000;\n lastTs = ts;\n\n const target = this.isHovered() ? (this.effectiveHoverSpeed() ?? this.targetVelocity()) : this.targetVelocity();\n const ease = 1 - Math.exp(-dt / SMOOTH_TAU);\n velocity += (target - velocity) * ease;\n\n const w = this.seqWidth();\n if (w > 0) {\n offset = (((offset + velocity * dt) % w) + w) % w;\n track.style.transform = `translate3d(${-offset}px, 0, 0)`;\n }\n raf = requestAnimationFrame(tick);\n };\n\n raf = requestAnimationFrame(tick);\n this.destroyRef.onDestroy(() => cancelAnimationFrame(raf));\n }\n}\n\nexport type { WrMarqueeImage, WrMarqueeNode, WrMarqueeItem } from './interfaces';\n","<div class=\"wr-marquee__track\" #track (mouseenter)=\"onEnter()\" (mouseleave)=\"onLeave()\">\n @for (copyIndex of copyIndices(); track copyIndex) {\n <ul class=\"wr-marquee__list\" role=\"list\" [attr.aria-hidden]=\"copyIndex > 0\" [attr.data-copy]=\"copyIndex\">\n @for (item of items(); track $index) {\n <li class=\"wr-marquee__item\" role=\"listitem\">\n @if (item.href) {\n <a\n class=\"wr-marquee__link\"\n [href]=\"item.href\"\n [attr.aria-label]=\"\n isNodeItem(item) ? item.ariaLabel || item.title || 'link' : item.alt || item.title || 'link'\n \"\n target=\"_blank\"\n rel=\"noreferrer noopener\"\n >\n <ng-container *ngTemplateOutlet=\"content; context: { $implicit: item }\" />\n </a>\n } @else {\n <ng-container *ngTemplateOutlet=\"content; context: { $implicit: item }\" />\n }\n </li>\n }\n </ul>\n }\n</div>\n\n<ng-template #content let-item>\n @if (isNodeItem(item)) {\n <span class=\"wr-marquee__node\" [attr.aria-hidden]=\"!!item.href && !item.ariaLabel\">\n <ng-container *ngTemplateOutlet=\"item.node\" />\n </span>\n } @else {\n <img\n [src]=\"item.src\"\n [srcset]=\"item.srcSet || null\"\n [sizes]=\"item.sizes || null\"\n [width]=\"item.width || null\"\n [height]=\"item.height || null\"\n [alt]=\"item.alt || ''\"\n [title]=\"item.title || null\"\n loading=\"lazy\"\n decoding=\"async\"\n draggable=\"false\"\n />\n }\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
package/fesm2022/ngwr-media.mjs
CHANGED
|
@@ -42,7 +42,7 @@ const WR_BREAKPOINTS = new InjectionToken('WR_BREAKPOINTS', {
|
|
|
42
42
|
* protected readonly isWide = this.media.matches('(min-width: 1200px)');
|
|
43
43
|
* ```
|
|
44
44
|
*
|
|
45
|
-
* @see https://ngwr.dev/services/media
|
|
45
|
+
* @see https://ngwr.dev/reference/services/media
|
|
46
46
|
*/
|
|
47
47
|
class WrMedia {
|
|
48
48
|
breakpoints = inject(WR_BREAKPOINTS);
|
|
@@ -94,10 +94,10 @@ class WrMedia {
|
|
|
94
94
|
this.destroyRef.onDestroy(() => mql.removeEventListener('change', handler));
|
|
95
95
|
return sig.asReadonly();
|
|
96
96
|
}
|
|
97
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
98
|
-
static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.0
|
|
97
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrMedia, deps: [], target: i0.ɵɵFactoryTarget.Service });
|
|
98
|
+
static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.0", ngImport: i0, type: WrMedia });
|
|
99
99
|
}
|
|
100
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
100
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrMedia, decorators: [{
|
|
101
101
|
type: Service
|
|
102
102
|
}] });
|
|
103
103
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ngwr-media.mjs","sources":["../../../projects/lib/media/wr-breakpoints.ts","../../../projects/lib/media/wr-media.ts","../../../projects/lib/media/provide-wr-media.ts","../../../projects/lib/media/ngwr-media.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { InjectionToken } from '@angular/core';\n\nimport type { WrBreakpointMap } from './interfaces';\n\n/** Defaults mirror `projects/lib/styles/_breakpoints.scss`. */\nexport const DEFAULT_WR_BREAKPOINTS: WrBreakpointMap = Object.freeze({\n xs: 0,\n sm: 576,\n md: 768,\n lg: 992,\n xl: 1200,\n xxl: 1400,\n});\n\n/** DI token for the breakpoint map — override via {@link provideWrMedia}. */\nexport const WR_BREAKPOINTS = new InjectionToken<WrBreakpointMap>('WR_BREAKPOINTS', {\n factory: () => DEFAULT_WR_BREAKPOINTS,\n});\n\nexport type { WrBreakpoint, WrBreakpointMap } from './interfaces';\n","/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { isPlatformBrowser } from '@angular/common';\nimport { DestroyRef, Service, PLATFORM_ID, type Signal, computed, inject, signal } from '@angular/core';\n\nimport { WR_BREAKPOINTS, type WrBreakpoint } from './wr-breakpoints';\n\n/**\n * Reactive viewport queries backed by signals.\n *\n * Each query subscribes lazily — `matches(...)` caches its signal so\n * repeated calls with the same query share a single `matchMedia` listener.\n * SSR-safe: on the server every signal stays `false`.\n *\n * @example\n * ```ts\n * private readonly media = inject(WrMedia);\n * protected readonly isMd = this.media.matches('md');\n * protected readonly isWide = this.media.matches('(min-width: 1200px)');\n * ```\n *\n * @see https://ngwr.dev/services/media\n */\n@Service()\nexport class WrMedia {\n private readonly breakpoints = inject(WR_BREAKPOINTS);\n private readonly destroyRef = inject(DestroyRef);\n private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));\n\n /** Cache of query → signal so we share `matchMedia` listeners. */\n private readonly cache = new Map<string, Signal<boolean>>();\n\n /** Active breakpoint key — `xs` / `sm` / `md` / `lg` / `xl` / `xxl`. */\n readonly current = computed<WrBreakpoint>(() => {\n // Walk from largest to smallest, return the first one that matches.\n const ordered: readonly WrBreakpoint[] = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'];\n for (const key of ordered) {\n if (this.matches(key)()) return key;\n }\n return 'xs';\n });\n\n /**\n * Returns a signal that tracks the given query.\n *\n * - Named breakpoint (`'md'`) → `(min-width: <px>)`.\n * - Raw query (`'(prefers-color-scheme: dark)'`) → passed through unchanged.\n */\n matches(query: WrBreakpoint | (string & {})): Signal<boolean> {\n const resolved = this.resolveQuery(query);\n const cached = this.cache.get(resolved);\n if (cached) return cached;\n const sig = this.createSignal(resolved);\n this.cache.set(resolved, sig);\n return sig;\n }\n\n private resolveQuery(query: WrBreakpoint | (string & {})): string {\n if (query in this.breakpoints) {\n const px = this.breakpoints[query as WrBreakpoint];\n return px === 0 ? '(min-width: 0px)' : `(min-width: ${px}px)`;\n }\n return query;\n }\n\n private createSignal(query: string): Signal<boolean> {\n if (!this.isBrowser) return signal(false).asReadonly();\n const mql = window.matchMedia(query);\n const sig = signal(mql.matches);\n const handler = (event: MediaQueryListEvent): void => sig.set(event.matches);\n mql.addEventListener('change', handler);\n this.destroyRef.onDestroy(() => mql.removeEventListener('change', handler));\n return sig.asReadonly();\n }\n}\n","/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { type EnvironmentProviders, makeEnvironmentProviders } from '@angular/core';\n\nimport { DEFAULT_WR_BREAKPOINTS, WR_BREAKPOINTS, type WrBreakpointMap } from './wr-breakpoints';\n\n/**\n * Override the breakpoint map used by {@link WrMedia}. Partial maps\n * are merged with {@link DEFAULT_WR_BREAKPOINTS}, so you only need to list\n * the breakpoints you want to change.\n *\n * @example\n * ```ts\n * bootstrapApplication(AppComponent, {\n * providers: [provideWrMedia({ md: 720, lg: 1024 })],\n * });\n * ```\n */\nexport function provideWrMedia(breakpoints: Partial<WrBreakpointMap> = {}): EnvironmentProviders {\n const merged: WrBreakpointMap = { ...DEFAULT_WR_BREAKPOINTS, ...breakpoints };\n return makeEnvironmentProviders([{ provide: WR_BREAKPOINTS, useValue: merged }]);\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ngwr-media.mjs","sources":["../../../projects/lib/media/wr-breakpoints.ts","../../../projects/lib/media/wr-media.ts","../../../projects/lib/media/provide-wr-media.ts","../../../projects/lib/media/ngwr-media.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { InjectionToken } from '@angular/core';\n\nimport type { WrBreakpointMap } from './interfaces';\n\n/** Defaults mirror `projects/lib/styles/_breakpoints.scss`. */\nexport const DEFAULT_WR_BREAKPOINTS: WrBreakpointMap = Object.freeze({\n xs: 0,\n sm: 576,\n md: 768,\n lg: 992,\n xl: 1200,\n xxl: 1400,\n});\n\n/** DI token for the breakpoint map — override via {@link provideWrMedia}. */\nexport const WR_BREAKPOINTS = new InjectionToken<WrBreakpointMap>('WR_BREAKPOINTS', {\n factory: () => DEFAULT_WR_BREAKPOINTS,\n});\n\nexport type { WrBreakpoint, WrBreakpointMap } from './interfaces';\n","/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { isPlatformBrowser } from '@angular/common';\nimport { DestroyRef, Service, PLATFORM_ID, type Signal, computed, inject, signal } from '@angular/core';\n\nimport { WR_BREAKPOINTS, type WrBreakpoint } from './wr-breakpoints';\n\n/**\n * Reactive viewport queries backed by signals.\n *\n * Each query subscribes lazily — `matches(...)` caches its signal so\n * repeated calls with the same query share a single `matchMedia` listener.\n * SSR-safe: on the server every signal stays `false`.\n *\n * @example\n * ```ts\n * private readonly media = inject(WrMedia);\n * protected readonly isMd = this.media.matches('md');\n * protected readonly isWide = this.media.matches('(min-width: 1200px)');\n * ```\n *\n * @see https://ngwr.dev/reference/services/media\n */\n@Service()\nexport class WrMedia {\n private readonly breakpoints = inject(WR_BREAKPOINTS);\n private readonly destroyRef = inject(DestroyRef);\n private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));\n\n /** Cache of query → signal so we share `matchMedia` listeners. */\n private readonly cache = new Map<string, Signal<boolean>>();\n\n /** Active breakpoint key — `xs` / `sm` / `md` / `lg` / `xl` / `xxl`. */\n readonly current = computed<WrBreakpoint>(() => {\n // Walk from largest to smallest, return the first one that matches.\n const ordered: readonly WrBreakpoint[] = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'];\n for (const key of ordered) {\n if (this.matches(key)()) return key;\n }\n return 'xs';\n });\n\n /**\n * Returns a signal that tracks the given query.\n *\n * - Named breakpoint (`'md'`) → `(min-width: <px>)`.\n * - Raw query (`'(prefers-color-scheme: dark)'`) → passed through unchanged.\n */\n matches(query: WrBreakpoint | (string & {})): Signal<boolean> {\n const resolved = this.resolveQuery(query);\n const cached = this.cache.get(resolved);\n if (cached) return cached;\n const sig = this.createSignal(resolved);\n this.cache.set(resolved, sig);\n return sig;\n }\n\n private resolveQuery(query: WrBreakpoint | (string & {})): string {\n if (query in this.breakpoints) {\n const px = this.breakpoints[query as WrBreakpoint];\n return px === 0 ? '(min-width: 0px)' : `(min-width: ${px}px)`;\n }\n return query;\n }\n\n private createSignal(query: string): Signal<boolean> {\n if (!this.isBrowser) return signal(false).asReadonly();\n const mql = window.matchMedia(query);\n const sig = signal(mql.matches);\n const handler = (event: MediaQueryListEvent): void => sig.set(event.matches);\n mql.addEventListener('change', handler);\n this.destroyRef.onDestroy(() => mql.removeEventListener('change', handler));\n return sig.asReadonly();\n }\n}\n","/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { type EnvironmentProviders, makeEnvironmentProviders } from '@angular/core';\n\nimport { DEFAULT_WR_BREAKPOINTS, WR_BREAKPOINTS, type WrBreakpointMap } from './wr-breakpoints';\n\n/**\n * Override the breakpoint map used by {@link WrMedia}. Partial maps\n * are merged with {@link DEFAULT_WR_BREAKPOINTS}, so you only need to list\n * the breakpoints you want to change.\n *\n * @example\n * ```ts\n * bootstrapApplication(AppComponent, {\n * providers: [provideWrMedia({ md: 720, lg: 1024 })],\n * });\n * ```\n */\nexport function provideWrMedia(breakpoints: Partial<WrBreakpointMap> = {}): EnvironmentProviders {\n const merged: WrBreakpointMap = { ...DEFAULT_WR_BREAKPOINTS, ...breakpoints };\n return makeEnvironmentProviders([{ provide: WR_BREAKPOINTS, useValue: merged }]);\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|