@slotted/angular 0.0.0-stage → 0.1.0-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/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,692 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { InjectionToken, inject, booleanAttribute, computed, signal, effect, ViewEncapsulation, Component, input, numberAttribute, contentChild, ElementRef, DestroyRef, forwardRef, ChangeDetectionStrategy, output, isDevMode } from '@angular/core';
|
|
3
|
+
import { injectMessages } from '@slotted/angular/i18n';
|
|
4
|
+
import { buttonMessages } from '@slotted/core/i18n';
|
|
5
|
+
import { createControllable } from '@slotted/core/state';
|
|
6
|
+
|
|
7
|
+
const BUTTON_DEFAULTS_TOKEN = new InjectionToken('slotted button defaults', {
|
|
8
|
+
providedIn: 'root',
|
|
9
|
+
factory: () => ({}),
|
|
10
|
+
});
|
|
11
|
+
/**
|
|
12
|
+
* An application decides once how its actions are painted and how large they
|
|
13
|
+
* are, rather than repeating three inputs on every button. A button that states
|
|
14
|
+
* an axis itself still wins: an explicit input is never overridden by the
|
|
15
|
+
* token.
|
|
16
|
+
*/
|
|
17
|
+
function provideButtonDefaults(defaults) {
|
|
18
|
+
return { provide: BUTTON_DEFAULTS_TOKEN, useValue: defaults };
|
|
19
|
+
}
|
|
20
|
+
function injectButtonDefaults() {
|
|
21
|
+
return inject(BUTTON_DEFAULTS_TOKEN);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
/** A state attribute is present or absent; it never carries a value. */
|
|
25
|
+
function stateAttribute(active) {
|
|
26
|
+
return active ? '' : null;
|
|
27
|
+
}
|
|
28
|
+
function blockActivation(event) {
|
|
29
|
+
event.preventDefault();
|
|
30
|
+
event.stopImmediatePropagation();
|
|
31
|
+
event.stopPropagation();
|
|
32
|
+
}
|
|
33
|
+
/**
|
|
34
|
+
* A native button fires the same `click` for a pointer, for Space and for
|
|
35
|
+
* Enter, which is exactly why the family uses one — and why the reason a
|
|
36
|
+
* toggle moved has to be recovered from the event. A click synthesised by the
|
|
37
|
+
* keyboard reports no detail; a real one reports the click count.
|
|
38
|
+
*/
|
|
39
|
+
function activationReason(event) {
|
|
40
|
+
return event instanceof MouseEvent && event.detail > 0 ? 'pointer' : 'keyboard';
|
|
41
|
+
}
|
|
42
|
+
/**
|
|
43
|
+
* Absence has to survive the transform. `booleanAttribute` maps an unset input
|
|
44
|
+
* to `false`, and `false` is a value: it would make every icon button announce
|
|
45
|
+
* itself as an unpressed toggle.
|
|
46
|
+
*/
|
|
47
|
+
function optionalBoolean(value) {
|
|
48
|
+
return value === undefined ? undefined : booleanAttribute(value);
|
|
49
|
+
}
|
|
50
|
+
/**
|
|
51
|
+
* An explicit input wins over the injected default, and the injected default
|
|
52
|
+
* over the member's own. The three are read in that order rather than merged,
|
|
53
|
+
* so an application that provides only `size` leaves each member the tone and
|
|
54
|
+
* the paint it was designed with.
|
|
55
|
+
*/
|
|
56
|
+
function resolveAppearance(inputs, fallback) {
|
|
57
|
+
const provided = injectButtonDefaults();
|
|
58
|
+
return {
|
|
59
|
+
size: computed(() => inputs.size() ?? provided.size ?? fallback.size),
|
|
60
|
+
tone: computed(() => inputs.tone() ?? provided.tone ?? fallback.tone),
|
|
61
|
+
variant: computed(() => inputs.variant() ?? provided.variant ?? fallback.variant),
|
|
62
|
+
};
|
|
63
|
+
}
|
|
64
|
+
/**
|
|
65
|
+
* Being unavailable and being unreachable are two decisions the platform only
|
|
66
|
+
* offers together. `disabled` takes the control out of the tab sequence, which
|
|
67
|
+
* takes its tooltip and its explanation with it; `aria-disabled` announces the
|
|
68
|
+
* same thing and leaves it reachable, at the price of a refusal the family has
|
|
69
|
+
* to enforce itself.
|
|
70
|
+
*
|
|
71
|
+
* A waiting control is always the second kind. React Aria's pending button and
|
|
72
|
+
* Primer's loading button agree: focus must survive an action the person just
|
|
73
|
+
* started, or the keyboard lands somewhere else mid-task.
|
|
74
|
+
*/
|
|
75
|
+
function resolveInertness(inputs) {
|
|
76
|
+
return {
|
|
77
|
+
refuses: computed(() => inputs.disabled() || inputs.loading()),
|
|
78
|
+
nativelyDisabled: computed(() => inputs.disabled() && !inputs.focusableWhenDisabled()),
|
|
79
|
+
ariaDisabled: computed(() => (inputs.disabled() && inputs.focusableWhenDisabled()) || inputs.loading() ? 'true' : null),
|
|
80
|
+
};
|
|
81
|
+
}
|
|
82
|
+
/**
|
|
83
|
+
* Whether the ring is drawn yet. The wait itself starts at once — the
|
|
84
|
+
* activation is refused from the first millisecond — but a spinner shown for
|
|
85
|
+
* ninety of them is a flash rather than a status, so the picture can lag the
|
|
86
|
+
* state by as long as the consumer says.
|
|
87
|
+
*/
|
|
88
|
+
function resolveLoadingIndicator(loading, loadingDelay) {
|
|
89
|
+
const elapsed = signal(false, /* @ts-ignore */
|
|
90
|
+
...(ngDevMode ? [{ debugName: "elapsed" }] : /* istanbul ignore next */ []));
|
|
91
|
+
effect((onCleanup) => {
|
|
92
|
+
if (!loading() || loadingDelay() <= 0) {
|
|
93
|
+
elapsed.set(false);
|
|
94
|
+
return;
|
|
95
|
+
}
|
|
96
|
+
const timer = setTimeout(() => elapsed.set(true), loadingDelay());
|
|
97
|
+
onCleanup(() => clearTimeout(timer));
|
|
98
|
+
});
|
|
99
|
+
return computed(() => loading() && (loadingDelay() <= 0 || elapsed()));
|
|
100
|
+
}
|
|
101
|
+
const BUTTON_WAIT = new InjectionToken('slotted button wait');
|
|
102
|
+
/**
|
|
103
|
+
* Markers rather than wrappers. The part attribute lands on the element the
|
|
104
|
+
* consumer already wrote, so an absent icon leaves no empty box behind and the
|
|
105
|
+
* rendered tree matches the React binding's exactly.
|
|
106
|
+
*
|
|
107
|
+
* They are components rather than directives because a slot has one thing to
|
|
108
|
+
* render of its own: the ring that stands in for its glyph while the control
|
|
109
|
+
* waits. The glyph is projected under it and fades; it is not taken out, both
|
|
110
|
+
* because Angular cannot take back content the consumer projected and because
|
|
111
|
+
* an element that leaves the flow can move what is beside it.
|
|
112
|
+
*/
|
|
113
|
+
class SlButtonStart {
|
|
114
|
+
wait = inject(BUTTON_WAIT, { optional: true });
|
|
115
|
+
drawsRing = computed(() => this.wait?.waiting() ?? false, /* @ts-ignore */
|
|
116
|
+
...(ngDevMode ? [{ debugName: "drawsRing" }] : /* istanbul ignore next */ []));
|
|
117
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlButtonStart, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
118
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlButtonStart, isStandalone: true, selector: "[slButtonStart]", host: { attributes: { "data-part": "start" } }, exportAs: ["slButtonStart"], ngImport: i0, template: `<ng-content></ng-content>
|
|
119
|
+
@if (drawsRing()) {
|
|
120
|
+
<span
|
|
121
|
+
data-part="indicator"
|
|
122
|
+
data-ui="spinner"
|
|
123
|
+
role="progressbar"
|
|
124
|
+
[attr.aria-label]="wait?.t('loading') ?? null"
|
|
125
|
+
></span>
|
|
126
|
+
}`, isInline: true, styles: ["@layer slotted.components{[data-ui=button]{--_solid: var(--slotted-tone-accent-solid);--_solid-hover: var(--slotted-tone-accent-solid-hover);--_solid-active: var(--slotted-tone-accent-solid-active);--_on-solid: var(--slotted-tone-accent-on-solid);--_text: var(--slotted-tone-accent-text);--_edge: var(--_solid);--_height: var(--slotted-control-height-md, 34px);--_padding-inline: var(--slotted-control-padding-inline-md, 13px);--_font-size: var(--slotted-control-font-size-md, 13px);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_gap: var(--slotted-control-gap-md, 8px);--_padding-inline-visual: max( var(--slotted-space-2, .25rem), calc(var(--_padding-inline) - var(--slotted-space-2, .25rem)) );--_sweep-width: calc(var(--_height) * 2);--_sweep-strength: .34;align-items:center;appearance:none;background:transparent;border:var(--slotted-control-border-width, 1px) solid transparent;border-radius:var(--slotted-control-radius, 4px);box-sizing:border-box;cursor:pointer;display:inline-flex;font-family:var(--slotted-control-font-family, ui-sans-serif, system-ui, sans-serif);font-size:var(--_font-size);font-weight:var(--slotted-control-font-weight, 600);gap:var(--_gap);justify-content:center;letter-spacing:var(--slotted-control-letter-spacing, 0);line-height:var(--slotted-control-line-height, 1);max-inline-size:100%;min-block-size:var(--_height);padding-block:0;padding-inline:var(--_padding-inline);position:relative;text-align:center;text-decoration:none;text-wrap:balance;touch-action:manipulation;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),box-shadow var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),transform var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);-webkit-user-select:none;user-select:none;vertical-align:middle;-webkit-tap-highlight-color:transparent}[data-ui=button][data-tone=secondary]{--_solid: var(--slotted-tone-secondary-solid);--_solid-hover: var(--slotted-tone-secondary-solid-hover);--_solid-active: var(--slotted-tone-secondary-solid-active);--_on-solid: var(--slotted-tone-secondary-on-solid);--_text: var(--slotted-tone-secondary-text);--_edge: var(--_solid-active)}[data-ui=button][data-tone=success]{--_solid: var(--slotted-tone-success-solid);--_solid-hover: var(--slotted-tone-success-solid-hover);--_solid-active: var(--slotted-tone-success-solid-active);--_on-solid: var(--slotted-tone-success-on-solid);--_text: var(--slotted-tone-success-text)}[data-ui=button][data-tone=warning]{--_solid: var(--slotted-tone-warning-solid);--_solid-hover: var(--slotted-tone-warning-solid-hover);--_solid-active: var(--slotted-tone-warning-solid-active);--_on-solid: var(--slotted-tone-warning-on-solid);--_text: var(--slotted-tone-warning-text)}[data-ui=button][data-tone=danger]{--_solid: var(--slotted-tone-danger-solid);--_solid-hover: var(--slotted-tone-danger-solid-hover);--_solid-active: var(--slotted-tone-danger-solid-active);--_on-solid: var(--slotted-tone-danger-on-solid);--_text: var(--slotted-tone-danger-text)}[data-ui=button][data-size=sm]{--_height: var(--slotted-control-height-sm, 30px);--_padding-inline: var(--slotted-control-padding-inline-sm, 10px);--_font-size: var(--slotted-control-font-size-sm, 12px);--_icon-size: var(--slotted-control-icon-size-sm, 14px);--_gap: var(--slotted-control-gap-sm, 6px)}[data-ui=button][data-size=lg]{--_height: var(--slotted-control-height-lg, 38px);--_padding-inline: var(--slotted-control-padding-inline-lg, 16px);--_font-size: var(--slotted-control-font-size-lg, 14px);--_icon-size: var(--slotted-control-icon-size-lg, 18px);--_gap: var(--slotted-control-gap-lg, 8px)}[data-ui=button][data-variant=solid]{background:var(--_solid, ButtonFace);border-color:var(--_edge, ButtonBorder);box-shadow:var(--slotted-control-shadow, none);color:var(--_on-solid, ButtonText)}[data-ui=button][data-variant=outline]{background:transparent;border-color:var(--slotted-control-border-color, ButtonBorder);box-shadow:var(--slotted-control-shadow, none);color:var(--_text, ButtonText)}[data-ui=button][data-variant=ghost]{background:transparent;border-color:transparent;color:var(--_text, ButtonText)}[data-ui=button][data-variant=outline],[data-ui=button][data-variant=ghost],[data-ui=button][data-variant=solid][data-tone=secondary]{--_sweep-strength: .18}[data-ui=button][data-pressed]:not(:disabled):not([data-disabled]){background:var(--slotted-tone-accent-subtle-active, Highlight);border-color:var(--slotted-tone-accent-border, Highlight);box-shadow:var(--slotted-control-shadow, none);color:var(--slotted-tone-accent-text, HighlightText)}[data-ui=button][data-variant=solid]:hover:not(:disabled):not([data-disabled]):not([data-loading]):not([data-pressed]){background:var(--_solid-hover, Highlight)}[data-ui=button][data-variant=solid]:active:not(:disabled):not([data-disabled]):not([data-loading]):not([data-pressed]){background:var(--_solid-active, Highlight);box-shadow:none;transform:translateY(var(--slotted-border-width-thin, 1px));transition-duration:var(--slotted-duration-instant)}[data-ui=button][data-variant=outline]:hover:not(:disabled):not([data-disabled]):not([data-loading]):not([data-pressed]),[data-ui=button][data-variant=ghost]:hover:not(:disabled):not([data-disabled]):not([data-loading]):not([data-pressed]){background:var(--slotted-tone-secondary-subtle-hover, ButtonFace)}[data-ui=button][data-variant=outline]:active:not(:disabled):not([data-disabled]):not([data-loading]):not([data-pressed]),[data-ui=button][data-variant=ghost]:active:not(:disabled):not([data-disabled]):not([data-loading]):not([data-pressed]){background:var(--slotted-tone-secondary-subtle-active, ButtonFace);transition-duration:var(--slotted-duration-instant)}[data-ui=button][data-pressed]:hover:not(:disabled):not([data-disabled]):not([data-loading]){background:var(--slotted-tone-accent-subtle-hover, Highlight)}[data-ui=button][data-pressed]:active:not(:disabled):not([data-disabled]):not([data-loading]){background:var(--slotted-tone-accent-subtle-active, Highlight);transition-duration:var(--slotted-duration-instant)}[data-ui=button]: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=button]:disabled,[data-ui=button][data-disabled]{box-shadow:none;color:var(--slotted-disabled-foreground, GrayText);cursor:not-allowed}[data-ui=button][data-variant=solid]:disabled,[data-ui=button][data-variant=solid][data-disabled]{background:var(--slotted-disabled-background, ButtonFace);border-color:var(--slotted-disabled-border, ButtonBorder)}[data-ui=button][data-variant=outline]:disabled,[data-ui=button][data-variant=outline][data-disabled]{background:transparent;border-color:var(--slotted-disabled-border, GrayText)}[data-ui=button][data-pressed]:disabled,[data-ui=button][data-pressed][data-disabled]{background:var(--slotted-disabled-background, ButtonFace);border-color:var(--slotted-disabled-border, GrayText);color:var(--slotted-disabled-foreground, GrayText)}[data-ui=button][data-disabled]:not(:disabled){color:var(--slotted-text-muted, GrayText)}[data-ui=button][data-variant=solid][data-disabled]:not(:disabled),[data-ui=button][data-pressed][data-disabled]:not(:disabled){background:var(--slotted-tone-secondary-subtle-hover, ButtonFace);border-color:var(--slotted-border-subtle, GrayText);color:var(--slotted-text-muted, GrayText)}[data-ui=button][data-variant=outline][data-disabled]:not(:disabled){border-color:var(--slotted-border-subtle, GrayText)}[data-ui=button][data-loading]{cursor:progress}[data-ui=button][data-loading]:has(>[data-part=indicator])>:not([data-part=indicator]){opacity:0}[data-ui=button] [data-part=indicator]{--slotted-spinner-size: var(--_icon-size);flex:none}[data-ui=button]>[data-part=indicator]{inset:0;margin:auto;position:absolute}@media(prefers-reduced-motion:no-preference){@media not (forced-colors:active){[data-ui=button]:not([data-shape])[data-loading]:has([data-part=indicator]):after{animation:slotted-button-sweep var(--slotted-duration-loop) linear infinite;background-image:linear-gradient(to right,transparent,currentColor 40%,transparent 80%);background-repeat:repeat-x;background-size:var(--_sweep-width) 100%;border-radius:inherit;content:\"\";inset:0;opacity:var(--_sweep-strength);pointer-events:none;position:absolute}[data-ui=button]:not([data-shape])[data-loading]:has([data-part=indicator]):dir(rtl):after{animation-direction:reverse;background-image:linear-gradient(to left,transparent,currentColor 40%,transparent 80%)}[data-ui=button]:not([data-shape])[data-loading]:has(>[data-part=indicator])>:not([data-part=indicator]){opacity:1}[data-ui=button]:not([data-shape])[data-loading] [data-part=indicator]{opacity:0;position:absolute}}}[data-ui=button] [data-part=start],[data-ui=button] [data-part=end],[data-ui=button] [data-part=icon]{align-items:center;block-size:var(--_icon-size);box-sizing:border-box;display:inline-flex;flex:none;font-size:var(--_icon-size);inline-size:var(--_icon-size);justify-content:center;line-height:1;position:relative}[data-ui=button] [data-part=start]>*:not([data-part=indicator]),[data-ui=button] [data-part=end]>*:not([data-part=indicator]),[data-ui=button] [data-part=icon]>*:not([data-part=indicator]){block-size:100%;display:block;inline-size:100%}[data-ui=button] [data-part=label]{line-height:var(--slotted-line-height-sm, 1.45);min-inline-size:0;overflow-wrap:anywhere}@supports (text-box: trim-both cap alphabetic){[data-ui=button] [data-part=label]{padding-block:calc((var(--slotted-line-height-sm, 1.45) * 1em - .75em) / 2);text-box:trim-both cap alphabetic}}[data-ui=button]:not([data-shape]):has(>[data-part=start]){padding-inline-start:var(--_padding-inline-visual)}[data-ui=button]:not([data-shape]):has(>[data-part=end]){padding-inline-end:var(--_padding-inline-visual)}[data-ui=button][data-full-width]{inline-size:100%}[data-ui=button][data-shape]{aspect-ratio:1;inline-size:var(--_height);min-block-size:max(var(--_height),var(--slotted-target-min, 24px));min-inline-size:var(--slotted-target-min, 24px);padding-block:0;padding-inline:0}[data-ui=button][data-shape=circle]{border-radius:var(--slotted-radius-full, 9999px)}@media(forced-colors:active){[data-ui=button]{border-color:ButtonBorder}[data-ui=button][data-pressed]{border-color:Highlight}[data-ui=button]:disabled,[data-ui=button][data-disabled]{border-color:GrayText;color:GrayText}}@media(prefers-reduced-motion:reduce){[data-ui=button] [data-part=indicator]{animation:none}}}@keyframes slotted-button-sweep{0%{background-position-x:calc(-1 * var(--_sweep-width))}to{background-position-x:0}}\n", "@layer slotted.components{[data-ui=spinner]{--_size: var(--slotted-spinner-size, var(--slotted-control-icon-size-md, 16px));--_ring: calc(var(--_size) * 5 / 6);--_stroke: max(var(--slotted-border-width-medium, 1.5px), calc(var(--_size) / 12));--_radius: calc((var(--_ring) - var(--_stroke)) / 2);--_track: color-mix(in oklab, currentColor 20%, transparent);--_start: calc(var(--_turn) + var(--_tail));--_end: calc(var(--_turn) + var(--_head));--_cap: calc(var(--_stroke) / 2);animation:slotted-spinner-turn var(--slotted-duration-loop-slow) linear infinite,slotted-spinner-head var(--slotted-duration-loop-slow) linear infinite,slotted-spinner-tail var(--slotted-duration-loop-slow) linear infinite;background-image:radial-gradient(circle at calc(50% + var(--_radius) * sin(var(--_end))) calc(50% - var(--_radius) * cos(var(--_end))),currentColor calc(var(--_cap) - .5px),transparent calc(var(--_cap) + .5px)),radial-gradient(circle at calc(50% + var(--_radius) * sin(var(--_start))) calc(50% - var(--_radius) * cos(var(--_start))),currentColor calc(var(--_cap) - .5px),transparent calc(var(--_cap) + .5px)),conic-gradient(from var(--_start),currentColor 0deg,currentColor calc(var(--_head) - var(--_tail)),transparent calc(var(--_head) - var(--_tail))),conic-gradient(var(--_track) 0 100%);background-origin:content-box;background-clip:content-box;block-size:var(--_size);box-sizing:border-box;display:inline-block;flex:none;inline-size:var(--_size);-webkit-mask-image:radial-gradient(circle,transparent calc(var(--_ring) / 2 - var(--_stroke) - .5px),#000 calc(var(--_ring) / 2 - var(--_stroke) + .5px),#000 calc(var(--_ring) / 2 - .5px),transparent calc(var(--_ring) / 2 + .5px));mask-image:radial-gradient(circle,transparent calc(var(--_ring) / 2 - var(--_stroke) - .5px),#000 calc(var(--_ring) / 2 - var(--_stroke) + .5px),#000 calc(var(--_ring) / 2 - .5px),transparent calc(var(--_ring) / 2 + .5px));opacity:1;padding:calc((var(--_size) - var(--_ring)) / 2);scale:1;transition:opacity var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),scale var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);vertical-align:middle}@starting-style{[data-ui=spinner]{opacity:0;scale:.6}}@media(prefers-reduced-motion:reduce){[data-ui=spinner]{--_head: 270deg;animation:none}}@media(forced-colors:active){[data-ui=spinner]{forced-color-adjust:none}}}@property --_turn{inherits: false; initial-value: 0deg; syntax: \"<angle>\";}@property --_head{inherits: false; initial-value: 20deg; syntax: \"<angle>\";}@property --_tail{inherits: false; initial-value: 0deg; syntax: \"<angle>\";}@keyframes slotted-spinner-turn{to{--_turn: 460deg}}@keyframes slotted-spinner-head{0%{--_head: 20deg;animation-timing-function:ease-in-out}50%,to{--_head: 280deg}}@keyframes slotted-spinner-tail{0%,50%{--_tail: 0deg;animation-timing-function:ease-in-out}to{--_tail: 260deg}}\n"], encapsulation: i0.ViewEncapsulation.None });
|
|
127
|
+
}
|
|
128
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlButtonStart, decorators: [{
|
|
129
|
+
type: Component,
|
|
130
|
+
args: [{ selector: '[slButtonStart]', standalone: true, template: `<ng-content></ng-content>
|
|
131
|
+
@if (drawsRing()) {
|
|
132
|
+
<span
|
|
133
|
+
data-part="indicator"
|
|
134
|
+
data-ui="spinner"
|
|
135
|
+
role="progressbar"
|
|
136
|
+
[attr.aria-label]="wait?.t('loading') ?? null"
|
|
137
|
+
></span>
|
|
138
|
+
}`, encapsulation: ViewEncapsulation.None, exportAs: 'slButtonStart', host: { 'data-part': 'start' }, styles: ["@layer slotted.components{[data-ui=button]{--_solid: var(--slotted-tone-accent-solid);--_solid-hover: var(--slotted-tone-accent-solid-hover);--_solid-active: var(--slotted-tone-accent-solid-active);--_on-solid: var(--slotted-tone-accent-on-solid);--_text: var(--slotted-tone-accent-text);--_edge: var(--_solid);--_height: var(--slotted-control-height-md, 34px);--_padding-inline: var(--slotted-control-padding-inline-md, 13px);--_font-size: var(--slotted-control-font-size-md, 13px);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_gap: var(--slotted-control-gap-md, 8px);--_padding-inline-visual: max( var(--slotted-space-2, .25rem), calc(var(--_padding-inline) - var(--slotted-space-2, .25rem)) );--_sweep-width: calc(var(--_height) * 2);--_sweep-strength: .34;align-items:center;appearance:none;background:transparent;border:var(--slotted-control-border-width, 1px) solid transparent;border-radius:var(--slotted-control-radius, 4px);box-sizing:border-box;cursor:pointer;display:inline-flex;font-family:var(--slotted-control-font-family, ui-sans-serif, system-ui, sans-serif);font-size:var(--_font-size);font-weight:var(--slotted-control-font-weight, 600);gap:var(--_gap);justify-content:center;letter-spacing:var(--slotted-control-letter-spacing, 0);line-height:var(--slotted-control-line-height, 1);max-inline-size:100%;min-block-size:var(--_height);padding-block:0;padding-inline:var(--_padding-inline);position:relative;text-align:center;text-decoration:none;text-wrap:balance;touch-action:manipulation;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),box-shadow var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),transform var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);-webkit-user-select:none;user-select:none;vertical-align:middle;-webkit-tap-highlight-color:transparent}[data-ui=button][data-tone=secondary]{--_solid: var(--slotted-tone-secondary-solid);--_solid-hover: var(--slotted-tone-secondary-solid-hover);--_solid-active: var(--slotted-tone-secondary-solid-active);--_on-solid: var(--slotted-tone-secondary-on-solid);--_text: var(--slotted-tone-secondary-text);--_edge: var(--_solid-active)}[data-ui=button][data-tone=success]{--_solid: var(--slotted-tone-success-solid);--_solid-hover: var(--slotted-tone-success-solid-hover);--_solid-active: var(--slotted-tone-success-solid-active);--_on-solid: var(--slotted-tone-success-on-solid);--_text: var(--slotted-tone-success-text)}[data-ui=button][data-tone=warning]{--_solid: var(--slotted-tone-warning-solid);--_solid-hover: var(--slotted-tone-warning-solid-hover);--_solid-active: var(--slotted-tone-warning-solid-active);--_on-solid: var(--slotted-tone-warning-on-solid);--_text: var(--slotted-tone-warning-text)}[data-ui=button][data-tone=danger]{--_solid: var(--slotted-tone-danger-solid);--_solid-hover: var(--slotted-tone-danger-solid-hover);--_solid-active: var(--slotted-tone-danger-solid-active);--_on-solid: var(--slotted-tone-danger-on-solid);--_text: var(--slotted-tone-danger-text)}[data-ui=button][data-size=sm]{--_height: var(--slotted-control-height-sm, 30px);--_padding-inline: var(--slotted-control-padding-inline-sm, 10px);--_font-size: var(--slotted-control-font-size-sm, 12px);--_icon-size: var(--slotted-control-icon-size-sm, 14px);--_gap: var(--slotted-control-gap-sm, 6px)}[data-ui=button][data-size=lg]{--_height: var(--slotted-control-height-lg, 38px);--_padding-inline: var(--slotted-control-padding-inline-lg, 16px);--_font-size: var(--slotted-control-font-size-lg, 14px);--_icon-size: var(--slotted-control-icon-size-lg, 18px);--_gap: var(--slotted-control-gap-lg, 8px)}[data-ui=button][data-variant=solid]{background:var(--_solid, ButtonFace);border-color:var(--_edge, ButtonBorder);box-shadow:var(--slotted-control-shadow, none);color:var(--_on-solid, ButtonText)}[data-ui=button][data-variant=outline]{background:transparent;border-color:var(--slotted-control-border-color, ButtonBorder);box-shadow:var(--slotted-control-shadow, none);color:var(--_text, ButtonText)}[data-ui=button][data-variant=ghost]{background:transparent;border-color:transparent;color:var(--_text, ButtonText)}[data-ui=button][data-variant=outline],[data-ui=button][data-variant=ghost],[data-ui=button][data-variant=solid][data-tone=secondary]{--_sweep-strength: .18}[data-ui=button][data-pressed]:not(:disabled):not([data-disabled]){background:var(--slotted-tone-accent-subtle-active, Highlight);border-color:var(--slotted-tone-accent-border, Highlight);box-shadow:var(--slotted-control-shadow, none);color:var(--slotted-tone-accent-text, HighlightText)}[data-ui=button][data-variant=solid]:hover:not(:disabled):not([data-disabled]):not([data-loading]):not([data-pressed]){background:var(--_solid-hover, Highlight)}[data-ui=button][data-variant=solid]:active:not(:disabled):not([data-disabled]):not([data-loading]):not([data-pressed]){background:var(--_solid-active, Highlight);box-shadow:none;transform:translateY(var(--slotted-border-width-thin, 1px));transition-duration:var(--slotted-duration-instant)}[data-ui=button][data-variant=outline]:hover:not(:disabled):not([data-disabled]):not([data-loading]):not([data-pressed]),[data-ui=button][data-variant=ghost]:hover:not(:disabled):not([data-disabled]):not([data-loading]):not([data-pressed]){background:var(--slotted-tone-secondary-subtle-hover, ButtonFace)}[data-ui=button][data-variant=outline]:active:not(:disabled):not([data-disabled]):not([data-loading]):not([data-pressed]),[data-ui=button][data-variant=ghost]:active:not(:disabled):not([data-disabled]):not([data-loading]):not([data-pressed]){background:var(--slotted-tone-secondary-subtle-active, ButtonFace);transition-duration:var(--slotted-duration-instant)}[data-ui=button][data-pressed]:hover:not(:disabled):not([data-disabled]):not([data-loading]){background:var(--slotted-tone-accent-subtle-hover, Highlight)}[data-ui=button][data-pressed]:active:not(:disabled):not([data-disabled]):not([data-loading]){background:var(--slotted-tone-accent-subtle-active, Highlight);transition-duration:var(--slotted-duration-instant)}[data-ui=button]: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=button]:disabled,[data-ui=button][data-disabled]{box-shadow:none;color:var(--slotted-disabled-foreground, GrayText);cursor:not-allowed}[data-ui=button][data-variant=solid]:disabled,[data-ui=button][data-variant=solid][data-disabled]{background:var(--slotted-disabled-background, ButtonFace);border-color:var(--slotted-disabled-border, ButtonBorder)}[data-ui=button][data-variant=outline]:disabled,[data-ui=button][data-variant=outline][data-disabled]{background:transparent;border-color:var(--slotted-disabled-border, GrayText)}[data-ui=button][data-pressed]:disabled,[data-ui=button][data-pressed][data-disabled]{background:var(--slotted-disabled-background, ButtonFace);border-color:var(--slotted-disabled-border, GrayText);color:var(--slotted-disabled-foreground, GrayText)}[data-ui=button][data-disabled]:not(:disabled){color:var(--slotted-text-muted, GrayText)}[data-ui=button][data-variant=solid][data-disabled]:not(:disabled),[data-ui=button][data-pressed][data-disabled]:not(:disabled){background:var(--slotted-tone-secondary-subtle-hover, ButtonFace);border-color:var(--slotted-border-subtle, GrayText);color:var(--slotted-text-muted, GrayText)}[data-ui=button][data-variant=outline][data-disabled]:not(:disabled){border-color:var(--slotted-border-subtle, GrayText)}[data-ui=button][data-loading]{cursor:progress}[data-ui=button][data-loading]:has(>[data-part=indicator])>:not([data-part=indicator]){opacity:0}[data-ui=button] [data-part=indicator]{--slotted-spinner-size: var(--_icon-size);flex:none}[data-ui=button]>[data-part=indicator]{inset:0;margin:auto;position:absolute}@media(prefers-reduced-motion:no-preference){@media not (forced-colors:active){[data-ui=button]:not([data-shape])[data-loading]:has([data-part=indicator]):after{animation:slotted-button-sweep var(--slotted-duration-loop) linear infinite;background-image:linear-gradient(to right,transparent,currentColor 40%,transparent 80%);background-repeat:repeat-x;background-size:var(--_sweep-width) 100%;border-radius:inherit;content:\"\";inset:0;opacity:var(--_sweep-strength);pointer-events:none;position:absolute}[data-ui=button]:not([data-shape])[data-loading]:has([data-part=indicator]):dir(rtl):after{animation-direction:reverse;background-image:linear-gradient(to left,transparent,currentColor 40%,transparent 80%)}[data-ui=button]:not([data-shape])[data-loading]:has(>[data-part=indicator])>:not([data-part=indicator]){opacity:1}[data-ui=button]:not([data-shape])[data-loading] [data-part=indicator]{opacity:0;position:absolute}}}[data-ui=button] [data-part=start],[data-ui=button] [data-part=end],[data-ui=button] [data-part=icon]{align-items:center;block-size:var(--_icon-size);box-sizing:border-box;display:inline-flex;flex:none;font-size:var(--_icon-size);inline-size:var(--_icon-size);justify-content:center;line-height:1;position:relative}[data-ui=button] [data-part=start]>*:not([data-part=indicator]),[data-ui=button] [data-part=end]>*:not([data-part=indicator]),[data-ui=button] [data-part=icon]>*:not([data-part=indicator]){block-size:100%;display:block;inline-size:100%}[data-ui=button] [data-part=label]{line-height:var(--slotted-line-height-sm, 1.45);min-inline-size:0;overflow-wrap:anywhere}@supports (text-box: trim-both cap alphabetic){[data-ui=button] [data-part=label]{padding-block:calc((var(--slotted-line-height-sm, 1.45) * 1em - .75em) / 2);text-box:trim-both cap alphabetic}}[data-ui=button]:not([data-shape]):has(>[data-part=start]){padding-inline-start:var(--_padding-inline-visual)}[data-ui=button]:not([data-shape]):has(>[data-part=end]){padding-inline-end:var(--_padding-inline-visual)}[data-ui=button][data-full-width]{inline-size:100%}[data-ui=button][data-shape]{aspect-ratio:1;inline-size:var(--_height);min-block-size:max(var(--_height),var(--slotted-target-min, 24px));min-inline-size:var(--slotted-target-min, 24px);padding-block:0;padding-inline:0}[data-ui=button][data-shape=circle]{border-radius:var(--slotted-radius-full, 9999px)}@media(forced-colors:active){[data-ui=button]{border-color:ButtonBorder}[data-ui=button][data-pressed]{border-color:Highlight}[data-ui=button]:disabled,[data-ui=button][data-disabled]{border-color:GrayText;color:GrayText}}@media(prefers-reduced-motion:reduce){[data-ui=button] [data-part=indicator]{animation:none}}}@keyframes slotted-button-sweep{0%{background-position-x:calc(-1 * var(--_sweep-width))}to{background-position-x:0}}\n", "@layer slotted.components{[data-ui=spinner]{--_size: var(--slotted-spinner-size, var(--slotted-control-icon-size-md, 16px));--_ring: calc(var(--_size) * 5 / 6);--_stroke: max(var(--slotted-border-width-medium, 1.5px), calc(var(--_size) / 12));--_radius: calc((var(--_ring) - var(--_stroke)) / 2);--_track: color-mix(in oklab, currentColor 20%, transparent);--_start: calc(var(--_turn) + var(--_tail));--_end: calc(var(--_turn) + var(--_head));--_cap: calc(var(--_stroke) / 2);animation:slotted-spinner-turn var(--slotted-duration-loop-slow) linear infinite,slotted-spinner-head var(--slotted-duration-loop-slow) linear infinite,slotted-spinner-tail var(--slotted-duration-loop-slow) linear infinite;background-image:radial-gradient(circle at calc(50% + var(--_radius) * sin(var(--_end))) calc(50% - var(--_radius) * cos(var(--_end))),currentColor calc(var(--_cap) - .5px),transparent calc(var(--_cap) + .5px)),radial-gradient(circle at calc(50% + var(--_radius) * sin(var(--_start))) calc(50% - var(--_radius) * cos(var(--_start))),currentColor calc(var(--_cap) - .5px),transparent calc(var(--_cap) + .5px)),conic-gradient(from var(--_start),currentColor 0deg,currentColor calc(var(--_head) - var(--_tail)),transparent calc(var(--_head) - var(--_tail))),conic-gradient(var(--_track) 0 100%);background-origin:content-box;background-clip:content-box;block-size:var(--_size);box-sizing:border-box;display:inline-block;flex:none;inline-size:var(--_size);-webkit-mask-image:radial-gradient(circle,transparent calc(var(--_ring) / 2 - var(--_stroke) - .5px),#000 calc(var(--_ring) / 2 - var(--_stroke) + .5px),#000 calc(var(--_ring) / 2 - .5px),transparent calc(var(--_ring) / 2 + .5px));mask-image:radial-gradient(circle,transparent calc(var(--_ring) / 2 - var(--_stroke) - .5px),#000 calc(var(--_ring) / 2 - var(--_stroke) + .5px),#000 calc(var(--_ring) / 2 - .5px),transparent calc(var(--_ring) / 2 + .5px));opacity:1;padding:calc((var(--_size) - var(--_ring)) / 2);scale:1;transition:opacity var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),scale var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);vertical-align:middle}@starting-style{[data-ui=spinner]{opacity:0;scale:.6}}@media(prefers-reduced-motion:reduce){[data-ui=spinner]{--_head: 270deg;animation:none}}@media(forced-colors:active){[data-ui=spinner]{forced-color-adjust:none}}}@property --_turn{inherits: false; initial-value: 0deg; syntax: \"<angle>\";}@property --_head{inherits: false; initial-value: 20deg; syntax: \"<angle>\";}@property --_tail{inherits: false; initial-value: 0deg; syntax: \"<angle>\";}@keyframes slotted-spinner-turn{to{--_turn: 460deg}}@keyframes slotted-spinner-head{0%{--_head: 20deg;animation-timing-function:ease-in-out}50%,to{--_head: 280deg}}@keyframes slotted-spinner-tail{0%,50%{--_tail: 0deg;animation-timing-function:ease-in-out}to{--_tail: 260deg}}\n"] }]
|
|
139
|
+
}] });
|
|
140
|
+
class SlButtonEnd {
|
|
141
|
+
wait = inject(BUTTON_WAIT, { optional: true });
|
|
142
|
+
/**
|
|
143
|
+
* The ring takes the first visual slot the control has, so an end slot draws
|
|
144
|
+
* it only when there is no start slot to take it.
|
|
145
|
+
*/
|
|
146
|
+
drawsRing = computed(() => (this.wait?.waiting() ?? false) && !(this.wait?.hasStart() ?? false), /* @ts-ignore */
|
|
147
|
+
...(ngDevMode ? [{ debugName: "drawsRing" }] : /* istanbul ignore next */ []));
|
|
148
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlButtonEnd, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
149
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlButtonEnd, isStandalone: true, selector: "[slButtonEnd]", host: { attributes: { "data-part": "end" } }, exportAs: ["slButtonEnd"], ngImport: i0, template: `<ng-content></ng-content>
|
|
150
|
+
@if (drawsRing()) {
|
|
151
|
+
<span
|
|
152
|
+
data-part="indicator"
|
|
153
|
+
data-ui="spinner"
|
|
154
|
+
role="progressbar"
|
|
155
|
+
[attr.aria-label]="wait?.t('loading') ?? null"
|
|
156
|
+
></span>
|
|
157
|
+
}`, isInline: true, styles: ["@layer slotted.components{[data-ui=button]{--_solid: var(--slotted-tone-accent-solid);--_solid-hover: var(--slotted-tone-accent-solid-hover);--_solid-active: var(--slotted-tone-accent-solid-active);--_on-solid: var(--slotted-tone-accent-on-solid);--_text: var(--slotted-tone-accent-text);--_edge: var(--_solid);--_height: var(--slotted-control-height-md, 34px);--_padding-inline: var(--slotted-control-padding-inline-md, 13px);--_font-size: var(--slotted-control-font-size-md, 13px);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_gap: var(--slotted-control-gap-md, 8px);--_padding-inline-visual: max( var(--slotted-space-2, .25rem), calc(var(--_padding-inline) - var(--slotted-space-2, .25rem)) );--_sweep-width: calc(var(--_height) * 2);--_sweep-strength: .34;align-items:center;appearance:none;background:transparent;border:var(--slotted-control-border-width, 1px) solid transparent;border-radius:var(--slotted-control-radius, 4px);box-sizing:border-box;cursor:pointer;display:inline-flex;font-family:var(--slotted-control-font-family, ui-sans-serif, system-ui, sans-serif);font-size:var(--_font-size);font-weight:var(--slotted-control-font-weight, 600);gap:var(--_gap);justify-content:center;letter-spacing:var(--slotted-control-letter-spacing, 0);line-height:var(--slotted-control-line-height, 1);max-inline-size:100%;min-block-size:var(--_height);padding-block:0;padding-inline:var(--_padding-inline);position:relative;text-align:center;text-decoration:none;text-wrap:balance;touch-action:manipulation;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),box-shadow var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),transform var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);-webkit-user-select:none;user-select:none;vertical-align:middle;-webkit-tap-highlight-color:transparent}[data-ui=button][data-tone=secondary]{--_solid: var(--slotted-tone-secondary-solid);--_solid-hover: var(--slotted-tone-secondary-solid-hover);--_solid-active: var(--slotted-tone-secondary-solid-active);--_on-solid: var(--slotted-tone-secondary-on-solid);--_text: var(--slotted-tone-secondary-text);--_edge: var(--_solid-active)}[data-ui=button][data-tone=success]{--_solid: var(--slotted-tone-success-solid);--_solid-hover: var(--slotted-tone-success-solid-hover);--_solid-active: var(--slotted-tone-success-solid-active);--_on-solid: var(--slotted-tone-success-on-solid);--_text: var(--slotted-tone-success-text)}[data-ui=button][data-tone=warning]{--_solid: var(--slotted-tone-warning-solid);--_solid-hover: var(--slotted-tone-warning-solid-hover);--_solid-active: var(--slotted-tone-warning-solid-active);--_on-solid: var(--slotted-tone-warning-on-solid);--_text: var(--slotted-tone-warning-text)}[data-ui=button][data-tone=danger]{--_solid: var(--slotted-tone-danger-solid);--_solid-hover: var(--slotted-tone-danger-solid-hover);--_solid-active: var(--slotted-tone-danger-solid-active);--_on-solid: var(--slotted-tone-danger-on-solid);--_text: var(--slotted-tone-danger-text)}[data-ui=button][data-size=sm]{--_height: var(--slotted-control-height-sm, 30px);--_padding-inline: var(--slotted-control-padding-inline-sm, 10px);--_font-size: var(--slotted-control-font-size-sm, 12px);--_icon-size: var(--slotted-control-icon-size-sm, 14px);--_gap: var(--slotted-control-gap-sm, 6px)}[data-ui=button][data-size=lg]{--_height: var(--slotted-control-height-lg, 38px);--_padding-inline: var(--slotted-control-padding-inline-lg, 16px);--_font-size: var(--slotted-control-font-size-lg, 14px);--_icon-size: var(--slotted-control-icon-size-lg, 18px);--_gap: var(--slotted-control-gap-lg, 8px)}[data-ui=button][data-variant=solid]{background:var(--_solid, ButtonFace);border-color:var(--_edge, ButtonBorder);box-shadow:var(--slotted-control-shadow, none);color:var(--_on-solid, ButtonText)}[data-ui=button][data-variant=outline]{background:transparent;border-color:var(--slotted-control-border-color, ButtonBorder);box-shadow:var(--slotted-control-shadow, none);color:var(--_text, ButtonText)}[data-ui=button][data-variant=ghost]{background:transparent;border-color:transparent;color:var(--_text, ButtonText)}[data-ui=button][data-variant=outline],[data-ui=button][data-variant=ghost],[data-ui=button][data-variant=solid][data-tone=secondary]{--_sweep-strength: .18}[data-ui=button][data-pressed]:not(:disabled):not([data-disabled]){background:var(--slotted-tone-accent-subtle-active, Highlight);border-color:var(--slotted-tone-accent-border, Highlight);box-shadow:var(--slotted-control-shadow, none);color:var(--slotted-tone-accent-text, HighlightText)}[data-ui=button][data-variant=solid]:hover:not(:disabled):not([data-disabled]):not([data-loading]):not([data-pressed]){background:var(--_solid-hover, Highlight)}[data-ui=button][data-variant=solid]:active:not(:disabled):not([data-disabled]):not([data-loading]):not([data-pressed]){background:var(--_solid-active, Highlight);box-shadow:none;transform:translateY(var(--slotted-border-width-thin, 1px));transition-duration:var(--slotted-duration-instant)}[data-ui=button][data-variant=outline]:hover:not(:disabled):not([data-disabled]):not([data-loading]):not([data-pressed]),[data-ui=button][data-variant=ghost]:hover:not(:disabled):not([data-disabled]):not([data-loading]):not([data-pressed]){background:var(--slotted-tone-secondary-subtle-hover, ButtonFace)}[data-ui=button][data-variant=outline]:active:not(:disabled):not([data-disabled]):not([data-loading]):not([data-pressed]),[data-ui=button][data-variant=ghost]:active:not(:disabled):not([data-disabled]):not([data-loading]):not([data-pressed]){background:var(--slotted-tone-secondary-subtle-active, ButtonFace);transition-duration:var(--slotted-duration-instant)}[data-ui=button][data-pressed]:hover:not(:disabled):not([data-disabled]):not([data-loading]){background:var(--slotted-tone-accent-subtle-hover, Highlight)}[data-ui=button][data-pressed]:active:not(:disabled):not([data-disabled]):not([data-loading]){background:var(--slotted-tone-accent-subtle-active, Highlight);transition-duration:var(--slotted-duration-instant)}[data-ui=button]: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=button]:disabled,[data-ui=button][data-disabled]{box-shadow:none;color:var(--slotted-disabled-foreground, GrayText);cursor:not-allowed}[data-ui=button][data-variant=solid]:disabled,[data-ui=button][data-variant=solid][data-disabled]{background:var(--slotted-disabled-background, ButtonFace);border-color:var(--slotted-disabled-border, ButtonBorder)}[data-ui=button][data-variant=outline]:disabled,[data-ui=button][data-variant=outline][data-disabled]{background:transparent;border-color:var(--slotted-disabled-border, GrayText)}[data-ui=button][data-pressed]:disabled,[data-ui=button][data-pressed][data-disabled]{background:var(--slotted-disabled-background, ButtonFace);border-color:var(--slotted-disabled-border, GrayText);color:var(--slotted-disabled-foreground, GrayText)}[data-ui=button][data-disabled]:not(:disabled){color:var(--slotted-text-muted, GrayText)}[data-ui=button][data-variant=solid][data-disabled]:not(:disabled),[data-ui=button][data-pressed][data-disabled]:not(:disabled){background:var(--slotted-tone-secondary-subtle-hover, ButtonFace);border-color:var(--slotted-border-subtle, GrayText);color:var(--slotted-text-muted, GrayText)}[data-ui=button][data-variant=outline][data-disabled]:not(:disabled){border-color:var(--slotted-border-subtle, GrayText)}[data-ui=button][data-loading]{cursor:progress}[data-ui=button][data-loading]:has(>[data-part=indicator])>:not([data-part=indicator]){opacity:0}[data-ui=button] [data-part=indicator]{--slotted-spinner-size: var(--_icon-size);flex:none}[data-ui=button]>[data-part=indicator]{inset:0;margin:auto;position:absolute}@media(prefers-reduced-motion:no-preference){@media not (forced-colors:active){[data-ui=button]:not([data-shape])[data-loading]:has([data-part=indicator]):after{animation:slotted-button-sweep var(--slotted-duration-loop) linear infinite;background-image:linear-gradient(to right,transparent,currentColor 40%,transparent 80%);background-repeat:repeat-x;background-size:var(--_sweep-width) 100%;border-radius:inherit;content:\"\";inset:0;opacity:var(--_sweep-strength);pointer-events:none;position:absolute}[data-ui=button]:not([data-shape])[data-loading]:has([data-part=indicator]):dir(rtl):after{animation-direction:reverse;background-image:linear-gradient(to left,transparent,currentColor 40%,transparent 80%)}[data-ui=button]:not([data-shape])[data-loading]:has(>[data-part=indicator])>:not([data-part=indicator]){opacity:1}[data-ui=button]:not([data-shape])[data-loading] [data-part=indicator]{opacity:0;position:absolute}}}[data-ui=button] [data-part=start],[data-ui=button] [data-part=end],[data-ui=button] [data-part=icon]{align-items:center;block-size:var(--_icon-size);box-sizing:border-box;display:inline-flex;flex:none;font-size:var(--_icon-size);inline-size:var(--_icon-size);justify-content:center;line-height:1;position:relative}[data-ui=button] [data-part=start]>*:not([data-part=indicator]),[data-ui=button] [data-part=end]>*:not([data-part=indicator]),[data-ui=button] [data-part=icon]>*:not([data-part=indicator]){block-size:100%;display:block;inline-size:100%}[data-ui=button] [data-part=label]{line-height:var(--slotted-line-height-sm, 1.45);min-inline-size:0;overflow-wrap:anywhere}@supports (text-box: trim-both cap alphabetic){[data-ui=button] [data-part=label]{padding-block:calc((var(--slotted-line-height-sm, 1.45) * 1em - .75em) / 2);text-box:trim-both cap alphabetic}}[data-ui=button]:not([data-shape]):has(>[data-part=start]){padding-inline-start:var(--_padding-inline-visual)}[data-ui=button]:not([data-shape]):has(>[data-part=end]){padding-inline-end:var(--_padding-inline-visual)}[data-ui=button][data-full-width]{inline-size:100%}[data-ui=button][data-shape]{aspect-ratio:1;inline-size:var(--_height);min-block-size:max(var(--_height),var(--slotted-target-min, 24px));min-inline-size:var(--slotted-target-min, 24px);padding-block:0;padding-inline:0}[data-ui=button][data-shape=circle]{border-radius:var(--slotted-radius-full, 9999px)}@media(forced-colors:active){[data-ui=button]{border-color:ButtonBorder}[data-ui=button][data-pressed]{border-color:Highlight}[data-ui=button]:disabled,[data-ui=button][data-disabled]{border-color:GrayText;color:GrayText}}@media(prefers-reduced-motion:reduce){[data-ui=button] [data-part=indicator]{animation:none}}}@keyframes slotted-button-sweep{0%{background-position-x:calc(-1 * var(--_sweep-width))}to{background-position-x:0}}\n", "@layer slotted.components{[data-ui=spinner]{--_size: var(--slotted-spinner-size, var(--slotted-control-icon-size-md, 16px));--_ring: calc(var(--_size) * 5 / 6);--_stroke: max(var(--slotted-border-width-medium, 1.5px), calc(var(--_size) / 12));--_radius: calc((var(--_ring) - var(--_stroke)) / 2);--_track: color-mix(in oklab, currentColor 20%, transparent);--_start: calc(var(--_turn) + var(--_tail));--_end: calc(var(--_turn) + var(--_head));--_cap: calc(var(--_stroke) / 2);animation:slotted-spinner-turn var(--slotted-duration-loop-slow) linear infinite,slotted-spinner-head var(--slotted-duration-loop-slow) linear infinite,slotted-spinner-tail var(--slotted-duration-loop-slow) linear infinite;background-image:radial-gradient(circle at calc(50% + var(--_radius) * sin(var(--_end))) calc(50% - var(--_radius) * cos(var(--_end))),currentColor calc(var(--_cap) - .5px),transparent calc(var(--_cap) + .5px)),radial-gradient(circle at calc(50% + var(--_radius) * sin(var(--_start))) calc(50% - var(--_radius) * cos(var(--_start))),currentColor calc(var(--_cap) - .5px),transparent calc(var(--_cap) + .5px)),conic-gradient(from var(--_start),currentColor 0deg,currentColor calc(var(--_head) - var(--_tail)),transparent calc(var(--_head) - var(--_tail))),conic-gradient(var(--_track) 0 100%);background-origin:content-box;background-clip:content-box;block-size:var(--_size);box-sizing:border-box;display:inline-block;flex:none;inline-size:var(--_size);-webkit-mask-image:radial-gradient(circle,transparent calc(var(--_ring) / 2 - var(--_stroke) - .5px),#000 calc(var(--_ring) / 2 - var(--_stroke) + .5px),#000 calc(var(--_ring) / 2 - .5px),transparent calc(var(--_ring) / 2 + .5px));mask-image:radial-gradient(circle,transparent calc(var(--_ring) / 2 - var(--_stroke) - .5px),#000 calc(var(--_ring) / 2 - var(--_stroke) + .5px),#000 calc(var(--_ring) / 2 - .5px),transparent calc(var(--_ring) / 2 + .5px));opacity:1;padding:calc((var(--_size) - var(--_ring)) / 2);scale:1;transition:opacity var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),scale var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);vertical-align:middle}@starting-style{[data-ui=spinner]{opacity:0;scale:.6}}@media(prefers-reduced-motion:reduce){[data-ui=spinner]{--_head: 270deg;animation:none}}@media(forced-colors:active){[data-ui=spinner]{forced-color-adjust:none}}}@property --_turn{inherits: false; initial-value: 0deg; syntax: \"<angle>\";}@property --_head{inherits: false; initial-value: 20deg; syntax: \"<angle>\";}@property --_tail{inherits: false; initial-value: 0deg; syntax: \"<angle>\";}@keyframes slotted-spinner-turn{to{--_turn: 460deg}}@keyframes slotted-spinner-head{0%{--_head: 20deg;animation-timing-function:ease-in-out}50%,to{--_head: 280deg}}@keyframes slotted-spinner-tail{0%,50%{--_tail: 0deg;animation-timing-function:ease-in-out}to{--_tail: 260deg}}\n"], encapsulation: i0.ViewEncapsulation.None });
|
|
158
|
+
}
|
|
159
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlButtonEnd, decorators: [{
|
|
160
|
+
type: Component,
|
|
161
|
+
args: [{ selector: '[slButtonEnd]', standalone: true, template: `<ng-content></ng-content>
|
|
162
|
+
@if (drawsRing()) {
|
|
163
|
+
<span
|
|
164
|
+
data-part="indicator"
|
|
165
|
+
data-ui="spinner"
|
|
166
|
+
role="progressbar"
|
|
167
|
+
[attr.aria-label]="wait?.t('loading') ?? null"
|
|
168
|
+
></span>
|
|
169
|
+
}`, encapsulation: ViewEncapsulation.None, exportAs: 'slButtonEnd', host: { 'data-part': 'end' }, styles: ["@layer slotted.components{[data-ui=button]{--_solid: var(--slotted-tone-accent-solid);--_solid-hover: var(--slotted-tone-accent-solid-hover);--_solid-active: var(--slotted-tone-accent-solid-active);--_on-solid: var(--slotted-tone-accent-on-solid);--_text: var(--slotted-tone-accent-text);--_edge: var(--_solid);--_height: var(--slotted-control-height-md, 34px);--_padding-inline: var(--slotted-control-padding-inline-md, 13px);--_font-size: var(--slotted-control-font-size-md, 13px);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_gap: var(--slotted-control-gap-md, 8px);--_padding-inline-visual: max( var(--slotted-space-2, .25rem), calc(var(--_padding-inline) - var(--slotted-space-2, .25rem)) );--_sweep-width: calc(var(--_height) * 2);--_sweep-strength: .34;align-items:center;appearance:none;background:transparent;border:var(--slotted-control-border-width, 1px) solid transparent;border-radius:var(--slotted-control-radius, 4px);box-sizing:border-box;cursor:pointer;display:inline-flex;font-family:var(--slotted-control-font-family, ui-sans-serif, system-ui, sans-serif);font-size:var(--_font-size);font-weight:var(--slotted-control-font-weight, 600);gap:var(--_gap);justify-content:center;letter-spacing:var(--slotted-control-letter-spacing, 0);line-height:var(--slotted-control-line-height, 1);max-inline-size:100%;min-block-size:var(--_height);padding-block:0;padding-inline:var(--_padding-inline);position:relative;text-align:center;text-decoration:none;text-wrap:balance;touch-action:manipulation;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),box-shadow var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),transform var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);-webkit-user-select:none;user-select:none;vertical-align:middle;-webkit-tap-highlight-color:transparent}[data-ui=button][data-tone=secondary]{--_solid: var(--slotted-tone-secondary-solid);--_solid-hover: var(--slotted-tone-secondary-solid-hover);--_solid-active: var(--slotted-tone-secondary-solid-active);--_on-solid: var(--slotted-tone-secondary-on-solid);--_text: var(--slotted-tone-secondary-text);--_edge: var(--_solid-active)}[data-ui=button][data-tone=success]{--_solid: var(--slotted-tone-success-solid);--_solid-hover: var(--slotted-tone-success-solid-hover);--_solid-active: var(--slotted-tone-success-solid-active);--_on-solid: var(--slotted-tone-success-on-solid);--_text: var(--slotted-tone-success-text)}[data-ui=button][data-tone=warning]{--_solid: var(--slotted-tone-warning-solid);--_solid-hover: var(--slotted-tone-warning-solid-hover);--_solid-active: var(--slotted-tone-warning-solid-active);--_on-solid: var(--slotted-tone-warning-on-solid);--_text: var(--slotted-tone-warning-text)}[data-ui=button][data-tone=danger]{--_solid: var(--slotted-tone-danger-solid);--_solid-hover: var(--slotted-tone-danger-solid-hover);--_solid-active: var(--slotted-tone-danger-solid-active);--_on-solid: var(--slotted-tone-danger-on-solid);--_text: var(--slotted-tone-danger-text)}[data-ui=button][data-size=sm]{--_height: var(--slotted-control-height-sm, 30px);--_padding-inline: var(--slotted-control-padding-inline-sm, 10px);--_font-size: var(--slotted-control-font-size-sm, 12px);--_icon-size: var(--slotted-control-icon-size-sm, 14px);--_gap: var(--slotted-control-gap-sm, 6px)}[data-ui=button][data-size=lg]{--_height: var(--slotted-control-height-lg, 38px);--_padding-inline: var(--slotted-control-padding-inline-lg, 16px);--_font-size: var(--slotted-control-font-size-lg, 14px);--_icon-size: var(--slotted-control-icon-size-lg, 18px);--_gap: var(--slotted-control-gap-lg, 8px)}[data-ui=button][data-variant=solid]{background:var(--_solid, ButtonFace);border-color:var(--_edge, ButtonBorder);box-shadow:var(--slotted-control-shadow, none);color:var(--_on-solid, ButtonText)}[data-ui=button][data-variant=outline]{background:transparent;border-color:var(--slotted-control-border-color, ButtonBorder);box-shadow:var(--slotted-control-shadow, none);color:var(--_text, ButtonText)}[data-ui=button][data-variant=ghost]{background:transparent;border-color:transparent;color:var(--_text, ButtonText)}[data-ui=button][data-variant=outline],[data-ui=button][data-variant=ghost],[data-ui=button][data-variant=solid][data-tone=secondary]{--_sweep-strength: .18}[data-ui=button][data-pressed]:not(:disabled):not([data-disabled]){background:var(--slotted-tone-accent-subtle-active, Highlight);border-color:var(--slotted-tone-accent-border, Highlight);box-shadow:var(--slotted-control-shadow, none);color:var(--slotted-tone-accent-text, HighlightText)}[data-ui=button][data-variant=solid]:hover:not(:disabled):not([data-disabled]):not([data-loading]):not([data-pressed]){background:var(--_solid-hover, Highlight)}[data-ui=button][data-variant=solid]:active:not(:disabled):not([data-disabled]):not([data-loading]):not([data-pressed]){background:var(--_solid-active, Highlight);box-shadow:none;transform:translateY(var(--slotted-border-width-thin, 1px));transition-duration:var(--slotted-duration-instant)}[data-ui=button][data-variant=outline]:hover:not(:disabled):not([data-disabled]):not([data-loading]):not([data-pressed]),[data-ui=button][data-variant=ghost]:hover:not(:disabled):not([data-disabled]):not([data-loading]):not([data-pressed]){background:var(--slotted-tone-secondary-subtle-hover, ButtonFace)}[data-ui=button][data-variant=outline]:active:not(:disabled):not([data-disabled]):not([data-loading]):not([data-pressed]),[data-ui=button][data-variant=ghost]:active:not(:disabled):not([data-disabled]):not([data-loading]):not([data-pressed]){background:var(--slotted-tone-secondary-subtle-active, ButtonFace);transition-duration:var(--slotted-duration-instant)}[data-ui=button][data-pressed]:hover:not(:disabled):not([data-disabled]):not([data-loading]){background:var(--slotted-tone-accent-subtle-hover, Highlight)}[data-ui=button][data-pressed]:active:not(:disabled):not([data-disabled]):not([data-loading]){background:var(--slotted-tone-accent-subtle-active, Highlight);transition-duration:var(--slotted-duration-instant)}[data-ui=button]: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=button]:disabled,[data-ui=button][data-disabled]{box-shadow:none;color:var(--slotted-disabled-foreground, GrayText);cursor:not-allowed}[data-ui=button][data-variant=solid]:disabled,[data-ui=button][data-variant=solid][data-disabled]{background:var(--slotted-disabled-background, ButtonFace);border-color:var(--slotted-disabled-border, ButtonBorder)}[data-ui=button][data-variant=outline]:disabled,[data-ui=button][data-variant=outline][data-disabled]{background:transparent;border-color:var(--slotted-disabled-border, GrayText)}[data-ui=button][data-pressed]:disabled,[data-ui=button][data-pressed][data-disabled]{background:var(--slotted-disabled-background, ButtonFace);border-color:var(--slotted-disabled-border, GrayText);color:var(--slotted-disabled-foreground, GrayText)}[data-ui=button][data-disabled]:not(:disabled){color:var(--slotted-text-muted, GrayText)}[data-ui=button][data-variant=solid][data-disabled]:not(:disabled),[data-ui=button][data-pressed][data-disabled]:not(:disabled){background:var(--slotted-tone-secondary-subtle-hover, ButtonFace);border-color:var(--slotted-border-subtle, GrayText);color:var(--slotted-text-muted, GrayText)}[data-ui=button][data-variant=outline][data-disabled]:not(:disabled){border-color:var(--slotted-border-subtle, GrayText)}[data-ui=button][data-loading]{cursor:progress}[data-ui=button][data-loading]:has(>[data-part=indicator])>:not([data-part=indicator]){opacity:0}[data-ui=button] [data-part=indicator]{--slotted-spinner-size: var(--_icon-size);flex:none}[data-ui=button]>[data-part=indicator]{inset:0;margin:auto;position:absolute}@media(prefers-reduced-motion:no-preference){@media not (forced-colors:active){[data-ui=button]:not([data-shape])[data-loading]:has([data-part=indicator]):after{animation:slotted-button-sweep var(--slotted-duration-loop) linear infinite;background-image:linear-gradient(to right,transparent,currentColor 40%,transparent 80%);background-repeat:repeat-x;background-size:var(--_sweep-width) 100%;border-radius:inherit;content:\"\";inset:0;opacity:var(--_sweep-strength);pointer-events:none;position:absolute}[data-ui=button]:not([data-shape])[data-loading]:has([data-part=indicator]):dir(rtl):after{animation-direction:reverse;background-image:linear-gradient(to left,transparent,currentColor 40%,transparent 80%)}[data-ui=button]:not([data-shape])[data-loading]:has(>[data-part=indicator])>:not([data-part=indicator]){opacity:1}[data-ui=button]:not([data-shape])[data-loading] [data-part=indicator]{opacity:0;position:absolute}}}[data-ui=button] [data-part=start],[data-ui=button] [data-part=end],[data-ui=button] [data-part=icon]{align-items:center;block-size:var(--_icon-size);box-sizing:border-box;display:inline-flex;flex:none;font-size:var(--_icon-size);inline-size:var(--_icon-size);justify-content:center;line-height:1;position:relative}[data-ui=button] [data-part=start]>*:not([data-part=indicator]),[data-ui=button] [data-part=end]>*:not([data-part=indicator]),[data-ui=button] [data-part=icon]>*:not([data-part=indicator]){block-size:100%;display:block;inline-size:100%}[data-ui=button] [data-part=label]{line-height:var(--slotted-line-height-sm, 1.45);min-inline-size:0;overflow-wrap:anywhere}@supports (text-box: trim-both cap alphabetic){[data-ui=button] [data-part=label]{padding-block:calc((var(--slotted-line-height-sm, 1.45) * 1em - .75em) / 2);text-box:trim-both cap alphabetic}}[data-ui=button]:not([data-shape]):has(>[data-part=start]){padding-inline-start:var(--_padding-inline-visual)}[data-ui=button]:not([data-shape]):has(>[data-part=end]){padding-inline-end:var(--_padding-inline-visual)}[data-ui=button][data-full-width]{inline-size:100%}[data-ui=button][data-shape]{aspect-ratio:1;inline-size:var(--_height);min-block-size:max(var(--_height),var(--slotted-target-min, 24px));min-inline-size:var(--slotted-target-min, 24px);padding-block:0;padding-inline:0}[data-ui=button][data-shape=circle]{border-radius:var(--slotted-radius-full, 9999px)}@media(forced-colors:active){[data-ui=button]{border-color:ButtonBorder}[data-ui=button][data-pressed]{border-color:Highlight}[data-ui=button]:disabled,[data-ui=button][data-disabled]{border-color:GrayText;color:GrayText}}@media(prefers-reduced-motion:reduce){[data-ui=button] [data-part=indicator]{animation:none}}}@keyframes slotted-button-sweep{0%{background-position-x:calc(-1 * var(--_sweep-width))}to{background-position-x:0}}\n", "@layer slotted.components{[data-ui=spinner]{--_size: var(--slotted-spinner-size, var(--slotted-control-icon-size-md, 16px));--_ring: calc(var(--_size) * 5 / 6);--_stroke: max(var(--slotted-border-width-medium, 1.5px), calc(var(--_size) / 12));--_radius: calc((var(--_ring) - var(--_stroke)) / 2);--_track: color-mix(in oklab, currentColor 20%, transparent);--_start: calc(var(--_turn) + var(--_tail));--_end: calc(var(--_turn) + var(--_head));--_cap: calc(var(--_stroke) / 2);animation:slotted-spinner-turn var(--slotted-duration-loop-slow) linear infinite,slotted-spinner-head var(--slotted-duration-loop-slow) linear infinite,slotted-spinner-tail var(--slotted-duration-loop-slow) linear infinite;background-image:radial-gradient(circle at calc(50% + var(--_radius) * sin(var(--_end))) calc(50% - var(--_radius) * cos(var(--_end))),currentColor calc(var(--_cap) - .5px),transparent calc(var(--_cap) + .5px)),radial-gradient(circle at calc(50% + var(--_radius) * sin(var(--_start))) calc(50% - var(--_radius) * cos(var(--_start))),currentColor calc(var(--_cap) - .5px),transparent calc(var(--_cap) + .5px)),conic-gradient(from var(--_start),currentColor 0deg,currentColor calc(var(--_head) - var(--_tail)),transparent calc(var(--_head) - var(--_tail))),conic-gradient(var(--_track) 0 100%);background-origin:content-box;background-clip:content-box;block-size:var(--_size);box-sizing:border-box;display:inline-block;flex:none;inline-size:var(--_size);-webkit-mask-image:radial-gradient(circle,transparent calc(var(--_ring) / 2 - var(--_stroke) - .5px),#000 calc(var(--_ring) / 2 - var(--_stroke) + .5px),#000 calc(var(--_ring) / 2 - .5px),transparent calc(var(--_ring) / 2 + .5px));mask-image:radial-gradient(circle,transparent calc(var(--_ring) / 2 - var(--_stroke) - .5px),#000 calc(var(--_ring) / 2 - var(--_stroke) + .5px),#000 calc(var(--_ring) / 2 - .5px),transparent calc(var(--_ring) / 2 + .5px));opacity:1;padding:calc((var(--_size) - var(--_ring)) / 2);scale:1;transition:opacity var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),scale var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);vertical-align:middle}@starting-style{[data-ui=spinner]{opacity:0;scale:.6}}@media(prefers-reduced-motion:reduce){[data-ui=spinner]{--_head: 270deg;animation:none}}@media(forced-colors:active){[data-ui=spinner]{forced-color-adjust:none}}}@property --_turn{inherits: false; initial-value: 0deg; syntax: \"<angle>\";}@property --_head{inherits: false; initial-value: 20deg; syntax: \"<angle>\";}@property --_tail{inherits: false; initial-value: 0deg; syntax: \"<angle>\";}@keyframes slotted-spinner-turn{to{--_turn: 460deg}}@keyframes slotted-spinner-head{0%{--_head: 20deg;animation-timing-function:ease-in-out}50%,to{--_head: 280deg}}@keyframes slotted-spinner-tail{0%,50%{--_tail: 0deg;animation-timing-function:ease-in-out}to{--_tail: 260deg}}\n"] }]
|
|
170
|
+
}] });
|
|
171
|
+
/**
|
|
172
|
+
* The controlled and uncontrolled pair, decided by whether the consumer passed
|
|
173
|
+
* a value. `@slotted/core/state` owns that decision so the two bindings cannot
|
|
174
|
+
* disagree about who holds the value; the signal below is only where an
|
|
175
|
+
* uncontrolled toggle keeps its own.
|
|
176
|
+
*/
|
|
177
|
+
class PressedState {
|
|
178
|
+
source;
|
|
179
|
+
own = signal(undefined, /* @ts-ignore */
|
|
180
|
+
...(ngDevMode ? [{ debugName: "own" }] : /* istanbul ignore next */ []));
|
|
181
|
+
constructor(source) {
|
|
182
|
+
this.source = source;
|
|
183
|
+
}
|
|
184
|
+
value = () => this.source.pressed() ?? this.own() ?? this.source.defaultPressed() ?? false;
|
|
185
|
+
request(event) {
|
|
186
|
+
const next = !this.value();
|
|
187
|
+
const state = createControllable({
|
|
188
|
+
controlled: this.source.pressed(),
|
|
189
|
+
initial: this.value(),
|
|
190
|
+
onRequest: (request) => this.source.emit(request),
|
|
191
|
+
});
|
|
192
|
+
if (state.request(next, activationReason(event), event))
|
|
193
|
+
this.own.set(next);
|
|
194
|
+
}
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
/**
|
|
198
|
+
* The five colours are tones in `docs/token-foundation.md`, so the axis that
|
|
199
|
+
* selects one is `tone`. `variant` names what it actually selects: how the
|
|
200
|
+
* chosen tone is painted.
|
|
201
|
+
*/
|
|
202
|
+
const BUTTON_TONES = ['accent', 'secondary', 'success', 'warning', 'danger'];
|
|
203
|
+
const BUTTON_VARIANTS = ['solid', 'outline', 'ghost'];
|
|
204
|
+
const BUTTON_SIZES = ['sm', 'md', 'lg'];
|
|
205
|
+
const BUTTON_SHAPES = ['square', 'circle'];
|
|
206
|
+
const BUTTON_DEFAULTS = { tone: 'accent', variant: 'solid', size: 'md' };
|
|
207
|
+
const BUTTON_LINK_DEFAULTS = BUTTON_DEFAULTS;
|
|
208
|
+
const ICON_BUTTON_DEFAULTS = {
|
|
209
|
+
tone: 'secondary',
|
|
210
|
+
variant: 'ghost',
|
|
211
|
+
size: 'md',
|
|
212
|
+
shape: 'square',
|
|
213
|
+
};
|
|
214
|
+
const TOGGLE_BUTTON_DEFAULTS = {
|
|
215
|
+
tone: 'secondary',
|
|
216
|
+
variant: 'outline',
|
|
217
|
+
size: 'md',
|
|
218
|
+
};
|
|
219
|
+
|
|
220
|
+
/**
|
|
221
|
+
* A momentary action. Persistent state belongs to SlToggleButton, and
|
|
222
|
+
* navigation to SlButtonLink, so this member never grows an `aria-pressed` or
|
|
223
|
+
* an `href`.
|
|
224
|
+
*
|
|
225
|
+
* There is no `render` input, and there is no need for one: the component is a
|
|
226
|
+
* directive on the element the consumer wrote, so substituting the element is
|
|
227
|
+
* something the consumer does by writing a different one.
|
|
228
|
+
*/
|
|
229
|
+
class SlButton {
|
|
230
|
+
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
231
|
+
/**
|
|
232
|
+
* Keeps an unavailable control in the tab sequence, announcing
|
|
233
|
+
* `aria-disabled` instead of carrying the attribute that removes it. The
|
|
234
|
+
* activation is refused either way.
|
|
235
|
+
*/
|
|
236
|
+
focusableWhenDisabled = input(false, { ...(ngDevMode ? { debugName: "focusableWhenDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
237
|
+
fullWidth = input(false, { ...(ngDevMode ? { debugName: "fullWidth" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
238
|
+
loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
239
|
+
/** How long the wait lasts before the ring is drawn. The refusal is immediate. */
|
|
240
|
+
loadingDelay = input(0, { ...(ngDevMode ? { debugName: "loadingDelay" } : /* istanbul ignore next */ {}), transform: numberAttribute });
|
|
241
|
+
/**
|
|
242
|
+
* Words laid over the catalog of the language in force, key by key: what the
|
|
243
|
+
* ring announces itself as (`loading`). It is a progress bar, so it has a name.
|
|
244
|
+
*/
|
|
245
|
+
messages = input(undefined, /* @ts-ignore */
|
|
246
|
+
...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
|
|
247
|
+
/** The family's words in the language in force, with this button's `messages` laid over them. */
|
|
248
|
+
t = injectMessages(buttonMessages, this.messages);
|
|
249
|
+
size = input(undefined, /* @ts-ignore */
|
|
250
|
+
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
251
|
+
tone = input(undefined, /* @ts-ignore */
|
|
252
|
+
...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
|
|
253
|
+
type = input('button', /* @ts-ignore */
|
|
254
|
+
...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
|
|
255
|
+
variant = input(undefined, /* @ts-ignore */
|
|
256
|
+
...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
257
|
+
stateAttribute = stateAttribute;
|
|
258
|
+
appearance = resolveAppearance(this, BUTTON_DEFAULTS);
|
|
259
|
+
inert = resolveInertness(this);
|
|
260
|
+
waiting = resolveLoadingIndicator(this.loading, this.loadingDelay);
|
|
261
|
+
start = contentChild(SlButtonStart, /* @ts-ignore */
|
|
262
|
+
...(ngDevMode ? [{ debugName: "start" }] : /* istanbul ignore next */ []));
|
|
263
|
+
end = contentChild(SlButtonEnd, /* @ts-ignore */
|
|
264
|
+
...(ngDevMode ? [{ debugName: "end" }] : /* istanbul ignore next */ []));
|
|
265
|
+
hasStart = computed(() => this.start() !== undefined, /* @ts-ignore */
|
|
266
|
+
...(ngDevMode ? [{ debugName: "hasStart" }] : /* istanbul ignore next */ []));
|
|
267
|
+
/**
|
|
268
|
+
* A control with a visual slot gives the ring that box, and the slot draws
|
|
269
|
+
* it. Only a control with neither draws one of its own, centred over the
|
|
270
|
+
* label the stylesheet then fades.
|
|
271
|
+
*/
|
|
272
|
+
hasVisualSlot = computed(() => this.start() !== undefined || this.end() !== undefined, /* @ts-ignore */
|
|
273
|
+
...(ngDevMode ? [{ debugName: "hasVisualSlot" }] : /* istanbul ignore next */ []));
|
|
274
|
+
/**
|
|
275
|
+
* The capture phase, because a control that is unavailable or still working
|
|
276
|
+
* must refuse the activation before any listener the consumer attached to it
|
|
277
|
+
* can run — including the submit a `type="submit"` button would perform while
|
|
278
|
+
* it keeps its place in the tab sequence.
|
|
279
|
+
*/
|
|
280
|
+
constructor() {
|
|
281
|
+
const element = inject((ElementRef)).nativeElement;
|
|
282
|
+
const listener = (event) => {
|
|
283
|
+
if (this.inert.refuses())
|
|
284
|
+
blockActivation(event);
|
|
285
|
+
};
|
|
286
|
+
element.addEventListener('click', listener, { capture: true });
|
|
287
|
+
inject(DestroyRef).onDestroy(() => element.removeEventListener('click', listener, { capture: true }));
|
|
288
|
+
}
|
|
289
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
290
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlButton, isStandalone: true, selector: "button[slButton]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, focusableWhenDisabled: { classPropertyName: "focusableWhenDisabled", publicName: "focusableWhenDisabled", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingDelay: { classPropertyName: "loadingDelay", publicName: "loadingDelay", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-ui": "button", "data-part": "root" }, properties: { "attr.aria-disabled": "inert.ariaDisabled()", "attr.data-tone": "appearance.tone()", "attr.data-variant": "appearance.variant()", "attr.data-size": "appearance.size()", "attr.data-full-width": "stateAttribute(fullWidth())", "attr.data-disabled": "stateAttribute(disabled())", "attr.data-loading": "stateAttribute(loading())", "disabled": "inert.nativelyDisabled()", "attr.type": "type()" } }, providers: [{ provide: BUTTON_WAIT, useExisting: forwardRef(() => SlButton) }], queries: [{ propertyName: "start", first: true, predicate: SlButtonStart, descendants: true, isSignal: true }, { propertyName: "end", first: true, predicate: SlButtonEnd, descendants: true, isSignal: true }], exportAs: ["slButton"], ngImport: i0, template: `<ng-content select="[slButtonStart]"></ng-content
|
|
291
|
+
><span data-part="label"><ng-content></ng-content></span
|
|
292
|
+
><ng-content select="[slButtonEnd]"></ng-content>
|
|
293
|
+
@if (waiting() && !hasVisualSlot()) {
|
|
294
|
+
<span
|
|
295
|
+
data-part="indicator"
|
|
296
|
+
data-ui="spinner"
|
|
297
|
+
role="progressbar"
|
|
298
|
+
[attr.aria-label]="t('loading')"
|
|
299
|
+
></span>
|
|
300
|
+
}`, isInline: true, styles: ["@layer slotted.components{[data-ui=button]{--_solid: var(--slotted-tone-accent-solid);--_solid-hover: var(--slotted-tone-accent-solid-hover);--_solid-active: var(--slotted-tone-accent-solid-active);--_on-solid: var(--slotted-tone-accent-on-solid);--_text: var(--slotted-tone-accent-text);--_edge: var(--_solid);--_height: var(--slotted-control-height-md, 34px);--_padding-inline: var(--slotted-control-padding-inline-md, 13px);--_font-size: var(--slotted-control-font-size-md, 13px);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_gap: var(--slotted-control-gap-md, 8px);--_padding-inline-visual: max( var(--slotted-space-2, .25rem), calc(var(--_padding-inline) - var(--slotted-space-2, .25rem)) );--_sweep-width: calc(var(--_height) * 2);--_sweep-strength: .34;align-items:center;appearance:none;background:transparent;border:var(--slotted-control-border-width, 1px) solid transparent;border-radius:var(--slotted-control-radius, 4px);box-sizing:border-box;cursor:pointer;display:inline-flex;font-family:var(--slotted-control-font-family, ui-sans-serif, system-ui, sans-serif);font-size:var(--_font-size);font-weight:var(--slotted-control-font-weight, 600);gap:var(--_gap);justify-content:center;letter-spacing:var(--slotted-control-letter-spacing, 0);line-height:var(--slotted-control-line-height, 1);max-inline-size:100%;min-block-size:var(--_height);padding-block:0;padding-inline:var(--_padding-inline);position:relative;text-align:center;text-decoration:none;text-wrap:balance;touch-action:manipulation;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),box-shadow var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),transform var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);-webkit-user-select:none;user-select:none;vertical-align:middle;-webkit-tap-highlight-color:transparent}[data-ui=button][data-tone=secondary]{--_solid: var(--slotted-tone-secondary-solid);--_solid-hover: var(--slotted-tone-secondary-solid-hover);--_solid-active: var(--slotted-tone-secondary-solid-active);--_on-solid: var(--slotted-tone-secondary-on-solid);--_text: var(--slotted-tone-secondary-text);--_edge: var(--_solid-active)}[data-ui=button][data-tone=success]{--_solid: var(--slotted-tone-success-solid);--_solid-hover: var(--slotted-tone-success-solid-hover);--_solid-active: var(--slotted-tone-success-solid-active);--_on-solid: var(--slotted-tone-success-on-solid);--_text: var(--slotted-tone-success-text)}[data-ui=button][data-tone=warning]{--_solid: var(--slotted-tone-warning-solid);--_solid-hover: var(--slotted-tone-warning-solid-hover);--_solid-active: var(--slotted-tone-warning-solid-active);--_on-solid: var(--slotted-tone-warning-on-solid);--_text: var(--slotted-tone-warning-text)}[data-ui=button][data-tone=danger]{--_solid: var(--slotted-tone-danger-solid);--_solid-hover: var(--slotted-tone-danger-solid-hover);--_solid-active: var(--slotted-tone-danger-solid-active);--_on-solid: var(--slotted-tone-danger-on-solid);--_text: var(--slotted-tone-danger-text)}[data-ui=button][data-size=sm]{--_height: var(--slotted-control-height-sm, 30px);--_padding-inline: var(--slotted-control-padding-inline-sm, 10px);--_font-size: var(--slotted-control-font-size-sm, 12px);--_icon-size: var(--slotted-control-icon-size-sm, 14px);--_gap: var(--slotted-control-gap-sm, 6px)}[data-ui=button][data-size=lg]{--_height: var(--slotted-control-height-lg, 38px);--_padding-inline: var(--slotted-control-padding-inline-lg, 16px);--_font-size: var(--slotted-control-font-size-lg, 14px);--_icon-size: var(--slotted-control-icon-size-lg, 18px);--_gap: var(--slotted-control-gap-lg, 8px)}[data-ui=button][data-variant=solid]{background:var(--_solid, ButtonFace);border-color:var(--_edge, ButtonBorder);box-shadow:var(--slotted-control-shadow, none);color:var(--_on-solid, ButtonText)}[data-ui=button][data-variant=outline]{background:transparent;border-color:var(--slotted-control-border-color, ButtonBorder);box-shadow:var(--slotted-control-shadow, none);color:var(--_text, ButtonText)}[data-ui=button][data-variant=ghost]{background:transparent;border-color:transparent;color:var(--_text, ButtonText)}[data-ui=button][data-variant=outline],[data-ui=button][data-variant=ghost],[data-ui=button][data-variant=solid][data-tone=secondary]{--_sweep-strength: .18}[data-ui=button][data-pressed]:not(:disabled):not([data-disabled]){background:var(--slotted-tone-accent-subtle-active, Highlight);border-color:var(--slotted-tone-accent-border, Highlight);box-shadow:var(--slotted-control-shadow, none);color:var(--slotted-tone-accent-text, HighlightText)}[data-ui=button][data-variant=solid]:hover:not(:disabled):not([data-disabled]):not([data-loading]):not([data-pressed]){background:var(--_solid-hover, Highlight)}[data-ui=button][data-variant=solid]:active:not(:disabled):not([data-disabled]):not([data-loading]):not([data-pressed]){background:var(--_solid-active, Highlight);box-shadow:none;transform:translateY(var(--slotted-border-width-thin, 1px));transition-duration:var(--slotted-duration-instant)}[data-ui=button][data-variant=outline]:hover:not(:disabled):not([data-disabled]):not([data-loading]):not([data-pressed]),[data-ui=button][data-variant=ghost]:hover:not(:disabled):not([data-disabled]):not([data-loading]):not([data-pressed]){background:var(--slotted-tone-secondary-subtle-hover, ButtonFace)}[data-ui=button][data-variant=outline]:active:not(:disabled):not([data-disabled]):not([data-loading]):not([data-pressed]),[data-ui=button][data-variant=ghost]:active:not(:disabled):not([data-disabled]):not([data-loading]):not([data-pressed]){background:var(--slotted-tone-secondary-subtle-active, ButtonFace);transition-duration:var(--slotted-duration-instant)}[data-ui=button][data-pressed]:hover:not(:disabled):not([data-disabled]):not([data-loading]){background:var(--slotted-tone-accent-subtle-hover, Highlight)}[data-ui=button][data-pressed]:active:not(:disabled):not([data-disabled]):not([data-loading]){background:var(--slotted-tone-accent-subtle-active, Highlight);transition-duration:var(--slotted-duration-instant)}[data-ui=button]: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=button]:disabled,[data-ui=button][data-disabled]{box-shadow:none;color:var(--slotted-disabled-foreground, GrayText);cursor:not-allowed}[data-ui=button][data-variant=solid]:disabled,[data-ui=button][data-variant=solid][data-disabled]{background:var(--slotted-disabled-background, ButtonFace);border-color:var(--slotted-disabled-border, ButtonBorder)}[data-ui=button][data-variant=outline]:disabled,[data-ui=button][data-variant=outline][data-disabled]{background:transparent;border-color:var(--slotted-disabled-border, GrayText)}[data-ui=button][data-pressed]:disabled,[data-ui=button][data-pressed][data-disabled]{background:var(--slotted-disabled-background, ButtonFace);border-color:var(--slotted-disabled-border, GrayText);color:var(--slotted-disabled-foreground, GrayText)}[data-ui=button][data-disabled]:not(:disabled){color:var(--slotted-text-muted, GrayText)}[data-ui=button][data-variant=solid][data-disabled]:not(:disabled),[data-ui=button][data-pressed][data-disabled]:not(:disabled){background:var(--slotted-tone-secondary-subtle-hover, ButtonFace);border-color:var(--slotted-border-subtle, GrayText);color:var(--slotted-text-muted, GrayText)}[data-ui=button][data-variant=outline][data-disabled]:not(:disabled){border-color:var(--slotted-border-subtle, GrayText)}[data-ui=button][data-loading]{cursor:progress}[data-ui=button][data-loading]:has(>[data-part=indicator])>:not([data-part=indicator]){opacity:0}[data-ui=button] [data-part=indicator]{--slotted-spinner-size: var(--_icon-size);flex:none}[data-ui=button]>[data-part=indicator]{inset:0;margin:auto;position:absolute}@media(prefers-reduced-motion:no-preference){@media not (forced-colors:active){[data-ui=button]:not([data-shape])[data-loading]:has([data-part=indicator]):after{animation:slotted-button-sweep var(--slotted-duration-loop) linear infinite;background-image:linear-gradient(to right,transparent,currentColor 40%,transparent 80%);background-repeat:repeat-x;background-size:var(--_sweep-width) 100%;border-radius:inherit;content:\"\";inset:0;opacity:var(--_sweep-strength);pointer-events:none;position:absolute}[data-ui=button]:not([data-shape])[data-loading]:has([data-part=indicator]):dir(rtl):after{animation-direction:reverse;background-image:linear-gradient(to left,transparent,currentColor 40%,transparent 80%)}[data-ui=button]:not([data-shape])[data-loading]:has(>[data-part=indicator])>:not([data-part=indicator]){opacity:1}[data-ui=button]:not([data-shape])[data-loading] [data-part=indicator]{opacity:0;position:absolute}}}[data-ui=button] [data-part=start],[data-ui=button] [data-part=end],[data-ui=button] [data-part=icon]{align-items:center;block-size:var(--_icon-size);box-sizing:border-box;display:inline-flex;flex:none;font-size:var(--_icon-size);inline-size:var(--_icon-size);justify-content:center;line-height:1;position:relative}[data-ui=button] [data-part=start]>*:not([data-part=indicator]),[data-ui=button] [data-part=end]>*:not([data-part=indicator]),[data-ui=button] [data-part=icon]>*:not([data-part=indicator]){block-size:100%;display:block;inline-size:100%}[data-ui=button] [data-part=label]{line-height:var(--slotted-line-height-sm, 1.45);min-inline-size:0;overflow-wrap:anywhere}@supports (text-box: trim-both cap alphabetic){[data-ui=button] [data-part=label]{padding-block:calc((var(--slotted-line-height-sm, 1.45) * 1em - .75em) / 2);text-box:trim-both cap alphabetic}}[data-ui=button]:not([data-shape]):has(>[data-part=start]){padding-inline-start:var(--_padding-inline-visual)}[data-ui=button]:not([data-shape]):has(>[data-part=end]){padding-inline-end:var(--_padding-inline-visual)}[data-ui=button][data-full-width]{inline-size:100%}[data-ui=button][data-shape]{aspect-ratio:1;inline-size:var(--_height);min-block-size:max(var(--_height),var(--slotted-target-min, 24px));min-inline-size:var(--slotted-target-min, 24px);padding-block:0;padding-inline:0}[data-ui=button][data-shape=circle]{border-radius:var(--slotted-radius-full, 9999px)}@media(forced-colors:active){[data-ui=button]{border-color:ButtonBorder}[data-ui=button][data-pressed]{border-color:Highlight}[data-ui=button]:disabled,[data-ui=button][data-disabled]{border-color:GrayText;color:GrayText}}@media(prefers-reduced-motion:reduce){[data-ui=button] [data-part=indicator]{animation:none}}}@keyframes slotted-button-sweep{0%{background-position-x:calc(-1 * var(--_sweep-width))}to{background-position-x:0}}\n", "@layer slotted.components{[data-ui=spinner]{--_size: var(--slotted-spinner-size, var(--slotted-control-icon-size-md, 16px));--_ring: calc(var(--_size) * 5 / 6);--_stroke: max(var(--slotted-border-width-medium, 1.5px), calc(var(--_size) / 12));--_radius: calc((var(--_ring) - var(--_stroke)) / 2);--_track: color-mix(in oklab, currentColor 20%, transparent);--_start: calc(var(--_turn) + var(--_tail));--_end: calc(var(--_turn) + var(--_head));--_cap: calc(var(--_stroke) / 2);animation:slotted-spinner-turn var(--slotted-duration-loop-slow) linear infinite,slotted-spinner-head var(--slotted-duration-loop-slow) linear infinite,slotted-spinner-tail var(--slotted-duration-loop-slow) linear infinite;background-image:radial-gradient(circle at calc(50% + var(--_radius) * sin(var(--_end))) calc(50% - var(--_radius) * cos(var(--_end))),currentColor calc(var(--_cap) - .5px),transparent calc(var(--_cap) + .5px)),radial-gradient(circle at calc(50% + var(--_radius) * sin(var(--_start))) calc(50% - var(--_radius) * cos(var(--_start))),currentColor calc(var(--_cap) - .5px),transparent calc(var(--_cap) + .5px)),conic-gradient(from var(--_start),currentColor 0deg,currentColor calc(var(--_head) - var(--_tail)),transparent calc(var(--_head) - var(--_tail))),conic-gradient(var(--_track) 0 100%);background-origin:content-box;background-clip:content-box;block-size:var(--_size);box-sizing:border-box;display:inline-block;flex:none;inline-size:var(--_size);-webkit-mask-image:radial-gradient(circle,transparent calc(var(--_ring) / 2 - var(--_stroke) - .5px),#000 calc(var(--_ring) / 2 - var(--_stroke) + .5px),#000 calc(var(--_ring) / 2 - .5px),transparent calc(var(--_ring) / 2 + .5px));mask-image:radial-gradient(circle,transparent calc(var(--_ring) / 2 - var(--_stroke) - .5px),#000 calc(var(--_ring) / 2 - var(--_stroke) + .5px),#000 calc(var(--_ring) / 2 - .5px),transparent calc(var(--_ring) / 2 + .5px));opacity:1;padding:calc((var(--_size) - var(--_ring)) / 2);scale:1;transition:opacity var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),scale var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);vertical-align:middle}@starting-style{[data-ui=spinner]{opacity:0;scale:.6}}@media(prefers-reduced-motion:reduce){[data-ui=spinner]{--_head: 270deg;animation:none}}@media(forced-colors:active){[data-ui=spinner]{forced-color-adjust:none}}}@property --_turn{inherits: false; initial-value: 0deg; syntax: \"<angle>\";}@property --_head{inherits: false; initial-value: 20deg; syntax: \"<angle>\";}@property --_tail{inherits: false; initial-value: 0deg; syntax: \"<angle>\";}@keyframes slotted-spinner-turn{to{--_turn: 460deg}}@keyframes slotted-spinner-head{0%{--_head: 20deg;animation-timing-function:ease-in-out}50%,to{--_head: 280deg}}@keyframes slotted-spinner-tail{0%,50%{--_tail: 0deg;animation-timing-function:ease-in-out}to{--_tail: 260deg}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
301
|
+
}
|
|
302
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlButton, decorators: [{
|
|
303
|
+
type: Component,
|
|
304
|
+
args: [{ selector: 'button[slButton]', standalone: true, template: `<ng-content select="[slButtonStart]"></ng-content
|
|
305
|
+
><span data-part="label"><ng-content></ng-content></span
|
|
306
|
+
><ng-content select="[slButtonEnd]"></ng-content>
|
|
307
|
+
@if (waiting() && !hasVisualSlot()) {
|
|
308
|
+
<span
|
|
309
|
+
data-part="indicator"
|
|
310
|
+
data-ui="spinner"
|
|
311
|
+
role="progressbar"
|
|
312
|
+
[attr.aria-label]="t('loading')"
|
|
313
|
+
></span>
|
|
314
|
+
}`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'slButton', providers: [{ provide: BUTTON_WAIT, useExisting: forwardRef(() => SlButton) }], host: {
|
|
315
|
+
'data-ui': 'button',
|
|
316
|
+
'data-part': 'root',
|
|
317
|
+
'[attr.aria-disabled]': 'inert.ariaDisabled()',
|
|
318
|
+
'[attr.data-tone]': 'appearance.tone()',
|
|
319
|
+
'[attr.data-variant]': 'appearance.variant()',
|
|
320
|
+
'[attr.data-size]': 'appearance.size()',
|
|
321
|
+
'[attr.data-full-width]': 'stateAttribute(fullWidth())',
|
|
322
|
+
'[attr.data-disabled]': 'stateAttribute(disabled())',
|
|
323
|
+
'[attr.data-loading]': 'stateAttribute(loading())',
|
|
324
|
+
'[disabled]': 'inert.nativelyDisabled()',
|
|
325
|
+
'[attr.type]': 'type()',
|
|
326
|
+
}, styles: ["@layer slotted.components{[data-ui=button]{--_solid: var(--slotted-tone-accent-solid);--_solid-hover: var(--slotted-tone-accent-solid-hover);--_solid-active: var(--slotted-tone-accent-solid-active);--_on-solid: var(--slotted-tone-accent-on-solid);--_text: var(--slotted-tone-accent-text);--_edge: var(--_solid);--_height: var(--slotted-control-height-md, 34px);--_padding-inline: var(--slotted-control-padding-inline-md, 13px);--_font-size: var(--slotted-control-font-size-md, 13px);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_gap: var(--slotted-control-gap-md, 8px);--_padding-inline-visual: max( var(--slotted-space-2, .25rem), calc(var(--_padding-inline) - var(--slotted-space-2, .25rem)) );--_sweep-width: calc(var(--_height) * 2);--_sweep-strength: .34;align-items:center;appearance:none;background:transparent;border:var(--slotted-control-border-width, 1px) solid transparent;border-radius:var(--slotted-control-radius, 4px);box-sizing:border-box;cursor:pointer;display:inline-flex;font-family:var(--slotted-control-font-family, ui-sans-serif, system-ui, sans-serif);font-size:var(--_font-size);font-weight:var(--slotted-control-font-weight, 600);gap:var(--_gap);justify-content:center;letter-spacing:var(--slotted-control-letter-spacing, 0);line-height:var(--slotted-control-line-height, 1);max-inline-size:100%;min-block-size:var(--_height);padding-block:0;padding-inline:var(--_padding-inline);position:relative;text-align:center;text-decoration:none;text-wrap:balance;touch-action:manipulation;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),box-shadow var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),transform var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);-webkit-user-select:none;user-select:none;vertical-align:middle;-webkit-tap-highlight-color:transparent}[data-ui=button][data-tone=secondary]{--_solid: var(--slotted-tone-secondary-solid);--_solid-hover: var(--slotted-tone-secondary-solid-hover);--_solid-active: var(--slotted-tone-secondary-solid-active);--_on-solid: var(--slotted-tone-secondary-on-solid);--_text: var(--slotted-tone-secondary-text);--_edge: var(--_solid-active)}[data-ui=button][data-tone=success]{--_solid: var(--slotted-tone-success-solid);--_solid-hover: var(--slotted-tone-success-solid-hover);--_solid-active: var(--slotted-tone-success-solid-active);--_on-solid: var(--slotted-tone-success-on-solid);--_text: var(--slotted-tone-success-text)}[data-ui=button][data-tone=warning]{--_solid: var(--slotted-tone-warning-solid);--_solid-hover: var(--slotted-tone-warning-solid-hover);--_solid-active: var(--slotted-tone-warning-solid-active);--_on-solid: var(--slotted-tone-warning-on-solid);--_text: var(--slotted-tone-warning-text)}[data-ui=button][data-tone=danger]{--_solid: var(--slotted-tone-danger-solid);--_solid-hover: var(--slotted-tone-danger-solid-hover);--_solid-active: var(--slotted-tone-danger-solid-active);--_on-solid: var(--slotted-tone-danger-on-solid);--_text: var(--slotted-tone-danger-text)}[data-ui=button][data-size=sm]{--_height: var(--slotted-control-height-sm, 30px);--_padding-inline: var(--slotted-control-padding-inline-sm, 10px);--_font-size: var(--slotted-control-font-size-sm, 12px);--_icon-size: var(--slotted-control-icon-size-sm, 14px);--_gap: var(--slotted-control-gap-sm, 6px)}[data-ui=button][data-size=lg]{--_height: var(--slotted-control-height-lg, 38px);--_padding-inline: var(--slotted-control-padding-inline-lg, 16px);--_font-size: var(--slotted-control-font-size-lg, 14px);--_icon-size: var(--slotted-control-icon-size-lg, 18px);--_gap: var(--slotted-control-gap-lg, 8px)}[data-ui=button][data-variant=solid]{background:var(--_solid, ButtonFace);border-color:var(--_edge, ButtonBorder);box-shadow:var(--slotted-control-shadow, none);color:var(--_on-solid, ButtonText)}[data-ui=button][data-variant=outline]{background:transparent;border-color:var(--slotted-control-border-color, ButtonBorder);box-shadow:var(--slotted-control-shadow, none);color:var(--_text, ButtonText)}[data-ui=button][data-variant=ghost]{background:transparent;border-color:transparent;color:var(--_text, ButtonText)}[data-ui=button][data-variant=outline],[data-ui=button][data-variant=ghost],[data-ui=button][data-variant=solid][data-tone=secondary]{--_sweep-strength: .18}[data-ui=button][data-pressed]:not(:disabled):not([data-disabled]){background:var(--slotted-tone-accent-subtle-active, Highlight);border-color:var(--slotted-tone-accent-border, Highlight);box-shadow:var(--slotted-control-shadow, none);color:var(--slotted-tone-accent-text, HighlightText)}[data-ui=button][data-variant=solid]:hover:not(:disabled):not([data-disabled]):not([data-loading]):not([data-pressed]){background:var(--_solid-hover, Highlight)}[data-ui=button][data-variant=solid]:active:not(:disabled):not([data-disabled]):not([data-loading]):not([data-pressed]){background:var(--_solid-active, Highlight);box-shadow:none;transform:translateY(var(--slotted-border-width-thin, 1px));transition-duration:var(--slotted-duration-instant)}[data-ui=button][data-variant=outline]:hover:not(:disabled):not([data-disabled]):not([data-loading]):not([data-pressed]),[data-ui=button][data-variant=ghost]:hover:not(:disabled):not([data-disabled]):not([data-loading]):not([data-pressed]){background:var(--slotted-tone-secondary-subtle-hover, ButtonFace)}[data-ui=button][data-variant=outline]:active:not(:disabled):not([data-disabled]):not([data-loading]):not([data-pressed]),[data-ui=button][data-variant=ghost]:active:not(:disabled):not([data-disabled]):not([data-loading]):not([data-pressed]){background:var(--slotted-tone-secondary-subtle-active, ButtonFace);transition-duration:var(--slotted-duration-instant)}[data-ui=button][data-pressed]:hover:not(:disabled):not([data-disabled]):not([data-loading]){background:var(--slotted-tone-accent-subtle-hover, Highlight)}[data-ui=button][data-pressed]:active:not(:disabled):not([data-disabled]):not([data-loading]){background:var(--slotted-tone-accent-subtle-active, Highlight);transition-duration:var(--slotted-duration-instant)}[data-ui=button]: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=button]:disabled,[data-ui=button][data-disabled]{box-shadow:none;color:var(--slotted-disabled-foreground, GrayText);cursor:not-allowed}[data-ui=button][data-variant=solid]:disabled,[data-ui=button][data-variant=solid][data-disabled]{background:var(--slotted-disabled-background, ButtonFace);border-color:var(--slotted-disabled-border, ButtonBorder)}[data-ui=button][data-variant=outline]:disabled,[data-ui=button][data-variant=outline][data-disabled]{background:transparent;border-color:var(--slotted-disabled-border, GrayText)}[data-ui=button][data-pressed]:disabled,[data-ui=button][data-pressed][data-disabled]{background:var(--slotted-disabled-background, ButtonFace);border-color:var(--slotted-disabled-border, GrayText);color:var(--slotted-disabled-foreground, GrayText)}[data-ui=button][data-disabled]:not(:disabled){color:var(--slotted-text-muted, GrayText)}[data-ui=button][data-variant=solid][data-disabled]:not(:disabled),[data-ui=button][data-pressed][data-disabled]:not(:disabled){background:var(--slotted-tone-secondary-subtle-hover, ButtonFace);border-color:var(--slotted-border-subtle, GrayText);color:var(--slotted-text-muted, GrayText)}[data-ui=button][data-variant=outline][data-disabled]:not(:disabled){border-color:var(--slotted-border-subtle, GrayText)}[data-ui=button][data-loading]{cursor:progress}[data-ui=button][data-loading]:has(>[data-part=indicator])>:not([data-part=indicator]){opacity:0}[data-ui=button] [data-part=indicator]{--slotted-spinner-size: var(--_icon-size);flex:none}[data-ui=button]>[data-part=indicator]{inset:0;margin:auto;position:absolute}@media(prefers-reduced-motion:no-preference){@media not (forced-colors:active){[data-ui=button]:not([data-shape])[data-loading]:has([data-part=indicator]):after{animation:slotted-button-sweep var(--slotted-duration-loop) linear infinite;background-image:linear-gradient(to right,transparent,currentColor 40%,transparent 80%);background-repeat:repeat-x;background-size:var(--_sweep-width) 100%;border-radius:inherit;content:\"\";inset:0;opacity:var(--_sweep-strength);pointer-events:none;position:absolute}[data-ui=button]:not([data-shape])[data-loading]:has([data-part=indicator]):dir(rtl):after{animation-direction:reverse;background-image:linear-gradient(to left,transparent,currentColor 40%,transparent 80%)}[data-ui=button]:not([data-shape])[data-loading]:has(>[data-part=indicator])>:not([data-part=indicator]){opacity:1}[data-ui=button]:not([data-shape])[data-loading] [data-part=indicator]{opacity:0;position:absolute}}}[data-ui=button] [data-part=start],[data-ui=button] [data-part=end],[data-ui=button] [data-part=icon]{align-items:center;block-size:var(--_icon-size);box-sizing:border-box;display:inline-flex;flex:none;font-size:var(--_icon-size);inline-size:var(--_icon-size);justify-content:center;line-height:1;position:relative}[data-ui=button] [data-part=start]>*:not([data-part=indicator]),[data-ui=button] [data-part=end]>*:not([data-part=indicator]),[data-ui=button] [data-part=icon]>*:not([data-part=indicator]){block-size:100%;display:block;inline-size:100%}[data-ui=button] [data-part=label]{line-height:var(--slotted-line-height-sm, 1.45);min-inline-size:0;overflow-wrap:anywhere}@supports (text-box: trim-both cap alphabetic){[data-ui=button] [data-part=label]{padding-block:calc((var(--slotted-line-height-sm, 1.45) * 1em - .75em) / 2);text-box:trim-both cap alphabetic}}[data-ui=button]:not([data-shape]):has(>[data-part=start]){padding-inline-start:var(--_padding-inline-visual)}[data-ui=button]:not([data-shape]):has(>[data-part=end]){padding-inline-end:var(--_padding-inline-visual)}[data-ui=button][data-full-width]{inline-size:100%}[data-ui=button][data-shape]{aspect-ratio:1;inline-size:var(--_height);min-block-size:max(var(--_height),var(--slotted-target-min, 24px));min-inline-size:var(--slotted-target-min, 24px);padding-block:0;padding-inline:0}[data-ui=button][data-shape=circle]{border-radius:var(--slotted-radius-full, 9999px)}@media(forced-colors:active){[data-ui=button]{border-color:ButtonBorder}[data-ui=button][data-pressed]{border-color:Highlight}[data-ui=button]:disabled,[data-ui=button][data-disabled]{border-color:GrayText;color:GrayText}}@media(prefers-reduced-motion:reduce){[data-ui=button] [data-part=indicator]{animation:none}}}@keyframes slotted-button-sweep{0%{background-position-x:calc(-1 * var(--_sweep-width))}to{background-position-x:0}}\n", "@layer slotted.components{[data-ui=spinner]{--_size: var(--slotted-spinner-size, var(--slotted-control-icon-size-md, 16px));--_ring: calc(var(--_size) * 5 / 6);--_stroke: max(var(--slotted-border-width-medium, 1.5px), calc(var(--_size) / 12));--_radius: calc((var(--_ring) - var(--_stroke)) / 2);--_track: color-mix(in oklab, currentColor 20%, transparent);--_start: calc(var(--_turn) + var(--_tail));--_end: calc(var(--_turn) + var(--_head));--_cap: calc(var(--_stroke) / 2);animation:slotted-spinner-turn var(--slotted-duration-loop-slow) linear infinite,slotted-spinner-head var(--slotted-duration-loop-slow) linear infinite,slotted-spinner-tail var(--slotted-duration-loop-slow) linear infinite;background-image:radial-gradient(circle at calc(50% + var(--_radius) * sin(var(--_end))) calc(50% - var(--_radius) * cos(var(--_end))),currentColor calc(var(--_cap) - .5px),transparent calc(var(--_cap) + .5px)),radial-gradient(circle at calc(50% + var(--_radius) * sin(var(--_start))) calc(50% - var(--_radius) * cos(var(--_start))),currentColor calc(var(--_cap) - .5px),transparent calc(var(--_cap) + .5px)),conic-gradient(from var(--_start),currentColor 0deg,currentColor calc(var(--_head) - var(--_tail)),transparent calc(var(--_head) - var(--_tail))),conic-gradient(var(--_track) 0 100%);background-origin:content-box;background-clip:content-box;block-size:var(--_size);box-sizing:border-box;display:inline-block;flex:none;inline-size:var(--_size);-webkit-mask-image:radial-gradient(circle,transparent calc(var(--_ring) / 2 - var(--_stroke) - .5px),#000 calc(var(--_ring) / 2 - var(--_stroke) + .5px),#000 calc(var(--_ring) / 2 - .5px),transparent calc(var(--_ring) / 2 + .5px));mask-image:radial-gradient(circle,transparent calc(var(--_ring) / 2 - var(--_stroke) - .5px),#000 calc(var(--_ring) / 2 - var(--_stroke) + .5px),#000 calc(var(--_ring) / 2 - .5px),transparent calc(var(--_ring) / 2 + .5px));opacity:1;padding:calc((var(--_size) - var(--_ring)) / 2);scale:1;transition:opacity var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),scale var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);vertical-align:middle}@starting-style{[data-ui=spinner]{opacity:0;scale:.6}}@media(prefers-reduced-motion:reduce){[data-ui=spinner]{--_head: 270deg;animation:none}}@media(forced-colors:active){[data-ui=spinner]{forced-color-adjust:none}}}@property --_turn{inherits: false; initial-value: 0deg; syntax: \"<angle>\";}@property --_head{inherits: false; initial-value: 20deg; syntax: \"<angle>\";}@property --_tail{inherits: false; initial-value: 0deg; syntax: \"<angle>\";}@keyframes slotted-spinner-turn{to{--_turn: 460deg}}@keyframes slotted-spinner-head{0%{--_head: 20deg;animation-timing-function:ease-in-out}50%,to{--_head: 280deg}}@keyframes slotted-spinner-tail{0%,50%{--_tail: 0deg;animation-timing-function:ease-in-out}to{--_tail: 260deg}}\n"] }]
|
|
327
|
+
}], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], focusableWhenDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusableWhenDisabled", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingDelay", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], start: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SlButtonStart), { isSignal: true }] }], end: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SlButtonEnd), { isSignal: true }] }] } });
|
|
328
|
+
|
|
329
|
+
/**
|
|
330
|
+
* Navigation wearing the action surface. The element is an `a`, so activation,
|
|
331
|
+
* the context menu and every modified click stay the platform's, and Space
|
|
332
|
+
* does not activate it because Space does not activate a link. `routerLink`
|
|
333
|
+
* works on it for the same reason: the component is a directive on the
|
|
334
|
+
* consumer's own anchor.
|
|
335
|
+
*
|
|
336
|
+
* A disabled link keeps no `href`. An anchor that keeps its destination and
|
|
337
|
+
* only blocks `click` still navigates on a middle click and on a modified
|
|
338
|
+
* click; taking the destination away is what actually disables it. It stays in
|
|
339
|
+
* the tab sequence with `role="link"` and `aria-disabled`, because a control a
|
|
340
|
+
* keyboard user cannot reach is one they cannot discover is unavailable.
|
|
341
|
+
*/
|
|
342
|
+
class SlButtonLink {
|
|
343
|
+
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
344
|
+
fullWidth = input(false, { ...(ngDevMode ? { debugName: "fullWidth" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
345
|
+
size = input(undefined, /* @ts-ignore */
|
|
346
|
+
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
347
|
+
tone = input(undefined, /* @ts-ignore */
|
|
348
|
+
...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
|
|
349
|
+
variant = input(undefined, /* @ts-ignore */
|
|
350
|
+
...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
351
|
+
/**
|
|
352
|
+
* The destination, when the anchor is not driven by a router. A `routerLink`
|
|
353
|
+
* on the same element writes the `href` itself, and this input stays unset.
|
|
354
|
+
*/
|
|
355
|
+
href = input(undefined, /* @ts-ignore */
|
|
356
|
+
...(ngDevMode ? [{ debugName: "href" }] : /* istanbul ignore next */ []));
|
|
357
|
+
stateAttribute = stateAttribute;
|
|
358
|
+
appearance = resolveAppearance(this, BUTTON_LINK_DEFAULTS);
|
|
359
|
+
/**
|
|
360
|
+
* A disabled link keeps its place in the tab sequence: without an `href` the
|
|
361
|
+
* anchor would drop out of it, so the zero is stated rather than inherited.
|
|
362
|
+
*/
|
|
363
|
+
tabIndex = computed(() => (this.disabled() ? 0 : null), /* @ts-ignore */
|
|
364
|
+
...(ngDevMode ? [{ debugName: "tabIndex" }] : /* istanbul ignore next */ []));
|
|
365
|
+
constructor() {
|
|
366
|
+
const element = inject((ElementRef)).nativeElement;
|
|
367
|
+
const destroyRef = inject(DestroyRef);
|
|
368
|
+
const listen = (type, listener) => {
|
|
369
|
+
element.addEventListener(type, listener, { capture: true });
|
|
370
|
+
destroyRef.onDestroy(() => element.removeEventListener(type, listener, { capture: true }));
|
|
371
|
+
};
|
|
372
|
+
listen('click', (event) => this.refuse(event));
|
|
373
|
+
listen('auxclick', (event) => this.refuse(event));
|
|
374
|
+
listen('keydown', (event) => {
|
|
375
|
+
if (event.key === 'Enter')
|
|
376
|
+
this.refuse(event);
|
|
377
|
+
});
|
|
378
|
+
}
|
|
379
|
+
refuse(event) {
|
|
380
|
+
if (this.disabled())
|
|
381
|
+
blockActivation(event);
|
|
382
|
+
}
|
|
383
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlButtonLink, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
384
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: SlButtonLink, isStandalone: true, selector: "a[slButtonLink]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-ui": "button", "data-part": "root" }, properties: { "attr.aria-disabled": "disabled() ? 'true' : null", "attr.role": "disabled() ? 'link' : null", "attr.href": "disabled() ? null : href()", "attr.tabindex": "tabIndex()", "attr.data-tone": "appearance.tone()", "attr.data-variant": "appearance.variant()", "attr.data-size": "appearance.size()", "attr.data-full-width": "stateAttribute(fullWidth())", "attr.data-disabled": "stateAttribute(disabled())" } }, exportAs: ["slButtonLink"], ngImport: i0, template: `<ng-content select="[slButtonStart]"></ng-content
|
|
385
|
+
><span data-part="label"><ng-content></ng-content></span
|
|
386
|
+
><ng-content select="[slButtonEnd]"></ng-content>`, isInline: true, styles: ["@layer slotted.components{[data-ui=button]{--_solid: var(--slotted-tone-accent-solid);--_solid-hover: var(--slotted-tone-accent-solid-hover);--_solid-active: var(--slotted-tone-accent-solid-active);--_on-solid: var(--slotted-tone-accent-on-solid);--_text: var(--slotted-tone-accent-text);--_edge: var(--_solid);--_height: var(--slotted-control-height-md, 34px);--_padding-inline: var(--slotted-control-padding-inline-md, 13px);--_font-size: var(--slotted-control-font-size-md, 13px);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_gap: var(--slotted-control-gap-md, 8px);--_padding-inline-visual: max( var(--slotted-space-2, .25rem), calc(var(--_padding-inline) - var(--slotted-space-2, .25rem)) );--_sweep-width: calc(var(--_height) * 2);--_sweep-strength: .34;align-items:center;appearance:none;background:transparent;border:var(--slotted-control-border-width, 1px) solid transparent;border-radius:var(--slotted-control-radius, 4px);box-sizing:border-box;cursor:pointer;display:inline-flex;font-family:var(--slotted-control-font-family, ui-sans-serif, system-ui, sans-serif);font-size:var(--_font-size);font-weight:var(--slotted-control-font-weight, 600);gap:var(--_gap);justify-content:center;letter-spacing:var(--slotted-control-letter-spacing, 0);line-height:var(--slotted-control-line-height, 1);max-inline-size:100%;min-block-size:var(--_height);padding-block:0;padding-inline:var(--_padding-inline);position:relative;text-align:center;text-decoration:none;text-wrap:balance;touch-action:manipulation;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),box-shadow var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),transform var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);-webkit-user-select:none;user-select:none;vertical-align:middle;-webkit-tap-highlight-color:transparent}[data-ui=button][data-tone=secondary]{--_solid: var(--slotted-tone-secondary-solid);--_solid-hover: var(--slotted-tone-secondary-solid-hover);--_solid-active: var(--slotted-tone-secondary-solid-active);--_on-solid: var(--slotted-tone-secondary-on-solid);--_text: var(--slotted-tone-secondary-text);--_edge: var(--_solid-active)}[data-ui=button][data-tone=success]{--_solid: var(--slotted-tone-success-solid);--_solid-hover: var(--slotted-tone-success-solid-hover);--_solid-active: var(--slotted-tone-success-solid-active);--_on-solid: var(--slotted-tone-success-on-solid);--_text: var(--slotted-tone-success-text)}[data-ui=button][data-tone=warning]{--_solid: var(--slotted-tone-warning-solid);--_solid-hover: var(--slotted-tone-warning-solid-hover);--_solid-active: var(--slotted-tone-warning-solid-active);--_on-solid: var(--slotted-tone-warning-on-solid);--_text: var(--slotted-tone-warning-text)}[data-ui=button][data-tone=danger]{--_solid: var(--slotted-tone-danger-solid);--_solid-hover: var(--slotted-tone-danger-solid-hover);--_solid-active: var(--slotted-tone-danger-solid-active);--_on-solid: var(--slotted-tone-danger-on-solid);--_text: var(--slotted-tone-danger-text)}[data-ui=button][data-size=sm]{--_height: var(--slotted-control-height-sm, 30px);--_padding-inline: var(--slotted-control-padding-inline-sm, 10px);--_font-size: var(--slotted-control-font-size-sm, 12px);--_icon-size: var(--slotted-control-icon-size-sm, 14px);--_gap: var(--slotted-control-gap-sm, 6px)}[data-ui=button][data-size=lg]{--_height: var(--slotted-control-height-lg, 38px);--_padding-inline: var(--slotted-control-padding-inline-lg, 16px);--_font-size: var(--slotted-control-font-size-lg, 14px);--_icon-size: var(--slotted-control-icon-size-lg, 18px);--_gap: var(--slotted-control-gap-lg, 8px)}[data-ui=button][data-variant=solid]{background:var(--_solid, ButtonFace);border-color:var(--_edge, ButtonBorder);box-shadow:var(--slotted-control-shadow, none);color:var(--_on-solid, ButtonText)}[data-ui=button][data-variant=outline]{background:transparent;border-color:var(--slotted-control-border-color, ButtonBorder);box-shadow:var(--slotted-control-shadow, none);color:var(--_text, ButtonText)}[data-ui=button][data-variant=ghost]{background:transparent;border-color:transparent;color:var(--_text, ButtonText)}[data-ui=button][data-variant=outline],[data-ui=button][data-variant=ghost],[data-ui=button][data-variant=solid][data-tone=secondary]{--_sweep-strength: .18}[data-ui=button][data-pressed]:not(:disabled):not([data-disabled]){background:var(--slotted-tone-accent-subtle-active, Highlight);border-color:var(--slotted-tone-accent-border, Highlight);box-shadow:var(--slotted-control-shadow, none);color:var(--slotted-tone-accent-text, HighlightText)}[data-ui=button][data-variant=solid]:hover:not(:disabled):not([data-disabled]):not([data-loading]):not([data-pressed]){background:var(--_solid-hover, Highlight)}[data-ui=button][data-variant=solid]:active:not(:disabled):not([data-disabled]):not([data-loading]):not([data-pressed]){background:var(--_solid-active, Highlight);box-shadow:none;transform:translateY(var(--slotted-border-width-thin, 1px));transition-duration:var(--slotted-duration-instant)}[data-ui=button][data-variant=outline]:hover:not(:disabled):not([data-disabled]):not([data-loading]):not([data-pressed]),[data-ui=button][data-variant=ghost]:hover:not(:disabled):not([data-disabled]):not([data-loading]):not([data-pressed]){background:var(--slotted-tone-secondary-subtle-hover, ButtonFace)}[data-ui=button][data-variant=outline]:active:not(:disabled):not([data-disabled]):not([data-loading]):not([data-pressed]),[data-ui=button][data-variant=ghost]:active:not(:disabled):not([data-disabled]):not([data-loading]):not([data-pressed]){background:var(--slotted-tone-secondary-subtle-active, ButtonFace);transition-duration:var(--slotted-duration-instant)}[data-ui=button][data-pressed]:hover:not(:disabled):not([data-disabled]):not([data-loading]){background:var(--slotted-tone-accent-subtle-hover, Highlight)}[data-ui=button][data-pressed]:active:not(:disabled):not([data-disabled]):not([data-loading]){background:var(--slotted-tone-accent-subtle-active, Highlight);transition-duration:var(--slotted-duration-instant)}[data-ui=button]: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=button]:disabled,[data-ui=button][data-disabled]{box-shadow:none;color:var(--slotted-disabled-foreground, GrayText);cursor:not-allowed}[data-ui=button][data-variant=solid]:disabled,[data-ui=button][data-variant=solid][data-disabled]{background:var(--slotted-disabled-background, ButtonFace);border-color:var(--slotted-disabled-border, ButtonBorder)}[data-ui=button][data-variant=outline]:disabled,[data-ui=button][data-variant=outline][data-disabled]{background:transparent;border-color:var(--slotted-disabled-border, GrayText)}[data-ui=button][data-pressed]:disabled,[data-ui=button][data-pressed][data-disabled]{background:var(--slotted-disabled-background, ButtonFace);border-color:var(--slotted-disabled-border, GrayText);color:var(--slotted-disabled-foreground, GrayText)}[data-ui=button][data-disabled]:not(:disabled){color:var(--slotted-text-muted, GrayText)}[data-ui=button][data-variant=solid][data-disabled]:not(:disabled),[data-ui=button][data-pressed][data-disabled]:not(:disabled){background:var(--slotted-tone-secondary-subtle-hover, ButtonFace);border-color:var(--slotted-border-subtle, GrayText);color:var(--slotted-text-muted, GrayText)}[data-ui=button][data-variant=outline][data-disabled]:not(:disabled){border-color:var(--slotted-border-subtle, GrayText)}[data-ui=button][data-loading]{cursor:progress}[data-ui=button][data-loading]:has(>[data-part=indicator])>:not([data-part=indicator]){opacity:0}[data-ui=button] [data-part=indicator]{--slotted-spinner-size: var(--_icon-size);flex:none}[data-ui=button]>[data-part=indicator]{inset:0;margin:auto;position:absolute}@media(prefers-reduced-motion:no-preference){@media not (forced-colors:active){[data-ui=button]:not([data-shape])[data-loading]:has([data-part=indicator]):after{animation:slotted-button-sweep var(--slotted-duration-loop) linear infinite;background-image:linear-gradient(to right,transparent,currentColor 40%,transparent 80%);background-repeat:repeat-x;background-size:var(--_sweep-width) 100%;border-radius:inherit;content:\"\";inset:0;opacity:var(--_sweep-strength);pointer-events:none;position:absolute}[data-ui=button]:not([data-shape])[data-loading]:has([data-part=indicator]):dir(rtl):after{animation-direction:reverse;background-image:linear-gradient(to left,transparent,currentColor 40%,transparent 80%)}[data-ui=button]:not([data-shape])[data-loading]:has(>[data-part=indicator])>:not([data-part=indicator]){opacity:1}[data-ui=button]:not([data-shape])[data-loading] [data-part=indicator]{opacity:0;position:absolute}}}[data-ui=button] [data-part=start],[data-ui=button] [data-part=end],[data-ui=button] [data-part=icon]{align-items:center;block-size:var(--_icon-size);box-sizing:border-box;display:inline-flex;flex:none;font-size:var(--_icon-size);inline-size:var(--_icon-size);justify-content:center;line-height:1;position:relative}[data-ui=button] [data-part=start]>*:not([data-part=indicator]),[data-ui=button] [data-part=end]>*:not([data-part=indicator]),[data-ui=button] [data-part=icon]>*:not([data-part=indicator]){block-size:100%;display:block;inline-size:100%}[data-ui=button] [data-part=label]{line-height:var(--slotted-line-height-sm, 1.45);min-inline-size:0;overflow-wrap:anywhere}@supports (text-box: trim-both cap alphabetic){[data-ui=button] [data-part=label]{padding-block:calc((var(--slotted-line-height-sm, 1.45) * 1em - .75em) / 2);text-box:trim-both cap alphabetic}}[data-ui=button]:not([data-shape]):has(>[data-part=start]){padding-inline-start:var(--_padding-inline-visual)}[data-ui=button]:not([data-shape]):has(>[data-part=end]){padding-inline-end:var(--_padding-inline-visual)}[data-ui=button][data-full-width]{inline-size:100%}[data-ui=button][data-shape]{aspect-ratio:1;inline-size:var(--_height);min-block-size:max(var(--_height),var(--slotted-target-min, 24px));min-inline-size:var(--slotted-target-min, 24px);padding-block:0;padding-inline:0}[data-ui=button][data-shape=circle]{border-radius:var(--slotted-radius-full, 9999px)}@media(forced-colors:active){[data-ui=button]{border-color:ButtonBorder}[data-ui=button][data-pressed]{border-color:Highlight}[data-ui=button]:disabled,[data-ui=button][data-disabled]{border-color:GrayText;color:GrayText}}@media(prefers-reduced-motion:reduce){[data-ui=button] [data-part=indicator]{animation:none}}}@keyframes slotted-button-sweep{0%{background-position-x:calc(-1 * var(--_sweep-width))}to{background-position-x:0}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
387
|
+
}
|
|
388
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlButtonLink, decorators: [{
|
|
389
|
+
type: Component,
|
|
390
|
+
args: [{ selector: 'a[slButtonLink]', standalone: true, template: `<ng-content select="[slButtonStart]"></ng-content
|
|
391
|
+
><span data-part="label"><ng-content></ng-content></span
|
|
392
|
+
><ng-content select="[slButtonEnd]"></ng-content>`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'slButtonLink', host: {
|
|
393
|
+
'data-ui': 'button',
|
|
394
|
+
'data-part': 'root',
|
|
395
|
+
'[attr.aria-disabled]': "disabled() ? 'true' : null",
|
|
396
|
+
'[attr.role]': "disabled() ? 'link' : null",
|
|
397
|
+
'[attr.href]': 'disabled() ? null : href()',
|
|
398
|
+
'[attr.tabindex]': 'tabIndex()',
|
|
399
|
+
'[attr.data-tone]': 'appearance.tone()',
|
|
400
|
+
'[attr.data-variant]': 'appearance.variant()',
|
|
401
|
+
'[attr.data-size]': 'appearance.size()',
|
|
402
|
+
'[attr.data-full-width]': 'stateAttribute(fullWidth())',
|
|
403
|
+
'[attr.data-disabled]': 'stateAttribute(disabled())',
|
|
404
|
+
}, styles: ["@layer slotted.components{[data-ui=button]{--_solid: var(--slotted-tone-accent-solid);--_solid-hover: var(--slotted-tone-accent-solid-hover);--_solid-active: var(--slotted-tone-accent-solid-active);--_on-solid: var(--slotted-tone-accent-on-solid);--_text: var(--slotted-tone-accent-text);--_edge: var(--_solid);--_height: var(--slotted-control-height-md, 34px);--_padding-inline: var(--slotted-control-padding-inline-md, 13px);--_font-size: var(--slotted-control-font-size-md, 13px);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_gap: var(--slotted-control-gap-md, 8px);--_padding-inline-visual: max( var(--slotted-space-2, .25rem), calc(var(--_padding-inline) - var(--slotted-space-2, .25rem)) );--_sweep-width: calc(var(--_height) * 2);--_sweep-strength: .34;align-items:center;appearance:none;background:transparent;border:var(--slotted-control-border-width, 1px) solid transparent;border-radius:var(--slotted-control-radius, 4px);box-sizing:border-box;cursor:pointer;display:inline-flex;font-family:var(--slotted-control-font-family, ui-sans-serif, system-ui, sans-serif);font-size:var(--_font-size);font-weight:var(--slotted-control-font-weight, 600);gap:var(--_gap);justify-content:center;letter-spacing:var(--slotted-control-letter-spacing, 0);line-height:var(--slotted-control-line-height, 1);max-inline-size:100%;min-block-size:var(--_height);padding-block:0;padding-inline:var(--_padding-inline);position:relative;text-align:center;text-decoration:none;text-wrap:balance;touch-action:manipulation;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),box-shadow var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),transform var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);-webkit-user-select:none;user-select:none;vertical-align:middle;-webkit-tap-highlight-color:transparent}[data-ui=button][data-tone=secondary]{--_solid: var(--slotted-tone-secondary-solid);--_solid-hover: var(--slotted-tone-secondary-solid-hover);--_solid-active: var(--slotted-tone-secondary-solid-active);--_on-solid: var(--slotted-tone-secondary-on-solid);--_text: var(--slotted-tone-secondary-text);--_edge: var(--_solid-active)}[data-ui=button][data-tone=success]{--_solid: var(--slotted-tone-success-solid);--_solid-hover: var(--slotted-tone-success-solid-hover);--_solid-active: var(--slotted-tone-success-solid-active);--_on-solid: var(--slotted-tone-success-on-solid);--_text: var(--slotted-tone-success-text)}[data-ui=button][data-tone=warning]{--_solid: var(--slotted-tone-warning-solid);--_solid-hover: var(--slotted-tone-warning-solid-hover);--_solid-active: var(--slotted-tone-warning-solid-active);--_on-solid: var(--slotted-tone-warning-on-solid);--_text: var(--slotted-tone-warning-text)}[data-ui=button][data-tone=danger]{--_solid: var(--slotted-tone-danger-solid);--_solid-hover: var(--slotted-tone-danger-solid-hover);--_solid-active: var(--slotted-tone-danger-solid-active);--_on-solid: var(--slotted-tone-danger-on-solid);--_text: var(--slotted-tone-danger-text)}[data-ui=button][data-size=sm]{--_height: var(--slotted-control-height-sm, 30px);--_padding-inline: var(--slotted-control-padding-inline-sm, 10px);--_font-size: var(--slotted-control-font-size-sm, 12px);--_icon-size: var(--slotted-control-icon-size-sm, 14px);--_gap: var(--slotted-control-gap-sm, 6px)}[data-ui=button][data-size=lg]{--_height: var(--slotted-control-height-lg, 38px);--_padding-inline: var(--slotted-control-padding-inline-lg, 16px);--_font-size: var(--slotted-control-font-size-lg, 14px);--_icon-size: var(--slotted-control-icon-size-lg, 18px);--_gap: var(--slotted-control-gap-lg, 8px)}[data-ui=button][data-variant=solid]{background:var(--_solid, ButtonFace);border-color:var(--_edge, ButtonBorder);box-shadow:var(--slotted-control-shadow, none);color:var(--_on-solid, ButtonText)}[data-ui=button][data-variant=outline]{background:transparent;border-color:var(--slotted-control-border-color, ButtonBorder);box-shadow:var(--slotted-control-shadow, none);color:var(--_text, ButtonText)}[data-ui=button][data-variant=ghost]{background:transparent;border-color:transparent;color:var(--_text, ButtonText)}[data-ui=button][data-variant=outline],[data-ui=button][data-variant=ghost],[data-ui=button][data-variant=solid][data-tone=secondary]{--_sweep-strength: .18}[data-ui=button][data-pressed]:not(:disabled):not([data-disabled]){background:var(--slotted-tone-accent-subtle-active, Highlight);border-color:var(--slotted-tone-accent-border, Highlight);box-shadow:var(--slotted-control-shadow, none);color:var(--slotted-tone-accent-text, HighlightText)}[data-ui=button][data-variant=solid]:hover:not(:disabled):not([data-disabled]):not([data-loading]):not([data-pressed]){background:var(--_solid-hover, Highlight)}[data-ui=button][data-variant=solid]:active:not(:disabled):not([data-disabled]):not([data-loading]):not([data-pressed]){background:var(--_solid-active, Highlight);box-shadow:none;transform:translateY(var(--slotted-border-width-thin, 1px));transition-duration:var(--slotted-duration-instant)}[data-ui=button][data-variant=outline]:hover:not(:disabled):not([data-disabled]):not([data-loading]):not([data-pressed]),[data-ui=button][data-variant=ghost]:hover:not(:disabled):not([data-disabled]):not([data-loading]):not([data-pressed]){background:var(--slotted-tone-secondary-subtle-hover, ButtonFace)}[data-ui=button][data-variant=outline]:active:not(:disabled):not([data-disabled]):not([data-loading]):not([data-pressed]),[data-ui=button][data-variant=ghost]:active:not(:disabled):not([data-disabled]):not([data-loading]):not([data-pressed]){background:var(--slotted-tone-secondary-subtle-active, ButtonFace);transition-duration:var(--slotted-duration-instant)}[data-ui=button][data-pressed]:hover:not(:disabled):not([data-disabled]):not([data-loading]){background:var(--slotted-tone-accent-subtle-hover, Highlight)}[data-ui=button][data-pressed]:active:not(:disabled):not([data-disabled]):not([data-loading]){background:var(--slotted-tone-accent-subtle-active, Highlight);transition-duration:var(--slotted-duration-instant)}[data-ui=button]: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=button]:disabled,[data-ui=button][data-disabled]{box-shadow:none;color:var(--slotted-disabled-foreground, GrayText);cursor:not-allowed}[data-ui=button][data-variant=solid]:disabled,[data-ui=button][data-variant=solid][data-disabled]{background:var(--slotted-disabled-background, ButtonFace);border-color:var(--slotted-disabled-border, ButtonBorder)}[data-ui=button][data-variant=outline]:disabled,[data-ui=button][data-variant=outline][data-disabled]{background:transparent;border-color:var(--slotted-disabled-border, GrayText)}[data-ui=button][data-pressed]:disabled,[data-ui=button][data-pressed][data-disabled]{background:var(--slotted-disabled-background, ButtonFace);border-color:var(--slotted-disabled-border, GrayText);color:var(--slotted-disabled-foreground, GrayText)}[data-ui=button][data-disabled]:not(:disabled){color:var(--slotted-text-muted, GrayText)}[data-ui=button][data-variant=solid][data-disabled]:not(:disabled),[data-ui=button][data-pressed][data-disabled]:not(:disabled){background:var(--slotted-tone-secondary-subtle-hover, ButtonFace);border-color:var(--slotted-border-subtle, GrayText);color:var(--slotted-text-muted, GrayText)}[data-ui=button][data-variant=outline][data-disabled]:not(:disabled){border-color:var(--slotted-border-subtle, GrayText)}[data-ui=button][data-loading]{cursor:progress}[data-ui=button][data-loading]:has(>[data-part=indicator])>:not([data-part=indicator]){opacity:0}[data-ui=button] [data-part=indicator]{--slotted-spinner-size: var(--_icon-size);flex:none}[data-ui=button]>[data-part=indicator]{inset:0;margin:auto;position:absolute}@media(prefers-reduced-motion:no-preference){@media not (forced-colors:active){[data-ui=button]:not([data-shape])[data-loading]:has([data-part=indicator]):after{animation:slotted-button-sweep var(--slotted-duration-loop) linear infinite;background-image:linear-gradient(to right,transparent,currentColor 40%,transparent 80%);background-repeat:repeat-x;background-size:var(--_sweep-width) 100%;border-radius:inherit;content:\"\";inset:0;opacity:var(--_sweep-strength);pointer-events:none;position:absolute}[data-ui=button]:not([data-shape])[data-loading]:has([data-part=indicator]):dir(rtl):after{animation-direction:reverse;background-image:linear-gradient(to left,transparent,currentColor 40%,transparent 80%)}[data-ui=button]:not([data-shape])[data-loading]:has(>[data-part=indicator])>:not([data-part=indicator]){opacity:1}[data-ui=button]:not([data-shape])[data-loading] [data-part=indicator]{opacity:0;position:absolute}}}[data-ui=button] [data-part=start],[data-ui=button] [data-part=end],[data-ui=button] [data-part=icon]{align-items:center;block-size:var(--_icon-size);box-sizing:border-box;display:inline-flex;flex:none;font-size:var(--_icon-size);inline-size:var(--_icon-size);justify-content:center;line-height:1;position:relative}[data-ui=button] [data-part=start]>*:not([data-part=indicator]),[data-ui=button] [data-part=end]>*:not([data-part=indicator]),[data-ui=button] [data-part=icon]>*:not([data-part=indicator]){block-size:100%;display:block;inline-size:100%}[data-ui=button] [data-part=label]{line-height:var(--slotted-line-height-sm, 1.45);min-inline-size:0;overflow-wrap:anywhere}@supports (text-box: trim-both cap alphabetic){[data-ui=button] [data-part=label]{padding-block:calc((var(--slotted-line-height-sm, 1.45) * 1em - .75em) / 2);text-box:trim-both cap alphabetic}}[data-ui=button]:not([data-shape]):has(>[data-part=start]){padding-inline-start:var(--_padding-inline-visual)}[data-ui=button]:not([data-shape]):has(>[data-part=end]){padding-inline-end:var(--_padding-inline-visual)}[data-ui=button][data-full-width]{inline-size:100%}[data-ui=button][data-shape]{aspect-ratio:1;inline-size:var(--_height);min-block-size:max(var(--_height),var(--slotted-target-min, 24px));min-inline-size:var(--slotted-target-min, 24px);padding-block:0;padding-inline:0}[data-ui=button][data-shape=circle]{border-radius:var(--slotted-radius-full, 9999px)}@media(forced-colors:active){[data-ui=button]{border-color:ButtonBorder}[data-ui=button][data-pressed]{border-color:Highlight}[data-ui=button]:disabled,[data-ui=button][data-disabled]{border-color:GrayText;color:GrayText}}@media(prefers-reduced-motion:reduce){[data-ui=button] [data-part=indicator]{animation:none}}}@keyframes slotted-button-sweep{0%{background-position-x:calc(-1 * var(--_sweep-width))}to{background-position-x:0}}\n"] }]
|
|
405
|
+
}], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }] } });
|
|
406
|
+
|
|
407
|
+
/**
|
|
408
|
+
* The same control as SlButton with no room for a label, so the accessible
|
|
409
|
+
* name is an explicit attribute, checked in development because an attribute
|
|
410
|
+
* cannot be made mandatory by a template.
|
|
411
|
+
*
|
|
412
|
+
* It takes `pressed` directly instead of being paired with a toggle component
|
|
413
|
+
* of its own: its name is already an attribute that must not change with the
|
|
414
|
+
* state, so toggling adds no obligation a separate component would exist to
|
|
415
|
+
* enforce. `aria-pressed` appears only once the consumer opts in.
|
|
416
|
+
*
|
|
417
|
+
* The glyph's own box holds the ring while the control waits: it is already
|
|
418
|
+
* the size of the ring, so nothing moves, and the glyph is the one thing this
|
|
419
|
+
* member can afford to hide, because it carries no name.
|
|
420
|
+
*/
|
|
421
|
+
class SlIconButton {
|
|
422
|
+
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
423
|
+
focusableWhenDisabled = input(false, { ...(ngDevMode ? { debugName: "focusableWhenDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
424
|
+
loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
425
|
+
loadingDelay = input(0, { ...(ngDevMode ? { debugName: "loadingDelay" } : /* istanbul ignore next */ {}), transform: numberAttribute });
|
|
426
|
+
/**
|
|
427
|
+
* Words laid over the catalog of the language in force, key by key: what the
|
|
428
|
+
* ring announces itself as (`loading`). It is a progress bar, so it has a name.
|
|
429
|
+
*/
|
|
430
|
+
messages = input(undefined, /* @ts-ignore */
|
|
431
|
+
...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
|
|
432
|
+
/** The family's words in the language in force, with this button's `messages` laid over them. */
|
|
433
|
+
t = injectMessages(buttonMessages, this.messages);
|
|
434
|
+
shape = input(ICON_BUTTON_DEFAULTS.shape, /* @ts-ignore */
|
|
435
|
+
...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
|
|
436
|
+
size = input(undefined, /* @ts-ignore */
|
|
437
|
+
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
438
|
+
tone = input(undefined, /* @ts-ignore */
|
|
439
|
+
...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
|
|
440
|
+
type = input('button', /* @ts-ignore */
|
|
441
|
+
...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
|
|
442
|
+
variant = input(undefined, /* @ts-ignore */
|
|
443
|
+
...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
444
|
+
/** Present means controlled, for the life of the component. */
|
|
445
|
+
pressed = input(undefined, { ...(ngDevMode ? { debugName: "pressed" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
|
|
446
|
+
defaultPressed = input(undefined, { ...(ngDevMode ? { debugName: "defaultPressed" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
|
|
447
|
+
/**
|
|
448
|
+
* One output for one transition, carrying the value, the value it replaces,
|
|
449
|
+
* the reason, the originating event and `cancel()`. There is no `[(pressed)]`
|
|
450
|
+
* because a two-way binding has one slot and can carry none of those.
|
|
451
|
+
*/
|
|
452
|
+
pressedChange = output();
|
|
453
|
+
stateAttribute = stateAttribute;
|
|
454
|
+
appearance = resolveAppearance(this, ICON_BUTTON_DEFAULTS);
|
|
455
|
+
inert = resolveInertness(this);
|
|
456
|
+
waiting = resolveLoadingIndicator(this.loading, this.loadingDelay);
|
|
457
|
+
state = new PressedState({
|
|
458
|
+
pressed: this.pressed,
|
|
459
|
+
defaultPressed: this.defaultPressed,
|
|
460
|
+
emit: (request) => this.pressedChange.emit(request),
|
|
461
|
+
});
|
|
462
|
+
isPressed = computed(() => this.state.value(), /* @ts-ignore */
|
|
463
|
+
...(ngDevMode ? [{ debugName: "isPressed" }] : /* istanbul ignore next */ []));
|
|
464
|
+
/**
|
|
465
|
+
* Whether the consumer opted into the toggle capability at all. Passing
|
|
466
|
+
* either half of the state model is the opt-in, in both bindings: an icon
|
|
467
|
+
* button that announced `aria-pressed` without one would be announcing a
|
|
468
|
+
* state it does not have.
|
|
469
|
+
*/
|
|
470
|
+
toggles = computed(() => this.pressed() !== undefined || this.defaultPressed() !== undefined, /* @ts-ignore */
|
|
471
|
+
...(ngDevMode ? [{ debugName: "toggles" }] : /* istanbul ignore next */ []));
|
|
472
|
+
element = inject((ElementRef)).nativeElement;
|
|
473
|
+
destroyRef = inject(DestroyRef);
|
|
474
|
+
/**
|
|
475
|
+
* The capture phase, because a control that is unavailable or still working
|
|
476
|
+
* must refuse the activation before any listener the consumer attached to it
|
|
477
|
+
* can run.
|
|
478
|
+
*/
|
|
479
|
+
constructor() {
|
|
480
|
+
const capture = (event) => {
|
|
481
|
+
if (this.inert.refuses())
|
|
482
|
+
blockActivation(event);
|
|
483
|
+
};
|
|
484
|
+
this.element.addEventListener('click', capture, { capture: true });
|
|
485
|
+
this.destroyRef.onDestroy(() => this.element.removeEventListener('click', capture, { capture: true }));
|
|
486
|
+
}
|
|
487
|
+
ngAfterViewInit() {
|
|
488
|
+
/**
|
|
489
|
+
* After the view, not in the constructor. A `(click)` written on the same
|
|
490
|
+
* element is bound when the view is created, so a listener registered any
|
|
491
|
+
* earlier runs first and reads `defaultPrevented` before the consumer has
|
|
492
|
+
* had the chance to set it.
|
|
493
|
+
*/
|
|
494
|
+
const activate = (event) => {
|
|
495
|
+
if (this.inert.refuses() || event.defaultPrevented || !this.toggles())
|
|
496
|
+
return;
|
|
497
|
+
this.state.request(event);
|
|
498
|
+
};
|
|
499
|
+
this.element.addEventListener('click', activate);
|
|
500
|
+
this.destroyRef.onDestroy(() => this.element.removeEventListener('click', activate));
|
|
501
|
+
if (!isDevMode())
|
|
502
|
+
return;
|
|
503
|
+
const label = this.element.getAttribute('aria-label');
|
|
504
|
+
const labelledBy = this.element.getAttribute('aria-labelledby');
|
|
505
|
+
if (!label?.trim() && !labelledBy?.trim()) {
|
|
506
|
+
throw new Error('SlIconButton requires aria-label or aria-labelledby');
|
|
507
|
+
}
|
|
508
|
+
}
|
|
509
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlIconButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
510
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlIconButton, isStandalone: true, selector: "button[slIconButton]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, focusableWhenDisabled: { classPropertyName: "focusableWhenDisabled", publicName: "focusableWhenDisabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingDelay: { classPropertyName: "loadingDelay", publicName: "loadingDelay", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, pressed: { classPropertyName: "pressed", publicName: "pressed", isSignal: true, isRequired: false, transformFunction: null }, defaultPressed: { classPropertyName: "defaultPressed", publicName: "defaultPressed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pressedChange: "pressedChange" }, host: { attributes: { "data-ui": "button", "data-part": "root" }, properties: { "attr.aria-disabled": "inert.ariaDisabled()", "attr.aria-pressed": "toggles() ? isPressed() : null", "attr.data-tone": "appearance.tone()", "attr.data-variant": "appearance.variant()", "attr.data-size": "appearance.size()", "attr.data-shape": "shape()", "attr.data-disabled": "stateAttribute(disabled())", "attr.data-loading": "stateAttribute(loading())", "attr.data-pressed": "stateAttribute(toggles() && isPressed())", "disabled": "inert.nativelyDisabled()", "attr.type": "type()" } }, exportAs: ["slIconButton"], ngImport: i0, template: `<span data-part="icon"
|
|
511
|
+
><ng-content></ng-content>
|
|
512
|
+
@if (waiting()) {
|
|
513
|
+
<span
|
|
514
|
+
data-part="indicator"
|
|
515
|
+
data-ui="spinner"
|
|
516
|
+
role="progressbar"
|
|
517
|
+
[attr.aria-label]="t('loading')"
|
|
518
|
+
></span>
|
|
519
|
+
}
|
|
520
|
+
</span>`, isInline: true, styles: ["@layer slotted.components{[data-ui=button]{--_solid: var(--slotted-tone-accent-solid);--_solid-hover: var(--slotted-tone-accent-solid-hover);--_solid-active: var(--slotted-tone-accent-solid-active);--_on-solid: var(--slotted-tone-accent-on-solid);--_text: var(--slotted-tone-accent-text);--_edge: var(--_solid);--_height: var(--slotted-control-height-md, 34px);--_padding-inline: var(--slotted-control-padding-inline-md, 13px);--_font-size: var(--slotted-control-font-size-md, 13px);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_gap: var(--slotted-control-gap-md, 8px);--_padding-inline-visual: max( var(--slotted-space-2, .25rem), calc(var(--_padding-inline) - var(--slotted-space-2, .25rem)) );--_sweep-width: calc(var(--_height) * 2);--_sweep-strength: .34;align-items:center;appearance:none;background:transparent;border:var(--slotted-control-border-width, 1px) solid transparent;border-radius:var(--slotted-control-radius, 4px);box-sizing:border-box;cursor:pointer;display:inline-flex;font-family:var(--slotted-control-font-family, ui-sans-serif, system-ui, sans-serif);font-size:var(--_font-size);font-weight:var(--slotted-control-font-weight, 600);gap:var(--_gap);justify-content:center;letter-spacing:var(--slotted-control-letter-spacing, 0);line-height:var(--slotted-control-line-height, 1);max-inline-size:100%;min-block-size:var(--_height);padding-block:0;padding-inline:var(--_padding-inline);position:relative;text-align:center;text-decoration:none;text-wrap:balance;touch-action:manipulation;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),box-shadow var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),transform var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);-webkit-user-select:none;user-select:none;vertical-align:middle;-webkit-tap-highlight-color:transparent}[data-ui=button][data-tone=secondary]{--_solid: var(--slotted-tone-secondary-solid);--_solid-hover: var(--slotted-tone-secondary-solid-hover);--_solid-active: var(--slotted-tone-secondary-solid-active);--_on-solid: var(--slotted-tone-secondary-on-solid);--_text: var(--slotted-tone-secondary-text);--_edge: var(--_solid-active)}[data-ui=button][data-tone=success]{--_solid: var(--slotted-tone-success-solid);--_solid-hover: var(--slotted-tone-success-solid-hover);--_solid-active: var(--slotted-tone-success-solid-active);--_on-solid: var(--slotted-tone-success-on-solid);--_text: var(--slotted-tone-success-text)}[data-ui=button][data-tone=warning]{--_solid: var(--slotted-tone-warning-solid);--_solid-hover: var(--slotted-tone-warning-solid-hover);--_solid-active: var(--slotted-tone-warning-solid-active);--_on-solid: var(--slotted-tone-warning-on-solid);--_text: var(--slotted-tone-warning-text)}[data-ui=button][data-tone=danger]{--_solid: var(--slotted-tone-danger-solid);--_solid-hover: var(--slotted-tone-danger-solid-hover);--_solid-active: var(--slotted-tone-danger-solid-active);--_on-solid: var(--slotted-tone-danger-on-solid);--_text: var(--slotted-tone-danger-text)}[data-ui=button][data-size=sm]{--_height: var(--slotted-control-height-sm, 30px);--_padding-inline: var(--slotted-control-padding-inline-sm, 10px);--_font-size: var(--slotted-control-font-size-sm, 12px);--_icon-size: var(--slotted-control-icon-size-sm, 14px);--_gap: var(--slotted-control-gap-sm, 6px)}[data-ui=button][data-size=lg]{--_height: var(--slotted-control-height-lg, 38px);--_padding-inline: var(--slotted-control-padding-inline-lg, 16px);--_font-size: var(--slotted-control-font-size-lg, 14px);--_icon-size: var(--slotted-control-icon-size-lg, 18px);--_gap: var(--slotted-control-gap-lg, 8px)}[data-ui=button][data-variant=solid]{background:var(--_solid, ButtonFace);border-color:var(--_edge, ButtonBorder);box-shadow:var(--slotted-control-shadow, none);color:var(--_on-solid, ButtonText)}[data-ui=button][data-variant=outline]{background:transparent;border-color:var(--slotted-control-border-color, ButtonBorder);box-shadow:var(--slotted-control-shadow, none);color:var(--_text, ButtonText)}[data-ui=button][data-variant=ghost]{background:transparent;border-color:transparent;color:var(--_text, ButtonText)}[data-ui=button][data-variant=outline],[data-ui=button][data-variant=ghost],[data-ui=button][data-variant=solid][data-tone=secondary]{--_sweep-strength: .18}[data-ui=button][data-pressed]:not(:disabled):not([data-disabled]){background:var(--slotted-tone-accent-subtle-active, Highlight);border-color:var(--slotted-tone-accent-border, Highlight);box-shadow:var(--slotted-control-shadow, none);color:var(--slotted-tone-accent-text, HighlightText)}[data-ui=button][data-variant=solid]:hover:not(:disabled):not([data-disabled]):not([data-loading]):not([data-pressed]){background:var(--_solid-hover, Highlight)}[data-ui=button][data-variant=solid]:active:not(:disabled):not([data-disabled]):not([data-loading]):not([data-pressed]){background:var(--_solid-active, Highlight);box-shadow:none;transform:translateY(var(--slotted-border-width-thin, 1px));transition-duration:var(--slotted-duration-instant)}[data-ui=button][data-variant=outline]:hover:not(:disabled):not([data-disabled]):not([data-loading]):not([data-pressed]),[data-ui=button][data-variant=ghost]:hover:not(:disabled):not([data-disabled]):not([data-loading]):not([data-pressed]){background:var(--slotted-tone-secondary-subtle-hover, ButtonFace)}[data-ui=button][data-variant=outline]:active:not(:disabled):not([data-disabled]):not([data-loading]):not([data-pressed]),[data-ui=button][data-variant=ghost]:active:not(:disabled):not([data-disabled]):not([data-loading]):not([data-pressed]){background:var(--slotted-tone-secondary-subtle-active, ButtonFace);transition-duration:var(--slotted-duration-instant)}[data-ui=button][data-pressed]:hover:not(:disabled):not([data-disabled]):not([data-loading]){background:var(--slotted-tone-accent-subtle-hover, Highlight)}[data-ui=button][data-pressed]:active:not(:disabled):not([data-disabled]):not([data-loading]){background:var(--slotted-tone-accent-subtle-active, Highlight);transition-duration:var(--slotted-duration-instant)}[data-ui=button]: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=button]:disabled,[data-ui=button][data-disabled]{box-shadow:none;color:var(--slotted-disabled-foreground, GrayText);cursor:not-allowed}[data-ui=button][data-variant=solid]:disabled,[data-ui=button][data-variant=solid][data-disabled]{background:var(--slotted-disabled-background, ButtonFace);border-color:var(--slotted-disabled-border, ButtonBorder)}[data-ui=button][data-variant=outline]:disabled,[data-ui=button][data-variant=outline][data-disabled]{background:transparent;border-color:var(--slotted-disabled-border, GrayText)}[data-ui=button][data-pressed]:disabled,[data-ui=button][data-pressed][data-disabled]{background:var(--slotted-disabled-background, ButtonFace);border-color:var(--slotted-disabled-border, GrayText);color:var(--slotted-disabled-foreground, GrayText)}[data-ui=button][data-disabled]:not(:disabled){color:var(--slotted-text-muted, GrayText)}[data-ui=button][data-variant=solid][data-disabled]:not(:disabled),[data-ui=button][data-pressed][data-disabled]:not(:disabled){background:var(--slotted-tone-secondary-subtle-hover, ButtonFace);border-color:var(--slotted-border-subtle, GrayText);color:var(--slotted-text-muted, GrayText)}[data-ui=button][data-variant=outline][data-disabled]:not(:disabled){border-color:var(--slotted-border-subtle, GrayText)}[data-ui=button][data-loading]{cursor:progress}[data-ui=button][data-loading]:has(>[data-part=indicator])>:not([data-part=indicator]){opacity:0}[data-ui=button] [data-part=indicator]{--slotted-spinner-size: var(--_icon-size);flex:none}[data-ui=button]>[data-part=indicator]{inset:0;margin:auto;position:absolute}@media(prefers-reduced-motion:no-preference){@media not (forced-colors:active){[data-ui=button]:not([data-shape])[data-loading]:has([data-part=indicator]):after{animation:slotted-button-sweep var(--slotted-duration-loop) linear infinite;background-image:linear-gradient(to right,transparent,currentColor 40%,transparent 80%);background-repeat:repeat-x;background-size:var(--_sweep-width) 100%;border-radius:inherit;content:\"\";inset:0;opacity:var(--_sweep-strength);pointer-events:none;position:absolute}[data-ui=button]:not([data-shape])[data-loading]:has([data-part=indicator]):dir(rtl):after{animation-direction:reverse;background-image:linear-gradient(to left,transparent,currentColor 40%,transparent 80%)}[data-ui=button]:not([data-shape])[data-loading]:has(>[data-part=indicator])>:not([data-part=indicator]){opacity:1}[data-ui=button]:not([data-shape])[data-loading] [data-part=indicator]{opacity:0;position:absolute}}}[data-ui=button] [data-part=start],[data-ui=button] [data-part=end],[data-ui=button] [data-part=icon]{align-items:center;block-size:var(--_icon-size);box-sizing:border-box;display:inline-flex;flex:none;font-size:var(--_icon-size);inline-size:var(--_icon-size);justify-content:center;line-height:1;position:relative}[data-ui=button] [data-part=start]>*:not([data-part=indicator]),[data-ui=button] [data-part=end]>*:not([data-part=indicator]),[data-ui=button] [data-part=icon]>*:not([data-part=indicator]){block-size:100%;display:block;inline-size:100%}[data-ui=button] [data-part=label]{line-height:var(--slotted-line-height-sm, 1.45);min-inline-size:0;overflow-wrap:anywhere}@supports (text-box: trim-both cap alphabetic){[data-ui=button] [data-part=label]{padding-block:calc((var(--slotted-line-height-sm, 1.45) * 1em - .75em) / 2);text-box:trim-both cap alphabetic}}[data-ui=button]:not([data-shape]):has(>[data-part=start]){padding-inline-start:var(--_padding-inline-visual)}[data-ui=button]:not([data-shape]):has(>[data-part=end]){padding-inline-end:var(--_padding-inline-visual)}[data-ui=button][data-full-width]{inline-size:100%}[data-ui=button][data-shape]{aspect-ratio:1;inline-size:var(--_height);min-block-size:max(var(--_height),var(--slotted-target-min, 24px));min-inline-size:var(--slotted-target-min, 24px);padding-block:0;padding-inline:0}[data-ui=button][data-shape=circle]{border-radius:var(--slotted-radius-full, 9999px)}@media(forced-colors:active){[data-ui=button]{border-color:ButtonBorder}[data-ui=button][data-pressed]{border-color:Highlight}[data-ui=button]:disabled,[data-ui=button][data-disabled]{border-color:GrayText;color:GrayText}}@media(prefers-reduced-motion:reduce){[data-ui=button] [data-part=indicator]{animation:none}}}@keyframes slotted-button-sweep{0%{background-position-x:calc(-1 * var(--_sweep-width))}to{background-position-x:0}}\n", "@layer slotted.components{[data-ui=spinner]{--_size: var(--slotted-spinner-size, var(--slotted-control-icon-size-md, 16px));--_ring: calc(var(--_size) * 5 / 6);--_stroke: max(var(--slotted-border-width-medium, 1.5px), calc(var(--_size) / 12));--_radius: calc((var(--_ring) - var(--_stroke)) / 2);--_track: color-mix(in oklab, currentColor 20%, transparent);--_start: calc(var(--_turn) + var(--_tail));--_end: calc(var(--_turn) + var(--_head));--_cap: calc(var(--_stroke) / 2);animation:slotted-spinner-turn var(--slotted-duration-loop-slow) linear infinite,slotted-spinner-head var(--slotted-duration-loop-slow) linear infinite,slotted-spinner-tail var(--slotted-duration-loop-slow) linear infinite;background-image:radial-gradient(circle at calc(50% + var(--_radius) * sin(var(--_end))) calc(50% - var(--_radius) * cos(var(--_end))),currentColor calc(var(--_cap) - .5px),transparent calc(var(--_cap) + .5px)),radial-gradient(circle at calc(50% + var(--_radius) * sin(var(--_start))) calc(50% - var(--_radius) * cos(var(--_start))),currentColor calc(var(--_cap) - .5px),transparent calc(var(--_cap) + .5px)),conic-gradient(from var(--_start),currentColor 0deg,currentColor calc(var(--_head) - var(--_tail)),transparent calc(var(--_head) - var(--_tail))),conic-gradient(var(--_track) 0 100%);background-origin:content-box;background-clip:content-box;block-size:var(--_size);box-sizing:border-box;display:inline-block;flex:none;inline-size:var(--_size);-webkit-mask-image:radial-gradient(circle,transparent calc(var(--_ring) / 2 - var(--_stroke) - .5px),#000 calc(var(--_ring) / 2 - var(--_stroke) + .5px),#000 calc(var(--_ring) / 2 - .5px),transparent calc(var(--_ring) / 2 + .5px));mask-image:radial-gradient(circle,transparent calc(var(--_ring) / 2 - var(--_stroke) - .5px),#000 calc(var(--_ring) / 2 - var(--_stroke) + .5px),#000 calc(var(--_ring) / 2 - .5px),transparent calc(var(--_ring) / 2 + .5px));opacity:1;padding:calc((var(--_size) - var(--_ring)) / 2);scale:1;transition:opacity var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),scale var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);vertical-align:middle}@starting-style{[data-ui=spinner]{opacity:0;scale:.6}}@media(prefers-reduced-motion:reduce){[data-ui=spinner]{--_head: 270deg;animation:none}}@media(forced-colors:active){[data-ui=spinner]{forced-color-adjust:none}}}@property --_turn{inherits: false; initial-value: 0deg; syntax: \"<angle>\";}@property --_head{inherits: false; initial-value: 20deg; syntax: \"<angle>\";}@property --_tail{inherits: false; initial-value: 0deg; syntax: \"<angle>\";}@keyframes slotted-spinner-turn{to{--_turn: 460deg}}@keyframes slotted-spinner-head{0%{--_head: 20deg;animation-timing-function:ease-in-out}50%,to{--_head: 280deg}}@keyframes slotted-spinner-tail{0%,50%{--_tail: 0deg;animation-timing-function:ease-in-out}to{--_tail: 260deg}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
521
|
+
}
|
|
522
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlIconButton, decorators: [{
|
|
523
|
+
type: Component,
|
|
524
|
+
args: [{ selector: 'button[slIconButton]', standalone: true, template: `<span data-part="icon"
|
|
525
|
+
><ng-content></ng-content>
|
|
526
|
+
@if (waiting()) {
|
|
527
|
+
<span
|
|
528
|
+
data-part="indicator"
|
|
529
|
+
data-ui="spinner"
|
|
530
|
+
role="progressbar"
|
|
531
|
+
[attr.aria-label]="t('loading')"
|
|
532
|
+
></span>
|
|
533
|
+
}
|
|
534
|
+
</span>`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'slIconButton', host: {
|
|
535
|
+
'data-ui': 'button',
|
|
536
|
+
'data-part': 'root',
|
|
537
|
+
'[attr.aria-disabled]': 'inert.ariaDisabled()',
|
|
538
|
+
'[attr.aria-pressed]': 'toggles() ? isPressed() : null',
|
|
539
|
+
'[attr.data-tone]': 'appearance.tone()',
|
|
540
|
+
'[attr.data-variant]': 'appearance.variant()',
|
|
541
|
+
'[attr.data-size]': 'appearance.size()',
|
|
542
|
+
'[attr.data-shape]': 'shape()',
|
|
543
|
+
'[attr.data-disabled]': 'stateAttribute(disabled())',
|
|
544
|
+
'[attr.data-loading]': 'stateAttribute(loading())',
|
|
545
|
+
'[attr.data-pressed]': 'stateAttribute(toggles() && isPressed())',
|
|
546
|
+
'[disabled]': 'inert.nativelyDisabled()',
|
|
547
|
+
'[attr.type]': 'type()',
|
|
548
|
+
}, styles: ["@layer slotted.components{[data-ui=button]{--_solid: var(--slotted-tone-accent-solid);--_solid-hover: var(--slotted-tone-accent-solid-hover);--_solid-active: var(--slotted-tone-accent-solid-active);--_on-solid: var(--slotted-tone-accent-on-solid);--_text: var(--slotted-tone-accent-text);--_edge: var(--_solid);--_height: var(--slotted-control-height-md, 34px);--_padding-inline: var(--slotted-control-padding-inline-md, 13px);--_font-size: var(--slotted-control-font-size-md, 13px);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_gap: var(--slotted-control-gap-md, 8px);--_padding-inline-visual: max( var(--slotted-space-2, .25rem), calc(var(--_padding-inline) - var(--slotted-space-2, .25rem)) );--_sweep-width: calc(var(--_height) * 2);--_sweep-strength: .34;align-items:center;appearance:none;background:transparent;border:var(--slotted-control-border-width, 1px) solid transparent;border-radius:var(--slotted-control-radius, 4px);box-sizing:border-box;cursor:pointer;display:inline-flex;font-family:var(--slotted-control-font-family, ui-sans-serif, system-ui, sans-serif);font-size:var(--_font-size);font-weight:var(--slotted-control-font-weight, 600);gap:var(--_gap);justify-content:center;letter-spacing:var(--slotted-control-letter-spacing, 0);line-height:var(--slotted-control-line-height, 1);max-inline-size:100%;min-block-size:var(--_height);padding-block:0;padding-inline:var(--_padding-inline);position:relative;text-align:center;text-decoration:none;text-wrap:balance;touch-action:manipulation;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),box-shadow var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),transform var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);-webkit-user-select:none;user-select:none;vertical-align:middle;-webkit-tap-highlight-color:transparent}[data-ui=button][data-tone=secondary]{--_solid: var(--slotted-tone-secondary-solid);--_solid-hover: var(--slotted-tone-secondary-solid-hover);--_solid-active: var(--slotted-tone-secondary-solid-active);--_on-solid: var(--slotted-tone-secondary-on-solid);--_text: var(--slotted-tone-secondary-text);--_edge: var(--_solid-active)}[data-ui=button][data-tone=success]{--_solid: var(--slotted-tone-success-solid);--_solid-hover: var(--slotted-tone-success-solid-hover);--_solid-active: var(--slotted-tone-success-solid-active);--_on-solid: var(--slotted-tone-success-on-solid);--_text: var(--slotted-tone-success-text)}[data-ui=button][data-tone=warning]{--_solid: var(--slotted-tone-warning-solid);--_solid-hover: var(--slotted-tone-warning-solid-hover);--_solid-active: var(--slotted-tone-warning-solid-active);--_on-solid: var(--slotted-tone-warning-on-solid);--_text: var(--slotted-tone-warning-text)}[data-ui=button][data-tone=danger]{--_solid: var(--slotted-tone-danger-solid);--_solid-hover: var(--slotted-tone-danger-solid-hover);--_solid-active: var(--slotted-tone-danger-solid-active);--_on-solid: var(--slotted-tone-danger-on-solid);--_text: var(--slotted-tone-danger-text)}[data-ui=button][data-size=sm]{--_height: var(--slotted-control-height-sm, 30px);--_padding-inline: var(--slotted-control-padding-inline-sm, 10px);--_font-size: var(--slotted-control-font-size-sm, 12px);--_icon-size: var(--slotted-control-icon-size-sm, 14px);--_gap: var(--slotted-control-gap-sm, 6px)}[data-ui=button][data-size=lg]{--_height: var(--slotted-control-height-lg, 38px);--_padding-inline: var(--slotted-control-padding-inline-lg, 16px);--_font-size: var(--slotted-control-font-size-lg, 14px);--_icon-size: var(--slotted-control-icon-size-lg, 18px);--_gap: var(--slotted-control-gap-lg, 8px)}[data-ui=button][data-variant=solid]{background:var(--_solid, ButtonFace);border-color:var(--_edge, ButtonBorder);box-shadow:var(--slotted-control-shadow, none);color:var(--_on-solid, ButtonText)}[data-ui=button][data-variant=outline]{background:transparent;border-color:var(--slotted-control-border-color, ButtonBorder);box-shadow:var(--slotted-control-shadow, none);color:var(--_text, ButtonText)}[data-ui=button][data-variant=ghost]{background:transparent;border-color:transparent;color:var(--_text, ButtonText)}[data-ui=button][data-variant=outline],[data-ui=button][data-variant=ghost],[data-ui=button][data-variant=solid][data-tone=secondary]{--_sweep-strength: .18}[data-ui=button][data-pressed]:not(:disabled):not([data-disabled]){background:var(--slotted-tone-accent-subtle-active, Highlight);border-color:var(--slotted-tone-accent-border, Highlight);box-shadow:var(--slotted-control-shadow, none);color:var(--slotted-tone-accent-text, HighlightText)}[data-ui=button][data-variant=solid]:hover:not(:disabled):not([data-disabled]):not([data-loading]):not([data-pressed]){background:var(--_solid-hover, Highlight)}[data-ui=button][data-variant=solid]:active:not(:disabled):not([data-disabled]):not([data-loading]):not([data-pressed]){background:var(--_solid-active, Highlight);box-shadow:none;transform:translateY(var(--slotted-border-width-thin, 1px));transition-duration:var(--slotted-duration-instant)}[data-ui=button][data-variant=outline]:hover:not(:disabled):not([data-disabled]):not([data-loading]):not([data-pressed]),[data-ui=button][data-variant=ghost]:hover:not(:disabled):not([data-disabled]):not([data-loading]):not([data-pressed]){background:var(--slotted-tone-secondary-subtle-hover, ButtonFace)}[data-ui=button][data-variant=outline]:active:not(:disabled):not([data-disabled]):not([data-loading]):not([data-pressed]),[data-ui=button][data-variant=ghost]:active:not(:disabled):not([data-disabled]):not([data-loading]):not([data-pressed]){background:var(--slotted-tone-secondary-subtle-active, ButtonFace);transition-duration:var(--slotted-duration-instant)}[data-ui=button][data-pressed]:hover:not(:disabled):not([data-disabled]):not([data-loading]){background:var(--slotted-tone-accent-subtle-hover, Highlight)}[data-ui=button][data-pressed]:active:not(:disabled):not([data-disabled]):not([data-loading]){background:var(--slotted-tone-accent-subtle-active, Highlight);transition-duration:var(--slotted-duration-instant)}[data-ui=button]: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=button]:disabled,[data-ui=button][data-disabled]{box-shadow:none;color:var(--slotted-disabled-foreground, GrayText);cursor:not-allowed}[data-ui=button][data-variant=solid]:disabled,[data-ui=button][data-variant=solid][data-disabled]{background:var(--slotted-disabled-background, ButtonFace);border-color:var(--slotted-disabled-border, ButtonBorder)}[data-ui=button][data-variant=outline]:disabled,[data-ui=button][data-variant=outline][data-disabled]{background:transparent;border-color:var(--slotted-disabled-border, GrayText)}[data-ui=button][data-pressed]:disabled,[data-ui=button][data-pressed][data-disabled]{background:var(--slotted-disabled-background, ButtonFace);border-color:var(--slotted-disabled-border, GrayText);color:var(--slotted-disabled-foreground, GrayText)}[data-ui=button][data-disabled]:not(:disabled){color:var(--slotted-text-muted, GrayText)}[data-ui=button][data-variant=solid][data-disabled]:not(:disabled),[data-ui=button][data-pressed][data-disabled]:not(:disabled){background:var(--slotted-tone-secondary-subtle-hover, ButtonFace);border-color:var(--slotted-border-subtle, GrayText);color:var(--slotted-text-muted, GrayText)}[data-ui=button][data-variant=outline][data-disabled]:not(:disabled){border-color:var(--slotted-border-subtle, GrayText)}[data-ui=button][data-loading]{cursor:progress}[data-ui=button][data-loading]:has(>[data-part=indicator])>:not([data-part=indicator]){opacity:0}[data-ui=button] [data-part=indicator]{--slotted-spinner-size: var(--_icon-size);flex:none}[data-ui=button]>[data-part=indicator]{inset:0;margin:auto;position:absolute}@media(prefers-reduced-motion:no-preference){@media not (forced-colors:active){[data-ui=button]:not([data-shape])[data-loading]:has([data-part=indicator]):after{animation:slotted-button-sweep var(--slotted-duration-loop) linear infinite;background-image:linear-gradient(to right,transparent,currentColor 40%,transparent 80%);background-repeat:repeat-x;background-size:var(--_sweep-width) 100%;border-radius:inherit;content:\"\";inset:0;opacity:var(--_sweep-strength);pointer-events:none;position:absolute}[data-ui=button]:not([data-shape])[data-loading]:has([data-part=indicator]):dir(rtl):after{animation-direction:reverse;background-image:linear-gradient(to left,transparent,currentColor 40%,transparent 80%)}[data-ui=button]:not([data-shape])[data-loading]:has(>[data-part=indicator])>:not([data-part=indicator]){opacity:1}[data-ui=button]:not([data-shape])[data-loading] [data-part=indicator]{opacity:0;position:absolute}}}[data-ui=button] [data-part=start],[data-ui=button] [data-part=end],[data-ui=button] [data-part=icon]{align-items:center;block-size:var(--_icon-size);box-sizing:border-box;display:inline-flex;flex:none;font-size:var(--_icon-size);inline-size:var(--_icon-size);justify-content:center;line-height:1;position:relative}[data-ui=button] [data-part=start]>*:not([data-part=indicator]),[data-ui=button] [data-part=end]>*:not([data-part=indicator]),[data-ui=button] [data-part=icon]>*:not([data-part=indicator]){block-size:100%;display:block;inline-size:100%}[data-ui=button] [data-part=label]{line-height:var(--slotted-line-height-sm, 1.45);min-inline-size:0;overflow-wrap:anywhere}@supports (text-box: trim-both cap alphabetic){[data-ui=button] [data-part=label]{padding-block:calc((var(--slotted-line-height-sm, 1.45) * 1em - .75em) / 2);text-box:trim-both cap alphabetic}}[data-ui=button]:not([data-shape]):has(>[data-part=start]){padding-inline-start:var(--_padding-inline-visual)}[data-ui=button]:not([data-shape]):has(>[data-part=end]){padding-inline-end:var(--_padding-inline-visual)}[data-ui=button][data-full-width]{inline-size:100%}[data-ui=button][data-shape]{aspect-ratio:1;inline-size:var(--_height);min-block-size:max(var(--_height),var(--slotted-target-min, 24px));min-inline-size:var(--slotted-target-min, 24px);padding-block:0;padding-inline:0}[data-ui=button][data-shape=circle]{border-radius:var(--slotted-radius-full, 9999px)}@media(forced-colors:active){[data-ui=button]{border-color:ButtonBorder}[data-ui=button][data-pressed]{border-color:Highlight}[data-ui=button]:disabled,[data-ui=button][data-disabled]{border-color:GrayText;color:GrayText}}@media(prefers-reduced-motion:reduce){[data-ui=button] [data-part=indicator]{animation:none}}}@keyframes slotted-button-sweep{0%{background-position-x:calc(-1 * var(--_sweep-width))}to{background-position-x:0}}\n", "@layer slotted.components{[data-ui=spinner]{--_size: var(--slotted-spinner-size, var(--slotted-control-icon-size-md, 16px));--_ring: calc(var(--_size) * 5 / 6);--_stroke: max(var(--slotted-border-width-medium, 1.5px), calc(var(--_size) / 12));--_radius: calc((var(--_ring) - var(--_stroke)) / 2);--_track: color-mix(in oklab, currentColor 20%, transparent);--_start: calc(var(--_turn) + var(--_tail));--_end: calc(var(--_turn) + var(--_head));--_cap: calc(var(--_stroke) / 2);animation:slotted-spinner-turn var(--slotted-duration-loop-slow) linear infinite,slotted-spinner-head var(--slotted-duration-loop-slow) linear infinite,slotted-spinner-tail var(--slotted-duration-loop-slow) linear infinite;background-image:radial-gradient(circle at calc(50% + var(--_radius) * sin(var(--_end))) calc(50% - var(--_radius) * cos(var(--_end))),currentColor calc(var(--_cap) - .5px),transparent calc(var(--_cap) + .5px)),radial-gradient(circle at calc(50% + var(--_radius) * sin(var(--_start))) calc(50% - var(--_radius) * cos(var(--_start))),currentColor calc(var(--_cap) - .5px),transparent calc(var(--_cap) + .5px)),conic-gradient(from var(--_start),currentColor 0deg,currentColor calc(var(--_head) - var(--_tail)),transparent calc(var(--_head) - var(--_tail))),conic-gradient(var(--_track) 0 100%);background-origin:content-box;background-clip:content-box;block-size:var(--_size);box-sizing:border-box;display:inline-block;flex:none;inline-size:var(--_size);-webkit-mask-image:radial-gradient(circle,transparent calc(var(--_ring) / 2 - var(--_stroke) - .5px),#000 calc(var(--_ring) / 2 - var(--_stroke) + .5px),#000 calc(var(--_ring) / 2 - .5px),transparent calc(var(--_ring) / 2 + .5px));mask-image:radial-gradient(circle,transparent calc(var(--_ring) / 2 - var(--_stroke) - .5px),#000 calc(var(--_ring) / 2 - var(--_stroke) + .5px),#000 calc(var(--_ring) / 2 - .5px),transparent calc(var(--_ring) / 2 + .5px));opacity:1;padding:calc((var(--_size) - var(--_ring)) / 2);scale:1;transition:opacity var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),scale var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);vertical-align:middle}@starting-style{[data-ui=spinner]{opacity:0;scale:.6}}@media(prefers-reduced-motion:reduce){[data-ui=spinner]{--_head: 270deg;animation:none}}@media(forced-colors:active){[data-ui=spinner]{forced-color-adjust:none}}}@property --_turn{inherits: false; initial-value: 0deg; syntax: \"<angle>\";}@property --_head{inherits: false; initial-value: 20deg; syntax: \"<angle>\";}@property --_tail{inherits: false; initial-value: 0deg; syntax: \"<angle>\";}@keyframes slotted-spinner-turn{to{--_turn: 460deg}}@keyframes slotted-spinner-head{0%{--_head: 20deg;animation-timing-function:ease-in-out}50%,to{--_head: 280deg}}@keyframes slotted-spinner-tail{0%,50%{--_tail: 0deg;animation-timing-function:ease-in-out}to{--_tail: 260deg}}\n"] }]
|
|
549
|
+
}], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], focusableWhenDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusableWhenDisabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingDelay", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], pressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "pressed", required: false }] }], defaultPressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultPressed", required: false }] }], pressedChange: [{ type: i0.Output, args: ["pressedChange"] }] } });
|
|
550
|
+
|
|
551
|
+
/**
|
|
552
|
+
* A two-state action. The APG is explicit that the label of a toggle must not
|
|
553
|
+
* change with its state — "Mute" stays "Mute" and the state is announced
|
|
554
|
+
* beside it — so this is a component of its own rather than an input on
|
|
555
|
+
* SlButton: reaching for it is what makes that obligation visible.
|
|
556
|
+
*
|
|
557
|
+
* It waits, because a toggle that persists is the common one: "Follow",
|
|
558
|
+
* "Subscribe" and "Watch" all reach a server before the state is true. While
|
|
559
|
+
* it waits it holds the state it still has, so the person is never shown a
|
|
560
|
+
* value that has not been agreed to.
|
|
561
|
+
*/
|
|
562
|
+
class SlToggleButton {
|
|
563
|
+
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
564
|
+
focusableWhenDisabled = input(false, { ...(ngDevMode ? { debugName: "focusableWhenDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
565
|
+
fullWidth = input(false, { ...(ngDevMode ? { debugName: "fullWidth" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
566
|
+
loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
567
|
+
loadingDelay = input(0, { ...(ngDevMode ? { debugName: "loadingDelay" } : /* istanbul ignore next */ {}), transform: numberAttribute });
|
|
568
|
+
/**
|
|
569
|
+
* Words laid over the catalog of the language in force, key by key: what the
|
|
570
|
+
* ring announces itself as (`loading`). It is a progress bar, so it has a name.
|
|
571
|
+
*/
|
|
572
|
+
messages = input(undefined, /* @ts-ignore */
|
|
573
|
+
...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
|
|
574
|
+
/** The family's words in the language in force, with this button's `messages` laid over them. */
|
|
575
|
+
t = injectMessages(buttonMessages, this.messages);
|
|
576
|
+
size = input(undefined, /* @ts-ignore */
|
|
577
|
+
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
578
|
+
tone = input(undefined, /* @ts-ignore */
|
|
579
|
+
...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
|
|
580
|
+
type = input('button', /* @ts-ignore */
|
|
581
|
+
...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
|
|
582
|
+
variant = input(undefined, /* @ts-ignore */
|
|
583
|
+
...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
584
|
+
/** Present means controlled, for the life of the component. */
|
|
585
|
+
pressed = input(undefined, { ...(ngDevMode ? { debugName: "pressed" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
|
|
586
|
+
defaultPressed = input(false, { ...(ngDevMode ? { debugName: "defaultPressed" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
587
|
+
/**
|
|
588
|
+
* One output for one transition, carrying the value, the value it replaces,
|
|
589
|
+
* the reason, the originating event and `cancel()`. There is no
|
|
590
|
+
* `[(pressed)]` because a two-way binding has one slot and cannot carry any
|
|
591
|
+
* of those, and a second output for the same transition would be the same
|
|
592
|
+
* failure stated twice.
|
|
593
|
+
*/
|
|
594
|
+
pressedChange = output();
|
|
595
|
+
stateAttribute = stateAttribute;
|
|
596
|
+
appearance = resolveAppearance(this, TOGGLE_BUTTON_DEFAULTS);
|
|
597
|
+
inert = resolveInertness(this);
|
|
598
|
+
waiting = resolveLoadingIndicator(this.loading, this.loadingDelay);
|
|
599
|
+
start = contentChild(SlButtonStart, /* @ts-ignore */
|
|
600
|
+
...(ngDevMode ? [{ debugName: "start" }] : /* istanbul ignore next */ []));
|
|
601
|
+
end = contentChild(SlButtonEnd, /* @ts-ignore */
|
|
602
|
+
...(ngDevMode ? [{ debugName: "end" }] : /* istanbul ignore next */ []));
|
|
603
|
+
hasStart = computed(() => this.start() !== undefined, /* @ts-ignore */
|
|
604
|
+
...(ngDevMode ? [{ debugName: "hasStart" }] : /* istanbul ignore next */ []));
|
|
605
|
+
hasVisualSlot = computed(() => this.start() !== undefined || this.end() !== undefined, /* @ts-ignore */
|
|
606
|
+
...(ngDevMode ? [{ debugName: "hasVisualSlot" }] : /* istanbul ignore next */ []));
|
|
607
|
+
state = new PressedState({
|
|
608
|
+
pressed: this.pressed,
|
|
609
|
+
defaultPressed: this.defaultPressed,
|
|
610
|
+
emit: (request) => this.pressedChange.emit(request),
|
|
611
|
+
});
|
|
612
|
+
isPressed = computed(() => this.state.value(), /* @ts-ignore */
|
|
613
|
+
...(ngDevMode ? [{ debugName: "isPressed" }] : /* istanbul ignore next */ []));
|
|
614
|
+
element = inject((ElementRef)).nativeElement;
|
|
615
|
+
destroyRef = inject(DestroyRef);
|
|
616
|
+
/**
|
|
617
|
+
* The capture phase, because a control that is unavailable or still working
|
|
618
|
+
* must refuse the activation before any listener the consumer attached to it
|
|
619
|
+
* can run.
|
|
620
|
+
*/
|
|
621
|
+
constructor() {
|
|
622
|
+
const capture = (event) => {
|
|
623
|
+
if (this.inert.refuses())
|
|
624
|
+
blockActivation(event);
|
|
625
|
+
};
|
|
626
|
+
this.element.addEventListener('click', capture, { capture: true });
|
|
627
|
+
this.destroyRef.onDestroy(() => this.element.removeEventListener('click', capture, { capture: true }));
|
|
628
|
+
}
|
|
629
|
+
/**
|
|
630
|
+
* After the view, not in the constructor. A `(click)` written on the same
|
|
631
|
+
* element is bound when the view is created, so a listener registered any
|
|
632
|
+
* earlier runs first and reads `defaultPrevented` before the consumer has
|
|
633
|
+
* had the chance to set it — and a refused activation would move the state
|
|
634
|
+
* anyway.
|
|
635
|
+
*/
|
|
636
|
+
ngAfterViewInit() {
|
|
637
|
+
const listener = (event) => {
|
|
638
|
+
if (this.inert.refuses() || event.defaultPrevented)
|
|
639
|
+
return;
|
|
640
|
+
this.state.request(event);
|
|
641
|
+
};
|
|
642
|
+
this.element.addEventListener('click', listener);
|
|
643
|
+
this.destroyRef.onDestroy(() => this.element.removeEventListener('click', listener));
|
|
644
|
+
}
|
|
645
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlToggleButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
646
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlToggleButton, isStandalone: true, selector: "button[slToggleButton]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, focusableWhenDisabled: { classPropertyName: "focusableWhenDisabled", publicName: "focusableWhenDisabled", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingDelay: { classPropertyName: "loadingDelay", publicName: "loadingDelay", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, pressed: { classPropertyName: "pressed", publicName: "pressed", isSignal: true, isRequired: false, transformFunction: null }, defaultPressed: { classPropertyName: "defaultPressed", publicName: "defaultPressed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pressedChange: "pressedChange" }, host: { attributes: { "data-ui": "button", "data-part": "root" }, properties: { "attr.aria-disabled": "inert.ariaDisabled()", "attr.aria-pressed": "isPressed()", "attr.data-tone": "appearance.tone()", "attr.data-variant": "appearance.variant()", "attr.data-size": "appearance.size()", "attr.data-full-width": "stateAttribute(fullWidth())", "attr.data-disabled": "stateAttribute(disabled())", "attr.data-loading": "stateAttribute(loading())", "attr.data-pressed": "stateAttribute(isPressed())", "disabled": "inert.nativelyDisabled()", "attr.type": "type()" } }, providers: [{ provide: BUTTON_WAIT, useExisting: forwardRef(() => SlToggleButton) }], queries: [{ propertyName: "start", first: true, predicate: SlButtonStart, descendants: true, isSignal: true }, { propertyName: "end", first: true, predicate: SlButtonEnd, descendants: true, isSignal: true }], exportAs: ["slToggleButton"], ngImport: i0, template: `<ng-content select="[slButtonStart]"></ng-content
|
|
647
|
+
><span data-part="label"><ng-content></ng-content></span
|
|
648
|
+
><ng-content select="[slButtonEnd]"></ng-content>
|
|
649
|
+
@if (waiting() && !hasVisualSlot()) {
|
|
650
|
+
<span
|
|
651
|
+
data-part="indicator"
|
|
652
|
+
data-ui="spinner"
|
|
653
|
+
role="progressbar"
|
|
654
|
+
[attr.aria-label]="t('loading')"
|
|
655
|
+
></span>
|
|
656
|
+
}`, isInline: true, styles: ["@layer slotted.components{[data-ui=button]{--_solid: var(--slotted-tone-accent-solid);--_solid-hover: var(--slotted-tone-accent-solid-hover);--_solid-active: var(--slotted-tone-accent-solid-active);--_on-solid: var(--slotted-tone-accent-on-solid);--_text: var(--slotted-tone-accent-text);--_edge: var(--_solid);--_height: var(--slotted-control-height-md, 34px);--_padding-inline: var(--slotted-control-padding-inline-md, 13px);--_font-size: var(--slotted-control-font-size-md, 13px);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_gap: var(--slotted-control-gap-md, 8px);--_padding-inline-visual: max( var(--slotted-space-2, .25rem), calc(var(--_padding-inline) - var(--slotted-space-2, .25rem)) );--_sweep-width: calc(var(--_height) * 2);--_sweep-strength: .34;align-items:center;appearance:none;background:transparent;border:var(--slotted-control-border-width, 1px) solid transparent;border-radius:var(--slotted-control-radius, 4px);box-sizing:border-box;cursor:pointer;display:inline-flex;font-family:var(--slotted-control-font-family, ui-sans-serif, system-ui, sans-serif);font-size:var(--_font-size);font-weight:var(--slotted-control-font-weight, 600);gap:var(--_gap);justify-content:center;letter-spacing:var(--slotted-control-letter-spacing, 0);line-height:var(--slotted-control-line-height, 1);max-inline-size:100%;min-block-size:var(--_height);padding-block:0;padding-inline:var(--_padding-inline);position:relative;text-align:center;text-decoration:none;text-wrap:balance;touch-action:manipulation;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),box-shadow var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),transform var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);-webkit-user-select:none;user-select:none;vertical-align:middle;-webkit-tap-highlight-color:transparent}[data-ui=button][data-tone=secondary]{--_solid: var(--slotted-tone-secondary-solid);--_solid-hover: var(--slotted-tone-secondary-solid-hover);--_solid-active: var(--slotted-tone-secondary-solid-active);--_on-solid: var(--slotted-tone-secondary-on-solid);--_text: var(--slotted-tone-secondary-text);--_edge: var(--_solid-active)}[data-ui=button][data-tone=success]{--_solid: var(--slotted-tone-success-solid);--_solid-hover: var(--slotted-tone-success-solid-hover);--_solid-active: var(--slotted-tone-success-solid-active);--_on-solid: var(--slotted-tone-success-on-solid);--_text: var(--slotted-tone-success-text)}[data-ui=button][data-tone=warning]{--_solid: var(--slotted-tone-warning-solid);--_solid-hover: var(--slotted-tone-warning-solid-hover);--_solid-active: var(--slotted-tone-warning-solid-active);--_on-solid: var(--slotted-tone-warning-on-solid);--_text: var(--slotted-tone-warning-text)}[data-ui=button][data-tone=danger]{--_solid: var(--slotted-tone-danger-solid);--_solid-hover: var(--slotted-tone-danger-solid-hover);--_solid-active: var(--slotted-tone-danger-solid-active);--_on-solid: var(--slotted-tone-danger-on-solid);--_text: var(--slotted-tone-danger-text)}[data-ui=button][data-size=sm]{--_height: var(--slotted-control-height-sm, 30px);--_padding-inline: var(--slotted-control-padding-inline-sm, 10px);--_font-size: var(--slotted-control-font-size-sm, 12px);--_icon-size: var(--slotted-control-icon-size-sm, 14px);--_gap: var(--slotted-control-gap-sm, 6px)}[data-ui=button][data-size=lg]{--_height: var(--slotted-control-height-lg, 38px);--_padding-inline: var(--slotted-control-padding-inline-lg, 16px);--_font-size: var(--slotted-control-font-size-lg, 14px);--_icon-size: var(--slotted-control-icon-size-lg, 18px);--_gap: var(--slotted-control-gap-lg, 8px)}[data-ui=button][data-variant=solid]{background:var(--_solid, ButtonFace);border-color:var(--_edge, ButtonBorder);box-shadow:var(--slotted-control-shadow, none);color:var(--_on-solid, ButtonText)}[data-ui=button][data-variant=outline]{background:transparent;border-color:var(--slotted-control-border-color, ButtonBorder);box-shadow:var(--slotted-control-shadow, none);color:var(--_text, ButtonText)}[data-ui=button][data-variant=ghost]{background:transparent;border-color:transparent;color:var(--_text, ButtonText)}[data-ui=button][data-variant=outline],[data-ui=button][data-variant=ghost],[data-ui=button][data-variant=solid][data-tone=secondary]{--_sweep-strength: .18}[data-ui=button][data-pressed]:not(:disabled):not([data-disabled]){background:var(--slotted-tone-accent-subtle-active, Highlight);border-color:var(--slotted-tone-accent-border, Highlight);box-shadow:var(--slotted-control-shadow, none);color:var(--slotted-tone-accent-text, HighlightText)}[data-ui=button][data-variant=solid]:hover:not(:disabled):not([data-disabled]):not([data-loading]):not([data-pressed]){background:var(--_solid-hover, Highlight)}[data-ui=button][data-variant=solid]:active:not(:disabled):not([data-disabled]):not([data-loading]):not([data-pressed]){background:var(--_solid-active, Highlight);box-shadow:none;transform:translateY(var(--slotted-border-width-thin, 1px));transition-duration:var(--slotted-duration-instant)}[data-ui=button][data-variant=outline]:hover:not(:disabled):not([data-disabled]):not([data-loading]):not([data-pressed]),[data-ui=button][data-variant=ghost]:hover:not(:disabled):not([data-disabled]):not([data-loading]):not([data-pressed]){background:var(--slotted-tone-secondary-subtle-hover, ButtonFace)}[data-ui=button][data-variant=outline]:active:not(:disabled):not([data-disabled]):not([data-loading]):not([data-pressed]),[data-ui=button][data-variant=ghost]:active:not(:disabled):not([data-disabled]):not([data-loading]):not([data-pressed]){background:var(--slotted-tone-secondary-subtle-active, ButtonFace);transition-duration:var(--slotted-duration-instant)}[data-ui=button][data-pressed]:hover:not(:disabled):not([data-disabled]):not([data-loading]){background:var(--slotted-tone-accent-subtle-hover, Highlight)}[data-ui=button][data-pressed]:active:not(:disabled):not([data-disabled]):not([data-loading]){background:var(--slotted-tone-accent-subtle-active, Highlight);transition-duration:var(--slotted-duration-instant)}[data-ui=button]: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=button]:disabled,[data-ui=button][data-disabled]{box-shadow:none;color:var(--slotted-disabled-foreground, GrayText);cursor:not-allowed}[data-ui=button][data-variant=solid]:disabled,[data-ui=button][data-variant=solid][data-disabled]{background:var(--slotted-disabled-background, ButtonFace);border-color:var(--slotted-disabled-border, ButtonBorder)}[data-ui=button][data-variant=outline]:disabled,[data-ui=button][data-variant=outline][data-disabled]{background:transparent;border-color:var(--slotted-disabled-border, GrayText)}[data-ui=button][data-pressed]:disabled,[data-ui=button][data-pressed][data-disabled]{background:var(--slotted-disabled-background, ButtonFace);border-color:var(--slotted-disabled-border, GrayText);color:var(--slotted-disabled-foreground, GrayText)}[data-ui=button][data-disabled]:not(:disabled){color:var(--slotted-text-muted, GrayText)}[data-ui=button][data-variant=solid][data-disabled]:not(:disabled),[data-ui=button][data-pressed][data-disabled]:not(:disabled){background:var(--slotted-tone-secondary-subtle-hover, ButtonFace);border-color:var(--slotted-border-subtle, GrayText);color:var(--slotted-text-muted, GrayText)}[data-ui=button][data-variant=outline][data-disabled]:not(:disabled){border-color:var(--slotted-border-subtle, GrayText)}[data-ui=button][data-loading]{cursor:progress}[data-ui=button][data-loading]:has(>[data-part=indicator])>:not([data-part=indicator]){opacity:0}[data-ui=button] [data-part=indicator]{--slotted-spinner-size: var(--_icon-size);flex:none}[data-ui=button]>[data-part=indicator]{inset:0;margin:auto;position:absolute}@media(prefers-reduced-motion:no-preference){@media not (forced-colors:active){[data-ui=button]:not([data-shape])[data-loading]:has([data-part=indicator]):after{animation:slotted-button-sweep var(--slotted-duration-loop) linear infinite;background-image:linear-gradient(to right,transparent,currentColor 40%,transparent 80%);background-repeat:repeat-x;background-size:var(--_sweep-width) 100%;border-radius:inherit;content:\"\";inset:0;opacity:var(--_sweep-strength);pointer-events:none;position:absolute}[data-ui=button]:not([data-shape])[data-loading]:has([data-part=indicator]):dir(rtl):after{animation-direction:reverse;background-image:linear-gradient(to left,transparent,currentColor 40%,transparent 80%)}[data-ui=button]:not([data-shape])[data-loading]:has(>[data-part=indicator])>:not([data-part=indicator]){opacity:1}[data-ui=button]:not([data-shape])[data-loading] [data-part=indicator]{opacity:0;position:absolute}}}[data-ui=button] [data-part=start],[data-ui=button] [data-part=end],[data-ui=button] [data-part=icon]{align-items:center;block-size:var(--_icon-size);box-sizing:border-box;display:inline-flex;flex:none;font-size:var(--_icon-size);inline-size:var(--_icon-size);justify-content:center;line-height:1;position:relative}[data-ui=button] [data-part=start]>*:not([data-part=indicator]),[data-ui=button] [data-part=end]>*:not([data-part=indicator]),[data-ui=button] [data-part=icon]>*:not([data-part=indicator]){block-size:100%;display:block;inline-size:100%}[data-ui=button] [data-part=label]{line-height:var(--slotted-line-height-sm, 1.45);min-inline-size:0;overflow-wrap:anywhere}@supports (text-box: trim-both cap alphabetic){[data-ui=button] [data-part=label]{padding-block:calc((var(--slotted-line-height-sm, 1.45) * 1em - .75em) / 2);text-box:trim-both cap alphabetic}}[data-ui=button]:not([data-shape]):has(>[data-part=start]){padding-inline-start:var(--_padding-inline-visual)}[data-ui=button]:not([data-shape]):has(>[data-part=end]){padding-inline-end:var(--_padding-inline-visual)}[data-ui=button][data-full-width]{inline-size:100%}[data-ui=button][data-shape]{aspect-ratio:1;inline-size:var(--_height);min-block-size:max(var(--_height),var(--slotted-target-min, 24px));min-inline-size:var(--slotted-target-min, 24px);padding-block:0;padding-inline:0}[data-ui=button][data-shape=circle]{border-radius:var(--slotted-radius-full, 9999px)}@media(forced-colors:active){[data-ui=button]{border-color:ButtonBorder}[data-ui=button][data-pressed]{border-color:Highlight}[data-ui=button]:disabled,[data-ui=button][data-disabled]{border-color:GrayText;color:GrayText}}@media(prefers-reduced-motion:reduce){[data-ui=button] [data-part=indicator]{animation:none}}}@keyframes slotted-button-sweep{0%{background-position-x:calc(-1 * var(--_sweep-width))}to{background-position-x:0}}\n", "@layer slotted.components{[data-ui=spinner]{--_size: var(--slotted-spinner-size, var(--slotted-control-icon-size-md, 16px));--_ring: calc(var(--_size) * 5 / 6);--_stroke: max(var(--slotted-border-width-medium, 1.5px), calc(var(--_size) / 12));--_radius: calc((var(--_ring) - var(--_stroke)) / 2);--_track: color-mix(in oklab, currentColor 20%, transparent);--_start: calc(var(--_turn) + var(--_tail));--_end: calc(var(--_turn) + var(--_head));--_cap: calc(var(--_stroke) / 2);animation:slotted-spinner-turn var(--slotted-duration-loop-slow) linear infinite,slotted-spinner-head var(--slotted-duration-loop-slow) linear infinite,slotted-spinner-tail var(--slotted-duration-loop-slow) linear infinite;background-image:radial-gradient(circle at calc(50% + var(--_radius) * sin(var(--_end))) calc(50% - var(--_radius) * cos(var(--_end))),currentColor calc(var(--_cap) - .5px),transparent calc(var(--_cap) + .5px)),radial-gradient(circle at calc(50% + var(--_radius) * sin(var(--_start))) calc(50% - var(--_radius) * cos(var(--_start))),currentColor calc(var(--_cap) - .5px),transparent calc(var(--_cap) + .5px)),conic-gradient(from var(--_start),currentColor 0deg,currentColor calc(var(--_head) - var(--_tail)),transparent calc(var(--_head) - var(--_tail))),conic-gradient(var(--_track) 0 100%);background-origin:content-box;background-clip:content-box;block-size:var(--_size);box-sizing:border-box;display:inline-block;flex:none;inline-size:var(--_size);-webkit-mask-image:radial-gradient(circle,transparent calc(var(--_ring) / 2 - var(--_stroke) - .5px),#000 calc(var(--_ring) / 2 - var(--_stroke) + .5px),#000 calc(var(--_ring) / 2 - .5px),transparent calc(var(--_ring) / 2 + .5px));mask-image:radial-gradient(circle,transparent calc(var(--_ring) / 2 - var(--_stroke) - .5px),#000 calc(var(--_ring) / 2 - var(--_stroke) + .5px),#000 calc(var(--_ring) / 2 - .5px),transparent calc(var(--_ring) / 2 + .5px));opacity:1;padding:calc((var(--_size) - var(--_ring)) / 2);scale:1;transition:opacity var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),scale var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);vertical-align:middle}@starting-style{[data-ui=spinner]{opacity:0;scale:.6}}@media(prefers-reduced-motion:reduce){[data-ui=spinner]{--_head: 270deg;animation:none}}@media(forced-colors:active){[data-ui=spinner]{forced-color-adjust:none}}}@property --_turn{inherits: false; initial-value: 0deg; syntax: \"<angle>\";}@property --_head{inherits: false; initial-value: 20deg; syntax: \"<angle>\";}@property --_tail{inherits: false; initial-value: 0deg; syntax: \"<angle>\";}@keyframes slotted-spinner-turn{to{--_turn: 460deg}}@keyframes slotted-spinner-head{0%{--_head: 20deg;animation-timing-function:ease-in-out}50%,to{--_head: 280deg}}@keyframes slotted-spinner-tail{0%,50%{--_tail: 0deg;animation-timing-function:ease-in-out}to{--_tail: 260deg}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
657
|
+
}
|
|
658
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlToggleButton, decorators: [{
|
|
659
|
+
type: Component,
|
|
660
|
+
args: [{ selector: 'button[slToggleButton]', standalone: true, template: `<ng-content select="[slButtonStart]"></ng-content
|
|
661
|
+
><span data-part="label"><ng-content></ng-content></span
|
|
662
|
+
><ng-content select="[slButtonEnd]"></ng-content>
|
|
663
|
+
@if (waiting() && !hasVisualSlot()) {
|
|
664
|
+
<span
|
|
665
|
+
data-part="indicator"
|
|
666
|
+
data-ui="spinner"
|
|
667
|
+
role="progressbar"
|
|
668
|
+
[attr.aria-label]="t('loading')"
|
|
669
|
+
></span>
|
|
670
|
+
}`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'slToggleButton', providers: [{ provide: BUTTON_WAIT, useExisting: forwardRef(() => SlToggleButton) }], host: {
|
|
671
|
+
'data-ui': 'button',
|
|
672
|
+
'data-part': 'root',
|
|
673
|
+
'[attr.aria-disabled]': 'inert.ariaDisabled()',
|
|
674
|
+
'[attr.aria-pressed]': 'isPressed()',
|
|
675
|
+
'[attr.data-tone]': 'appearance.tone()',
|
|
676
|
+
'[attr.data-variant]': 'appearance.variant()',
|
|
677
|
+
'[attr.data-size]': 'appearance.size()',
|
|
678
|
+
'[attr.data-full-width]': 'stateAttribute(fullWidth())',
|
|
679
|
+
'[attr.data-disabled]': 'stateAttribute(disabled())',
|
|
680
|
+
'[attr.data-loading]': 'stateAttribute(loading())',
|
|
681
|
+
'[attr.data-pressed]': 'stateAttribute(isPressed())',
|
|
682
|
+
'[disabled]': 'inert.nativelyDisabled()',
|
|
683
|
+
'[attr.type]': 'type()',
|
|
684
|
+
}, styles: ["@layer slotted.components{[data-ui=button]{--_solid: var(--slotted-tone-accent-solid);--_solid-hover: var(--slotted-tone-accent-solid-hover);--_solid-active: var(--slotted-tone-accent-solid-active);--_on-solid: var(--slotted-tone-accent-on-solid);--_text: var(--slotted-tone-accent-text);--_edge: var(--_solid);--_height: var(--slotted-control-height-md, 34px);--_padding-inline: var(--slotted-control-padding-inline-md, 13px);--_font-size: var(--slotted-control-font-size-md, 13px);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_gap: var(--slotted-control-gap-md, 8px);--_padding-inline-visual: max( var(--slotted-space-2, .25rem), calc(var(--_padding-inline) - var(--slotted-space-2, .25rem)) );--_sweep-width: calc(var(--_height) * 2);--_sweep-strength: .34;align-items:center;appearance:none;background:transparent;border:var(--slotted-control-border-width, 1px) solid transparent;border-radius:var(--slotted-control-radius, 4px);box-sizing:border-box;cursor:pointer;display:inline-flex;font-family:var(--slotted-control-font-family, ui-sans-serif, system-ui, sans-serif);font-size:var(--_font-size);font-weight:var(--slotted-control-font-weight, 600);gap:var(--_gap);justify-content:center;letter-spacing:var(--slotted-control-letter-spacing, 0);line-height:var(--slotted-control-line-height, 1);max-inline-size:100%;min-block-size:var(--_height);padding-block:0;padding-inline:var(--_padding-inline);position:relative;text-align:center;text-decoration:none;text-wrap:balance;touch-action:manipulation;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),box-shadow var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),transform var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);-webkit-user-select:none;user-select:none;vertical-align:middle;-webkit-tap-highlight-color:transparent}[data-ui=button][data-tone=secondary]{--_solid: var(--slotted-tone-secondary-solid);--_solid-hover: var(--slotted-tone-secondary-solid-hover);--_solid-active: var(--slotted-tone-secondary-solid-active);--_on-solid: var(--slotted-tone-secondary-on-solid);--_text: var(--slotted-tone-secondary-text);--_edge: var(--_solid-active)}[data-ui=button][data-tone=success]{--_solid: var(--slotted-tone-success-solid);--_solid-hover: var(--slotted-tone-success-solid-hover);--_solid-active: var(--slotted-tone-success-solid-active);--_on-solid: var(--slotted-tone-success-on-solid);--_text: var(--slotted-tone-success-text)}[data-ui=button][data-tone=warning]{--_solid: var(--slotted-tone-warning-solid);--_solid-hover: var(--slotted-tone-warning-solid-hover);--_solid-active: var(--slotted-tone-warning-solid-active);--_on-solid: var(--slotted-tone-warning-on-solid);--_text: var(--slotted-tone-warning-text)}[data-ui=button][data-tone=danger]{--_solid: var(--slotted-tone-danger-solid);--_solid-hover: var(--slotted-tone-danger-solid-hover);--_solid-active: var(--slotted-tone-danger-solid-active);--_on-solid: var(--slotted-tone-danger-on-solid);--_text: var(--slotted-tone-danger-text)}[data-ui=button][data-size=sm]{--_height: var(--slotted-control-height-sm, 30px);--_padding-inline: var(--slotted-control-padding-inline-sm, 10px);--_font-size: var(--slotted-control-font-size-sm, 12px);--_icon-size: var(--slotted-control-icon-size-sm, 14px);--_gap: var(--slotted-control-gap-sm, 6px)}[data-ui=button][data-size=lg]{--_height: var(--slotted-control-height-lg, 38px);--_padding-inline: var(--slotted-control-padding-inline-lg, 16px);--_font-size: var(--slotted-control-font-size-lg, 14px);--_icon-size: var(--slotted-control-icon-size-lg, 18px);--_gap: var(--slotted-control-gap-lg, 8px)}[data-ui=button][data-variant=solid]{background:var(--_solid, ButtonFace);border-color:var(--_edge, ButtonBorder);box-shadow:var(--slotted-control-shadow, none);color:var(--_on-solid, ButtonText)}[data-ui=button][data-variant=outline]{background:transparent;border-color:var(--slotted-control-border-color, ButtonBorder);box-shadow:var(--slotted-control-shadow, none);color:var(--_text, ButtonText)}[data-ui=button][data-variant=ghost]{background:transparent;border-color:transparent;color:var(--_text, ButtonText)}[data-ui=button][data-variant=outline],[data-ui=button][data-variant=ghost],[data-ui=button][data-variant=solid][data-tone=secondary]{--_sweep-strength: .18}[data-ui=button][data-pressed]:not(:disabled):not([data-disabled]){background:var(--slotted-tone-accent-subtle-active, Highlight);border-color:var(--slotted-tone-accent-border, Highlight);box-shadow:var(--slotted-control-shadow, none);color:var(--slotted-tone-accent-text, HighlightText)}[data-ui=button][data-variant=solid]:hover:not(:disabled):not([data-disabled]):not([data-loading]):not([data-pressed]){background:var(--_solid-hover, Highlight)}[data-ui=button][data-variant=solid]:active:not(:disabled):not([data-disabled]):not([data-loading]):not([data-pressed]){background:var(--_solid-active, Highlight);box-shadow:none;transform:translateY(var(--slotted-border-width-thin, 1px));transition-duration:var(--slotted-duration-instant)}[data-ui=button][data-variant=outline]:hover:not(:disabled):not([data-disabled]):not([data-loading]):not([data-pressed]),[data-ui=button][data-variant=ghost]:hover:not(:disabled):not([data-disabled]):not([data-loading]):not([data-pressed]){background:var(--slotted-tone-secondary-subtle-hover, ButtonFace)}[data-ui=button][data-variant=outline]:active:not(:disabled):not([data-disabled]):not([data-loading]):not([data-pressed]),[data-ui=button][data-variant=ghost]:active:not(:disabled):not([data-disabled]):not([data-loading]):not([data-pressed]){background:var(--slotted-tone-secondary-subtle-active, ButtonFace);transition-duration:var(--slotted-duration-instant)}[data-ui=button][data-pressed]:hover:not(:disabled):not([data-disabled]):not([data-loading]){background:var(--slotted-tone-accent-subtle-hover, Highlight)}[data-ui=button][data-pressed]:active:not(:disabled):not([data-disabled]):not([data-loading]){background:var(--slotted-tone-accent-subtle-active, Highlight);transition-duration:var(--slotted-duration-instant)}[data-ui=button]: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=button]:disabled,[data-ui=button][data-disabled]{box-shadow:none;color:var(--slotted-disabled-foreground, GrayText);cursor:not-allowed}[data-ui=button][data-variant=solid]:disabled,[data-ui=button][data-variant=solid][data-disabled]{background:var(--slotted-disabled-background, ButtonFace);border-color:var(--slotted-disabled-border, ButtonBorder)}[data-ui=button][data-variant=outline]:disabled,[data-ui=button][data-variant=outline][data-disabled]{background:transparent;border-color:var(--slotted-disabled-border, GrayText)}[data-ui=button][data-pressed]:disabled,[data-ui=button][data-pressed][data-disabled]{background:var(--slotted-disabled-background, ButtonFace);border-color:var(--slotted-disabled-border, GrayText);color:var(--slotted-disabled-foreground, GrayText)}[data-ui=button][data-disabled]:not(:disabled){color:var(--slotted-text-muted, GrayText)}[data-ui=button][data-variant=solid][data-disabled]:not(:disabled),[data-ui=button][data-pressed][data-disabled]:not(:disabled){background:var(--slotted-tone-secondary-subtle-hover, ButtonFace);border-color:var(--slotted-border-subtle, GrayText);color:var(--slotted-text-muted, GrayText)}[data-ui=button][data-variant=outline][data-disabled]:not(:disabled){border-color:var(--slotted-border-subtle, GrayText)}[data-ui=button][data-loading]{cursor:progress}[data-ui=button][data-loading]:has(>[data-part=indicator])>:not([data-part=indicator]){opacity:0}[data-ui=button] [data-part=indicator]{--slotted-spinner-size: var(--_icon-size);flex:none}[data-ui=button]>[data-part=indicator]{inset:0;margin:auto;position:absolute}@media(prefers-reduced-motion:no-preference){@media not (forced-colors:active){[data-ui=button]:not([data-shape])[data-loading]:has([data-part=indicator]):after{animation:slotted-button-sweep var(--slotted-duration-loop) linear infinite;background-image:linear-gradient(to right,transparent,currentColor 40%,transparent 80%);background-repeat:repeat-x;background-size:var(--_sweep-width) 100%;border-radius:inherit;content:\"\";inset:0;opacity:var(--_sweep-strength);pointer-events:none;position:absolute}[data-ui=button]:not([data-shape])[data-loading]:has([data-part=indicator]):dir(rtl):after{animation-direction:reverse;background-image:linear-gradient(to left,transparent,currentColor 40%,transparent 80%)}[data-ui=button]:not([data-shape])[data-loading]:has(>[data-part=indicator])>:not([data-part=indicator]){opacity:1}[data-ui=button]:not([data-shape])[data-loading] [data-part=indicator]{opacity:0;position:absolute}}}[data-ui=button] [data-part=start],[data-ui=button] [data-part=end],[data-ui=button] [data-part=icon]{align-items:center;block-size:var(--_icon-size);box-sizing:border-box;display:inline-flex;flex:none;font-size:var(--_icon-size);inline-size:var(--_icon-size);justify-content:center;line-height:1;position:relative}[data-ui=button] [data-part=start]>*:not([data-part=indicator]),[data-ui=button] [data-part=end]>*:not([data-part=indicator]),[data-ui=button] [data-part=icon]>*:not([data-part=indicator]){block-size:100%;display:block;inline-size:100%}[data-ui=button] [data-part=label]{line-height:var(--slotted-line-height-sm, 1.45);min-inline-size:0;overflow-wrap:anywhere}@supports (text-box: trim-both cap alphabetic){[data-ui=button] [data-part=label]{padding-block:calc((var(--slotted-line-height-sm, 1.45) * 1em - .75em) / 2);text-box:trim-both cap alphabetic}}[data-ui=button]:not([data-shape]):has(>[data-part=start]){padding-inline-start:var(--_padding-inline-visual)}[data-ui=button]:not([data-shape]):has(>[data-part=end]){padding-inline-end:var(--_padding-inline-visual)}[data-ui=button][data-full-width]{inline-size:100%}[data-ui=button][data-shape]{aspect-ratio:1;inline-size:var(--_height);min-block-size:max(var(--_height),var(--slotted-target-min, 24px));min-inline-size:var(--slotted-target-min, 24px);padding-block:0;padding-inline:0}[data-ui=button][data-shape=circle]{border-radius:var(--slotted-radius-full, 9999px)}@media(forced-colors:active){[data-ui=button]{border-color:ButtonBorder}[data-ui=button][data-pressed]{border-color:Highlight}[data-ui=button]:disabled,[data-ui=button][data-disabled]{border-color:GrayText;color:GrayText}}@media(prefers-reduced-motion:reduce){[data-ui=button] [data-part=indicator]{animation:none}}}@keyframes slotted-button-sweep{0%{background-position-x:calc(-1 * var(--_sweep-width))}to{background-position-x:0}}\n", "@layer slotted.components{[data-ui=spinner]{--_size: var(--slotted-spinner-size, var(--slotted-control-icon-size-md, 16px));--_ring: calc(var(--_size) * 5 / 6);--_stroke: max(var(--slotted-border-width-medium, 1.5px), calc(var(--_size) / 12));--_radius: calc((var(--_ring) - var(--_stroke)) / 2);--_track: color-mix(in oklab, currentColor 20%, transparent);--_start: calc(var(--_turn) + var(--_tail));--_end: calc(var(--_turn) + var(--_head));--_cap: calc(var(--_stroke) / 2);animation:slotted-spinner-turn var(--slotted-duration-loop-slow) linear infinite,slotted-spinner-head var(--slotted-duration-loop-slow) linear infinite,slotted-spinner-tail var(--slotted-duration-loop-slow) linear infinite;background-image:radial-gradient(circle at calc(50% + var(--_radius) * sin(var(--_end))) calc(50% - var(--_radius) * cos(var(--_end))),currentColor calc(var(--_cap) - .5px),transparent calc(var(--_cap) + .5px)),radial-gradient(circle at calc(50% + var(--_radius) * sin(var(--_start))) calc(50% - var(--_radius) * cos(var(--_start))),currentColor calc(var(--_cap) - .5px),transparent calc(var(--_cap) + .5px)),conic-gradient(from var(--_start),currentColor 0deg,currentColor calc(var(--_head) - var(--_tail)),transparent calc(var(--_head) - var(--_tail))),conic-gradient(var(--_track) 0 100%);background-origin:content-box;background-clip:content-box;block-size:var(--_size);box-sizing:border-box;display:inline-block;flex:none;inline-size:var(--_size);-webkit-mask-image:radial-gradient(circle,transparent calc(var(--_ring) / 2 - var(--_stroke) - .5px),#000 calc(var(--_ring) / 2 - var(--_stroke) + .5px),#000 calc(var(--_ring) / 2 - .5px),transparent calc(var(--_ring) / 2 + .5px));mask-image:radial-gradient(circle,transparent calc(var(--_ring) / 2 - var(--_stroke) - .5px),#000 calc(var(--_ring) / 2 - var(--_stroke) + .5px),#000 calc(var(--_ring) / 2 - .5px),transparent calc(var(--_ring) / 2 + .5px));opacity:1;padding:calc((var(--_size) - var(--_ring)) / 2);scale:1;transition:opacity var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),scale var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);vertical-align:middle}@starting-style{[data-ui=spinner]{opacity:0;scale:.6}}@media(prefers-reduced-motion:reduce){[data-ui=spinner]{--_head: 270deg;animation:none}}@media(forced-colors:active){[data-ui=spinner]{forced-color-adjust:none}}}@property --_turn{inherits: false; initial-value: 0deg; syntax: \"<angle>\";}@property --_head{inherits: false; initial-value: 20deg; syntax: \"<angle>\";}@property --_tail{inherits: false; initial-value: 0deg; syntax: \"<angle>\";}@keyframes slotted-spinner-turn{to{--_turn: 460deg}}@keyframes slotted-spinner-head{0%{--_head: 20deg;animation-timing-function:ease-in-out}50%,to{--_head: 280deg}}@keyframes slotted-spinner-tail{0%,50%{--_tail: 0deg;animation-timing-function:ease-in-out}to{--_tail: 260deg}}\n"] }]
|
|
685
|
+
}], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], focusableWhenDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusableWhenDisabled", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingDelay", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], pressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "pressed", required: false }] }], defaultPressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultPressed", required: false }] }], pressedChange: [{ type: i0.Output, args: ["pressedChange"] }], start: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SlButtonStart), { isSignal: true }] }], end: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SlButtonEnd), { isSignal: true }] }] } });
|
|
686
|
+
|
|
687
|
+
/**
|
|
688
|
+
* Generated bundle index. Do not edit.
|
|
689
|
+
*/
|
|
690
|
+
|
|
691
|
+
export { BUTTON_DEFAULTS_TOKEN, BUTTON_WAIT, SlButton, SlButtonEnd, SlButtonLink, SlButtonStart, SlIconButton, SlToggleButton, blockActivation, injectButtonDefaults, provideButtonDefaults, resolveInertness, resolveLoadingIndicator, stateAttribute };
|
|
692
|
+
//# sourceMappingURL=slotted-angular-button.mjs.map
|