@slotted/angular 0.0.0-stage → 0.1.0-beta.0
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/LICENSE +21 -0
- package/README.md +51 -2
- package/docs/AGENTS.snippet.md +10 -0
- package/docs/accordion.json +345 -0
- package/docs/accordion.md +207 -0
- package/docs/action-bar.json +421 -0
- package/docs/action-bar.md +364 -0
- package/docs/action-sheet.json +210 -0
- package/docs/action-sheet.md +19 -0
- package/docs/alert.json +407 -0
- package/docs/alert.md +239 -0
- package/docs/app-shell.examples.md +349 -0
- package/docs/app-shell.json +835 -0
- package/docs/app-shell.md +214 -0
- package/docs/aspect-ratio.json +159 -0
- package/docs/aspect-ratio.md +134 -0
- package/docs/attachment.json +486 -0
- package/docs/attachment.md +253 -0
- package/docs/avatar-group.json +208 -0
- package/docs/avatar-group.md +130 -0
- package/docs/avatar.json +342 -0
- package/docs/avatar.md +142 -0
- package/docs/badge.json +334 -0
- package/docs/badge.md +138 -0
- package/docs/breadcrumb.json +368 -0
- package/docs/breadcrumb.md +237 -0
- package/docs/button-group.json +158 -0
- package/docs/button-group.md +72 -0
- package/docs/button.examples.md +621 -0
- package/docs/button.json +977 -0
- package/docs/button.md +200 -0
- package/docs/calendar.json +592 -0
- package/docs/calendar.md +242 -0
- package/docs/card.json +283 -0
- package/docs/card.md +130 -0
- package/docs/carousel.json +560 -0
- package/docs/carousel.md +357 -0
- package/docs/cascader.json +933 -0
- package/docs/cascader.md +379 -0
- package/docs/chart.examples.md +582 -0
- package/docs/chart.json +1359 -0
- package/docs/chart.md +187 -0
- package/docs/checkbox-group.examples.md +612 -0
- package/docs/checkbox-group.json +395 -0
- package/docs/checkbox-group.md +106 -0
- package/docs/checkbox.examples.md +546 -0
- package/docs/checkbox.json +506 -0
- package/docs/checkbox.md +104 -0
- package/docs/code-block.json +616 -0
- package/docs/code-block.md +303 -0
- package/docs/collapsible.json +456 -0
- package/docs/collapsible.md +261 -0
- package/docs/color-picker.json +523 -0
- package/docs/color-picker.md +201 -0
- package/docs/column-manager.json +486 -0
- package/docs/column-manager.md +277 -0
- package/docs/combobox.examples.md +1732 -0
- package/docs/combobox.json +1250 -0
- package/docs/combobox.md +209 -0
- package/docs/command-palette.json +800 -0
- package/docs/command-palette.md +419 -0
- package/docs/container.json +156 -0
- package/docs/container.md +92 -0
- package/docs/context-menu.json +231 -0
- package/docs/context-menu.md +176 -0
- package/docs/currency-field.examples.md +321 -0
- package/docs/currency-field.json +649 -0
- package/docs/currency-field.md +128 -0
- package/docs/dashboard-grid.json +680 -0
- package/docs/dashboard-grid.md +265 -0
- package/docs/data-grid.examples.md +3064 -0
- package/docs/data-grid.json +1577 -0
- package/docs/data-grid.md +237 -0
- package/docs/data-grid.props.md +81 -0
- package/docs/data-list.json +685 -0
- package/docs/data-list.md +327 -0
- package/docs/date-field.json +490 -0
- package/docs/date-field.md +235 -0
- package/docs/date-picker.examples.md +1226 -0
- package/docs/date-picker.json +696 -0
- package/docs/date-picker.md +121 -0
- package/docs/date-range-picker.examples.md +1300 -0
- package/docs/date-range-picker.json +903 -0
- package/docs/date-range-picker.md +142 -0
- package/docs/datetime-field.json +665 -0
- package/docs/datetime-field.md +337 -0
- package/docs/datetime-picker.examples.md +1269 -0
- package/docs/datetime-picker.json +928 -0
- package/docs/datetime-picker.md +150 -0
- package/docs/datetime-range-picker.examples.md +225 -0
- package/docs/datetime-range-picker.json +1015 -0
- package/docs/datetime-range-picker.md +162 -0
- package/docs/description-list.json +471 -0
- package/docs/description-list.md +268 -0
- package/docs/detail-panel.json +530 -0
- package/docs/detail-panel.md +361 -0
- package/docs/dialog.examples.md +2467 -0
- package/docs/dialog.json +1141 -0
- package/docs/dialog.md +217 -0
- package/docs/dialog.props.md +63 -0
- package/docs/divider.json +148 -0
- package/docs/divider.md +83 -0
- package/docs/drawer.examples.md +1929 -0
- package/docs/drawer.json +753 -0
- package/docs/drawer.md +199 -0
- package/docs/entity-picker.json +946 -0
- package/docs/entity-picker.md +365 -0
- package/docs/event-calendar.examples.md +308 -0
- package/docs/event-calendar.json +1202 -0
- package/docs/event-calendar.md +201 -0
- package/docs/field-group.json +333 -0
- package/docs/field-group.md +181 -0
- package/docs/field.examples.md +676 -0
- package/docs/field.json +528 -0
- package/docs/field.md +127 -0
- package/docs/filter-bar.json +817 -0
- package/docs/filter-bar.md +380 -0
- package/docs/form.json +378 -0
- package/docs/form.md +235 -0
- package/docs/fullscreen.json +395 -0
- package/docs/fullscreen.md +225 -0
- package/docs/grid.json +176 -0
- package/docs/grid.md +74 -0
- package/docs/highlight.json +279 -0
- package/docs/highlight.md +210 -0
- package/docs/hover-card.json +254 -0
- package/docs/hover-card.md +213 -0
- package/docs/icon.json +173 -0
- package/docs/icon.md +101 -0
- package/docs/image.json +476 -0
- package/docs/image.md +254 -0
- package/docs/import-export-center.json +836 -0
- package/docs/import-export-center.md +345 -0
- package/docs/index.md +141 -0
- package/docs/inline-message.json +312 -0
- package/docs/inline-message.md +191 -0
- package/docs/inline.json +149 -0
- package/docs/inline.md +72 -0
- package/docs/kbd.json +350 -0
- package/docs/kbd.md +210 -0
- package/docs/link.json +264 -0
- package/docs/link.md +167 -0
- package/docs/list-item.json +463 -0
- package/docs/list-item.md +236 -0
- package/docs/list.json +321 -0
- package/docs/list.md +185 -0
- package/docs/listbox.json +807 -0
- package/docs/listbox.md +413 -0
- package/docs/loading-overlay.json +440 -0
- package/docs/loading-overlay.md +248 -0
- package/docs/markdown.json +461 -0
- package/docs/markdown.md +266 -0
- package/docs/menu.examples.md +1651 -0
- package/docs/menu.json +922 -0
- package/docs/menu.md +155 -0
- package/docs/menubar.json +292 -0
- package/docs/menubar.md +173 -0
- package/docs/message-scroller.json +401 -0
- package/docs/message-scroller.md +212 -0
- package/docs/message.json +862 -0
- package/docs/message.md +473 -0
- package/docs/multi-select.examples.md +1922 -0
- package/docs/multi-select.json +1314 -0
- package/docs/multi-select.md +213 -0
- package/docs/navigation-menu.json +529 -0
- package/docs/navigation-menu.md +329 -0
- package/docs/notification-center.json +664 -0
- package/docs/notification-center.md +372 -0
- package/docs/number-field.examples.md +1078 -0
- package/docs/number-field.json +668 -0
- package/docs/number-field.md +137 -0
- package/docs/otp-input.json +479 -0
- package/docs/otp-input.md +291 -0
- package/docs/page-header.json +574 -0
- package/docs/page-header.md +338 -0
- package/docs/page.json +332 -0
- package/docs/page.md +184 -0
- package/docs/pagination.json +434 -0
- package/docs/pagination.md +238 -0
- package/docs/popover.examples.md +1235 -0
- package/docs/popover.json +656 -0
- package/docs/popover.md +199 -0
- package/docs/progress-indicator.json +501 -0
- package/docs/progress-indicator.md +329 -0
- package/docs/prompt-composer.json +498 -0
- package/docs/prompt-composer.md +278 -0
- package/docs/prose.json +357 -0
- package/docs/prose.md +226 -0
- package/docs/radio-group.examples.md +626 -0
- package/docs/radio-group.json +541 -0
- package/docs/radio-group.md +112 -0
- package/docs/rating.json +1053 -0
- package/docs/rating.md +435 -0
- package/docs/result-state.json +376 -0
- package/docs/result-state.md +286 -0
- package/docs/saved-views.json +384 -0
- package/docs/saved-views.md +242 -0
- package/docs/scroll-area.json +120 -0
- package/docs/scroll-area.md +8 -0
- package/docs/section.json +344 -0
- package/docs/section.md +208 -0
- package/docs/segmented-control.json +429 -0
- package/docs/segmented-control.md +240 -0
- package/docs/select.examples.md +1214 -0
- package/docs/select.json +1147 -0
- package/docs/select.md +199 -0
- package/docs/side-navigation.json +632 -0
- package/docs/side-navigation.md +430 -0
- package/docs/skeleton.json +358 -0
- package/docs/skeleton.md +223 -0
- package/docs/slider.json +522 -0
- package/docs/slider.md +261 -0
- package/docs/sparkline.json +426 -0
- package/docs/sparkline.md +206 -0
- package/docs/split-button.json +361 -0
- package/docs/split-button.md +275 -0
- package/docs/splitter.json +142 -0
- package/docs/splitter.md +14 -0
- package/docs/stack.json +135 -0
- package/docs/stack.md +74 -0
- package/docs/stat-card.json +529 -0
- package/docs/stat-card.md +270 -0
- package/docs/status-indicator.json +314 -0
- package/docs/status-indicator.md +197 -0
- package/docs/stepper.json +451 -0
- package/docs/stepper.md +250 -0
- package/docs/switch.json +451 -0
- package/docs/switch.md +508 -0
- package/docs/table-of-contents.json +553 -0
- package/docs/table-of-contents.md +289 -0
- package/docs/table.examples.md +1981 -0
- package/docs/table.json +1059 -0
- package/docs/table.md +290 -0
- package/docs/tabs.examples.md +1370 -0
- package/docs/tabs.json +661 -0
- package/docs/tabs.md +211 -0
- package/docs/tag.json +813 -0
- package/docs/tag.md +241 -0
- package/docs/tags-input.json +771 -0
- package/docs/tags-input.md +361 -0
- package/docs/text-field.examples.md +821 -0
- package/docs/text-field.json +604 -0
- package/docs/text-field.md +125 -0
- package/docs/textarea.examples.md +612 -0
- package/docs/textarea.json +440 -0
- package/docs/textarea.md +98 -0
- package/docs/time-field.json +584 -0
- package/docs/time-field.md +291 -0
- package/docs/time-picker.json +679 -0
- package/docs/time-picker.md +315 -0
- package/docs/time-range-picker.examples.md +191 -0
- package/docs/time-range-picker.json +924 -0
- package/docs/time-range-picker.md +152 -0
- package/docs/timeline.json +839 -0
- package/docs/timeline.md +401 -0
- package/docs/toast.json +642 -0
- package/docs/toast.md +311 -0
- package/docs/toggle-group.json +417 -0
- package/docs/toggle-group.md +255 -0
- package/docs/toggle.json +326 -0
- package/docs/toggle.md +222 -0
- package/docs/toolbar.json +380 -0
- package/docs/toolbar.md +240 -0
- package/docs/tooltip.examples.md +664 -0
- package/docs/tooltip.json +604 -0
- package/docs/tooltip.md +146 -0
- package/docs/top-navigation.examples.md +287 -0
- package/docs/top-navigation.json +648 -0
- package/docs/top-navigation.md +138 -0
- package/docs/tour.json +759 -0
- package/docs/tour.md +337 -0
- package/docs/transfer.json +746 -0
- package/docs/transfer.md +273 -0
- package/docs/tree.json +918 -0
- package/docs/tree.md +397 -0
- package/docs/typography.json +317 -0
- package/docs/typography.md +107 -0
- package/docs/upload.examples.md +358 -0
- package/docs/upload.json +1103 -0
- package/docs/upload.md +166 -0
- package/docs/visually-hidden.json +71 -0
- package/docs/visually-hidden.md +42 -0
- package/docs/wizard.json +724 -0
- package/docs/wizard.md +295 -0
- package/fesm2022/slotted-angular-accordion.mjs +247 -0
- package/fesm2022/slotted-angular-accordion.mjs.map +1 -0
- package/fesm2022/slotted-angular-action-bar.mjs +639 -0
- package/fesm2022/slotted-angular-action-bar.mjs.map +1 -0
- package/fesm2022/slotted-angular-action-sheet.mjs +749 -0
- package/fesm2022/slotted-angular-action-sheet.mjs.map +1 -0
- package/fesm2022/slotted-angular-alert.mjs +427 -0
- package/fesm2022/slotted-angular-alert.mjs.map +1 -0
- package/fesm2022/slotted-angular-app-shell.mjs +1334 -0
- package/fesm2022/slotted-angular-app-shell.mjs.map +1 -0
- package/fesm2022/slotted-angular-aspect-ratio.mjs +63 -0
- package/fesm2022/slotted-angular-aspect-ratio.mjs.map +1 -0
- package/fesm2022/slotted-angular-attachment.mjs +595 -0
- package/fesm2022/slotted-angular-attachment.mjs.map +1 -0
- package/fesm2022/slotted-angular-avatar-group.mjs +230 -0
- package/fesm2022/slotted-angular-avatar-group.mjs.map +1 -0
- package/fesm2022/slotted-angular-avatar.mjs +330 -0
- package/fesm2022/slotted-angular-avatar.mjs.map +1 -0
- package/fesm2022/slotted-angular-badge.mjs +255 -0
- package/fesm2022/slotted-angular-badge.mjs.map +1 -0
- package/fesm2022/slotted-angular-breadcrumb.mjs +544 -0
- package/fesm2022/slotted-angular-breadcrumb.mjs.map +1 -0
- package/fesm2022/slotted-angular-button-group.mjs +146 -0
- package/fesm2022/slotted-angular-button-group.mjs.map +1 -0
- package/fesm2022/slotted-angular-button.mjs +692 -0
- package/fesm2022/slotted-angular-button.mjs.map +1 -0
- package/fesm2022/slotted-angular-calendar.mjs +916 -0
- package/fesm2022/slotted-angular-calendar.mjs.map +1 -0
- package/fesm2022/slotted-angular-card.mjs +225 -0
- package/fesm2022/slotted-angular-card.mjs.map +1 -0
- package/fesm2022/slotted-angular-carousel.mjs +840 -0
- package/fesm2022/slotted-angular-carousel.mjs.map +1 -0
- package/fesm2022/slotted-angular-cascader.mjs +1839 -0
- package/fesm2022/slotted-angular-cascader.mjs.map +1 -0
- package/fesm2022/slotted-angular-chart.mjs +974 -0
- package/fesm2022/slotted-angular-chart.mjs.map +1 -0
- package/fesm2022/slotted-angular-checkbox-group.mjs +283 -0
- package/fesm2022/slotted-angular-checkbox-group.mjs.map +1 -0
- package/fesm2022/slotted-angular-checkbox.mjs +468 -0
- package/fesm2022/slotted-angular-checkbox.mjs.map +1 -0
- package/fesm2022/slotted-angular-code-block.mjs +476 -0
- package/fesm2022/slotted-angular-code-block.mjs.map +1 -0
- package/fesm2022/slotted-angular-collapsible.mjs +479 -0
- package/fesm2022/slotted-angular-collapsible.mjs.map +1 -0
- package/fesm2022/slotted-angular-color-picker.mjs +910 -0
- package/fesm2022/slotted-angular-color-picker.mjs.map +1 -0
- package/fesm2022/slotted-angular-column-manager.mjs +1037 -0
- package/fesm2022/slotted-angular-column-manager.mjs.map +1 -0
- package/fesm2022/slotted-angular-combobox.mjs +1480 -0
- package/fesm2022/slotted-angular-combobox.mjs.map +1 -0
- package/fesm2022/slotted-angular-command-palette.mjs +1283 -0
- package/fesm2022/slotted-angular-command-palette.mjs.map +1 -0
- package/fesm2022/slotted-angular-container.mjs +105 -0
- package/fesm2022/slotted-angular-container.mjs.map +1 -0
- package/fesm2022/slotted-angular-context-menu.mjs +221 -0
- package/fesm2022/slotted-angular-context-menu.mjs.map +1 -0
- package/fesm2022/slotted-angular-currency-field.mjs +1131 -0
- package/fesm2022/slotted-angular-currency-field.mjs.map +1 -0
- package/fesm2022/slotted-angular-dashboard-grid.mjs +1928 -0
- package/fesm2022/slotted-angular-dashboard-grid.mjs.map +1 -0
- package/fesm2022/slotted-angular-data-grid.mjs +6697 -0
- package/fesm2022/slotted-angular-data-grid.mjs.map +1 -0
- package/fesm2022/slotted-angular-data-list.mjs +1418 -0
- package/fesm2022/slotted-angular-data-list.mjs.map +1 -0
- package/fesm2022/slotted-angular-date-field.mjs +772 -0
- package/fesm2022/slotted-angular-date-field.mjs.map +1 -0
- package/fesm2022/slotted-angular-date-picker.mjs +690 -0
- package/fesm2022/slotted-angular-date-picker.mjs.map +1 -0
- package/fesm2022/slotted-angular-date-range-picker.mjs +1150 -0
- package/fesm2022/slotted-angular-date-range-picker.mjs.map +1 -0
- package/fesm2022/slotted-angular-datetime-field.mjs +1058 -0
- package/fesm2022/slotted-angular-datetime-field.mjs.map +1 -0
- package/fesm2022/slotted-angular-datetime-picker.mjs +1362 -0
- package/fesm2022/slotted-angular-datetime-picker.mjs.map +1 -0
- package/fesm2022/slotted-angular-datetime-range-picker.mjs +1872 -0
- package/fesm2022/slotted-angular-datetime-range-picker.mjs.map +1 -0
- package/fesm2022/slotted-angular-description-list.mjs +545 -0
- package/fesm2022/slotted-angular-description-list.mjs.map +1 -0
- package/fesm2022/slotted-angular-detail-panel.mjs +754 -0
- package/fesm2022/slotted-angular-detail-panel.mjs.map +1 -0
- package/fesm2022/slotted-angular-dialog.mjs +980 -0
- package/fesm2022/slotted-angular-dialog.mjs.map +1 -0
- package/fesm2022/slotted-angular-divider.mjs +76 -0
- package/fesm2022/slotted-angular-divider.mjs.map +1 -0
- package/fesm2022/slotted-angular-drawer.mjs +1397 -0
- package/fesm2022/slotted-angular-drawer.mjs.map +1 -0
- package/fesm2022/slotted-angular-entity-picker.mjs +1987 -0
- package/fesm2022/slotted-angular-entity-picker.mjs.map +1 -0
- package/fesm2022/slotted-angular-event-calendar.mjs +2934 -0
- package/fesm2022/slotted-angular-event-calendar.mjs.map +1 -0
- package/fesm2022/slotted-angular-field-group.mjs +301 -0
- package/fesm2022/slotted-angular-field-group.mjs.map +1 -0
- package/fesm2022/slotted-angular-field.mjs +928 -0
- package/fesm2022/slotted-angular-field.mjs.map +1 -0
- package/fesm2022/slotted-angular-filter-bar.mjs +3107 -0
- package/fesm2022/slotted-angular-filter-bar.mjs.map +1 -0
- package/fesm2022/slotted-angular-form.mjs +592 -0
- package/fesm2022/slotted-angular-form.mjs.map +1 -0
- package/fesm2022/slotted-angular-fullscreen.mjs +314 -0
- package/fesm2022/slotted-angular-fullscreen.mjs.map +1 -0
- package/fesm2022/slotted-angular-grid.mjs +58 -0
- package/fesm2022/slotted-angular-grid.mjs.map +1 -0
- package/fesm2022/slotted-angular-highlight.mjs +123 -0
- package/fesm2022/slotted-angular-highlight.mjs.map +1 -0
- package/fesm2022/slotted-angular-hover-card.mjs +326 -0
- package/fesm2022/slotted-angular-hover-card.mjs.map +1 -0
- package/fesm2022/slotted-angular-i18n.mjs +75 -0
- package/fesm2022/slotted-angular-i18n.mjs.map +1 -0
- package/fesm2022/slotted-angular-icon.mjs +232 -0
- package/fesm2022/slotted-angular-icon.mjs.map +1 -0
- package/fesm2022/slotted-angular-image.mjs +442 -0
- package/fesm2022/slotted-angular-image.mjs.map +1 -0
- package/fesm2022/slotted-angular-import-export-center.mjs +1792 -0
- package/fesm2022/slotted-angular-import-export-center.mjs.map +1 -0
- package/fesm2022/slotted-angular-inline-message.mjs +280 -0
- package/fesm2022/slotted-angular-inline-message.mjs.map +1 -0
- package/fesm2022/slotted-angular-inline.mjs +52 -0
- package/fesm2022/slotted-angular-inline.mjs.map +1 -0
- package/fesm2022/slotted-angular-kbd.mjs +284 -0
- package/fesm2022/slotted-angular-kbd.mjs.map +1 -0
- package/fesm2022/slotted-angular-link.mjs +182 -0
- package/fesm2022/slotted-angular-link.mjs.map +1 -0
- package/fesm2022/slotted-angular-list-item.mjs +367 -0
- package/fesm2022/slotted-angular-list-item.mjs.map +1 -0
- package/fesm2022/slotted-angular-list.mjs +256 -0
- package/fesm2022/slotted-angular-list.mjs.map +1 -0
- package/fesm2022/slotted-angular-listbox.mjs +1274 -0
- package/fesm2022/slotted-angular-listbox.mjs.map +1 -0
- package/fesm2022/slotted-angular-loading-overlay.mjs +451 -0
- package/fesm2022/slotted-angular-loading-overlay.mjs.map +1 -0
- package/fesm2022/slotted-angular-markdown.mjs +914 -0
- package/fesm2022/slotted-angular-markdown.mjs.map +1 -0
- package/fesm2022/slotted-angular-menu.mjs +1211 -0
- package/fesm2022/slotted-angular-menu.mjs.map +1 -0
- package/fesm2022/slotted-angular-menubar.mjs +230 -0
- package/fesm2022/slotted-angular-menubar.mjs.map +1 -0
- package/fesm2022/slotted-angular-message-scroller.mjs +378 -0
- package/fesm2022/slotted-angular-message-scroller.mjs.map +1 -0
- package/fesm2022/slotted-angular-message.mjs +866 -0
- package/fesm2022/slotted-angular-message.mjs.map +1 -0
- package/fesm2022/slotted-angular-multi-select.mjs +1939 -0
- package/fesm2022/slotted-angular-multi-select.mjs.map +1 -0
- package/fesm2022/slotted-angular-navigation-menu.mjs +770 -0
- package/fesm2022/slotted-angular-navigation-menu.mjs.map +1 -0
- package/fesm2022/slotted-angular-notification-center.mjs +1172 -0
- package/fesm2022/slotted-angular-notification-center.mjs.map +1 -0
- package/fesm2022/slotted-angular-number-field.mjs +966 -0
- package/fesm2022/slotted-angular-number-field.mjs.map +1 -0
- package/fesm2022/slotted-angular-otp-input.mjs +629 -0
- package/fesm2022/slotted-angular-otp-input.mjs.map +1 -0
- package/fesm2022/slotted-angular-page-header.mjs +788 -0
- package/fesm2022/slotted-angular-page-header.mjs.map +1 -0
- package/fesm2022/slotted-angular-page.mjs +255 -0
- package/fesm2022/slotted-angular-page.mjs.map +1 -0
- package/fesm2022/slotted-angular-pagination.mjs +562 -0
- package/fesm2022/slotted-angular-pagination.mjs.map +1 -0
- package/fesm2022/slotted-angular-popover.mjs +799 -0
- package/fesm2022/slotted-angular-popover.mjs.map +1 -0
- package/fesm2022/slotted-angular-progress-indicator.mjs +572 -0
- package/fesm2022/slotted-angular-progress-indicator.mjs.map +1 -0
- package/fesm2022/slotted-angular-prompt-composer.mjs +596 -0
- package/fesm2022/slotted-angular-prompt-composer.mjs.map +1 -0
- package/fesm2022/slotted-angular-prose.mjs +314 -0
- package/fesm2022/slotted-angular-prose.mjs.map +1 -0
- package/fesm2022/slotted-angular-radio-group.mjs +469 -0
- package/fesm2022/slotted-angular-radio-group.mjs.map +1 -0
- package/fesm2022/slotted-angular-rating.mjs +1174 -0
- package/fesm2022/slotted-angular-rating.mjs.map +1 -0
- package/fesm2022/slotted-angular-result-state.mjs +330 -0
- package/fesm2022/slotted-angular-result-state.mjs.map +1 -0
- package/fesm2022/slotted-angular-saved-views.mjs +877 -0
- package/fesm2022/slotted-angular-saved-views.mjs.map +1 -0
- package/fesm2022/slotted-angular-scroll-area.mjs +294 -0
- package/fesm2022/slotted-angular-scroll-area.mjs.map +1 -0
- package/fesm2022/slotted-angular-section.mjs +266 -0
- package/fesm2022/slotted-angular-section.mjs.map +1 -0
- package/fesm2022/slotted-angular-segmented-control.mjs +454 -0
- package/fesm2022/slotted-angular-segmented-control.mjs.map +1 -0
- package/fesm2022/slotted-angular-select.mjs +1899 -0
- package/fesm2022/slotted-angular-select.mjs.map +1 -0
- package/fesm2022/slotted-angular-side-navigation.mjs +1042 -0
- package/fesm2022/slotted-angular-side-navigation.mjs.map +1 -0
- package/fesm2022/slotted-angular-skeleton.mjs +316 -0
- package/fesm2022/slotted-angular-skeleton.mjs.map +1 -0
- package/fesm2022/slotted-angular-slider.mjs +586 -0
- package/fesm2022/slotted-angular-slider.mjs.map +1 -0
- package/fesm2022/slotted-angular-sparkline.mjs +235 -0
- package/fesm2022/slotted-angular-sparkline.mjs.map +1 -0
- package/fesm2022/slotted-angular-split-button.mjs +331 -0
- package/fesm2022/slotted-angular-split-button.mjs.map +1 -0
- package/fesm2022/slotted-angular-splitter.mjs +516 -0
- package/fesm2022/slotted-angular-splitter.mjs.map +1 -0
- package/fesm2022/slotted-angular-stack.mjs +48 -0
- package/fesm2022/slotted-angular-stack.mjs.map +1 -0
- package/fesm2022/slotted-angular-stat-card.mjs +478 -0
- package/fesm2022/slotted-angular-stat-card.mjs.map +1 -0
- package/fesm2022/slotted-angular-status-indicator.mjs +155 -0
- package/fesm2022/slotted-angular-status-indicator.mjs.map +1 -0
- package/fesm2022/slotted-angular-stepper.mjs +536 -0
- package/fesm2022/slotted-angular-stepper.mjs.map +1 -0
- package/fesm2022/slotted-angular-switch.mjs +447 -0
- package/fesm2022/slotted-angular-switch.mjs.map +1 -0
- package/fesm2022/slotted-angular-table-of-contents.mjs +750 -0
- package/fesm2022/slotted-angular-table-of-contents.mjs.map +1 -0
- package/fesm2022/slotted-angular-table.mjs +2518 -0
- package/fesm2022/slotted-angular-table.mjs.map +1 -0
- package/fesm2022/slotted-angular-tabs.mjs +829 -0
- package/fesm2022/slotted-angular-tabs.mjs.map +1 -0
- package/fesm2022/slotted-angular-tag.mjs +595 -0
- package/fesm2022/slotted-angular-tag.mjs.map +1 -0
- package/fesm2022/slotted-angular-tags-input.mjs +1211 -0
- package/fesm2022/slotted-angular-tags-input.mjs.map +1 -0
- package/fesm2022/slotted-angular-text-field.mjs +674 -0
- package/fesm2022/slotted-angular-text-field.mjs.map +1 -0
- package/fesm2022/slotted-angular-textarea.mjs +275 -0
- package/fesm2022/slotted-angular-textarea.mjs.map +1 -0
- package/fesm2022/slotted-angular-theme.mjs +45 -0
- package/fesm2022/slotted-angular-theme.mjs.map +1 -0
- package/fesm2022/slotted-angular-time-field.mjs +895 -0
- package/fesm2022/slotted-angular-time-field.mjs.map +1 -0
- package/fesm2022/slotted-angular-time-picker.mjs +856 -0
- package/fesm2022/slotted-angular-time-picker.mjs.map +1 -0
- package/fesm2022/slotted-angular-time-range-picker.mjs +1534 -0
- package/fesm2022/slotted-angular-time-range-picker.mjs.map +1 -0
- package/fesm2022/slotted-angular-timeline.mjs +928 -0
- package/fesm2022/slotted-angular-timeline.mjs.map +1 -0
- package/fesm2022/slotted-angular-toast.mjs +917 -0
- package/fesm2022/slotted-angular-toast.mjs.map +1 -0
- package/fesm2022/slotted-angular-toggle-group.mjs +311 -0
- package/fesm2022/slotted-angular-toggle-group.mjs.map +1 -0
- package/fesm2022/slotted-angular-toggle.mjs +162 -0
- package/fesm2022/slotted-angular-toggle.mjs.map +1 -0
- package/fesm2022/slotted-angular-toolbar.mjs +536 -0
- package/fesm2022/slotted-angular-toolbar.mjs.map +1 -0
- package/fesm2022/slotted-angular-tooltip.mjs +798 -0
- package/fesm2022/slotted-angular-tooltip.mjs.map +1 -0
- package/fesm2022/slotted-angular-top-navigation.mjs +1308 -0
- package/fesm2022/slotted-angular-top-navigation.mjs.map +1 -0
- package/fesm2022/slotted-angular-tour.mjs +1330 -0
- package/fesm2022/slotted-angular-tour.mjs.map +1 -0
- package/fesm2022/slotted-angular-transfer.mjs +1406 -0
- package/fesm2022/slotted-angular-transfer.mjs.map +1 -0
- package/fesm2022/slotted-angular-tree.mjs +1448 -0
- package/fesm2022/slotted-angular-tree.mjs.map +1 -0
- package/fesm2022/slotted-angular-typography.mjs +184 -0
- package/fesm2022/slotted-angular-typography.mjs.map +1 -0
- package/fesm2022/slotted-angular-upload.mjs +1523 -0
- package/fesm2022/slotted-angular-upload.mjs.map +1 -0
- package/fesm2022/slotted-angular-visually-hidden.mjs +32 -0
- package/fesm2022/slotted-angular-visually-hidden.mjs.map +1 -0
- package/fesm2022/slotted-angular-wizard.mjs +1715 -0
- package/fesm2022/slotted-angular-wizard.mjs.map +1 -0
- package/fesm2022/slotted-angular.mjs +4 -0
- package/fesm2022/slotted-angular.mjs.map +1 -0
- package/package.json +537 -3
- package/types/slotted-angular-accordion.d.ts +156 -0
- package/types/slotted-angular-accordion.d.ts.map +1 -0
- package/types/slotted-angular-action-bar.d.ts +291 -0
- package/types/slotted-angular-action-bar.d.ts.map +1 -0
- package/types/slotted-angular-action-sheet.d.ts +294 -0
- package/types/slotted-angular-action-sheet.d.ts.map +1 -0
- package/types/slotted-angular-alert.d.ts +214 -0
- package/types/slotted-angular-alert.d.ts.map +1 -0
- package/types/slotted-angular-app-shell.d.ts +549 -0
- package/types/slotted-angular-app-shell.d.ts.map +1 -0
- package/types/slotted-angular-aspect-ratio.d.ts +57 -0
- package/types/slotted-angular-aspect-ratio.d.ts.map +1 -0
- package/types/slotted-angular-attachment.d.ts +294 -0
- package/types/slotted-angular-attachment.d.ts.map +1 -0
- package/types/slotted-angular-avatar-group.d.ts +119 -0
- package/types/slotted-angular-avatar-group.d.ts.map +1 -0
- package/types/slotted-angular-avatar.d.ts +202 -0
- package/types/slotted-angular-avatar.d.ts.map +1 -0
- package/types/slotted-angular-badge.d.ts +166 -0
- package/types/slotted-angular-badge.d.ts.map +1 -0
- package/types/slotted-angular-breadcrumb.d.ts +251 -0
- package/types/slotted-angular-breadcrumb.d.ts.map +1 -0
- package/types/slotted-angular-button-group.d.ts +89 -0
- package/types/slotted-angular-button-group.d.ts.map +1 -0
- package/types/slotted-angular-button.d.ts +390 -0
- package/types/slotted-angular-button.d.ts.map +1 -0
- package/types/slotted-angular-calendar.d.ts +280 -0
- package/types/slotted-angular-calendar.d.ts.map +1 -0
- package/types/slotted-angular-card.d.ts +140 -0
- package/types/slotted-angular-card.d.ts.map +1 -0
- package/types/slotted-angular-carousel.d.ts +288 -0
- package/types/slotted-angular-carousel.d.ts.map +1 -0
- package/types/slotted-angular-cascader.d.ts +351 -0
- package/types/slotted-angular-cascader.d.ts.map +1 -0
- package/types/slotted-angular-chart.d.ts +319 -0
- package/types/slotted-angular-chart.d.ts.map +1 -0
- package/types/slotted-angular-checkbox-group.d.ts +156 -0
- package/types/slotted-angular-checkbox-group.d.ts.map +1 -0
- package/types/slotted-angular-checkbox.d.ts +197 -0
- package/types/slotted-angular-checkbox.d.ts.map +1 -0
- package/types/slotted-angular-code-block.d.ts +158 -0
- package/types/slotted-angular-code-block.d.ts.map +1 -0
- package/types/slotted-angular-collapsible.d.ts +272 -0
- package/types/slotted-angular-collapsible.d.ts.map +1 -0
- package/types/slotted-angular-color-picker.d.ts +181 -0
- package/types/slotted-angular-color-picker.d.ts.map +1 -0
- package/types/slotted-angular-column-manager.d.ts +200 -0
- package/types/slotted-angular-column-manager.d.ts.map +1 -0
- package/types/slotted-angular-combobox.d.ts +449 -0
- package/types/slotted-angular-combobox.d.ts.map +1 -0
- package/types/slotted-angular-command-palette.d.ts +256 -0
- package/types/slotted-angular-command-palette.d.ts.map +1 -0
- package/types/slotted-angular-container.d.ts +84 -0
- package/types/slotted-angular-container.d.ts.map +1 -0
- package/types/slotted-angular-context-menu.d.ts +84 -0
- package/types/slotted-angular-context-menu.d.ts.map +1 -0
- package/types/slotted-angular-currency-field.d.ts +480 -0
- package/types/slotted-angular-currency-field.d.ts.map +1 -0
- package/types/slotted-angular-dashboard-grid.d.ts +341 -0
- package/types/slotted-angular-dashboard-grid.d.ts.map +1 -0
- package/types/slotted-angular-data-grid.d.ts +1077 -0
- package/types/slotted-angular-data-grid.d.ts.map +1 -0
- package/types/slotted-angular-data-list.d.ts +272 -0
- package/types/slotted-angular-data-list.d.ts.map +1 -0
- package/types/slotted-angular-date-field.d.ts +320 -0
- package/types/slotted-angular-date-field.d.ts.map +1 -0
- package/types/slotted-angular-date-picker.d.ts +224 -0
- package/types/slotted-angular-date-picker.d.ts.map +1 -0
- package/types/slotted-angular-date-range-picker.d.ts +310 -0
- package/types/slotted-angular-date-range-picker.d.ts.map +1 -0
- package/types/slotted-angular-datetime-field.d.ts +362 -0
- package/types/slotted-angular-datetime-field.d.ts.map +1 -0
- package/types/slotted-angular-datetime-picker.d.ts +370 -0
- package/types/slotted-angular-datetime-picker.d.ts.map +1 -0
- package/types/slotted-angular-datetime-range-picker.d.ts +459 -0
- package/types/slotted-angular-datetime-range-picker.d.ts.map +1 -0
- package/types/slotted-angular-description-list.d.ts +281 -0
- package/types/slotted-angular-description-list.d.ts.map +1 -0
- package/types/slotted-angular-detail-panel.d.ts +240 -0
- package/types/slotted-angular-detail-panel.d.ts.map +1 -0
- package/types/slotted-angular-dialog.d.ts +497 -0
- package/types/slotted-angular-dialog.d.ts.map +1 -0
- package/types/slotted-angular-divider.d.ts +40 -0
- package/types/slotted-angular-divider.d.ts.map +1 -0
- package/types/slotted-angular-drawer.d.ts +532 -0
- package/types/slotted-angular-drawer.d.ts.map +1 -0
- package/types/slotted-angular-entity-picker.d.ts +338 -0
- package/types/slotted-angular-entity-picker.d.ts.map +1 -0
- package/types/slotted-angular-event-calendar.d.ts +574 -0
- package/types/slotted-angular-event-calendar.d.ts.map +1 -0
- package/types/slotted-angular-field-group.d.ts +152 -0
- package/types/slotted-angular-field-group.d.ts.map +1 -0
- package/types/slotted-angular-field.d.ts +535 -0
- package/types/slotted-angular-field.d.ts.map +1 -0
- package/types/slotted-angular-filter-bar.d.ts +573 -0
- package/types/slotted-angular-filter-bar.d.ts.map +1 -0
- package/types/slotted-angular-form.d.ts +298 -0
- package/types/slotted-angular-form.d.ts.map +1 -0
- package/types/slotted-angular-fullscreen.d.ts +145 -0
- package/types/slotted-angular-fullscreen.d.ts.map +1 -0
- package/types/slotted-angular-grid.d.ts +50 -0
- package/types/slotted-angular-grid.d.ts.map +1 -0
- package/types/slotted-angular-highlight.d.ts +93 -0
- package/types/slotted-angular-highlight.d.ts.map +1 -0
- package/types/slotted-angular-hover-card.d.ts +140 -0
- package/types/slotted-angular-hover-card.d.ts.map +1 -0
- package/types/slotted-angular-i18n.d.ts +46 -0
- package/types/slotted-angular-i18n.d.ts.map +1 -0
- package/types/slotted-angular-icon.d.ts +94 -0
- package/types/slotted-angular-icon.d.ts.map +1 -0
- package/types/slotted-angular-image.d.ts +251 -0
- package/types/slotted-angular-image.d.ts.map +1 -0
- package/types/slotted-angular-import-export-center.d.ts +351 -0
- package/types/slotted-angular-import-export-center.d.ts.map +1 -0
- package/types/slotted-angular-inline-message.d.ts +195 -0
- package/types/slotted-angular-inline-message.d.ts.map +1 -0
- package/types/slotted-angular-inline.d.ts +41 -0
- package/types/slotted-angular-inline.d.ts.map +1 -0
- package/types/slotted-angular-kbd.d.ts +174 -0
- package/types/slotted-angular-kbd.d.ts.map +1 -0
- package/types/slotted-angular-link.d.ts +94 -0
- package/types/slotted-angular-link.d.ts.map +1 -0
- package/types/slotted-angular-list-item.d.ts +210 -0
- package/types/slotted-angular-list-item.d.ts.map +1 -0
- package/types/slotted-angular-list.d.ts +176 -0
- package/types/slotted-angular-list.d.ts.map +1 -0
- package/types/slotted-angular-listbox.d.ts +470 -0
- package/types/slotted-angular-listbox.d.ts.map +1 -0
- package/types/slotted-angular-loading-overlay.d.ts +219 -0
- package/types/slotted-angular-loading-overlay.d.ts.map +1 -0
- package/types/slotted-angular-markdown.d.ts +172 -0
- package/types/slotted-angular-markdown.d.ts.map +1 -0
- package/types/slotted-angular-menu.d.ts +448 -0
- package/types/slotted-angular-menu.d.ts.map +1 -0
- package/types/slotted-angular-menubar.d.ts +90 -0
- package/types/slotted-angular-menubar.d.ts.map +1 -0
- package/types/slotted-angular-message-scroller.d.ts +151 -0
- package/types/slotted-angular-message-scroller.d.ts.map +1 -0
- package/types/slotted-angular-message.d.ts +348 -0
- package/types/slotted-angular-message.d.ts.map +1 -0
- package/types/slotted-angular-multi-select.d.ts +462 -0
- package/types/slotted-angular-multi-select.d.ts.map +1 -0
- package/types/slotted-angular-navigation-menu.d.ts +309 -0
- package/types/slotted-angular-navigation-menu.d.ts.map +1 -0
- package/types/slotted-angular-notification-center.d.ts +318 -0
- package/types/slotted-angular-notification-center.d.ts.map +1 -0
- package/types/slotted-angular-number-field.d.ts +402 -0
- package/types/slotted-angular-number-field.d.ts.map +1 -0
- package/types/slotted-angular-otp-input.d.ts +286 -0
- package/types/slotted-angular-otp-input.d.ts.map +1 -0
- package/types/slotted-angular-page-header.d.ts +334 -0
- package/types/slotted-angular-page-header.d.ts.map +1 -0
- package/types/slotted-angular-page.d.ts +141 -0
- package/types/slotted-angular-page.d.ts.map +1 -0
- package/types/slotted-angular-pagination.d.ts +213 -0
- package/types/slotted-angular-pagination.d.ts.map +1 -0
- package/types/slotted-angular-popover.d.ts +366 -0
- package/types/slotted-angular-popover.d.ts.map +1 -0
- package/types/slotted-angular-progress-indicator.d.ts +312 -0
- package/types/slotted-angular-progress-indicator.d.ts.map +1 -0
- package/types/slotted-angular-prompt-composer.d.ts +242 -0
- package/types/slotted-angular-prompt-composer.d.ts.map +1 -0
- package/types/slotted-angular-prose.d.ts +171 -0
- package/types/slotted-angular-prose.d.ts.map +1 -0
- package/types/slotted-angular-radio-group.d.ts +268 -0
- package/types/slotted-angular-radio-group.d.ts.map +1 -0
- package/types/slotted-angular-rating.d.ts +374 -0
- package/types/slotted-angular-rating.d.ts.map +1 -0
- package/types/slotted-angular-result-state.d.ts +217 -0
- package/types/slotted-angular-result-state.d.ts.map +1 -0
- package/types/slotted-angular-saved-views.d.ts +198 -0
- package/types/slotted-angular-saved-views.d.ts.map +1 -0
- package/types/slotted-angular-scroll-area.d.ts +186 -0
- package/types/slotted-angular-scroll-area.d.ts.map +1 -0
- package/types/slotted-angular-section.d.ts +143 -0
- package/types/slotted-angular-section.d.ts.map +1 -0
- package/types/slotted-angular-segmented-control.d.ts +251 -0
- package/types/slotted-angular-segmented-control.d.ts.map +1 -0
- package/types/slotted-angular-select.d.ts +507 -0
- package/types/slotted-angular-select.d.ts.map +1 -0
- package/types/slotted-angular-side-navigation.d.ts +373 -0
- package/types/slotted-angular-side-navigation.d.ts.map +1 -0
- package/types/slotted-angular-skeleton.d.ts +198 -0
- package/types/slotted-angular-skeleton.d.ts.map +1 -0
- package/types/slotted-angular-slider.d.ts +216 -0
- package/types/slotted-angular-slider.d.ts.map +1 -0
- package/types/slotted-angular-sparkline.d.ts +106 -0
- package/types/slotted-angular-sparkline.d.ts.map +1 -0
- package/types/slotted-angular-split-button.d.ts +180 -0
- package/types/slotted-angular-split-button.d.ts.map +1 -0
- package/types/slotted-angular-splitter.d.ts +206 -0
- package/types/slotted-angular-splitter.d.ts.map +1 -0
- package/types/slotted-angular-stack.d.ts +38 -0
- package/types/slotted-angular-stack.d.ts.map +1 -0
- package/types/slotted-angular-stat-card.d.ts +232 -0
- package/types/slotted-angular-stat-card.d.ts.map +1 -0
- package/types/slotted-angular-status-indicator.d.ts +106 -0
- package/types/slotted-angular-status-indicator.d.ts.map +1 -0
- package/types/slotted-angular-stepper.d.ts +198 -0
- package/types/slotted-angular-stepper.d.ts.map +1 -0
- package/types/slotted-angular-switch.d.ts +243 -0
- package/types/slotted-angular-switch.d.ts.map +1 -0
- package/types/slotted-angular-table-of-contents.d.ts +210 -0
- package/types/slotted-angular-table-of-contents.d.ts.map +1 -0
- package/types/slotted-angular-table.d.ts +888 -0
- package/types/slotted-angular-table.d.ts.map +1 -0
- package/types/slotted-angular-tabs.d.ts +340 -0
- package/types/slotted-angular-tabs.d.ts.map +1 -0
- package/types/slotted-angular-tag.d.ts +279 -0
- package/types/slotted-angular-tag.d.ts.map +1 -0
- package/types/slotted-angular-tags-input.d.ts +302 -0
- package/types/slotted-angular-tags-input.d.ts.map +1 -0
- package/types/slotted-angular-text-field.d.ts +334 -0
- package/types/slotted-angular-text-field.d.ts.map +1 -0
- package/types/slotted-angular-textarea.d.ts +150 -0
- package/types/slotted-angular-textarea.d.ts.map +1 -0
- package/types/slotted-angular-theme.d.ts +26 -0
- package/types/slotted-angular-theme.d.ts.map +1 -0
- package/types/slotted-angular-time-field.d.ts +300 -0
- package/types/slotted-angular-time-field.d.ts.map +1 -0
- package/types/slotted-angular-time-picker.d.ts +260 -0
- package/types/slotted-angular-time-picker.d.ts.map +1 -0
- package/types/slotted-angular-time-range-picker.d.ts +401 -0
- package/types/slotted-angular-time-range-picker.d.ts.map +1 -0
- package/types/slotted-angular-timeline.d.ts +329 -0
- package/types/slotted-angular-timeline.d.ts.map +1 -0
- package/types/slotted-angular-toast.d.ts +340 -0
- package/types/slotted-angular-toast.d.ts.map +1 -0
- package/types/slotted-angular-toggle-group.d.ts +167 -0
- package/types/slotted-angular-toggle-group.d.ts.map +1 -0
- package/types/slotted-angular-toggle.d.ts +106 -0
- package/types/slotted-angular-toggle.d.ts.map +1 -0
- package/types/slotted-angular-toolbar.d.ts +252 -0
- package/types/slotted-angular-toolbar.d.ts.map +1 -0
- package/types/slotted-angular-tooltip.d.ts +388 -0
- package/types/slotted-angular-tooltip.d.ts.map +1 -0
- package/types/slotted-angular-top-navigation.d.ts +442 -0
- package/types/slotted-angular-top-navigation.d.ts.map +1 -0
- package/types/slotted-angular-tour.d.ts +440 -0
- package/types/slotted-angular-tour.d.ts.map +1 -0
- package/types/slotted-angular-transfer.d.ts +296 -0
- package/types/slotted-angular-transfer.d.ts.map +1 -0
- package/types/slotted-angular-tree.d.ts +499 -0
- package/types/slotted-angular-tree.d.ts.map +1 -0
- package/types/slotted-angular-typography.d.ts +89 -0
- package/types/slotted-angular-typography.d.ts.map +1 -0
- package/types/slotted-angular-upload.d.ts +365 -0
- package/types/slotted-angular-upload.d.ts.map +1 -0
- package/types/slotted-angular-visually-hidden.d.ts +19 -0
- package/types/slotted-angular-visually-hidden.d.ts.map +1 -0
- package/types/slotted-angular-wizard.d.ts +441 -0
- package/types/slotted-angular-wizard.d.ts.map +1 -0
- package/types/slotted-angular.d.ts +3 -0
- package/types/slotted-angular.d.ts.map +1 -0
|
@@ -0,0 +1,1523 @@
|
|
|
1
|
+
import { getLiveAnnouncer } from '@slotted/core/live-announcer';
|
|
2
|
+
import { createControllable } from '@slotted/core/state';
|
|
3
|
+
import { formatDuration, formatBytes, isViewable, uploadSummary, estimateRemaining, createUploadRunner, selectFiles, splitName } from '@slotted/core/upload';
|
|
4
|
+
import { NgTemplateOutlet } from '@angular/common';
|
|
5
|
+
import * as i0 from '@angular/core';
|
|
6
|
+
import { InjectionToken, inject, input, output, computed, DestroyRef, ViewEncapsulation, ChangeDetectionStrategy, Component, ElementRef, HostAttributeToken, model, booleanAttribute, signal, effect, untracked, forwardRef, numberAttribute } from '@angular/core';
|
|
7
|
+
import { NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
|
|
8
|
+
import { injectLocale, injectMessages } from '@slotted/angular/i18n';
|
|
9
|
+
import { SlGlyph, SlIcon } from '@slotted/angular/icon';
|
|
10
|
+
import { SlProgressBar } from '@slotted/angular/progress-indicator';
|
|
11
|
+
import { uploadMessages } from '@slotted/core/i18n';
|
|
12
|
+
import { SlDialog, SlDialogTitle } from '@slotted/angular/dialog';
|
|
13
|
+
import { DomSanitizer } from '@angular/platform-browser';
|
|
14
|
+
|
|
15
|
+
const FALLBACK = {
|
|
16
|
+
variant: 'dropzone',
|
|
17
|
+
layout: 'list',
|
|
18
|
+
size: 'md',
|
|
19
|
+
preview: 'auto',
|
|
20
|
+
view: 'auto',
|
|
21
|
+
duplicates: 'reject',
|
|
22
|
+
clickToBrowse: true,
|
|
23
|
+
allowDrop: true,
|
|
24
|
+
allowPaste: true,
|
|
25
|
+
preventDocumentDrop: true,
|
|
26
|
+
autoUpload: true,
|
|
27
|
+
pendingBlocksSubmit: true,
|
|
28
|
+
adapter: undefined,
|
|
29
|
+
concurrency: 3,
|
|
30
|
+
retries: 0,
|
|
31
|
+
retryDelay: 1000,
|
|
32
|
+
stallAfter: 10000,
|
|
33
|
+
maxRows: 6,
|
|
34
|
+
fileKey: undefined,
|
|
35
|
+
};
|
|
36
|
+
const UPLOAD_DEFAULTS = new InjectionToken('slotted upload defaults', {
|
|
37
|
+
providedIn: 'root',
|
|
38
|
+
factory: () => FALLBACK,
|
|
39
|
+
});
|
|
40
|
+
/**
|
|
41
|
+
* An application decides once what its uploads accept, where they send and how
|
|
42
|
+
* many run at once. An upload that states any of them itself still wins. Every
|
|
43
|
+
* word and the locale that writes sizes and durations come from the language
|
|
44
|
+
* in force (`provideSlotted`).
|
|
45
|
+
*
|
|
46
|
+
* The adapter is here for the same reason: an application sends to one place,
|
|
47
|
+
* and repeating the sender on every form is how one of them ends up pointing
|
|
48
|
+
* somewhere else.
|
|
49
|
+
*/
|
|
50
|
+
function provideUploadDefaults(defaults) {
|
|
51
|
+
return {
|
|
52
|
+
provide: UPLOAD_DEFAULTS,
|
|
53
|
+
useFactory: () => ({ ...FALLBACK, ...defaults }),
|
|
54
|
+
};
|
|
55
|
+
}
|
|
56
|
+
function injectUploadDefaults() {
|
|
57
|
+
return inject(UPLOAD_DEFAULTS);
|
|
58
|
+
}
|
|
59
|
+
/** The two formatters a row and a summary read, bound to one locale. */
|
|
60
|
+
function uploadFormatters(locale) {
|
|
61
|
+
return {
|
|
62
|
+
bytes: (value) => formatBytes(value, locale),
|
|
63
|
+
duration: (seconds) => formatDuration(seconds, locale),
|
|
64
|
+
};
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
/**
|
|
68
|
+
* What a file is drawn as on its tile: one glyph per kind, the plain file for
|
|
69
|
+
* anything no kind claims. The row's tile and the viewer's stage read the same
|
|
70
|
+
* map, so a kind never has two marks.
|
|
71
|
+
*/
|
|
72
|
+
const KIND_GLYPH = {
|
|
73
|
+
archive: 'file-archive',
|
|
74
|
+
audio: 'file-audio',
|
|
75
|
+
document: 'file-type',
|
|
76
|
+
image: 'file-image',
|
|
77
|
+
other: 'file',
|
|
78
|
+
pdf: 'file-text',
|
|
79
|
+
presentation: 'presentation',
|
|
80
|
+
spreadsheet: 'file-spreadsheet',
|
|
81
|
+
video: 'file-video',
|
|
82
|
+
};
|
|
83
|
+
/**
|
|
84
|
+
* A file, full screen, on a surface of its own.
|
|
85
|
+
*
|
|
86
|
+
* A preview that left the page was the first answer and it was the wrong one:
|
|
87
|
+
* it loses the form the reader was in the middle of filling in. The tab
|
|
88
|
+
* survives as the escape hatch in the header, where a PDF is better read in the
|
|
89
|
+
* browser's own full window.
|
|
90
|
+
*
|
|
91
|
+
* `dialog` owns the layer, the scrim, the focus containment, the scroll lock and
|
|
92
|
+
* Escape, exactly as it does in React; what this owns is the stage, the header
|
|
93
|
+
* and the two controls that move through the set. The first answer drew the
|
|
94
|
+
* surface here instead, on the ground that the Angular dialog is opened through
|
|
95
|
+
* a service — it is not: `sl-dialog` is a component with `open` and projected
|
|
96
|
+
* content, and drawing the surface by hand shipped a panel with no layer, no
|
|
97
|
+
* scrim and no containment, sitting in the page under the family.
|
|
98
|
+
*/
|
|
99
|
+
class SlUploadViewer {
|
|
100
|
+
files = input([], /* @ts-ignore */
|
|
101
|
+
...(ngDevMode ? [{ debugName: "files" }] : /* istanbul ignore next */ []));
|
|
102
|
+
viewing = input(null, /* @ts-ignore */
|
|
103
|
+
...(ngDevMode ? [{ debugName: "viewing" }] : /* istanbul ignore next */ []));
|
|
104
|
+
urls = input(new Map(), /* @ts-ignore */
|
|
105
|
+
...(ngDevMode ? [{ debugName: "urls" }] : /* istanbul ignore next */ []));
|
|
106
|
+
/** The upload's own `messages`, laid over the catalog of the language in force. */
|
|
107
|
+
messages = input(undefined, /* @ts-ignore */
|
|
108
|
+
...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
|
|
109
|
+
/** What the size is written in. Absent, the language in force. */
|
|
110
|
+
locale = input(undefined, /* @ts-ignore */
|
|
111
|
+
...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
|
|
112
|
+
/** The family's size, restated on the layer: it is portalled out of the root. */
|
|
113
|
+
size = input('md', /* @ts-ignore */
|
|
114
|
+
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
115
|
+
viewingChange = output();
|
|
116
|
+
kindGlyph = KIND_GLYPH;
|
|
117
|
+
contextLocale = injectLocale();
|
|
118
|
+
/** The family's words in the language in force, with the upload's `messages` laid over them. */
|
|
119
|
+
t = injectMessages(uploadMessages, this.messages);
|
|
120
|
+
/**
|
|
121
|
+
* Only what the viewer can render, so previous and next skip a spreadsheet
|
|
122
|
+
* sitting between two photographs rather than stopping on it.
|
|
123
|
+
*/
|
|
124
|
+
shown = computed(() => this.files().filter((file) => file.file !== undefined && isViewable(file)), /* @ts-ignore */
|
|
125
|
+
...(ngDevMode ? [{ debugName: "shown" }] : /* istanbul ignore next */ []));
|
|
126
|
+
index = computed(() => this.shown().findIndex((file) => file.key === this.viewing()), /* @ts-ignore */
|
|
127
|
+
...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
|
|
128
|
+
current = computed(() => {
|
|
129
|
+
const key = this.viewing();
|
|
130
|
+
if (key === null)
|
|
131
|
+
return undefined;
|
|
132
|
+
return this.shown()[this.index()] ?? this.files().find((file) => file.key === key);
|
|
133
|
+
}, /* @ts-ignore */
|
|
134
|
+
...(ngDevMode ? [{ debugName: "current" }] : /* istanbul ignore next */ []));
|
|
135
|
+
url = computed(() => {
|
|
136
|
+
const file = this.current();
|
|
137
|
+
return file === undefined ? undefined : this.urls().get(file.key);
|
|
138
|
+
}, /* @ts-ignore */
|
|
139
|
+
...(ngDevMode ? [{ debugName: "url" }] : /* istanbul ignore next */ []));
|
|
140
|
+
/**
|
|
141
|
+
* The frame's source, trusted explicitly. Angular refuses an interpolated
|
|
142
|
+
* resource URL and renders an empty frame instead, which is what a PDF was
|
|
143
|
+
* here until it was measured. What is trusted is not a consumer's string: it
|
|
144
|
+
* is the object URL this family made, with `URL.createObjectURL`, for a file
|
|
145
|
+
* the reader chose in this browser.
|
|
146
|
+
*/
|
|
147
|
+
sanitizer = inject(DomSanitizer);
|
|
148
|
+
frameUrl = computed(() => {
|
|
149
|
+
const url = this.url();
|
|
150
|
+
return url === undefined ? null : this.sanitizer.bypassSecurityTrustResourceUrl(url);
|
|
151
|
+
}, /* @ts-ignore */
|
|
152
|
+
...(ngDevMode ? [{ debugName: "frameUrl" }] : /* istanbul ignore next */ []));
|
|
153
|
+
stage = computed(() => {
|
|
154
|
+
const file = this.current();
|
|
155
|
+
if (file === undefined || this.url() === undefined)
|
|
156
|
+
return 'unsupported';
|
|
157
|
+
const type = file.type.split(';')[0] ?? '';
|
|
158
|
+
if (type.startsWith('image/'))
|
|
159
|
+
return 'image';
|
|
160
|
+
if (type.startsWith('video/'))
|
|
161
|
+
return 'video';
|
|
162
|
+
if (type.startsWith('audio/'))
|
|
163
|
+
return 'audio';
|
|
164
|
+
/*
|
|
165
|
+
* A PDF is framed without `sandbox` and everything else with it, and the
|
|
166
|
+
* asymmetry is measured rather than assumed. Chrome's PDF viewer is blocked in
|
|
167
|
+
* a sandboxed frame — with `sandbox=""` and with `sandbox="allow-scripts"`
|
|
168
|
+
* alike, both photographed against a one-page document — so the sandbox that
|
|
169
|
+
* protects a dropped `text/html` file is also what made every PDF preview a
|
|
170
|
+
* grey box, which is how a reader met it.
|
|
171
|
+
*
|
|
172
|
+
* What makes the exception safe is the type: the object URL carries the file's
|
|
173
|
+
* own media type, Chrome dispatches `application/pdf` to the PDF viewer by
|
|
174
|
+
* that type and does not sniff HTML out of it — an HTML document served as
|
|
175
|
+
* `application/pdf` in an unsandboxed frame ran no script, measured the same
|
|
176
|
+
* way. Text keeps the sandbox, with neither `allow-scripts` nor
|
|
177
|
+
* `allow-same-origin`, because an object URL inherits this document's origin.
|
|
178
|
+
*/
|
|
179
|
+
if (type === 'application/pdf')
|
|
180
|
+
return 'pdf';
|
|
181
|
+
if (type.startsWith('text/'))
|
|
182
|
+
return 'text';
|
|
183
|
+
return 'unsupported';
|
|
184
|
+
}, /* @ts-ignore */
|
|
185
|
+
...(ngDevMode ? [{ debugName: "stage" }] : /* istanbul ignore next */ []));
|
|
186
|
+
metaText = computed(() => {
|
|
187
|
+
const file = this.current();
|
|
188
|
+
if (file === undefined)
|
|
189
|
+
return '';
|
|
190
|
+
const size = formatBytes(file.size, this.locale() ?? this.contextLocale());
|
|
191
|
+
const kind = this.t(file.kind);
|
|
192
|
+
return this.index() === -1
|
|
193
|
+
? this.t('viewerMeta', { size, kind })
|
|
194
|
+
: this.t('viewerMetaPosition', {
|
|
195
|
+
size,
|
|
196
|
+
kind,
|
|
197
|
+
index: this.index() + 1,
|
|
198
|
+
count: this.shown().length,
|
|
199
|
+
});
|
|
200
|
+
}, /* @ts-ignore */
|
|
201
|
+
...(ngDevMode ? [{ debugName: "metaText" }] : /* istanbul ignore next */ []));
|
|
202
|
+
extensionLabel = computed(() => {
|
|
203
|
+
const name = this.current()?.name ?? '';
|
|
204
|
+
const dot = name.lastIndexOf('.');
|
|
205
|
+
return dot <= 0 ? this.t('noExtension') : name.slice(dot + 1).toUpperCase();
|
|
206
|
+
}, /* @ts-ignore */
|
|
207
|
+
...(ngDevMode ? [{ debugName: "extensionLabel" }] : /* istanbul ignore next */ []));
|
|
208
|
+
constructor() {
|
|
209
|
+
const onKey = (event) => {
|
|
210
|
+
if (this.current() === undefined)
|
|
211
|
+
return;
|
|
212
|
+
this.onKey(event);
|
|
213
|
+
};
|
|
214
|
+
document.addEventListener('keydown', onKey);
|
|
215
|
+
inject(DestroyRef).onDestroy(() => document.removeEventListener('keydown', onKey));
|
|
216
|
+
}
|
|
217
|
+
onKey(event) {
|
|
218
|
+
if (this.current() === undefined)
|
|
219
|
+
return;
|
|
220
|
+
const shown = this.shown();
|
|
221
|
+
/* Escape is the dialog's, and it arrives here as a close request instead. */
|
|
222
|
+
if (event.key === 'ArrowLeft')
|
|
223
|
+
this.move(-1, event);
|
|
224
|
+
else if (event.key === 'ArrowRight')
|
|
225
|
+
this.move(1, event);
|
|
226
|
+
else if (event.key === 'Home')
|
|
227
|
+
this.emit(shown[0]?.key ?? null, 'keyboard', event);
|
|
228
|
+
else if (event.key === 'End')
|
|
229
|
+
this.emit(shown.at(-1)?.key ?? null, 'keyboard', event);
|
|
230
|
+
else
|
|
231
|
+
return;
|
|
232
|
+
event.preventDefault();
|
|
233
|
+
}
|
|
234
|
+
move(step, source) {
|
|
235
|
+
const next = this.shown()[this.index() + step];
|
|
236
|
+
if (next !== undefined)
|
|
237
|
+
this.emit(next.key, 'keyboard', source);
|
|
238
|
+
}
|
|
239
|
+
close(source) {
|
|
240
|
+
this.emit(null, 'pointer', source);
|
|
241
|
+
}
|
|
242
|
+
/**
|
|
243
|
+
* The layer closed itself — Escape, the scrim, or the dialog's own control.
|
|
244
|
+
* Only the reasons this family declares survive the translation; the rest is
|
|
245
|
+
* a dismissal, which is what `dismiss` means in every state model here.
|
|
246
|
+
*/
|
|
247
|
+
onDialogRequest(request) {
|
|
248
|
+
if (request.value)
|
|
249
|
+
return;
|
|
250
|
+
const reason = request.reason === 'escape' || request.reason === 'outsidePress' ? request.reason : 'dismiss';
|
|
251
|
+
this.emit(null, reason, request.source);
|
|
252
|
+
}
|
|
253
|
+
openExternally() {
|
|
254
|
+
const url = this.url();
|
|
255
|
+
if (url !== undefined)
|
|
256
|
+
window.open(url, '_blank', 'noopener,noreferrer');
|
|
257
|
+
}
|
|
258
|
+
emit(key, reason, source) {
|
|
259
|
+
this.viewingChange.emit({ key, reason, source });
|
|
260
|
+
}
|
|
261
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlUploadViewer, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
262
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlUploadViewer, isStandalone: true, selector: "div[slUploadViewer]", inputs: { files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: false, transformFunction: null }, viewing: { classPropertyName: "viewing", publicName: "viewing", isSignal: true, isRequired: false, transformFunction: null }, urls: { classPropertyName: "urls", publicName: "urls", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { viewingChange: "viewingChange" }, host: { listeners: { "keydown": "onKey($event)" }, properties: { "attr.hidden": "current() ? null : \"\"" } }, exportAs: ["slUploadViewer"], ngImport: i0, template: `
|
|
263
|
+
<!--
|
|
264
|
+
The layer stands whether or not a file is open, and the open input is what
|
|
265
|
+
moves it. Written the other way round — the dialog created by the same
|
|
266
|
+
block that opens it — the presence machine reached open in an effect after
|
|
267
|
+
the view had been made and the layer's own template was never refreshed:
|
|
268
|
+
the component reported itself open and mounted, with nothing in the
|
|
269
|
+
document to show for it.
|
|
270
|
+
-->
|
|
271
|
+
<sl-dialog
|
|
272
|
+
(openChangeRequest)="onDialogRequest($event)"
|
|
273
|
+
[open]="current() !== undefined"
|
|
274
|
+
fullScreen="always"
|
|
275
|
+
>
|
|
276
|
+
@if (current(); as file) {
|
|
277
|
+
<div [attr.data-size]="size()" data-part="viewer" data-ui="upload">
|
|
278
|
+
<div data-part="viewerHeader">
|
|
279
|
+
<div>
|
|
280
|
+
<h2 data-part="viewerTitle" slDialogTitle>{{ file.name }}</h2>
|
|
281
|
+
<span data-part="viewerMeta">{{ metaText() }}</span>
|
|
282
|
+
</div>
|
|
283
|
+
<span data-part="viewerActions">
|
|
284
|
+
@if (url()) {
|
|
285
|
+
<button
|
|
286
|
+
(click)="openExternally()"
|
|
287
|
+
[attr.aria-label]="t('viewerExternal')"
|
|
288
|
+
data-part="viewerExternal"
|
|
289
|
+
type="button"
|
|
290
|
+
>
|
|
291
|
+
<span slIcon><svg slGlyph name="external"></svg></span>
|
|
292
|
+
</button>
|
|
293
|
+
}
|
|
294
|
+
<button
|
|
295
|
+
(click)="close($event)"
|
|
296
|
+
[attr.aria-label]="t('viewerClose')"
|
|
297
|
+
data-part="viewerClose"
|
|
298
|
+
type="button"
|
|
299
|
+
>
|
|
300
|
+
<span slIcon><svg slGlyph name="x"></svg></span>
|
|
301
|
+
</button>
|
|
302
|
+
</span>
|
|
303
|
+
</div>
|
|
304
|
+
|
|
305
|
+
<div data-part="viewerStage">
|
|
306
|
+
@if (shown().length > 1) {
|
|
307
|
+
<button
|
|
308
|
+
(click)="move(-1, $event)"
|
|
309
|
+
[attr.aria-label]="t('viewerPrevious')"
|
|
310
|
+
[disabled]="index() <= 0"
|
|
311
|
+
data-part="viewerPrevious"
|
|
312
|
+
type="button"
|
|
313
|
+
>
|
|
314
|
+
<span slIcon directional><svg slGlyph name="chevron-right"></svg></span>
|
|
315
|
+
</button>
|
|
316
|
+
}
|
|
317
|
+
|
|
318
|
+
@switch (stage()) {
|
|
319
|
+
@case ('image') {
|
|
320
|
+
<img [alt]="file.name" [src]="url()" />
|
|
321
|
+
}
|
|
322
|
+
@case ('video') {
|
|
323
|
+
<video [src]="url()" controls></video>
|
|
324
|
+
}
|
|
325
|
+
@case ('audio') {
|
|
326
|
+
<audio [src]="url()" controls></audio>
|
|
327
|
+
}
|
|
328
|
+
@case ('pdf') {
|
|
329
|
+
<iframe [src]="frameUrl()" [title]="file.name"></iframe>
|
|
330
|
+
}
|
|
331
|
+
@case ('text') {
|
|
332
|
+
<iframe [src]="frameUrl()" [title]="file.name" sandbox=""></iframe>
|
|
333
|
+
}
|
|
334
|
+
@default {
|
|
335
|
+
<span
|
|
336
|
+
[attr.data-extension]="extensionLabel()"
|
|
337
|
+
[attr.data-kind]="file.kind"
|
|
338
|
+
data-part="preview"
|
|
339
|
+
>
|
|
340
|
+
<span slIcon><svg slGlyph [name]="kindGlyph[file.kind]"></svg></span>
|
|
341
|
+
</span>
|
|
342
|
+
<p>{{ t('viewerUnsupported') }}</p>
|
|
343
|
+
}
|
|
344
|
+
}
|
|
345
|
+
|
|
346
|
+
@if (shown().length > 1) {
|
|
347
|
+
<button
|
|
348
|
+
(click)="move(1, $event)"
|
|
349
|
+
[attr.aria-label]="t('viewerNext')"
|
|
350
|
+
[disabled]="index() === -1 || index() >= shown().length - 1"
|
|
351
|
+
data-part="viewerNext"
|
|
352
|
+
type="button"
|
|
353
|
+
>
|
|
354
|
+
<span slIcon directional><svg slGlyph name="chevron-right"></svg></span>
|
|
355
|
+
</button>
|
|
356
|
+
}
|
|
357
|
+
</div>
|
|
358
|
+
</div>
|
|
359
|
+
}
|
|
360
|
+
</sl-dialog>
|
|
361
|
+
`, isInline: true, dependencies: [{ kind: "component", type: SlDialog, selector: "sl-dialog", inputs: ["modal", "outsidePress"], exportAs: ["slDialog"] }, { kind: "directive", type: SlDialogTitle, selector: "[slDialogTitle]", exportAs: ["slDialogTitle"] }, { kind: "component", type: SlGlyph, selector: "svg[slGlyph]", inputs: ["name", "solid"] }, { kind: "component", type: SlIcon, selector: "[slIcon]", inputs: ["directional", "label", "size", "tone"], exportAs: ["slIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
362
|
+
}
|
|
363
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlUploadViewer, decorators: [{
|
|
364
|
+
type: Component,
|
|
365
|
+
args: [{
|
|
366
|
+
selector: 'div[slUploadViewer]',
|
|
367
|
+
standalone: true,
|
|
368
|
+
exportAs: 'slUploadViewer',
|
|
369
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
370
|
+
encapsulation: ViewEncapsulation.None,
|
|
371
|
+
imports: [SlDialog, SlDialogTitle, SlGlyph, SlIcon],
|
|
372
|
+
host: {
|
|
373
|
+
'[attr.hidden]': 'current() ? null : ""',
|
|
374
|
+
'(keydown)': 'onKey($event)',
|
|
375
|
+
},
|
|
376
|
+
template: `
|
|
377
|
+
<!--
|
|
378
|
+
The layer stands whether or not a file is open, and the open input is what
|
|
379
|
+
moves it. Written the other way round — the dialog created by the same
|
|
380
|
+
block that opens it — the presence machine reached open in an effect after
|
|
381
|
+
the view had been made and the layer's own template was never refreshed:
|
|
382
|
+
the component reported itself open and mounted, with nothing in the
|
|
383
|
+
document to show for it.
|
|
384
|
+
-->
|
|
385
|
+
<sl-dialog
|
|
386
|
+
(openChangeRequest)="onDialogRequest($event)"
|
|
387
|
+
[open]="current() !== undefined"
|
|
388
|
+
fullScreen="always"
|
|
389
|
+
>
|
|
390
|
+
@if (current(); as file) {
|
|
391
|
+
<div [attr.data-size]="size()" data-part="viewer" data-ui="upload">
|
|
392
|
+
<div data-part="viewerHeader">
|
|
393
|
+
<div>
|
|
394
|
+
<h2 data-part="viewerTitle" slDialogTitle>{{ file.name }}</h2>
|
|
395
|
+
<span data-part="viewerMeta">{{ metaText() }}</span>
|
|
396
|
+
</div>
|
|
397
|
+
<span data-part="viewerActions">
|
|
398
|
+
@if (url()) {
|
|
399
|
+
<button
|
|
400
|
+
(click)="openExternally()"
|
|
401
|
+
[attr.aria-label]="t('viewerExternal')"
|
|
402
|
+
data-part="viewerExternal"
|
|
403
|
+
type="button"
|
|
404
|
+
>
|
|
405
|
+
<span slIcon><svg slGlyph name="external"></svg></span>
|
|
406
|
+
</button>
|
|
407
|
+
}
|
|
408
|
+
<button
|
|
409
|
+
(click)="close($event)"
|
|
410
|
+
[attr.aria-label]="t('viewerClose')"
|
|
411
|
+
data-part="viewerClose"
|
|
412
|
+
type="button"
|
|
413
|
+
>
|
|
414
|
+
<span slIcon><svg slGlyph name="x"></svg></span>
|
|
415
|
+
</button>
|
|
416
|
+
</span>
|
|
417
|
+
</div>
|
|
418
|
+
|
|
419
|
+
<div data-part="viewerStage">
|
|
420
|
+
@if (shown().length > 1) {
|
|
421
|
+
<button
|
|
422
|
+
(click)="move(-1, $event)"
|
|
423
|
+
[attr.aria-label]="t('viewerPrevious')"
|
|
424
|
+
[disabled]="index() <= 0"
|
|
425
|
+
data-part="viewerPrevious"
|
|
426
|
+
type="button"
|
|
427
|
+
>
|
|
428
|
+
<span slIcon directional><svg slGlyph name="chevron-right"></svg></span>
|
|
429
|
+
</button>
|
|
430
|
+
}
|
|
431
|
+
|
|
432
|
+
@switch (stage()) {
|
|
433
|
+
@case ('image') {
|
|
434
|
+
<img [alt]="file.name" [src]="url()" />
|
|
435
|
+
}
|
|
436
|
+
@case ('video') {
|
|
437
|
+
<video [src]="url()" controls></video>
|
|
438
|
+
}
|
|
439
|
+
@case ('audio') {
|
|
440
|
+
<audio [src]="url()" controls></audio>
|
|
441
|
+
}
|
|
442
|
+
@case ('pdf') {
|
|
443
|
+
<iframe [src]="frameUrl()" [title]="file.name"></iframe>
|
|
444
|
+
}
|
|
445
|
+
@case ('text') {
|
|
446
|
+
<iframe [src]="frameUrl()" [title]="file.name" sandbox=""></iframe>
|
|
447
|
+
}
|
|
448
|
+
@default {
|
|
449
|
+
<span
|
|
450
|
+
[attr.data-extension]="extensionLabel()"
|
|
451
|
+
[attr.data-kind]="file.kind"
|
|
452
|
+
data-part="preview"
|
|
453
|
+
>
|
|
454
|
+
<span slIcon><svg slGlyph [name]="kindGlyph[file.kind]"></svg></span>
|
|
455
|
+
</span>
|
|
456
|
+
<p>{{ t('viewerUnsupported') }}</p>
|
|
457
|
+
}
|
|
458
|
+
}
|
|
459
|
+
|
|
460
|
+
@if (shown().length > 1) {
|
|
461
|
+
<button
|
|
462
|
+
(click)="move(1, $event)"
|
|
463
|
+
[attr.aria-label]="t('viewerNext')"
|
|
464
|
+
[disabled]="index() === -1 || index() >= shown().length - 1"
|
|
465
|
+
data-part="viewerNext"
|
|
466
|
+
type="button"
|
|
467
|
+
>
|
|
468
|
+
<span slIcon directional><svg slGlyph name="chevron-right"></svg></span>
|
|
469
|
+
</button>
|
|
470
|
+
}
|
|
471
|
+
</div>
|
|
472
|
+
</div>
|
|
473
|
+
}
|
|
474
|
+
</sl-dialog>
|
|
475
|
+
`,
|
|
476
|
+
}]
|
|
477
|
+
}], ctorParameters: () => [], propDecorators: { files: [{ type: i0.Input, args: [{ isSignal: true, alias: "files", required: false }] }], viewing: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewing", required: false }] }], urls: [{ type: i0.Input, args: [{ isSignal: true, alias: "urls", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], viewingChange: [{ type: i0.Output, args: ["viewingChange"] }] } });
|
|
478
|
+
|
|
479
|
+
/**
|
|
480
|
+
* Files, and what happens to them.
|
|
481
|
+
*
|
|
482
|
+
* One family for what `docs/component-features.md` §17 lists as three: a drop
|
|
483
|
+
* region, a file input, and the manager that shows what is being sent.
|
|
484
|
+
*
|
|
485
|
+
* **The trigger is the `<label>` and the region is not.** What the reader
|
|
486
|
+
* focuses is an `<input type="file">` clipped to one pixel inside the trigger,
|
|
487
|
+
* so the input's accessible name is the trigger's own text rather than every
|
|
488
|
+
* word in the box.
|
|
489
|
+
*
|
|
490
|
+
* **The family calls an adapter and reports what it says.** It holds no URL, no
|
|
491
|
+
* method, no header and no credential.
|
|
492
|
+
*/
|
|
493
|
+
class SlUpload {
|
|
494
|
+
defaults = injectUploadDefaults();
|
|
495
|
+
host = inject(ElementRef).nativeElement;
|
|
496
|
+
destroyRef = inject(DestroyRef);
|
|
497
|
+
/**
|
|
498
|
+
* A static `id` the consumer wrote, read before any binding computes, so the
|
|
499
|
+
* binding never writes over it.
|
|
500
|
+
*/
|
|
501
|
+
static count = 0;
|
|
502
|
+
writtenId = inject(new HostAttributeToken('id'), { optional: true });
|
|
503
|
+
controlId = this.writtenId ?? `slotted-upload-${(SlUpload.count += 1)}`;
|
|
504
|
+
descriptionId = `${this.controlId}-description`;
|
|
505
|
+
kindGlyph = KIND_GLYPH;
|
|
506
|
+
/** Present means the consumer owns the selection. */
|
|
507
|
+
files = model([], /* @ts-ignore */
|
|
508
|
+
...(ngDevMode ? [{ debugName: "files" }] : /* istanbul ignore next */ []));
|
|
509
|
+
/** Present means the consumer owns which file the viewer is open on. */
|
|
510
|
+
viewing = model(null, /* @ts-ignore */
|
|
511
|
+
...(ngDevMode ? [{ debugName: "viewing" }] : /* istanbul ignore next */ []));
|
|
512
|
+
filesChange2 = output({ alias: 'filesRequest' });
|
|
513
|
+
viewingRequest = output();
|
|
514
|
+
reject = output();
|
|
515
|
+
accept = input(undefined, /* @ts-ignore */
|
|
516
|
+
...(ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ []));
|
|
517
|
+
multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
518
|
+
directory = input(false, { ...(ngDevMode ? { debugName: "directory" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
519
|
+
capture = input(undefined, /* @ts-ignore */
|
|
520
|
+
...(ngDevMode ? [{ debugName: "capture" }] : /* istanbul ignore next */ []));
|
|
521
|
+
maxFiles = input(undefined, { ...(ngDevMode ? { debugName: "maxFiles" } : /* istanbul ignore next */ {}), transform: optionalNumber });
|
|
522
|
+
minFiles = input(undefined, { ...(ngDevMode ? { debugName: "minFiles" } : /* istanbul ignore next */ {}), transform: optionalNumber });
|
|
523
|
+
maxSize = input(undefined, { ...(ngDevMode ? { debugName: "maxSize" } : /* istanbul ignore next */ {}), transform: optionalNumber });
|
|
524
|
+
minSize = input(undefined, { ...(ngDevMode ? { debugName: "minSize" } : /* istanbul ignore next */ {}), transform: optionalNumber });
|
|
525
|
+
maxTotalSize = input(undefined, { ...(ngDevMode ? { debugName: "maxTotalSize" } : /* istanbul ignore next */ {}), transform: optionalNumber });
|
|
526
|
+
/**
|
|
527
|
+
* The consumer's own rule. It is `fileValidator` in the class and `validate`
|
|
528
|
+
* in a template, because `Validator.validate` is a method this class already
|
|
529
|
+
* has and two members cannot share a name.
|
|
530
|
+
*/
|
|
531
|
+
fileValidator = input(undefined, { ...(ngDevMode ? { debugName: "fileValidator" } : /* istanbul ignore next */ {}), alias: 'validate' });
|
|
532
|
+
transform = input(undefined, /* @ts-ignore */
|
|
533
|
+
...(ngDevMode ? [{ debugName: "transform" }] : /* istanbul ignore next */ []));
|
|
534
|
+
variant = input(undefined, /* @ts-ignore */
|
|
535
|
+
...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
536
|
+
layout = input(undefined, /* @ts-ignore */
|
|
537
|
+
...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
|
|
538
|
+
size = input(undefined, /* @ts-ignore */
|
|
539
|
+
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
540
|
+
preview = input(undefined, /* @ts-ignore */
|
|
541
|
+
...(ngDevMode ? [{ debugName: "preview" }] : /* istanbul ignore next */ []));
|
|
542
|
+
view = input(undefined, /* @ts-ignore */
|
|
543
|
+
...(ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []));
|
|
544
|
+
duplicates = input(undefined, /* @ts-ignore */
|
|
545
|
+
...(ngDevMode ? [{ debugName: "duplicates" }] : /* istanbul ignore next */ []));
|
|
546
|
+
clickToBrowse = input(undefined, { ...(ngDevMode ? { debugName: "clickToBrowse" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
|
|
547
|
+
allowDrop = input(undefined, { ...(ngDevMode ? { debugName: "allowDrop" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
|
|
548
|
+
allowPaste = input(undefined, { ...(ngDevMode ? { debugName: "allowPaste" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
|
|
549
|
+
preventDocumentDrop = input(undefined, { ...(ngDevMode ? { debugName: "preventDocumentDrop" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
|
|
550
|
+
autoUpload = input(undefined, { ...(ngDevMode ? { debugName: "autoUpload" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
|
|
551
|
+
pendingBlocksSubmit = input(undefined, { ...(ngDevMode ? { debugName: "pendingBlocksSubmit" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
|
|
552
|
+
adapter = input(undefined, /* @ts-ignore */
|
|
553
|
+
...(ngDevMode ? [{ debugName: "adapter" }] : /* istanbul ignore next */ []));
|
|
554
|
+
concurrency = input(undefined, { ...(ngDevMode ? { debugName: "concurrency" } : /* istanbul ignore next */ {}), transform: optionalNumber });
|
|
555
|
+
retries = input(undefined, { ...(ngDevMode ? { debugName: "retries" } : /* istanbul ignore next */ {}), transform: optionalNumber });
|
|
556
|
+
retryDelay = input(undefined, { ...(ngDevMode ? { debugName: "retryDelay" } : /* istanbul ignore next */ {}), transform: optionalNumber });
|
|
557
|
+
stallAfter = input(undefined, { ...(ngDevMode ? { debugName: "stallAfter" } : /* istanbul ignore next */ {}), transform: optionalNumber });
|
|
558
|
+
maxRows = input(undefined, { ...(ngDevMode ? { debugName: "maxRows" } : /* istanbul ignore next */ {}), transform: optionalNumber });
|
|
559
|
+
/** What sizes and durations are written in. Absent, the language in force. */
|
|
560
|
+
locale = input(undefined, /* @ts-ignore */
|
|
561
|
+
...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
|
|
562
|
+
fileKey = input(undefined, /* @ts-ignore */
|
|
563
|
+
...(ngDevMode ? [{ debugName: "fileKey" }] : /* istanbul ignore next */ []));
|
|
564
|
+
/**
|
|
565
|
+
* Words laid over the catalog of the language in force, key by key: the
|
|
566
|
+
* controls, the word for each status and each kind, the sentences about the
|
|
567
|
+
* queue, and why a file was refused (`rejection.*`). Only the application
|
|
568
|
+
* knows whether a limit is a policy, a plan or a bug, so a refusal is worded
|
|
569
|
+
* here.
|
|
570
|
+
*/
|
|
571
|
+
messages = input(undefined, /* @ts-ignore */
|
|
572
|
+
...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
|
|
573
|
+
label = input(undefined, /* @ts-ignore */
|
|
574
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
575
|
+
description = input(undefined, /* @ts-ignore */
|
|
576
|
+
...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
|
|
577
|
+
name = input(undefined, /* @ts-ignore */
|
|
578
|
+
...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
|
|
579
|
+
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
580
|
+
readOnly = input(false, { ...(ngDevMode ? { debugName: "readOnly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
581
|
+
invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
582
|
+
required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
583
|
+
formDisabled = signal(false, /* @ts-ignore */
|
|
584
|
+
...(ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []));
|
|
585
|
+
dragging = signal(false, /* @ts-ignore */
|
|
586
|
+
...(ngDevMode ? [{ debugName: "dragging" }] : /* istanbul ignore next */ []));
|
|
587
|
+
documentDrag = signal(false, /* @ts-ignore */
|
|
588
|
+
...(ngDevMode ? [{ debugName: "documentDrag" }] : /* istanbul ignore next */ []));
|
|
589
|
+
verdict = signal(null, /* @ts-ignore */
|
|
590
|
+
...(ngDevMode ? [{ debugName: "verdict" }] : /* istanbul ignore next */ []));
|
|
591
|
+
urls = signal(new Map(), /* @ts-ignore */
|
|
592
|
+
...(ngDevMode ? [{ debugName: "urls" }] : /* istanbul ignore next */ []));
|
|
593
|
+
pausable = signal(false, /* @ts-ignore */
|
|
594
|
+
...(ngDevMode ? [{ debugName: "pausable" }] : /* istanbul ignore next */ []));
|
|
595
|
+
samples = signal([], /* @ts-ignore */
|
|
596
|
+
...(ngDevMode ? [{ debugName: "samples" }] : /* istanbul ignore next */ []));
|
|
597
|
+
depth = 0;
|
|
598
|
+
runner = null;
|
|
599
|
+
statuses = new Map();
|
|
600
|
+
/** `null` until the first run, which records the initial list without saying it. */
|
|
601
|
+
finished = null;
|
|
602
|
+
onChangeFn = () => undefined;
|
|
603
|
+
onTouchedFn = () => undefined;
|
|
604
|
+
onValidatorChange = () => undefined;
|
|
605
|
+
resolvedVariant = computed(() => this.variant() ?? this.defaults.variant, /* @ts-ignore */
|
|
606
|
+
...(ngDevMode ? [{ debugName: "resolvedVariant" }] : /* istanbul ignore next */ []));
|
|
607
|
+
resolvedLayout = computed(() => this.layout() ?? this.defaults.layout, /* @ts-ignore */
|
|
608
|
+
...(ngDevMode ? [{ debugName: "resolvedLayout" }] : /* istanbul ignore next */ []));
|
|
609
|
+
resolvedSize = computed(() => this.size() ?? this.defaults.size, /* @ts-ignore */
|
|
610
|
+
...(ngDevMode ? [{ debugName: "resolvedSize" }] : /* istanbul ignore next */ []));
|
|
611
|
+
resolvedPreview = computed(() => this.preview() ?? this.defaults.preview, /* @ts-ignore */
|
|
612
|
+
...(ngDevMode ? [{ debugName: "resolvedPreview" }] : /* istanbul ignore next */ []));
|
|
613
|
+
resolvedView = computed(() => this.view() ?? this.defaults.view, /* @ts-ignore */
|
|
614
|
+
...(ngDevMode ? [{ debugName: "resolvedView" }] : /* istanbul ignore next */ []));
|
|
615
|
+
contextLocale = injectLocale();
|
|
616
|
+
resolvedLocale = computed(() => this.locale() ?? this.contextLocale(), /* @ts-ignore */
|
|
617
|
+
...(ngDevMode ? [{ debugName: "resolvedLocale" }] : /* istanbul ignore next */ []));
|
|
618
|
+
/** The family's words in the language in force, with this upload's `messages` laid over them. */
|
|
619
|
+
t = injectMessages(uploadMessages, this.messages);
|
|
620
|
+
resolvedDisabled = computed(() => this.disabled() || this.formDisabled(), /* @ts-ignore */
|
|
621
|
+
...(ngDevMode ? [{ debugName: "resolvedDisabled" }] : /* istanbul ignore next */ []));
|
|
622
|
+
formatters = computed(() => uploadFormatters(this.resolvedLocale()), /* @ts-ignore */
|
|
623
|
+
...(ngDevMode ? [{ debugName: "formatters" }] : /* istanbul ignore next */ []));
|
|
624
|
+
summary = computed(() => uploadSummary(this.files()), /* @ts-ignore */
|
|
625
|
+
...(ngDevMode ? [{ debugName: "summary" }] : /* istanbul ignore next */ []));
|
|
626
|
+
insideField = computed(() => this.host.closest('[data-ui="field"]') !== null, /* @ts-ignore */
|
|
627
|
+
...(ngDevMode ? [{ debugName: "insideField" }] : /* istanbul ignore next */ []));
|
|
628
|
+
visibleRows = computed(() => {
|
|
629
|
+
const rows = this.maxRows() ?? this.defaults.maxRows;
|
|
630
|
+
return rows === 0 ? this.files().length : rows;
|
|
631
|
+
}, /* @ts-ignore */
|
|
632
|
+
...(ngDevMode ? [{ debugName: "visibleRows" }] : /* istanbul ignore next */ []));
|
|
633
|
+
showList = computed(() => this.files().length > 0 && !(this.resolvedVariant() === 'field' && this.files().length === 1), /* @ts-ignore */
|
|
634
|
+
...(ngDevMode ? [{ debugName: "showList" }] : /* istanbul ignore next */ []));
|
|
635
|
+
fieldSummary = computed(() => {
|
|
636
|
+
const list = this.files();
|
|
637
|
+
if (list.length === 0)
|
|
638
|
+
return '—';
|
|
639
|
+
const first = list[0];
|
|
640
|
+
if (list.length === 1 && first !== undefined) {
|
|
641
|
+
return `${first.name} · ${this.formatters().bytes(first.size)}`;
|
|
642
|
+
}
|
|
643
|
+
return this.t('selection', { count: list.length });
|
|
644
|
+
}, /* @ts-ignore */
|
|
645
|
+
...(ngDevMode ? [{ debugName: "fieldSummary" }] : /* istanbul ignore next */ []));
|
|
646
|
+
summaryText = computed(() => {
|
|
647
|
+
const summary = this.summary();
|
|
648
|
+
const remaining = summary.pending ? estimateRemaining(this.samples(), summary) : null;
|
|
649
|
+
const counts = { uploaded: summary.counts.success, total: summary.total };
|
|
650
|
+
return remaining === null
|
|
651
|
+
? this.t('summary', counts)
|
|
652
|
+
: this.t('summaryRemaining', {
|
|
653
|
+
...counts,
|
|
654
|
+
duration: this.formatters().duration(remaining),
|
|
655
|
+
});
|
|
656
|
+
}, /* @ts-ignore */
|
|
657
|
+
...(ngDevMode ? [{ debugName: "summaryText" }] : /* istanbul ignore next */ []));
|
|
658
|
+
/** Whether a click anywhere in the region opens the picker, which is when it answers a pointer. */
|
|
659
|
+
browsable = computed(() => (this.clickToBrowse() ?? this.defaults.clickToBrowse) && this.accepting(), /* @ts-ignore */
|
|
660
|
+
...(ngDevMode ? [{ debugName: "browsable" }] : /* istanbul ignore next */ []));
|
|
661
|
+
describedBy = computed(() => {
|
|
662
|
+
const parts = [this.description() === undefined ? undefined : this.descriptionId].filter(Boolean);
|
|
663
|
+
return parts.length === 0 ? null : parts.join(' ');
|
|
664
|
+
}, /* @ts-ignore */
|
|
665
|
+
...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
|
|
666
|
+
constructor() {
|
|
667
|
+
/* The runner is rebuilt when the adapter or its policy changes, and torn
|
|
668
|
+
down with the component: an aborted transfer is what a page navigating
|
|
669
|
+
away owes the reader. */
|
|
670
|
+
effect((onCleanup) => {
|
|
671
|
+
const adapter = this.adapter() ?? this.defaults.adapter;
|
|
672
|
+
if (adapter === undefined) {
|
|
673
|
+
this.runner = null;
|
|
674
|
+
this.pausable.set(false);
|
|
675
|
+
return;
|
|
676
|
+
}
|
|
677
|
+
const runner = createUploadRunner({
|
|
678
|
+
adapter,
|
|
679
|
+
concurrency: this.concurrency() ?? this.defaults.concurrency,
|
|
680
|
+
retries: this.retries() ?? this.defaults.retries,
|
|
681
|
+
retryDelay: this.retryDelay() ?? this.defaults.retryDelay,
|
|
682
|
+
stallAfter: this.stallAfter() ?? this.defaults.stallAfter,
|
|
683
|
+
onPatch: (key, patch) => this.patch(key, patch),
|
|
684
|
+
});
|
|
685
|
+
this.runner = runner;
|
|
686
|
+
this.pausable.set(runner.pausable);
|
|
687
|
+
onCleanup(() => runner.destroy());
|
|
688
|
+
});
|
|
689
|
+
/*
|
|
690
|
+
* The status changes the reader did not necessarily cause and may not be
|
|
691
|
+
* looking at are said: a transfer that failed, one that was stopped, and
|
|
692
|
+
* the queue finishing. The previous status of every row is kept so each is
|
|
693
|
+
* said once; a row seen for the first time is the list's initial content,
|
|
694
|
+
* which the contract keeps silent.
|
|
695
|
+
*/
|
|
696
|
+
effect(() => {
|
|
697
|
+
const list = this.files();
|
|
698
|
+
const summary = this.summary();
|
|
699
|
+
untracked(() => {
|
|
700
|
+
const announcer = getLiveAnnouncer();
|
|
701
|
+
for (const file of list) {
|
|
702
|
+
const before = this.statuses.get(file.key);
|
|
703
|
+
if (before === undefined || before === file.status)
|
|
704
|
+
continue;
|
|
705
|
+
if (file.status === 'error' || file.status === 'canceled') {
|
|
706
|
+
announcer?.announce(this.t('fileNotice', { name: file.name, message: this.t(file.status) }));
|
|
707
|
+
}
|
|
708
|
+
}
|
|
709
|
+
this.statuses = new Map(list.map((file) => [file.key, file.status]));
|
|
710
|
+
const finished = summary.complete && summary.total > 0;
|
|
711
|
+
if (finished && this.finished === false) {
|
|
712
|
+
announcer?.announce(this.t('finished', { uploaded: summary.counts.success, total: summary.total }));
|
|
713
|
+
}
|
|
714
|
+
this.finished = finished;
|
|
715
|
+
});
|
|
716
|
+
});
|
|
717
|
+
/*
|
|
718
|
+
* The family created the object URLs, so the family revokes them. §14
|
|
719
|
+
* requires the revocation by name; Ant Design leaves it to the consumer and
|
|
720
|
+
* Uppy owns a plugin for it.
|
|
721
|
+
*/
|
|
722
|
+
effect(() => {
|
|
723
|
+
const list = this.files();
|
|
724
|
+
const wanted = new Map(this.urls());
|
|
725
|
+
let moved = false;
|
|
726
|
+
for (const file of list) {
|
|
727
|
+
if (file.file === undefined || wanted.has(file.key) || !isViewable(file))
|
|
728
|
+
continue;
|
|
729
|
+
wanted.set(file.key, URL.createObjectURL(file.file));
|
|
730
|
+
moved = true;
|
|
731
|
+
}
|
|
732
|
+
const live = new Set(list.map((file) => file.key));
|
|
733
|
+
for (const [key, url] of wanted) {
|
|
734
|
+
if (live.has(key))
|
|
735
|
+
continue;
|
|
736
|
+
URL.revokeObjectURL(url);
|
|
737
|
+
wanted.delete(key);
|
|
738
|
+
moved = true;
|
|
739
|
+
}
|
|
740
|
+
if (moved)
|
|
741
|
+
this.urls.set(wanted);
|
|
742
|
+
});
|
|
743
|
+
/* The throughput window the remaining time is read from. */
|
|
744
|
+
effect(() => {
|
|
745
|
+
const loaded = this.summary().loaded;
|
|
746
|
+
const samples = this.samples();
|
|
747
|
+
if (samples.at(-1)?.loaded === loaded)
|
|
748
|
+
return;
|
|
749
|
+
this.samples.set([...samples, { at: Date.now(), loaded }].slice(-8));
|
|
750
|
+
});
|
|
751
|
+
/*
|
|
752
|
+
* None of the nine surveyed implementations answers what happens when a
|
|
753
|
+
* form is submitted while the bytes are still moving. The native submit is
|
|
754
|
+
* refused on the control the reader can see, and Reactive Forms hears the
|
|
755
|
+
* same thing through `Validator`.
|
|
756
|
+
*/
|
|
757
|
+
effect(() => {
|
|
758
|
+
const blocked = this.pendingBlocked();
|
|
759
|
+
const element = this.host.querySelector('[data-part="input"]');
|
|
760
|
+
element?.setCustomValidity(blocked ? this.t('pending') : '');
|
|
761
|
+
this.onValidatorChange();
|
|
762
|
+
});
|
|
763
|
+
this.destroyRef.onDestroy(() => {
|
|
764
|
+
for (const url of this.urls().values())
|
|
765
|
+
URL.revokeObjectURL(url);
|
|
766
|
+
this.runner?.destroy();
|
|
767
|
+
this.documentGuard?.();
|
|
768
|
+
});
|
|
769
|
+
effect((onCleanup) => {
|
|
770
|
+
if (!(this.preventDocumentDrop() ?? this.defaults.preventDocumentDrop))
|
|
771
|
+
return;
|
|
772
|
+
onCleanup(this.guardDocument());
|
|
773
|
+
});
|
|
774
|
+
}
|
|
775
|
+
documentGuard = null;
|
|
776
|
+
/**
|
|
777
|
+
* A file dropped beside the region navigates the browser to that file and
|
|
778
|
+
* loses the form. The drag it knows about is published so an application can
|
|
779
|
+
* draw its own full-screen zone — which is a decision about the application,
|
|
780
|
+
* not about a control.
|
|
781
|
+
*/
|
|
782
|
+
guardDocument() {
|
|
783
|
+
const inside = (event) => event.target?.closest?.('[data-ui="upload"]') !== null &&
|
|
784
|
+
event.target?.closest?.('[data-ui="upload"]') !== undefined;
|
|
785
|
+
const over = (event) => {
|
|
786
|
+
if (![...(event.dataTransfer?.types ?? [])].includes('Files'))
|
|
787
|
+
return;
|
|
788
|
+
this.documentDrag.set(true);
|
|
789
|
+
if (!inside(event)) {
|
|
790
|
+
event.preventDefault();
|
|
791
|
+
if (event.dataTransfer !== null)
|
|
792
|
+
event.dataTransfer.dropEffect = 'none';
|
|
793
|
+
}
|
|
794
|
+
};
|
|
795
|
+
const drop = (event) => {
|
|
796
|
+
this.documentDrag.set(false);
|
|
797
|
+
if (!inside(event))
|
|
798
|
+
event.preventDefault();
|
|
799
|
+
};
|
|
800
|
+
document.addEventListener('dragover', over);
|
|
801
|
+
document.addEventListener('drop', drop);
|
|
802
|
+
document.addEventListener('dragend', drop);
|
|
803
|
+
this.documentGuard = () => {
|
|
804
|
+
document.removeEventListener('dragover', over);
|
|
805
|
+
document.removeEventListener('drop', drop);
|
|
806
|
+
document.removeEventListener('dragend', drop);
|
|
807
|
+
this.documentGuard = null;
|
|
808
|
+
};
|
|
809
|
+
return this.documentGuard;
|
|
810
|
+
}
|
|
811
|
+
/* ── Reactive Forms ─────────────────────────────────────────────────── */
|
|
812
|
+
writeValue(value) {
|
|
813
|
+
if (value === null) {
|
|
814
|
+
this.files.set([]);
|
|
815
|
+
return;
|
|
816
|
+
}
|
|
817
|
+
/* A form may hand back either shape; the value the family emits is always
|
|
818
|
+
the richer one, because a row draws more than its bytes. */
|
|
819
|
+
const normalised = value.map((entry) => entry instanceof File
|
|
820
|
+
? {
|
|
821
|
+
key: `${entry.name}:${entry.size}:${entry.lastModified}`,
|
|
822
|
+
file: entry,
|
|
823
|
+
name: entry.name,
|
|
824
|
+
size: entry.size,
|
|
825
|
+
type: entry.type,
|
|
826
|
+
kind: 'other',
|
|
827
|
+
status: 'success',
|
|
828
|
+
loaded: entry.size,
|
|
829
|
+
attempts: 0,
|
|
830
|
+
}
|
|
831
|
+
: entry);
|
|
832
|
+
this.files.set(normalised);
|
|
833
|
+
}
|
|
834
|
+
registerOnChange(fn) {
|
|
835
|
+
this.onChangeFn = fn;
|
|
836
|
+
}
|
|
837
|
+
registerOnTouched(fn) {
|
|
838
|
+
this.onTouchedFn = fn;
|
|
839
|
+
}
|
|
840
|
+
setDisabledState(isDisabled) {
|
|
841
|
+
this.formDisabled.set(isDisabled);
|
|
842
|
+
}
|
|
843
|
+
registerOnValidatorChange(fn) {
|
|
844
|
+
this.onValidatorChange = fn;
|
|
845
|
+
}
|
|
846
|
+
validate() {
|
|
847
|
+
const errors = {};
|
|
848
|
+
const summary = this.summary();
|
|
849
|
+
const min = this.minFiles();
|
|
850
|
+
const max = this.maxFiles();
|
|
851
|
+
if (this.required() && summary.counts.success === 0)
|
|
852
|
+
errors['required'] = true;
|
|
853
|
+
if (min !== undefined && summary.counts.success < min)
|
|
854
|
+
errors['minFiles'] = { min };
|
|
855
|
+
if (max !== undefined && summary.total - summary.counts.rejected > max) {
|
|
856
|
+
errors['maxFiles'] = { max };
|
|
857
|
+
}
|
|
858
|
+
if (this.pendingBlocked())
|
|
859
|
+
errors['uploadPending'] = true;
|
|
860
|
+
return Object.keys(errors).length === 0 ? null : errors;
|
|
861
|
+
}
|
|
862
|
+
pendingBlocked() {
|
|
863
|
+
return ((this.pendingBlocksSubmit() ?? this.defaults.pendingBlocksSubmit) && this.summary().pending);
|
|
864
|
+
}
|
|
865
|
+
/* ── The selection ──────────────────────────────────────────────────── */
|
|
866
|
+
accepting() {
|
|
867
|
+
return !this.resolvedDisabled() && !this.readOnly();
|
|
868
|
+
}
|
|
869
|
+
request(next, reason, source) {
|
|
870
|
+
const state = createControllable({
|
|
871
|
+
controlled: undefined,
|
|
872
|
+
initial: this.files(),
|
|
873
|
+
onRequest: (change) => this.filesChange2.emit(change),
|
|
874
|
+
equals: (a, b) => a === b,
|
|
875
|
+
});
|
|
876
|
+
state.request(next, reason, source);
|
|
877
|
+
this.files.set(next);
|
|
878
|
+
this.onChangeFn(next);
|
|
879
|
+
this.onValidatorChange();
|
|
880
|
+
}
|
|
881
|
+
patch(key, changes) {
|
|
882
|
+
this.files.set(this.files().map((file) => file.key === key ? { ...file, ...changes } : file));
|
|
883
|
+
this.onChangeFn(this.files());
|
|
884
|
+
this.onValidatorChange();
|
|
885
|
+
}
|
|
886
|
+
async take(incoming, reason, source) {
|
|
887
|
+
if (!this.accepting() || incoming.length === 0)
|
|
888
|
+
return;
|
|
889
|
+
const transform = this.transform();
|
|
890
|
+
const prepared = transform === undefined ? [...incoming] : await transform([...incoming]);
|
|
891
|
+
const existing = this.files();
|
|
892
|
+
const outcome = selectFiles(prepared, existing, {
|
|
893
|
+
accept: this.accept(),
|
|
894
|
+
multiple: this.multiple(),
|
|
895
|
+
directory: this.directory(),
|
|
896
|
+
maxFiles: this.maxFiles(),
|
|
897
|
+
maxSize: this.maxSize(),
|
|
898
|
+
minSize: this.minSize(),
|
|
899
|
+
maxTotalSize: this.maxTotalSize(),
|
|
900
|
+
duplicates: this.duplicates() ?? this.defaults.duplicates,
|
|
901
|
+
validate: this.fileValidator(),
|
|
902
|
+
fileKey: this.fileKey() ?? this.defaults.fileKey,
|
|
903
|
+
});
|
|
904
|
+
this.request(outcome.files, reason, source);
|
|
905
|
+
/* A refused file joins the list too, and is announced below with its reason. */
|
|
906
|
+
const kept = outcome.files.filter((file) => file.status !== 'rejected' && !existing.includes(file)).length;
|
|
907
|
+
const announcer = getLiveAnnouncer();
|
|
908
|
+
if (kept > 0)
|
|
909
|
+
announcer?.announce(this.t('added', { count: kept }));
|
|
910
|
+
if (outcome.rejected.length > 0) {
|
|
911
|
+
this.reject.emit(outcome.rejected);
|
|
912
|
+
for (const file of outcome.rejected) {
|
|
913
|
+
announcer?.announce(this.t('fileNotice', { name: file.name, message: this.messageText(file) }));
|
|
914
|
+
}
|
|
915
|
+
}
|
|
916
|
+
if (!(this.autoUpload() ?? this.defaults.autoUpload))
|
|
917
|
+
return;
|
|
918
|
+
for (const file of outcome.files) {
|
|
919
|
+
if (file.status !== 'ready' || file.file === undefined)
|
|
920
|
+
continue;
|
|
921
|
+
this.runner?.enqueue(file.key, file.file);
|
|
922
|
+
}
|
|
923
|
+
}
|
|
924
|
+
onPicked(event) {
|
|
925
|
+
const element = event.target;
|
|
926
|
+
void this.take([...(element.files ?? [])], 'select', event);
|
|
927
|
+
/* Emptied so that choosing the same file twice is two selections rather
|
|
928
|
+
than one silent nothing. */
|
|
929
|
+
element.value = '';
|
|
930
|
+
}
|
|
931
|
+
/* ── The drag ───────────────────────────────────────────────────────── */
|
|
932
|
+
judge(transferred) {
|
|
933
|
+
const items = [...(transferred?.items ?? [])].filter((item) => item.kind === 'file');
|
|
934
|
+
const max = this.maxFiles();
|
|
935
|
+
if (items.length === 0)
|
|
936
|
+
return 'invalid';
|
|
937
|
+
if (!this.multiple() && items.length > 1)
|
|
938
|
+
return 'invalid';
|
|
939
|
+
if (max !== undefined && items.length > max)
|
|
940
|
+
return 'invalid';
|
|
941
|
+
const accept = this.accept();
|
|
942
|
+
if (accept === undefined || accept.trim() === '')
|
|
943
|
+
return 'target';
|
|
944
|
+
return items.some((item) => item.type !== '' && !matchesTypeOnly(item.type, accept))
|
|
945
|
+
? 'invalid'
|
|
946
|
+
: 'target';
|
|
947
|
+
}
|
|
948
|
+
onDragEnter(event) {
|
|
949
|
+
if (!(this.allowDrop() ?? this.defaults.allowDrop) || !this.accepting())
|
|
950
|
+
return;
|
|
951
|
+
/*
|
|
952
|
+
* `dragenter` and `dragleave` fire for every element the pointer crosses, so
|
|
953
|
+
* a drag moving onto a child fires `dragleave` on the region. Clearing the
|
|
954
|
+
* state there makes the highlight flicker across the whole zone.
|
|
955
|
+
*/
|
|
956
|
+
this.depth += 1;
|
|
957
|
+
this.dragging.set(true);
|
|
958
|
+
this.verdict.set(this.judge(event.dataTransfer));
|
|
959
|
+
}
|
|
960
|
+
onDragLeave() {
|
|
961
|
+
if (!(this.allowDrop() ?? this.defaults.allowDrop) || !this.accepting())
|
|
962
|
+
return;
|
|
963
|
+
this.depth -= 1;
|
|
964
|
+
if (this.depth > 0)
|
|
965
|
+
return;
|
|
966
|
+
this.depth = 0;
|
|
967
|
+
this.dragging.set(false);
|
|
968
|
+
this.verdict.set(null);
|
|
969
|
+
}
|
|
970
|
+
onDragOver(event) {
|
|
971
|
+
if (!(this.allowDrop() ?? this.defaults.allowDrop) || !this.accepting())
|
|
972
|
+
return;
|
|
973
|
+
/* The default action of `dragover` is to refuse the drop. */
|
|
974
|
+
event.preventDefault();
|
|
975
|
+
}
|
|
976
|
+
onDrop(event) {
|
|
977
|
+
if (!(this.allowDrop() ?? this.defaults.allowDrop) || !this.accepting())
|
|
978
|
+
return;
|
|
979
|
+
event.preventDefault();
|
|
980
|
+
this.depth = 0;
|
|
981
|
+
this.dragging.set(false);
|
|
982
|
+
this.verdict.set(null);
|
|
983
|
+
void this.take([...(event.dataTransfer?.files ?? [])], 'pointer', event);
|
|
984
|
+
}
|
|
985
|
+
onPaste(event) {
|
|
986
|
+
if (!(this.allowPaste() ?? this.defaults.allowPaste) || !this.accepting())
|
|
987
|
+
return;
|
|
988
|
+
const pasted = [...(event.clipboardData?.files ?? [])];
|
|
989
|
+
if (pasted.length > 0)
|
|
990
|
+
void this.take(pasted, 'keyboard', event);
|
|
991
|
+
}
|
|
992
|
+
onZoneClick(event) {
|
|
993
|
+
if (!(this.clickToBrowse() ?? this.defaults.clickToBrowse) || !this.accepting())
|
|
994
|
+
return;
|
|
995
|
+
if (event.target.closest('[data-part="trigger"]'))
|
|
996
|
+
return;
|
|
997
|
+
this.host.querySelector('[data-part="trigger"]')?.click();
|
|
998
|
+
}
|
|
999
|
+
/* ── One row ────────────────────────────────────────────────────────── */
|
|
1000
|
+
stem(file) {
|
|
1001
|
+
return splitName(file.name).stem;
|
|
1002
|
+
}
|
|
1003
|
+
extension(file) {
|
|
1004
|
+
return splitName(file.name).extension;
|
|
1005
|
+
}
|
|
1006
|
+
extensionLabel(file) {
|
|
1007
|
+
const extension = splitName(file.name).extension;
|
|
1008
|
+
return extension === '' ? this.t('noExtension') : extension.slice(1).toUpperCase();
|
|
1009
|
+
}
|
|
1010
|
+
url(file) {
|
|
1011
|
+
return this.urls().get(file.key);
|
|
1012
|
+
}
|
|
1013
|
+
openable(file) {
|
|
1014
|
+
return this.resolvedView() !== 'none' && this.url(file) !== undefined && isViewable(file);
|
|
1015
|
+
}
|
|
1016
|
+
showBar(file) {
|
|
1017
|
+
return ['uploading', 'paused', 'stalled'].includes(file.status);
|
|
1018
|
+
}
|
|
1019
|
+
percent(file) {
|
|
1020
|
+
return file.total !== undefined && file.total > 0 ? (file.loaded / file.total) * 100 : null;
|
|
1021
|
+
}
|
|
1022
|
+
statusText(file) {
|
|
1023
|
+
const word = this.t(file.status);
|
|
1024
|
+
const percent = this.percent(file);
|
|
1025
|
+
return this.showBar(file) && percent !== null ? `${word} · ${Math.round(percent)}%` : word;
|
|
1026
|
+
}
|
|
1027
|
+
/** The status word for a failure; for a refusal, the catalog's sentence for its reason. */
|
|
1028
|
+
messageText(file) {
|
|
1029
|
+
if (file.status !== 'rejected')
|
|
1030
|
+
return this.t('error');
|
|
1031
|
+
return file.reason === 'size'
|
|
1032
|
+
? this.t('rejection.size', { size: this.formatters().bytes(file.size) })
|
|
1033
|
+
: this.t(`rejection.${file.reason ?? 'custom'}`);
|
|
1034
|
+
}
|
|
1035
|
+
actions(file) {
|
|
1036
|
+
if (this.readOnly())
|
|
1037
|
+
return [];
|
|
1038
|
+
/* The control's name is the action's message holding the file's name, so a
|
|
1039
|
+
language writes its own order. */
|
|
1040
|
+
const named = { name: file.name };
|
|
1041
|
+
/* Five marks chosen against each other, because they appear together on one
|
|
1042
|
+
row: a cross means *stop this* and a bin means *take it away*. */
|
|
1043
|
+
const start = {
|
|
1044
|
+
part: 'start',
|
|
1045
|
+
glyph: 'play',
|
|
1046
|
+
label: this.t('start', named),
|
|
1047
|
+
action: 'start',
|
|
1048
|
+
};
|
|
1049
|
+
const resume = {
|
|
1050
|
+
part: 'start',
|
|
1051
|
+
glyph: 'play',
|
|
1052
|
+
label: this.t('resume', named),
|
|
1053
|
+
action: 'resume',
|
|
1054
|
+
};
|
|
1055
|
+
const pause = {
|
|
1056
|
+
part: 'pause',
|
|
1057
|
+
glyph: 'pause',
|
|
1058
|
+
label: this.t('pause', named),
|
|
1059
|
+
action: 'pause',
|
|
1060
|
+
};
|
|
1061
|
+
const retry = {
|
|
1062
|
+
part: 'retry',
|
|
1063
|
+
glyph: 'rotate-ccw',
|
|
1064
|
+
label: this.t('retry', named),
|
|
1065
|
+
action: 'retry',
|
|
1066
|
+
};
|
|
1067
|
+
const cancel = {
|
|
1068
|
+
part: 'cancel',
|
|
1069
|
+
glyph: 'x',
|
|
1070
|
+
label: this.t('cancel', named),
|
|
1071
|
+
action: 'cancel',
|
|
1072
|
+
};
|
|
1073
|
+
const remove = {
|
|
1074
|
+
part: 'remove',
|
|
1075
|
+
glyph: 'trash',
|
|
1076
|
+
label: this.t('remove', named),
|
|
1077
|
+
action: 'remove',
|
|
1078
|
+
};
|
|
1079
|
+
switch (file.status) {
|
|
1080
|
+
case 'ready':
|
|
1081
|
+
return [start, remove];
|
|
1082
|
+
case 'queued':
|
|
1083
|
+
return [cancel, remove];
|
|
1084
|
+
case 'uploading':
|
|
1085
|
+
return this.pausable() ? [pause, cancel] : [cancel];
|
|
1086
|
+
case 'paused':
|
|
1087
|
+
return [resume, cancel];
|
|
1088
|
+
case 'stalled':
|
|
1089
|
+
return [cancel];
|
|
1090
|
+
case 'error':
|
|
1091
|
+
return [retry, remove];
|
|
1092
|
+
case 'canceled':
|
|
1093
|
+
return [start, remove];
|
|
1094
|
+
default:
|
|
1095
|
+
return [remove];
|
|
1096
|
+
}
|
|
1097
|
+
}
|
|
1098
|
+
act(file, action, source) {
|
|
1099
|
+
if (action === 'remove') {
|
|
1100
|
+
this.runner?.remove(file.key);
|
|
1101
|
+
this.request(this.files().filter((entry) => entry.key !== file.key), 'remove', source);
|
|
1102
|
+
if (this.viewing() === file.key)
|
|
1103
|
+
this.setViewing(null, 'dismiss', source);
|
|
1104
|
+
this.onTouchedFn();
|
|
1105
|
+
return;
|
|
1106
|
+
}
|
|
1107
|
+
if (file.file === undefined || this.runner === null)
|
|
1108
|
+
return;
|
|
1109
|
+
if (action === 'start' || action === 'retry')
|
|
1110
|
+
this.runner.start(file.key, file.file);
|
|
1111
|
+
else if (action === 'pause')
|
|
1112
|
+
this.runner.pause(file.key);
|
|
1113
|
+
else if (action === 'resume')
|
|
1114
|
+
this.runner.resume(file.key);
|
|
1115
|
+
else
|
|
1116
|
+
this.runner.cancel(file.key);
|
|
1117
|
+
}
|
|
1118
|
+
clear(source) {
|
|
1119
|
+
for (const file of this.files())
|
|
1120
|
+
this.runner?.remove(file.key);
|
|
1121
|
+
this.request([], 'clear', source);
|
|
1122
|
+
}
|
|
1123
|
+
open(file, source) {
|
|
1124
|
+
this.setViewing(file.key, 'pointer', source);
|
|
1125
|
+
}
|
|
1126
|
+
setViewing(key, reason, source) {
|
|
1127
|
+
const state = createControllable({
|
|
1128
|
+
controlled: undefined,
|
|
1129
|
+
initial: this.viewing(),
|
|
1130
|
+
onRequest: (change) => this.viewingRequest.emit(change),
|
|
1131
|
+
});
|
|
1132
|
+
state.request(key, reason, source);
|
|
1133
|
+
this.viewing.set(key);
|
|
1134
|
+
}
|
|
1135
|
+
/* ── The five a template cannot write ───────────────────────────────── */
|
|
1136
|
+
browse() {
|
|
1137
|
+
this.host.querySelector('[data-part="input"]')?.click();
|
|
1138
|
+
}
|
|
1139
|
+
upload() {
|
|
1140
|
+
for (const file of this.files()) {
|
|
1141
|
+
if (file.status !== 'ready' || file.file === undefined)
|
|
1142
|
+
continue;
|
|
1143
|
+
this.runner?.start(file.key, file.file);
|
|
1144
|
+
}
|
|
1145
|
+
}
|
|
1146
|
+
retryAll() {
|
|
1147
|
+
for (const file of this.files()) {
|
|
1148
|
+
if (file.status !== 'error' || file.file === undefined)
|
|
1149
|
+
continue;
|
|
1150
|
+
this.runner?.start(file.key, file.file);
|
|
1151
|
+
}
|
|
1152
|
+
}
|
|
1153
|
+
cancelAll() {
|
|
1154
|
+
for (const file of this.files())
|
|
1155
|
+
this.runner?.cancel(file.key);
|
|
1156
|
+
}
|
|
1157
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlUpload, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1158
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlUpload, isStandalone: true, selector: "div[slUpload]", inputs: { files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: false, transformFunction: null }, viewing: { classPropertyName: "viewing", publicName: "viewing", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, directory: { classPropertyName: "directory", publicName: "directory", isSignal: true, isRequired: false, transformFunction: null }, capture: { classPropertyName: "capture", publicName: "capture", isSignal: true, isRequired: false, transformFunction: null }, maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, minFiles: { classPropertyName: "minFiles", publicName: "minFiles", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, minSize: { classPropertyName: "minSize", publicName: "minSize", isSignal: true, isRequired: false, transformFunction: null }, maxTotalSize: { classPropertyName: "maxTotalSize", publicName: "maxTotalSize", isSignal: true, isRequired: false, transformFunction: null }, fileValidator: { classPropertyName: "fileValidator", publicName: "validate", isSignal: true, isRequired: false, transformFunction: null }, transform: { classPropertyName: "transform", publicName: "transform", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, preview: { classPropertyName: "preview", publicName: "preview", isSignal: true, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, duplicates: { classPropertyName: "duplicates", publicName: "duplicates", isSignal: true, isRequired: false, transformFunction: null }, clickToBrowse: { classPropertyName: "clickToBrowse", publicName: "clickToBrowse", isSignal: true, isRequired: false, transformFunction: null }, allowDrop: { classPropertyName: "allowDrop", publicName: "allowDrop", isSignal: true, isRequired: false, transformFunction: null }, allowPaste: { classPropertyName: "allowPaste", publicName: "allowPaste", isSignal: true, isRequired: false, transformFunction: null }, preventDocumentDrop: { classPropertyName: "preventDocumentDrop", publicName: "preventDocumentDrop", isSignal: true, isRequired: false, transformFunction: null }, autoUpload: { classPropertyName: "autoUpload", publicName: "autoUpload", isSignal: true, isRequired: false, transformFunction: null }, pendingBlocksSubmit: { classPropertyName: "pendingBlocksSubmit", publicName: "pendingBlocksSubmit", isSignal: true, isRequired: false, transformFunction: null }, adapter: { classPropertyName: "adapter", publicName: "adapter", isSignal: true, isRequired: false, transformFunction: null }, concurrency: { classPropertyName: "concurrency", publicName: "concurrency", isSignal: true, isRequired: false, transformFunction: null }, retries: { classPropertyName: "retries", publicName: "retries", isSignal: true, isRequired: false, transformFunction: null }, retryDelay: { classPropertyName: "retryDelay", publicName: "retryDelay", isSignal: true, isRequired: false, transformFunction: null }, stallAfter: { classPropertyName: "stallAfter", publicName: "stallAfter", isSignal: true, isRequired: false, transformFunction: null }, maxRows: { classPropertyName: "maxRows", publicName: "maxRows", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, fileKey: { classPropertyName: "fileKey", publicName: "fileKey", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { files: "filesChange", viewing: "viewingChange", filesChange2: "filesRequest", viewingRequest: "viewingRequest", reject: "reject" }, host: { attributes: { "data-ui": "upload", "data-part": "root" }, properties: { "attr.data-variant": "resolvedVariant()", "attr.data-layout": "resolvedLayout()", "attr.data-size": "resolvedSize()", "attr.data-disabled": "resolvedDisabled() ? '' : null", "attr.data-readonly": "readOnly() ? '' : null", "attr.data-invalid": "invalid() ? '' : null", "attr.data-required": "required() ? '' : null", "attr.data-loading": "summary().pending ? '' : null", "attr.data-complete": "summary().complete ? '' : null", "attr.data-dragging": "dragging() || documentDrag() ? '' : null" } }, providers: [
|
|
1159
|
+
{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SlUpload), multi: true },
|
|
1160
|
+
{ provide: NG_VALIDATORS, useExisting: forwardRef(() => SlUpload), multi: true },
|
|
1161
|
+
], exportAs: ["slUpload"], ngImport: i0, template: `
|
|
1162
|
+
@if (label() && !insideField()) {
|
|
1163
|
+
<span data-part="label">{{ label() }}</span>
|
|
1164
|
+
}
|
|
1165
|
+
@if (description() && !insideField()) {
|
|
1166
|
+
<p [id]="descriptionId" data-part="description">{{ description() }}</p>
|
|
1167
|
+
}
|
|
1168
|
+
|
|
1169
|
+
@if (resolvedVariant() === 'button') {
|
|
1170
|
+
<ng-container [ngTemplateOutlet]="triggerTemplate" />
|
|
1171
|
+
} @else {
|
|
1172
|
+
<div
|
|
1173
|
+
(dragenter)="onDragEnter($event)"
|
|
1174
|
+
(dragleave)="onDragLeave()"
|
|
1175
|
+
(dragover)="onDragOver($event)"
|
|
1176
|
+
(drop)="onDrop($event)"
|
|
1177
|
+
(paste)="onPaste($event)"
|
|
1178
|
+
(click)="onZoneClick($event)"
|
|
1179
|
+
[attr.data-drop-target]="verdict() === 'target' ? '' : null"
|
|
1180
|
+
[attr.data-drop-invalid]="verdict() === 'invalid' ? '' : null"
|
|
1181
|
+
[attr.data-browsable]="browsable() ? '' : null"
|
|
1182
|
+
data-part="dropzone"
|
|
1183
|
+
>
|
|
1184
|
+
<!-- The region carries the mark, so the trigger inside it does not. -->
|
|
1185
|
+
@if (resolvedVariant() === 'dropzone') {
|
|
1186
|
+
<span slIcon><svg slGlyph name="upload"></svg></span>
|
|
1187
|
+
{{ t('dropzone') }}
|
|
1188
|
+
}
|
|
1189
|
+
<ng-container [ngTemplateOutlet]="triggerTemplate" />
|
|
1190
|
+
@if (resolvedVariant() === 'field') {
|
|
1191
|
+
<span data-part="meta">{{ fieldSummary() }}</span>
|
|
1192
|
+
}
|
|
1193
|
+
</div>
|
|
1194
|
+
}
|
|
1195
|
+
|
|
1196
|
+
@if (files().length > 1) {
|
|
1197
|
+
<div data-part="summary">
|
|
1198
|
+
<span>{{ summaryText() }}</span>
|
|
1199
|
+
@if (!readOnly()) {
|
|
1200
|
+
<button (click)="clear($event)" data-part="clear" type="button">
|
|
1201
|
+
{{ t('clear') }}
|
|
1202
|
+
</button>
|
|
1203
|
+
}
|
|
1204
|
+
</div>
|
|
1205
|
+
}
|
|
1206
|
+
|
|
1207
|
+
@if (showList()) {
|
|
1208
|
+
<ul [style.--slotted-upload-visible-rows]="visibleRows()" data-part="list">
|
|
1209
|
+
@for (file of files(); track file.key) {
|
|
1210
|
+
<li [attr.data-status]="file.status" data-part="item">
|
|
1211
|
+
@if (resolvedPreview() !== 'none' || resolvedLayout() === 'grid') {
|
|
1212
|
+
<span
|
|
1213
|
+
[attr.data-extension]="extensionLabel(file)"
|
|
1214
|
+
[attr.data-kind]="file.kind"
|
|
1215
|
+
data-part="preview"
|
|
1216
|
+
>
|
|
1217
|
+
@if (url(file) && file.type.startsWith('image/')) {
|
|
1218
|
+
<img [src]="url(file)" alt="" />
|
|
1219
|
+
} @else {
|
|
1220
|
+
<span slIcon><svg slGlyph [name]="kindGlyph[file.kind]"></svg></span>
|
|
1221
|
+
}
|
|
1222
|
+
</span>
|
|
1223
|
+
}
|
|
1224
|
+
|
|
1225
|
+
<div data-part="body">
|
|
1226
|
+
@if (openable(file)) {
|
|
1227
|
+
<button (click)="open(file, $event)" data-part="filename" dir="auto" type="button">
|
|
1228
|
+
<span data-part="name">{{ stem(file) }}</span>
|
|
1229
|
+
@if (extension(file)) {
|
|
1230
|
+
<span data-part="extension">{{ extension(file) }}</span>
|
|
1231
|
+
}
|
|
1232
|
+
</button>
|
|
1233
|
+
} @else {
|
|
1234
|
+
<span data-part="filename" dir="auto">
|
|
1235
|
+
<span data-part="name">{{ stem(file) }}</span>
|
|
1236
|
+
@if (extension(file)) {
|
|
1237
|
+
<span data-part="extension">{{ extension(file) }}</span>
|
|
1238
|
+
}
|
|
1239
|
+
</span>
|
|
1240
|
+
}
|
|
1241
|
+
<div data-part="detail">
|
|
1242
|
+
<span data-part="meta">{{ formatters().bytes(file.size) }}</span>
|
|
1243
|
+
<span data-part="status">{{ statusText(file) }}</span>
|
|
1244
|
+
</div>
|
|
1245
|
+
</div>
|
|
1246
|
+
|
|
1247
|
+
<span data-part="actions">
|
|
1248
|
+
@for (action of actions(file); track action.part) {
|
|
1249
|
+
<button
|
|
1250
|
+
(click)="act(file, action.action, $event)"
|
|
1251
|
+
[attr.aria-label]="action.label"
|
|
1252
|
+
[attr.data-part]="action.part"
|
|
1253
|
+
type="button"
|
|
1254
|
+
>
|
|
1255
|
+
<span slIcon><svg slGlyph [name]="action.glyph"></svg></span>
|
|
1256
|
+
</button>
|
|
1257
|
+
}
|
|
1258
|
+
</span>
|
|
1259
|
+
|
|
1260
|
+
@if (showBar(file)) {
|
|
1261
|
+
<div data-part="progress">
|
|
1262
|
+
<div
|
|
1263
|
+
[tone]="file.status === 'uploading' ? 'accent' : 'warning'"
|
|
1264
|
+
[value]="percent(file)"
|
|
1265
|
+
decorative
|
|
1266
|
+
size="sm"
|
|
1267
|
+
slProgressBar
|
|
1268
|
+
></div>
|
|
1269
|
+
</div>
|
|
1270
|
+
}
|
|
1271
|
+
|
|
1272
|
+
@if (file.status === 'rejected' || file.status === 'error') {
|
|
1273
|
+
<p data-part="message">{{ messageText(file) }}</p>
|
|
1274
|
+
}
|
|
1275
|
+
</li>
|
|
1276
|
+
}
|
|
1277
|
+
</ul>
|
|
1278
|
+
}
|
|
1279
|
+
|
|
1280
|
+
<ng-content />
|
|
1281
|
+
|
|
1282
|
+
<div
|
|
1283
|
+
(viewingChange)="setViewing($event.key, $event.reason, $event.source)"
|
|
1284
|
+
[files]="files()"
|
|
1285
|
+
[locale]="resolvedLocale()"
|
|
1286
|
+
[messages]="messages()"
|
|
1287
|
+
[size]="resolvedSize()"
|
|
1288
|
+
[urls]="urls()"
|
|
1289
|
+
[viewing]="resolvedView() === 'none' ? null : viewing()"
|
|
1290
|
+
slUploadViewer
|
|
1291
|
+
></div>
|
|
1292
|
+
|
|
1293
|
+
<ng-template #triggerTemplate>
|
|
1294
|
+
<label #trigger data-part="trigger">
|
|
1295
|
+
@if (resolvedVariant() !== 'dropzone') {
|
|
1296
|
+
<span slIcon><svg slGlyph name="upload"></svg></span>
|
|
1297
|
+
}
|
|
1298
|
+
<input
|
|
1299
|
+
#control
|
|
1300
|
+
(change)="onPicked($event)"
|
|
1301
|
+
[attr.accept]="accept() ?? null"
|
|
1302
|
+
[attr.aria-describedby]="describedBy()"
|
|
1303
|
+
[attr.capture]="capture() ?? null"
|
|
1304
|
+
[attr.disabled]="resolvedDisabled() ? '' : null"
|
|
1305
|
+
[attr.id]="controlId"
|
|
1306
|
+
[attr.multiple]="multiple() ? '' : null"
|
|
1307
|
+
[attr.name]="name() ?? null"
|
|
1308
|
+
[attr.required]="required() ? '' : null"
|
|
1309
|
+
[attr.webkitdirectory]="directory() ? '' : null"
|
|
1310
|
+
data-part="input"
|
|
1311
|
+
type="file"
|
|
1312
|
+
/>
|
|
1313
|
+
{{ t('trigger') }}
|
|
1314
|
+
</label>
|
|
1315
|
+
</ng-template>
|
|
1316
|
+
`, isInline: true, styles: ["@layer slotted.components{[data-ui=upload][data-part=root],[data-ui=upload][data-part=viewer]{--_font-size: var(--slotted-control-font-size-md, 13px);--_glyph-size: var(--slotted-control-icon-size-md, 16px);--_inner-size: var(--slotted-control-inner-size-md, 24px);--_control-height: var(--slotted-control-height-md, 34px);--_control-inset: var(--slotted-control-padding-inline-md, 13px);--_gap: var(--slotted-control-gap-md, 8px);--_preview-size: var(--slotted-upload-preview-size, calc(2 * var(--_glyph-size)));--_state-hover: color-mix( in oklab, currentcolor var(--slotted-upload-state-layer-hover, 8%), transparent );--_state-active: color-mix( in oklab, currentcolor var(--slotted-upload-state-layer-active, 14%), transparent );--_section-gap: var(--slotted-upload-section-gap, var(--slotted-space-5, .75rem));--_item-gap: var(--slotted-upload-item-gap, var(--slotted-space-4, .5rem));--_line-gap: var(--slotted-upload-line-gap, var(--slotted-space-1, .125rem));--_item-inset-block: var(--slotted-upload-item-padding-block, var(--slotted-space-4, .5rem));--_item-inset-inline: var( --slotted-upload-item-padding-inline, var(--slotted-space-5, .75rem) );--_radius: var(--slotted-upload-radius, var(--slotted-radius-md, 6px));--_item-radius: var(--slotted-upload-item-radius, var(--slotted-radius-md, 6px));--_border-width: var(--slotted-upload-border-width, var(--slotted-border-width-thin, 1px));--_zone-inset-block: var(--slotted-upload-zone-padding-block, var(--slotted-space-9, 2rem));--_zone-inset-inline: var(--slotted-upload-zone-padding-inline, var(--slotted-space-6, 1rem));--_zone-border-width: var( --slotted-upload-zone-border-width, var(--slotted-border-width-medium, 1.5px) );--_zone-edge: var(--slotted-upload-zone-border-color, var(--slotted-border-strong));--_zone-ground: var(--slotted-upload-zone-background, var(--slotted-surface-sunken));--_zone-glyph-size: var(--slotted-upload-zone-icon-size, calc(1.5 * var(--_glyph-size)));--_action-glyph-size: max(var(--slotted-upload-icon-size-min, 14px), var(--_glyph-size));--_action-size: var( --slotted-upload-action-size, max( var(--slotted-target-min, 24px), min( calc(var(--_action-glyph-size) + 2 * var(--slotted-space-2, .25rem)), var(--_inner-size) ) ) );--_status-text: var(--slotted-text-muted);--_item-surface: var(--slotted-upload-item-background, var(--slotted-surface));--_item-border: var(--slotted-upload-item-border-color, var(--slotted-border-subtle));--_kind-tile: var(--slotted-upload-kind-other);--_leading: round(up, calc(1em * var(--slotted-line-height-md, 1.5)), 1px);color:var(--slotted-text);font-family:var(--slotted-upload-font-family, var(--slotted-control-font-family));font-size:var(--_font-size);line-height:var(--_leading)}[data-ui=upload][data-part=root]{container-name:slotted-upload;container-type:inline-size;inline-size:100%;display:flex;flex-direction:column;gap:var(--_section-gap)}[data-ui=upload][data-size=sm]{--_font-size: var(--slotted-control-font-size-sm, 12px);--_glyph-size: var(--slotted-control-icon-size-sm, 14px);--_inner-size: var(--slotted-control-inner-size-sm, 22px);--_control-height: var(--slotted-control-height-sm, 30px);--_control-inset: var(--slotted-control-padding-inline-sm, 10px);--_gap: var(--slotted-control-gap-sm, 6px)}[data-ui=upload][data-size=lg]{--_font-size: var(--slotted-control-font-size-lg, 14px);--_glyph-size: var(--slotted-control-icon-size-lg, 18px);--_inner-size: var(--slotted-control-inner-size-lg, 28px);--_control-height: var(--slotted-control-height-lg, 38px);--_control-inset: var(--slotted-control-padding-inline-lg, 16px);--_gap: var(--slotted-control-gap-lg, 8px)}[data-ui=upload] [data-part=label]{color:var(--slotted-text);flex:none;font-weight:var(--slotted-upload-label-font-weight, var(--slotted-font-weight-medium, 500))}[data-ui=upload] [data-part=description]{color:var(--slotted-text-muted);flex:none;margin:0}[data-ui=upload] [data-part=dropzone]{--_zone-border-color: var(--_zone-edge);--_zone-surface: var(--_zone-ground);align-items:center;background-color:var(--_zone-surface);border:var(--_zone-border-width) dashed var(--_zone-border-color);border-radius:var(--_radius);display:flex;flex:none;flex-direction:column;gap:var(--_gap);padding-block:var(--_zone-inset-block);padding-inline:var(--_zone-inset-inline);text-align:center;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),border-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=upload] [data-part=dropzone]>[data-ui=icon]{--slotted-icon-size: var(--_zone-glyph-size);color:var(--slotted-text-muted)}[data-ui=upload] [data-part=dropzone][data-drop-target]{--_zone-border-color: var(--slotted-tone-accent-border);--_zone-surface: var(--slotted-tone-accent-surface)}[data-ui=upload] [data-part=dropzone][data-drop-invalid]{--_zone-border-color: var(--slotted-tone-danger-border);--_zone-surface: var(--slotted-tone-danger-surface)}[data-ui=upload] [data-part=dropzone][data-browsable]{cursor:pointer}[data-ui=upload]:not([data-disabled]) [data-part=dropzone][data-browsable]:not([data-drop-target],[data-drop-invalid]):hover{--_zone-surface: color-mix( in oklab, var(--slotted-text) var(--slotted-upload-zone-state-layer-hover, 4%), var(--_zone-ground) )}[data-ui=upload]:not([data-disabled]) [data-part=dropzone][data-browsable]:not([data-drop-target],[data-drop-invalid]):active{--_zone-surface: color-mix( in oklab, var(--slotted-text) var(--slotted-upload-zone-state-layer-active, 8%), var(--_zone-ground) )}[data-ui=upload]:not([data-disabled],[data-invalid]) [data-part=dropzone][data-browsable]:not([data-drop-target],[data-drop-invalid]):is(:hover,:active){--_zone-border-color: var(--slotted-text-muted)}[data-ui=upload]:not([data-disabled]) [data-part=dropzone][data-browsable]:not([data-drop-target],[data-drop-invalid]):has([data-part=trigger]:hover){--_zone-border-color: var(--_zone-edge);--_zone-surface: var(--_zone-ground)}[data-ui=upload][data-disabled][data-part=root]{--_zone-edge: var(--slotted-disabled-border);--_zone-ground: var(--slotted-disabled-background)}[data-ui=upload][data-disabled] [data-part=dropzone]{color:var(--slotted-disabled-foreground)}[data-ui=upload][data-invalid][data-part=root]{--_zone-edge: var(--slotted-tone-danger-border)}[data-ui=upload] [data-part=trigger]{align-items:center;background-color:var(--slotted-upload-trigger-background, var(--slotted-surface));block-size:var(--_control-height);border:var(--slotted-control-border-width, 1px) solid var(--slotted-control-border-color);border-radius:var(--slotted-control-radius, 4px);box-shadow:var(--slotted-control-shadow);color:var(--slotted-text);cursor:pointer;display:inline-flex;flex:none;font:inherit;font-weight:var(--slotted-control-font-weight, 600);gap:var(--_gap);justify-content:center;padding-inline:var(--_control-inset);position:relative;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),border-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),translate var(--slotted-duration-instant) var(--slotted-control-transition-easing);white-space:nowrap}[data-ui=upload] [data-part=trigger]>[data-ui=icon]{--slotted-icon-size: var(--_glyph-size)}[data-ui=upload]:not([data-disabled]) [data-part=trigger]:hover{background-color:var(--slotted-tone-secondary-subtle-hover)}[data-ui=upload]:not([data-disabled]) [data-part=trigger]:active{background-color:var(--slotted-tone-secondary-subtle-active);translate:0 var(--slotted-border-width-thin, 1px)}[data-ui=upload][data-disabled] [data-part=trigger]{background-color:var(--slotted-disabled-background);border-color:var(--slotted-disabled-border);box-shadow:none;color:var(--slotted-disabled-foreground);cursor:default}[data-ui=upload] [data-part=trigger]:has(:focus-visible){outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=upload][data-invalid] [data-part=trigger]{--slotted-focus-ring-color: var(--slotted-focus-ring-color-invalid);border-color:var(--slotted-tone-danger-border);--_invalid-edge-width: var(--slotted-control-invalid-edge-width, 1px);box-shadow:inset 0 0 0 var(--_invalid-edge-width) var(--slotted-tone-danger-border)}[data-ui=upload] [data-part=input]{block-size:1px;border:0;clip-path:inset(50%);inline-size:1px;inset-block-start:50%;inset-inline-start:50%;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap}[data-ui=upload] [data-part=input]:focus-visible{outline:none}[data-ui=upload] [data-part=summary]{align-items:center;color:var(--slotted-text-muted);display:flex;flex:none;gap:var(--_gap);justify-content:space-between}[data-ui=upload] [data-part=clear]{appearance:none;flex:none;white-space:nowrap;background-color:transparent;border:0;border-radius:var(--slotted-control-radius, 4px);color:inherit;cursor:pointer;font:inherit;padding-block:var(--slotted-space-1, .125rem);padding-inline:var(--slotted-space-3, .375rem);text-decoration-line:underline;text-underline-offset:.2em;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=upload] [data-part=clear]:enabled:hover{background-color:var(--_state-hover)}[data-ui=upload] [data-part=clear]:enabled:active{background-color:var(--_state-active)}[data-ui=upload] [data-part=clear]:disabled{color:var(--slotted-disabled-foreground);cursor:default}[data-ui=upload] [data-part=clear]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=upload] [data-part=list]{--_row-block-size: calc( max(var(--_preview-size), 2lh) + 2 * var(--_item-inset-block) + 2 * var(--_border-width) + var(--_item-gap) );display:flex;flex-direction:column;gap:var(--_item-gap);list-style:none;margin:0;flex:1 1 auto;min-block-size:var(--_row-block-size);max-block-size:calc(var(--slotted-upload-visible-rows, 6) * var(--_row-block-size));overflow-y:auto;padding:0}[data-ui=upload] [data-part=item]{align-items:center;flex:none;background-color:var(--_item-surface);border:var(--_border-width) solid var(--_item-border);border-radius:var(--_item-radius);column-gap:var(--_gap);display:grid;grid-template-areas:\"preview body actions\" \"message message message\";grid-template-columns:auto minmax(0,1fr) auto;overflow:hidden;padding-block:var(--_item-inset-block);padding-inline:var(--_item-inset-inline);position:relative;row-gap:var(--_line-gap);transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),border-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),opacity var(--slotted-duration-medium) var(--slotted-easing-enter),translate var(--slotted-duration-medium) var(--slotted-easing-enter)}@starting-style{[data-ui=upload] [data-part=item]{opacity:0;translate:0 calc(-1 * var(--slotted-space-2, .25rem))}}[data-ui=upload] [data-part=item][data-status=success]{--_status-text: var(--slotted-tone-success-text)}[data-ui=upload] [data-part=item][data-status=ready]{border-style:dashed}[data-ui=upload] [data-part=item][data-status=paused],[data-ui=upload] [data-part=item][data-status=stalled]{--_status-text: var(--slotted-tone-warning-text)}[data-ui=upload] [data-part=item][data-status=rejected],[data-ui=upload] [data-part=item][data-status=error]{--_status-text: var(--slotted-tone-danger-text);--_item-surface: var(--slotted-tone-danger-surface);--_item-border: var(--slotted-tone-danger-border)}[data-ui=upload] [data-part=item][data-status=canceled]{--_status-text: var(--slotted-text-muted)}[data-ui=upload][data-disabled] [data-part=item]{color:var(--slotted-disabled-foreground)}[data-ui=upload] [data-part=preview]{align-items:center;background-color:var(--_kind-tile);block-size:var(--_preview-size);border-radius:var(--slotted-upload-preview-radius, var(--slotted-radius-sm, 4px));color:var(--slotted-upload-kind-foreground);display:inline-flex;flex-direction:column;grid-area:preview;inline-size:var(--_preview-size);justify-content:center;overflow:hidden}[data-ui=upload] [data-part=preview]>img{block-size:100%;inline-size:100%;object-fit:cover}[data-ui=upload] [data-part=preview]>[data-ui=icon]{--slotted-icon-size: var(--_glyph-size)}[data-ui=upload] [data-part=preview][data-kind=pdf]{--_kind-tile: var(--slotted-upload-kind-pdf)}[data-ui=upload] [data-part=preview][data-kind=document]{--_kind-tile: var(--slotted-upload-kind-document)}[data-ui=upload] [data-part=preview][data-kind=spreadsheet]{--_kind-tile: var(--slotted-upload-kind-spreadsheet)}[data-ui=upload] [data-part=preview][data-kind=presentation]{--_kind-tile: var(--slotted-upload-kind-presentation)}[data-ui=upload] [data-part=preview][data-kind=image]{--_kind-tile: var(--slotted-upload-kind-image)}[data-ui=upload] [data-part=preview][data-kind=video]{--_kind-tile: var(--slotted-upload-kind-video)}[data-ui=upload] [data-part=preview][data-kind=audio]{--_kind-tile: var(--slotted-upload-kind-audio)}[data-ui=upload] [data-part=preview][data-kind=archive]{--_kind-tile: var(--slotted-upload-kind-archive)}[data-ui=upload] [data-part=item]>[data-part=body]{display:flex;flex-direction:column;gap:var(--_line-gap);grid-area:body;min-inline-size:0}[data-ui=upload] [data-part=filename]{display:flex;font-weight:var(--slotted-upload-name-font-weight, var(--slotted-font-weight-medium, 500));min-inline-size:0;unicode-bidi:isolate}[data-ui=upload] button[data-part=filename]{appearance:none;background:none;border:0;color:inherit;cursor:pointer;font-family:inherit;font-size:inherit;line-height:inherit;padding:0;text-align:start;transition:translate var(--slotted-duration-instant) var(--slotted-control-transition-easing)}[data-ui=upload] button[data-part=filename]:enabled:hover{text-decoration-line:underline;text-underline-offset:.2em}[data-ui=upload] button[data-part=filename]:enabled:active{text-decoration-line:underline;text-underline-offset:.2em;translate:0 var(--slotted-border-width-thin, 1px)}[data-ui=upload] button[data-part=filename]:focus-visible{border-radius:var(--slotted-control-radius, 4px);outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=upload][data-layout=grid] button[data-part=preview]{appearance:none;border:0;cursor:pointer;padding:0}[data-ui=upload] [data-part=name]{flex:0 1 auto;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-ui=upload] [data-part=extension]{flex:none}[data-ui=upload] [data-part=detail]{align-items:baseline;color:var(--slotted-text-muted);display:flex;flex-wrap:wrap;font-size:var(--slotted-font-size-xs, .75rem);line-height:var(--_leading);min-inline-size:0}[data-ui=upload] [data-part=meta]{font-variant-numeric:tabular-nums;white-space:nowrap}[data-ui=upload] [data-part=status]{color:var(--_status-text);font-weight:var(--slotted-upload-status-font-weight, var(--slotted-font-weight-medium, 500));min-inline-size:0}[data-ui=upload] [data-part=meta]:has(+[data-part=status]):after{color:var(--slotted-text-muted);content:\" \\b7\";margin-inline-end:.4em}[data-ui=upload] [data-part=message]{color:var(--_status-text);font-size:var(--slotted-font-size-xs, .75rem);line-height:var(--_leading);grid-area:message;margin:0}[data-ui=upload] [data-part=progress]{display:block;inset-block-end:0;inset-inline:0;position:absolute}[data-ui=upload] [data-part=actions]{display:inline-flex;gap:var(--slotted-space-1, .125rem);grid-area:actions;justify-content:flex-end}[data-ui=upload] [data-part=viewerExternal],[data-ui=upload] [data-part=viewerClose],[data-ui=upload] [data-part=start],[data-ui=upload] [data-part=pause],[data-ui=upload] [data-part=retry],[data-ui=upload] [data-part=cancel],[data-ui=upload] [data-part=remove]{align-items:center;appearance:none;background-color:transparent;block-size:var(--_action-size);border:0;border-radius:var(--slotted-upload-action-radius, var(--slotted-control-radius, 4px));color:inherit;cursor:pointer;display:inline-flex;flex:none;font:inherit;inline-size:var(--_action-size);justify-content:center;padding:0;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=upload] [data-part=viewerExternal]>[data-ui=icon],[data-ui=upload] [data-part=viewerClose]>[data-ui=icon],[data-ui=upload] [data-part=start]>[data-ui=icon],[data-ui=upload] [data-part=pause]>[data-ui=icon],[data-ui=upload] [data-part=retry]>[data-ui=icon],[data-ui=upload] [data-part=cancel]>[data-ui=icon],[data-ui=upload] [data-part=remove]>[data-ui=icon]{--slotted-icon-size: var(--_action-glyph-size)}@media(pointer:coarse){[data-ui=upload] :is([data-part=viewerExternal],[data-part=viewerClose],[data-part=start],[data-part=pause],[data-part=retry],[data-part=cancel],[data-part=remove]){position:relative}[data-ui=upload] :is([data-part=viewerExternal],[data-part=viewerClose],[data-part=start],[data-part=pause],[data-part=retry],[data-part=cancel],[data-part=remove]):after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2));position:absolute}[data-ui=upload] :is([data-part=viewerExternal],[data-part=start],[data-part=pause],[data-part=retry],[data-part=cancel]):has(+:is([data-part=viewerClose],[data-part=pause],[data-part=retry],[data-part=cancel],[data-part=remove]):not([hidden])):after{inset-inline-end:0}[data-ui=upload] :is([data-part=viewerExternal],[data-part=start],[data-part=pause],[data-part=retry],[data-part=cancel]):not([hidden])+:is([data-part=viewerClose],[data-part=pause],[data-part=retry],[data-part=cancel],[data-part=remove]):after{inset-inline-start:0}}[data-ui=upload] [data-part=viewerExternal]:enabled:hover,[data-ui=upload] [data-part=viewerClose]:enabled:hover,[data-ui=upload] [data-part=start]:enabled:hover,[data-ui=upload] [data-part=pause]:enabled:hover,[data-ui=upload] [data-part=retry]:enabled:hover,[data-ui=upload] [data-part=cancel]:enabled:hover,[data-ui=upload] [data-part=remove]:enabled:hover{background-color:var(--_state-hover)}[data-ui=upload] [data-part=viewerExternal]:enabled:active,[data-ui=upload] [data-part=viewerClose]:enabled:active,[data-ui=upload] [data-part=start]:enabled:active,[data-ui=upload] [data-part=pause]:enabled:active,[data-ui=upload] [data-part=retry]:enabled:active,[data-ui=upload] [data-part=cancel]:enabled:active,[data-ui=upload] [data-part=remove]:enabled:active{background-color:var(--_state-active)}[data-ui=upload] [data-part=viewerExternal]:disabled,[data-ui=upload] [data-part=viewerClose]:disabled,[data-ui=upload] [data-part=start]:disabled,[data-ui=upload] [data-part=pause]:disabled,[data-ui=upload] [data-part=retry]:disabled,[data-ui=upload] [data-part=cancel]:disabled,[data-ui=upload] [data-part=remove]:disabled{color:var(--slotted-disabled-foreground);cursor:default}[data-ui=upload] [data-part=viewerExternal]:focus-visible,[data-ui=upload] [data-part=viewerClose]:focus-visible,[data-ui=upload] [data-part=start]:focus-visible,[data-ui=upload] [data-part=pause]:focus-visible,[data-ui=upload] [data-part=retry]:focus-visible,[data-ui=upload] [data-part=cancel]:focus-visible,[data-ui=upload] [data-part=remove]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(-1 * var(--slotted-focus-ring-width, 2px))}[data-ui=upload][data-part=viewer]{background-color:var(--slotted-surface);block-size:100%;display:grid;grid-row:1 / -1;grid-template-rows:auto minmax(0,1fr);inline-size:100%}[data-ui=upload] [data-part=viewerHeader]{align-items:center;border-block-end:var(--_border-width) solid var(--slotted-border-subtle);column-gap:var(--_gap);display:grid;grid-template-columns:minmax(0,1fr) auto;padding-block:var(--slotted-space-4, .5rem);padding-inline:var(--slotted-space-6, 1rem)}[data-ui=upload] [data-part=viewerTitle]{font-size:var(--slotted-font-size-md, .875rem);line-height:var(--_leading);font-weight:var(--slotted-font-weight-semibold, 600);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-ui=upload] [data-part=viewerMeta]{color:var(--slotted-text-muted);font-size:var(--slotted-font-size-xs, .75rem);line-height:var(--_leading)}[data-ui=upload] [data-part=viewerActions]{align-items:center;display:inline-flex;gap:var(--slotted-space-1, .125rem)}[data-ui=upload] [data-part=viewerStage]{background-color:var(--slotted-surface-sunken);display:grid;min-block-size:0;overflow:hidden;padding:var(--slotted-space-6, 1rem);place-items:center;position:relative}[data-ui=upload] [data-part=viewerStage]>img,[data-ui=upload] [data-part=viewerStage]>iframe{align-self:stretch;block-size:auto;inline-size:auto;justify-self:stretch;min-block-size:0;min-inline-size:0}[data-ui=upload] [data-part=viewerStage]>img{object-fit:contain}[data-ui=upload] [data-part=viewerStage]>iframe{background-color:var(--slotted-surface);border:0}[data-ui=upload] [data-part=viewerStage]>video,[data-ui=upload] [data-part=viewerStage]>audio{max-block-size:100%;max-inline-size:100%;min-block-size:0;min-inline-size:0}[data-ui=upload] [data-part=viewerStage]>[data-part=preview]{block-size:var(--slotted-upload-viewer-tile-size, 6rem);inline-size:var(--slotted-upload-viewer-tile-size, 6rem)}[data-ui=upload] [data-part=viewerStage]>[data-part=preview]>[data-ui=icon]{--slotted-icon-size: calc(3 * var(--_glyph-size))}[data-ui=upload] [data-part=viewerStage]>p{color:var(--slotted-text-muted);margin:0;max-inline-size:28ch;text-align:center}[data-ui=upload] [data-part=viewerStage]:has(>[data-part=preview]){align-items:center;display:flex;flex-direction:column;gap:var(--slotted-space-5, .75rem);justify-content:center}[data-ui=upload] [data-part=viewerPrevious],[data-ui=upload] [data-part=viewerNext]{align-items:center;appearance:none;background-color:color-mix(in oklab,var(--slotted-surface) var(--slotted-upload-viewer-control-opacity, 92%),transparent);block-size:var(--slotted-upload-viewer-control-size, 2.5rem);border:0;border-radius:var(--slotted-radius-full, 9999px);box-shadow:var(--slotted-shadow-sm);color:var(--slotted-text);cursor:pointer;display:inline-flex;inline-size:var(--slotted-upload-viewer-control-size, 2.5rem);justify-content:center;padding:0;position:absolute;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),translate var(--slotted-duration-instant) var(--slotted-control-transition-easing)}[data-ui=upload] [data-part=viewerPrevious]{inset-inline-start:var(--slotted-space-5, .75rem)}[data-ui=upload] [data-part=viewerNext]{inset-inline-end:var(--slotted-space-5, .75rem)}[data-ui=upload] [data-part=viewerPrevious]>[data-ui=icon],[data-ui=upload] [data-part=viewerNext]>[data-ui=icon]{--slotted-icon-size: var(--_glyph-size)}[data-ui=upload] [data-part=viewerPrevious]>[data-ui=icon]{rotate:180deg}[data-ui=upload] [data-part=viewerPrevious]:enabled:hover,[data-ui=upload] [data-part=viewerNext]:enabled:hover{background-color:color-mix(in oklab,currentcolor var(--slotted-upload-state-layer-hover, 8%),var(--slotted-surface))}[data-ui=upload] [data-part=viewerPrevious]:enabled:active,[data-ui=upload] [data-part=viewerNext]:enabled:active{background-color:color-mix(in oklab,currentcolor var(--slotted-upload-state-layer-active, 14%),var(--slotted-surface));translate:0 var(--slotted-border-width-thin, 1px)}[data-ui=upload] [data-part=viewerPrevious]:disabled,[data-ui=upload] [data-part=viewerNext]:disabled{color:var(--slotted-disabled-foreground);cursor:default}[data-ui=upload] [data-part=viewerPrevious]:focus-visible,[data-ui=upload] [data-part=viewerNext]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=field] [data-ui=upload]>[data-part=label],[data-ui=field] [data-ui=upload]>[data-part=description],[data-ui=field] [data-ui=upload]>[data-part=message]{display:none}[data-ui=field] [data-ui=upload][data-part=root]{--_section-gap: var(--slotted-upload-field-section-gap, var(--slotted-space-4, .5rem))}[data-ui=upload][data-variant=button] [data-part=trigger]{align-self:start}[data-ui=upload][data-variant=field]:where([data-part=root]){--_zone-edge: var(--slotted-control-border-color);--_zone-ground: var(--slotted-control-surface, Field)}[data-ui=upload][data-variant=field] [data-part=dropzone]{align-items:center;border-style:solid;border-width:var(--slotted-control-border-width, 1px);flex-direction:row;gap:var(--_gap);padding-block:var(--slotted-space-2, .25rem);padding-inline:var(--slotted-space-2, .25rem);text-align:start}[data-ui=upload][data-layout=grid] [data-part=list]{display:grid;gap:var(--_gap);grid-template-columns:repeat(auto-fill,minmax(var(--slotted-upload-card-measure, 9rem),1fr))}[data-ui=upload][data-layout=grid] [data-part=item]{align-content:start;align-items:stretch;container-type:inline-size;grid-template-areas:\"preview\" \"body\" \"message\";grid-template-columns:minmax(0,1fr)}[data-ui=upload][data-layout=grid] [data-part=preview]{block-size:round(down,75cqi,1px);inline-size:100%}[data-ui=upload][data-layout=grid] [data-part=actions]{background-color:color-mix(in oklab,var(--slotted-surface) var(--slotted-upload-card-actions-opacity, 96%),transparent);border-radius:var(--_item-radius);box-shadow:var(--slotted-shadow-xs);inset-block-start:calc(var(--_item-inset-block) + var(--slotted-space-3, .375rem));inset-inline-end:calc(var(--_item-inset-inline) + var(--slotted-space-3, .375rem));margin-block-start:0;min-inline-size:0;padding:var(--slotted-space-1, .125rem);position:absolute}[data-ui=upload][data-layout=grid] [data-part=preview]:not(:has(img)):after{content:attr(data-extension);font-size:var(--slotted-font-size-sm, .8125rem);font-weight:var(--slotted-font-weight-semibold, 600);letter-spacing:.06em;margin-block-start:var(--slotted-space-3, .375rem);text-transform:uppercase}[data-ui=upload][data-layout=grid] [data-part=preview]>[data-ui=icon]{--slotted-icon-size: calc(2 * var(--_glyph-size))}@container slotted-upload (max-width: 30rem){[data-ui=upload] [data-part=summary]{align-items:start;flex-direction:column}}@container slotted-upload (max-width: 26rem){[data-ui=upload] [data-part=item]{grid-template-areas:\"preview body\" \"preview actions\" \"message message\";grid-template-columns:auto minmax(0,1fr)}[data-ui=upload] [data-part=preview]{align-self:start}[data-ui=upload] [data-part=actions]{justify-content:flex-start;margin-inline-start:calc(-1 * var(--slotted-space-2, .25rem))}[data-ui=upload] [data-part=dropzone]{padding-block:var(--slotted-space-6, 1rem)}}@media(forced-colors:active){[data-ui=upload] [data-part=item][data-status=rejected],[data-ui=upload] [data-part=item][data-status=error]{--_item-border: CanvasText}[data-ui=upload] [data-part=preview]{border:var(--_border-width) solid ButtonBorder}[data-ui=upload] [data-part=dropzone][data-drop-target],[data-ui=upload] [data-part=dropzone][data-drop-invalid]{--_zone-border-color: Highlight}[data-ui=upload] :is([data-part=clear],[data-part=viewerExternal],[data-part=viewerClose],[data-part=viewerPrevious],[data-part=viewerNext],[data-part=start],[data-part=pause],[data-part=retry],[data-part=cancel],[data-part=remove]):enabled:is(:hover,:active){background-color:Highlight;color:HighlightText}}@media(forced-colors:active){[data-ui=upload][data-invalid] [data-part=trigger]{outline:var(--_invalid-edge-width) solid CanvasText;outline-offset:calc(-1 * (var(--slotted-control-border-width, 1px) + var(--_invalid-edge-width)))}[data-ui=upload][data-invalid] [data-part=trigger]:has(:focus-visible){outline:calc(var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)) double var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}}}\n", "@property --slotted-progress-indicator-percent{syntax: \"<number>\"; inherits: true; initial-value: 0;}@property --slotted-progress-indicator-buffer-percent{syntax: \"<number>\"; inherits: true; initial-value: 0;}@property --slotted-progress-indicator-travel-start{syntax: \"<number>\"; inherits: true; initial-value: 0;}@property --slotted-progress-indicator-travel-size{syntax: \"<number>\"; inherits: true; initial-value: 100;}@property --slotted-progress-indicator-wave-phase{syntax: \"<number>\"; inherits: true; initial-value: 0;}@property --slotted-progress-indicator-wave-amplitude{syntax: \"<number>\"; inherits: true; initial-value: 1;}@layer slotted.components{[data-ui=progress-indicator][data-part=root]{--_ink: var(--slotted-progress-indicator-indicator-color, var(--slotted-tone-accent-text));--_track-color: var( --slotted-progress-indicator-track-color, color-mix(in oklab, var(--_ink) 24%, var(--slotted-surface)) );--_buffer-color: var(--slotted-progress-indicator-buffer-color, transparent);--_percent: var(--slotted-progress-indicator-percent, 0);--_buffer-percent: var(--slotted-progress-indicator-buffer-percent, 0);--_lead: max(var(--_percent), var(--_buffer-percent));--_font-size: var(--slotted-control-font-size-md, 13px);--_text-gap: var(--slotted-space-4, .5rem);--_row-gap: var(--slotted-space-3, .375rem);--_thickness: var(--slotted-progress-indicator-thickness, var(--slotted-space-2, .25rem));--_size: var(--slotted-progress-indicator-size, var(--slotted-control-height-md, 34px));--_radius: var(--slotted-progress-indicator-radius, var(--slotted-radius-full, 9999px));--_gap: var(--slotted-progress-indicator-gap, var(--_thickness));font-family:var(--slotted-control-font-family, sans-serif);font-size:var(--_font-size);line-height:var(--slotted-line-height-md, 1.5);min-inline-size:0;--_settle: calc(4 * var(--slotted-duration-long));--_spring: linear( 0, .078, .235, .401, .549, .669, .762, .831, .882, .918, .944, .962, .974, .982, .988, .992, .995, .996, .998, .998, 1 );transition:--slotted-progress-indicator-percent var(--_settle) var(--_spring),--slotted-progress-indicator-buffer-percent var(--_settle) var(--_spring)}[data-ui=progress-indicator][hidden]{display:none}[data-ui=progress-indicator][data-part=root][data-tone=secondary]{--_ink: var(--slotted-progress-indicator-indicator-color, var(--slotted-border-strong))}[data-ui=progress-indicator][data-part=root][data-tone=success]{--_ink: var(--slotted-progress-indicator-indicator-color, var(--slotted-tone-success-text))}[data-ui=progress-indicator][data-part=root][data-tone=warning]{--_ink: var(--slotted-progress-indicator-indicator-color, var(--slotted-tone-warning-text))}[data-ui=progress-indicator][data-part=root][data-tone=danger]{--_ink: var(--slotted-progress-indicator-indicator-color, var(--slotted-tone-danger-text))}[data-ui=progress-indicator][data-part=root][data-buffered]{--_buffer-color: var( --slotted-progress-indicator-buffer-color, color-mix(in oklab, var(--_ink) 52%, var(--slotted-surface)) )}[data-ui=progress-indicator][data-part=root][data-size=sm]{--_font-size: var(--slotted-control-font-size-sm, 12px);--_text-gap: var(--slotted-space-3, .375rem);--_thickness: var(--slotted-progress-indicator-thickness, var(--slotted-space-1, .125rem));--_size: var(--slotted-progress-indicator-size, var(--slotted-control-height-sm, 30px))}[data-ui=progress-indicator][data-part=root][data-size=lg]{--_font-size: var(--slotted-control-font-size-lg, 14px);--_row-gap: var(--slotted-space-4, .5rem);--_thickness: var(--slotted-progress-indicator-thickness, var(--slotted-space-4, .5rem));--_size: var(--slotted-progress-indicator-size, var(--slotted-control-height-lg, 38px))}[data-ui=progress-indicator] [data-part=label]{color:var(--slotted-text, CanvasText);min-inline-size:0;overflow-wrap:break-word}[data-ui=progress-indicator] [data-part=value]{color:var(--slotted-text-muted, GrayText);font-variant-numeric:tabular-nums;white-space:nowrap}[data-ui=progress-indicator][data-part=root][data-shape=linear]{align-items:baseline;column-gap:var(--_text-gap);display:grid;grid-template-columns:1fr auto;row-gap:var(--_row-gap)}[data-ui=progress-indicator][data-shape=linear]>[data-part=label]{grid-column:1}[data-ui=progress-indicator][data-shape=linear]>[data-part=value]{grid-column:2;justify-self:end}[data-ui=progress-indicator][data-shape=linear]>[data-part=track]{grid-column:1 / -1}[data-ui=progress-indicator][data-shape=linear] [data-part=track]{background-color:var(--_buffer-color);block-size:var(--_thickness);border-radius:var(--_radius);inline-size:100%;isolation:isolate;overflow-x:clip;overflow-y:visible;position:relative}[data-ui=progress-indicator][data-shape=linear] [data-part=track]:before{background-color:var(--_track-color);border-radius:inherit;content:\"\";inset-block:0;inset-inline-end:0;inset-inline-start:calc(1% * var(--_lead) + var(--_gap));position:absolute}[data-ui=progress-indicator][data-shape=linear] [data-part=track]:after{background-color:var(--_ink);border-radius:var(--slotted-radius-full, 9999px);content:\"\";inline-size:var(--_thickness);inset-block:0;inset-inline-end:0;position:absolute}[data-ui=progress-indicator][data-shape=linear] [data-part=indicator]{background-color:var(--_ink);block-size:100%;border-radius:inherit;inline-size:calc(1% * var(--_percent));position:relative}@container style(--slotted-progress-indicator-percent: 100){[data-ui=progress-indicator][data-shape=linear] [data-part=track]:before,[data-ui=progress-indicator][data-shape=linear] [data-part=track]:after{content:none}}[data-ui=progress-indicator][data-shape=linear][data-indeterminate] [data-part=track]:before{inset-inline-start:0}[data-ui=progress-indicator][data-shape=linear][data-indeterminate] [data-part=track]:after{content:none}[data-ui=progress-indicator][data-shape=linear][data-indeterminate] [data-part=indicator]{animation:slotted-progress-indicator-travel var(--slotted-duration-loop-slow) var(--slotted-easing-standard) infinite;inline-size:calc(1% * var(--slotted-progress-indicator-travel-size));inset-block:0;inset-inline-start:calc(1% * var(--slotted-progress-indicator-travel-start));position:absolute}@keyframes slotted-progress-indicator-travel{0%{--slotted-progress-indicator-travel-size: 14;--slotted-progress-indicator-travel-start: -14}45%{--slotted-progress-indicator-travel-size: 46}to{--slotted-progress-indicator-travel-size: 14;--slotted-progress-indicator-travel-start: 100}}[data-ui=progress-indicator][data-part=root][data-placement=page]{--_radius: var(--slotted-progress-indicator-radius, var(--slotted-radius-none, 0px));--_track-color: var(--slotted-progress-indicator-track-color, transparent);--_gap: var(--slotted-progress-indicator-gap, 0);inset-block-start:0;inset-inline:0;position:fixed;z-index:var(--slotted-z-index-sticky, 100)}[data-ui=progress-indicator][data-placement=page] [data-part=track]:after{content:none}[data-ui=progress-indicator][data-part=root]:is([data-placement=edge-start],[data-placement=edge-end]){--_radius: var(--slotted-progress-indicator-radius, var(--slotted-radius-none, 0px));--_track-color: var(--slotted-progress-indicator-track-color, transparent);--_gap: var(--slotted-progress-indicator-gap, 0);inset-inline:0;position:var(--slotted-progress-indicator-position, absolute)}[data-ui=progress-indicator][data-part=root][data-placement=edge-start]{inset-block-start:0}[data-ui=progress-indicator][data-part=root][data-placement=edge-end]{inset-block-end:0}[data-ui=progress-indicator]:is([data-placement=edge-start],[data-placement=edge-end]) [data-part=track]:after{content:none}[data-ui=progress-indicator][data-part=root]:is([data-placement=page],[data-placement=edge-start],[data-placement=edge-end]){--_withdrawn: inset(0 0 100% 0);clip-path:inset(0);transition:--slotted-progress-indicator-percent var(--_settle) var(--_spring),--slotted-progress-indicator-buffer-percent var(--_settle) var(--_spring),clip-path var(--slotted-duration-medium) var(--slotted-easing-enter),opacity var(--slotted-duration-medium) var(--slotted-easing-enter)}@starting-style{[data-ui=progress-indicator][data-part=root]:is([data-placement=page],[data-placement=edge-start],[data-placement=edge-end]){clip-path:var(--_withdrawn);opacity:0}}[data-ui=progress-indicator][data-part=root][data-placement=edge-end]{--_withdrawn: inset(100% 0 0 0)}[data-ui=progress-indicator][data-part=root]:is([data-placement=page],[data-placement=edge-start],[data-placement=edge-end])[hidden]{clip-path:var(--_withdrawn);opacity:0;transition:clip-path var(--slotted-duration-short) var(--slotted-easing-exit),opacity var(--slotted-duration-short) var(--slotted-easing-exit),display var(--slotted-duration-short) allow-discrete}[data-ui=progress-indicator][data-part=root][data-shape=circular],[data-ui=progress-indicator][data-part=root][data-shape=morph]{align-items:center;column-gap:var(--_text-gap);display:inline-flex}[data-ui=progress-indicator][data-shape=circular] svg{--_stroke: var(--slotted-progress-indicator-stroke, 6);block-size:var(--_size);flex:none;inline-size:var(--_size);rotate:-90deg}[data-ui=progress-indicator][data-shape=circular] [data-part=track],[data-ui=progress-indicator][data-shape=circular] [data-part=indicator]{fill:none;stroke-linecap:round;stroke-width:var(--_stroke)}[data-ui=progress-indicator][data-shape=circular] [data-part=indicator]{stroke:var(--_ink);stroke-dasharray:var(--_percent) 100;stroke-opacity:clamp(0,calc(var(--_percent) * 1000),1)}[data-ui=progress-indicator][data-shape=circular] [data-part=track]{--_arc-gap: calc(3.2*clamp(0, calc(var(--_percent) * 1000), 1)) ;stroke:var(--_track-color);stroke-dasharray:calc(100 - var(--_percent) - 2 * var(--_arc-gap)) 100;stroke-dashoffset:calc(-1 * (var(--_percent) + var(--_arc-gap)))}@container style(--slotted-progress-indicator-percent: 100){[data-ui=progress-indicator][data-shape=circular] [data-part=track]{stroke:transparent}}[data-ui=progress-indicator][data-shape=circular][data-indeterminate] [data-part=track]{stroke:transparent}[data-ui=progress-indicator][data-shape=circular][data-indeterminate] svg{animation:slotted-progress-indicator-turn var(--slotted-duration-loop) linear infinite}[data-ui=progress-indicator][data-shape=circular][data-indeterminate] [data-part=indicator]{animation:slotted-progress-indicator-sweep var(--slotted-duration-loop-slow) var(--slotted-easing-standard) infinite;stroke-opacity:1;transition:none}@keyframes slotted-progress-indicator-turn{0%{rotate:-90deg}to{rotate:270deg}}@keyframes slotted-progress-indicator-sweep{0%{stroke-dasharray:4 100;stroke-dashoffset:0}50%{stroke-dasharray:62 100;stroke-dashoffset:-18}to{stroke-dasharray:4 100;stroke-dashoffset:-100}}[data-ui=progress-indicator][data-part=root][data-wave]{--slotted-progress-indicator-wave-amplitude: min( clamp(0, calc((var(--_percent) - 6) / 10), 1), clamp(0, calc((96 - var(--_percent)) / 12), 1) );animation:slotted-progress-indicator-wave var(--slotted-duration-loop) linear infinite}[data-ui=progress-indicator][data-part=root][data-wave][data-indeterminate]{--slotted-progress-indicator-wave-amplitude: 1}@keyframes slotted-progress-indicator-wave{0%{--slotted-progress-indicator-wave-phase: 0}to{--slotted-progress-indicator-wave-phase: 1}}[data-ui=progress-indicator][data-shape=linear][data-wave] [data-part=track]{container-type:inline-size;margin-block:calc(.75 * var(--_thickness))}[data-ui=progress-indicator][data-shape=linear][data-wave] [data-part=indicator]{--_wave-length: 10;background-color:transparent;block-size:calc(2.5 * var(--_thickness));inline-size:calc(1200 * var(--_thickness));inset-block:calc(-.75 * var(--_thickness)) auto;inset-inline-start:0;overflow:visible;position:absolute}[data-ui=progress-indicator][data-shape=linear][data-wave] [data-part=indicator]:dir(rtl){transform:scaleX(-1)}[data-ui=progress-indicator][data-shape=linear][data-wave] [data-part=indicator] path{--_track-units: tan(atan2(100cqi, var(--_thickness)));--_window-start: 0;--_window-size: var(--_percent);--_hidden: calc(var(--slotted-progress-indicator-wave-phase) * var(--_wave-length));fill:none;stroke:var(--_ink);stroke-dasharray:max(0,calc(var(--_window-size) * var(--_track-units) / 100 - 1)) 100000;stroke-dashoffset:calc(-1 * (var(--_hidden) + var(--_window-start) * var(--_track-units) / 100 + .5));stroke-linecap:round;stroke-opacity:clamp(0,calc(var(--_window-size) * 1000),1);stroke-width:1;transform:translate(calc(-1 * var(--_hidden) * 1px))}[data-ui=progress-indicator][data-shape=linear][data-wave]:not([data-indeterminate]) [data-part=indicator] path{animation:slotted-progress-indicator-flatten-bar var(--_scrub) var(--_taper) both paused;animation-delay:calc(-1 * var(--_scrub) * (1 - var(--slotted-progress-indicator-wave-amplitude)))}[data-ui=progress-indicator][data-shape=linear][data-wave][data-indeterminate] [data-part=indicator]{--_wave-length: 5;animation:slotted-progress-indicator-travel var(--slotted-duration-loop-slow) var(--slotted-easing-standard) infinite}[data-ui=progress-indicator][data-shape=linear][data-wave][data-indeterminate] [data-part=indicator] path{--_window-start: var(--slotted-progress-indicator-travel-start);--_window-size: var(--slotted-progress-indicator-travel-size)}[data-ui=progress-indicator][data-shape=circular][data-wave] svg{--_stroke: var(--slotted-progress-indicator-stroke, 5);block-size:calc(1.2 * var(--_size));inline-size:calc(1.2 * var(--_size));overflow:visible}[data-ui=progress-indicator][data-shape=circular][data-wave] [data-part=indicator]{rotate:calc(-45deg * var(--slotted-progress-indicator-wave-phase));stroke-dasharray:var(--_percent) calc(100 - var(--_percent));stroke-dashoffset:calc(-12.5 * var(--slotted-progress-indicator-wave-phase));transform-box:view-box;transform-origin:50% 50%}[data-ui=progress-indicator][data-shape=circular][data-wave]:not([data-indeterminate]) [data-part=indicator]{animation:slotted-progress-indicator-flatten-ring var(--_scrub) var(--_taper) both paused;animation-delay:calc(-1 * var(--_scrub) * (1 - var(--slotted-progress-indicator-wave-amplitude)))}[data-ui=progress-indicator][data-part=root][data-wave]{--_scrub: var(--slotted-duration-long);--_taper: cubic-bezier(.45, 0, .55, 1)}@keyframes slotted-progress-indicator-flatten-bar{0%{d:path(\"M0-0.75c1.82 0 3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5\")}to{d:path(\"M0 0c1.82 0 3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0\")}}@keyframes slotted-progress-indicator-flatten-ring{0%{d:path(\"M45.6 24C45.6 26.83 41.92 28.82 41 31.04C40.08 33.27 41.27 37.27 39.27 39.27C37.27 41.27 33.27 40.08 31.04 41C28.82 41.92 26.83 45.6 24 45.6C21.17 45.6 19.18 41.92 16.96 41C14.73 40.08 10.73 41.27 8.73 39.27C6.73 37.27 7.92 33.27 7 31.04C6.08 28.82 2.4 26.83 2.4 24C2.4 21.17 6.08 19.18 7 16.96C7.92 14.73 6.73 10.73 8.73 8.73C10.73 6.73 14.73 7.92 16.96 7C19.18 6.08 21.17 2.4 24 2.4C26.83 2.4 28.82 6.08 31.04 7C33.27 7.92 37.27 6.73 39.27 8.73C41.27 10.73 40.08 14.73 41 16.96C41.92 19.18 45.6 21.17 45.6 24Z\")}to{d:path(\"M44 24C44 26.62 43.48 29.23 42.48 31.65C41.48 34.07 39.99 36.29 38.14 38.14C36.29 39.99 34.07 41.48 31.65 42.48C29.23 43.48 26.62 44 24 44C21.38 44 18.77 43.48 16.35 42.48C13.93 41.48 11.71 39.99 9.86 38.14C8.01 36.29 6.52 34.07 5.52 31.65C4.52 29.23 4 26.62 4 24C4 21.38 4.52 18.77 5.52 16.35C6.52 13.93 8.01 11.71 9.86 9.86C11.71 8.01 13.93 6.52 16.35 5.52C18.77 4.52 21.38 4 24 4C26.62 4 29.23 4.52 31.65 5.52C34.07 6.52 36.29 8.01 38.14 9.86C39.99 11.71 41.48 13.93 42.48 16.35C43.48 18.77 44 21.38 44 24Z\")}}[data-ui=progress-indicator][data-shape=morph] [data-part=track]{block-size:var(--_size);border-radius:var(--slotted-radius-full, 9999px);display:grid;flex:none;inline-size:var(--_size);place-items:center}[data-ui=progress-indicator][data-shape=morph][data-contained] [data-part=track]{background-color:var(--_track-color)}[data-ui=progress-indicator][data-shape=morph] [data-part=track]{animation:slotted-progress-indicator-drift calc(2 * var(--slotted-duration-loop-slow)) linear infinite}[data-ui=progress-indicator][data-shape=morph] [data-part=indicator]{animation:slotted-progress-indicator-morph calc(2 * var(--slotted-duration-loop-slow)) var(--slotted-easing-emphasized) infinite,slotted-progress-indicator-lurch calc(2 * var(--slotted-duration-loop-slow)) var(--slotted-easing-emphasized) infinite;background-color:var(--_ink);block-size:100%;inline-size:100%}[data-ui=progress-indicator][data-shape=morph][data-contained] [data-part=indicator]{--_shape: round(nearest, calc(.79 * var(--_size)), 2px);block-size:var(--_shape);inline-size:var(--_shape)}@keyframes slotted-progress-indicator-drift{to{rotate:250deg}}@keyframes slotted-progress-indicator-lurch{0%{rotate:0deg}20%{rotate:90deg}40%{rotate:180deg}60%{rotate:270deg}80%{rotate:360deg}to{rotate:450deg}}@keyframes slotted-progress-indicator-morph{0%{clip-path:polygon(50% 0%,59.8% 1%,69.1% 3.8%,77.8% 8.4%,85.4% 14.6%,91.6% 22.2%,96.2% 30.9%,99% 40.2%,100% 50%,99% 59.8%,96.2% 69.1%,91.6% 77.8%,85.4% 85.4%,77.8% 91.6%,69.1% 96.2%,59.8% 99%,50% 100%,40.2% 99%,30.9% 96.2%,22.2% 91.6%,14.6% 85.4%,8.4% 77.8%,3.8% 69.1%,1% 59.8%,0% 50%,1% 40.2%,3.8% 30.9%,8.4% 22.2%,14.6% 14.6%,22.2% 8.4%,30.9% 3.8%,40.2% 1%)}20%{clip-path:polygon(50% 0%,59.3% 3.4%,65.9% 11.5%,69.9% 20.3%,73.6% 26.4%,79.7% 30.1%,88.5% 34.1%,96.6% 40.7%,100% 50%,96.6% 59.3%,88.5% 65.9%,79.7% 69.9%,73.6% 73.6%,69.9% 79.7%,65.9% 88.5%,59.3% 96.6%,50% 100%,40.7% 96.6%,34.1% 88.5%,30.1% 79.7%,26.4% 73.6%,20.3% 69.9%,11.5% 65.9%,3.4% 59.3%,0% 50%,3.4% 40.7%,11.5% 34.1%,20.3% 30.1%,26.4% 26.4%,30.1% 20.3%,34.1% 11.5%,40.7% 3.4%)}40%{clip-path:polygon(50% 6.9%,59.5% 2.1%,68.9% 4.3%,74.7% 13%,77% 23%,80.2% 29.8%,87.4% 34.5%,96% 40.8%,100% 50%,96% 59.2%,87.4% 65.5%,80.2% 70.2%,77% 77%,74.7% 87%,68.9% 95.7%,59.5% 97.9%,50% 93.1%,42.7% 86.7%,35.9% 83.9%,26.8% 84.7%,16.1% 83.9%,8.5% 77.7%,7.7% 67.5%,11.5% 57.7%,13.8% 50%,11.5% 42.3%,7.7% 32.5%,8.5% 22.3%,16.1% 16.1%,26.8% 15.3%,35.9% 16.1%,42.7% 13.3%)}60%{clip-path:polygon(50% 9.7%,56.8% 15.7%,62% 21%,67.1% 24.4%,73.7% 26.3%,82% 28.6%,90.7% 33.2%,97.4% 40.6%,100% 50%,97.4% 59.4%,90.7% 66.8%,82% 71.4%,73.7% 73.7%,67.1% 75.6%,62% 79%,56.8% 84.3%,50% 90.3%,41.1% 94.8%,31.1% 95.5%,22.3% 91.4%,16.6% 83.4%,14.9% 73.5%,16.2% 64%,18.3% 56.3%,19.4% 50%,18.3% 43.7%,16.2% 36%,14.9% 26.5%,16.6% 16.6%,22.3% 8.6%,31.1% 4.5%,41.1% 5.2%)}80%{clip-path:polygon(50% 23.1%,55.4% 22.7%,61.6% 22%,68.9% 21.7%,77.2% 22.8%,85.7% 26.2%,93.1% 32.2%,98.2% 40.4%,100% 50%,98.2% 59.6%,93.1% 67.8%,85.7% 73.8%,77.2% 77.2%,68.9% 78.3%,61.6% 78%,55.4% 77.3%,50% 76.9%,44.6% 77.3%,38.4% 78%,31.1% 78.3%,22.8% 77.2%,14.3% 73.8%,6.9% 67.8%,1.8% 59.6%,0% 50%,1.8% 40.4%,6.9% 32.2%,14.3% 26.2%,22.8% 22.8%,31.1% 21.7%,38.4% 22%,44.6% 22.7%)}to{clip-path:polygon(50% 0%,59.8% 1%,69.1% 3.8%,77.8% 8.4%,85.4% 14.6%,91.6% 22.2%,96.2% 30.9%,99% 40.2%,100% 50%,99% 59.8%,96.2% 69.1%,91.6% 77.8%,85.4% 85.4%,77.8% 91.6%,69.1% 96.2%,59.8% 99%,50% 100%,40.2% 99%,30.9% 96.2%,22.2% 91.6%,14.6% 85.4%,8.4% 77.8%,3.8% 69.1%,1% 59.8%,0% 50%,1% 40.2%,3.8% 30.9%,8.4% 22.2%,14.6% 14.6%,22.2% 8.4%,30.9% 3.8%,40.2% 1%)}}@media(prefers-reduced-motion:reduce){[data-ui=progress-indicator][data-part=root],[data-ui=progress-indicator] [data-part=indicator]:not(path),[data-ui=progress-indicator] [data-part=track],[data-ui=progress-indicator] svg{animation:none!important}[data-ui=progress-indicator][data-shape=linear][data-indeterminate] [data-part=indicator]{--slotted-progress-indicator-travel-size: 46;--slotted-progress-indicator-travel-start: 27}[data-ui=progress-indicator][data-shape=circular][data-indeterminate] [data-part=indicator]{stroke-dasharray:34 100}[data-ui=progress-indicator][data-part=root][data-wave]{animation:none}}@media(forced-colors:active){[data-ui=progress-indicator][data-shape=linear] [data-part=track]{background-color:Canvas;outline:var(--slotted-border-width-thin, 1px) solid ButtonBorder;outline-offset:calc(-1 * var(--slotted-border-width-thin, 1px))}[data-ui=progress-indicator][data-shape=linear] [data-part=track]:before,[data-ui=progress-indicator][data-shape=linear] [data-part=track]:after{content:none}[data-ui=progress-indicator]:is([data-placement=edge-start],[data-placement=edge-end]) [data-part=track]{background-color:transparent;outline:none}[data-ui=progress-indicator] [data-part=indicator]{background-color:Highlight}[data-ui=progress-indicator][data-shape=linear][data-wave] [data-part=indicator]{background-color:transparent}[data-ui=progress-indicator][data-shape=linear][data-wave] [data-part=indicator] path{stroke:Highlight}[data-ui=progress-indicator][data-shape=circular] [data-part=indicator]{background-color:transparent;stroke:Highlight}[data-ui=progress-indicator][data-shape=circular] [data-part=track]{stroke:ButtonBorder}[data-ui=progress-indicator][data-shape=morph][data-contained] [data-part=track]{background-color:Canvas}}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SlGlyph, selector: "svg[slGlyph]", inputs: ["name", "solid"] }, { kind: "component", type: SlIcon, selector: "[slIcon]", inputs: ["directional", "label", "size", "tone"], exportAs: ["slIcon"] }, { kind: "component", type: SlProgressBar, selector: "[slProgressBar]", inputs: ["value", "min", "max", "buffer", "showValue", "valueText", "format", "locale", "wave", "placement"], exportAs: ["slProgressBar"] }, { kind: "component", type: SlUploadViewer, selector: "div[slUploadViewer]", inputs: ["files", "viewing", "urls", "messages", "locale", "size"], outputs: ["viewingChange"], exportAs: ["slUploadViewer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1317
|
+
}
|
|
1318
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlUpload, decorators: [{
|
|
1319
|
+
type: Component,
|
|
1320
|
+
args: [{ selector: 'div[slUpload]', standalone: true, exportAs: 'slUpload', imports: [NgTemplateOutlet, SlGlyph, SlIcon, SlProgressBar, SlUploadViewer], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
|
|
1321
|
+
{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SlUpload), multi: true },
|
|
1322
|
+
{ provide: NG_VALIDATORS, useExisting: forwardRef(() => SlUpload), multi: true },
|
|
1323
|
+
], host: {
|
|
1324
|
+
'data-ui': 'upload',
|
|
1325
|
+
'data-part': 'root',
|
|
1326
|
+
'[attr.data-variant]': 'resolvedVariant()',
|
|
1327
|
+
'[attr.data-layout]': 'resolvedLayout()',
|
|
1328
|
+
'[attr.data-size]': 'resolvedSize()',
|
|
1329
|
+
'[attr.data-disabled]': "resolvedDisabled() ? '' : null",
|
|
1330
|
+
'[attr.data-readonly]': "readOnly() ? '' : null",
|
|
1331
|
+
'[attr.data-invalid]': "invalid() ? '' : null",
|
|
1332
|
+
'[attr.data-required]': "required() ? '' : null",
|
|
1333
|
+
'[attr.data-loading]': "summary().pending ? '' : null",
|
|
1334
|
+
'[attr.data-complete]': "summary().complete ? '' : null",
|
|
1335
|
+
'[attr.data-dragging]': "dragging() || documentDrag() ? '' : null",
|
|
1336
|
+
}, template: `
|
|
1337
|
+
@if (label() && !insideField()) {
|
|
1338
|
+
<span data-part="label">{{ label() }}</span>
|
|
1339
|
+
}
|
|
1340
|
+
@if (description() && !insideField()) {
|
|
1341
|
+
<p [id]="descriptionId" data-part="description">{{ description() }}</p>
|
|
1342
|
+
}
|
|
1343
|
+
|
|
1344
|
+
@if (resolvedVariant() === 'button') {
|
|
1345
|
+
<ng-container [ngTemplateOutlet]="triggerTemplate" />
|
|
1346
|
+
} @else {
|
|
1347
|
+
<div
|
|
1348
|
+
(dragenter)="onDragEnter($event)"
|
|
1349
|
+
(dragleave)="onDragLeave()"
|
|
1350
|
+
(dragover)="onDragOver($event)"
|
|
1351
|
+
(drop)="onDrop($event)"
|
|
1352
|
+
(paste)="onPaste($event)"
|
|
1353
|
+
(click)="onZoneClick($event)"
|
|
1354
|
+
[attr.data-drop-target]="verdict() === 'target' ? '' : null"
|
|
1355
|
+
[attr.data-drop-invalid]="verdict() === 'invalid' ? '' : null"
|
|
1356
|
+
[attr.data-browsable]="browsable() ? '' : null"
|
|
1357
|
+
data-part="dropzone"
|
|
1358
|
+
>
|
|
1359
|
+
<!-- The region carries the mark, so the trigger inside it does not. -->
|
|
1360
|
+
@if (resolvedVariant() === 'dropzone') {
|
|
1361
|
+
<span slIcon><svg slGlyph name="upload"></svg></span>
|
|
1362
|
+
{{ t('dropzone') }}
|
|
1363
|
+
}
|
|
1364
|
+
<ng-container [ngTemplateOutlet]="triggerTemplate" />
|
|
1365
|
+
@if (resolvedVariant() === 'field') {
|
|
1366
|
+
<span data-part="meta">{{ fieldSummary() }}</span>
|
|
1367
|
+
}
|
|
1368
|
+
</div>
|
|
1369
|
+
}
|
|
1370
|
+
|
|
1371
|
+
@if (files().length > 1) {
|
|
1372
|
+
<div data-part="summary">
|
|
1373
|
+
<span>{{ summaryText() }}</span>
|
|
1374
|
+
@if (!readOnly()) {
|
|
1375
|
+
<button (click)="clear($event)" data-part="clear" type="button">
|
|
1376
|
+
{{ t('clear') }}
|
|
1377
|
+
</button>
|
|
1378
|
+
}
|
|
1379
|
+
</div>
|
|
1380
|
+
}
|
|
1381
|
+
|
|
1382
|
+
@if (showList()) {
|
|
1383
|
+
<ul [style.--slotted-upload-visible-rows]="visibleRows()" data-part="list">
|
|
1384
|
+
@for (file of files(); track file.key) {
|
|
1385
|
+
<li [attr.data-status]="file.status" data-part="item">
|
|
1386
|
+
@if (resolvedPreview() !== 'none' || resolvedLayout() === 'grid') {
|
|
1387
|
+
<span
|
|
1388
|
+
[attr.data-extension]="extensionLabel(file)"
|
|
1389
|
+
[attr.data-kind]="file.kind"
|
|
1390
|
+
data-part="preview"
|
|
1391
|
+
>
|
|
1392
|
+
@if (url(file) && file.type.startsWith('image/')) {
|
|
1393
|
+
<img [src]="url(file)" alt="" />
|
|
1394
|
+
} @else {
|
|
1395
|
+
<span slIcon><svg slGlyph [name]="kindGlyph[file.kind]"></svg></span>
|
|
1396
|
+
}
|
|
1397
|
+
</span>
|
|
1398
|
+
}
|
|
1399
|
+
|
|
1400
|
+
<div data-part="body">
|
|
1401
|
+
@if (openable(file)) {
|
|
1402
|
+
<button (click)="open(file, $event)" data-part="filename" dir="auto" type="button">
|
|
1403
|
+
<span data-part="name">{{ stem(file) }}</span>
|
|
1404
|
+
@if (extension(file)) {
|
|
1405
|
+
<span data-part="extension">{{ extension(file) }}</span>
|
|
1406
|
+
}
|
|
1407
|
+
</button>
|
|
1408
|
+
} @else {
|
|
1409
|
+
<span data-part="filename" dir="auto">
|
|
1410
|
+
<span data-part="name">{{ stem(file) }}</span>
|
|
1411
|
+
@if (extension(file)) {
|
|
1412
|
+
<span data-part="extension">{{ extension(file) }}</span>
|
|
1413
|
+
}
|
|
1414
|
+
</span>
|
|
1415
|
+
}
|
|
1416
|
+
<div data-part="detail">
|
|
1417
|
+
<span data-part="meta">{{ formatters().bytes(file.size) }}</span>
|
|
1418
|
+
<span data-part="status">{{ statusText(file) }}</span>
|
|
1419
|
+
</div>
|
|
1420
|
+
</div>
|
|
1421
|
+
|
|
1422
|
+
<span data-part="actions">
|
|
1423
|
+
@for (action of actions(file); track action.part) {
|
|
1424
|
+
<button
|
|
1425
|
+
(click)="act(file, action.action, $event)"
|
|
1426
|
+
[attr.aria-label]="action.label"
|
|
1427
|
+
[attr.data-part]="action.part"
|
|
1428
|
+
type="button"
|
|
1429
|
+
>
|
|
1430
|
+
<span slIcon><svg slGlyph [name]="action.glyph"></svg></span>
|
|
1431
|
+
</button>
|
|
1432
|
+
}
|
|
1433
|
+
</span>
|
|
1434
|
+
|
|
1435
|
+
@if (showBar(file)) {
|
|
1436
|
+
<div data-part="progress">
|
|
1437
|
+
<div
|
|
1438
|
+
[tone]="file.status === 'uploading' ? 'accent' : 'warning'"
|
|
1439
|
+
[value]="percent(file)"
|
|
1440
|
+
decorative
|
|
1441
|
+
size="sm"
|
|
1442
|
+
slProgressBar
|
|
1443
|
+
></div>
|
|
1444
|
+
</div>
|
|
1445
|
+
}
|
|
1446
|
+
|
|
1447
|
+
@if (file.status === 'rejected' || file.status === 'error') {
|
|
1448
|
+
<p data-part="message">{{ messageText(file) }}</p>
|
|
1449
|
+
}
|
|
1450
|
+
</li>
|
|
1451
|
+
}
|
|
1452
|
+
</ul>
|
|
1453
|
+
}
|
|
1454
|
+
|
|
1455
|
+
<ng-content />
|
|
1456
|
+
|
|
1457
|
+
<div
|
|
1458
|
+
(viewingChange)="setViewing($event.key, $event.reason, $event.source)"
|
|
1459
|
+
[files]="files()"
|
|
1460
|
+
[locale]="resolvedLocale()"
|
|
1461
|
+
[messages]="messages()"
|
|
1462
|
+
[size]="resolvedSize()"
|
|
1463
|
+
[urls]="urls()"
|
|
1464
|
+
[viewing]="resolvedView() === 'none' ? null : viewing()"
|
|
1465
|
+
slUploadViewer
|
|
1466
|
+
></div>
|
|
1467
|
+
|
|
1468
|
+
<ng-template #triggerTemplate>
|
|
1469
|
+
<label #trigger data-part="trigger">
|
|
1470
|
+
@if (resolvedVariant() !== 'dropzone') {
|
|
1471
|
+
<span slIcon><svg slGlyph name="upload"></svg></span>
|
|
1472
|
+
}
|
|
1473
|
+
<input
|
|
1474
|
+
#control
|
|
1475
|
+
(change)="onPicked($event)"
|
|
1476
|
+
[attr.accept]="accept() ?? null"
|
|
1477
|
+
[attr.aria-describedby]="describedBy()"
|
|
1478
|
+
[attr.capture]="capture() ?? null"
|
|
1479
|
+
[attr.disabled]="resolvedDisabled() ? '' : null"
|
|
1480
|
+
[attr.id]="controlId"
|
|
1481
|
+
[attr.multiple]="multiple() ? '' : null"
|
|
1482
|
+
[attr.name]="name() ?? null"
|
|
1483
|
+
[attr.required]="required() ? '' : null"
|
|
1484
|
+
[attr.webkitdirectory]="directory() ? '' : null"
|
|
1485
|
+
data-part="input"
|
|
1486
|
+
type="file"
|
|
1487
|
+
/>
|
|
1488
|
+
{{ t('trigger') }}
|
|
1489
|
+
</label>
|
|
1490
|
+
</ng-template>
|
|
1491
|
+
`, styles: ["@layer slotted.components{[data-ui=upload][data-part=root],[data-ui=upload][data-part=viewer]{--_font-size: var(--slotted-control-font-size-md, 13px);--_glyph-size: var(--slotted-control-icon-size-md, 16px);--_inner-size: var(--slotted-control-inner-size-md, 24px);--_control-height: var(--slotted-control-height-md, 34px);--_control-inset: var(--slotted-control-padding-inline-md, 13px);--_gap: var(--slotted-control-gap-md, 8px);--_preview-size: var(--slotted-upload-preview-size, calc(2 * var(--_glyph-size)));--_state-hover: color-mix( in oklab, currentcolor var(--slotted-upload-state-layer-hover, 8%), transparent );--_state-active: color-mix( in oklab, currentcolor var(--slotted-upload-state-layer-active, 14%), transparent );--_section-gap: var(--slotted-upload-section-gap, var(--slotted-space-5, .75rem));--_item-gap: var(--slotted-upload-item-gap, var(--slotted-space-4, .5rem));--_line-gap: var(--slotted-upload-line-gap, var(--slotted-space-1, .125rem));--_item-inset-block: var(--slotted-upload-item-padding-block, var(--slotted-space-4, .5rem));--_item-inset-inline: var( --slotted-upload-item-padding-inline, var(--slotted-space-5, .75rem) );--_radius: var(--slotted-upload-radius, var(--slotted-radius-md, 6px));--_item-radius: var(--slotted-upload-item-radius, var(--slotted-radius-md, 6px));--_border-width: var(--slotted-upload-border-width, var(--slotted-border-width-thin, 1px));--_zone-inset-block: var(--slotted-upload-zone-padding-block, var(--slotted-space-9, 2rem));--_zone-inset-inline: var(--slotted-upload-zone-padding-inline, var(--slotted-space-6, 1rem));--_zone-border-width: var( --slotted-upload-zone-border-width, var(--slotted-border-width-medium, 1.5px) );--_zone-edge: var(--slotted-upload-zone-border-color, var(--slotted-border-strong));--_zone-ground: var(--slotted-upload-zone-background, var(--slotted-surface-sunken));--_zone-glyph-size: var(--slotted-upload-zone-icon-size, calc(1.5 * var(--_glyph-size)));--_action-glyph-size: max(var(--slotted-upload-icon-size-min, 14px), var(--_glyph-size));--_action-size: var( --slotted-upload-action-size, max( var(--slotted-target-min, 24px), min( calc(var(--_action-glyph-size) + 2 * var(--slotted-space-2, .25rem)), var(--_inner-size) ) ) );--_status-text: var(--slotted-text-muted);--_item-surface: var(--slotted-upload-item-background, var(--slotted-surface));--_item-border: var(--slotted-upload-item-border-color, var(--slotted-border-subtle));--_kind-tile: var(--slotted-upload-kind-other);--_leading: round(up, calc(1em * var(--slotted-line-height-md, 1.5)), 1px);color:var(--slotted-text);font-family:var(--slotted-upload-font-family, var(--slotted-control-font-family));font-size:var(--_font-size);line-height:var(--_leading)}[data-ui=upload][data-part=root]{container-name:slotted-upload;container-type:inline-size;inline-size:100%;display:flex;flex-direction:column;gap:var(--_section-gap)}[data-ui=upload][data-size=sm]{--_font-size: var(--slotted-control-font-size-sm, 12px);--_glyph-size: var(--slotted-control-icon-size-sm, 14px);--_inner-size: var(--slotted-control-inner-size-sm, 22px);--_control-height: var(--slotted-control-height-sm, 30px);--_control-inset: var(--slotted-control-padding-inline-sm, 10px);--_gap: var(--slotted-control-gap-sm, 6px)}[data-ui=upload][data-size=lg]{--_font-size: var(--slotted-control-font-size-lg, 14px);--_glyph-size: var(--slotted-control-icon-size-lg, 18px);--_inner-size: var(--slotted-control-inner-size-lg, 28px);--_control-height: var(--slotted-control-height-lg, 38px);--_control-inset: var(--slotted-control-padding-inline-lg, 16px);--_gap: var(--slotted-control-gap-lg, 8px)}[data-ui=upload] [data-part=label]{color:var(--slotted-text);flex:none;font-weight:var(--slotted-upload-label-font-weight, var(--slotted-font-weight-medium, 500))}[data-ui=upload] [data-part=description]{color:var(--slotted-text-muted);flex:none;margin:0}[data-ui=upload] [data-part=dropzone]{--_zone-border-color: var(--_zone-edge);--_zone-surface: var(--_zone-ground);align-items:center;background-color:var(--_zone-surface);border:var(--_zone-border-width) dashed var(--_zone-border-color);border-radius:var(--_radius);display:flex;flex:none;flex-direction:column;gap:var(--_gap);padding-block:var(--_zone-inset-block);padding-inline:var(--_zone-inset-inline);text-align:center;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),border-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=upload] [data-part=dropzone]>[data-ui=icon]{--slotted-icon-size: var(--_zone-glyph-size);color:var(--slotted-text-muted)}[data-ui=upload] [data-part=dropzone][data-drop-target]{--_zone-border-color: var(--slotted-tone-accent-border);--_zone-surface: var(--slotted-tone-accent-surface)}[data-ui=upload] [data-part=dropzone][data-drop-invalid]{--_zone-border-color: var(--slotted-tone-danger-border);--_zone-surface: var(--slotted-tone-danger-surface)}[data-ui=upload] [data-part=dropzone][data-browsable]{cursor:pointer}[data-ui=upload]:not([data-disabled]) [data-part=dropzone][data-browsable]:not([data-drop-target],[data-drop-invalid]):hover{--_zone-surface: color-mix( in oklab, var(--slotted-text) var(--slotted-upload-zone-state-layer-hover, 4%), var(--_zone-ground) )}[data-ui=upload]:not([data-disabled]) [data-part=dropzone][data-browsable]:not([data-drop-target],[data-drop-invalid]):active{--_zone-surface: color-mix( in oklab, var(--slotted-text) var(--slotted-upload-zone-state-layer-active, 8%), var(--_zone-ground) )}[data-ui=upload]:not([data-disabled],[data-invalid]) [data-part=dropzone][data-browsable]:not([data-drop-target],[data-drop-invalid]):is(:hover,:active){--_zone-border-color: var(--slotted-text-muted)}[data-ui=upload]:not([data-disabled]) [data-part=dropzone][data-browsable]:not([data-drop-target],[data-drop-invalid]):has([data-part=trigger]:hover){--_zone-border-color: var(--_zone-edge);--_zone-surface: var(--_zone-ground)}[data-ui=upload][data-disabled][data-part=root]{--_zone-edge: var(--slotted-disabled-border);--_zone-ground: var(--slotted-disabled-background)}[data-ui=upload][data-disabled] [data-part=dropzone]{color:var(--slotted-disabled-foreground)}[data-ui=upload][data-invalid][data-part=root]{--_zone-edge: var(--slotted-tone-danger-border)}[data-ui=upload] [data-part=trigger]{align-items:center;background-color:var(--slotted-upload-trigger-background, var(--slotted-surface));block-size:var(--_control-height);border:var(--slotted-control-border-width, 1px) solid var(--slotted-control-border-color);border-radius:var(--slotted-control-radius, 4px);box-shadow:var(--slotted-control-shadow);color:var(--slotted-text);cursor:pointer;display:inline-flex;flex:none;font:inherit;font-weight:var(--slotted-control-font-weight, 600);gap:var(--_gap);justify-content:center;padding-inline:var(--_control-inset);position:relative;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),border-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),translate var(--slotted-duration-instant) var(--slotted-control-transition-easing);white-space:nowrap}[data-ui=upload] [data-part=trigger]>[data-ui=icon]{--slotted-icon-size: var(--_glyph-size)}[data-ui=upload]:not([data-disabled]) [data-part=trigger]:hover{background-color:var(--slotted-tone-secondary-subtle-hover)}[data-ui=upload]:not([data-disabled]) [data-part=trigger]:active{background-color:var(--slotted-tone-secondary-subtle-active);translate:0 var(--slotted-border-width-thin, 1px)}[data-ui=upload][data-disabled] [data-part=trigger]{background-color:var(--slotted-disabled-background);border-color:var(--slotted-disabled-border);box-shadow:none;color:var(--slotted-disabled-foreground);cursor:default}[data-ui=upload] [data-part=trigger]:has(:focus-visible){outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=upload][data-invalid] [data-part=trigger]{--slotted-focus-ring-color: var(--slotted-focus-ring-color-invalid);border-color:var(--slotted-tone-danger-border);--_invalid-edge-width: var(--slotted-control-invalid-edge-width, 1px);box-shadow:inset 0 0 0 var(--_invalid-edge-width) var(--slotted-tone-danger-border)}[data-ui=upload] [data-part=input]{block-size:1px;border:0;clip-path:inset(50%);inline-size:1px;inset-block-start:50%;inset-inline-start:50%;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap}[data-ui=upload] [data-part=input]:focus-visible{outline:none}[data-ui=upload] [data-part=summary]{align-items:center;color:var(--slotted-text-muted);display:flex;flex:none;gap:var(--_gap);justify-content:space-between}[data-ui=upload] [data-part=clear]{appearance:none;flex:none;white-space:nowrap;background-color:transparent;border:0;border-radius:var(--slotted-control-radius, 4px);color:inherit;cursor:pointer;font:inherit;padding-block:var(--slotted-space-1, .125rem);padding-inline:var(--slotted-space-3, .375rem);text-decoration-line:underline;text-underline-offset:.2em;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=upload] [data-part=clear]:enabled:hover{background-color:var(--_state-hover)}[data-ui=upload] [data-part=clear]:enabled:active{background-color:var(--_state-active)}[data-ui=upload] [data-part=clear]:disabled{color:var(--slotted-disabled-foreground);cursor:default}[data-ui=upload] [data-part=clear]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=upload] [data-part=list]{--_row-block-size: calc( max(var(--_preview-size), 2lh) + 2 * var(--_item-inset-block) + 2 * var(--_border-width) + var(--_item-gap) );display:flex;flex-direction:column;gap:var(--_item-gap);list-style:none;margin:0;flex:1 1 auto;min-block-size:var(--_row-block-size);max-block-size:calc(var(--slotted-upload-visible-rows, 6) * var(--_row-block-size));overflow-y:auto;padding:0}[data-ui=upload] [data-part=item]{align-items:center;flex:none;background-color:var(--_item-surface);border:var(--_border-width) solid var(--_item-border);border-radius:var(--_item-radius);column-gap:var(--_gap);display:grid;grid-template-areas:\"preview body actions\" \"message message message\";grid-template-columns:auto minmax(0,1fr) auto;overflow:hidden;padding-block:var(--_item-inset-block);padding-inline:var(--_item-inset-inline);position:relative;row-gap:var(--_line-gap);transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),border-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),opacity var(--slotted-duration-medium) var(--slotted-easing-enter),translate var(--slotted-duration-medium) var(--slotted-easing-enter)}@starting-style{[data-ui=upload] [data-part=item]{opacity:0;translate:0 calc(-1 * var(--slotted-space-2, .25rem))}}[data-ui=upload] [data-part=item][data-status=success]{--_status-text: var(--slotted-tone-success-text)}[data-ui=upload] [data-part=item][data-status=ready]{border-style:dashed}[data-ui=upload] [data-part=item][data-status=paused],[data-ui=upload] [data-part=item][data-status=stalled]{--_status-text: var(--slotted-tone-warning-text)}[data-ui=upload] [data-part=item][data-status=rejected],[data-ui=upload] [data-part=item][data-status=error]{--_status-text: var(--slotted-tone-danger-text);--_item-surface: var(--slotted-tone-danger-surface);--_item-border: var(--slotted-tone-danger-border)}[data-ui=upload] [data-part=item][data-status=canceled]{--_status-text: var(--slotted-text-muted)}[data-ui=upload][data-disabled] [data-part=item]{color:var(--slotted-disabled-foreground)}[data-ui=upload] [data-part=preview]{align-items:center;background-color:var(--_kind-tile);block-size:var(--_preview-size);border-radius:var(--slotted-upload-preview-radius, var(--slotted-radius-sm, 4px));color:var(--slotted-upload-kind-foreground);display:inline-flex;flex-direction:column;grid-area:preview;inline-size:var(--_preview-size);justify-content:center;overflow:hidden}[data-ui=upload] [data-part=preview]>img{block-size:100%;inline-size:100%;object-fit:cover}[data-ui=upload] [data-part=preview]>[data-ui=icon]{--slotted-icon-size: var(--_glyph-size)}[data-ui=upload] [data-part=preview][data-kind=pdf]{--_kind-tile: var(--slotted-upload-kind-pdf)}[data-ui=upload] [data-part=preview][data-kind=document]{--_kind-tile: var(--slotted-upload-kind-document)}[data-ui=upload] [data-part=preview][data-kind=spreadsheet]{--_kind-tile: var(--slotted-upload-kind-spreadsheet)}[data-ui=upload] [data-part=preview][data-kind=presentation]{--_kind-tile: var(--slotted-upload-kind-presentation)}[data-ui=upload] [data-part=preview][data-kind=image]{--_kind-tile: var(--slotted-upload-kind-image)}[data-ui=upload] [data-part=preview][data-kind=video]{--_kind-tile: var(--slotted-upload-kind-video)}[data-ui=upload] [data-part=preview][data-kind=audio]{--_kind-tile: var(--slotted-upload-kind-audio)}[data-ui=upload] [data-part=preview][data-kind=archive]{--_kind-tile: var(--slotted-upload-kind-archive)}[data-ui=upload] [data-part=item]>[data-part=body]{display:flex;flex-direction:column;gap:var(--_line-gap);grid-area:body;min-inline-size:0}[data-ui=upload] [data-part=filename]{display:flex;font-weight:var(--slotted-upload-name-font-weight, var(--slotted-font-weight-medium, 500));min-inline-size:0;unicode-bidi:isolate}[data-ui=upload] button[data-part=filename]{appearance:none;background:none;border:0;color:inherit;cursor:pointer;font-family:inherit;font-size:inherit;line-height:inherit;padding:0;text-align:start;transition:translate var(--slotted-duration-instant) var(--slotted-control-transition-easing)}[data-ui=upload] button[data-part=filename]:enabled:hover{text-decoration-line:underline;text-underline-offset:.2em}[data-ui=upload] button[data-part=filename]:enabled:active{text-decoration-line:underline;text-underline-offset:.2em;translate:0 var(--slotted-border-width-thin, 1px)}[data-ui=upload] button[data-part=filename]:focus-visible{border-radius:var(--slotted-control-radius, 4px);outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=upload][data-layout=grid] button[data-part=preview]{appearance:none;border:0;cursor:pointer;padding:0}[data-ui=upload] [data-part=name]{flex:0 1 auto;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-ui=upload] [data-part=extension]{flex:none}[data-ui=upload] [data-part=detail]{align-items:baseline;color:var(--slotted-text-muted);display:flex;flex-wrap:wrap;font-size:var(--slotted-font-size-xs, .75rem);line-height:var(--_leading);min-inline-size:0}[data-ui=upload] [data-part=meta]{font-variant-numeric:tabular-nums;white-space:nowrap}[data-ui=upload] [data-part=status]{color:var(--_status-text);font-weight:var(--slotted-upload-status-font-weight, var(--slotted-font-weight-medium, 500));min-inline-size:0}[data-ui=upload] [data-part=meta]:has(+[data-part=status]):after{color:var(--slotted-text-muted);content:\" \\b7\";margin-inline-end:.4em}[data-ui=upload] [data-part=message]{color:var(--_status-text);font-size:var(--slotted-font-size-xs, .75rem);line-height:var(--_leading);grid-area:message;margin:0}[data-ui=upload] [data-part=progress]{display:block;inset-block-end:0;inset-inline:0;position:absolute}[data-ui=upload] [data-part=actions]{display:inline-flex;gap:var(--slotted-space-1, .125rem);grid-area:actions;justify-content:flex-end}[data-ui=upload] [data-part=viewerExternal],[data-ui=upload] [data-part=viewerClose],[data-ui=upload] [data-part=start],[data-ui=upload] [data-part=pause],[data-ui=upload] [data-part=retry],[data-ui=upload] [data-part=cancel],[data-ui=upload] [data-part=remove]{align-items:center;appearance:none;background-color:transparent;block-size:var(--_action-size);border:0;border-radius:var(--slotted-upload-action-radius, var(--slotted-control-radius, 4px));color:inherit;cursor:pointer;display:inline-flex;flex:none;font:inherit;inline-size:var(--_action-size);justify-content:center;padding:0;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=upload] [data-part=viewerExternal]>[data-ui=icon],[data-ui=upload] [data-part=viewerClose]>[data-ui=icon],[data-ui=upload] [data-part=start]>[data-ui=icon],[data-ui=upload] [data-part=pause]>[data-ui=icon],[data-ui=upload] [data-part=retry]>[data-ui=icon],[data-ui=upload] [data-part=cancel]>[data-ui=icon],[data-ui=upload] [data-part=remove]>[data-ui=icon]{--slotted-icon-size: var(--_action-glyph-size)}@media(pointer:coarse){[data-ui=upload] :is([data-part=viewerExternal],[data-part=viewerClose],[data-part=start],[data-part=pause],[data-part=retry],[data-part=cancel],[data-part=remove]){position:relative}[data-ui=upload] :is([data-part=viewerExternal],[data-part=viewerClose],[data-part=start],[data-part=pause],[data-part=retry],[data-part=cancel],[data-part=remove]):after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2));position:absolute}[data-ui=upload] :is([data-part=viewerExternal],[data-part=start],[data-part=pause],[data-part=retry],[data-part=cancel]):has(+:is([data-part=viewerClose],[data-part=pause],[data-part=retry],[data-part=cancel],[data-part=remove]):not([hidden])):after{inset-inline-end:0}[data-ui=upload] :is([data-part=viewerExternal],[data-part=start],[data-part=pause],[data-part=retry],[data-part=cancel]):not([hidden])+:is([data-part=viewerClose],[data-part=pause],[data-part=retry],[data-part=cancel],[data-part=remove]):after{inset-inline-start:0}}[data-ui=upload] [data-part=viewerExternal]:enabled:hover,[data-ui=upload] [data-part=viewerClose]:enabled:hover,[data-ui=upload] [data-part=start]:enabled:hover,[data-ui=upload] [data-part=pause]:enabled:hover,[data-ui=upload] [data-part=retry]:enabled:hover,[data-ui=upload] [data-part=cancel]:enabled:hover,[data-ui=upload] [data-part=remove]:enabled:hover{background-color:var(--_state-hover)}[data-ui=upload] [data-part=viewerExternal]:enabled:active,[data-ui=upload] [data-part=viewerClose]:enabled:active,[data-ui=upload] [data-part=start]:enabled:active,[data-ui=upload] [data-part=pause]:enabled:active,[data-ui=upload] [data-part=retry]:enabled:active,[data-ui=upload] [data-part=cancel]:enabled:active,[data-ui=upload] [data-part=remove]:enabled:active{background-color:var(--_state-active)}[data-ui=upload] [data-part=viewerExternal]:disabled,[data-ui=upload] [data-part=viewerClose]:disabled,[data-ui=upload] [data-part=start]:disabled,[data-ui=upload] [data-part=pause]:disabled,[data-ui=upload] [data-part=retry]:disabled,[data-ui=upload] [data-part=cancel]:disabled,[data-ui=upload] [data-part=remove]:disabled{color:var(--slotted-disabled-foreground);cursor:default}[data-ui=upload] [data-part=viewerExternal]:focus-visible,[data-ui=upload] [data-part=viewerClose]:focus-visible,[data-ui=upload] [data-part=start]:focus-visible,[data-ui=upload] [data-part=pause]:focus-visible,[data-ui=upload] [data-part=retry]:focus-visible,[data-ui=upload] [data-part=cancel]:focus-visible,[data-ui=upload] [data-part=remove]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(-1 * var(--slotted-focus-ring-width, 2px))}[data-ui=upload][data-part=viewer]{background-color:var(--slotted-surface);block-size:100%;display:grid;grid-row:1 / -1;grid-template-rows:auto minmax(0,1fr);inline-size:100%}[data-ui=upload] [data-part=viewerHeader]{align-items:center;border-block-end:var(--_border-width) solid var(--slotted-border-subtle);column-gap:var(--_gap);display:grid;grid-template-columns:minmax(0,1fr) auto;padding-block:var(--slotted-space-4, .5rem);padding-inline:var(--slotted-space-6, 1rem)}[data-ui=upload] [data-part=viewerTitle]{font-size:var(--slotted-font-size-md, .875rem);line-height:var(--_leading);font-weight:var(--slotted-font-weight-semibold, 600);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-ui=upload] [data-part=viewerMeta]{color:var(--slotted-text-muted);font-size:var(--slotted-font-size-xs, .75rem);line-height:var(--_leading)}[data-ui=upload] [data-part=viewerActions]{align-items:center;display:inline-flex;gap:var(--slotted-space-1, .125rem)}[data-ui=upload] [data-part=viewerStage]{background-color:var(--slotted-surface-sunken);display:grid;min-block-size:0;overflow:hidden;padding:var(--slotted-space-6, 1rem);place-items:center;position:relative}[data-ui=upload] [data-part=viewerStage]>img,[data-ui=upload] [data-part=viewerStage]>iframe{align-self:stretch;block-size:auto;inline-size:auto;justify-self:stretch;min-block-size:0;min-inline-size:0}[data-ui=upload] [data-part=viewerStage]>img{object-fit:contain}[data-ui=upload] [data-part=viewerStage]>iframe{background-color:var(--slotted-surface);border:0}[data-ui=upload] [data-part=viewerStage]>video,[data-ui=upload] [data-part=viewerStage]>audio{max-block-size:100%;max-inline-size:100%;min-block-size:0;min-inline-size:0}[data-ui=upload] [data-part=viewerStage]>[data-part=preview]{block-size:var(--slotted-upload-viewer-tile-size, 6rem);inline-size:var(--slotted-upload-viewer-tile-size, 6rem)}[data-ui=upload] [data-part=viewerStage]>[data-part=preview]>[data-ui=icon]{--slotted-icon-size: calc(3 * var(--_glyph-size))}[data-ui=upload] [data-part=viewerStage]>p{color:var(--slotted-text-muted);margin:0;max-inline-size:28ch;text-align:center}[data-ui=upload] [data-part=viewerStage]:has(>[data-part=preview]){align-items:center;display:flex;flex-direction:column;gap:var(--slotted-space-5, .75rem);justify-content:center}[data-ui=upload] [data-part=viewerPrevious],[data-ui=upload] [data-part=viewerNext]{align-items:center;appearance:none;background-color:color-mix(in oklab,var(--slotted-surface) var(--slotted-upload-viewer-control-opacity, 92%),transparent);block-size:var(--slotted-upload-viewer-control-size, 2.5rem);border:0;border-radius:var(--slotted-radius-full, 9999px);box-shadow:var(--slotted-shadow-sm);color:var(--slotted-text);cursor:pointer;display:inline-flex;inline-size:var(--slotted-upload-viewer-control-size, 2.5rem);justify-content:center;padding:0;position:absolute;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),translate var(--slotted-duration-instant) var(--slotted-control-transition-easing)}[data-ui=upload] [data-part=viewerPrevious]{inset-inline-start:var(--slotted-space-5, .75rem)}[data-ui=upload] [data-part=viewerNext]{inset-inline-end:var(--slotted-space-5, .75rem)}[data-ui=upload] [data-part=viewerPrevious]>[data-ui=icon],[data-ui=upload] [data-part=viewerNext]>[data-ui=icon]{--slotted-icon-size: var(--_glyph-size)}[data-ui=upload] [data-part=viewerPrevious]>[data-ui=icon]{rotate:180deg}[data-ui=upload] [data-part=viewerPrevious]:enabled:hover,[data-ui=upload] [data-part=viewerNext]:enabled:hover{background-color:color-mix(in oklab,currentcolor var(--slotted-upload-state-layer-hover, 8%),var(--slotted-surface))}[data-ui=upload] [data-part=viewerPrevious]:enabled:active,[data-ui=upload] [data-part=viewerNext]:enabled:active{background-color:color-mix(in oklab,currentcolor var(--slotted-upload-state-layer-active, 14%),var(--slotted-surface));translate:0 var(--slotted-border-width-thin, 1px)}[data-ui=upload] [data-part=viewerPrevious]:disabled,[data-ui=upload] [data-part=viewerNext]:disabled{color:var(--slotted-disabled-foreground);cursor:default}[data-ui=upload] [data-part=viewerPrevious]:focus-visible,[data-ui=upload] [data-part=viewerNext]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=field] [data-ui=upload]>[data-part=label],[data-ui=field] [data-ui=upload]>[data-part=description],[data-ui=field] [data-ui=upload]>[data-part=message]{display:none}[data-ui=field] [data-ui=upload][data-part=root]{--_section-gap: var(--slotted-upload-field-section-gap, var(--slotted-space-4, .5rem))}[data-ui=upload][data-variant=button] [data-part=trigger]{align-self:start}[data-ui=upload][data-variant=field]:where([data-part=root]){--_zone-edge: var(--slotted-control-border-color);--_zone-ground: var(--slotted-control-surface, Field)}[data-ui=upload][data-variant=field] [data-part=dropzone]{align-items:center;border-style:solid;border-width:var(--slotted-control-border-width, 1px);flex-direction:row;gap:var(--_gap);padding-block:var(--slotted-space-2, .25rem);padding-inline:var(--slotted-space-2, .25rem);text-align:start}[data-ui=upload][data-layout=grid] [data-part=list]{display:grid;gap:var(--_gap);grid-template-columns:repeat(auto-fill,minmax(var(--slotted-upload-card-measure, 9rem),1fr))}[data-ui=upload][data-layout=grid] [data-part=item]{align-content:start;align-items:stretch;container-type:inline-size;grid-template-areas:\"preview\" \"body\" \"message\";grid-template-columns:minmax(0,1fr)}[data-ui=upload][data-layout=grid] [data-part=preview]{block-size:round(down,75cqi,1px);inline-size:100%}[data-ui=upload][data-layout=grid] [data-part=actions]{background-color:color-mix(in oklab,var(--slotted-surface) var(--slotted-upload-card-actions-opacity, 96%),transparent);border-radius:var(--_item-radius);box-shadow:var(--slotted-shadow-xs);inset-block-start:calc(var(--_item-inset-block) + var(--slotted-space-3, .375rem));inset-inline-end:calc(var(--_item-inset-inline) + var(--slotted-space-3, .375rem));margin-block-start:0;min-inline-size:0;padding:var(--slotted-space-1, .125rem);position:absolute}[data-ui=upload][data-layout=grid] [data-part=preview]:not(:has(img)):after{content:attr(data-extension);font-size:var(--slotted-font-size-sm, .8125rem);font-weight:var(--slotted-font-weight-semibold, 600);letter-spacing:.06em;margin-block-start:var(--slotted-space-3, .375rem);text-transform:uppercase}[data-ui=upload][data-layout=grid] [data-part=preview]>[data-ui=icon]{--slotted-icon-size: calc(2 * var(--_glyph-size))}@container slotted-upload (max-width: 30rem){[data-ui=upload] [data-part=summary]{align-items:start;flex-direction:column}}@container slotted-upload (max-width: 26rem){[data-ui=upload] [data-part=item]{grid-template-areas:\"preview body\" \"preview actions\" \"message message\";grid-template-columns:auto minmax(0,1fr)}[data-ui=upload] [data-part=preview]{align-self:start}[data-ui=upload] [data-part=actions]{justify-content:flex-start;margin-inline-start:calc(-1 * var(--slotted-space-2, .25rem))}[data-ui=upload] [data-part=dropzone]{padding-block:var(--slotted-space-6, 1rem)}}@media(forced-colors:active){[data-ui=upload] [data-part=item][data-status=rejected],[data-ui=upload] [data-part=item][data-status=error]{--_item-border: CanvasText}[data-ui=upload] [data-part=preview]{border:var(--_border-width) solid ButtonBorder}[data-ui=upload] [data-part=dropzone][data-drop-target],[data-ui=upload] [data-part=dropzone][data-drop-invalid]{--_zone-border-color: Highlight}[data-ui=upload] :is([data-part=clear],[data-part=viewerExternal],[data-part=viewerClose],[data-part=viewerPrevious],[data-part=viewerNext],[data-part=start],[data-part=pause],[data-part=retry],[data-part=cancel],[data-part=remove]):enabled:is(:hover,:active){background-color:Highlight;color:HighlightText}}@media(forced-colors:active){[data-ui=upload][data-invalid] [data-part=trigger]{outline:var(--_invalid-edge-width) solid CanvasText;outline-offset:calc(-1 * (var(--slotted-control-border-width, 1px) + var(--_invalid-edge-width)))}[data-ui=upload][data-invalid] [data-part=trigger]:has(:focus-visible){outline:calc(var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)) double var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}}}\n", "@property --slotted-progress-indicator-percent{syntax: \"<number>\"; inherits: true; initial-value: 0;}@property --slotted-progress-indicator-buffer-percent{syntax: \"<number>\"; inherits: true; initial-value: 0;}@property --slotted-progress-indicator-travel-start{syntax: \"<number>\"; inherits: true; initial-value: 0;}@property --slotted-progress-indicator-travel-size{syntax: \"<number>\"; inherits: true; initial-value: 100;}@property --slotted-progress-indicator-wave-phase{syntax: \"<number>\"; inherits: true; initial-value: 0;}@property --slotted-progress-indicator-wave-amplitude{syntax: \"<number>\"; inherits: true; initial-value: 1;}@layer slotted.components{[data-ui=progress-indicator][data-part=root]{--_ink: var(--slotted-progress-indicator-indicator-color, var(--slotted-tone-accent-text));--_track-color: var( --slotted-progress-indicator-track-color, color-mix(in oklab, var(--_ink) 24%, var(--slotted-surface)) );--_buffer-color: var(--slotted-progress-indicator-buffer-color, transparent);--_percent: var(--slotted-progress-indicator-percent, 0);--_buffer-percent: var(--slotted-progress-indicator-buffer-percent, 0);--_lead: max(var(--_percent), var(--_buffer-percent));--_font-size: var(--slotted-control-font-size-md, 13px);--_text-gap: var(--slotted-space-4, .5rem);--_row-gap: var(--slotted-space-3, .375rem);--_thickness: var(--slotted-progress-indicator-thickness, var(--slotted-space-2, .25rem));--_size: var(--slotted-progress-indicator-size, var(--slotted-control-height-md, 34px));--_radius: var(--slotted-progress-indicator-radius, var(--slotted-radius-full, 9999px));--_gap: var(--slotted-progress-indicator-gap, var(--_thickness));font-family:var(--slotted-control-font-family, sans-serif);font-size:var(--_font-size);line-height:var(--slotted-line-height-md, 1.5);min-inline-size:0;--_settle: calc(4 * var(--slotted-duration-long));--_spring: linear( 0, .078, .235, .401, .549, .669, .762, .831, .882, .918, .944, .962, .974, .982, .988, .992, .995, .996, .998, .998, 1 );transition:--slotted-progress-indicator-percent var(--_settle) var(--_spring),--slotted-progress-indicator-buffer-percent var(--_settle) var(--_spring)}[data-ui=progress-indicator][hidden]{display:none}[data-ui=progress-indicator][data-part=root][data-tone=secondary]{--_ink: var(--slotted-progress-indicator-indicator-color, var(--slotted-border-strong))}[data-ui=progress-indicator][data-part=root][data-tone=success]{--_ink: var(--slotted-progress-indicator-indicator-color, var(--slotted-tone-success-text))}[data-ui=progress-indicator][data-part=root][data-tone=warning]{--_ink: var(--slotted-progress-indicator-indicator-color, var(--slotted-tone-warning-text))}[data-ui=progress-indicator][data-part=root][data-tone=danger]{--_ink: var(--slotted-progress-indicator-indicator-color, var(--slotted-tone-danger-text))}[data-ui=progress-indicator][data-part=root][data-buffered]{--_buffer-color: var( --slotted-progress-indicator-buffer-color, color-mix(in oklab, var(--_ink) 52%, var(--slotted-surface)) )}[data-ui=progress-indicator][data-part=root][data-size=sm]{--_font-size: var(--slotted-control-font-size-sm, 12px);--_text-gap: var(--slotted-space-3, .375rem);--_thickness: var(--slotted-progress-indicator-thickness, var(--slotted-space-1, .125rem));--_size: var(--slotted-progress-indicator-size, var(--slotted-control-height-sm, 30px))}[data-ui=progress-indicator][data-part=root][data-size=lg]{--_font-size: var(--slotted-control-font-size-lg, 14px);--_row-gap: var(--slotted-space-4, .5rem);--_thickness: var(--slotted-progress-indicator-thickness, var(--slotted-space-4, .5rem));--_size: var(--slotted-progress-indicator-size, var(--slotted-control-height-lg, 38px))}[data-ui=progress-indicator] [data-part=label]{color:var(--slotted-text, CanvasText);min-inline-size:0;overflow-wrap:break-word}[data-ui=progress-indicator] [data-part=value]{color:var(--slotted-text-muted, GrayText);font-variant-numeric:tabular-nums;white-space:nowrap}[data-ui=progress-indicator][data-part=root][data-shape=linear]{align-items:baseline;column-gap:var(--_text-gap);display:grid;grid-template-columns:1fr auto;row-gap:var(--_row-gap)}[data-ui=progress-indicator][data-shape=linear]>[data-part=label]{grid-column:1}[data-ui=progress-indicator][data-shape=linear]>[data-part=value]{grid-column:2;justify-self:end}[data-ui=progress-indicator][data-shape=linear]>[data-part=track]{grid-column:1 / -1}[data-ui=progress-indicator][data-shape=linear] [data-part=track]{background-color:var(--_buffer-color);block-size:var(--_thickness);border-radius:var(--_radius);inline-size:100%;isolation:isolate;overflow-x:clip;overflow-y:visible;position:relative}[data-ui=progress-indicator][data-shape=linear] [data-part=track]:before{background-color:var(--_track-color);border-radius:inherit;content:\"\";inset-block:0;inset-inline-end:0;inset-inline-start:calc(1% * var(--_lead) + var(--_gap));position:absolute}[data-ui=progress-indicator][data-shape=linear] [data-part=track]:after{background-color:var(--_ink);border-radius:var(--slotted-radius-full, 9999px);content:\"\";inline-size:var(--_thickness);inset-block:0;inset-inline-end:0;position:absolute}[data-ui=progress-indicator][data-shape=linear] [data-part=indicator]{background-color:var(--_ink);block-size:100%;border-radius:inherit;inline-size:calc(1% * var(--_percent));position:relative}@container style(--slotted-progress-indicator-percent: 100){[data-ui=progress-indicator][data-shape=linear] [data-part=track]:before,[data-ui=progress-indicator][data-shape=linear] [data-part=track]:after{content:none}}[data-ui=progress-indicator][data-shape=linear][data-indeterminate] [data-part=track]:before{inset-inline-start:0}[data-ui=progress-indicator][data-shape=linear][data-indeterminate] [data-part=track]:after{content:none}[data-ui=progress-indicator][data-shape=linear][data-indeterminate] [data-part=indicator]{animation:slotted-progress-indicator-travel var(--slotted-duration-loop-slow) var(--slotted-easing-standard) infinite;inline-size:calc(1% * var(--slotted-progress-indicator-travel-size));inset-block:0;inset-inline-start:calc(1% * var(--slotted-progress-indicator-travel-start));position:absolute}@keyframes slotted-progress-indicator-travel{0%{--slotted-progress-indicator-travel-size: 14;--slotted-progress-indicator-travel-start: -14}45%{--slotted-progress-indicator-travel-size: 46}to{--slotted-progress-indicator-travel-size: 14;--slotted-progress-indicator-travel-start: 100}}[data-ui=progress-indicator][data-part=root][data-placement=page]{--_radius: var(--slotted-progress-indicator-radius, var(--slotted-radius-none, 0px));--_track-color: var(--slotted-progress-indicator-track-color, transparent);--_gap: var(--slotted-progress-indicator-gap, 0);inset-block-start:0;inset-inline:0;position:fixed;z-index:var(--slotted-z-index-sticky, 100)}[data-ui=progress-indicator][data-placement=page] [data-part=track]:after{content:none}[data-ui=progress-indicator][data-part=root]:is([data-placement=edge-start],[data-placement=edge-end]){--_radius: var(--slotted-progress-indicator-radius, var(--slotted-radius-none, 0px));--_track-color: var(--slotted-progress-indicator-track-color, transparent);--_gap: var(--slotted-progress-indicator-gap, 0);inset-inline:0;position:var(--slotted-progress-indicator-position, absolute)}[data-ui=progress-indicator][data-part=root][data-placement=edge-start]{inset-block-start:0}[data-ui=progress-indicator][data-part=root][data-placement=edge-end]{inset-block-end:0}[data-ui=progress-indicator]:is([data-placement=edge-start],[data-placement=edge-end]) [data-part=track]:after{content:none}[data-ui=progress-indicator][data-part=root]:is([data-placement=page],[data-placement=edge-start],[data-placement=edge-end]){--_withdrawn: inset(0 0 100% 0);clip-path:inset(0);transition:--slotted-progress-indicator-percent var(--_settle) var(--_spring),--slotted-progress-indicator-buffer-percent var(--_settle) var(--_spring),clip-path var(--slotted-duration-medium) var(--slotted-easing-enter),opacity var(--slotted-duration-medium) var(--slotted-easing-enter)}@starting-style{[data-ui=progress-indicator][data-part=root]:is([data-placement=page],[data-placement=edge-start],[data-placement=edge-end]){clip-path:var(--_withdrawn);opacity:0}}[data-ui=progress-indicator][data-part=root][data-placement=edge-end]{--_withdrawn: inset(100% 0 0 0)}[data-ui=progress-indicator][data-part=root]:is([data-placement=page],[data-placement=edge-start],[data-placement=edge-end])[hidden]{clip-path:var(--_withdrawn);opacity:0;transition:clip-path var(--slotted-duration-short) var(--slotted-easing-exit),opacity var(--slotted-duration-short) var(--slotted-easing-exit),display var(--slotted-duration-short) allow-discrete}[data-ui=progress-indicator][data-part=root][data-shape=circular],[data-ui=progress-indicator][data-part=root][data-shape=morph]{align-items:center;column-gap:var(--_text-gap);display:inline-flex}[data-ui=progress-indicator][data-shape=circular] svg{--_stroke: var(--slotted-progress-indicator-stroke, 6);block-size:var(--_size);flex:none;inline-size:var(--_size);rotate:-90deg}[data-ui=progress-indicator][data-shape=circular] [data-part=track],[data-ui=progress-indicator][data-shape=circular] [data-part=indicator]{fill:none;stroke-linecap:round;stroke-width:var(--_stroke)}[data-ui=progress-indicator][data-shape=circular] [data-part=indicator]{stroke:var(--_ink);stroke-dasharray:var(--_percent) 100;stroke-opacity:clamp(0,calc(var(--_percent) * 1000),1)}[data-ui=progress-indicator][data-shape=circular] [data-part=track]{--_arc-gap: calc(3.2*clamp(0, calc(var(--_percent) * 1000), 1)) ;stroke:var(--_track-color);stroke-dasharray:calc(100 - var(--_percent) - 2 * var(--_arc-gap)) 100;stroke-dashoffset:calc(-1 * (var(--_percent) + var(--_arc-gap)))}@container style(--slotted-progress-indicator-percent: 100){[data-ui=progress-indicator][data-shape=circular] [data-part=track]{stroke:transparent}}[data-ui=progress-indicator][data-shape=circular][data-indeterminate] [data-part=track]{stroke:transparent}[data-ui=progress-indicator][data-shape=circular][data-indeterminate] svg{animation:slotted-progress-indicator-turn var(--slotted-duration-loop) linear infinite}[data-ui=progress-indicator][data-shape=circular][data-indeterminate] [data-part=indicator]{animation:slotted-progress-indicator-sweep var(--slotted-duration-loop-slow) var(--slotted-easing-standard) infinite;stroke-opacity:1;transition:none}@keyframes slotted-progress-indicator-turn{0%{rotate:-90deg}to{rotate:270deg}}@keyframes slotted-progress-indicator-sweep{0%{stroke-dasharray:4 100;stroke-dashoffset:0}50%{stroke-dasharray:62 100;stroke-dashoffset:-18}to{stroke-dasharray:4 100;stroke-dashoffset:-100}}[data-ui=progress-indicator][data-part=root][data-wave]{--slotted-progress-indicator-wave-amplitude: min( clamp(0, calc((var(--_percent) - 6) / 10), 1), clamp(0, calc((96 - var(--_percent)) / 12), 1) );animation:slotted-progress-indicator-wave var(--slotted-duration-loop) linear infinite}[data-ui=progress-indicator][data-part=root][data-wave][data-indeterminate]{--slotted-progress-indicator-wave-amplitude: 1}@keyframes slotted-progress-indicator-wave{0%{--slotted-progress-indicator-wave-phase: 0}to{--slotted-progress-indicator-wave-phase: 1}}[data-ui=progress-indicator][data-shape=linear][data-wave] [data-part=track]{container-type:inline-size;margin-block:calc(.75 * var(--_thickness))}[data-ui=progress-indicator][data-shape=linear][data-wave] [data-part=indicator]{--_wave-length: 10;background-color:transparent;block-size:calc(2.5 * var(--_thickness));inline-size:calc(1200 * var(--_thickness));inset-block:calc(-.75 * var(--_thickness)) auto;inset-inline-start:0;overflow:visible;position:absolute}[data-ui=progress-indicator][data-shape=linear][data-wave] [data-part=indicator]:dir(rtl){transform:scaleX(-1)}[data-ui=progress-indicator][data-shape=linear][data-wave] [data-part=indicator] path{--_track-units: tan(atan2(100cqi, var(--_thickness)));--_window-start: 0;--_window-size: var(--_percent);--_hidden: calc(var(--slotted-progress-indicator-wave-phase) * var(--_wave-length));fill:none;stroke:var(--_ink);stroke-dasharray:max(0,calc(var(--_window-size) * var(--_track-units) / 100 - 1)) 100000;stroke-dashoffset:calc(-1 * (var(--_hidden) + var(--_window-start) * var(--_track-units) / 100 + .5));stroke-linecap:round;stroke-opacity:clamp(0,calc(var(--_window-size) * 1000),1);stroke-width:1;transform:translate(calc(-1 * var(--_hidden) * 1px))}[data-ui=progress-indicator][data-shape=linear][data-wave]:not([data-indeterminate]) [data-part=indicator] path{animation:slotted-progress-indicator-flatten-bar var(--_scrub) var(--_taper) both paused;animation-delay:calc(-1 * var(--_scrub) * (1 - var(--slotted-progress-indicator-wave-amplitude)))}[data-ui=progress-indicator][data-shape=linear][data-wave][data-indeterminate] [data-part=indicator]{--_wave-length: 5;animation:slotted-progress-indicator-travel var(--slotted-duration-loop-slow) var(--slotted-easing-standard) infinite}[data-ui=progress-indicator][data-shape=linear][data-wave][data-indeterminate] [data-part=indicator] path{--_window-start: var(--slotted-progress-indicator-travel-start);--_window-size: var(--slotted-progress-indicator-travel-size)}[data-ui=progress-indicator][data-shape=circular][data-wave] svg{--_stroke: var(--slotted-progress-indicator-stroke, 5);block-size:calc(1.2 * var(--_size));inline-size:calc(1.2 * var(--_size));overflow:visible}[data-ui=progress-indicator][data-shape=circular][data-wave] [data-part=indicator]{rotate:calc(-45deg * var(--slotted-progress-indicator-wave-phase));stroke-dasharray:var(--_percent) calc(100 - var(--_percent));stroke-dashoffset:calc(-12.5 * var(--slotted-progress-indicator-wave-phase));transform-box:view-box;transform-origin:50% 50%}[data-ui=progress-indicator][data-shape=circular][data-wave]:not([data-indeterminate]) [data-part=indicator]{animation:slotted-progress-indicator-flatten-ring var(--_scrub) var(--_taper) both paused;animation-delay:calc(-1 * var(--_scrub) * (1 - var(--slotted-progress-indicator-wave-amplitude)))}[data-ui=progress-indicator][data-part=root][data-wave]{--_scrub: var(--slotted-duration-long);--_taper: cubic-bezier(.45, 0, .55, 1)}@keyframes slotted-progress-indicator-flatten-bar{0%{d:path(\"M0-0.75c1.82 0 3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5s3.18 1.5 5 1.5s3.18-1.5 5-1.5\")}to{d:path(\"M0 0c1.82 0 3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0s3.18 0 5 0\")}}@keyframes slotted-progress-indicator-flatten-ring{0%{d:path(\"M45.6 24C45.6 26.83 41.92 28.82 41 31.04C40.08 33.27 41.27 37.27 39.27 39.27C37.27 41.27 33.27 40.08 31.04 41C28.82 41.92 26.83 45.6 24 45.6C21.17 45.6 19.18 41.92 16.96 41C14.73 40.08 10.73 41.27 8.73 39.27C6.73 37.27 7.92 33.27 7 31.04C6.08 28.82 2.4 26.83 2.4 24C2.4 21.17 6.08 19.18 7 16.96C7.92 14.73 6.73 10.73 8.73 8.73C10.73 6.73 14.73 7.92 16.96 7C19.18 6.08 21.17 2.4 24 2.4C26.83 2.4 28.82 6.08 31.04 7C33.27 7.92 37.27 6.73 39.27 8.73C41.27 10.73 40.08 14.73 41 16.96C41.92 19.18 45.6 21.17 45.6 24Z\")}to{d:path(\"M44 24C44 26.62 43.48 29.23 42.48 31.65C41.48 34.07 39.99 36.29 38.14 38.14C36.29 39.99 34.07 41.48 31.65 42.48C29.23 43.48 26.62 44 24 44C21.38 44 18.77 43.48 16.35 42.48C13.93 41.48 11.71 39.99 9.86 38.14C8.01 36.29 6.52 34.07 5.52 31.65C4.52 29.23 4 26.62 4 24C4 21.38 4.52 18.77 5.52 16.35C6.52 13.93 8.01 11.71 9.86 9.86C11.71 8.01 13.93 6.52 16.35 5.52C18.77 4.52 21.38 4 24 4C26.62 4 29.23 4.52 31.65 5.52C34.07 6.52 36.29 8.01 38.14 9.86C39.99 11.71 41.48 13.93 42.48 16.35C43.48 18.77 44 21.38 44 24Z\")}}[data-ui=progress-indicator][data-shape=morph] [data-part=track]{block-size:var(--_size);border-radius:var(--slotted-radius-full, 9999px);display:grid;flex:none;inline-size:var(--_size);place-items:center}[data-ui=progress-indicator][data-shape=morph][data-contained] [data-part=track]{background-color:var(--_track-color)}[data-ui=progress-indicator][data-shape=morph] [data-part=track]{animation:slotted-progress-indicator-drift calc(2 * var(--slotted-duration-loop-slow)) linear infinite}[data-ui=progress-indicator][data-shape=morph] [data-part=indicator]{animation:slotted-progress-indicator-morph calc(2 * var(--slotted-duration-loop-slow)) var(--slotted-easing-emphasized) infinite,slotted-progress-indicator-lurch calc(2 * var(--slotted-duration-loop-slow)) var(--slotted-easing-emphasized) infinite;background-color:var(--_ink);block-size:100%;inline-size:100%}[data-ui=progress-indicator][data-shape=morph][data-contained] [data-part=indicator]{--_shape: round(nearest, calc(.79 * var(--_size)), 2px);block-size:var(--_shape);inline-size:var(--_shape)}@keyframes slotted-progress-indicator-drift{to{rotate:250deg}}@keyframes slotted-progress-indicator-lurch{0%{rotate:0deg}20%{rotate:90deg}40%{rotate:180deg}60%{rotate:270deg}80%{rotate:360deg}to{rotate:450deg}}@keyframes slotted-progress-indicator-morph{0%{clip-path:polygon(50% 0%,59.8% 1%,69.1% 3.8%,77.8% 8.4%,85.4% 14.6%,91.6% 22.2%,96.2% 30.9%,99% 40.2%,100% 50%,99% 59.8%,96.2% 69.1%,91.6% 77.8%,85.4% 85.4%,77.8% 91.6%,69.1% 96.2%,59.8% 99%,50% 100%,40.2% 99%,30.9% 96.2%,22.2% 91.6%,14.6% 85.4%,8.4% 77.8%,3.8% 69.1%,1% 59.8%,0% 50%,1% 40.2%,3.8% 30.9%,8.4% 22.2%,14.6% 14.6%,22.2% 8.4%,30.9% 3.8%,40.2% 1%)}20%{clip-path:polygon(50% 0%,59.3% 3.4%,65.9% 11.5%,69.9% 20.3%,73.6% 26.4%,79.7% 30.1%,88.5% 34.1%,96.6% 40.7%,100% 50%,96.6% 59.3%,88.5% 65.9%,79.7% 69.9%,73.6% 73.6%,69.9% 79.7%,65.9% 88.5%,59.3% 96.6%,50% 100%,40.7% 96.6%,34.1% 88.5%,30.1% 79.7%,26.4% 73.6%,20.3% 69.9%,11.5% 65.9%,3.4% 59.3%,0% 50%,3.4% 40.7%,11.5% 34.1%,20.3% 30.1%,26.4% 26.4%,30.1% 20.3%,34.1% 11.5%,40.7% 3.4%)}40%{clip-path:polygon(50% 6.9%,59.5% 2.1%,68.9% 4.3%,74.7% 13%,77% 23%,80.2% 29.8%,87.4% 34.5%,96% 40.8%,100% 50%,96% 59.2%,87.4% 65.5%,80.2% 70.2%,77% 77%,74.7% 87%,68.9% 95.7%,59.5% 97.9%,50% 93.1%,42.7% 86.7%,35.9% 83.9%,26.8% 84.7%,16.1% 83.9%,8.5% 77.7%,7.7% 67.5%,11.5% 57.7%,13.8% 50%,11.5% 42.3%,7.7% 32.5%,8.5% 22.3%,16.1% 16.1%,26.8% 15.3%,35.9% 16.1%,42.7% 13.3%)}60%{clip-path:polygon(50% 9.7%,56.8% 15.7%,62% 21%,67.1% 24.4%,73.7% 26.3%,82% 28.6%,90.7% 33.2%,97.4% 40.6%,100% 50%,97.4% 59.4%,90.7% 66.8%,82% 71.4%,73.7% 73.7%,67.1% 75.6%,62% 79%,56.8% 84.3%,50% 90.3%,41.1% 94.8%,31.1% 95.5%,22.3% 91.4%,16.6% 83.4%,14.9% 73.5%,16.2% 64%,18.3% 56.3%,19.4% 50%,18.3% 43.7%,16.2% 36%,14.9% 26.5%,16.6% 16.6%,22.3% 8.6%,31.1% 4.5%,41.1% 5.2%)}80%{clip-path:polygon(50% 23.1%,55.4% 22.7%,61.6% 22%,68.9% 21.7%,77.2% 22.8%,85.7% 26.2%,93.1% 32.2%,98.2% 40.4%,100% 50%,98.2% 59.6%,93.1% 67.8%,85.7% 73.8%,77.2% 77.2%,68.9% 78.3%,61.6% 78%,55.4% 77.3%,50% 76.9%,44.6% 77.3%,38.4% 78%,31.1% 78.3%,22.8% 77.2%,14.3% 73.8%,6.9% 67.8%,1.8% 59.6%,0% 50%,1.8% 40.4%,6.9% 32.2%,14.3% 26.2%,22.8% 22.8%,31.1% 21.7%,38.4% 22%,44.6% 22.7%)}to{clip-path:polygon(50% 0%,59.8% 1%,69.1% 3.8%,77.8% 8.4%,85.4% 14.6%,91.6% 22.2%,96.2% 30.9%,99% 40.2%,100% 50%,99% 59.8%,96.2% 69.1%,91.6% 77.8%,85.4% 85.4%,77.8% 91.6%,69.1% 96.2%,59.8% 99%,50% 100%,40.2% 99%,30.9% 96.2%,22.2% 91.6%,14.6% 85.4%,8.4% 77.8%,3.8% 69.1%,1% 59.8%,0% 50%,1% 40.2%,3.8% 30.9%,8.4% 22.2%,14.6% 14.6%,22.2% 8.4%,30.9% 3.8%,40.2% 1%)}}@media(prefers-reduced-motion:reduce){[data-ui=progress-indicator][data-part=root],[data-ui=progress-indicator] [data-part=indicator]:not(path),[data-ui=progress-indicator] [data-part=track],[data-ui=progress-indicator] svg{animation:none!important}[data-ui=progress-indicator][data-shape=linear][data-indeterminate] [data-part=indicator]{--slotted-progress-indicator-travel-size: 46;--slotted-progress-indicator-travel-start: 27}[data-ui=progress-indicator][data-shape=circular][data-indeterminate] [data-part=indicator]{stroke-dasharray:34 100}[data-ui=progress-indicator][data-part=root][data-wave]{animation:none}}@media(forced-colors:active){[data-ui=progress-indicator][data-shape=linear] [data-part=track]{background-color:Canvas;outline:var(--slotted-border-width-thin, 1px) solid ButtonBorder;outline-offset:calc(-1 * var(--slotted-border-width-thin, 1px))}[data-ui=progress-indicator][data-shape=linear] [data-part=track]:before,[data-ui=progress-indicator][data-shape=linear] [data-part=track]:after{content:none}[data-ui=progress-indicator]:is([data-placement=edge-start],[data-placement=edge-end]) [data-part=track]{background-color:transparent;outline:none}[data-ui=progress-indicator] [data-part=indicator]{background-color:Highlight}[data-ui=progress-indicator][data-shape=linear][data-wave] [data-part=indicator]{background-color:transparent}[data-ui=progress-indicator][data-shape=linear][data-wave] [data-part=indicator] path{stroke:Highlight}[data-ui=progress-indicator][data-shape=circular] [data-part=indicator]{background-color:transparent;stroke:Highlight}[data-ui=progress-indicator][data-shape=circular] [data-part=track]{stroke:ButtonBorder}[data-ui=progress-indicator][data-shape=morph][data-contained] [data-part=track]{background-color:Canvas}}}\n"] }]
|
|
1492
|
+
}], ctorParameters: () => [], propDecorators: { files: [{ type: i0.Input, args: [{ isSignal: true, alias: "files", required: false }] }, { type: i0.Output, args: ["filesChange"] }], viewing: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewing", required: false }] }, { type: i0.Output, args: ["viewingChange"] }], filesChange2: [{ type: i0.Output, args: ["filesRequest"] }], viewingRequest: [{ type: i0.Output, args: ["viewingRequest"] }], reject: [{ type: i0.Output, args: ["reject"] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], directory: [{ type: i0.Input, args: [{ isSignal: true, alias: "directory", required: false }] }], capture: [{ type: i0.Input, args: [{ isSignal: true, alias: "capture", required: false }] }], maxFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFiles", required: false }] }], minFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "minFiles", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }], minSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "minSize", required: false }] }], maxTotalSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxTotalSize", required: false }] }], fileValidator: [{ type: i0.Input, args: [{ isSignal: true, alias: "validate", required: false }] }], transform: [{ type: i0.Input, args: [{ isSignal: true, alias: "transform", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], preview: [{ type: i0.Input, args: [{ isSignal: true, alias: "preview", required: false }] }], view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: false }] }], duplicates: [{ type: i0.Input, args: [{ isSignal: true, alias: "duplicates", required: false }] }], clickToBrowse: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickToBrowse", required: false }] }], allowDrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowDrop", required: false }] }], allowPaste: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowPaste", required: false }] }], preventDocumentDrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "preventDocumentDrop", required: false }] }], autoUpload: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoUpload", required: false }] }], pendingBlocksSubmit: [{ type: i0.Input, args: [{ isSignal: true, alias: "pendingBlocksSubmit", required: false }] }], adapter: [{ type: i0.Input, args: [{ isSignal: true, alias: "adapter", required: false }] }], concurrency: [{ type: i0.Input, args: [{ isSignal: true, alias: "concurrency", required: false }] }], retries: [{ type: i0.Input, args: [{ isSignal: true, alias: "retries", required: false }] }], retryDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "retryDelay", required: false }] }], stallAfter: [{ type: i0.Input, args: [{ isSignal: true, alias: "stallAfter", required: false }] }], maxRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRows", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], fileKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileKey", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }] } });
|
|
1493
|
+
function optionalNumber(value) {
|
|
1494
|
+
return value === undefined || value === null || value === '' ? undefined : numberAttribute(value);
|
|
1495
|
+
}
|
|
1496
|
+
function optionalBoolean(value) {
|
|
1497
|
+
return value === undefined ? undefined : booleanAttribute(value);
|
|
1498
|
+
}
|
|
1499
|
+
/**
|
|
1500
|
+
* The half of `accept` a drag can answer. A token that names an extension says
|
|
1501
|
+
* nothing about an item whose name the platform has not given us yet.
|
|
1502
|
+
*/
|
|
1503
|
+
function matchesTypeOnly(type, accept) {
|
|
1504
|
+
const tokens = accept
|
|
1505
|
+
.split(',')
|
|
1506
|
+
.map((token) => token.trim().toLowerCase())
|
|
1507
|
+
.filter((token) => token.length > 0 && !token.startsWith('.'));
|
|
1508
|
+
if (tokens.length === 0)
|
|
1509
|
+
return true;
|
|
1510
|
+
const [group, subtype] = type.toLowerCase().split('/');
|
|
1511
|
+
return tokens.some((token) => {
|
|
1512
|
+
const [tokenGroup, tokenSubtype] = token.split('/');
|
|
1513
|
+
return ((tokenGroup === '*' || tokenGroup === group) &&
|
|
1514
|
+
(tokenSubtype === '*' || tokenSubtype === subtype));
|
|
1515
|
+
});
|
|
1516
|
+
}
|
|
1517
|
+
|
|
1518
|
+
/**
|
|
1519
|
+
* Generated bundle index. Do not edit.
|
|
1520
|
+
*/
|
|
1521
|
+
|
|
1522
|
+
export { SlUpload, SlUploadViewer, UPLOAD_DEFAULTS, injectUploadDefaults, provideUploadDefaults, uploadFormatters };
|
|
1523
|
+
//# sourceMappingURL=slotted-angular-upload.mjs.map
|